/* ============================================================================
   THEME SYSTEM — design tokens + theme packs
   ----------------------------------------------------------------------------
   Base tokens on .layout-wrapper hold today's exact values (= the Classic pack
   and the fallback for the legacy "Custom" six-axis mixer). A pack is applied
   by adding .theme-{name} to .layout-wrapper, which redefines the tokens; the
   MainLayout suppresses the legacy inline style + nav-*/template-* classes
   while a pack is active so the pack fully owns the look.

   RULE: never apply transform / filter / backdrop-filter to .layout-wrapper
   itself — it would become the containing block for the position:fixed modals
   that live inside it. Prism's aurora lives on a ::before pseudo-element.
   ============================================================================ */

/* ---------- fixed semantic tokens (never themed) ---------- */
:root {
    --success: #16a34a;
    --warn: #f59e0b;
    --danger: #dc3545;
    --ga-stripe: linear-gradient(90deg, #e67e22 0 28%, #d63f2e 28% 52%, #4fa64f 52% 76%, #0b6fb4 76% 100%);
}

/* ---------- base tokens = today's values (Classic / Custom fallback) ---------- */
.layout-wrapper {
    /* surfaces */
    --surface-page: #f5f6fa;
    --surface-card: #ffffff;
    --surface-card-top: #cfe9fb;
    --surface-raised: #ffffff;
    --surface-inset: #f6f9fb;

    /* chrome */
    --nav-bg: #073d63;
    --nav-fg: #d7d7d7;
    --nav-fg-muted: rgba(255, 255, 255, 0.45);
    --nav-hover-bg: rgba(255, 255, 255, 0.06);
    --nav-active-bg: rgba(255, 255, 255, 0.12);
    --nav-active-fg: #ffffff;
    --nav-divider: rgba(255, 255, 255, 0.15);
    --topbar-bg: #f7f7f7;
    --topbar-fg: #333333;
    --topbar-border: #d6d5d5;
    --logo-bg: #ffffff;

    /* text */
    --text-primary: #333333;
    --text-secondary: #4b5563;
    --text-muted: #6c757d;
    --heading: #003366;

    /* accent family (Custom overrides these via the inline style attribute) */
    --accent: #0058a5;
    --accent-bg: #cce1f2;
    --accent-contrast: #ffffff;
    --accent-shadow: rgba(0, 88, 165, 0.18);

    /* borders + shape + effects */
    --border: #e5e7eb;
    --border-strong: #d1d5db;
    --card-radius: 8px;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-raised: 0 8px 30px rgba(0, 0, 0, 0.15);
    --glass-blur: 0px;

    /* tables */
    --table-header-bg: var(--accent);
    --table-header-fg: #ffffff;
    --table-row-hover: #f6f9fb;

    /* back-compat alias — ~22 page stylesheets consume --page-bg */
    --page-bg: var(--surface-page);
}

/* ============================================================================
   PACK: ATLANTIC — refined brand light (Product Lookup aesthetic app-wide)
   ============================================================================ */
.layout-wrapper.theme-atlantic {
    --surface-page: #f4f7fa;
    --surface-card: #ffffff;
    --surface-card-top: #ffffff;
    --surface-raised: #ffffff;
    --surface-inset: #f6f9fb;
    --nav-bg: #0b3f63;
    --nav-fg: #d8e4ee;
    --nav-fg-muted: rgba(216, 228, 238, 0.55);
    --nav-hover-bg: rgba(255, 255, 255, 0.07);
    --nav-active-bg: rgba(255, 255, 255, 0.14);
    --nav-active-fg: #ffffff;
    --nav-divider: rgba(255, 255, 255, 0.15);
    --topbar-bg: #ffffff;
    --topbar-fg: #1f2937;
    --topbar-border: #e2e8f0;
    --logo-bg: #ffffff;
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --heading: #0b3f63;
    --accent: #1a5276;
    --accent-bg: #e8f0f6;
    --accent-contrast: #ffffff;
    --accent-shadow: rgba(26, 82, 118, 0.18);
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --card-radius: 10px;
    --card-shadow: 0 1px 3px rgba(11, 63, 99, 0.08);
    --shadow-raised: 0 8px 30px rgba(11, 63, 99, 0.18);
    --table-header-bg: #1a5276;
    --table-row-hover: #f0f6fa;
}

/* GA stripe signature under every card banner.
   NB: the base .card-top::after is a rotated 140% "sheen" overlay — every pack
   stripe override must FULLY redefine position/size/transform or it inherits
   the rotation and renders as a diagonal line across the banner. */
.layout-wrapper.theme-atlantic .card-top {
    border-bottom: 1px solid #eef2f6;
}

.layout-wrapper.theme-atlantic .card-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 3px;
    transform: none;
    background: var(--ga-stripe);
    opacity: 1;
}

/* ============================================================================
   PACK: PRISM — refracted glass over a GA aurora
   ============================================================================ */
.layout-wrapper.theme-prism {
    --surface-page: transparent;
    --surface-card: rgba(255, 255, 255, 0.93);
    --surface-card-top: rgba(255, 255, 255, 0.82);
    --surface-raised: rgba(255, 255, 255, 0.96);
    --surface-inset: rgba(240, 246, 251, 0.9);
    --nav-bg: rgba(11, 63, 99, 0.72);
    --nav-fg: #eaf3fa;
    --nav-fg-muted: rgba(234, 243, 250, 0.6);
    --nav-hover-bg: rgba(255, 255, 255, 0.12);
    --nav-active-bg: rgba(255, 255, 255, 0.22);
    --nav-active-fg: #ffffff;
    --nav-divider: rgba(255, 255, 255, 0.3);
    --topbar-bg: rgba(255, 255, 255, 0.55);
    --topbar-fg: #16283a;
    --topbar-border: rgba(255, 255, 255, 0.5);
    --logo-bg: rgba(255, 255, 255, 0.85);
    --text-primary: #16283a;
    --text-secondary: #2c4257;
    --text-muted: #4a6377;
    --heading: #0b3f63;
    --accent: #0b6fb4;
    --accent-bg: rgba(11, 111, 180, 0.14);
    --accent-contrast: #ffffff;
    --accent-shadow: rgba(11, 111, 180, 0.22);
    --border: rgba(255, 255, 255, 0.75);
    --border-strong: rgba(255, 255, 255, 0.9);
    --card-radius: 14px;
    --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 36px rgba(11, 63, 99, 0.22);
    --shadow-raised: 0 16px 48px rgba(11, 63, 99, 0.28);
    --glass-blur: 14px;
    --table-header-bg: rgba(11, 63, 99, 0.88);
    --table-row-hover: rgba(255, 255, 255, 0.55);
}

/* Aurora backdrop: fixed pseudo-element — GA colours plus a spectrum light-beam
   crossing the page. Glass panels diffuse the beam via backdrop-filter. */
.layout-wrapper.theme-prism::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        /* soft vignette so the near-white tiles pop off the coloured backdrop */
        radial-gradient(120% 120% at 50% 45%, transparent 50%, rgba(11, 63, 99, 0.18) 100%),
        linear-gradient(115deg,
            transparent 38%,
            rgba(230, 126, 34, 0.34) 43%,
            rgba(214, 63, 46, 0.30) 47%,
            rgba(79, 166, 79, 0.28) 51%,
            rgba(11, 111, 180, 0.34) 55%,
            transparent 61%),
        radial-gradient(60% 80% at 15% 10%, rgba(11, 111, 180, 0.28), transparent 60%),
        radial-gradient(50% 70% at 85% 20%, rgba(230, 126, 34, 0.20), transparent 60%),
        radial-gradient(45% 60% at 70% 90%, rgba(79, 166, 79, 0.16), transparent 60%),
        #dde9f3;
    background-size: 200% 200%;
    animation: prism-drift 45s ease-in-out infinite alternate;
}

@keyframes prism-drift {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .layout-wrapper.theme-prism::before {
        animation: none;
    }
}

/* Glass surfaces — budget: sidebar, top bar, cards, modal shells ONLY */
.layout-wrapper.theme-prism .sidebar,
.layout-wrapper.theme-prism .sidebar-logo,
.layout-wrapper.theme-prism .top-row {
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}

.layout-wrapper.theme-prism .card,
.layout-wrapper.theme-prism .table-responsive,
.layout-wrapper.theme-prism .meta-card {
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    border: 1px solid var(--border);
}

.layout-wrapper.theme-prism .feedback-modal,
.layout-wrapper.theme-prism .about-modal,
.layout-wrapper.theme-prism .modal-content {
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    background: var(--surface-raised);
}

/* Refracted GA stripe on card banners (fully redefined — see Atlantic note) */
.layout-wrapper.theme-prism .card-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 3px;
    transform: none;
    background: var(--ga-stripe);
    filter: blur(0.5px) saturate(1.2);
    opacity: 0.85;
}

/* REFRACTION: inside each glass tile the GA beam re-emerges at a different
   angle and displacement — light bending as it passes through the pane. */
.layout-wrapper.theme-prism .card,
.layout-wrapper.theme-prism .meta-card,
.layout-wrapper.theme-prism .lookup-card {
    position: relative;
    overflow: hidden;
}

.layout-wrapper.theme-prism .card::before,
.layout-wrapper.theme-prism .meta-card::before,
.layout-wrapper.theme-prism .lookup-card::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -25%;
    width: 55%;
    height: 190%;
    background: linear-gradient(90deg,
        rgba(230, 126, 34, 0.34) 0 25%,
        rgba(214, 63, 46, 0.32) 25% 50%,
        rgba(79, 166, 79, 0.30) 50% 75%,
        rgba(11, 111, 180, 0.34) 75% 100%);
    transform: rotate(32deg);
    filter: blur(9px) saturate(1.35);
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

.layout-wrapper.theme-prism .card > *,
.layout-wrapper.theme-prism .meta-card > *,
.layout-wrapper.theme-prism .lookup-card > * {
    position: relative;
    z-index: 1;
}

/* ============================================================================
   Modern micro-interactions (all packs except Classic/Custom)
   ============================================================================ */
.layout-wrapper.theme-atlantic .card,
.layout-wrapper.theme-prism .card,
.layout-wrapper.theme-midnight .card,
.layout-wrapper.theme-ember .card,
.layout-wrapper.theme-atlantic .meta-card,
.layout-wrapper.theme-prism .meta-card,
.layout-wrapper.theme-midnight .meta-card,
.layout-wrapper.theme-ember .meta-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.layout-wrapper.theme-atlantic a.card:hover,
.layout-wrapper.theme-prism a.card:hover,
.layout-wrapper.theme-midnight a.card:hover,
.layout-wrapper.theme-ember a.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-raised);
}

.layout-wrapper.theme-atlantic .btn,
.layout-wrapper.theme-prism .btn,
.layout-wrapper.theme-midnight .btn,
.layout-wrapper.theme-ember .btn {
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.layout-wrapper.theme-atlantic .btn:active,
.layout-wrapper.theme-prism .btn:active,
.layout-wrapper.theme-midnight .btn:active,
.layout-wrapper.theme-ember .btn:active {
    transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
    .layout-wrapper .card,
    .layout-wrapper .meta-card,
    .layout-wrapper .btn {
        transition: none !important;
    }
}

/* Fallbacks: no backdrop-filter support / reduced transparency → near-solid */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .layout-wrapper.theme-prism {
        --surface-card: rgba(255, 255, 255, 0.94);
        --surface-raised: #ffffff;
        --topbar-bg: rgba(255, 255, 255, 0.94);
        --nav-bg: #0b3f63;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .layout-wrapper.theme-prism {
        --surface-card: rgba(255, 255, 255, 0.96);
        --surface-raised: #ffffff;
        --topbar-bg: rgba(255, 255, 255, 0.96);
        --nav-bg: #0b3f63;
    }

    .layout-wrapper.theme-prism::before {
        animation: none;
    }
}

/* ============================================================================
   PACK: MIDNIGHT — true dark with glowing GA accents
   ============================================================================ */
/* Root-level dark treatment: the document's own scrollbars and overscroll
   background live OUTSIDE .layout-wrapper — without this they stay light and
   glow like fluorescent tubes beside the dark UI. */
html:has(.layout-wrapper.theme-midnight),
html:has(.layout-wrapper.theme-midnight) body {
    color-scheme: dark;
    background: #0f1520;
}

.layout-wrapper.theme-midnight {
    color-scheme: dark;
    --surface-page: #0f1520;
    --surface-card: #171f2e;
    --surface-card-top: #1b2537;
    --surface-raised: #1c2637;
    --surface-inset: #121926;
    --nav-bg: #0a0f18;
    --nav-fg: #9fb1c4;
    --nav-fg-muted: #5d7089;
    --nav-hover-bg: rgba(255, 255, 255, 0.05);
    --nav-active-bg: rgba(77, 163, 232, 0.16);
    --nav-active-fg: #7cc0f4;
    --nav-divider: #1c2942;
    --topbar-bg: #121926;
    --topbar-fg: #d5dee9;
    --topbar-border: #223047;
    --logo-bg: #121926;
    --text-primary: #e6edf5;
    --text-secondary: #a8b7c7;
    --text-muted: #7a8a9c;
    --heading: #dbe7f3;
    --accent: #4da3e8;
    --accent-bg: rgba(77, 163, 232, 0.15);
    --accent-contrast: #08121d;
    --accent-shadow: rgba(77, 163, 232, 0.35);
    --border: #24334a;
    --border-strong: #33455f;
    --card-radius: 10px;
    --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-raised: 0 12px 40px rgba(0, 0, 0, 0.6);
    --table-header-bg: #1b2f45;
    --table-header-fg: #cfe2f4;
    --table-row-hover: #1a2436;
}

/* Dark chrome: the GA logo renders as a clean white mark on the dark tile
   (no bright white box searing pretty eyes at midnight) */
.layout-wrapper.theme-midnight .sidebar-logo {
    border-bottom-color: #1c2942;
}

.layout-wrapper.theme-midnight .sidebar-logo img {
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

/* Generic dark treatment for forms not yet token-migrated */
.layout-wrapper.theme-midnight input[type="text"],
.layout-wrapper.theme-midnight input[type="date"],
.layout-wrapper.theme-midnight input[type="number"],
.layout-wrapper.theme-midnight input[type="search"],
.layout-wrapper.theme-midnight select,
.layout-wrapper.theme-midnight textarea,
.layout-wrapper.theme-midnight .form-control,
.layout-wrapper.theme-midnight .form-select {
    background-color: var(--surface-inset);
    color: var(--text-primary);
    border-color: var(--border);
}

.layout-wrapper.theme-midnight ::placeholder {
    color: var(--text-muted);
}

/* Glow accents */
.layout-wrapper.theme-midnight .nav-item a.active,
.layout-wrapper.theme-midnight .btn-primary {
    box-shadow: 0 0 12px var(--accent-shadow);
}

/* Status pills dim to translucent tints that keep their meaning */
.layout-wrapper.theme-midnight .pass-pill.pass,
.layout-wrapper.theme-midnight .m-pass {
    background: rgba(34, 197, 94, 0.16);
    color: #6ee7a0;
}

.layout-wrapper.theme-midnight .pass-pill.fail {
    background: rgba(239, 68, 68, 0.16);
    color: #fda49b;
}

.layout-wrapper.theme-midnight .pass-pill.bypass {
    background: rgba(245, 158, 11, 0.16);
    color: #fbd38d;
}

/* ============================================================================
   PACK: EMBER — warm GA flame gradient
   ============================================================================ */
.layout-wrapper.theme-ember {
    --surface-page: #faf5ef;
    --surface-card: #fffdfa;
    --surface-card-top: #fbf4ec;
    --surface-raised: #fffdfa;
    --surface-inset: #f7ede2;
    --nav-bg: #332015;
    --nav-fg: #eadbd0;
    --nav-fg-muted: rgba(234, 219, 208, 0.55);
    --nav-hover-bg: rgba(255, 255, 255, 0.07);
    --nav-active-bg: rgba(230, 126, 34, 0.28);
    --nav-active-fg: #ffd9b8;
    --nav-divider: rgba(255, 255, 255, 0.14);
    --topbar-bg: #fff8f1;
    --topbar-fg: #3a2a20;
    --topbar-border: #eeddcd;
    --logo-bg: #ffffff;
    --text-primary: #33251d;
    --text-secondary: #5d4a3c;
    --text-muted: #7d6753;
    --heading: #5c3317;
    --accent: #e67e22;
    --accent-bg: #fdeedd;
    --accent-contrast: #ffffff;
    --accent-shadow: rgba(230, 126, 34, 0.25);
    --border: #ecdccb;
    --border-strong: #dcc4ab;
    --card-radius: 12px;
    --card-shadow: 0 2px 8px rgba(122, 60, 22, 0.10);
    --shadow-raised: 0 8px 30px rgba(122, 60, 22, 0.18);
    --table-header-bg: #a34a1c;
    --table-row-hover: #faf0e6;
}

/* Flame accents (fully redefined ::after — see Atlantic note) */
.layout-wrapper.theme-ember .card-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 3px;
    transform: none;
    background: linear-gradient(90deg, #e67e22, #d63f2e);
    opacity: 1;
}

/* Calmer, deeper card text than raw accent orange */
.layout-wrapper.theme-ember .card-title {
    color: #a34a1c;
}

.layout-wrapper.theme-ember .sidebar {
    border-right: 1px solid rgba(230, 126, 34, 0.3);
}

.layout-wrapper.theme-ember .btn-primary {
    background: linear-gradient(120deg, #e67e22, #d63f2e);
    border-color: transparent;
}

/* ============================================================================
   Modal surfaces per pack (feedback/about modal scoped CSS stays hard-coded
   light; these higher-specificity overrides re-surface them per pack)
   ============================================================================ */
.layout-wrapper.theme-midnight .feedback-modal,
.layout-wrapper.theme-midnight .about-modal {
    background: var(--surface-raised);
    color: var(--text-primary);
}

.layout-wrapper.theme-midnight .feedback-modal h3,
.layout-wrapper.theme-midnight .about-modal h3 {
    color: var(--heading);
}

.layout-wrapper.theme-ember .feedback-modal,
.layout-wrapper.theme-ember .about-modal,
.layout-wrapper.theme-atlantic .feedback-modal,
.layout-wrapper.theme-atlantic .about-modal {
    background: var(--surface-raised);
}

/* ============================================================================
   Per-pack focus visibility (accessibility)
   ============================================================================ */
.layout-wrapper.theme-atlantic :focus-visible,
.layout-wrapper.theme-prism :focus-visible,
.layout-wrapper.theme-midnight :focus-visible,
.layout-wrapper.theme-ember :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}