/* ============================================================================
   Unified hero treatment — ONE brand-blue hero across the whole app.

   Supersedes the per-section "rainbow" (WORK=blue, MONEY=green, MANAGE=violet,
   BUSINESS=gold, SAFETY=red, COMMS=slate, ADMIN=indigo). Every authenticated
   page now gets the same deep navy → brand-blue (#2563eb) hero. Wayfinding is
   carried by the sidebar highlight + the hero eyebrow label, not by hue;
   semantic colour lives where it means something (status chips, badges, stats).

   The painting keys off `main.app-main` (not `[class*="section-"]`) so it also
   covers the dashboard + customer pages, which carry no section class and used
   to fall back to a different, brighter hero. One look, everywhere.
   MainLayout still stamps a section-* class on <main>; it's now harmless.
   ============================================================================ */

main.app-main {
    --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;
}

/* Shared hero painting from the variables above. High specificity + !important
   so it wins over the scoped base in HeroHeader.razor.css. */
main.app-main .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);
}
/* .hero-bg now carries the blueprint-grid texture (defined in HeroHeader.razor.css) —
   keep it visible on app pages so every hero has the same subtle texture. */
main.app-main .hero-header .hero-wave path { fill: var(--hwave) !important; }
main.app-main .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 .hero-header p { color: var(--hsub); }
main.app-main .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 .hero-eyebrow i { color: var(--hacci) !important; }
/* Stat-card structure (background, border, radius, padding, tray) now lives in
   HeroHeader.razor.css — the single source of truth. Only colour theming here. */
main.app-main .hero-stat-label { color: var(--hacc); letter-spacing: 0.1em; font-weight: 700; }
main.app-main .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 .hero-stat-value.hero-stat-value-empty {
    -webkit-text-fill-color: var(--hempty); color: var(--hempty); background: none;
}
main.app-main .hero-stat-sub { color: var(--hsub); }
main.app-main .hero-tab { color: var(--htab); }
main.app-main .hero-tab:hover { color: #ffffff; }
/* Active tab is a solid brand pill (HeroHeader.razor.css) — text stays white */
main.app-main .hero-tab-active { color: #ffffff; }
main.app-main .hero-tab-badge { background: rgba(255,255,255,0.14); color: #ffffff; }
main.app-main .hero-tab-badge-good { background: var(--hebg); color: var(--hacc); }
main.app-main .hero-tab-badge-alert { background: #fb7185; color: #ffffff; }

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

/* ============================================================================
   PAGE-BODY ALIGNMENT — one source of truth.
   The shared hero's content sits inside `.container-fluid.hero-inner`
   (Bootstrap gutter 0.75rem) + `.hero-top` (0.85rem) = 1.6rem inset from the
   content edge. Historically each page's body container ran edge-to-edge (or on
   Bootstrap's 0.75rem gutter), so the content sat left of the hero and the panel
   cards stuck out past the hero band on both sides. Match every app page's body
   container-fluid to the hero's 1.6rem inset so the content columns line up under
   the hero instead of running full-bleed. Applies app-wide (tradie + business +
   comms + admin), so every page and every tab is consistent.
   ============================================================================ */
main.app-main .container-fluid:not(.hero-inner),
main.app-main .bj-page,
main.app-main .pe-container,
main.app-main .cq-content,
main.app-main .id-wrap,
main.app-main .pi-wrap,
main.app-main .qt-container,
main.app-main .scan-grid {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
}
/* A container-fluid nested inside the body keeps the Bootstrap default so its
   content doesn't double-indent past the already-inset body. */
main.app-main .container-fluid:not(.hero-inner) .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
@media (max-width: 768px) {
    main.app-main .container-fluid:not(.hero-inner),
    main.app-main .bj-page,
    main.app-main .pe-container,
    main.app-main .cq-content,
    main.app-main .id-wrap,
    main.app-main .pi-wrap,
    main.app-main .qt-container,
    main.app-main .scan-grid {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }
}