/* Role tokens under Bootstrap's names. The app loads no Bootstrap stylesheet, so
   nothing but this app's own CSS consumes them — --bs-white, --bs-gray-*, --bs-body-*
   and the link/form roles are all referenced from site.css and the scoped sheets.
   Bootstrap-named utility CLASSES are a separate matter and not what these tokens
   serve: d-flex, mb-3, mt-3 and me-2 work only because MudBlazor happens to ship
   them, while row and col-md-* match nothing and are dropped silently.

   Role tokens derive from the --mud-* variables MudThemeProvider emits, so
   AppTheme.cs stays the only place a brand color lives. The provider renders
   inside <Found> in Routes.razor and every page loading this file is a routed
   component (Error.razor included), so the variables always resolve.

   The few tokens that stay literal are marked inline below. */

:root {
    /* A raw hue scale, not role tokens: these name a hue, so a rebrand must not recolor them
       or a fork ends up with a tan --bs-gray-500 (see Coding-Standards, brand colors). Role
       tokens below derive from --mud-* instead. Neutral on purpose — the warmth on screen
       comes from the surface stack in AppTheme.cs, not from tinting the greys.
       The named hue tokens Bootstrap normally ships alongside these (blue, indigo, teal ...)
       are gone: nothing referenced them, and the guide names blue gradients among the things
       that never belong. */
    --bs-black: #000000;
    --bs-white: #ffffff;
    --bs-gray: #d3d3d3;
    --bs-gray-dark: #222222;
    --bs-gray-100: #f7f8f9;
    --bs-gray-200: #f2f2f2;
    --bs-gray-300: #e5e5e5;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #a1a1a1;
    --bs-gray-700: #495057;
    --bs-gray-800: #222222;
    --bs-gray-900: #212529;
    --bs-primary: var(--mud-palette-primary);
    --bs-secondary: var(--mud-palette-secondary);
    --bs-tertiary: var(--mud-palette-tertiary);
    --bs-success: var(--mud-palette-success);
    --bs-info: var(--mud-palette-info);
    --bs-warning: var(--mud-palette-warning);
    --bs-danger: var(--mud-palette-error);
    /* Literal: MudBlazor's palette has no Light counterpart to Dark. Tracks the canvas. */
    --bs-light: #f7f3ec;
    --bs-dark: var(--mud-palette-dark);
    --bs-primary-rgb: var(--mud-palette-primary-rgb);
    --bs-secondary-rgb: var(--mud-palette-secondary-rgb);
    --bs-success-rgb: var(--mud-palette-success-rgb);
    --bs-info-rgb: var(--mud-palette-info-rgb);
    --bs-warning-rgb: var(--mud-palette-warning-rgb);
    --bs-danger-rgb: var(--mud-palette-error-rgb);
    --bs-light-rgb: 247, 243, 236;
    --bs-dark-rgb: var(--mud-palette-dark-rgb);
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-font-sans-serif: var(--mud-typography-default-family);
    /* HeroScript brand fonts (loaded in App.razor). Literal because MudBlazor's typography
       has no serif or monospace role to derive from. --hs-font-serif deliberately matches
       the Serif array in AppTheme.cs that drives the heading variants — the one stack in
       this file with a second copy, held in step by BrandingConventionTests. */
    --hs-font-serif: "Source Serif 4", ui-serif, Georgia, Cambria, "Times New Roman", serif;
    --hs-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: var(--mud-typography-default-size);
    --bs-body-line-height: var(--mud-typography-default-lineheight);
    --bs-body-color: var(--mud-palette-text-primary);
    --bs-body-bg: var(--mud-palette-background);
    --bs-border-color: var(--mud-palette-lines-default);
    --bs-border-radius: var(--mud-default-borderradius);
    --bs-link-color: var(--mud-palette-primary);
    --bs-link-hover-color: var(--mud-palette-secondary);
    --bs-form-valid-color: var(--mud-palette-success);
    --bs-form-valid-border-color: var(--mud-palette-success);
    --bs-form-invalid-color: var(--mud-palette-error);
    --bs-form-invalid-border-color: var(--mud-palette-error);
}

a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

/* Monospace numerics — order numbers, prices, SKUs. */
.hs-mono {
    font-family: var(--hs-font-mono);
    font-feature-settings: "tnum" 1;
}

/* Brand lockup — the monogram beside the wordmark, shared by the drawer header and the
   login page. The wordmark is letterspaced type rather than an image because the branding
   guide ships no wordmark asset; the mark is the only artwork it provides. */
.hs-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

.hs-lockup .hs-lockup-mark {
    height: 1.75rem;
    width: auto;
}

.hs-lockup .hs-lockup-word {
    font-family: var(--bs-font-sans-serif);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

/* The login page shows the lockup on its own above the form, so it carries more presence. */
.hs-lockup-lg { gap: 0.9rem; }
.hs-lockup-lg .hs-lockup-mark { height: 3.25rem; }
.hs-lockup-lg .hs-lockup-word { font-size: 1.375rem; letter-spacing: 0.26em; }

/* Serif for HeroScript headings when a bare element (not a MudText) needs it. */
.hs-serif { font-family: var(--hs-font-serif); }

/* Overline label (letterspaced small caps, brass accent) used on cards/sections. Sans, not
   serif: the display serif is confined to H1-H3, matching the Overline typography variant. */
.hs-overline {
    font-family: var(--bs-font-sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary);
}

/* Verified / unverified badge and refill-due pill — used on both patient pages. */
.hs-verify-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}
.hs-verify-chip.verified { color: var(--bs-success); }
.hs-verify-chip.unverified { color: var(--bs-warning); }

.hs-refill-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #ffffff;
    background-color: var(--bs-warning);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
}

/* Clickable data-grid rows + trailing chevron cell — shared by the Orders, Patients, and Parent
   Accounts grids. position: relative makes the row the containing block for the stretched anchor
   below. */
.hs-grid-row {
    cursor: pointer;
    position: relative;
}
.hs-grid-chevron {
    text-align: right;
    color: var(--mud-palette-text-secondary);
}

/* Stretches the row's RowLink anchor across the whole row, so the browser handles every click
   gesture natively — including the ctrl/cmd and middle clicks a Blazor handler cannot open a new tab
   for. The anchor keeps its normal inline box for layout and focus; only this pseudo-element grows.
   Sits above the row's background but is transparent, so nothing changes visually. */
.hs-row-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Keeps any other interactive control in a linked row reachable: the overlay above covers the whole
   row, so a control without its own stacking position would sit under it and take no clicks.
   MudBlazor's toggles (switch, checkbox, radio) are excluded at the input and raised at their label
   root instead: their inputs are opacity-0 absolute overlays, and forcing one relative makes it
   take flex space and squeeze the visible thumb. */
.hs-grid-row :is(a:not(.hs-row-link), button, select, textarea, .mud-switch, .mud-checkbox, .mud-radio,
        input:not(.mud-switch-input):not(.mud-checkbox-input):not(.mud-radio-input)) {
    position: relative;
    z-index: 2;
}

/* Empty-state text — used across several HeroScript pages. Padded on all four sides because the
   message often sits on a surface that paints none: a grid card is pa-0 so its rows can run to the
   card edge, and the message inherits that zero and hugs the border. */
.hs-empty {
    color: var(--mud-palette-text-secondary);
    padding: 1rem;
}

/* Supporting detail under a primary line — a date of birth, a lead time, an effective range.
   Global because several pages and the order-entry steps all show one, and a scoped copy per
   component is how four identical rules came to exist. */
.hs-sub {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* A page or step's control strip: a search field taking the free space, controls beside it. */
.hs-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.hs-toolbar-search {
    flex: 1 1 auto;
    max-width: 30rem;
}

/* Rows of a plain list inside a panel — divided between, not around. */
.hs-list-row {
    padding: 0.5rem 0;
}

.hs-list-row + .hs-list-row {
    border-top: 1px solid var(--mud-palette-divider);
}

/* Minimal .alert styling for the account pages' server-rendered status and
   validation boxes (Bootstrap itself is not loaded). */
.alert {
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius);
}

.alert-danger {
    color: var(--bs-danger);
    background-color: rgba(var(--bs-danger-rgb), 0.08);
    border-color: rgba(var(--bs-danger-rgb), 0.25);
}

/* Minimal form-control / form-select / form-check-input styling
   so account pages (server-rendered, plain HTML inputs) look correct. */
.form-control, .form-select {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: 1px solid var(--bs-gray-400);
    border-radius: var(--bs-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
    outline: 0;
}
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
    appearance: none;
}
.form-label {
    margin-bottom: 0.25rem;
    font-weight: 500;
}
/* Required-field indicator — red asterisk on the label.
   - Custom <label class="form-label"> fields add an explicit .required-asterisk span.
   - MudBlazor inputs with Required="true" render the asterisk via .mud-input-label::after
     (it otherwise inherits the muted label color); recolor it to match. */
.required-asterisk {
    color: var(--bs-danger);
    margin-left: 0.15rem;
}
.mud-input-required .mud-input-label::after {
    color: var(--bs-danger);
}
.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}
.form-check-input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.25rem;
    margin-left: -1.5rem;
    vertical-align: top;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-gray-500);
    border-radius: 0.25rem;
}
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.form-check-label { cursor: pointer; }

.btn-primary {
    color: var(--bs-white);
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: var(--bs-white);
}
.btn-primary:disabled {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    opacity: 0.65;
}
.btn-secondary {
    color: var(--bs-white);
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}
.btn-danger {
    color: var(--bs-white);
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

/* Mobile touch targets for auth pages (phones ≤480px) */
@media (max-width: 480px) {
    .block-content .btn {
        min-height: 3.5rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        font-size: 1.125rem;
        font-weight: 600;
    }
    .block-content .form-control {
        min-height: 3rem;
        font-size: 1rem;
    }
}