/* Sinora Admin motion layer.
   Tokens and behaviours are copied from the approved workspace motion system
   (cerebrex plugins/web-ui/src/arc-polish.css), which is modelled on Arc UI: short enters,
   faster exits, springs with a gentle settle, small travel (3 to 16px), small scale
   (0.94 to 0.98) and a plain reduced-motion branch. Colours, type and layout still come
   from admin.css and admin-console.css. Keyframes animate the individual translate/scale
   properties so they compose with any positioning transform an element already has. */

:root {
  --arc-duration-instant: 120ms;
  --arc-duration-fast: 160ms;
  --arc-duration-standard: 240ms;
  --arc-duration-considered: 480ms;
  --arc-duration-spring: 580ms;
  --arc-duration-snappy: 360ms;
  --arc-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --arc-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --arc-ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  /* Damped springs sampled into linear(): a gentle settle for panels, a quicker one for presses. */
  --arc-ease-spring: linear(0, 0.0192, 0.0684, 0.1367, 0.2161, 0.3003, 0.3848, 0.4665, 0.5433, 0.6137, 0.6773, 0.7336, 0.7828, 0.8252, 0.8614, 0.8918, 0.9171, 0.9379, 0.9547, 0.9682, 0.9788, 0.987, 0.9932, 0.9979, 1.0012, 1.0035, 1.005, 1.0058, 1.0062, 1.0063, 1.0061, 1.0057, 1.0053, 1.0048, 1.0042, 1.0037, 1.0032, 1.0027, 1.0023, 1.0019, 1);
  --arc-ease-snappy: linear(0, 0.0343, 0.1163, 0.2219, 0.3352, 0.446, 0.5482, 0.6387, 0.7165, 0.7815, 0.8348, 0.8775, 0.9111, 0.9372, 0.9569, 0.9716, 0.9823, 0.9899, 0.9951, 0.9986, 1.0008, 1.0021, 1.0027, 1.003, 1.0029, 1.0027, 1.0024, 1.002, 1);
  --arc-shadow-resting: 0 1px 2px rgb(0 0 0 / 0.035);
  --arc-shadow-raised: 0 6px 18px rgb(0 0 0 / 0.065), 0 1px 3px rgb(0 0 0 / 0.035);
  --arc-shadow-floating: 0 20px 48px rgb(0 0 0 / 0.105), 0 3px 10px rgb(0 0 0 / 0.045);
  --arc-focus-ring: color-mix(in srgb, var(--text-primary, #1C1917) 50%, transparent);
}

/* Presses: buttons give a little under the pointer and spring back. No hover lift. */
:where(.btn, .ui-icon-btn, .modal-close, .nav-item, .nav-subitem, .ui-chip, .ui-seg-item, .ui-menu-item,
  .ui-page-btn, .ui-tile, .dashboard-shortcut, .hamburger, .anon-toggle, .theme-toggle) {
  transition:
    scale var(--arc-duration-snappy) var(--arc-ease-snappy),
    background-color var(--arc-duration-fast) var(--arc-ease-standard),
    border-color var(--arc-duration-fast) var(--arc-ease-standard),
    color var(--arc-duration-fast) var(--arc-ease-standard),
    box-shadow var(--arc-duration-standard) var(--arc-ease-standard);
}
:where(.btn, .ui-chip, .ui-seg-item, .ui-page-btn, .ui-tile, .dashboard-shortcut, .nav-subitem):active:not(:disabled) {
  scale: 0.97;
}
:where(.ui-icon-btn, .modal-close, .hamburger):active:not(:disabled) {
  scale: 0.94;
}
/* A trigger that anchors a menu keeps its size, so the menu does not shift as it springs back. */
:where([aria-haspopup]):active {
  scale: none;
}
/* The older stylesheet lifts buttons on hover. The approved motion has no hover lift. */
.admin-shell .btn:hover,
.admin-shell .btn:focus-visible,
.modal-overlay .btn:hover,
.modal-overlay .btn:focus-visible,
.login-modal .btn:hover,
.admin-shell .modal-close:hover,
.modal-overlay .modal-close:hover {
  transform: none;
}

:where(.btn, .ui-icon-btn, .modal-close, .nav-item, .nav-subitem, .ui-chip, .ui-seg-item, .ui-menu-item,
  .ui-page-btn, .ui-tile, .ui-switch, .dashboard-shortcut, .fleet-row-open, .hamburger, .ui-drawer-close):focus-visible {
  outline: 2px solid var(--arc-focus-ring);
  outline-offset: 2px;
}

/* Sidebar rows settle in colour, not position. The current page is a resting raised row. */
.sidebar :where(.nav-item, .nav-subitem) {
  transition:
    background-color var(--arc-duration-fast) var(--arc-ease-standard),
    color var(--arc-duration-fast) var(--arc-ease-standard),
    box-shadow var(--arc-duration-standard) var(--arc-ease-standard),
    scale var(--arc-duration-snappy) var(--arc-ease-snappy);
}
.sidebar .nav-subitem.active {
  box-shadow: var(--arc-shadow-resting), 0 0 0 1px var(--border-secondary);
}
.nav-sub {
  transition:
    grid-template-rows var(--arc-duration-standard) var(--arc-ease-standard),
    opacity var(--arc-duration-fast) var(--arc-ease-standard);
}

/* Segmented control: one pill slides between segments (ui.js adds it). */
.ui-seg-pill {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 0;
  border-radius: 999px;
  background: var(--bg-secondary, #fff);
  box-shadow: var(--arc-shadow-resting), 0 0 0 1px var(--border-secondary);
  pointer-events: none;
  transition:
    translate var(--arc-duration-spring) var(--arc-ease-spring),
    width var(--arc-duration-spring) var(--arc-ease-spring);
}

/* Switch: the thumb travels on a quick spring and stretches while pressed. */
.ui-switch-track {
  transition: background-color var(--arc-duration-fast) var(--arc-ease-standard);
}
.ui-switch-thumb {
  transition:
    left var(--arc-duration-snappy) var(--arc-ease-snappy),
    width var(--arc-duration-snappy) var(--arc-ease-snappy);
}
.ui-switch:active:not(:disabled) .ui-switch-thumb {
  width: 22px;
}
.ui-switch[aria-checked="true"]:active:not(:disabled) .ui-switch-thumb {
  left: 12px;
}

/* Tiles and table rows: a quiet shadow or colour change, never a lift. */
:where(.ui-tile) {
  transition:
    box-shadow var(--arc-duration-standard) var(--arc-ease-standard),
    background-color var(--arc-duration-fast) var(--arc-ease-standard),
    border-color var(--arc-duration-fast) var(--arc-ease-standard),
    scale var(--arc-duration-snappy) var(--arc-ease-snappy);
}
:where(.ui-tile):hover {
  box-shadow: var(--arc-shadow-raised);
}
.admin-table tbody tr {
  transition: background-color var(--arc-duration-fast) var(--arc-ease-standard);
}
:where(.ui-attention-item, .dashboard-shortcut) > svg:last-child {
  transition: translate var(--arc-duration-snappy) var(--arc-ease-snappy);
}
:where(.ui-attention-item, .dashboard-shortcut):hover > svg:last-child {
  translate: 2px 0;
}

/* Pages appear in: a short fade and 4px rise, and the page title reveals out of a soft blur. */
.section.active {
  animation:
    arc-fade var(--arc-duration-standard) var(--arc-ease-enter) both,
    arc-rise-4 var(--arc-duration-spring) var(--arc-ease-spring) both;
}
.section.active > .section-header h2 {
  animation: arc-blur-in var(--arc-duration-considered) var(--arc-ease-enter) both;
}
.section.active :where(.ui-tiles, .overview-attention, .stats-bar) {
  animation:
    arc-fade var(--arc-duration-standard) var(--arc-ease-enter) both,
    arc-rise-4 var(--arc-duration-spring) var(--arc-ease-spring) both;
  animation-delay: 30ms;
}
.section.active :where(.admin-table-wrap, .overview-analytics) {
  animation:
    arc-fade var(--arc-duration-standard) var(--arc-ease-enter) both,
    arc-rise-4 var(--arc-duration-spring) var(--arc-ease-spring) both;
  animation-delay: 60ms;
}

/* Menus: settle 5px toward their trigger from 0.97, items fade in on a 15ms stagger. */
.ui-menu-popover:not([hidden]) {
  transform-origin: top right;
  animation:
    arc-fade var(--arc-duration-fast) var(--arc-ease-enter) both,
    arc-settle-down var(--arc-duration-spring) var(--arc-ease-spring) both;
}
.ui-menu-popover.is-above:not([hidden]) {
  transform-origin: bottom right;
  animation:
    arc-fade var(--arc-duration-fast) var(--arc-ease-enter) both,
    arc-settle-up var(--arc-duration-spring) var(--arc-ease-spring) both;
}
.ui-menu-popover.is-closing {
  animation: arc-fade-out var(--arc-duration-instant) var(--arc-ease-exit) both;
}
.ui-menu-popover:not([hidden]) > * {
  animation: arc-fade var(--arc-duration-fast) var(--arc-ease-enter) both;
}
.ui-menu-popover > :nth-child(2) { animation-delay: 15ms; }
.ui-menu-popover > :nth-child(3) { animation-delay: 30ms; }
.ui-menu-popover > :nth-child(4) { animation-delay: 45ms; }
.ui-menu-popover > :nth-child(5) { animation-delay: 60ms; }
.ui-menu-popover > :nth-child(n + 6) { animation-delay: 75ms; }

/* Dialogs: the overlay fades with a light 4px blur, the panel rises 8px from 0.96. */
.modal-overlay.active {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: arc-fade var(--arc-duration-standard) var(--arc-ease-standard) both;
}
.modal-overlay.active > .modal-box,
.modal-overlay.active > .login-box {
  box-shadow: var(--arc-shadow-floating);
  animation:
    arc-fade var(--arc-duration-fast) var(--arc-ease-enter) both,
    arc-dialog-in var(--arc-duration-spring) var(--arc-ease-spring) both;
}
.modal-overlay.is-closing {
  animation: arc-fade-out var(--arc-duration-fast) var(--arc-ease-exit) both;
}
.modal-overlay.is-closing > .modal-box {
  animation: arc-dialog-out var(--arc-duration-fast) var(--arc-ease-exit) both;
}

/* Drawer: the panel slides a short way in from the right while the scrim fades. */
.ui-drawer.is-open .ui-drawer-panel {
  animation:
    arc-fade var(--arc-duration-fast) var(--arc-ease-enter) both,
    arc-drawer-in var(--arc-duration-spring) var(--arc-ease-spring) both;
}
.ui-drawer.is-open .ui-drawer-scrim {
  animation: arc-fade var(--arc-duration-standard) var(--arc-ease-standard) both;
}
.ui-drawer.is-closing .ui-drawer-panel {
  animation: arc-drawer-out var(--arc-duration-fast) var(--arc-ease-exit) both;
}
.ui-drawer.is-closing .ui-drawer-scrim {
  animation: arc-fade-out var(--arc-duration-fast) var(--arc-ease-exit) both;
}

/* In-place confirmation: the panel opens beneath its action with a short settle. */
.ui-inline-confirm {
  animation:
    arc-fade var(--arc-duration-fast) var(--arc-ease-enter) both,
    arc-settle-down var(--arc-duration-spring) var(--arc-ease-spring) both;
}

/* Toasts rise 16px from 0.96. */
.ui-toast {
  animation:
    arc-fade var(--arc-duration-fast) var(--arc-ease-enter) both,
    arc-toast-in var(--arc-duration-spring) var(--arc-ease-spring) both;
}
.ui-toast.is-leaving {
  animation: arc-toast-out var(--arc-duration-fast) var(--arc-ease-exit) both;
}

/* Selection bar rises like a toast when the first row is checked. */
.ui-selection-bar:not([hidden]) {
  animation:
    arc-fade var(--arc-duration-fast) var(--arc-ease-enter) both,
    arc-toast-in var(--arc-duration-spring) var(--arc-ease-spring) both;
}

/* Loading shimmer for state blocks. */
.ui-skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
  background-size: 200% 100%;
  animation: arc-shimmer 1.4s linear infinite;
}

@keyframes arc-fade { from { opacity: 0; } }
@keyframes arc-fade-out { to { opacity: 0; } }
@keyframes arc-rise-4 { from { translate: 0 4px; } }
@keyframes arc-blur-in { from { opacity: 0; filter: blur(6px); translate: 0 4px; } }
@keyframes arc-settle-up { from { translate: 0 5px; scale: 0.97; } }
@keyframes arc-settle-down { from { translate: 0 -5px; scale: 0.97; } }
@keyframes arc-dialog-in { from { translate: 0 8px; scale: 0.96; } }
@keyframes arc-dialog-out { to { opacity: 0; translate: 0 4px; scale: 0.98; } }
@keyframes arc-drawer-in { from { translate: 24px 0; } }
@keyframes arc-drawer-out { to { opacity: 0; translate: 16px 0; } }
@keyframes arc-toast-in { from { translate: 0 16px; scale: 0.96; } }
@keyframes arc-toast-out { to { opacity: 0; translate: 0 8px; scale: 0.98; } }
@keyframes arc-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  :where(.btn, .ui-icon-btn, .modal-close, .nav-item, .nav-subitem, .ui-chip, .ui-seg-item, .ui-page-btn,
    .ui-tile, .dashboard-shortcut, .hamburger, .anon-toggle, .theme-toggle),
  :where(.ui-attention-item, .dashboard-shortcut) > svg:last-child {
    scale: none !important;
    translate: none !important;
  }
  .section.active,
  .section.active > .section-header h2,
  .section.active :where(.ui-tiles, .overview-attention, .stats-bar, .admin-table-wrap, .overview-analytics),
  .ui-menu-popover:not([hidden]),
  .ui-menu-popover:not([hidden]) > *,
  .modal-overlay.active,
  .modal-overlay.active > .modal-box,
  .modal-overlay.active > .login-box,
  .ui-drawer.is-open .ui-drawer-panel,
  .ui-drawer.is-open .ui-drawer-scrim,
  .ui-inline-confirm,
  .ui-toast,
  .ui-selection-bar:not([hidden]) {
    animation: arc-fade var(--arc-duration-instant) linear both;
  }
  .ui-menu-popover.is-closing,
  .modal-overlay.is-closing,
  .modal-overlay.is-closing > .modal-box,
  .ui-drawer.is-closing .ui-drawer-panel,
  .ui-drawer.is-closing .ui-drawer-scrim,
  .ui-toast.is-leaving {
    animation: arc-fade-out var(--arc-duration-instant) linear both;
  }
  .ui-seg-pill,
  .ui-switch-thumb,
  .nav-sub {
    transition: none;
  }
  .ui-skeleton {
    animation: none;
  }
}