/* =========================================================================
   Tandem — Filament admin theme overlay
   -------------------------------------------------------------------------
   Plain CSS only. No Tailwind @apply (that would require the Vite build).
   Registered via FilamentAsset::register() in AppServiceProvider::boot().

   Targets Filament v5.2 `fi-*` hook classes verified against the published
   `public/css/filament/filament/app.css`. Key selectors used:
     .fi-sidebar                    — the whole sidebar
     .fi-sidebar-header-logo-ctn    — logo wrapper
     .fi-logo                       — the brand text itself
     .fi-sidebar-item               — a nav item wrapper
     .fi-sidebar-item-btn           — the clickable button/link
     .fi-sidebar-item-label         — the item's text (this is the one
                                      coloured var(--gray-700) in light
                                      mode, which is why default text
                                      was near-invisible on blueberry)
     .fi-sidebar-item.fi-active     — active-state wrapper
     .fi-sidebar-group-label        — group heading text ("CURRICULUM" etc.)
     .fi-sidebar-group-collapse-btn — expand/collapse chevron
     .fi-icon                       — any icon inside a nav item

   Sidebar stays Tandem Blueberry in BOTH light and dark mode — achieved
   by duplicating rules under `:where(.dark, .dark *)` where Filament's
   own dark-mode rules would otherwise compete.
   ========================================================================= */

:root {
    --tandem-adriatic:    #00abc8;
    --tandem-blueberry:   #494a93;
    --tandem-lunar:       #eb5b50;
    --tandem-apple:       #6fba6c;
    --tandem-dune:        #ffb800;
    --tandem-lilac:       #cd80b9;
    --tandem-dark:        #1a1a2e;
    --tandem-slate:       #777777;
    --tandem-light-slate: #acacac;
    --tandem-off-white:   #f8f9fa;
    --tandem-card-border: #e5e7eb;
    --tandem-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
}

/* =========================================================================
   PAGE CHROME
   ========================================================================= */

/* Light mode: off-white page bg so white cards have something to sit on. */
.fi-main,
.fi-page {
    background-color: var(--tandem-off-white);
}

/* Dark mode: very dark grey instead of pitch black. Uses Tandem `--color-dark`
   (#1a1a2e) which also ties in visually with the blueberry sidebar.
   `.fi-main` and `.fi-page` need transparent bg in dark mode, otherwise our
   light-mode off-white rule above would hide the body colour. */
.fi-body:where(.dark, .dark *) {
    background-color: var(--tandem-dark) !important;
}

.fi-main:where(.dark, .dark *),
.fi-page:where(.dark, .dark *) {
    background-color: transparent !important;
}

/* =========================================================================
   CARDS & SECTIONS
   ========================================================================= */

/* Light mode: white card with border and soft shadow. */
.fi-section,
.fi-ta-ctn {
    border: 1px solid var(--tandem-card-border);
    border-radius: 0.75rem;
    box-shadow: var(--tandem-card-shadow);
    background-color: #ffffff;
}

/* Dark mode: subtle white overlay on dark bg — don't force white. */
.fi-section:where(.dark, .dark *),
.fi-ta-ctn:where(.dark, .dark *) {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

.fi-ta-header {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

/* =========================================================================
   SIDEBAR — forced Tandem Blueberry in both light and dark modes.
   ========================================================================= */

/* The sidebar shell itself. */
.fi-sidebar,
.fi-sidebar:where(.dark, .dark *) {
    background-color: var(--tandem-blueberry) !important;
    border-right: none !important;
}

/* Logo/brand wordmark "Tandem" — white in both modes. */
.fi-sidebar .fi-logo,
.fi-sidebar .fi-logo:where(.dark, .dark *) {
    color: #ffffff !important;
}

/* Nav item text — THE key fix. Filament defaults this to var(--gray-700)
   in light mode, which is near-black and illegible on blueberry. */
.fi-sidebar-item-label,
.fi-sidebar-item-label:where(.dark, .dark *) {
    color: rgba(255, 255, 255, 0.82) !important;
}

/* Nav item icons — match the muted white of the label. */
.fi-sidebar-item > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item > .fi-sidebar-item-btn > .fi-icon:where(.dark, .dark *) {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Hover state — subtle white overlay instead of the harsh var(--gray-100)
   Filament defaults to. */
.fi-sidebar-item > .fi-sidebar-item-btn:hover,
.fi-sidebar-item > .fi-sidebar-item-btn:hover:where(.dark, .dark *) {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.fi-sidebar-item > .fi-sidebar-item-btn:hover > .fi-sidebar-item-label,
.fi-sidebar-item > .fi-sidebar-item-btn:hover > .fi-icon {
    color: #ffffff !important;
}

/* Active state — Tandem Adriatic tint with a left accent border, in place
   of Filament's default white-pill. Overrides both light and dark defaults. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:where(.dark, .dark *) {
    background-color: rgba(0, 171, 200, 0.22) !important;
    box-shadow: inset 3px 0 0 var(--tandem-adriatic) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label:where(.dark, .dark *) {
    color: #ffffff !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon:where(.dark, .dark *) {
    color: var(--tandem-adriatic) !important;
}

/* Group labels ("CURRICULUM", "SUBSCRIPTIONS", "SYSTEM") — small-caps, muted. */
.fi-sidebar-group-label,
.fi-sidebar-group-label:where(.dark, .dark *) {
    color: var(--tandem-light-slate) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* Group collapse chevron — dim so it doesn't fight the label. */
.fi-sidebar-group-collapse-btn,
.fi-sidebar-group-collapse-btn .fi-icon {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* Sidebar badges (e.g. "1" on Content Reports) — lunar fill, always. */
.fi-sidebar .fi-badge,
.fi-sidebar .fi-sidebar-item-badge-ctn .fi-badge {
    background-color: var(--tandem-lunar) !important;
    color: #ffffff !important;
    border: none !important;
}

/* =========================================================================
   TOPBAR
   ========================================================================= */

.fi-topbar {
    background-color: #ffffff;
    border-bottom: 1px solid var(--tandem-card-border);
    box-shadow: none;
}

.fi-topbar:where(.dark, .dark *) {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* =========================================================================
   SECTION HEADERS
   ========================================================================= */

.fi-section-header-heading {
    font-weight: 600;
    letter-spacing: -0.005em;
}

.fi-section-header-description {
    color: var(--tandem-slate);
}