/* LC HVAC web app. The company's brand color is applied through --brand (set per page from the tenant).

   Themes (docs/design/theme.md): Bootstrap 5.3's data-bs-theme on <html>, light or dark (System resolves it in the head
   script). Components use only the variables below and Bootstrap's semantic classes, never literal colours. Customer
   documents (the proposal, the job sheet) carry data-bs-theme="light" and print resets to light. */

:root, [data-bs-theme=light] {
    --page: #f4f6f9;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --border: #e1e5eb;
    --text-muted: #667085;
    --input-border: #848c98;
    --shadow: rgba(0, 0, 0, 0.08);
    --shadow-strong: rgba(0, 0, 0, 0.18);
    --warn-line: #f59e0b;
    --flag-text: #92400e;
    --flag-bg: #fef3c7;
    --positive-text: #15803d;
    --selected: #16a34a;
    --selected-ring: rgba(22, 163, 74, 0.2);
    --internal-bg: #fff7ed;
    --tier-default: #94a3b8;
    --tier-good: #64748b;
    --tier-best: #b45309;
    --logo-chip: #ffffff;
    color: var(--bs-body-color);
}

/* Dark: a cool blue-grey ramp. --page is the darkest; panels (--surface, also Bootstrap's body background, so inputs and
   tables sit on the panel colour) and raised layers (popovers, drawers) step lighter. The brand variants are computed
   against these three backgrounds (BrandColors.DarkBackgrounds); keep them in step. */
[data-bs-theme=dark] {
    --page: #12161c;
    --surface: #1b2129;
    --surface-raised: #232a33;
    --border: #2f3843;
    --text-muted: #9ca3af;
    --input-border: #6b7685;
    --shadow: rgba(0, 0, 0, 0.35);
    --shadow-strong: rgba(0, 0, 0, 0.55);
    --warn-line: #fbbf24;
    --flag-text: #fcd34d;
    --flag-bg: #3a2c0b;
    --positive-text: #4ade80;
    --selected: #22c55e;
    --selected-ring: rgba(34, 197, 94, 0.3);
    --internal-bg: #2a2116;
    --tier-default: #64748b;
    --tier-good: #94a3b8;
    --tier-best: #f59e0b;
    --logo-chip: #ffffff;
    --bs-body-bg: #1b2129;
    --bs-body-bg-rgb: 27, 33, 41;
    --bs-secondary-bg: #232a33;
    --bs-secondary-bg-rgb: 35, 42, 51;
    --bs-tertiary-bg: #1f262e;
    --bs-tertiary-bg-rgb: 31, 38, 46;
    --bs-border-color: #2f3843;
    color: var(--bs-body-color);
}

/* Dark: Bootstrap 5.3 keeps .text-danger and the outline buttons at their light-theme colours (about 3.6:1 on the
   panel). They take Bootstrap's own dark *-text-emphasis colours instead (5.7:1 or more on --surface-raised, 6.3:1 on
   --surface) for text and border; hover and pressed keep Bootstrap's solid fill with white text (4.5:1 or more). */
[data-bs-theme=dark] .text-danger { color: var(--bs-danger-text-emphasis) !important; }
[data-bs-theme=dark] .btn-outline-primary { --bs-btn-color: var(--bs-primary-text-emphasis); --bs-btn-border-color: var(--bs-primary-text-emphasis); }
[data-bs-theme=dark] .btn-outline-secondary { --bs-btn-color: var(--bs-secondary-text-emphasis); --bs-btn-border-color: var(--bs-secondary-text-emphasis); }
[data-bs-theme=dark] .btn-outline-success { --bs-btn-color: var(--bs-success-text-emphasis); --bs-btn-border-color: var(--bs-success-text-emphasis); }
[data-bs-theme=dark] .btn-outline-danger { --bs-btn-color: var(--bs-danger-text-emphasis); --bs-btn-border-color: var(--bs-danger-text-emphasis); }

/* The brand: --brand and --brand-contrast (the text on a brand fill: white or near-black, by WCAG contrast) are the
   company's, set inline per page (BrandColors.Style). Where the brand is text or a line on the page, the theme's variant
   is used: --brand-on-page reaches 4.5:1 (text) and --brand-line 3:1 (borders, WCAG 1.4.11) on that theme's page and
   panels. The variants resolve on every element, so the inline values of the nearest branded ancestor apply, and a
   nested light document inside a dark page gets the light ones. The defaults are for #1f6feb. */
:root {
    --brand: #1f6feb;
    --brand-contrast: #ffffff;
    --brand-hover: #1a5ec8;
    --brand-active: #1753b0;
    --brand-text-light: #1d69df;
    --brand-line-light: #1f6feb;
    --brand-text-dark: #5793f0;
    --brand-line-dark: #1f6feb;
}
* { --brand-on-page: var(--brand-text-light); --brand-line: var(--brand-line-light); }
[data-bs-theme=dark], [data-bs-theme=dark] * { --brand-on-page: var(--brand-text-dark); --brand-line: var(--brand-line-dark); }
[data-bs-theme=light], [data-bs-theme=light] * { --brand-on-page: var(--brand-text-light); --brand-line: var(--brand-line-light); }

html, body {
    background: var(--page);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--brand-on-page); }

/* Form fields: a border that reaches 3:1 on the page and panels in both themes (WCAG 1.4.11; Bootstrap's is 1.3:1 in
   light and about 2:1 in dark). Only the fields: table and panel lines keep the lighter --bs-border-color. The same
   specificity as Bootstrap's base rule, so focus, valid, invalid and checked borders still win. */
.form-control, .form-select, .form-check-input { border-color: var(--input-border); }

/* A company logo on dark sits on a light chip, so dark logos stay visible. */
[data-bs-theme=dark] .brand-logo { background: var(--logo-chip); border-radius: 6px; padding: 3px 6px; }

/* Buttons in the brand color. The border is the theme's line variant, so a fill close to the page colour (a near-black
   brand on dark, a pale one on light) keeps a visible edge (WCAG 1.4.11); it is the brand itself when that reaches 3:1. */
.btn-brand {
    --bs-btn-color: var(--brand-contrast);
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand-line);
    --bs-btn-hover-color: var(--brand-contrast);
    --bs-btn-hover-bg: var(--brand-hover);
    --bs-btn-hover-border-color: var(--brand-line);
    --bs-btn-active-bg: var(--brand-active);
    --bs-btn-active-color: var(--brand-contrast);
    --bs-btn-active-border-color: var(--brand-line);
}

.btn-outline-brand {
    --bs-btn-color: var(--brand-on-page);
    --bs-btn-border-color: var(--brand-line);
    --bs-btn-hover-color: var(--brand-contrast);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand-line);
    --bs-btn-active-color: var(--brand-contrast);
    --bs-btn-active-bg: var(--brand-active);
    --bs-btn-active-border-color: var(--brand-line);
}

/* App header */
.app-header {
    background: var(--brand);
    color: var(--brand-contrast);
    padding: 0.6rem 0;
    box-shadow: 0 1px 3px var(--shadow-strong);
}
[data-bs-theme=dark] .app-header { border-bottom: 1px solid var(--border); }

.app-brand { color: inherit; text-decoration: none; display: flex; align-items: center; min-height: 40px; }
.app-brand .brand-logo { max-height: 40px; max-width: 180px; background: var(--logo-chip); border-radius: 6px; padding: 3px 6px; }
.app-brand .brand-name { font-weight: 700; font-size: 1.15rem; letter-spacing: 0.01em; }

/* Text on the brand fill is always --brand-contrast at full strength (4.5:1 or more for every brand, BrandColors) and
   never sits on a tint: hover underlines, the current page is semibold with a solid bar under it. */
.app-nav-link {
    color: var(--brand-contrast);
    text-decoration: none;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-weight: 500;
}
.app-nav-link:hover { color: var(--brand-contrast); text-decoration: underline; text-underline-offset: 0.25em; }
.app-nav-link.active { color: var(--brand-contrast); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand-contrast); border-radius: 0; }
.app-nav-link:focus-visible { outline: 2px solid var(--brand-contrast); outline-offset: 1px; }

/* Header buttons, in the colour that reads on the brand fill. Only two colours ever meet: --brand and --brand-contrast
   (4.5:1 or more), so outlines, text and the focus ring all reach 3:1 or 4.5:1. Outlined: contrast text and a solid
   contrast border; hover underlines, pressed fills with the contrast colour. Filled (Sign out): the contrast fill in every
   state; hover underlines, pressed adds an inset brand ring. The focus ring is a brand gap then a solid contrast ring. */
.btn-header {
    --bs-btn-color: var(--brand-contrast);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--brand-contrast);
    --bs-btn-hover-color: var(--brand-contrast);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--brand-contrast);
    --bs-btn-active-color: var(--brand);
    --bs-btn-active-bg: var(--brand-contrast);
    --bs-btn-active-border-color: var(--brand-contrast);
    --bs-btn-focus-box-shadow: 0 0 0 2px var(--brand), 0 0 0 4px var(--brand-contrast);
}
.btn-header-solid {
    --bs-btn-color: var(--brand);
    --bs-btn-bg: var(--brand-contrast);
    --bs-btn-border-color: var(--brand-contrast);
    --bs-btn-hover-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-contrast);
    --bs-btn-hover-border-color: var(--brand-contrast);
    --bs-btn-active-color: var(--brand);
    --bs-btn-active-bg: var(--brand-contrast);
    --bs-btn-active-border-color: var(--brand-contrast);
    --bs-btn-focus-box-shadow: 0 0 0 2px var(--brand), 0 0 0 4px var(--brand-contrast);
}
.btn-header:hover, .btn-header-solid:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.btn-header-solid:active { box-shadow: inset 0 0 0 2px var(--brand); }

/* The theme toggle: icons on the wide header, icons and words in the phone Menu. The pressed choice is filled. */
.theme-toggle { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.theme-toggle-label { font-size: 0.85rem; }
.theme-choice { display: inline-flex; align-items: center; gap: 0.3rem; }
.btn-header.theme-choice[aria-pressed=true] { color: var(--brand); background: var(--brand-contrast); border-color: var(--brand-contrast); }
.theme-icon { width: 1rem; height: 1rem; flex: none; }
@media (min-width: 1200px) {
    .theme-toggle-label, .theme-choice-text {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

/* The toggle on the page background (sign-in and invitation pages): body text and the field border on the page colour,
   the pressed choice inverted (body colour fill, panel-coloured icon); icons only, the words stay for screen readers. */
.btn-theme-page {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--input-border);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--surface);
    --bs-btn-hover-border-color: var(--bs-body-color);
    --bs-btn-active-color: var(--surface);
    --bs-btn-active-bg: var(--bs-body-color);
    --bs-btn-active-border-color: var(--bs-body-color);
    --bs-btn-focus-box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--bs-body-color);
}
.btn-theme-page.theme-choice[aria-pressed=true] { color: var(--surface); background: var(--bs-body-color); border-color: var(--bs-body-color); }
.theme-toggle-page .theme-toggle-label, .theme-toggle-page .theme-choice-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.app-user { font-size: 0.9rem; }

/* Header layout. At 1200 px and wider: brand, links, then the account controls at the right (no toggle). The menu wrapper
   is display: contents there, so the links and account controls lay out as direct items of the bar, as before. */
.app-header-bar { display: flex; align-items: center; gap: 1rem; }
.app-menu { display: contents; }
.app-nav { display: flex; gap: 0.25rem; }
.app-account { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.app-account form { margin: 0; }
.app-account .btn, .app-user { white-space: nowrap; }
/* The wide header is full between 1200 and 1600 px (links, theme toggle, sign out): the signed-in name shows from 1600 px,
   and in the phone Menu; Sign out carries it as its title. */
@media (min-width: 1200px) and (max-width: 1599.98px) { .app-user { display: none !important; } }
.app-menu-toggle, .app-menu-button { display: none; }

/* Below 1200 px the links and account controls fold behind a "Menu" button: a CSS-only checkbox toggle, so it works on
   server-rendered pages without interactivity. The checkbox stays focusable (visually hidden, not display: none). */
@media (max-width: 1199.98px) {
    .app-header-bar { flex-wrap: wrap; gap: 0.5rem 1rem; }
    .app-brand { min-width: 0; flex: 0 1 auto; }
    .app-brand .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .app-brand .brand-logo { max-width: min(180px, calc(100vw - 9rem)); }

    .app-menu-toggle {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
        opacity: 0;
    }
    .app-menu-button { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 0 auto; flex: none; cursor: pointer; }
    .app-menu-toggle:focus-visible + .app-menu-button { outline: 2px solid var(--brand-contrast); outline-offset: 2px; }
    .app-menu-toggle:checked + .app-menu-button { color: var(--brand); background: var(--brand-contrast); }

    .app-menu-icon, .app-menu-icon::before, .app-menu-icon::after {
        display: block;
        width: 14px;
        height: 2px;
        background: currentColor;
        border-radius: 1px;
    }
    .app-menu-icon { position: relative; }
    .app-menu-icon::before, .app-menu-icon::after { content: ""; position: absolute; left: 0; }
    .app-menu-icon::before { top: -5px; }
    .app-menu-icon::after { top: 5px; }

    .app-menu { display: none; flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: 0.5rem; padding-top: 0.25rem; }
    .app-menu-toggle:checked ~ .app-menu { display: flex; }
    .app-nav { flex-direction: column; gap: 0.125rem; }
    .app-nav-link { display: block; padding: 0.55rem 0.75rem; }
    .app-account {
        flex-wrap: wrap;
        margin-left: 0;
        padding: 0.6rem 0.75rem 0.15rem;
        border-top: 1px solid var(--brand-contrast);
    }
}

/* Panels and cards */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem;
}
.panel.p-0 { padding: 0; overflow: hidden; }
.panel .table { margin-bottom: 0; }

.stat-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand-line);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    color: inherit;
    text-decoration: none;
}
a.stat-card:hover { box-shadow: 0 2px 8px var(--shadow); }
.stat-value { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.stat-label { color: var(--text-muted); }

.empty-state {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 2.5rem;
    text-align: center;
    color: var(--text-muted);
}

.address-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
}

.logo-preview {
    background: var(--brand);
    color: var(--brand-contrast);
    border-radius: 8px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    min-height: 64px;
}
.logo-preview .brand-logo { max-height: 48px; max-width: 220px; background: var(--logo-chip); border-radius: 6px; padding: 4px 8px; }
.logo-preview .brand-name { font-weight: 700; font-size: 1.2rem; }

.tenant-list .list-group-item { padding: 0.9rem 1rem; }

/* Comfortable touch targets on tablets */
@media (pointer: coarse) {
    .btn, .form-control, .form-select { min-height: 44px; }
    .btn-sm { min-height: 36px; }
}

/* Anonymous pages: sign-in, invitations */
.auth-shell {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem 1.5rem; /* room for the theme toggle in the corner */
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 6px 24px var(--shadow);
}
.auth-brand {
    margin: -2rem -2rem 1.5rem;
    padding: 1.25rem 2rem;
    border-radius: 12px 12px 0 0;
    background: var(--brand);
    color: var(--brand-contrast);
    display: flex;
    justify-content: center;
}
.auth-brand .brand-logo { max-height: 56px; max-width: 260px; background: var(--logo-chip); border-radius: 8px; padding: 6px 10px; }
.auth-brand .brand-name { font-weight: 700; font-size: 1.35rem; }
.auth-theme { position: absolute; top: 1rem; right: 1rem; }
.auth-footer { margin-top: 1rem; color: var(--text-muted); font-size: 0.85rem; }

/* Blazor */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--bs-form-valid-border-color); }
.invalid { outline: 1px solid var(--bs-form-invalid-border-color); }
.validation-message { color: var(--bs-form-invalid-color); font-size: 0.875rem; }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    color: #212529;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

h1:focus { outline: none; }

/* ---------- Estimate builder ---------- */

.summary-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 4px solid var(--brand-line);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    box-shadow: 0 2px 8px var(--shadow);
}
.summary-bar.summary-preview { border-top-color: var(--warn-line); }
.summary-item { display: flex; flex-direction: column; }
.summary-value { font-size: 1.5rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.summary-label { color: var(--text-muted); font-size: 0.85rem; }
.summary-flag {
    grid-column: 1 / -1;
    font-size: 0.85rem;
    color: var(--flag-text);
    background: var(--flag-bg);
    border-radius: 6px;
    padding: 0.25rem 0.6rem;
    justify-self: start;
}

.room-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    margin-top: 0.6rem;
    min-height: 64px;
}
.room-card:hover:not(:disabled) { border-color: var(--brand-line); }
.room-card.selected { border: 2px solid var(--brand-line); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.room-card:disabled { opacity: 0.55; }
.room-card-title { font-weight: 600; }
.room-card-size { color: var(--text-muted); font-size: 0.85rem; }
.room-card-loads { display: flex; gap: 1rem; margin-top: 0.25rem; font-size: 0.9rem; font-variant-numeric: tabular-nums; }

.room-editor .room-name { font-weight: 600; }
.room-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.5rem;
    background: var(--page);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}
.room-results > div { display: flex; flex-direction: column; }
.rr-value { font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.rr-label { color: var(--text-muted); font-size: 0.8rem; }

.editor-heading {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 1.25rem 0 0.5rem;
    font-weight: 600;
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.6rem 0.75rem;
}
.num-field { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; }
.num-label { font-size: 0.8rem; color: var(--text-muted); }
.num-input { position: relative; display: block; }
.num-input .form-control { padding-right: 2.6rem; font-variant-numeric: tabular-nums; }
.num-unit {
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.toggle-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.75rem; }
.toggle-row .form-check-input { width: 2.6em; height: 1.4em; }
.toggle-row .form-check-label { padding-left: 0.4rem; line-height: 1.6; }

.opening-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(70px, 1fr)) minmax(130px, 1.6fr) minmax(90px, 1fr) auto auto;
    gap: 0.5rem;
    align-items: end;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
}
.opening-check { margin-bottom: 0.6rem; white-space: nowrap; }
.opening-remove { margin-bottom: 0.25rem; }
@media (max-width: 900px) {
    .opening-row { grid-template-columns: repeat(3, 1fr); }
    .opening-select, .opening-dir { grid-column: span 3; }
}

.advanced summary { cursor: pointer; color: var(--brand-on-page); font-weight: 500; padding: 0.4rem 0; }

.editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.estimate-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
}
.estimate-row:hover { color: var(--brand-on-page); }

/* ---------- Estimate tabs ---------- */

.estimate-tabs { display: flex; gap: 0.25rem; border-bottom: 2px solid var(--border); overflow-x: auto; }
.estimate-tabs a {
    padding: 0.6rem 1rem;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
}
.estimate-tabs a:hover { color: var(--brand-on-page); }
.estimate-tabs a.active { color: var(--brand-on-page); border-bottom-color: var(--brand-line); }

/* ---------- Options ---------- */

.package-group { padding: 0.5rem; border-radius: 8px; margin-bottom: 0.4rem; }
.package-group.recommended { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }

.option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    align-items: start;
}
.option-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 5px solid var(--tier-default);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.option-card.tier-good { border-top-color: var(--tier-good); }
.option-card.tier-better { border-top-color: var(--brand-line); }
.option-card.tier-best { border-top-color: var(--tier-best); }
.option-card.selected { box-shadow: 0 0 0 3px var(--selected-ring); border-color: var(--selected); }
.option-head { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.option-tier { background: var(--page); color: inherit; border: 1px solid var(--border); }
.option-name { font-weight: 600; border-color: transparent; padding-left: 0; }
.option-name:focus { border-color: var(--border); padding-left: 0.5rem; }

.option-lines { list-style: none; padding: 0; margin: 0; }
.option-lines li { padding: 0.45rem 0; border-bottom: 1px solid var(--border); }
.option-lines li.incentive .line-name, .option-lines li.incentive .line-price { color: var(--positive-text); }
.line-main { display: flex; justify-content: space-between; gap: 0.5rem; }
.line-name { font-size: 0.92rem; }
.line-eff { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.line-controls { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.2rem; }
.qty-btn { min-width: 34px; padding: 0.1rem 0.4rem; }
.qty { min-width: 1.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.line-price { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 500; }

.option-totals { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.75rem; margin: 0; }
.option-totals dt { font-weight: 400; color: var(--text-muted); }
.option-totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.option-totals .total { color: inherit; font-weight: 700; font-size: 1.15rem; border-top: 1px solid var(--border); padding-top: 0.3rem; }
.option-totals .monthly { font-weight: 600; color: var(--brand-on-page); }
.option-totals.internal { background: var(--internal-bg); border-radius: 8px; padding: 0.5rem 0.6rem; font-size: 0.85rem; }
.option-foot { margin-top: auto; }
.qty-input { width: 4.5rem; text-align: center; font-variant-numeric: tabular-nums; padding-left: 0.25rem; padding-right: 0.25rem; }
.margin-input { width: 5rem; font-variant-numeric: tabular-nums; }
.line-margin { display: flex; align-items: center; gap: 0.35rem; margin: 0.3rem 0 0; }
.line-cost { margin-top: 0.15rem; }
.rate-list { display: flex; flex-direction: column; gap: 0.6rem; }
.rate-source { font-size: 0.78rem; margin-top: 0.15rem; }
.rates-readonly { font-size: 0.9rem; }
.rates-readonly .rate-note { grid-column: 1 / -1; font-size: 0.75rem; color: var(--text-muted); margin-top: -0.2rem; }

/* ---------- Catalog ---------- */

.catalog-search { max-width: 22rem; }
.catalog-kind { max-width: 11rem; }
.tabular { font-variant-numeric: tabular-nums; }
.inactive-row { opacity: 0.6; }
.category-row { display: flex; gap: 0.35rem; align-items: center; margin-bottom: 0.35rem; }
.kit-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.kit-qty { width: 5rem; }
.category-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.category-column { width: auto; }
.location-input { min-width: 7rem; max-width: 12rem; }
.feature-sort { width: 5.5rem; }
.feature-checks { columns: 2 14rem; }
.option-recommend { display: flex; align-items: center; margin: 0.25rem 0; }
.line-location { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.25rem; }
.package-item-select { flex: 1 1 16rem; max-width: 28rem; }
/* Tier badges are fills with their own text colour, the same in both themes. */
.tier-badge { --tier-badge-good: #64748b; --tier-badge-best: #b45309; --tier-badge-custom: #6b5f8a; min-width: 4.5rem; background: var(--tier-badge-good); }
.tier-badge.tier-better { background: var(--brand); color: var(--brand-contrast); }
.tier-badge.tier-best { background: var(--tier-badge-best); }
.tier-badge.tier-custom { background: var(--tier-badge-custom); }

/* A soft neutral badge that follows the theme (in place of text-bg-light). */
.badge-soft { color: var(--bs-emphasis-color); background: var(--bs-secondary-bg); }

/* ---------- Print: always light ---------- */

/* Printouts are light whatever the theme (docs/design/theme.md). theme.js also switches the attribute while printing;
   this resets the variables for browsers that print without running it. The Bootstrap values are its light ones. */
@media print {
    [data-bs-theme=dark] {
        color-scheme: light;
        --page: #ffffff;
        --surface: #ffffff;
        --surface-raised: #ffffff;
        --border: #e1e5eb;
        --text-muted: #667085;
        --input-border: #848c98;
        --shadow: transparent;
        --shadow-strong: transparent;
        --warn-line: #f59e0b;
        --flag-text: #92400e;
        --flag-bg: #fef3c7;
        --positive-text: #15803d;
        --selected: #16a34a;
        --selected-ring: rgba(22, 163, 74, 0.2);
        --internal-bg: #fff7ed;
        --tier-default: #94a3b8;
        --tier-good: #64748b;
        --tier-best: #b45309;
        --bs-body-color: #212529; --bs-body-color-rgb: 33, 37, 41; --bs-body-bg: #fff; --bs-body-bg-rgb: 255, 255, 255;
        --bs-emphasis-color: #000; --bs-emphasis-color-rgb: 0, 0, 0;
        --bs-secondary-color: rgba(33, 37, 41, 0.75); --bs-secondary-color-rgb: 33, 37, 41; --bs-secondary-bg: #e9ecef; --bs-secondary-bg-rgb: 233, 236, 239;
        --bs-tertiary-color: rgba(33, 37, 41, 0.5); --bs-tertiary-color-rgb: 33, 37, 41; --bs-tertiary-bg: #f8f9fa; --bs-tertiary-bg-rgb: 248, 249, 250;
        --bs-primary-text-emphasis: #052c65; --bs-secondary-text-emphasis: #2b2f32; --bs-success-text-emphasis: #0a3622; --bs-info-text-emphasis: #055160;
        --bs-warning-text-emphasis: #664d03; --bs-danger-text-emphasis: #58151c; --bs-light-text-emphasis: #495057; --bs-dark-text-emphasis: #495057;
        --bs-primary-bg-subtle: #cfe2ff; --bs-secondary-bg-subtle: #e2e3e5; --bs-success-bg-subtle: #d1e7dd; --bs-info-bg-subtle: #cff4fc;
        --bs-warning-bg-subtle: #fff3cd; --bs-danger-bg-subtle: #f8d7da; --bs-light-bg-subtle: #fcfcfd; --bs-dark-bg-subtle: #ced4da;
        --bs-primary-border-subtle: #9ec5fe; --bs-secondary-border-subtle: #c4c8cb; --bs-success-border-subtle: #a3cfbb; --bs-info-border-subtle: #9eeaf9;
        --bs-warning-border-subtle: #ffe69c; --bs-danger-border-subtle: #f1aeb5; --bs-light-border-subtle: #e9ecef; --bs-dark-border-subtle: #adb5bd;
        --bs-heading-color: inherit; --bs-link-color: #0d6efd; --bs-link-hover-color: #0a58ca; --bs-link-color-rgb: 13, 110, 253; --bs-link-hover-color-rgb: 10, 88, 202;
        --bs-code-color: #d63384; --bs-highlight-color: #212529; --bs-highlight-bg: #fff3cd;
        --bs-border-color: #dee2e6; --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
        --bs-form-valid-color: #198754; --bs-form-valid-border-color: #198754; --bs-form-invalid-color: #dc3545; --bs-form-invalid-border-color: #dc3545;
    }
    [data-bs-theme], [data-bs-theme] * { --brand-on-page: var(--brand-text-light); --brand-line: var(--brand-line-light); }
    html, body { background: #ffffff; }
}

/* ---------- Message log (docs/design/messages.md section 5) ---------- */
.message-text {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: 0.9rem;
    margin: 0;
}
/* The email as sent is a customer document: always light, like the stored proposal (theme.md). */
.message-frame {
    display: block;
    width: 100%;
    min-height: 32rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background: #ffffff;
    color-scheme: light;
}

/* The small "?" link to a help article (HelpLink.razor, docs/design/help.md section 8). */
.help-link {
    display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; margin-left: .4rem;
    border: 1px solid var(--input-border); border-radius: 50%; font-size: .75rem; font-weight: 700; line-height: 1;
    text-decoration: none; vertical-align: middle; color: var(--text-muted); background: var(--surface);
}
.help-link:hover, .help-link:focus-visible { color: var(--brand-on-page); border-color: var(--brand-line); }