/* Motion and polish for the admin dashboard. Additive only: no layout, colour-token or
   spacing rule here changes where anything sits. Entrance animations end at "no transform"
   so fixed-position children (modals, toasts) are never trapped, and everything is switched
   off for people who ask their device to reduce motion. */

:root {
    --motion-fast: 140ms;
    --motion-base: 240ms;
    --motion-slow: 520ms;
    --motion-ease: cubic-bezier(.2, .7, .2, 1);
    --motion-accent: var(--admin-blue, #3b6cff);
}

@keyframes co-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes co-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes co-pop { 0% { opacity: 0; transform: scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes co-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes co-sheen { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes co-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .45); } 60% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } }

/* ---- page entrance: heading first, then each block in turn ---------------------------- */
.dashboard-main > * { animation: co-rise var(--motion-slow) var(--motion-ease) backwards; } /* backwards: no transform left behind, so fixed popups stay on screen */
.dashboard-main > *:nth-child(1) { animation-delay: 0ms; }
.dashboard-main > *:nth-child(2) { animation-delay: 60ms; }
.dashboard-main > *:nth-child(3) { animation-delay: 120ms; }
.dashboard-main > *:nth-child(4) { animation-delay: 180ms; }
.dashboard-main > *:nth-child(5) { animation-delay: 240ms; }
.dashboard-main > *:nth-child(n+6) { animation-delay: 300ms; }

/* cards inside grids come in one after another */
.module-overview-grid > *, .stats-grid > *, .settings-grid > * { animation: co-rise var(--motion-slow) var(--motion-ease) both; }
.module-overview-grid > *:nth-child(2), .stats-grid > *:nth-child(2), .settings-grid > *:nth-child(2) { animation-delay: 70ms; }
.module-overview-grid > *:nth-child(3), .stats-grid > *:nth-child(3), .settings-grid > *:nth-child(3) { animation-delay: 140ms; }
.module-overview-grid > *:nth-child(4), .stats-grid > *:nth-child(4), .settings-grid > *:nth-child(4) { animation-delay: 210ms; }
.module-overview-grid > *:nth-child(n+5), .stats-grid > *:nth-child(n+5), .settings-grid > *:nth-child(n+5) { animation-delay: 280ms; }

/* ---- cards: lift, glow and a moving highlight on hover ------------------------------- */
.module-overview-card, .stat-card, .settings-card {
    position: relative;
    transition: transform var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease),
                border-color var(--motion-base) var(--motion-ease);
    will-change: transform;
}
.module-overview-card:hover, .stat-card:hover, .settings-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--motion-accent) 55%, transparent);
    box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--motion-accent) 70%, transparent), 0 2px 0 0 rgba(255, 255, 255, .03) inset;
}
.module-overview-card::after, .stat-card::after {
    content: "";
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--motion-accent) 16%, transparent), transparent 45%);
    transition: opacity var(--motion-base) var(--motion-ease);
}
.module-overview-card:hover::after, .stat-card:hover::after { opacity: 1; }

.stat-icon { transition: transform var(--motion-base) var(--motion-ease); }
.module-overview-card:hover .stat-icon, .stat-card:hover .stat-icon, .settings-card:hover .stat-icon { transform: scale(1.08) rotate(-4deg); }

.overview-card, .settings-panel { transition: border-color var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease); }
.overview-card:hover, .settings-panel:focus-within { border-color: color-mix(in srgb, var(--motion-accent) 30%, var(--border, #262b36)); }

/* ---- buttons and links ------------------------------------------------------------- */
.primary-action, .secondary-action, .icon-button, .avatar-button, .theme-chip {
    transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease),
                background-color var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease),
                filter var(--motion-base) var(--motion-ease);
}
.primary-action:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 10px 24px -12px var(--motion-accent); }
.secondary-action:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--motion-accent) 55%, transparent); }
.primary-action:active, .secondary-action:active, .icon-button:active { transform: translateY(0) scale(.97); }
.module-overview-card a, .text-link { transition: gap var(--motion-base) var(--motion-ease), filter var(--motion-base) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
.module-overview-card a:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ---- navigation ------------------------------------------------------------------- */
.rail-link, .menu-row {
    transition: background-color var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease),
                transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease);
}
.rail-link:hover { transform: translateY(-1px) scale(1.06); }
.menu-row:hover { transform: translateX(3px); }
[dir="rtl"] .menu-row:hover { transform: translateX(-3px); }
.menu-list > * { animation: co-fade var(--motion-slow) var(--motion-ease) both; }
.menu-list > *:nth-child(2) { animation-delay: 40ms; }
.menu-list > *:nth-child(3) { animation-delay: 80ms; }
.menu-list > *:nth-child(4) { animation-delay: 120ms; }
.menu-list > *:nth-child(n+5) { animation-delay: 160ms; }

/* ---- forms ------------------------------------------------------------------------- */
.admin-input, .admin-select, .settings-field input, .settings-field select, .settings-field textarea {
    transition: border-color var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease),
                background-color var(--motion-base) var(--motion-ease);
}
.admin-input:focus, .admin-select:focus, .settings-field input:focus, .settings-field select:focus, .settings-field textarea:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--motion-accent) 28%, transparent);
    border-color: var(--motion-accent);
}

/* ---- tables ------------------------------------------------------------------------ */
.data-table tbody tr { transition: background-color var(--motion-fast) var(--motion-ease); animation: co-fade var(--motion-slow) var(--motion-ease) both; }
.data-table tbody tr:nth-child(2) { animation-delay: 30ms; }
.data-table tbody tr:nth-child(3) { animation-delay: 60ms; }
.data-table tbody tr:nth-child(4) { animation-delay: 90ms; }
.data-table tbody tr:nth-child(n+5) { animation-delay: 120ms; }
.data-table tbody tr:hover { background-color: color-mix(in srgb, var(--motion-accent) 7%, transparent); }

/* ---- messages, badges, modals -------------------------------------------------------- */
.settings-flash { animation: co-slide-down var(--motion-slow) var(--motion-ease) both; }
.settings-badge, .quote-badge, .agent-badge, .msg-badge { transition: background-color var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease); }
.live-indicator .dot, .dot.live { animation: co-pulse 2.2s ease-out infinite; }
.modal-overlay.open { animation: co-fade var(--motion-base) var(--motion-ease) both; }
.modal-overlay.open > * { animation: co-pop var(--motion-base) var(--motion-ease) both; }

/* chat bubbles and quotation items arrive softly */
.agent-bubble, .msg-bubble, .quote-item, .quote-send__card, .agent-convo, .msg-convo { animation: co-rise var(--motion-slow) var(--motion-ease) both; }

/* numbers that count up get a steady width so the layout doesn't jitter */
[data-co-count] { font-variant-numeric: tabular-nums; }

/* loading shimmer for anything marked as loading */
.is-loading {
    background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--motion-accent) 14%, transparent) 50%, transparent 80%);
    background-size: 200% 100%;
    animation: co-sheen 1.4s linear infinite;
}

/* smooth theme switch and in-page jumps */
html { scroll-behavior: smooth; }
body, .topbar, .expanded-sidebar, .workspace { transition: background-color var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease); }

/* ---- people who prefer less motion get none of it ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}