/* ============================================================
   Liquid Glass — AREC Platform design refresh
   Frosted glass surfaces + ambient backdrop layered on top of
   the existing Tailwind/custom CSS. Targets common card patterns
   so it lifts most pages without HTML changes.
   ============================================================ */

:root {
    /* Glass tokens */
    --lg-glass-bg:        rgba(255, 255, 255, 0.55);
    --lg-glass-bg-strong: rgba(255, 255, 255, 0.72);
    --lg-glass-bg-deep:   rgba(255, 255, 255, 0.82);
    --lg-glass-border:    rgba(255, 255, 255, 0.55);
    --lg-glass-border-soft: rgba(255, 255, 255, 0.32);
    --lg-glass-blur:      24px;
    --lg-glass-blur-deep: 32px;
    --lg-glass-saturate:  180%;

    /* Radii */
    --lg-radius-sm: 12px;
    --lg-radius-md: 16px;
    --lg-radius-lg: 20px;
    --lg-radius-xl: 26px;

    /* Layered shadows */
    --lg-shadow-soft:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 12px 28px -12px rgba(15, 23, 42, 0.18);
    --lg-shadow-medium:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 18px 36px -14px rgba(15, 23, 42, 0.22);
    --lg-shadow-deep:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 28px 56px -18px rgba(15, 23, 42, 0.28);
    --lg-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.55);

    /* Brand wash */
    --lg-tint-blue: 26 54 104;
    --lg-tint-red:  227 38 38;
    --lg-tint-navy: 37 59 142;
    --lg-bg-base:   #eef2f8;
}

/* ----------------------------------------------------------------
   Ambient backdrop — soft brand-tinted gradient mesh on the body.
   ---------------------------------------------------------------- */
html { background: var(--lg-bg-base); }

body {
    background:
        radial-gradient(1200px 820px at 6% -8%,  rgba(var(--lg-tint-blue), 0.20), transparent 60%),
        radial-gradient(1100px 720px at 108% 4%,  rgba(var(--lg-tint-red),  0.10), transparent 65%),
        radial-gradient(900px  720px at 50% 110%, rgba(var(--lg-tint-navy), 0.16), transparent 60%),
        var(--lg-bg-base) !important;
    background-attachment: fixed !important;
    isolation: isolate;
}

/* Drifting highlight orbs — pure CSS, no DOM changes */
body::before {
    content: "";
    position: fixed;
    inset: -10%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(440px 320px at 18% 22%, rgba(86, 132, 255, 0.22), transparent 70%),
        radial-gradient(380px 280px at 80% 70%, rgba(255, 110, 110, 0.16), transparent 72%),
        radial-gradient(560px 360px at 60% 12%, rgba(120, 200, 255, 0.14), transparent 70%);
    filter: blur(40px);
    animation: lg-drift 32s ease-in-out infinite alternate;
}

@keyframes lg-drift {
    0%   { transform: translate3d(0, 0, 0)        scale(1.00); }
    50%  { transform: translate3d(2.5%, -1.5%, 0) scale(1.05); }
    100% { transform: translate3d(-1.5%, 1.5%, 0) scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}

/* ----------------------------------------------------------------
   Glass cards — auto-upgrade common Tailwind card patterns.
   Specific selectors so we only catch "card-shaped" elements,
   not every white surface (avoids touching buttons, dropdowns
   that should stay opaque, etc.).
   ---------------------------------------------------------------- */
.bg-white.rounded-xl,
.bg-white.rounded-2xl,
.bg-white.rounded-lg,
.bg-white.rounded-md,
.bg-white.shadow,
.bg-white.shadow-sm,
.bg-white.shadow-md,
.bg-white.shadow-lg,
.bg-white.shadow-xl,
.bg-white.shadow-2xl {
    background-color: var(--lg-glass-bg-strong) !important;
    -webkit-backdrop-filter: blur(var(--lg-glass-blur)) saturate(var(--lg-glass-saturate));
            backdrop-filter: blur(var(--lg-glass-blur)) saturate(var(--lg-glass-saturate));
    border: 1px solid var(--lg-glass-border-soft) !important;
    box-shadow: var(--lg-shadow-soft), var(--lg-shadow-inset) !important;
    border-radius: var(--lg-radius-lg) !important;
    transition: box-shadow .25s ease, transform .25s ease, background-color .25s ease;
}

.bg-white.rounded-md  { border-radius: var(--lg-radius-md) !important; }
.bg-white.rounded-lg  { border-radius: var(--lg-radius-md) !important; }
.bg-white.rounded-2xl { border-radius: var(--lg-radius-xl) !important; }

/* Subtle hover-lift for actionable card containers */
.bg-white.shadow:hover,
.bg-white.shadow-sm:hover,
.bg-white.shadow-md:hover,
.bg-white.rounded-xl:hover,
.bg-white.rounded-2xl:hover {
    box-shadow: var(--lg-shadow-medium), var(--lg-shadow-inset) !important;
}

/* Sidebar — heavier frost, subtle right edge highlight */
aside.bg-white {
    background-color: var(--lg-glass-bg-deep) !important;
    -webkit-backdrop-filter: blur(var(--lg-glass-blur-deep)) saturate(190%);
            backdrop-filter: blur(var(--lg-glass-blur-deep)) saturate(190%);
    border-right: 1px solid var(--lg-glass-border-soft) !important;
    box-shadow:
        inset -1px 0 0 rgba(255, 255, 255, 0.40),
        4px 0 24px -12px rgba(15, 23, 42, 0.12);
}

/* Sticky header / top bar — gold tone */
header.sticky,
header.border-b {
    background:
        linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(180,83,9,0.12) !important;
    box-shadow: 0 4px 18px rgba(180,83,9,0.06) !important;
}

/* Tinted info pills (badges, "credits", soft labels) */
.bg-blue-50, .bg-red-50, .bg-green-50, .bg-yellow-50, .bg-purple-50, .bg-amber-50, .bg-slate-50 {
    -webkit-backdrop-filter: blur(8px) saturate(160%);
            backdrop-filter: blur(8px) saturate(160%);
}

/* ----------------------------------------------------------------
   Brand stat tiles — keep the color, add depth + specular sheen
   ---------------------------------------------------------------- */
.bg-blue-600.rounded-xl, .bg-blue-700.rounded-xl, .bg-blue-800.rounded-xl,
.bg-green-600.rounded-xl, .bg-purple-600.rounded-xl, .bg-red-600.rounded-xl,
.bg-amber-500.rounded-xl, .bg-slate-900.rounded-xl {
    border-radius: var(--lg-radius-lg) !important;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        0 12px 28px -10px rgba(15,23,42,0.30) !important;
}

.bg-blue-600.rounded-xl::before, .bg-blue-700.rounded-xl::before, .bg-blue-800.rounded-xl::before,
.bg-green-600.rounded-xl::before, .bg-purple-600.rounded-xl::before, .bg-red-600.rounded-xl::before,
.bg-amber-500.rounded-xl::before, .bg-slate-900.rounded-xl::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%);
    pointer-events: none;
    z-index: 0;
}

.bg-blue-600.rounded-xl > *, .bg-blue-700.rounded-xl > *, .bg-blue-800.rounded-xl > *,
.bg-green-600.rounded-xl > *, .bg-purple-600.rounded-xl > *, .bg-red-600.rounded-xl > *,
.bg-amber-500.rounded-xl > *, .bg-slate-900.rounded-xl > * {
    position: relative;
    z-index: 1;
}

/* ----------------------------------------------------------------
   Inputs — frosted with inner shadow and focused glow
   ---------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="url"], textarea, select {
    background-color: rgba(255, 255, 255, 0.62) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: background-color .2s, box-shadow .2s, border-color .2s;
}

input:focus, textarea:focus, select:focus {
    background-color: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(43, 92, 231, 0.45) !important;
    box-shadow:
        0 0 0 4px rgba(43, 92, 231, 0.16),
        inset 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    outline: none !important;
}

/* Tailwind input pattern with explicit gray-50 background */
input.bg-gray-50, textarea.bg-gray-50, select.bg-gray-50 {
    background-color: rgba(255, 255, 255, 0.62) !important;
}

/* ----------------------------------------------------------------
   Buttons — micro-lift on hover, specular top edge on brand colors
   ---------------------------------------------------------------- */
button, .btn, [role="button"] {
    transition: transform .15s ease, box-shadow .25s ease,
                background-color .2s ease, filter .2s ease;
}

button:hover, .btn:hover, [role="button"]:hover { transform: translateY(-1px); }
button:active, .btn:active, [role="button"]:active { transform: translateY(0); }

/* Specular highlight on brand-colored buttons */
button.bg-blue-600, button.bg-blue-700, button.bg-blue-800, button.bg-blue-900,
button.bg-red-500, button.bg-red-600,
button.bg-green-600, button.bg-purple-600, button.bg-slate-900,
.bg-blue-900.rounded-lg, .bg-blue-800.rounded-lg, .bg-red-500.rounded-lg, .bg-red-600.rounded-lg {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 6px 18px -6px rgba(15, 23, 42, 0.32);
}

button.bg-blue-600:hover, button.bg-blue-700:hover, button.bg-blue-800:hover,
button.bg-blue-900:hover, button.bg-red-500:hover, button.bg-red-600:hover {
    filter: brightness(1.06);
}

/* ----------------------------------------------------------------
   Modal content — frosted dialog
   ---------------------------------------------------------------- */
.modal-content {
    background: var(--lg-glass-bg-deep) !important;
    -webkit-backdrop-filter: blur(30px) saturate(190%);
            backdrop-filter: blur(30px) saturate(190%);
    border: 1px solid var(--lg-glass-border-soft);
    box-shadow: var(--lg-shadow-deep), var(--lg-shadow-inset);
    border-radius: var(--lg-radius-xl);
}

/* ----------------------------------------------------------------
   Report-page surfaces (.panel / .exec-card / .hero-stat / .grade-card / .data-cell / .nav-tabs)
   ---------------------------------------------------------------- */
.panel {
    background: var(--lg-glass-bg-strong) !important;
    -webkit-backdrop-filter: blur(var(--lg-glass-blur)) saturate(var(--lg-glass-saturate));
            backdrop-filter: blur(var(--lg-glass-blur)) saturate(var(--lg-glass-saturate));
    border: 1px solid var(--lg-glass-border-soft) !important;
    border-radius: var(--lg-radius-lg) !important;
    box-shadow: var(--lg-shadow-soft), var(--lg-shadow-inset) !important;
}

.panel-header {
    border-bottom-color: rgba(15, 23, 42, 0.06) !important;
}

.panel-header:hover {
    background: rgba(255, 255, 255, 0.45) !important;
}

.exec-card {
    background: var(--lg-glass-bg-strong) !important;
    -webkit-backdrop-filter: blur(var(--lg-glass-blur)) saturate(var(--lg-glass-saturate));
            backdrop-filter: blur(var(--lg-glass-blur)) saturate(var(--lg-glass-saturate));
    border: 1px solid var(--lg-glass-border-soft) !important;
    border-radius: var(--lg-radius-lg) !important;
    box-shadow: var(--lg-shadow-soft), var(--lg-shadow-inset) !important;
    transition: transform .25s ease, box-shadow .25s ease;
}

.exec-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--lg-shadow-medium), var(--lg-shadow-inset) !important;
}

.hero-stat,
.grade-card {
    background: var(--lg-glass-bg-strong) !important;
    -webkit-backdrop-filter: blur(var(--lg-glass-blur)) saturate(var(--lg-glass-saturate));
            backdrop-filter: blur(var(--lg-glass-blur)) saturate(var(--lg-glass-saturate));
    border: 1px solid var(--lg-glass-border-soft) !important;
    border-radius: var(--lg-radius-md) !important;
    box-shadow: var(--lg-shadow-soft), var(--lg-shadow-inset) !important;
}

.hero-satellite {
    border: 1px solid var(--lg-glass-border-soft) !important;
    border-radius: var(--lg-radius-md) !important;
    box-shadow: var(--lg-shadow-soft) !important;
}

/* Tab strip — pill-shaped frosted bar */
.nav-tabs {
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: blur(18px) saturate(170%);
            backdrop-filter: blur(18px) saturate(170%);
    border: 1px solid var(--lg-glass-border-soft);
    border-radius: 14px !important;
    box-shadow: var(--lg-shadow-inset);
}

.nav-tab.active {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 4px 14px -4px rgba(30, 58, 95, 0.45);
}

/* Data cells — solid for legibility but tinted lightly */
.data-grid { background: rgba(15, 23, 42, 0.06) !important; }
.data-cell { background: rgba(255, 255, 255, 0.78) !important; }

/* ----------------------------------------------------------------
   Tables stay opaque — keeps dense rows legible & scrolls fast
   ---------------------------------------------------------------- */
table, table tr, table td, table th, tbody, thead, tfoot {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
}

/* ----------------------------------------------------------------
   Typography polish
   ---------------------------------------------------------------- */
body {
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    letter-spacing: -0.015em;
}

/* ----------------------------------------------------------------
   Print: collapse to solid surfaces for clean PDFs
   ---------------------------------------------------------------- */
@media print {
    body { background: white !important; }
    body::before { display: none !important; }

    .bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-white.rounded-lg,
    .bg-white.rounded-md, .bg-white.shadow, .bg-white.shadow-sm,
    .bg-white.shadow-md, .bg-white.shadow-lg, .bg-white.shadow-xl,
    .bg-white.shadow-2xl, aside.bg-white, header.sticky, header.border-b,
    .modal-content, .panel, .exec-card, .hero-stat, .grade-card, .nav-tabs {
        background: white !important;
        -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
        box-shadow: none !important;
        border: 1px solid #e5e7eb !important;
    }
}

/* ----------------------------------------------------------------
   Accessibility — honor reduced-transparency preference
   ---------------------------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
    .bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-white.rounded-lg,
    .bg-white.rounded-md, .bg-white.shadow, .bg-white.shadow-sm,
    .bg-white.shadow-md, .bg-white.shadow-lg, .bg-white.shadow-xl,
    .bg-white.shadow-2xl, aside.bg-white, header.sticky, header.border-b,
    .modal-content, .panel, .exec-card, .hero-stat, .grade-card, .nav-tabs {
        background-color: #ffffff !important;
        -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
    }
    body::before { display: none !important; }
}

/* ----------------------------------------------------------------
   Dark mode harmony — re-tone glass when dark-mode.css is active
   ---------------------------------------------------------------- */
html.dark, body.dark-mode, html[data-theme="dark"] {
    --lg-glass-bg:        rgba(15, 23, 42, 0.55);
    --lg-glass-bg-strong: rgba(15, 23, 42, 0.70);
    --lg-glass-bg-deep:   rgba(15, 23, 42, 0.82);
    --lg-glass-border-soft: rgba(255, 255, 255, 0.08);
    --lg-bg-base: #0b1220;
}

html.dark body, body.dark-mode, html[data-theme="dark"] body {
    background:
        radial-gradient(1200px 820px at 6% -8%,  rgba(43, 92, 231, 0.28), transparent 60%),
        radial-gradient(1100px 720px at 108% 4%,  rgba(227, 38, 38, 0.14), transparent 65%),
        radial-gradient(900px  720px at 50% 110%, rgba(37, 59, 142, 0.30), transparent 60%),
        var(--lg-bg-base) !important;
}

/* ----------------------------------------------------------------
   body.report-flat — Path C: solid surfaces inside report bodies
   App chrome (sidebar/header/modals) keeps glass; data-dense report
   surfaces switch to solid white + soft shadow for legibility and
   scroll performance. Toggled per-page by adding class to <body>.
   ---------------------------------------------------------------- */
body.report-flat .panel,
body.report-flat .exec-card,
body.report-flat .hero-stat,
body.report-flat .grade-card,
body.report-flat .nav-tabs {
    background: #ffffff !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 4px 12px -6px rgba(15, 23, 42, 0.10) !important;
}

body.report-flat .data-cell {
    background: #ffffff !important;
}

/* Tailwind-class card pattern (used by view_area_report.html) gets the same flat treatment */
body.report-flat .bg-white.rounded-xl {
    background-color: #ffffff !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 4px 12px -6px rgba(15, 23, 42, 0.10) !important;
}
body.report-flat .data-grid {
    background: rgba(15, 23, 42, 0.06) !important;
}
body.report-flat .hero-satellite {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
}

/* Keep the page backdrop calm, not gradient-heavy, in flat mode */
body.report-flat {
    background: #f8fafc !important;
}
body.report-flat::before { display: none !important; }

/* Dark mode flat surfaces */
html.dark body.report-flat .panel,
html.dark body.report-flat .exec-card,
html.dark body.report-flat .hero-stat,
html.dark body.report-flat .grade-card,
html.dark body.report-flat .nav-tabs {
    background: #1e293b !important;
    border-color: #334155 !important;
}
html.dark body.report-flat .data-cell { background: #0f172a !important; }
html.dark body.report-flat .data-grid { background: #334155 !important; }

/* ============================================================
   GOLD UNDERLINE SWEEP — hover effect for all site links
   A gold gradient line animates left→right under the link text
   on hover. Applied to sidebar nav, content text links, and
   panel/report links. Excluded: buttons, badges, cards, image
   links, and active nav items.
   ============================================================ */

/* --- Core mixin (applied via the selectors below) ----------- */
.sidebar nav a,
aside nav a,
.report-breadcrumb__crumbs a,
.panel-body a,
.data-cell a,
p > a,
li > a,
td > a,
th > a,
.content a,
.main-content a,
.text-link {
    text-decoration: none;
    background-image: linear-gradient(
        90deg,
        var(--color-gold-deep, #b3882f),
        var(--color-gold-mid,  #d8bc72),
        var(--color-gold-deep, #b3882f)
    );
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 2px;
    padding-bottom: 1px;
    transition:
        background-size 220ms ease,
        color 180ms ease !important;
}

/* Hover: sweep the line full width */
.sidebar nav a:hover,
aside nav a:hover,
.report-breadcrumb__crumbs a:hover,
.panel-body a:hover,
.data-cell a:hover,
p > a:hover,
li > a:hover,
td > a:hover,
th > a:hover,
.content a:hover,
.main-content a:hover,
.text-link:hover {
    background-size: 100% 2px !important;
}

/* Sidebar nav: also shift text to brand blue on hover, matching
   the active item color so navigation feels cohesive */
.sidebar nav a:hover,
aside nav a:hover {
    color: #2046b3 !important;
}
html.dark .sidebar nav a:hover,
html.dark aside nav a:hover {
    color: #93c5fd !important;
}

/* Active/current nav item: suppress the sweep (already highlighted) */
.sidebar nav a.text-blue-600,
.sidebar nav a[aria-current="page"],
aside nav a.text-blue-600,
aside nav a[aria-current="page"] {
    background-image: none;
}

/* Report breadcrumb links keep their blue color on hover */
.report-breadcrumb__crumbs a:hover {
    color: #1d4ed8 !important;
}
html.dark .report-breadcrumb__crumbs a:hover {
    color: #93c5fd !important;
}
html.dark body.report-flat { background: #0b1220 !important; }