/* 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);
}

/* Status chips: one vocabulary for every chip that reports a state (OrderStatusChip,
   PrescriptionCancelChip), kept here rather than in one chip's scoped stylesheet, which no other
   component's elements match. */
.hs-status-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--bs-white);
    white-space: nowrap;
}

/* Backgrounds come from the palette, so a rebrand carries the chips with it. Named for the
   role rather than the hue: a class called .hs-chip-blue cannot honestly read a token that is
   no longer blue, and the palette has no blue left to read. */
.hs-chip-info { background-color: var(--mud-palette-info); }
.hs-chip-warning { background-color: var(--mud-palette-warning); }
.hs-chip-success { background-color: var(--mud-palette-success); }
.hs-chip-error { background-color: var(--mud-palette-error); }
.hs-chip-accent { background-color: var(--mud-palette-secondary); }
.hs-chip-muted { background-color: var(--mud-palette-gray-default); }

/* Waiting on someone: an order awaiting its signature, or a cancel awaiting the pharmacy's answer.
   It reads in the action color; tertiary sits lighter than the muted chip beside it. */
.hs-chip-pending { background-color: var(--mud-palette-primary); }

/* A refusal: an order the pharmacy rejected, or a cancel it denied. Every hue the palette has is
   spent and error is Cancelled's, so a refusal keeps the error hue and drops the fill — the
   darkened error token sat about 1.3:1 from error, too close to tell apart. The ring is an inset
   shadow rather than a border so the chip keeps the solid chips' size. A technical error takes
   the neutral dark. */
.hs-chip-refused {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-error);
    box-shadow: inset 0 0 0 1px var(--mud-palette-error);
}

.hs-chip-fault { background-color: var(--mud-palette-dark); }

/* 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 rows + trailing chevron cell — shared by the navigating grids and the Dashboard's recent
   orders. 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. A tooltip's anchor, and an element explaining itself
   through title (the status chip), are raised too, or the overlay takes their hover and the
   explanation never shows. */
.hs-grid-row :is(a:not(.hs-row-link), button, select, textarea, .mud-switch, .mud-checkbox, .mud-radio, .mud-tooltip-root, [title],
        input:not(.mud-switch-input):not(.mud-checkbox-input):not(.mud-radio-input)) {
    position: relative;
    z-index: 2;
}

/* A raised element that only explains itself takes the row's clicks away, so it drops the row's
   pointer: the cursor says a click there does nothing. A link or button inside keeps its own. */
.hs-grid-row :is(.mud-tooltip-root, [title]):not(a, button) {
    cursor: default;
}

/* Text for assistive technology only: kept in the accessibility tree and out of the layout. For a
   glyph whose meaning a sighted user gets from a tooltip, where an aria-label on a generic element
   may be dropped. */
.hs-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 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);
}

/* The primary line of an info block — a patient's name, a drug, a pharmacy — above its .hs-sub
   detail. Global for the same reason: the order detail, the order review and the pharmacy
   messages all show one, and a scoped rule never reaches another component's elements. */
.hs-info-primary {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin-top: 0.35rem;
}

/* 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;
    }
}