/* Light theme: page heroes
   ------------------------------------------------------------------
   The platform's page heroes were large dark-navy gradient blocks, which
   made the whole product read as a dark theme. Ali's direction
   (2026-10-13): white is the base; navy belongs on BARS -- menu bars,
   table headers, sticky topbars -- and the occasional block, not on every
   page's masthead. Orange, gold, black and navy carry the contrast.

   Done as one global layer rather than by editing 31 scoped stylesheets:
   it keeps the decision in one reviewable place and reverts by deleting
   this file's <link> in App.razor.

   Scoped component CSS compiles to `.pr-hero[b-abc123]` (specificity
   0,2,0), so !important is needed on the properties a page sets in that
   same rule.

   Deliberately NOT included:
     * .crs-topbar and .pp-top -- those are bars, and bars stay navy.
     * .home-studio-hero -- the public marketing masthead. It is a
       deliberate brand moment Ali likes navy, and it composes translucent
       "glass" cards that only work over a dark backdrop; forcing it light
       left five of its labels at 1.2-1.4:1.

   The buttons are the subtle part. A hero CTA used to sit on dark navy, so
   pages styled it INVERTED: white fill with navy text, or a translucent
   white outline. Turning the hero light leaves those white-on-white -- the
   admin hero's secondary link measured 1.00:1, i.e. invisible. So hero
   CTAs are restyled here for a light surface rather than left to inherit:
   solid orange primary, outlined secondary. */

.admin-hero,
.all-users-hero,
.ca-hero,
.cds-hero,
.content-hero,
.cr-hero,
.ddb-detail-hero,
.docs-hero,
.ia-hero,
.identity-hero,
.idoc-hero,
.ihelp-hero,
.ind-hero,
.invoices-hero,
.ir-hero,
.ird-hero,
.ivr-hero,
.lms-hero,
.mc-hero,
.news-hero,
.ob-hero,
.owner-hero,
.pa-hero,
.pharmacy-public-hero,
.pharmacy-workspace-hero,
.pp-hero,
.pr-hero,
.sa-hero,
.sav_hero_banner,
.svh-hero {
    background: linear-gradient(135deg, #fff 0%, var(--brand-cream) 100%) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line);
    border-top: 3px solid var(--brand-orange);
    box-shadow: 0 10px 26px -18px rgba(11, 47, 82, .28) !important;
}

/* Non-interactive text inside the hero flips to dark. Buttons and links are
   excluded here and given explicit treatments below. */
.admin-hero *:not(button):not(a):not([class*="btn"]),
.all-users-hero *:not(button):not(a):not([class*="btn"]),
.ca-hero *:not(button):not(a):not([class*="btn"]),
.cds-hero *:not(button):not(a):not([class*="btn"]),
.content-hero *:not(button):not(a):not([class*="btn"]),
.cr-hero *:not(button):not(a):not([class*="btn"]),
.ddb-detail-hero *:not(button):not(a):not([class*="btn"]),
.docs-hero *:not(button):not(a):not([class*="btn"]),
.ia-hero *:not(button):not(a):not([class*="btn"]),
.identity-hero *:not(button):not(a):not([class*="btn"]),
.idoc-hero *:not(button):not(a):not([class*="btn"]),
.ihelp-hero *:not(button):not(a):not([class*="btn"]),
.ind-hero *:not(button):not(a):not([class*="btn"]),
.invoices-hero *:not(button):not(a):not([class*="btn"]),
.ir-hero *:not(button):not(a):not([class*="btn"]),
.ird-hero *:not(button):not(a):not([class*="btn"]),
.ivr-hero *:not(button):not(a):not([class*="btn"]),
.lms-hero *:not(button):not(a):not([class*="btn"]),
.mc-hero *:not(button):not(a):not([class*="btn"]),
.news-hero *:not(button):not(a):not([class*="btn"]),
.ob-hero *:not(button):not(a):not([class*="btn"]),
.owner-hero *:not(button):not(a):not([class*="btn"]),
.pa-hero *:not(button):not(a):not([class*="btn"]),
.pharmacy-public-hero *:not(button):not(a):not([class*="btn"]),
.pharmacy-workspace-hero *:not(button):not(a):not([class*="btn"]),
.pp-hero *:not(button):not(a):not([class*="btn"]),
.pr-hero *:not(button):not(a):not([class*="btn"]),
.sa-hero *:not(button):not(a):not([class*="btn"]),
.sav_hero_banner *:not(button):not(a):not([class*="btn"]),
.svh-hero *:not(button):not(a):not([class*="btn"]) {
    color: inherit !important;
    border-color: var(--line);
}

.admin-hero :is(h1, h2, h3),
.all-users-hero :is(h1, h2, h3),
.ca-hero :is(h1, h2, h3),
.cds-hero :is(h1, h2, h3),
.content-hero :is(h1, h2, h3),
.cr-hero :is(h1, h2, h3),
.ddb-detail-hero :is(h1, h2, h3),
.docs-hero :is(h1, h2, h3),
.ia-hero :is(h1, h2, h3),
.identity-hero :is(h1, h2, h3),
.idoc-hero :is(h1, h2, h3),
.ihelp-hero :is(h1, h2, h3),
.ind-hero :is(h1, h2, h3),
.invoices-hero :is(h1, h2, h3),
.ir-hero :is(h1, h2, h3),
.ird-hero :is(h1, h2, h3),
.ivr-hero :is(h1, h2, h3),
.lms-hero :is(h1, h2, h3),
.mc-hero :is(h1, h2, h3),
.news-hero :is(h1, h2, h3),
.ob-hero :is(h1, h2, h3),
.owner-hero :is(h1, h2, h3),
.pa-hero :is(h1, h2, h3),
.pharmacy-public-hero :is(h1, h2, h3),
.pharmacy-workspace-hero :is(h1, h2, h3),
.pp-hero :is(h1, h2, h3),
.pr-hero :is(h1, h2, h3),
.sa-hero :is(h1, h2, h3),
.sav_hero_banner :is(h1, h2, h3),
.svh-hero :is(h1, h2, h3) {
    color: var(--navy) !important;
}

.admin-hero p,
.all-users-hero p,
.ca-hero p,
.cds-hero p,
.content-hero p,
.cr-hero p,
.ddb-detail-hero p,
.docs-hero p,
.ia-hero p,
.identity-hero p,
.idoc-hero p,
.ihelp-hero p,
.ind-hero p,
.invoices-hero p,
.ir-hero p,
.ird-hero p,
.ivr-hero p,
.lms-hero p,
.mc-hero p,
.news-hero p,
.ob-hero p,
.owner-hero p,
.pa-hero p,
.pharmacy-public-hero p,
.pharmacy-workspace-hero p,
.pp-hero p,
.pr-hero p,
.sa-hero p,
.sav_hero_banner p,
.svh-hero p {
    color: var(--muted) !important;
}

/* The small-caps label above a hero heading becomes the orange eyebrow from
   the reference designs. */
.admin-hero > div > span:first-child,
.all-users-hero > div > span:first-child,
.ca-hero > div > span:first-child,
.cds-hero > div > span:first-child,
.content-hero > div > span:first-child,
.cr-hero > div > span:first-child,
.ddb-detail-hero > div > span:first-child,
.docs-hero > div > span:first-child,
.ia-hero > div > span:first-child,
.identity-hero > div > span:first-child,
.idoc-hero > div > span:first-child,
.ihelp-hero > div > span:first-child,
.ind-hero > div > span:first-child,
.invoices-hero > div > span:first-child,
.ir-hero > div > span:first-child,
.ird-hero > div > span:first-child,
.ivr-hero > div > span:first-child,
.lms-hero > div > span:first-child,
.mc-hero > div > span:first-child,
.news-hero > div > span:first-child,
.ob-hero > div > span:first-child,
.owner-hero > div > span:first-child,
.pa-hero > div > span:first-child,
.pharmacy-public-hero > div > span:first-child,
.pharmacy-workspace-hero > div > span:first-child,
.pp-hero > div > span:first-child,
.pr-hero > div > span:first-child,
.sa-hero > div > span:first-child,
.sav_hero_banner > div > span:first-child,
.svh-hero > div > span:first-child {
    color: var(--brand-orange-ink) !important;
}

/* Primary hero action: solid orange. --brand-orange-ink, not
   --brand-orange: the lighter accent only reaches 3.4:1 against white text,
   which fails AA for a normal-size button label. */
.admin-hero :is(button, a)[class*="primary"],
.all-users-hero :is(button, a)[class*="primary"],
.ca-hero :is(button, a)[class*="primary"],
.cds-hero :is(button, a)[class*="primary"],
.content-hero :is(button, a)[class*="primary"],
.cr-hero :is(button, a)[class*="primary"],
.ddb-detail-hero :is(button, a)[class*="primary"],
.docs-hero :is(button, a)[class*="primary"],
.ia-hero :is(button, a)[class*="primary"],
.identity-hero :is(button, a)[class*="primary"],
.idoc-hero :is(button, a)[class*="primary"],
.ihelp-hero :is(button, a)[class*="primary"],
.ind-hero :is(button, a)[class*="primary"],
.invoices-hero :is(button, a)[class*="primary"],
.ir-hero :is(button, a)[class*="primary"],
.ird-hero :is(button, a)[class*="primary"],
.ivr-hero :is(button, a)[class*="primary"],
.lms-hero :is(button, a)[class*="primary"],
.mc-hero :is(button, a)[class*="primary"],
.news-hero :is(button, a)[class*="primary"],
.ob-hero :is(button, a)[class*="primary"],
.owner-hero :is(button, a)[class*="primary"],
.pa-hero :is(button, a)[class*="primary"],
.pharmacy-public-hero :is(button, a)[class*="primary"],
.pharmacy-workspace-hero :is(button, a)[class*="primary"],
.pp-hero :is(button, a)[class*="primary"],
.pr-hero :is(button, a)[class*="primary"],
.sa-hero :is(button, a)[class*="primary"],
.sav_hero_banner :is(button, a)[class*="primary"],
.svh-hero :is(button, a)[class*="primary"],
.admin-hero :is(button, a)[class*="cta"],
.all-users-hero :is(button, a)[class*="cta"],
.ca-hero :is(button, a)[class*="cta"],
.cds-hero :is(button, a)[class*="cta"],
.content-hero :is(button, a)[class*="cta"],
.cr-hero :is(button, a)[class*="cta"],
.ddb-detail-hero :is(button, a)[class*="cta"],
.docs-hero :is(button, a)[class*="cta"],
.ia-hero :is(button, a)[class*="cta"],
.identity-hero :is(button, a)[class*="cta"],
.idoc-hero :is(button, a)[class*="cta"],
.ihelp-hero :is(button, a)[class*="cta"],
.ind-hero :is(button, a)[class*="cta"],
.invoices-hero :is(button, a)[class*="cta"],
.ir-hero :is(button, a)[class*="cta"],
.ird-hero :is(button, a)[class*="cta"],
.ivr-hero :is(button, a)[class*="cta"],
.lms-hero :is(button, a)[class*="cta"],
.mc-hero :is(button, a)[class*="cta"],
.news-hero :is(button, a)[class*="cta"],
.ob-hero :is(button, a)[class*="cta"],
.owner-hero :is(button, a)[class*="cta"],
.pa-hero :is(button, a)[class*="cta"],
.pharmacy-public-hero :is(button, a)[class*="cta"],
.pharmacy-workspace-hero :is(button, a)[class*="cta"],
.pp-hero :is(button, a)[class*="cta"],
.pr-hero :is(button, a)[class*="cta"],
.sa-hero :is(button, a)[class*="cta"],
.sav_hero_banner :is(button, a)[class*="cta"],
.svh-hero :is(button, a)[class*="cta"] {
    background: var(--brand-orange-ink) !important;
    color: #fff !important;
    border: 1px solid var(--brand-orange-ink) !important;
}

/* Secondary hero action: white with a navy label, so it reads as a button
   on a light surface instead of disappearing into it. */
.admin-hero :is(button, a)[class*="secondary"],
.all-users-hero :is(button, a)[class*="secondary"],
.ca-hero :is(button, a)[class*="secondary"],
.cds-hero :is(button, a)[class*="secondary"],
.content-hero :is(button, a)[class*="secondary"],
.cr-hero :is(button, a)[class*="secondary"],
.ddb-detail-hero :is(button, a)[class*="secondary"],
.docs-hero :is(button, a)[class*="secondary"],
.ia-hero :is(button, a)[class*="secondary"],
.identity-hero :is(button, a)[class*="secondary"],
.idoc-hero :is(button, a)[class*="secondary"],
.ihelp-hero :is(button, a)[class*="secondary"],
.ind-hero :is(button, a)[class*="secondary"],
.invoices-hero :is(button, a)[class*="secondary"],
.ir-hero :is(button, a)[class*="secondary"],
.ird-hero :is(button, a)[class*="secondary"],
.ivr-hero :is(button, a)[class*="secondary"],
.lms-hero :is(button, a)[class*="secondary"],
.mc-hero :is(button, a)[class*="secondary"],
.news-hero :is(button, a)[class*="secondary"],
.ob-hero :is(button, a)[class*="secondary"],
.owner-hero :is(button, a)[class*="secondary"],
.pa-hero :is(button, a)[class*="secondary"],
.pharmacy-public-hero :is(button, a)[class*="secondary"],
.pharmacy-workspace-hero :is(button, a)[class*="secondary"],
.pp-hero :is(button, a)[class*="secondary"],
.pr-hero :is(button, a)[class*="secondary"],
.sa-hero :is(button, a)[class*="secondary"],
.sav_hero_banner :is(button, a)[class*="secondary"],
.svh-hero :is(button, a)[class*="secondary"],
.admin-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.all-users-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.ca-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.cds-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.content-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.cr-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.ddb-detail-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.docs-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.ia-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.identity-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.idoc-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.ihelp-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.ind-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.invoices-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.ir-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.ird-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.ivr-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.lms-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.mc-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.news-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.ob-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.owner-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.pa-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.pharmacy-public-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.pharmacy-workspace-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.pp-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.pr-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.sa-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.sav_hero_banner :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]),
.svh-hero :is(button, a[class]):not([class*="primary"]):not([class*="secondary"]):not([class*="cta"]) {
    background: #fff !important;
    color: var(--navy) !important;
    border: 1px solid var(--line) !important;
}