/* ==========================================================================
   MyABR MOTION KIT - shared by the customer/accountant/affiliate portal and
   the staff app. Small, calm and fast: every click gets feedback inside
   100ms. Everything here switches off for people who ask their device to
   reduce motion (bottom of file).
   ========================================================================== */

:root {
  --mo-ease: cubic-bezier(.2, .7, .2, 1);
  --mo-fast: 140ms;
  --mo-med: 220ms;
  --mo-ink: #140A3C;
  --mo-mint: #45E2CA;
}

/* ---- page to page: cross-fade instead of a white flash (Chrome, Edge, Safari 18+) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mo-fade-out 120ms ease both; }
::view-transition-new(root) { animation: mo-fade-in 200ms var(--mo-ease) both; }
.mp-side, body.admin-view .sidebar, body.team-member-view .sidebar { view-transition-name: mo-side; }
.mp-top, body.admin-view #default-navbar, body.team-member-view #default-navbar { view-transition-name: mo-top; }
::view-transition-old(mo-side), ::view-transition-new(mo-side),
::view-transition-old(mo-top), ::view-transition-new(mo-top) { animation: none; }

/* ---- top loading bar ---- */
.mo-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 99999; background: linear-gradient(90deg, var(--mo-mint), #7471E8); box-shadow: 0 0 8px rgba(69,226,202,.6); opacity: 0; pointer-events: none; transition: width 300ms var(--mo-ease), opacity 200ms; }
.mo-bar.is-on { opacity: 1; }

/* ---- things arriving: fade + 8px rise, staggered by JS (--mo-i) ---- */
/* backwards, not both: a leftover transform would trap position:fixed popups inside the card */
.mo-in { animation: mo-rise 360ms var(--mo-ease) backwards; animation-delay: calc(var(--mo-i, 0) * 40ms); }

/* ---- hover + press feedback ---- */
.mp-card, .sh-card, .sh-tile, .ops-kpi, .mp-stat, .site-plan,
body.admin-view .card, body.team-member-view .card {
  transition: transform var(--mo-med) var(--mo-ease), box-shadow var(--mo-med) var(--mo-ease), border-color var(--mo-fast);
}
a.mp-card:hover, a.sh-tile:hover, .mp-card.mo-click:hover, a.ops-kpi:hover, .site-plan:hover,
.mp-card:has(> a.mp-stretch):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(20,10,60,.10);
  border-color: #CDCBE0;
}
.mp-btn, .btn, .sh-pill, .mp-chip, .mp-nav a, .sidebar-menu li a, .mp-bar a, button {
  transition: background-color var(--mo-fast), color var(--mo-fast), border-color var(--mo-fast), box-shadow var(--mo-fast), transform 90ms;
}
.mp-btn:active, .btn:active, .sh-pill:active, .mp-bar a:active, button:active:not(:disabled) { transform: scale(.98); }
.mp-btn:focus-visible, .btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid rgba(116,113,232,.45); outline-offset: 2px; }
.mp-table tbody tr, .sh-table tbody tr, body.admin-view .table tbody tr, body.team-member-view .table tbody tr { transition: background-color var(--mo-fast); }
.mp-table tbody tr:hover, .sh-table tbody tr:hover, body.admin-view .table tbody tr:hover, body.team-member-view .table tbody tr:hover { background: #F7F7FB; }
.mp-nav a:hover > svg, .sidebar-menu li a:hover .icon { transform: translateX(1px); transition: transform var(--mo-fast); }

/* ---- progress bars / steppers fill in ---- */
.mp-steps-bar > span, .mp-progress > span, .ops-hbar span, .ops-colbar { transform-origin: left center; }
.mo-fill { animation: mo-grow-x 600ms var(--mo-ease) both; animation-delay: calc(var(--mo-i, 0) * 60ms + 120ms); }
.mo-fill-y { transform-origin: bottom center; animation: mo-grow-y 700ms var(--mo-ease) both; animation-delay: calc(var(--mo-i, 0) * 50ms + 150ms); }

/* ---- skeleton shimmer (loading placeholders) ---- */
.mo-skel { position: relative; overflow: hidden; background: #ECEBF3; border-radius: 10px; color: transparent !important; }
.mo-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: mo-shimmer 1.2s infinite; }
body.admin-view .dataTables_processing, body.team-member-view .dataTables_processing, .mp .dataTables_processing {
  background: rgba(255,255,255,.85) !important; border: 0 !important; box-shadow: none !important; color: transparent !important;
  height: 4px !important; padding: 0 !important; top: 0 !important; left: 0 !important; width: 100% !important; margin: 0 !important; overflow: hidden;
}
body.admin-view .dataTables_processing::after, body.team-member-view .dataTables_processing::after, .mp .dataTables_processing::after {
  content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, var(--mo-mint), #7471E8); animation: mo-slide 900ms ease-in-out infinite;
}

/* ---- toasts: RISE appAlert in the MyABR look (ink card, mint tick) ---- */
.app-alert.alert {
  background: var(--mo-ink) !important; color: #fff !important; border: 0 !important; border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(20,10,60,.28) !important; font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: 15px;
  padding: 14px 44px 14px 46px !important; min-width: 260px; max-width: 420px; animation: mo-toast-in 260ms var(--mo-ease) both;
}
.app-alert.alert::before {
  content: ""; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%;
  background: var(--mo-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140A3C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.app-alert.alert-danger::before { background: #F97066 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cline x1='12' y1='7' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center / 12px no-repeat; }
.app-alert.alert-warning::before { background: #FDB022 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140A3C' stroke-width='3.2' stroke-linecap='round'%3E%3Cline x1='12' y1='7' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center / 12px no-repeat; }
.app-alert.alert-info::before { background: #7471E8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cline x1='12' y1='11' x2='12' y2='17'/%3E%3Cline x1='12' y1='7' x2='12.01' y2='7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.app-alert.alert a, .app-alert.alert a.color-white { color: var(--mo-mint) !important; font-weight: 700; }
.app-alert .progress { background: rgba(255,255,255,.12) !important; height: 3px !important; position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0 0 14px 14px; }
.app-alert .progress-bar { background: var(--mo-mint) !important; }
.app-alert .btn-close { top: 50% !important; transform: translateY(-50%); }
.mp-toast { animation: mo-toast-in 260ms var(--mo-ease) both; }
@media (max-width: 767px) {
  .app-alert.alert { left: 12px !important; right: 12px !important; max-width: none; min-width: 0; }
}

/* ---- modals: soft scale-in, bottom sheet on phones ---- */
.modal.fade .modal-dialog { transform: translateY(12px) scale(.98); transition: transform 240ms var(--mo-ease) !important; }
.modal.show .modal-dialog { transform: none; }
.modal-content { border-radius: 18px !important; border: 0 !important; box-shadow: 0 24px 60px rgba(20,10,60,.25); }
.modal-backdrop.show { background: #100830; opacity: .55 !important; }
@media (max-width: 575px) {
  .modal-dialog:not(.modal-fullscreen) { margin: 0 !important; position: fixed; left: 0; right: 0; bottom: 0; max-width: none !important; }
  .modal.fade .modal-dialog:not(.modal-fullscreen) { transform: translateY(100%); }
  .modal.show .modal-dialog:not(.modal-fullscreen) { transform: none; }
  .modal-dialog:not(.modal-fullscreen) .modal-content { border-radius: 22px 22px 0 0 !important; max-height: 88vh; overflow: auto; }
  .modal-dialog:not(.modal-fullscreen) .modal-content::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: #D6D4E4; margin: 8px auto 0; }
}

/* ---- dropdowns ---- */
.dropdown-menu.show { animation: mo-drop 160ms var(--mo-ease) backwards; }
.dropdown-menu { border-radius: 14px !important; border-color: #E5E4ED !important; box-shadow: 0 16px 40px rgba(20,10,60,.14) !important; }

/* ---- celebrate ---- */
.mo-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 99998; overflow: hidden; }
.mo-confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: mo-drop-fall 1.6s cubic-bezier(.3,.6,.4,1) forwards; }

@keyframes mo-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mo-fade-out { to { opacity: 0; } }
@keyframes mo-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mo-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mo-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mo-shimmer { to { transform: translateX(100%); } }
@keyframes mo-slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes mo-toast-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes mo-drop { from { opacity: 0; } to { opacity: 1; } }
@keyframes mo-drop-fall { to { transform: translate3d(var(--dx, 0), 105vh, 0) rotate(var(--rot, 540deg)); opacity: .9; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .mo-confetti { display: none; }
}

/* stepper segments (customer orders) fill in */
.mp-hsteps div.is-done::before, .mp-hsteps div.is-now::before, .mp-progress span.is-done, .mp-progress span.is-now { transform-origin: left center; animation: mo-grow-x 600ms var(--mo-ease) both; }
.mp-hsteps div:nth-child(2)::before, .mp-progress span:nth-child(2) { animation-delay: 80ms; }
.mp-hsteps div:nth-child(3)::before, .mp-progress span:nth-child(3) { animation-delay: 160ms; }
.mp-hsteps div:nth-child(4)::before, .mp-progress span:nth-child(4) { animation-delay: 240ms; }
.mp-hsteps div:nth-child(5)::before, .mp-progress span:nth-child(5) { animation-delay: 320ms; }
.mp-hsteps div:nth-child(6)::before, .mp-progress span:nth-child(6) { animation-delay: 400ms; }