/* ── Triumphant panel chrome ──────────────────────────────────────────────
   Maps the brand tokens in brand/*.css onto Filament's own surfaces, for both
   /admin and /school. Loaded from each panel provider's HEAD_END render hook,
   after the token files.

   SCOPING. Every rule is under `.fi-layout`, which Filament puts on the panel
   wrapper. The sign-in, password-reset and 2FA screens use `.fi-simple-layout`
   instead, so nothing here can reach them — they keep the look they had, which
   is deliberate. If you add a rule, keep it inside the `.fi-layout` scope.

   SPECIFICITY. Filament's chrome is Tailwind utilities — single-class
   selectors like `.bg-gray-100` and `.text-primary-600`. The compound
   selectors below (`.fi-layout .fi-sidebar-item .fi-sidebar-item-button`) beat
   them on specificity without `!important`, so this file stays overridable.

   DARK MODE. The design system defines a light palette only — cream paper,
   navy ink — and both panels default to light. Rules that would misfire on a
   dark surface are wrapped in `html:not(.dark)`; dark mode keeps Filament's
   greys with the brand red accent. That is Filament's dark theme wearing our
   accent, not a Triumphant dark theme, and should be designed properly before
   it is called one. */

/* ── Type ─────────────────────────────────────────────────────────────────
   Figtree for interface text, Bitter for page and section headings only. The
   system puts display type on headings down to H2 and nothing else — a slab
   serif on table cells and form labels would fight the density these screens
   need. Both fall back to a stack, so a blocked CDN degrades rather than
   breaks. */
.fi-layout {
    font-family: var(--font-sans);
}

.fi-layout .fi-header-heading,
.fi-layout .fi-section-header-heading,
.fi-layout .fi-modal-heading {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
}

html:not(.dark) .fi-layout .fi-header-heading,
html:not(.dark) .fi-layout .fi-section-header-heading,
html:not(.dark) .fi-layout .fi-modal-heading {
    color: var(--text-heading);
}

/* Uppercase micro-labels — the system's one exception to sentence case. */
.fi-layout .fi-ta-header-cell-label {
    letter-spacing: var(--tracking-wide);
}

/* ── Page and cards ───────────────────────────────────────────────────────
   Cream page, white cards. The system allows two background colours in a
   view, and the cream ground is what gives a white card its edge — Filament
   paints both white, so cards had nothing to sit on. */
html:not(.dark) .fi-layout,
html:not(.dark) .fi-layout .fi-main-ctn {
    background-color: var(--surface-page);
}

html:not(.dark) .fi-layout .fi-section,
html:not(.dark) .fi-layout .fi-wi-stats-overview-stat,
html:not(.dark) .fi-layout .fi-ta-ctn {
    background-color: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
}

html:not(.dark) .fi-layout .fi-modal-window {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* A stat's figure is a heading — the largest thing on the card and the reason
   the card exists — so it takes the navy the system gives headings rather than
   Filament's near-black body ink. */
html:not(.dark) .fi-layout .fi-wi-stats-overview-stat-value {
    color: var(--text-heading);
    font-weight: var(--weight-bold);
}

html:not(.dark) .fi-layout .fi-wi-stats-overview-stat-label,
html:not(.dark) .fi-layout .fi-wi-stats-overview-stat-description {
    color: var(--text-muted);
}

/* The scrim is the only blur in the system. */
.fi-layout .fi-modal-close-overlay {
    background-color: var(--overlay-scrim);
    backdrop-filter: blur(2px);
}

/* ── Topbar ───────────────────────────────────────────────────────────────
   White, with the 3px red rule under it. That rule is the system's featured-
   card accent doing the job it is meant for: one red mark that says which
   product you are in, without spending the action colour on a whole band. */
html:not(.dark) .fi-layout .fi-topbar > nav {
    background-color: var(--surface-card);
    border-bottom: 3px solid var(--tp-red-500);
    box-shadow: var(--shadow-xs);
    --tw-ring-color: transparent;
}

/* ── Header lockup ────────────────────────────────────────────────────────
   The mark and the publisher's name, side by side inside the sidebar header.
   Filament renders the logo alone, so this pairs them (see the logo component
   override in resources/views/vendor/filament-panels/components/logo.blade.php).

   The header is the sidebar's width — 320px — and the logo is admin-supplied,
   so its aspect ratio is unknown: a school lockup that already contains its
   own wordmark is very wide. The logo is therefore capped in width and the
   name is stacked on two lines, so the pair fits whatever is configured
   instead of pushing the name out of the header. */
.fi-layout .tp-lockup {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

/* The logo component is shared with the sign-in, password-reset and 2FA
   screens, which are deliberately left exactly as they were. The wordmark is a
   panel addition, so it is removed there, and `display: contents` dissolves
   the wrapper so those screens lay the logo out as if it were never added.
   These two rules exist to keep this file OUT of the auth screens, which is
   why they are the only ones outside the `.fi-layout` scope. */
.fi-simple-layout .tp-lockup {
    display: contents;
}

.fi-simple-layout .tp-brand {
    display: none;
}

.fi-layout .tp-lockup img {
    flex: none;
    max-width: 8.5rem;
    object-fit: contain;
}

/* Set the way the mark itself is: the name in the action red, the descriptor
   in navy. Stacked, and at label size, so it reads as part of the lockup
   rather than competing with the page heading below it. */
.fi-layout .tp-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.16;
    font-family: var(--font-sans);
    min-width: 0;
}

.fi-layout .tp-brand-name {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--tp-red-500);
}

.fi-layout .tp-brand-rest {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--tp-blue-800);
}

html.dark .fi-layout .tp-brand-rest {
    color: var(--tp-blue-100);
}

/* On a narrow viewport the sidebar header collapses to a slim strip shared
   with the menu toggle; the mark alone carries the brand there. */
@media (max-width: 640px) {
    .fi-layout .tp-brand {
        display: none;
    }
}

/* The panel label beside the lockup — "Admin" / "School portal". The system's
   uppercase micro-label: it names the surface without competing with the mark
   next to it. */
.fi-layout .tp-panel-label {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

html.dark .fi-layout .tp-panel-label {
    color: var(--tp-blue-100);
}

/* ── Sidebar ──────────────────────────────────────────────────────────────
   Navy is structure, so the rail is a navy band — the role the system gives
   footers and dark bands. Red stays the action colour and is not spent on
   navigation: the active item is a lighter navy pill, not a red fill. */
html:not(.dark) .fi-layout .fi-sidebar,
html:not(.dark) .fi-layout .fi-sidebar-nav {
    background-color: var(--surface-deep);
    border-inline-end-color: rgba(168, 216, 240, .25);
    box-shadow: none;
    --tw-ring-color: transparent;
}

/* The brand header is part of the WHITE top band, not of the navy rail: the
   lockup sits on white, level with the topbar, and the red rule runs unbroken
   under both. Putting the logo on navy was the mistake — it made the rail look
   like it owned the brand, and it forced a white chip behind the mark to keep
   it legible. */
html:not(.dark) .fi-layout .fi-sidebar-header {
    background-color: var(--surface-card);
    border-bottom: 3px solid var(--tp-red-500);
    box-shadow: var(--shadow-xs);
    --tw-ring-color: transparent;
}

/* The rail's scrollbar. `.fi-sidebar-nav` is the scroller, and the browser's
   default bar is a light track that cut a pale stripe down the navy — the one
   thing on the rail not wearing the brand. The track goes transparent so the
   navy shows through, and the thumb is the same white tint the nav items use
   for hover and active, so the whole rail speaks one language.

   Both syntaxes are needed: `scrollbar-color` is the standard (Firefox, and
   Chrome 121+), `::-webkit-scrollbar` covers Safari and older Chromium. */
html:not(.dark) .fi-layout .fi-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

html:not(.dark) .fi-layout .fi-sidebar-nav::-webkit-scrollbar {
    width: 8px;
}

html:not(.dark) .fi-layout .fi-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

html:not(.dark) .fi-layout .fi-sidebar-nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .22);
    border-radius: var(--radius-pill);
    /* Inset the thumb off the rail's edge without changing the track width. */
    border: 2px solid transparent;
    background-clip: padding-box;
}

html:not(.dark) .fi-layout .fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .38);
    background-clip: padding-box;
}

html:not(.dark) .fi-layout .fi-sidebar-group-label {
    color: var(--tp-blue-100);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    opacity: .8;
}

/* Resting item: legible white, muted icon. */
html:not(.dark) .fi-layout .fi-sidebar-item .fi-sidebar-item-label {
    color: rgba(255, 255, 255, .84);
    font-weight: var(--weight-regular);
}

html:not(.dark) .fi-layout .fi-sidebar-item .fi-sidebar-item-icon {
    color: rgba(168, 216, 240, .70);
}

/* Filament paints hover and the active state with `bg-gray-100`, a near-white
   pill that on a navy rail swallowed the white label whole — the item you were
   on was the one you could not read. Both go to a white tint of the rail. */
html:not(.dark) .fi-layout .fi-sidebar-item .fi-sidebar-item-button {
    border-radius: var(--radius-control);
    transition: background-color var(--dur-fast) var(--ease-standard);
}

html:not(.dark) .fi-layout .fi-sidebar-item .fi-sidebar-item-button:hover,
html:not(.dark) .fi-layout .fi-sidebar-item .fi-sidebar-item-button:focus-visible {
    background-color: rgba(255, 255, 255, .08);
}

html:not(.dark) .fi-layout .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background-color: rgba(255, 255, 255, .14);
}

/* Active label is `text-primary-600` out of the box, which is now brand red on
   navy — poor contrast, and it spends the action colour on navigation. */
html:not(.dark) .fi-layout .fi-sidebar-item.fi-active .fi-sidebar-item-label,
html:not(.dark) .fi-layout .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--text-inverse);
    font-weight: var(--weight-semibold);
}

/* ── Controls ─────────────────────────────────────────────────────────────
   6px on controls, 10px on cards, pill on badges. */
.fi-layout .fi-btn,
.fi-layout .fi-input,
.fi-layout .fi-input-wrp {
    border-radius: var(--radius-control);
}

.fi-layout .fi-badge {
    border-radius: var(--radius-pill);
}

/* Press drops 1px. Nothing scales, nothing ripples. */
.fi-layout .fi-btn:active {
    transform: translateY(1px);
}

/* Focus is a 3px gold ring. Filament composes its focus ring through Tailwind's
   `--tw-ring-color`, which is now brand red — so a focused field was ringed in
   the same red as an error. Gold is the system's answer precisely because it
   collides with neither the action colour nor the navy chrome; overriding the
   ring variable is what actually changes it. */
.fi-layout .fi-input-wrp:focus-within,
.fi-layout .fi-btn:focus-visible,
.fi-layout .fi-icon-btn:focus-visible {
    --tw-ring-color: var(--focus-ring);
}

html:not(.dark) .fi-layout .fi-input-wrp:focus-within {
    border-color: var(--tp-blue-500);
}

/* ── Tables ───────────────────────────────────────────────────────────────
   Sunken header, hairline dividers, and a blue row wash rather than a grey —
   the same wash the system gives ghost controls. */
html:not(.dark) .fi-layout .fi-ta-header-cell {
    background-color: var(--surface-sunken);
    color: var(--text-heading);
}

html:not(.dark) .fi-layout .fi-ta-row:hover {
    background-color: var(--tp-blue-50);
}

/* ── Links ────────────────────────────────────────────────────────────────
   Navy at rest, red on hover. The colour sits on the label span inside
   `.fi-link`, not on the anchor, so the anchor rule alone left it red. */
html:not(.dark) .fi-layout .fi-link:not(.fi-btn) .fi-link-label,
html:not(.dark) .fi-layout .fi-link:not(.fi-btn) {
    color: var(--text-link);
}

html:not(.dark) .fi-layout .fi-link:not(.fi-btn):hover .fi-link-label,
html:not(.dark) .fi-layout .fi-link:not(.fi-btn):hover {
    color: var(--text-link-hover);
}

/* ── Motion ───────────────────────────────────────────────────────────────
   The system's reduced-motion guard: all of it collapses. */
@media (prefers-reduced-motion: reduce) {
    .fi-layout .fi-btn,
    .fi-layout .fi-sidebar-item .fi-sidebar-item-button {
        transition: none;
    }

    .fi-layout .fi-btn:active {
        transform: none;
    }
}