/* ============================================================================
   Section-based hero colours — wayfinding by sidebar section.
   MainLayout puts a `section-*` class on <main> based on the current route;
   each section sets CSS variables, and one shared block paints the hero from
   them. This is the single source of truth for hero colour (per-page `-mode`
   hero overrides have been removed). Customer/public/dashboard pages have no
   section class → they keep the default blue hero from HeroHeader.razor.css.
   ============================================================================ */

/* WORK — blue */
main.app-main.section-work {
    --hsa: rgba(59,130,246,0.32); --hsb: rgba(37,99,235,0.24);
    --hg1: #0b1220; --hg2: #0f1b2c; --hg3: #13294a; --hwave: rgba(37,99,235,0.5);
    --hacc: #bfdbfe; --hacci: #93c5fd; --hbord: rgba(59,130,246,0.40); --hebg: rgba(59,130,246,0.16);
    --hempty: #7f93b8; --hsub: #9fb3d8; --htab: #9fb3d8;
}
/* MONEY — green/emerald */
main.app-main.section-money {
    --hsa: rgba(16,185,129,0.30); --hsb: rgba(245,158,11,0.18);
    --hg1: #06140f; --hg2: #0c2418; --hg3: #0c3a26; --hwave: rgba(5,150,105,0.5);
    --hacc: #6ee7b7; --hacci: #34d399; --hbord: rgba(16,185,129,0.40); --hebg: rgba(16,185,129,0.16);
    --hempty: #6b8f81; --hsub: #8fc7b3; --htab: #8fc7b3;
}
/* MANAGE — violet */
main.app-main.section-manage {
    --hsa: rgba(139,92,246,0.32); --hsb: rgba(168,85,247,0.22);
    --hg1: #160f24; --hg2: #241640; --hg3: #2c1f5c; --hwave: rgba(124,58,237,0.5);
    --hacc: #ddd6fe; --hacci: #c4b5fd; --hbord: rgba(139,92,246,0.40); --hebg: rgba(139,92,246,0.18);
    --hempty: #8a82b8; --hsub: #b3a8d8; --htab: #b3a8d8;
}
/* BUSINESS — gold on slate */
main.app-main.section-business {
    --hsa: rgba(251,191,36,0.30); --hsb: rgba(245,158,11,0.26);
    --hg1: #0b1220; --hg2: #1a1810; --hg3: #2a200a; --hwave: rgba(120,80,20,0.5);
    --hacc: #fde68a; --hacci: #fbbf24; --hbord: rgba(251,191,36,0.38); --hebg: rgba(251,191,36,0.14);
    --hempty: #9a8c6a; --hsub: #cbb89f; --htab: #cbb89f;
}
/* SAFETY & COMPLIANCE — red */
main.app-main.section-safety {
    --hsa: rgba(239,68,68,0.30); --hsb: rgba(245,158,11,0.20);
    --hg1: #1a0f12; --hg2: #2a1116; --hg3: #3a0f14; --hwave: rgba(185,28,28,0.5);
    --hacc: #fca5a5; --hacci: #f87171; --hbord: rgba(239,68,68,0.40); --hebg: rgba(239,68,68,0.16);
    --hempty: #b08a8a; --hsub: #d8a8a8; --htab: #d8a8a8;
}
/* COMMS / ACCOUNT / SUPPORT — slate */
main.app-main.section-comms {
    --hsa: rgba(148,163,184,0.22); --hsb: rgba(100,116,139,0.18);
    --hg1: #0f172a; --hg2: #1e293b; --hg3: #334155; --hwave: rgba(71,85,105,0.5);
    --hacc: #cbd5e1; --hacci: #e2e8f0; --hbord: rgba(148,163,184,0.35); --hebg: rgba(148,163,184,0.16);
    --hempty: #7d8a9c; --hsub: #aab6c6; --htab: #aab6c6;
}

/* ADMIN console — steel indigo (distinct from comms slate) */
main.app-main.section-admin {
    --hsa: rgba(99,102,241,0.26); --hsb: rgba(79,70,229,0.20);
    --hg1: #0b1020; --hg2: #141a30; --hg3: #1e2440; --hwave: rgba(79,70,229,0.5);
    --hacc: #c7d2fe; --hacci: #a5b4fc; --hbord: rgba(99,102,241,0.38); --hebg: rgba(99,102,241,0.16);
    --hempty: #7c84a8; --hsub: #a7b0d0; --htab: #a7b0d0;
}

/* Shared hero painting from the section's variables. High specificity + !important
   so it wins over the scoped base and any leftover per-page rules. */
main.app-main[class*="section-"] .hero-header {
    background:
        radial-gradient(900px 380px at 6% -10%, var(--hsa), transparent 70%),
        radial-gradient(700px 320px at 96% -20%, var(--hsb), transparent 70%),
        linear-gradient(135deg, var(--hg1) 0%, var(--hg2) 48%, var(--hg3) 100%) !important;
    color: #f8fafc;
    box-shadow: 0 22px 48px rgba(8,12,24,0.34);
}
main.app-main[class*="section-"] .hero-header .hero-bg { display: none; }
main.app-main[class*="section-"] .hero-header .hero-wave path { fill: var(--hwave) !important; }
main.app-main[class*="section-"] .hero-header h1 {
    background: linear-gradient(120deg, #ffffff 0%, var(--hacc) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    font-weight: 800;
}
main.app-main[class*="section-"] .hero-header p { color: var(--hsub); }
main.app-main[class*="section-"] .hero-eyebrow {
    background: var(--hebg) !important; color: var(--hacc) !important;
    border: 1px solid var(--hbord) !important; font-weight: 800; letter-spacing: 0.14em; backdrop-filter: blur(6px);
}
main.app-main[class*="section-"] .hero-eyebrow i { color: var(--hacci) !important; }
main.app-main[class*="section-"] .hero-stat-card {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 10px; backdrop-filter: blur(8px);
}
main.app-main[class*="section-"] .hero-stat-label { color: var(--hacc); letter-spacing: 0.1em; font-weight: 700; }
main.app-main[class*="section-"] .hero-stat-value {
    background: linear-gradient(120deg, #ffffff 0%, var(--hacc) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
main.app-main[class*="section-"] .hero-stat-value.hero-stat-value-empty {
    -webkit-text-fill-color: var(--hempty); color: var(--hempty); background: none;
}
main.app-main[class*="section-"] .hero-stat-sub { color: var(--hsub); }
main.app-main[class*="section-"] .hero-tab { color: var(--htab); }
main.app-main[class*="section-"] .hero-tab:hover { color: #ffffff; }
main.app-main[class*="section-"] .hero-tab-active { color: var(--hacc); }
main.app-main[class*="section-"] .hero-tab-badge { background: rgba(255,255,255,0.14); color: #ffffff; }
main.app-main[class*="section-"] .hero-tab-badge-good { background: var(--hebg); color: var(--hacc); }
main.app-main[class*="section-"] .hero-tab-badge-alert { background: #fb7185; color: #ffffff; }

/* Job Manager and Forms now use the shared HeroHeader — their bespoke .jm-hero/.fm-hero
   overrides were removed; they inherit the .hero-header rules above. */