/*
 * Event Trekker business-admin · admin-specific overrides on top of Crafto theme.
 *
 * The Crafto bundle (assets/css/*.min.css) supplies the type system, colors,
 * spacing scale, Bootstrap 5 grid, and form-control styles. This file fills the
 * admin-specific gaps (centered auth card · topbar · dashboard tiles) per
 * CLAUDE.md "hand-rolled CSS for gaps is allowed; bespoke creation from scratch
 * is NOT". The Crafto utility classes (text-dark-gray · alt-font · fw-600 etc.)
 * carry the visual language; this file just composes them into admin layouts.
 *
 * ============================================================================
 * DARK-MODE DEFAULT (D278 · BH X-1 · hi-fi specs 41-49 + design-system § 2.6/§12)
 * ----------------------------------------------------------------------------
 * design-system § 2.6: "the business-admin HTML5 surface ships dark-mode-by-
 * default because superadmin sessions are predominantly at-night ops work."
 * § 12 form-factor matrix: Business-admin HTML5 · Dark mode default = "yes
 * (default)". The clickable hi-fi (42-admin-dashboard.html:24) uses
 * var(--neutral-900) dark topbar. This file makes dark the BASELINE — every
 * color below is the design-system dark-column token value (§ 2.3 neutral dark ·
 * § 2.4 surface/text role dark · § 2.2 semantic dark). All text/background
 * pairs verified WCAG 2.2 AA (≥ 4.5:1 normal text) — see § 2.5 + D278 contrast
 * sweep. Brand-coral buttons use DARK ink (on-primary dark = #000000 / near-
 * black) because white-on-coral fails AA at 2.25:1 in the dark column.
 * ============================================================================
 */

html, body {
    height: 100%;
}

/* Visually-hidden but screen-reader-readable (aria-live regions · § 8.3
 * cooldown announcements). Standard a11y utility · not in the Crafto bundle. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

.admin-shell {
    /* ===== Dark palette tokens (design-system dark column · § 2.3 / § 2.4) ===== */
    --admin-bg: #161413;            /* surface.default  · neutral.50  dark */
    --admin-surface-raised: #1E1B19;/* surface.raised   · neutral.100 dark (tiles/cards) */
    --admin-surface-head: #2B2724;  /* table-head wash  · neutral.200 dark */
    --admin-input-bg: #221F1D;      /* form-field fill  · between raised + head */
    --admin-text: #F2EEEA;          /* text.primary     · neutral.900 dark (15.9:1) */
    --admin-text-secondary: #C2BDB4;/* text.secondary   · neutral.700 dark (9.8:1) */
    --admin-text-muted: #9C968D;    /* text.muted       · neutral.600 dark (6.3:1) */
    --admin-border: #2B2724;        /* border.subtle    · neutral.200 dark */
    --admin-border-strong: #5A544D; /* border.strong    · neutral.400 dark */
    --admin-divider: #2B2724;

    min-height: 100vh;
    background: var(--admin-bg);
    color: var(--admin-text);
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    /* Brand-coral token — DARK variant (design-system brand.primary.500 dark =
     * "#FF8F5C"). Drives the active side-nav row left bar per hi-fi
     * 42-admin-dashboard lines 41 / 59 / 125. */
    --admin-brand-coral: #FF8F5C;
    /* On-coral ink · dark column on-primary = #000000 (near-black). White-on-
     * coral fails AA in dark (2.25:1) · dark ink clears 9.3:1. */
    --admin-on-coral: #1A1612;
    /* Side-nav rail width per hi-fi line 41 ("SideNav 220 px wide expanded"). */
    --admin-sidenav-w: 220px;
}

/* Dark-surface inheritance for Crafto utility classes that hard-code dark INK
 * (text-dark-gray / text-medium-gray) — on a dark background those become
 * invisible, so we re-point them to the dark-mode text tokens. This keeps the
 * existing markup (which leans on Crafto utilities) AA-readable without touching
 * every HTML file. */
.admin-shell .text-dark-gray { color: var(--admin-text) !important; }
.admin-shell .text-medium-gray { color: var(--admin-text-muted) !important; }
.admin-shell h1, .admin-shell h2, .admin-shell h3,
.admin-shell h4, .admin-shell h5, .admin-shell h6 { color: var(--admin-text); }
.admin-shell a { color: var(--admin-brand-coral); }
.admin-shell code { color: var(--admin-text); background: var(--admin-input-bg); }

/* ===== Auth card (login + 2fa) ===== */

.admin-auth-card-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--admin-bg);
}

.admin-auth-card {
    background: var(--admin-surface-raised);
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    padding: 40px 36px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

.admin-auth-brand {
    text-align: center;
    margin-bottom: 28px;
}

/* D283 · auth-card H1 wrap fix.
 * Root cause of the "verificatio / n" mid-word break: the Crafto base sets
 *   body { word-break: break-word }  (style.min.css)  +  h1 { font-size: 4.375rem }
 * At 70px the word "verification" is wider than the ~348px auth-card content box,
 * so word-break:break-word splits it MID-WORD. Two-part fix scoped to the auth
 * card ONLY (does not touch the dashboard / other H1s):
 *   1. word-break:normal + overflow-wrap:normal — never break inside a word;
 *      wrap only at the space ("Two-factor" / "verification").
 *   2. a card-appropriate font-size so the longest single word ("verification")
 *      fits on its own line in the 348px content box (clamp keeps it responsive
 *      down to the 360px mobile card without re-introducing the mid-word break).
 * Login's "Event Trekker" (two short words) is unaffected visually — both words
 * already fit; this only removes the mid-word-break behavior + right-sizes type. */
.admin-auth-brand h1 {
    font-size: clamp(1.75rem, 6vw, 2.125rem);  /* 28px → 34px · fits "verification" */
    line-height: 1.2;
    word-break: normal;
    overflow-wrap: normal;
    margin-bottom: 0.5rem;
}

.admin-auth-form .form-control {
    height: 48px;
    border: 1px solid var(--admin-border-strong);
    background: var(--admin-input-bg);
    /* DEF-A11Y-010 (WCAG 1.4.3): declare an explicit accessible ink so input
     * text does NOT inherit a low-contrast theme gray. In dark mode the field
     * fill is #221F1D and the ink is text.primary #F2EEEA ≈ 14.2:1 — clears the
     * 4.5:1 normal-text AA minimum (matches the :focus state). */
    color: var(--admin-text);
    padding: 0 14px;
    border-radius: 8px;
    font-size: 15px;
    width: 100%;
}

.admin-auth-form .form-control::placeholder { color: var(--admin-text-muted); }

.admin-auth-form .form-control:focus {
    outline: none;
    border-color: var(--admin-brand-coral);
    background: var(--admin-input-bg);
}

.admin-auth-form .btn {
    height: 48px;
    border-radius: 8px;
    font-weight: 600;
}

.admin-auth-form button[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.admin-error {
    background: #2E1413;            /* error.50  dark */
    color: #F2A9A6;                /* error.700 dark (8.98:1) */
    border: 1px solid #5A2320;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 12px;
}

.admin-error.d-none { display: none; }

/* ===== Crafto button overrides for dark mode =====
 * The Crafto base-color button is coral fill + WHITE text (fails AA in dark at
 * 2.25:1). Re-ink to near-black on coral (9.3:1 · design-system on-primary dark).
 * The transparent/ghost button gets a readable dark-mode outline + ink. */
.admin-shell .btn-base-color {
    background-color: var(--admin-brand-coral);
    border-color: var(--admin-brand-coral);
    color: var(--admin-on-coral);
}
.admin-shell .btn-base-color:hover,
.admin-shell .btn-base-color:focus {
    background-color: #FFA577;     /* brand.primary.600 dark */
    border-color: #FFA577;
    color: var(--admin-on-coral);
}
.admin-shell .btn-transparent-base-color {
    background-color: transparent;
    border: 1px solid var(--admin-border-strong);
    color: var(--admin-text);
}
.admin-shell .btn-transparent-base-color:hover,
.admin-shell .btn-transparent-base-color:focus {
    background-color: var(--admin-surface-head);
    color: var(--admin-text);
}

/* ===== Dashboard ===== */

/* Dashboard shell becomes a vertical stack: thin top bar across the top, then a
 * body row that places the side-nav LEFT of the content area (per hi-fi
 * 42-admin-dashboard "Visual layout — Desktop" + DOM tree lines 75-103). */
.admin-shell--dashboard {
    background: var(--admin-bg);
    display: flex;
    flex-direction: column;
}

/* Thin top bar = branding + account email + sign-out ONLY (hi-fi line 18 /
 * component composition line 67). The nav no longer lives here. The clickable
 * hi-fi (42-admin-dashboard.html:24) renders this bar at neutral.900 — in the
 * dark column neutral.900 IS the lightest ink, so for a dark-mode topbar we use
 * neutral.0-dark (#000) as the darkest chrome band, framing the lighter page. */
.admin-topbar {
    background: #000000;           /* surface.sunken dark · darkest chrome band */
    border-bottom: 1px solid var(--admin-border);
    padding: 14px 24px;
    flex: 0 0 auto;
}

.admin-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.admin-topbar-brand {
    font-size: 18px;
    color: var(--admin-text);
}

/* P3 (D281) · topbar-right · keep the account email + SIGN OUT on ONE line at
 * desktop width. The email truncates with an ellipsis if very long; the SIGN OUT
 * button never shrinks or wraps (flex-shrink:0 + white-space:nowrap). Fixes the
 * D279 deep-dive-1 P3 nit (label + email wrapping across 2 lines). */
.admin-topbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    min-width: 0;                 /* allow the email child to shrink + ellipsis */
}

.admin-topbar-user {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
    min-width: 0;
}

.admin-topbar-actions .btn {
    height: 36px;
    padding: 0 14px;
    font-size: 14px;
    flex: 0 0 auto;               /* SIGN OUT keeps its width · never wraps */
    white-space: nowrap;
}

/* The Crafto ms-3 left-margin on the button is redundant now that the row owns a
 * gap; drop it so the button doesn't add a wrapping pressure point. */
.admin-topbar-actions .btn.ms-3 { margin-left: 0 !important; }

/* Body row under the top bar: side-nav rail + content. */
.admin-body {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    min-height: 0;
}

/* Content area sits to the RIGHT of the rail; inner content max-width 1280
 * centered in the remaining space (hi-fi line 41 "Content max-width 1280 px
 * centered"). */
.admin-main {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-main .container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.admin-tile {
    background: var(--admin-surface-raised);
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    padding: 20px;
    height: 100%;
    transition: box-shadow 120ms ease;
}

.admin-tile:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

/* ===== Side nav (left rail) =====
 * Vertical 220 px left rail per hi-fi 42-admin-dashboard lines 41 / 77-88.
 * Items stack top-to-bottom; the selected row carries a brand-coral left bar
 * (lines 41 / 59 / 125). Replaces the previous horizontal top-nav, which
 * wrapped its text into "Dash boar d" at this item count (DEF reported by BH).
 * (D276 left-rail · DO NOT regress.) */
.admin-sidenav {
    flex: 0 0 var(--admin-sidenav-w);
    width: var(--admin-sidenav-w);
    background: var(--admin-surface-raised);
    border-right: 1px solid var(--admin-border);
    padding: 16px 0;
    box-sizing: border-box;
}

.admin-sidenav nav {
    display: flex;
    flex-direction: column;
}

.admin-sidenav-link {
    display: flex;
    align-items: center;
    color: var(--admin-text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 11px 22px;
    border-left: 3px solid transparent;
    white-space: nowrap;
    transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}

.admin-sidenav-link:hover {
    color: var(--admin-text);
    background: var(--admin-surface-head);
    text-decoration: none;
}

/* Selected/active row · brand-coral left bar. */
.admin-sidenav-link--active {
    color: var(--admin-text);
    font-weight: 600;
    background: #3A2419;           /* brand.primary.100 dark · selected-row wash */
    border-left-color: var(--admin-brand-coral);
}

/* ===== Responsive · collapse the rail below tablet =====
 * Below the tablet breakpoint the shell flips to a column stack: the side-nav
 * becomes a horizontal scrolling top bar (flex-direction column fallback per
 * hi-fi lines 179 / 191). At this narrow width the item labels no longer wrap
 * because the rail scrolls horizontally instead of forcing a centered row. */
@media (max-width: 768px) {
    .admin-body {
        flex-direction: column;
    }

    .admin-sidenav {
        flex: 0 0 auto;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--admin-border);
        padding: 0;
    }

    .admin-sidenav nav {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-sidenav-link {
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 12px 16px;
    }

    .admin-sidenav-link--active {
        background: #3A2419;
        border-left-color: transparent;
        border-bottom-color: var(--admin-brand-coral);
    }
}

/* ===== KPI tiles ===== */

.kpi-tile {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kpi-tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kpi-tile-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kpi-number {
    font-size: 28px;
    color: var(--admin-text);
    line-height: 1;
}

.kpi-sparkline-wrap {
    display: inline-flex;
    align-items: center;
}

.kpi-sparkline {
    display: block;
}

.kpi-delta-wrap {
    min-height: 18px;
}

.kpi-delta {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--admin-text-muted);
}

.kpi-delta--up {
    background: #0F2517;           /* success.50  dark */
    color: #9FE4BC;                /* success.700 dark (11:1) */
}

.kpi-delta--down {
    background: #2E1413;           /* error.50  dark */
    color: #F2A9A6;                /* error.700 dark */
}

.kpi-sub {
    margin-top: 4px;
}

/* ===== D281 gap-1 · F-42.2 recent admin actions panel ===== */
.admin-recent-actions-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.admin-recent-actions-viewall {
    color: var(--admin-brand-coral);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;
}
.admin-recent-actions-viewall:hover { text-decoration: underline; }

/* ===== Table layouts (users + audit-log) ===== */

.admin-table-wrap {
    background: var(--admin-surface-raised);
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    overflow: hidden;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 12px 16px;
    font-size: 14px;
    border-bottom: 1px solid var(--admin-divider);
    color: var(--admin-text);
}

.admin-table thead th {
    background: var(--admin-surface-head);
    color: var(--admin-text-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-table tbody tr:hover {
    background: var(--admin-surface-head);
}

.admin-row-action {
    background: transparent;
    border: 1px solid var(--admin-border-strong);
    color: var(--admin-text);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    margin-right: 6px;
}

.admin-row-action:hover {
    background: var(--admin-surface-head);
}

.admin-row-action--danger {
    color: #F2A9A6;                /* error.700 dark */
    border-color: #5A2320;
}

.admin-row-action--danger:hover {
    background: #2E1413;
}

.admin-filter-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.admin-filter-bar input,
.admin-filter-bar select {
    height: 36px;
    border: 1px solid var(--admin-border-strong);
    background: var(--admin-input-bg);
    color: var(--admin-text);
    padding: 0 10px;
    border-radius: 6px;
    font-size: 13px;
}

/* D281 · inline filter-bar labels (Status / Email verified / From / To /
 * Include deactivated) keep their caption on one line so the toolbar reads
 * cleanly at desktop width (avoids the 2-3-line text wrap seen pre-fix). */
.admin-filter-bar label {
    white-space: nowrap;
    flex: 0 0 auto;
}

.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.admin-pagination button {
    background: transparent;
    border: 1px solid var(--admin-border-strong);
    color: var(--admin-text);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
}

.admin-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Generic admin form controls (rebuilt forms · D278 WAVE C) ===== */

.admin-shell .form-control,
.admin-shell select.form-control,
.admin-shell textarea.form-control,
.admin-shell input.form-control {
    background: var(--admin-input-bg);
    border: 1px solid var(--admin-border-strong);
    color: var(--admin-text);
}
.admin-shell .form-control::placeholder { color: var(--admin-text-muted); }
.admin-shell .form-control:focus {
    background: var(--admin-input-bg);
    border-color: var(--admin-brand-coral);
    color: var(--admin-text);
    box-shadow: none;
}
.admin-shell label { color: var(--admin-text-secondary); }

.admin-section {
    background: var(--admin-surface-raised);
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;          /* space.6 between sections */
}

.admin-section-title {
    color: var(--admin-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.admin-fieldset {
    border: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.admin-fieldset legend {
    color: var(--admin-text-secondary);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    float: none;
    width: auto;
}

.admin-check-row,
.admin-radio-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--admin-text);
    font-size: 14px;
    margin-bottom: 6px;
    cursor: pointer;
}

.admin-check-row input,
.admin-radio-row input {
    width: 16px;
    height: 16px;
    accent-color: var(--admin-brand-coral);
}

/* Pattern AR feature-flag toggle switch (role=switch) */
.admin-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--admin-divider);
    color: var(--admin-text);
    font-size: 14px;
}
.admin-toggle-row:last-child { border-bottom: none; }
.admin-toggle-row code {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px;
}
.admin-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
/* The input overlays the whole switch (opacity 0) so a click anywhere on the
 * track toggles it — visually hidden but pointer-clickable + keyboard-focusable. */
.admin-switch input {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer; z-index: 2;
}
.admin-switch .admin-switch-slider {
    position: absolute; inset: 0; cursor: pointer;
    background: var(--admin-border-strong);
    border-radius: 999px; transition: background 120ms ease;
}
.admin-switch .admin-switch-slider::before {
    content: ''; position: absolute; height: 18px; width: 18px;
    left: 3px; top: 3px; background: var(--admin-text);
    border-radius: 50%; transition: transform 120ms ease;
}
.admin-switch input:checked + .admin-switch-slider { background: var(--admin-brand-coral); }
.admin-switch input:checked + .admin-switch-slider::before {
    transform: translateX(20px); background: var(--admin-on-coral);
}
.admin-switch input:focus-visible + .admin-switch-slider {
    outline: 2px solid var(--admin-brand-coral); outline-offset: 2px;
}

/* Secret-field row (Pattern AQ · once-write-never-read) */
.admin-secret-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-secret-mask {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    color: var(--admin-text-secondary);
    background: var(--admin-input-bg);
    border: 1px dashed var(--admin-border-strong);
    border-radius: 6px; padding: 6px 10px; font-size: 13px;
    letter-spacing: 0.08em;
}

/* Adoption % chip (app-version · spec 46) */
.adoption-chip {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 12px; font-weight: 600;
}
.adoption-chip--healthy { background: #0F2517; color: #9FE4BC; }   /* ≥ 80% */
.adoption-chip--monitor { background: #2A1F0A; color: #FFCB7A; }   /* 50-80% */
.adoption-chip--low     { background: #2E1413; color: #F2A9A6; }   /* < 50% */

/* Broadcast PREVIEW block (spec 45 · uses customer-tier brand tint for realism) */
.bc-preview {
    background: var(--admin-input-bg);
    border: 1px solid var(--admin-border);
    border-radius: 8px; padding: 20px; margin-top: 8px;
    display: flex; flex-direction: column; gap: 12px;
}
.bc-preview-banner {
    background: #3A2419;           /* brand.primary.100 dark · in-app banner tint */
    border-left: 4px solid var(--admin-brand-coral);
    border-radius: 8px; padding: 12px 16px; color: var(--admin-text);
}
.bc-preview-push {
    background: var(--admin-surface-head);
    border: 1px solid var(--admin-border-strong);
    border-radius: 12px; padding: 12px 16px; color: var(--admin-text);
}
.bc-preview-title { font-weight: 700; margin-bottom: 4px; }
.bc-preview-body { color: var(--admin-text-secondary); font-size: 14px; }

/* ===== Verb chip color-coding (audit-log) · dark column ===== */

.verb-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
}

.verb-chip--auth-success { background: #0F2517; color: #9FE4BC; }   /* success dark */
.verb-chip--auth-failed { background: #2E1413; color: #F2A9A6; }    /* error dark */
.verb-chip--admin-action { background: #102331; color: #A4CCDE; }   /* accent dark */
.verb-chip--customer-action { background: #2B2724; color: #C2BDB4; }/* neutral dark */

/* ===== D281 gap-4 · audit payload + diff modal panes ===== */
.audit-payload-pre {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    color: var(--admin-text);             /* primary ink on the input fill · 14.2:1 AA */
    background: var(--admin-input-bg);
    border: 1px solid var(--admin-border-strong);
    border-radius: 8px;
    padding: 14px 16px;
    max-height: 360px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}
.audit-diff-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 720px) {
    .audit-diff-grid { grid-template-columns: 1fr; }
}

/* ===== Modal overlay (confirm deactivate) ===== */

.admin-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.64);   /* surface.overlay dark · neutral.0 @64% */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.admin-modal-overlay.d-none { display: none; }

.admin-modal {
    background: var(--admin-surface-raised);
    border: 1px solid var(--admin-border);
    color: var(--admin-text);
    border-radius: 12px;
    padding: 28px 32px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
}

.admin-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

/* ===== Destructive-confirm cooldown (Pattern V · § 8.3) ===== */
.admin-cooldown-bar {
    height: 4px; border-radius: 2px;
    background: #2E1413;           /* error.50 dark track */
    overflow: hidden; margin-top: 10px;
}
.admin-cooldown-bar > span {
    display: block; height: 100%;
    background: #E26E6A;           /* error.500 dark fill */
    width: 100%;
    transition: width 2s linear;
}

/* ===== Sub-slice 8.3 · approval / advisory banner ===== */

.admin-info-banner {
    background: #102331;           /* info.50 dark */
    color: #A4CCDE;                /* info.700 dark (9.9:1) */
    border: 1px solid #1B4A63;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
}

.admin-info-banner a {
    color: #A4CCDE;
    text-decoration: underline;
}

.admin-info-banner strong {
    font-weight: 600;
}

/* ===== Pending approvals badge on dashboard ===== */

.admin-pending-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: #E26E6A;           /* error.500 dark */
    color: #1A1612;                /* dark ink on light-red badge · AA */
    border-radius: 11px;
    font-size: 12px;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
}

.admin-pending-badge--zero {
    background: #5A544D;           /* neutral.400 dark */
    color: #F2EEEA;
}

/* ===== Sub-slice 8.4 · BR-134 broadcast severity chips · dark column ===== */

.bc-sev-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
}

.bc-sev-chip--info {
    background: #102331;
    color: #A4CCDE;
}

.bc-sev-chip--warning {
    background: #2A1F0A;
    color: #FFCB7A;
}

.bc-sev-chip--critical {
    background: #2E1413;
    color: #F2A9A6;
}