/* Admin console theme layer (#241). Three jobs:
   1. Self-host Lilita One (the platform's display face) — the admin app deliberately ships no CDN
      assets so everything loads under the deployed CSP, so we host the woff2 ourselves rather than
      use Google Fonts like the platform does.
   2. Dark mode. MudBlazor's static MudThemeProvider (see AdminTheme.cs) emits the LIGHT palette as
      :root custom properties. Switching to PaletteDark would need an interactive circuit the static
      shell / SSR pages lack, so instead we re-declare the relevant --mud-palette-* variables under
      html[data-theme="dark"] — specificity (0,1,1) beats MudBlazor's :root (0,1,0), so every
      component re-themes with no circuit. The data-theme attribute is set by a tiny JS + localStorage
      toggle wired in App.razor (works on interactive AND static-SSR pages).
   3. The Saman logo island + grouped-nav chrome that live in NavMenu.razor. */

/* ---- 1. Self-hosted display font (latin subset) ---- */
@font-face {
    font-family: 'Lilita One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/lilita-one.woff2') format('woff2');
}

/* ---- 2. Dark palette — override MudBlazor's :root palette variables ---- */
html[data-theme="dark"] {
    --mud-palette-primary: #ECECEE;
    --mud-palette-primary-text: #131315;
    /* Derived tints MudBlazor uses for ripples/hovers/focus — must be re-derived from the dark
       primary or those states keep the light-theme graphite. */
    --mud-palette-primary-rgb: 236, 236, 238;
    --mud-palette-primary-lighten: #F5F5F6;
    --mud-palette-primary-darken: #D5D5D7;
    --mud-palette-secondary: #9A9B9F;
    --mud-palette-secondary-text: #131315;
    --mud-palette-secondary-rgb: 154, 155, 159;

    --mud-palette-background: #131315;
    --mud-palette-background-gray: #202023;
    --mud-palette-surface: #1B1B1E;

    --mud-palette-appbar-background: #1B1B1E;
    --mud-palette-appbar-text: #ECECEE;
    --mud-palette-drawer-background: #1B1B1E;
    --mud-palette-drawer-text: #9A9B9F;
    --mud-palette-drawer-icon: #9A9B9F;

    --mud-palette-text-primary: #ECECEE;
    --mud-palette-text-secondary: #9A9B9F;
    --mud-palette-text-disabled: rgba(236, 236, 238, 0.38);
    --mud-palette-action-default: #9A9B9F;
    --mud-palette-action-default-hover: rgba(236, 236, 238, 0.08);
    --mud-palette-action-disabled: rgba(236, 236, 238, 0.26);
    --mud-palette-action-disabled-background: rgba(236, 236, 238, 0.12);

    --mud-palette-lines-default: #2A2A2E;
    --mud-palette-lines-inputs: #3A3A3F;
    --mud-palette-table-lines: #2A2A2E;
    --mud-palette-table-hover: rgba(236, 236, 238, 0.05);
    --mud-palette-table-striped: rgba(236, 236, 238, 0.03);
    --mud-palette-divider: #2A2A2E;
    --mud-palette-divider-light: #3A3A3F;

    /* Semantic colours nudged brighter so they read on the dark surface.
       Info is graphite ink in the light palette (AdminTheme.cs: Info = #1F2024, the hue-free
       "meaning by role" accent) — so on dark it inverts to a light neutral, not a blue.

       The -darken / -hover pairs below are NOT decorative: MudBlazor's default MudAlert is the
       *Text* variant, and `.mud-alert-text-{sev}` colours its TEXT with var(--mud-palette-{sev}-darken)
       and its background with var(--mud-palette-{sev}-hover). Those derived vars are emitted from the
       LIGHT palette by MudThemeProvider and do NOT re-derive from the -rgb we override here, so an
       alert would otherwise keep light-theme text (near-black graphite for Info → invisible on the
       dark surface). We pin each -darken to a legible-on-#131315 tone and each -hover to a faint
       tint of the same colour. */
    --mud-palette-info: #C7C8CC;
    --mud-palette-info-rgb: 199, 200, 204;
    --mud-palette-info-darken: #D4D5D9;
    --mud-palette-info-hover: rgba(199, 200, 204, 0.12);

    --mud-palette-success: #45C088;
    --mud-palette-success-rgb: 69, 192, 136;
    --mud-palette-success-darken: #52C994;
    --mud-palette-success-hover: rgba(69, 192, 136, 0.12);
    --mud-palette-warning: #D69A3C;
    --mud-palette-warning-rgb: 214, 154, 60;
    --mud-palette-warning-darken: #DDA64A;
    --mud-palette-warning-hover: rgba(214, 154, 60, 0.12);
    --mud-palette-error: #E5706F;
    --mud-palette-error-rgb: 229, 112, 111;
    --mud-palette-error-darken: #E8807F;
    --mud-palette-error-hover: rgba(229, 112, 111, 0.12);

    --mud-palette-dark: #ECECEE;
}

/* Colour-scheme hint so native form controls / scrollbars match the theme. */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* ---- 3. Logo island — keeps its saturated Saturday-Morning palette in BOTH themes ---- */
.admin-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 16px 4px;
}

.admin-logo-tile {
    flex: none;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #FF5236;              /* tomato */
    border: 3px solid #111233;       /* ink */
    box-shadow: 3px 3px 0 #111233;   /* sticker shadow */
    color: #FFF6E7;                  /* cream */
    font-family: 'Lilita One', system-ui, sans-serif;
    font-size: 22px;
    line-height: 1;
    transform: rotate(-4deg);
}

.admin-logo-word {
    font-family: 'Lilita One', system-ui, sans-serif;
    font-size: 26px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #111233;                  /* ink wordmark on light… */
}

html[data-theme="dark"] .admin-logo-word {
    color: #FFF6E7;                  /* …cream on dark */
}

.admin-brand-caption {
    padding: 2px 18px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* ---- Grouped-nav chrome ---- */
.admin-nav-section {
    padding: 16px 16px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.admin-nav .mud-nav-group .admin-nav-section:first-child { padding-top: 8px; }

/* ---- App bar: flat with a hairline, not an elevation shadow ---- */
.admin-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.admin-appbar-title {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ---- Responsive drawer ----
   Desktop default: the persistent drawer stands as MudBlazor renders it; no hamburger, no scrim. */
.admin-drawer-toggle { display: none; }
.admin-drawer-scrim { display: none; }

/* Below 900px the drawer becomes an off-canvas overlay toggled by the app-bar hamburger.
   MudBlazor slides its persistent drawer via `left` (open: left:0), leaving `transform` free — so we
   hide/show with translateX and never fight its selector specificity. We bump the drawer above the
   app bar on mobile (its default z-index sits below it), mirroring MudBlazor's own temporary drawer. */
@media (max-width: 900px) {
    .admin-brand-caption { display: none; }
    .admin-brand { padding-top: 14px; }

    .admin-drawer-toggle { display: inline-flex; }

    .mud-drawer {
        z-index: calc(var(--mud-zindex-appbar) + 2);
        transform: translateX(-100%);
        transition: transform .22s ease;
        will-change: transform;
    }
    html[data-admin-drawer="open"] .mud-drawer { transform: translateX(0); }

    /* MudBlazor pushes the app bar + content right by the drawer width at every width; reclaim it. */
    .mud-appbar,
    .mud-main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .admin-drawer-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: calc(var(--mud-zindex-appbar) + 1);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease;
    }
    html[data-admin-drawer="open"] .admin-drawer-scrim {
        opacity: 1;
        pointer-events: auto;
    }
}