/* ==========================================================================
   Admin shell: the one frame every admin page sits in.

   Loaded by pages/admin.html, admin-security.html, admin-analytics.html and
   admin-accounting.html. Before 2026-10-01 those four looked like two
   different buildings: two of them had their own full-height sidebar and no
   site header, the other two had the site header and a hero banner, and each
   carried its own hand-copied set of links to the others (no two sets agreed).

   The frame is now, top to bottom on every page:
     1. the site header (js/header.js, same as the rest of the site)
     2. the admin bar (js/admin-nav.js renders it into #mlnf-admin-nav)
     3. the page itself. Pages with internal tabs (Control Center, Security)
        put them in .admin-sidebar / .admin-nav inside .admin-layout.

   Colors come from the --admin-* tokens below, defined once here for both
   themes. Page-specific tokens (--acct-*, --analytics-*) stay in their pages.
   ========================================================================== */

:root {
    /* Light mode: admin surfaces stay legible on a pale page */
    --admin-page-bg: #F3F4F6;
    --admin-bg: #F3F4F6;
    --admin-card: #FFFFFF;
    --admin-border: #E5E7EB;
    --admin-text: #1A2332;
    --admin-text-strong: #0F172A;
    --admin-muted: #52525B;
    --admin-gold: #8a6f1a;
    --admin-red: #B91C1C;
    --admin-green: #047857;
    --admin-blue: #1E40AF;
    --admin-orange: #92400E;
    --admin-hover-overlay: rgba(0, 0, 0, 0.04);
    --admin-row-hover: rgba(0, 0, 0, 0.025);
    --admin-active-bg: rgba(138, 111, 26, 0.10);
    --admin-shell-max: 1400px;
}
[data-theme="dark"] {
    --admin-page-bg: var(--surface, #1A2332);
    --admin-bg: #0d1117;
    --admin-card: #161b22;
    --admin-border: #30363d;
    --admin-text: #c9d1d9;
    --admin-text-strong: #ffffff;
    --admin-muted: #8b949e;
    --admin-gold: #D4AF37;
    --admin-red: #f85149;
    --admin-green: #3fb950;
    --admin-blue: #58a6ff;
    --admin-orange: #d29922;
    --admin-hover-overlay: rgba(255, 255, 255, 0.04);
    --admin-row-hover: rgba(255, 255, 255, 0.02);
    --admin-active-bg: rgba(212, 175, 55, 0.08);
}

/* One page background and font for all four. `html body` so this outranks
   styles.css's `[data-theme="dark"] body` on specificity, not on load order. */
html body.admin-shell-body {
    background-color: var(--admin-page-bg);
    color: var(--admin-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── 2. The admin bar ─────────────────────────────────────────────────── */
.admin-bar {
    background: var(--admin-card);
    border-bottom: 1px solid var(--admin-border);
}
.admin-bar-inner {
    max-width: var(--admin-shell-max);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 52px;
}
.admin-bar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--admin-gold);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.admin-bar-links {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.admin-bar-links::-webkit-scrollbar { display: none; }
.admin-bar a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.85rem;
    min-height: 52px;
    color: var(--admin-muted);
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, background 0.15s;
}
.admin-bar a:hover { color: var(--admin-text); background: var(--admin-hover-overlay); }
.admin-bar a:focus-visible { outline: 2px solid var(--admin-gold); outline-offset: -2px; }
.admin-bar a[aria-current="page"] {
    color: var(--admin-gold);
    border-bottom-color: var(--admin-gold);
    background: var(--admin-active-bg);
}
.admin-bar a i { width: 16px; text-align: center; }
.admin-bar .admin-bar-back { margin-left: auto; }

/* ── 3a. Page width for pages without internal tabs ───────────────────── */
.admin-page {
    max-width: var(--admin-shell-max);
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

/* ── 3b. Pages with internal tabs: sidebar + main ─────────────────────── */
.admin-layout {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    max-width: var(--admin-shell-max);
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}
.admin-sidebar {
    flex: 0 0 220px;
    position: sticky;
    top: calc(var(--header-height, 63px) + 1rem);
    max-height: calc(100vh - var(--header-height, 63px) - 2rem);
    overflow-y: auto;
    background: var(--admin-card);
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    padding: 0.75rem 0;
}
.admin-sidebar-label {
    padding: 0.25rem 1.25rem 0.6rem;
    font-size: 0.7rem;
    color: var(--admin-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.admin-nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    color: var(--admin-muted);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.15s, background 0.15s;
    border-left: 3px solid transparent;
}
.admin-nav a:hover { color: var(--admin-text); background: var(--admin-hover-overlay); }
.admin-nav a.active { color: var(--admin-gold); border-left-color: var(--admin-gold); background: var(--admin-active-bg); }
.admin-nav a i { width: 18px; text-align: center; }
.admin-main { flex: 1; min-width: 0; }

/* ── Page title, same on every page and every tab ─────────────────────── */
.admin-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem 1rem;
    margin-bottom: 1.75rem;
}
/* Security's headers put h1 and breadcrumb straight in the row; stack them. */
.admin-header > h1,
.admin-header > .breadcrumb { flex-basis: 100%; }
.admin-header h1 {
    font-size: 1.5rem;
    margin: 0 0 0.25rem;
    color: var(--admin-text-strong);
}
.admin-header h1 i { color: var(--admin-gold); margin-right: 0.4rem; }
.admin-header .breadcrumb { font-size: 0.8rem; color: var(--admin-muted); }

/* ── Phone ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Words only, no brand: four names and the way back fit at 360px. */
    .admin-bar-inner { padding: 0 0.25rem; gap: 0; }
    .admin-bar-brand { display: none; }
    .admin-bar-links a i { display: none; }
    .admin-bar a { padding: 0 0.6rem; min-height: 46px; font-size: 0.8rem; }
    .admin-bar .admin-bar-back span { display: none; }

    .admin-page { padding: 1.25rem 1rem 2rem; }

    /* Internal tabs become a scrolling strip above the content. */
    .admin-layout { display: block; padding: 1rem 1rem 2rem; }
    .admin-sidebar {
        position: static;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0;
        margin-bottom: 1.25rem;
        scrollbar-width: none;
    }
    .admin-sidebar::-webkit-scrollbar { display: none; }
    .admin-sidebar-label { display: none; }
    .admin-nav { display: flex; }
    .admin-nav a {
        white-space: nowrap;
        padding: 0.7rem 0.9rem;
        border-left: 0;
        border-bottom: 2px solid transparent;
    }
    .admin-nav a.active { border-bottom-color: var(--admin-gold); }

    .admin-header h1 { font-size: 1.3rem; }
}