/* =====================================================================
   Auto Star admin — modern layer.

   Loads after admin.css, brand.css and the theme. Additive only:
   nothing here renames a class or restructures a component, so every
   view keeps working with this file deleted. What it changes is
   execution — motion, shadows, focus, feedback — the difference
   between "a PHP admin" and "a tool that feels like Linear", in the
   palette the shop already owns.

   The signature: the gold thread. The one #e8b21a accent runs through
   everything that says "you are here" or "working on it" — the loading
   bar, the active tab's underline, the sidebar's active rail, the
   focus ring, the row under the pointer. Everything else stays quiet.

   The loading bar, spinners, toasts and skeletons themselves live in
   app-loading.js + admin.css; this file only re-dresses them.
   ===================================================================== */

:root {
    --m-radius: 10px;
    --m-shadow-1: 0 1px 2px rgba(20, 22, 26, .05);
    --m-shadow-2: 0 1px 3px rgba(20, 22, 26, .06), 0 4px 12px rgba(20, 22, 26, .05);
    --m-shadow-3: 0 6px 16px rgba(20, 22, 26, .10), 0 16px 40px rgba(20, 22, 26, .12);
    --m-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---- Cross-page transitions --------------------------------------
   Native cross-document view transitions: same-origin navigations
   cross-fade instead of flashing white. Browsers without support load
   pages exactly as before. This one rule is most of the "feels like
   an app" effect, and it costs nothing. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: m-fade-out 130ms var(--m-ease) both; }
::view-transition-new(root) { animation: m-fade-in 170ms var(--m-ease) both; }

@keyframes m-fade-out { to { opacity: 0; } }
@keyframes m-fade-in  { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* The chrome holds still while the content changes — that is what
   makes it read as one application rather than a series of documents. */
.sidebar { view-transition-name: app-sidebar; }

/* ---- The gold thread: loading bar -------------------------------- */
#app-progress {
    background: linear-gradient(90deg, var(--gold), #f6cf5a);
    box-shadow: 0 0 8px rgba(232, 178, 26, .5);
}

/* ---- Panels & tiles ---------------------------------------------- */
.panel, .tile {
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow-1);
    transition: box-shadow 160ms var(--m-ease), transform 160ms var(--m-ease);
}
.panel:hover { box-shadow: var(--m-shadow-2); }
.tile:hover  { box-shadow: var(--m-shadow-2); transform: translateY(-1px); }

/* ---- Tabs: the gold underline ------------------------------------ */
.tabs a {
    position: relative;
    transition: color 120ms var(--m-ease), background 120ms var(--m-ease);
}
.tabs a::after {
    content: "";
    position: absolute;
    left: .35rem; right: .35rem; bottom: -1px;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 180ms var(--m-ease);
}
.tabs a:hover { background: rgba(20, 22, 26, .04); }
.tabs a.is-on::after { transform: scaleX(1); }

/* ---- Sidebar: the gold rail -------------------------------------- */
.sidebar a { transition: background 120ms var(--m-ease), color 120ms var(--m-ease); }
.sidebar a.is-active { box-shadow: inset 2px 0 0 var(--gold); }

/* ---- Buttons ------------------------------------------------------ */
.btn-sm, .form-actions button {
    transition: background 120ms var(--m-ease), border-color 120ms var(--m-ease),
                box-shadow 120ms var(--m-ease), transform 80ms var(--m-ease);
}
.btn-sm:active, .form-actions button:active { transform: translateY(1px); }

/* ---- Tables ------------------------------------------------------- */
.table tbody tr { transition: background 100ms var(--m-ease); }
.table tbody tr:hover { background: rgba(232, 178, 26, .05); }

/* ---- Focus: one ring everywhere ---------------------------------- */
:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ---- Toasts, re-dressed -------------------------------------------
   The mechanism stays app-loading.js's; the look joins the system:
   surface card, gold thread on the left, real shadow. Errors keep
   their red thread and dark urgency. */
.toast {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    box-shadow: var(--m-shadow-3);
    border-radius: var(--m-radius);
}
.toast--bad {
    background: var(--surface);
    color: var(--danger);
    border-left-color: var(--danger);
}

/* ---- Long lists paint faster -------------------------------------
   Off-screen rows are skipped at layout time; scrolling reveals them
   already-correct. On the 1,000-customer table this is the difference
   between paint-now and paint-eventually. */
.table tbody { content-visibility: auto; contain-intrinsic-size: auto 480px; }

/* ---- Motion is optional ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
    .panel, .tile, .tabs a, .tabs a::after, .sidebar a,
    .btn-sm, .form-actions button, .table tbody tr { transition: none; }
    .tile:hover { transform: none; }
}

/* ---- Workshop (wsx) chrome, same thread ---------------------------
   The workshop layout uses its own class names for the sidebar; the
   gold thread applies to them by name so both layouts speak it. */
.wsx__side { view-transition-name: app-sidebar; }
.wsx__nav a { transition: background 120ms var(--m-ease), color 120ms var(--m-ease); }
.wsx__nav a.active { box-shadow: inset 2px 0 0 var(--gold); }