/* ==========================================================================
   Poppins (brand font) — Regular/Medium for body, SemiBold for headings/brand.
   OFL-licensed; license at wwwroot/fonts/OFL.txt.
   ========================================================================== */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/Poppins-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/Poppins-Medium.ttf") format("truetype");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/Poppins-SemiBold.ttf") format("truetype");
}

/* ==========================================================================
   Brand tokens — the single source of truth for the app's visual identity.
   Everything reads from these; nothing references a raw brand hex directly.
   The values below are the NEUTRAL default (slate blue) a company has until it
   picks its own accent in Settings → Branding (applied as an inline
   --brand-primary). It is deliberately not Radian's teal, so an unbranded
   company's app and documents never look as if Radian issued them.
   Radian's own surfaces (control plane) opt into teal with html.brand-radian.
   ========================================================================== */
:root {
    --brand-primary:        #3E5C76;   /* neutral slate blue — accent, primary buttons, active nav, header */
    --brand-primary-hover:  #324b61;   /* derived darker */
    --brand-primary-light:  #6b8299;   /* derived lighter */
    --brand-on-primary:     #ffffff;   /* text/icon on a primary fill */
    --brand-header-bg:      var(--brand-primary);     /* header bar fill — follows the accent unless overridden */
    --brand-header-fg:      var(--brand-on-primary);  /* header bar text — white unless overridden */
    --brand-neutral-dark:   #566065;   /* headings, body text, the wordmark slate */
    --brand-neutral-light:  #C8CCCD;   /* borders, muted fills */
    --brand-note:           var(--brand-primary);  /* build-up text/note lines — follows the brand */
    --brand-font:           "Poppins", "Segoe UI Variable", "Segoe UI", sans-serif;
}
/* Radian Advisory's brand palette (from Radian's brand files) — used ONLY on Radian's own surfaces: the control plane,
   central sign-in, the Plan page and Radian credits. Companies never see these as their own colours. */
:root {
    --radian-teal:        #00A19B;   /* brand teal (colour code 00A19B) */
    --radian-teal-dark:   #00867f;   /* hover / pressed */
    --radian-teal-light:  #33b4af;
    --radian-slate-blue:  #5F7F8B;   /* the slate-blue logo background */
    --radian-slate:       #566065;   /* brand slate grey (566065) */
    --radian-grey:        #C8CCCD;   /* brand light grey (C8CCCD) */
    --radian-ink:         #474B4F;   /* the logo's wordmark grey */
}
:root.brand-radian {
    --brand-primary:        var(--radian-teal);   /* Radian teal — control plane only */
    --brand-primary-hover:  var(--radian-teal-dark);
    --brand-primary-light:  var(--radian-teal-light);
}
/* Everything below applies on every address (companies AND the control plane) — it maps the app colour onto
   Radzen. (It once sat inside :root.brand-radian by mistake, so companies got Radzen's own blue / purple.) */
:root {
    /* Theme-aware custom surfaces (light defaults; overridden under body.app-dark) */
    --row-section-bg: #e8f5e9;         /* BOQ section heading row */
    --row-note-bg:    #fafafa;         /* BOQ note/text-line row */
    --surface-tint:   #eef3f3;         /* subtle tinted strips (report tabs, subtotal rows) */
    --hairline:       #f0f0f0;         /* faint table rules */
    --hairline-strong:#cccccc;         /* header / total rules */
    --cell-warn-bg:   #fff3cd;         /* manual / overridden rate cell */
    --cell-error-bg:  #fdecea;         /* invalid formula / tender-locked alert */
    --cell-error-fg:  #c0392b;         /* alert text / accent */
    --code-bg:        #f6f8fa;         /* help code blocks */
    --code-border:    #e1e4e8;
    --sidebar-bg:     #f5f5f5;         /* nav sidebar surface */
    --muted-fg:       #777777;         /* caption / hint text */
    --status-ok:      #2e9d5b;         /* BOQ priced / complete light (green) */
    --status-warn:    #d9a300;         /* BOQ partially-priced light (amber) */
    --alert-warn-bg:  #fff4e5;         /* orange read-only / concurrency banner */
    --alert-warn-fg:  #e67e22;

    /* Map the brand onto Radzen's theme variables so every Radzen component
       (grids, buttons, dialogs, nav) picks up the brand with no per-component CSS. */
    /* Map the WHOLE primary family so every Radzen component (checkboxes, switches,
       radios, tabs, badges, sliders, pressed buttons, list selections) follows the
       brand instead of Radzen's default purple — not just the base shade. */
    --rz-primary:            var(--brand-primary);
    --rz-primary-light:      var(--brand-primary-light);
    --rz-primary-lighter:    color-mix(in srgb, var(--brand-primary) 12%, transparent);
    --rz-primary-dark:       var(--brand-primary-hover);
    --rz-primary-darker:     color-mix(in srgb, var(--brand-primary) 65%, black);
    --rz-on-primary:         var(--brand-on-primary);
    --rz-on-primary-light:   var(--brand-on-primary);
    --rz-on-primary-lighter: var(--brand-primary);
    --rz-on-primary-dark:    var(--brand-on-primary);
    --rz-on-primary-darker:  var(--brand-on-primary);
    --rz-text-font-family:   var(--brand-font);

    /* Grid header: a gentle neutral-grey shade so headers stand out from the rows below
       without a colour cast. Theme-aware (overridden under body.app-dark). */
    --rz-grid-header-background-color: #e7e7ec;

    /* Selected grid row follows the brand accent (a subtle tint, readable text kept). */
    --rz-grid-selected-background-color: color-mix(in srgb, var(--brand-primary) 22%, transparent);
    --rz-grid-selected-color: inherit;

    /* Active nav (panel menu) item — strong like the BOQ section rows, but in the
       brand accent (a higher % since the dark accent is muted) so it matches the theme. */
    --rz-panel-menu-item-active-background-color: color-mix(in srgb, var(--brand-primary) 30%, transparent);
    --rz-panel-menu-item-active-color: var(--brand-primary);
    --rz-panel-menu-item-active-indicator: var(--brand-primary);

    /* Native form controls (search inputs, datalists, scrollbars) follow the theme. */
    color-scheme: light;
}

/* Global UI scale. Radzen sets :root{font-size:var(--rz-root-font-size)} (default 16px) and almost
   everything (Radzen components, Bootstrap spacing, the app's own styles) sizes in rem off it — so
   overriding this ONE variable shrinks the whole UI evenly, denser, ~like the app at 75-80% browser
   zoom. (A plain `html{font-size}` rule is outranked by Radzen's `:root`, so it must be this var.)
   Viewport-height grid layouts (calc(100vh - …)) are unaffected, so screens still fill. One-number
   dial: lower = smaller. */
:root {
    --rz-root-font-size: 12.8px; /* 80% of the 16px default */
}

body {
    margin: 0;
    font-family: var(--brand-font);
}

/* Dark theme: re-point the theme-aware custom surfaces so they don't stay light-tinted.
   (The Radzen components themselves are handled by swapping to material-dark.css.) */
body.app-dark {
    --row-section-bg: rgba(0, 161, 155, 0.18);
    --row-note-bg:    rgba(255, 255, 255, 0.04);
    --surface-tint:   rgba(255, 255, 255, 0.06);
    --hairline:       rgba(255, 255, 255, 0.08);
    --hairline-strong:rgba(255, 255, 255, 0.20);
    --cell-warn-bg:   rgba(255, 193, 7, 0.20);   /* dark-friendly amber */
    --cell-error-bg:  rgba(229, 57, 53, 0.22);   /* dark-friendly red alert */
    --cell-error-fg:  #ff8a80;                   /* light red so text/borders read on dark */
    --code-bg:        rgba(255, 255, 255, 0.06);
    --code-border:    rgba(255, 255, 255, 0.12);
    --sidebar-bg:     var(--rz-base-background-color);  /* match the dark page surface */
    --muted-fg:       rgba(255, 255, 255, 0.55);
    --status-ok:      #4ec17e;                    /* brighter green so it reads on dark */
    --status-warn:    #e0b341;
    --alert-warn-bg:  rgba(230, 126, 34, 0.18);
    --alert-warn-fg:  #ffb74d;
    --rz-grid-header-background-color: rgba(255, 255, 255, 0.09);  /* gentle neutral lift on dark */
    color-scheme: dark;   /* native inputs/datalists/scrollbars render dark */
}

/* Bootstrap's text utilities use fixed near-black greys that disappear on the dark surface (captions,
   form labels, hints across Settings / contact dialog / etc.). Re-point them at the theme-aware tokens
   so every "muted" line stays legible in dark mode. */
body.app-dark .text-muted,
body.app-dark .text-secondary,
body.app-dark .text-body-secondary { color: var(--muted-fg) !important; }
body.app-dark .text-danger,
body.app-dark .invalid-feedback,
body.app-dark .validation-message { color: #ff8a80 !important; }   /* readable red on dark */
body.app-dark .form-label,
body.app-dark .form-text { color: rgba(255, 255, 255, 0.82); }
body.app-dark .card { background: var(--surface-tint); border-color: var(--hairline); }

/* Bootstrap tables (.table on Admin Users, control-plane Tenants, Settings) default to a light
   surface + near-black text via their --bs-table-* variables, so they render as a white block on the
   dark page. Re-point those variables at the theme tokens: transparent bg (the dark page shows
   through), light text, and subtle white overlays for the rules / striping / hover. Covers .table-sm. */
body.app-dark .table {
    --bs-table-color: rgba(255, 255, 255, 0.87);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--hairline);
    --bs-table-striped-color: rgba(255, 255, 255, 0.87);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-hover-color: rgba(255, 255, 255, 0.87);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
    --bs-table-active-color: rgba(255, 255, 255, 0.87);
    --bs-table-active-bg: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.87);
    border-color: var(--hairline);
}

/* BOQ "priced / completed" status lights — a small green/amber/grey dot in the BOQ grid's first column
   (and the toolbar counter). Theme-aware via the --status-* tokens. */
.priced-dot { font-size: 1.05em; line-height: 1; }
.priced-on { color: var(--status-ok); }
.priced-partial { color: var(--status-warn); }
.priced-off { color: var(--hairline-strong); }   /* faint hollow = not priced yet */

/* Live presence (M3): "Also here" chips showing the other estimators viewing this project. */
.presence-bar { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.presence-bar__label { font-size: 0.72rem; color: var(--muted-fg); }
.presence-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--brand-primary); color: #fff;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.3px;
    border: 1.5px solid var(--surface-card, #fff); cursor: default;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.presence-chip + .presence-chip { margin-left: -8px; } /* slight overlap, Google-Docs style */

/* Friendly empty-state for grids with no rows yet (Radzen EmptyTemplate). */
.grid-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--muted-fg);
}
.grid-empty .rz-icon {
    font-size: 34px;
    opacity: 0.55;
    display: block;
    margin: 0 auto 0.5rem;
}

/* Numeric inputs: drop the up/down spinner buttons (unused in estimating entry; they only
   waste width). The input expands to fill the reclaimed space. */
.rz-numeric-up,
.rz-numeric-down {
    display: none !important;
}

/* Column padding: give header titles the same horizontal padding as the body cells so the
   headers line up with the values below. (Radzen's default header padding is 0 horizontal.)
   Kept tight (0.5rem) for an Excel-like feel; must stay in step with the body cell horizontal
   padding set on --rz-grid-cell-padding below, or headers and values fall out of alignment. */
.rz-data-grid .rz-grid-table thead th .rz-column-title {
    padding-left: 3px;
    padding-right: 3px;
}
.rz-data-grid .rz-grid-table thead th:first-child .rz-column-title,
.rz-data-grid .rz-grid-table tbody td:first-child {
    padding-left: 3px;
}
.rz-data-grid .rz-grid-table thead th:last-child .rz-column-title,
.rz-data-grid .rz-grid-table tbody td:last-child {
    padding-right: 3px;
}

/* Excel-like density. Radzen 10's Material theme defaults grid cells to ~0.625rem vertical and
   1rem horizontal padding — much roomier than a spreadsheet. Near-zero horizontal inset for a true
   spreadsheet feel; readability comes from the vertical gridlines below, not padding. Keep this
   horizontal value in step with the header-title padding above. Applies to every grid app-wide. */
.rz-data-grid {
    --rz-grid-cell-padding: 0.3rem 3px;
}

/* Comfortable density (Settings → Appearance; body.app-comfortable): roomier grid rows, buttons and form fields.
   Compact (the rules above) stays the default. */
body.app-comfortable .rz-data-grid { --rz-grid-cell-padding: 0.6rem 8px; }
body.app-comfortable .rz-data-grid .rz-grid-table thead th .rz-column-title { padding-left: 8px; }
body.app-comfortable .rz-button { padding-block: 0.5rem; }
body.app-comfortable .rz-button.rz-button-sm { padding-block: 0.4rem; }
body.app-comfortable .rz-textbox, body.app-comfortable .rz-numeric, body.app-comfortable .rz-dropdown,
body.app-comfortable .rz-datepicker input { min-height: 2.5rem; }
body.app-comfortable .rz-navigation-item-link { padding-block: 0.7rem; }

/* Vertical column separators (Excel-like) so columns stay legible at the near-zero inset above.
   --hairline is theme-aware (lightens in dark mode). Skip the trailing/filler last column. */
.rz-data-grid .rz-grid-table tbody td,
.rz-data-grid .rz-grid-table thead th {
    border-right: 1px solid var(--hairline);
}
.rz-data-grid .rz-grid-table tbody td:last-child,
.rz-data-grid .rz-grid-table thead th:last-child {
    border-right: none;
}

/* The BOQ priced-status column is only 34px wide; the 1rem cell padding shrank the content box so
   far that Radzen's overflow:hidden cell clipped the green/amber ● dot. Trim that one column's
   padding (scoped to the BOQ grid) so the dot sits centred and uncut. */
#boq-grid .rz-grid-table tbody td:first-child,
#boq-grid .rz-grid-table thead th:first-child {
    padding-left: 4px;
    padding-right: 4px;
}

/* #9 Excel-like in-cell editing: strip the extra chrome off form controls rendered inside an
   editing cell so the edit row stays about the same height as a display row (Radzen's default
   inputs are tall, which made an edit row jump in height). Covers RadzenTextBox/RadzenNumeric
   internal .rz-inputtext and the native type-to-search <input list> cells. */
.rz-data-grid .rz-grid-table tbody td .rz-textbox,
.rz-data-grid .rz-grid-table tbody td .rz-numeric,
.rz-data-grid .rz-grid-table tbody td .rz-numeric .rz-inputtext,
.rz-data-grid .rz-grid-table tbody td input.rz-inputtext,
.rz-data-grid .rz-grid-table tbody td input[list] {
    /* Collapse the input's own box (padding + border + margin) to nothing and force it to inherit the
       cell's font metrics, so the editor occupies exactly the same height as the plain display text —
       entering edit mode no longer "zooms" the row at all. The active cell is shown via the focus ring
       + tint below (drawn with an inset outline, which adds no height). */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    border-width: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    box-sizing: border-box;
    vertical-align: middle;
}
/* Subtle cue that the cell is in edit mode (since the border is now transparent): tint + focus ring. */
.rz-data-grid .rz-grid-table tbody td .rz-textbox:focus,
.rz-data-grid .rz-grid-table tbody td .rz-numeric .rz-inputtext:focus,
.rz-data-grid .rz-grid-table tbody td input.rz-inputtext:focus,
.rz-data-grid .rz-grid-table tbody td input[list]:focus {
    background: var(--cell-warn-bg, rgba(255, 214, 0, 0.12));
    outline: 1px solid var(--brand-primary);
    outline-offset: -1px;
}

/* Frozen column headers: any Radzen grid placed in a scrolling container keeps its header row
   visible while the body scrolls. The header background composites the theme header tint over the
   opaque page surface so rows don't bleed through when scrolled beneath it (the tint alone is
   translucent in dark mode). A no-op for grids that aren't in a scroll container. */
.rz-data-grid .rz-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--rz-base-background-color);
    background-image: linear-gradient(var(--rz-grid-header-background-color), var(--rz-grid-header-background-color));
}

/* Build-up pane sticky sections. Each section (Resources / Variables) is its own containing block,
   so its bar (title + Add/Delete) is pushed out when the section scrolls away — the bars hand off
   rather than stacking. The bar pins at the top of the scroll area; the section's grid column
   header pins just beneath it (offset by the bar height). --build-bar-h keeps the bar's reserved
   height and the grid-header offset in lock-step so there's no gap or overlap on a single-row bar. */
.build-section { display: flex; flex-direction: column; gap: 0.5rem; }
.build-section-bar {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--rz-base-background-color);
    padding: 2px 0;
}
/* In the build pane the section bar is the frozen element. Each grid's own column header scrolls
   with its rows rather than freezing — stacking it beneath the bar fights Radzen's grid scroll
   model (two grids share one scroll context, producing offset gaps/dropped headers). So opt the
   build-pane grids out of the global sticky-header rule. */
/* relative (not sticky) so the column header scrolls with its rows in the build pane, while still
   giving Radzen's absolutely-positioned resize handle a positioning context (static would hide it). */
.build-grid .rz-grid-table thead th { position: relative; top: auto; }



#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    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;
}

/* Print: show only the report surface, hide app chrome and the report controls. */
@media print {
    /* Hide all app chrome — the custom .app-header (with the hamburger buttons), the Radzen header/sidebar,
       the report toolbar and the sub-tab selector — so only the document surface prints. */
    .rz-sidebar, .rz-header, .app-header { display: none !important; }
    .rz-body { margin: 0 !important; padding: 0 !important; }
    .report-controls, .report-tabs { display: none !important; }
    /* Page-level chrome that lives outside .report-controls (page title, export split button,
       lock/concurrency banner, presence bar) — opt-in via .no-print so it never prints. */
    .no-print { display: none !important; }
    #blazor-error-ui { display: none !important; }

    /* Let the content flow across pages instead of being clipped to the on-screen viewport.
       Without this, the app's scroll container prints only the first (visible) page.
       position:static + top:auto neutralise Radzen's absolutely-positioned .rz-body (offset below the
       fixed header) — without it the surface prints from that offset and the top is clipped a little. */
    html, body, .rz-layout, .rz-body, .rz-content, .rz-content-container, main, .report-surface {
        position: static !important;
        top: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Neutralise sticky/frozen headers + pinned bars in print so they don't anchor to the page-top
       viewport and overlap (or clip) the first content in the browser's print preview. */
    .rz-data-grid .rz-grid-table thead th,
    .build-section-bar { position: static !important; }

    /* Paginate tables cleanly: repeat the column header on each page, don't split a row. */
    .report-surface table { page-break-inside: auto; }
    .report-surface thead { display: table-header-group; }
    .report-surface tr { page-break-inside: avoid; }
    /* Quote → Preview: Conditions and the Priced BOQ each start a new page (matches the PDF / Word quote). */
    .quote-section--break { break-before: page; page-break-before: always; }
    .quote-section--break > :first-child { margin-top: 0 !important; }
    /* Page breaks are unreliable inside flex boxes — print the stack around the document as plain blocks. */
    .rz-stack:has(> .report-surface) { display: block !important; }

    @page { margin: 14mm; }
}

/* Reports: give the report selector a subtle "pop" — a tinted strip and a teal
   (brand) highlight on the selected tab. */
.report-tabs {
    display: inline-block;
    background: var(--surface-tint);
    padding: 4px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.report-tabs .rz-button.rz-state-active,
.report-tabs .rz-selectbutton .rz-button.rz-selected {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Help has many short single-word tabs (Projects, BOQ); give the tab buttons more horizontal
   breathing room so they don't crowd the dividers. Scoped to Help so Reports/Quote are unchanged.
   !important is needed to beat Radzen's own button padding (same trick as the active-tab rule above). */
.help-tabs .rz-button,
.help-tabs .rz-selectbutton .rz-button {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    white-space: nowrap;
}

/* Selected SelectBar / toggle-button segment follows the brand accent everywhere
   (e.g. the Settings Theme/Density toggles) — Radzen's default isn't brand-mapped. */
.rz-selectbutton .rz-button.rz-selected,
.rz-selectbutton .rz-button.rz-state-active {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
}

/* ==========================================================================
   App header (brand surface) — teal bar carrying the white Radian logo.
   ========================================================================== */
.app-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 1rem;
    height: 50px;
    background: var(--brand-header-bg);
    color: var(--brand-header-fg);
}
/* Only the project name gives way when the header is crowded (the rules below re-allow it); everything else keeps
   its width — the Sign out button used to wrap onto two lines. */
.app-header > * { flex-shrink: 0; }
.app-header__brand {
    display: flex;
    align-items: flex-end;   /* sit the app name on the logo's baseline */
    gap: 10px;
    flex: 1 1 0;             /* equal share with the spacer keeps the project name centred … */
    min-width: max-content;  /* … but never squeezed below its own width — a long project name used to run over it */
    padding-bottom: 6px;
}
.app-header__logo {
    height: 36px;
    width: auto;
}
/* Stands in for the logo until the company uploads one. */
.app-header__companyname {
    font-weight: 600;
    font-size: 19px;
    line-height: 1;
    white-space: nowrap;
    padding-right: 0.6rem;
    border-right: 1px solid color-mix(in srgb, var(--brand-header-fg) 40%, transparent);
}
.app-header__appname {
    font-weight: 500;
    font-size: 19px;
    line-height: 1;          /* drop descender gap so the bottom edge aligns with the logo */
    letter-spacing: 0.2px;
    opacity: 0.95;
    white-space: nowrap;
}
.app-header__project {
    flex: 0 1 auto;          /* the project name gives way first (cut short with "…") when the header is crowded */
    min-width: 0;
    margin: 0 12px;
    text-align: center;
}
.app-header__project-pill {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 0.3px;
    background: rgba(255, 255, 255, 0.2);
    padding: 5px 18px;
    border-radius: 16px;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.app-header__spacer {
    flex: 1 1 0;
}

/* ==========================================================================
   Fixed Radian Advisory credit (sidebar footer, About box, reports).
   ========================================================================== */
.radian-credit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted-fg);
}
.radian-credit__icon {
    height: 16px;
    width: auto;
}
.radian-credit--compact {
    font-size: 12px;
}

/* Sidebar: pin the credit to the bottom, below the nav menu. */
.sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.sidebar-credit {
    margin-top: auto;
    padding: 12px 16px;
    cursor: pointer;
    opacity: 0.85;
}
.sidebar-credit:hover {
    opacity: 1;
}

/* Header icon buttons (the two hamburgers). Plain <button>s — the layout is static-rendered, so they
   call JS directly via onclick rather than a Blazor Click. Reset to a transparent header icon button. */
.app-header__iconbtn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--brand-header-fg);
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font: inherit;
}
.app-header__iconbtn:hover { background: rgba(255, 255, 255, 0.18); }
.app-header__iconbtn i { font-size: 1.4rem; line-height: 1; }

/* Header nav toggle (collapse/expand the sidebar). */
.app-header__navtoggle { margin-right: 0.25rem; }

/* Both header hamburger buttons follow the header text colour (so they stay legible on a custom
   header). Radzen text buttons set their own colour, so override the button and let the icon inherit. */
.app-header__navtoggle,
.app-header__compacttoggle,
.app-header__navtoggle:hover,
.app-header__compacttoggle:hover {
    color: var(--brand-header-fg) !important;
}
.app-header__navtoggle i,
.app-header__compacttoggle i {
    color: inherit !important;
}

/* Compact action buttons — ~75% text + tighter padding — everywhere EXCEPT the main app header,
   to free up space in the page toolbars. Icons stay legible (not shrunk to the text size). */
.rz-button:not([class*="app-header"]) {
    font-size: 0.72rem;
    padding: 0.14rem 0.55rem;   /* shorter buttons — less vertical space, text size unchanged */
    min-height: 0;
}
/* Radzen's button box uses --rz-button-line-height (tall, for the full-size button); in our shortened
   button that makes the content box taller than the padding box so the label rides up. Collapse the
   box line-height to its content so the icon + text stay centred. */
.rz-button:not([class*="app-header"]) .rz-button-box {
    line-height: 1;
}
.rz-button:not([class*="app-header"]) i {
    font-size: 1.1rem;
    line-height: 1;
}

/* Custom-branding logo preview (Settings). A fixed letterboxed frame so any logo's aspect ratio
   shows without distorting; the header variant uses a dark fill to mirror the coloured app header. */
.brand-logo-preview {
    display: flex; align-items: center; justify-content: center;
    width: 220px; height: 56px; padding: 6px;
    border: 1px solid var(--hairline-strong); border-radius: 6px;
    background: var(--surface-tint, #fafafa);
}
.brand-logo-preview--dark { background: var(--brand-header-bg, var(--brand-primary, #00A19B)); }
.brand-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-logo-preview__empty { font-size: 0.78em; color: var(--muted-fg); }
.brand-logo-preview--dark .brand-logo-preview__empty { color: rgba(255, 255, 255, 0.85); }

/* Contact edit dialog: two-column form. */
.contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; }
.contact-form-grid .rz-label { display: block; font-size: 0.82em; color: var(--muted-fg); margin-bottom: 2px; }

/* Compact ("expert") mode collapses iconed buttons to icon-only — handled in nav.js (hides the
   label span + auto-fills a tooltip), which is more reliable across WebView builds than :has(). */

/* Segmented "move" control: 3 icon buttons that touch (Excel-ribbon style) — square inner edges,
   only the outer corners of the whole block rounded, thin dividers between. */
.move-btn-group { display: inline-flex; }
.move-btn-group .rz-button { border-radius: 0 !important; margin: 0 !important; }
.move-btn-group .rz-button:first-child {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}
.move-btn-group .rz-button:last-child {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}
.move-btn-group .rz-button + .rz-button { border-left: 1px solid rgba(255, 255, 255, 0.35); }

/* ---- Collapsed nav: icons-only "page-marker tabs" --------------------------------------------
   Radzen drives BOTH the sidebar width and the body offset from --rz-sidebar-width, so narrowing
   it reflows the layout automatically. Each item becomes a little index/bookmark tab: flush to the
   sidebar's left edge, rounded + protruding on the right, with a soft lift like a physical page
   marker. The active page's tab is filled with the brand colour. */
body.nav-collapsed { --rz-sidebar-width: 64px; }

/* Make the collapsed sidebar blend into the body surface (no panel fill, edge or divider) so the
   tabs read as floating on the same colour as the blank content area — in either theme. The body
   content uses --rz-layout-body-background-color, so match that exactly and drop the right divider. */
body.nav-collapsed .rz-sidebar {
    background: var(--rz-layout-body-background-color) !important;
    border: none !important;
    border-inline-end: none !important;
    box-shadow: none !important;
}
body.nav-collapsed .rz-panel-menu,
body.nav-collapsed .sidebar-content { background: transparent; }

body.nav-collapsed .rz-panel-menu .rz-navigation-item-text { display: none; }
body.nav-collapsed .rz-panel-menu .rz-navigation-item-icon { margin: 0; }
body.nav-collapsed .sidebar-credit { display: none; }

body.nav-collapsed .rz-panel-menu .rz-navigation-item-link {
    margin: 5px 6px 5px 0;
    padding: 10px 0;
    justify-content: center;
    border-radius: 0 14px 14px 0;            /* rounded right end = tab protruding from the page */
    background: var(--surface-tint);
}
body.nav-collapsed .rz-panel-menu .rz-navigation-item-link:hover {
    background: color-mix(in srgb, var(--brand-primary) 22%, var(--surface-tint));
}
body.nav-collapsed .rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-link,
body.nav-collapsed .rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-link .rzi {
    background: var(--brand-primary);
    color: #fff;
}

/* Crisp tabs: strip Radzen's rectangular item dividers, wrapper backgrounds and the rectangular
   active-indicator bar so ONLY the rounded tab (and its shape-matching shadow) shows. */
body.nav-collapsed .rz-panel-menu .rz-navigation-item,
body.nav-collapsed .rz-panel-menu .rz-navigation-item-wrapper,
body.nav-collapsed .rz-panel-menu .rz-navigation-item-wrapper-active {
    border: none;
    background: transparent;
    box-shadow: none;
}
body.nav-collapsed .rz-panel-menu .rz-navigation-item-wrapper:before,
body.nav-collapsed .rz-panel-menu .rz-navigation-item-wrapper-active:before,
body.nav-collapsed .rz-panel-menu .rz-navigation-item-active:before {
    display: none;
}

/* Report surface base font — kept small so the dense BOQ/data tables don't read huge on screen
   or in print (the tables size in em off this). The letterhead is exempted below so it stays legible.
   The surface is ALWAYS white paper with dark text — on screen, in print and in the PDF — whatever the person's own
   light/dark or app colour (TW 2026-11-06: a quote must look the same whoever previews or prints it). */
/* Quotes / reports are company documents: the company's own colour (set on <html> by App.razor), never a person's
   own app colour; no company colour → the same neutral slate the PDF / Word exports use (QuoteHtml.DefaultPrimary). */
/* Note / text lines use the same fixed slate as the PDF + Word exports (QuoteHtml --brand-note) — the app-wide
   --brand-note follows a person's own app colour, which must never reach a company document. */
.report-surface {
    font-size: 14px; --doc-accent: var(--company-accent, #3E5C76); --brand-note: #5F7F8A;
    /* Paper palette — the same tones as the PDF (QuoteHtml.BuildDocument); re-points the theme + Radzen text tokens
       so nothing inside picks up dark mode. */
    background: #fff; color: #1a1a1a; color-scheme: light;
    padding: 1.25rem 1.5rem; border: 1px solid #d6d6d6; border-radius: 4px;
    --muted-fg: #555; --hairline: #e4e4e4; --hairline-strong: #999; --surface-tint: #f0f0f0; --row-note-bg: #fafafa;
    --rz-text-color: #1a1a1a; --rz-text-title-color: #111; --rz-text-secondary-color: #444;
    --rz-text-tertiary-color: #555; --rz-text-caption-color: #555; --rz-text-overline-color: #555;
    /* Radzen resolves these per-style tokens on :root, so each one has to be re-pointed here too. */
    --rz-text-h1-color: #111; --rz-text-h2-color: #111; --rz-text-h3-color: #111; --rz-text-h4-color: #111;
    --rz-text-h5-color: #111; --rz-text-h6-color: #111; --rz-text-subtitle1-color: #111; --rz-text-subtitle2-color: #111;
    --rz-text-body1-color: #1a1a1a; --rz-text-body2-color: #1a1a1a;
}
.report-surface .quote-letterhead { font-size: 13px; }

/* Rich-text letter body (Quote → Letter preview + the combined Preview) — tame the WYSIWYG output's
   paragraph/list spacing so it reads like a letter. Mirrors the PDF rules in QuoteHtml.BuildDocument. */
.letter-body p { margin: 0 0 0.6em; }
.letter-body ul, .letter-body ol { margin: 0 0 0.6em; padding-left: 1.5em; }
.letter-body h1, .letter-body h2, .letter-body h3, .letter-body h4 { margin: 0.5em 0 0.3em; color: inherit; border: 0; }

/* Title block under the letterhead: report heading + project name (left), project meta (right).
   Dark, legible text on screen and print — replaces the old pale brand-coloured heading line. */
.report-titleblock {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1.5rem; margin: 0.25rem 0 0.7rem;
}
.report-titleblock__heading {
    font-size: 1.7em; font-weight: 700; letter-spacing: 0.3px; line-height: 1.1;
    text-transform: uppercase; color: var(--doc-accent);
}
/* Project name + meta values inherit the paper text colour. */
.report-titleblock__project { font-size: 1.25em; font-weight: 600; margin-top: 2px; }
.report-titleblock__meta { font-size: 1em; border-collapse: collapse; }
.report-titleblock__meta td { padding: 1px 0; vertical-align: top; }
.report-titleblock__meta td:first-child { color: var(--muted-fg); padding-right: 14px; white-space: nowrap; }
.report-titleblock__meta td:last-child { font-weight: 500; text-align: right; }

/* BOQ section rows (screen + print). */
/* A gentle tint of the company's colour (white paper → no dark-mode variant); the PDF / Word quote use the same 14 % mix. */
.report-boq tr.boq-section td { background: color-mix(in srgb, var(--doc-accent) 14%, #fff); }

/* Gridlines are PRINT-ONLY — the on-screen report stays clean (cells keep their light bottom rule);
   on paper the full grid + dark text + banded header make the BOQ read as a proper printed table.
   This block sits after the screen rules above so it wins in the print cascade. */
@media print {
    .report-surface {
        font-size: 12px;
        color: #1a1a1a;
        background: #fff;
        border: none !important;
        padding: 0 !important;
        /* When printing from dark mode the muted/hairline tokens are light and vanish on white paper —
           re-point them to print-safe dark tones so the letterhead address, title-block labels and
           captions stay readable regardless of the active theme. */
        --muted-fg: #555;
        --hairline: #ccc;
        --hairline-strong: #999;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .report-surface .quote-letterhead { font-size: 13px; }
    .report-surface h6, .report-surface .rz-text-h6 { color: #111; }
    .report-titleblock__heading { font-size: 19px; }
    .report-titleblock__project { font-size: 15px; }

    .report-boq { border: 1.5px solid #333 !important; }
    .report-boq th,
    .report-boq td { border: 1px solid #333 !important; color: #1a1a1a !important; }
    .report-boq thead th { background: #ececec !important; color: #111 !important; font-weight: 700; }
    .report-boq tr.boq-section td { background: color-mix(in srgb, var(--doc-accent) 14%, #fff) !important; }
}

/* Quote / report letterhead: brand logo left, issuer details right, hairline rule under. */
.quote-letterhead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.9rem;
    border-bottom: 2px solid var(--doc-accent);
}
.quote-letterhead__logo {
    height: 110px;          /* letterhead logo size; tune to taste */
    width: auto;
    max-width: 620px;
    object-fit: contain;
}
.quote-letterhead__details {
    text-align: right;
    font-size: 0.9em;
    line-height: 1.45;
    color: var(--muted-fg);
}
.quote-letterhead__name {
    font-weight: 600;
    font-size: 1.15em;
    color: var(--brand-neutral-dark);
    margin-bottom: 2px;
}

/* Reports: a credit line under the report surface (also prints — see @media print). */
.report-credit {
    margin-top: 1.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--hairline);
}

/* First-launch splash (shown in index.html while the WebView/Blazor initialises). */
.app-splash {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-family: var(--brand-font);
    transition: opacity 0.4s ease;
}
.app-splash--hide {
    opacity: 0;
    pointer-events: none;
}
.app-splash__logo {
    height: 200px;
    width: auto;
    max-width: 80vw;
}
.app-splash__title {
    font-size: 40px;
    font-weight: 600;
    color: var(--brand-neutral-dark);
}
.app-splash__version {
    font-size: 14px;
    /* Fixed grey, NOT var(--muted-fg): the splash background is always white (#ffffff),
       but in dark mode --muted-fg flips to near-white and the text vanishes. */
    color: #777777;
    margin-top: -0.25rem;
}
.app-splash__spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--brand-neutral-light);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: app-splash-spin 0.8s linear infinite;
}
@keyframes app-splash-spin {
    to { transform: rotate(360deg); }
}
.app-splash__credit {
    position: absolute;
    bottom: 24px;
    font-size: 13px;
    /* Fixed grey for the same reason as __version — white splash, theme-independent. */
    color: #777777;
}

/* Temporary passwords shown once in the control plane (TempSecret): one click selects the whole value, and the
   selection is an unmistakable solid blue — the theme's default highlight was nearly invisible on the green alert. */
.temp-secret {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border: 1px dashed currentColor;
    border-radius: 4px;
    user-select: all;
    cursor: text;
}
.temp-secret::selection { background: #1565c0; color: #fff; }

/* Control-plane dashboard tiles */
.cp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.cp-tile { padding: 1rem 1.1rem !important; }
.cp-tile__title { font-weight: 600; display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; color: var(--muted-fg); }
.cp-tile__big { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.35rem; }
.cp-tile__line { font-size: 0.875rem; margin: 0.15rem 0; }
.cp-ok { color: #2e7d32; }
.cp-warn { color: #b26a00; }
.cp-bad { color: #c62828; }
.cp-muted { color: var(--muted-fg); }
/* The company's Plan page: plan cards, extra seats, change summary, checkout. */
.pricing__h { font-size: 1.25rem; font-weight: 600; margin: 1.6rem 0 0.5rem; }
.pricing__current { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
    padding: 1rem 1.2rem; border-radius: 10px; border: 1px solid var(--hairline-strong); background: var(--surface-tint); }
.pricing__current .company-status { margin-top: 0.4rem; }
.pricing__current-name { font-size: 1.2rem; font-weight: 600; }
.pricing__current-price { text-align: right; }
.pricing__amount { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.5px; }
.pricing__per { color: var(--muted-fg); }
.pricing__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 0.6rem; }
.pricing__card { position: relative; display: flex; flex-direction: column; padding: 1.3rem 1.2rem 1.1rem; border-radius: 12px;
    border: 1px solid var(--hairline-strong); background: var(--rz-base-background-color, #fff); cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s; }
.pricing__card:hover { border-color: var(--brand-primary); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.pricing__card--chosen { border: 2px solid var(--brand-primary); box-shadow: 0 6px 22px color-mix(in srgb, var(--brand-primary) 25%, transparent); }
.pricing__badge { position: absolute; top: -0.7rem; left: 1rem; padding: 0.1rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
    background: var(--brand-primary); color: var(--brand-on-primary); }
.pricing__name { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.35rem; }
/* The Plan page wears Radian's teal (plans are Radian's). Only the pricing pieces read --brand-primary directly, so this
   recolours card borders, badges, "Choose" buttons and icons, and its action buttons too. */
.plan-radian { --brand-primary: var(--radian-teal); --brand-primary-hover: var(--radian-teal-dark);
    --brand-primary-light: var(--radian-teal-light); --brand-on-primary: #ffffff;
    /* The page's action buttons (Apply changes, Proceed to payment, Save list, Keep current plan, Pay) in Radian teal too. */
    --rz-primary: var(--radian-teal); --rz-primary-light: var(--radian-teal-light);
    --rz-primary-lighter: color-mix(in srgb, var(--radian-teal) 12%, transparent);
    --rz-primary-dark: var(--radian-teal-dark); --rz-primary-darker: color-mix(in srgb, var(--radian-teal) 65%, black);
    --rz-on-primary: #ffffff; --rz-on-primary-light: #ffffff; --rz-on-primary-lighter: var(--radian-teal);
    --rz-on-primary-dark: #ffffff; --rz-on-primary-darker: #ffffff; }
.plan-radian a { color: var(--radian-teal-dark); }

/* Hero: teal → slate blue, with Radian's quarter-circle motif. */
.plan-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
    padding: 1.4rem 1.6rem; margin-bottom: 1.5rem; border-radius: 16px; color: #fff;
    background: linear-gradient(115deg, var(--radian-teal) 0%, var(--radian-teal-dark) 45%, var(--radian-slate-blue) 100%);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--radian-slate-blue) 35%, transparent); }
/* One slice of Radian's quarter-circle, tucked into the bottom-right corner. */
.plan-hero::after { content: ""; position: absolute; pointer-events: none; width: 170px; height: 170px; right: -10px; bottom: -40px;
    background: rgba(255,255,255,.14); border-top-right-radius: 100%; }
.plan-hero > * { position: relative; z-index: 1; }
.plan-hero__logo { height: 40px; padding-right: 1.25rem; border-right: 1px solid rgba(255,255,255,.4); }
.plan-hero__text { flex: 1; min-width: 200px; }
.plan-hero__title { margin: 0; font-size: 1.7rem; font-weight: 700; color: #fff; line-height: 1.15; letter-spacing: -0.3px; }
.plan-hero__sub { font-size: 0.95rem; opacity: 0.92; margin-top: 0.15rem; }
.plan-hero__points { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.6rem; font-size: 0.82rem; font-weight: 500; }
.plan-hero__points span { display: inline-flex; align-items: center; gap: 0.3rem; }
.plan-hero__points .rzi { font-size: 1rem; }
.plan-radian a.plan-hero__link { color: #fff; font-weight: 600; text-decoration: none; padding: 0.4rem 0.9rem;
    border: 1px solid rgba(255,255,255,.6); border-radius: 8px; background: rgba(255,255,255,.08); }
.plan-radian a.plan-hero__link:hover { background: rgba(255,255,255,.18); }

/* Notes on this page: Radian slate blue, not the generic info blue — with room above and below. */
.plan-radian .pricing__note { margin: 1.1rem 0 1.4rem !important; border-radius: 10px !important;
    background: color-mix(in srgb, var(--radian-slate-blue) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--radian-slate-blue) 30%, transparent) !important;
    border-left: 4px solid var(--radian-slate-blue) !important; color: inherit !important; }
.plan-radian .pricing__note .rz-alert-icon, .plan-radian .pricing__note .rzi { color: var(--radian-slate-blue) !important; }
.plan-radian .pricing__note .rz-alert-message, .plan-radian .pricing__note .rz-alert-content { color: inherit !important; }
.plan-radian .pricing__h { color: var(--radian-slate); font-size: 1.4rem; font-weight: 700; margin-top: 1.8rem; }
body.app-dark .plan-radian .pricing__h { color: var(--radian-grey); }
.plan-radian .pricing__current { border-left: 4px solid var(--radian-slate-blue); }

/* Cards: a teal top edge, Radian's quarter-circle mark, prices in the brand ink. */
.plan-radian .pricing__card { border-color: color-mix(in srgb, var(--radian-grey) 80%, transparent); border-top: 4px solid var(--radian-teal);
    padding-top: 1.4rem; }
.plan-radian .pricing__card:hover { border-color: var(--radian-teal); border-top-color: var(--radian-teal);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--radian-teal) 18%, transparent); }
.plan-radian .pricing__card--chosen { border: 2px solid var(--radian-teal); border-top-width: 4px; }
.plan-radian .pricing__name { color: var(--radian-slate-blue); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; font-weight: 700; }
.plan-radian .pricing__amount { color: var(--radian-ink); }
body.app-dark .plan-radian .pricing__amount { color: #fff; }
.pricing__cancel { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--hairline); font-size: 0.9rem; }
.pricing__cancel .btn-link { color: #c62828; font-weight: 600; text-decoration: none; }
.standing-panel .cp-print__facts td:first-child { padding-right: 1rem; color: var(--muted-fg); }

.support-other-request { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin-bottom: 0.5rem;
    padding: 0.4rem 0.6rem; border-radius: 8px; font-size: 0.85rem; background: color-mix(in srgb, #b26a00 10%, transparent); }

/* Account standing banner (payment overdue / view-only / on hold) — shown above every page. */
.standing-banner { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0 0 1rem; padding: 0.7rem 1rem; border-radius: 10px;
    border: 1px solid; font-size: 0.95rem; }
.standing-banner .rzi { font-size: 1.3rem; margin-top: 1px; }
.standing-banner--warn { background: color-mix(in srgb, #b26a00 12%, transparent); border-color: color-mix(in srgb, #b26a00 40%, transparent); }
.standing-banner--warn .rzi { color: #b26a00; }
.standing-banner--stop { background: color-mix(in srgb, #c62828 10%, transparent); border-color: color-mix(in srgb, #c62828 40%, transparent); }
.standing-banner--stop .rzi { color: #c62828; }
body.app-dark .standing-banner--warn .rzi { color: #ffb74d; }
body.app-dark .standing-banner--stop .rzi { color: #ff8a80; }

/* Control plane → Plans: section headings and the inline add forms. */
.plans-h2 { font-size: 1.3rem; font-weight: 600; margin: 1.8rem 0 0.25rem; }
.plans-h3 { font-size: 1.05rem; font-weight: 600; margin: 1.2rem 0 0.4rem; }
.plans-promo-form { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; margin-top: 0.75rem; }
.plans-promo-form label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--muted-fg); margin-bottom: 0.2rem; }
/* Control plane → Plans: one roomy list editor per plan. */
.plan-features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 1rem; max-width: 1200px; }
.plan-features__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.plan-features__head h2 { margin: 0; }
.plan-features__text { width: 100%; min-height: 14rem; font: inherit; line-height: 1.6; padding: 0.6rem 0.75rem; resize: vertical; }
.pricing__per-seat { font-size: 0.8rem; font-weight: 600; color: var(--radian-teal-dark); margin-bottom: 0.4rem; }
.pricing__mark { position: absolute; top: 0.9rem; right: 0.9rem; width: 20px; height: 20px; background: var(--radian-teal);
    border-top-right-radius: 100%; }
.plan-radian .pricing__card--locked { border-top-color: var(--radian-slate-blue);
    background: color-mix(in srgb, var(--radian-slate-blue) 7%, transparent); }
.plan-radian .pricing__card--locked .pricing__badge { background: var(--radian-slate-blue); }
.plan-radian .pricing__card--locked .pricing__mark { background: var(--radian-slate-blue); }
.plan-radian .pricing__card--info { border-top-color: var(--radian-grey); }
.plan-radian .pricing__card--info .pricing__mark { background: var(--radian-grey); }
.plan-radian .pricing__summary { border-left-color: var(--radian-teal); background: color-mix(in srgb, var(--radian-slate-blue) 7%, transparent); }
.plan-radian .pricing__extras { border-color: color-mix(in srgb, var(--radian-grey) 80%, transparent); }
.pricing__card--locked { background: color-mix(in srgb, var(--brand-primary) 6%, transparent); }
.pricing__card--info { cursor: default; opacity: 0.85; }
.pricing__card--info:hover { transform: none; box-shadow: none; }
.pricing__badge--muted { background: var(--radian-grey); color: var(--radian-ink); border: 0; }  /* solid, so the card edge can't show through */
.pricing__choose:disabled { opacity: 0.6; cursor: default; }
.pricing__seats-line { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; padding: 0.45rem 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.pricing__features { list-style: none; padding: 0; margin: 0.6rem 0 1rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.pricing__features li { display: flex; gap: 0.45rem; align-items: flex-start; }
.pricing__features .rzi, .pricing__seats-line .rzi { font-size: 1.1rem; color: var(--brand-primary); }
.pricing__choose { border: 1px solid var(--brand-primary); background: transparent; color: var(--brand-primary); border-radius: 8px;
    padding: 0.5rem; font: inherit; font-weight: 600; cursor: pointer; }
.pricing__card--chosen .pricing__choose { background: var(--brand-primary); color: var(--brand-on-primary); }
.pricing__extras { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem;
    padding: 0.9rem 1.2rem; border-radius: 10px; border: 1px solid var(--hairline-strong); }
.pricing__stepper { display: inline-flex; align-items: center; border: 1px solid var(--hairline-strong); border-radius: 8px; overflow: hidden; }
.pricing__stepper button { border: 0; background: var(--surface-tint); color: inherit; width: 2.4rem; height: 2.2rem; font-size: 1.2rem; cursor: pointer; }
.pricing__stepper button:disabled { opacity: .4; cursor: default; }
.pricing__stepper span { min-width: 3rem; text-align: center; font-weight: 600; }
.pricing__summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem;
    padding: 1rem 1.2rem; border-radius: 10px; border-left: 4px solid var(--brand-primary); background: var(--surface-tint); }
.checkout__label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-fg); margin-bottom: 0.3rem; }
.checkout__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.checkout__box { padding: 1.1rem 1.2rem; border-radius: 12px; border: 1px solid var(--hairline-strong); }
.checkout__lines { width: 100%; border-collapse: collapse; }
.checkout__lines td { padding: 0.35rem 0; }
.checkout__lines .num { text-align: right; white-space: nowrap; }
.checkout__total td { border-top: 1px solid var(--hairline-strong); font-weight: 700; font-size: 1.1rem; padding-top: 0.6rem; }
.checkout__card { min-height: 7rem; border-radius: 8px; border: 1px dashed var(--hairline-strong); padding: 1rem; }
.checkout__card--pending { display: flex; gap: 0.8rem; align-items: flex-start; }
.checkout__card--pending .rzi { font-size: 2rem; color: var(--brand-primary); }
.pricing__summary > div:first-child { flex: 1; min-width: 280px; }
.leaving { margin-top: 0.8rem; padding: 0.7rem 0.9rem; border-radius: 8px; border: 1px solid var(--hairline-strong); background: var(--rz-base-background-color, #fff); }
.leaving__title { margin-bottom: 0.5rem; }
.leaving__person { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; cursor: pointer; }
.leaving__person--off { cursor: default; font-weight: 600; }
.leaving__person--going > span:not(.leaving__tag) { color: var(--muted-fg); text-decoration: line-through; }
.leaving__tag { font-size: 0.75rem; font-weight: 600; padding: 0 0.45rem; border-radius: 999px;
    background: color-mix(in srgb, #c62828 14%, transparent); color: #c62828; }
body.app-dark .leaving__tag { color: #ff8a80; }

/* Control plane → a company → Plan → Promotions from Radian. */
.promos { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--hairline); }
.promos__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.promos__list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.promos__list li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.35rem 0.6rem; border-radius: 6px; background: var(--surface-tint); }
.promos__form { margin-top: 0.6rem; padding: 0.75rem 0.9rem; border: 1px solid var(--hairline-strong); border-radius: 8px; max-width: 640px; }
.promos__kinds { display: inline-flex; border: 1px solid var(--hairline-strong); border-radius: 6px; overflow: hidden; margin-bottom: 0.75rem; }
.promos__kind { border: 0; background: transparent; color: inherit; padding: 0.3rem 0.9rem; cursor: pointer; font: inherit; }
.promos__kind + .promos__kind { border-left: 1px solid var(--hairline-strong); }
.promos__kind--on { background: var(--brand-primary); color: var(--brand-on-primary); }
.promos__fields { display: grid; grid-template-columns: 110px 1fr; gap: 0.5rem 0.75rem; align-items: center; }
.promos__num { width: 6rem; }
.promos__preview { margin-top: 0.7rem; padding: 0.45rem 0.7rem; border-left: 3px solid var(--brand-primary); background: var(--surface-tint); font-weight: 500; }
/* Plans (company Plan page + control plane): ex-GST prices always say "+ GST". */
.plan-gst { font-size: 0.8em; font-weight: 600; color: var(--muted-fg); }
.plan-summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.plan-summary__name { font-size: 1.15rem; font-weight: 600; }
.plan-summary__price { text-align: right; font-size: 1.05rem; }
.plan-change { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--hairline); }
.plan-change__title { font-weight: 600; margin-bottom: 0.5rem; }
.plan-options { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.plan-option { display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start; min-width: 10rem; padding: 0.6rem 0.8rem;
    border: 1px solid var(--hairline-strong); border-radius: 8px; background: transparent; color: inherit; cursor: pointer; text-align: left; font: inherit; }
.plan-option:hover { border-color: var(--brand-primary); }
.plan-option--chosen { border: 2px solid var(--brand-primary); background: var(--rz-primary-lighter); }
.plan-option__name { font-weight: 600; }
.plan-preview { margin-top: 0.75rem; padding: 0.6rem 0.8rem; border-radius: 6px; background: var(--surface-tint); }
.transactions td.num, .transactions th.num { text-align: right; white-space: nowrap; }
/* Control plane → Companies list (read-only; double-click a row to open the company). */
.company-list tbody tr { cursor: pointer; user-select: none; }
.company-list tbody tr:hover td { background: var(--rz-primary-lighter); }
.company-status { display: inline-block; padding: 0 0.45rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; margin: 0 0.25rem 0.15rem 0; white-space: nowrap; }
.company-status--ok { background: color-mix(in srgb, #2e7d32 16%, transparent); color: #2e7d32; }
.company-status--off { background: color-mix(in srgb, #c62828 14%, transparent); color: #c62828; }
.company-status--warn { background: color-mix(in srgb, #b26a00 16%, transparent); color: #b26a00; }
body.app-dark .company-status--ok { color: #81c784; }
body.app-dark .company-status--off { color: #ff8a80; }
body.app-dark .company-status--warn { color: #ffb74d; }
/* Control plane → a company: one framed section per job; two columns on wide screens. */
.company-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1rem; }
.company-section { border: 1px solid var(--hairline-strong); border-radius: 8px; padding: 0.8rem 1.1rem 1rem; min-width: 0; }
.company-section--wide { grid-column: 1 / -1; }
.company-section h2 { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.6rem; }
.company-section--danger { border-color: color-mix(in srgb, #c62828 55%, transparent); }
.company-section--danger h2 { color: #c62828; }
body.app-dark .company-section--danger h2 { color: #ff8a80; }
/* Control plane → Add company: one framed section per group of details. */
.add-company-section { border: 1px solid var(--hairline-strong); border-radius: 6px; padding: 0.6rem 1.1rem 1rem; margin: 0; }
.add-company-section legend { float: none; width: auto; padding: 0 0.4rem; margin: 0; font-size: 0.95rem; font-weight: 600; }
.add-company-grid { display: grid; grid-template-columns: 150px 1fr; gap: 0.6rem 0.75rem; align-items: center; }
/* Support session record (control plane → Support sessions → Print). */
.cp-print__facts { border-collapse: collapse; }
.cp-print__facts td { padding: 2px 16px 2px 0; vertical-align: top; }
.cp-print__facts td:first-child { color: var(--muted-fg); white-space: nowrap; }
.cp-print__timeline td { vertical-align: top; }
@media print {
    /* Paper is white: dark text whatever the screen theme, and the table header repeats on each page. */
    .cp-print, .cp-print td, .cp-print th, .cp-print pre { color: #111 !important; background: #fff !important; }
    .cp-print .cp-muted, .cp-print .cp-print__facts td:first-child { color: #555 !important; }
    .cp-print .cp-ok { color: #2e7d32 !important; }
    .cp-print .cp-bad { color: #c62828 !important; }
    .cp-print thead { display: table-header-group; }
    .cp-print tr { page-break-inside: avoid; }
    body.app-dark, body.app-dark .rz-body, body.app-dark .rz-layout { background: #fff !important; }
}
/* Dark mode: the dashboard tiles sit a shade lighter than the page (#1e1e1e) with a faint edge, so they stand out
   the way the white tiles do in light mode. */
body.app-dark .cp-tile {
    background-color: #2a2a2a !important;
    border: 1px solid rgba(255, 255, 255, 0.10);
}
/* Dark mode: lighter status colours so they stay readable on the dark surface. */
body.app-dark .cp-ok { color: #81c784; }
body.app-dark .cp-warn { color: #ffb74d; }
body.app-dark .cp-bad,
body.app-dark .cp-log__fail td { color: #ff8a80; }
/* Control-plane light/dark button: show the moon in light mode, the sun in dark mode. */
.cp-theme-toggle__light { display: none !important; }
body.app-dark .cp-theme-toggle__light { display: inline-block !important; }
body.app-dark .cp-theme-toggle__dark { display: none !important; }

/* Control-plane security log */
.cp-filters { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; }
.cp-filters label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: var(--muted-fg); }
.cp-filters select.rz-textbox { min-width: 11rem; }
.cp-log td { font-size: 0.85rem; vertical-align: top; }
.cp-log__fail td { color: #c62828; }

/* Conditions / Notes → Item notes: each row opens its item in the BOQ. */
.item-note-row:hover td { background: var(--rz-primary-lighter); }

/* ---- Home dashboard (Components/Pages/Home.razor) ---- */
.dash { padding: 1.25rem 1.5rem 2rem; max-width: 1280px; }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.dash-title { font-size: 1.6rem; font-weight: 600; margin: 0; }
.dash-sub { color: var(--muted-fg); font-size: 0.9rem; margin-top: 0.15rem; }
.dash-section { margin-top: 1.25rem; }
.dash-section__head { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.6rem; border-bottom: 2px solid var(--brand-primary); padding-bottom: 0.3rem; }
.dash-section__head h2 { font-size: 1.15rem; font-weight: 600; margin: 0; color: var(--brand-primary); }
.dash-section__head span { color: var(--muted-fg); font-size: 0.85rem; }
.dash-section__eye { margin-left: auto; color: var(--muted-fg) !important; }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.9rem; margin-bottom: 0.9rem; }
.dash-tile { background: var(--rz-base-background-color, #fff); border: 1px solid var(--hairline-strong); border-left: 5px solid var(--brand-primary);
             border-radius: 8px; padding: 0.8rem 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.dash-tile--won { border-left-color: #2e9d5b; }
.dash-tile--pending { border-left-color: #d9a300; }
.dash-tile__label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-fg); font-weight: 600; }
.dash-tile__value { font-size: 1.75rem; font-weight: 600; line-height: 1.2; margin: 0.15rem 0; }
.dash-tile__note { font-size: 0.85rem; color: var(--muted-fg); }
.dash-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 0.9rem; margin-bottom: 0.9rem; }
.dash-chart { padding: 0.8rem 1rem !important; }
.dash-chart__title { font-weight: 600; margin-bottom: 0.25rem; }
.dash-chart__foot { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.85rem; color: var(--muted-fg); margin-top: 0.25rem; }
.dash-empty { color: var(--muted-fg); font-size: 0.9rem; padding: 0.9rem 1rem; border: 1px dashed var(--hairline-strong); border-radius: 8px; }
@media (max-width: 560px) { .dash-charts { grid-template-columns: 1fr; } }
.dash-tile--target { border-left-color: var(--brand-primary); }
.dash-tile__of { font-size: 0.95rem; font-weight: 500; color: var(--muted-fg); }
.dash-progress { position: relative; height: 10px; border-radius: 5px; background: var(--hairline); margin: 0.35rem 0 0.3rem; overflow: visible; }
.dash-progress__fill { height: 100%; border-radius: 5px; }
.dash-progress__fill.is-ahead { background: #2e9d5b; }
.dash-progress__fill.is-behind { background: #d9a300; }
.dash-progress__pace { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--rz-text-color, #333); opacity: 0.6; }
.dash-recent { padding: 0.8rem 1rem !important; margin-bottom: 0.5rem; }
.dash-recent__table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.dash-recent__table th { text-align: left; font-weight: 600; color: var(--muted-fg); font-size: 0.8rem; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--hairline-strong); }
.dash-recent__table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--hairline); }
.dash-recent__table tr:last-child td { border-bottom: none; }
.dash-recent__table a { color: inherit; text-decoration: none; font-weight: 500; }
.dash-recent__table tr:hover td { background: var(--rz-primary-lighter); }
.dash-status { font-size: 0.8rem; padding: 0.1rem 0.5rem; border-radius: 10px; background: var(--hairline); }
.dash-status--won { background: #e3f4e9; color: #1f7a45; }
.dash-status--lost { background: #fdecea; color: #a8322a; }

/* Dashboard month / year charts: on a narrow chart (a phone) twelve month labels can't fit side by side — show every
   other one (Jul, Sep, Nov …). Wider charts keep all twelve. (TW 2026-11-06: "visual glitch with the dates".) */
.dash-chart--timeline { container-type: inline-size; }
@container (max-width: 420px) {
    .dash-chart--timeline .rz-category-axis g.rz-tick:nth-of-type(even) .rz-tick-text { display: none; }
}

/* Control plane → Plans: draft editors and the "what a company sees" preview. */
.plan-draft { border-left: 3px solid var(--status-warn); }
.plan-draft__fields { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: flex-end; margin: 0.4rem 0; }
.plan-draft__fields label { display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; color: var(--muted-fg); }
.plan-draft__fields label.plan-draft__check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 6px; }
.plan-draft__label { display: block; font-size: 0.85rem; color: var(--muted-fg); margin-top: 0.4rem; }
.plan-preview { position: relative; border: 2px dashed var(--status-warn); border-radius: 8px; padding: 2.2rem 1rem 1rem; }
.plan-preview__tag { position: absolute; top: 0.5rem; left: 0.75rem; font-size: 0.8rem; font-weight: 600; color: var(--status-warn);
    text-transform: uppercase; letter-spacing: 0.4px; }

/* Control plane → Income: two cards side by side, stacking on narrow screens. */
.income-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1rem; max-width: 1400px; }
@media (max-width: 520px) { .income-grid { grid-template-columns: 1fr; } }

/* Report a problem */
.report-form { display: flex; flex-direction: column; gap: 0.85rem; }
.report-form > label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
.report-form__label { font-weight: 500; margin-bottom: 4px; }
.report-form__choice { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 2px 0; cursor: pointer; }

/* Control plane → Bug reports */
.bug-filters { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: flex-end; margin-bottom: 0.75rem; }
.bug-filters label { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; color: var(--muted-fg); }
.bug-filters select { padding: 3px 6px; min-width: 9rem; }
.bug-filters label.bug-filters__check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 6px; font-size: 0.875rem; }
.bug-sev { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.bug-sev--unset { background: #e8e8e8; color: #555; }
.bug-sev--critical { background: #c0392b; color: #fff; }
.bug-sev--high { background: #e67e22; color: #fff; }
.bug-sev--medium { background: #f1c40f; color: #3a3000; }
.bug-sev--qol { background: #d6eaf8; color: #1b4f72; }
.bug-detail { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 1rem; align-items: start; max-width: 1300px; }
@media (max-width: 900px) { .bug-detail { grid-template-columns: 1fr; } }
.bug-triage { display: flex; flex-direction: column; gap: 0.6rem; }
.bug-triage label { display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; color: var(--muted-fg); }
.bug-triage select { padding: 4px 6px; }
.bug-history { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }
.bug-history li { border-left: 3px solid var(--hairline-strong); padding: 2px 0 2px 10px; font-size: 0.875rem; }
.bug-history li.bug-history__note { border-left-color: var(--radian-teal, #00A19B); }

/* Bug reports: the three lists as tabs; whole rows open a report; the company's own view as a small tag. */
.bug-tabs { display: flex; gap: 0.25rem; border-bottom: 2px solid var(--hairline-strong); margin-bottom: 0.75rem; flex-wrap: wrap; }
.bug-tabs__tab { background: none; border: none; padding: 0.5rem 1rem; font: inherit; font-weight: 600; color: var(--muted-fg);
    cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.bug-tabs__tab--on { color: inherit; border-bottom-color: var(--radian-teal, #00A19B); }
.bug-tabs__count { display: inline-block; min-width: 1.4rem; padding: 0 6px; margin-left: 4px; border-radius: 10px;
    background: var(--surface-tint); font-size: 0.8rem; text-align: center; }
.bug-row { cursor: pointer; }
.bug-row:hover td { background: color-mix(in srgb, var(--radian-teal, #00A19B) 8%, transparent); }
.bug-impact { font-size: 0.8rem; white-space: nowrap; }
.bug-impact--blocking { color: #c0392b; font-weight: 600; }
.bug-impact--suggestion { color: var(--muted-fg); }

/* Header Account menu (Users / Plan / Transactions / Security). */
.account-menu { position: relative; margin-right: 0.75rem; }
.account-menu > summary { list-style: none; cursor: pointer; color: var(--brand-header-fg); white-space: nowrap; opacity: 0.9;
    padding: 3px 6px; border-radius: 6px; user-select: none; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary:hover, .account-menu[open] > summary { opacity: 1; background: rgba(255, 255, 255, 0.15); }
.account-menu__panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; z-index: 1000;
    background: var(--rz-base-background-color, #fff); color: var(--rz-text-color, #222); border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); padding: 6px 0; display: flex; flex-direction: column; }
.account-menu__panel a { display: flex; align-items: center; gap: 10px; padding: 8px 16px; color: inherit; text-decoration: none; white-space: nowrap; }
.account-menu__panel a:hover { background: color-mix(in srgb, var(--brand-primary) 12%, transparent); }
.account-menu__panel a .rzi { font-size: 1.1rem; opacity: 0.75; }

/* Report a problem: foot of the left menu, just above the credit (the credit's margin-top:auto pins both down). */
.sidebar-report { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: inherit;
    text-decoration: none; opacity: 0.85; border-top: 1px solid var(--hairline-strong); }
.sidebar-report:hover { opacity: 1; background: color-mix(in srgb, var(--brand-primary) 10%, transparent); }
.sidebar-report + .sidebar-credit { margin-top: 0; }
body.nav-collapsed .sidebar-report { justify-content: center; padding: 10px 0; }
body.nav-collapsed .sidebar-report__text { display: none; }

/* Account pages (sign-in, Security, two-factor set-up, passwords): always a light Radian page, whatever the person's
   light/dark choice — their plain Bootstrap forms were grey-on-grey in dark mode (TW 2026-11-06). */
.account-shell {
    background: #f4f5f7; color: #1a1a1a; color-scheme: light;
    --muted-fg: #666; --hairline: #e4e4e4; --hairline-strong: #999; --surface-tint: #f0f0f0;
    --rz-text-color: #1a1a1a; --rz-text-title-color: #111; --rz-text-secondary-color: #444;
    --rz-base-background-color: #fff;
}
body.app-dark .account-shell .text-muted,
body.app-dark .account-shell .text-secondary,
body.app-dark .account-shell .text-body-secondary { color: #666 !important; }
body.app-dark .account-shell .text-danger,
body.app-dark .account-shell .invalid-feedback,
body.app-dark .account-shell .validation-message { color: #c0392b !important; }
body.app-dark .account-shell .form-label,
body.app-dark .account-shell .form-text { color: #333; }
body.app-dark .account-shell .card { background: #fff; border-color: #e4e4e4; }
body.app-dark .account-shell .table {
    --bs-table-color: #1a1a1a; --bs-table-bg: transparent; --bs-table-border-color: #e4e4e4;
    --bs-table-striped-color: #1a1a1a; --bs-table-hover-color: #1a1a1a; --bs-table-active-color: #1a1a1a;
    color: #1a1a1a;
}
.account-shell main a:not(.btn) { color: #00807b; }

/* Security / password / two-factor pages: buttons in the app's own style (company colour, light + dark) instead of
   Bootstrap's grey outlines (TW 2026-11-06). Also the "Ask Radian to reset" button on the two-factor sign-in page. */
.manage-page .btn, .lost-phone .btn { border-radius: 6px; font-weight: 600; padding: 0.45rem 1.1rem; letter-spacing: 0.2px; }
.manage-page .btn-sm, .lost-phone .btn-sm { padding: 0.3rem 0.8rem; font-size: 0.85rem; }
.manage-page .btn-primary, .lost-phone .btn-primary { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-on-primary); }
.manage-page .btn-primary:hover, .lost-phone .btn-primary:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); }
.manage-page .btn-outline-primary, .lost-phone .btn-outline-primary { border: 1.5px solid var(--brand-primary); color: var(--brand-primary); background: transparent; }
.manage-page .btn-outline-primary:hover, .lost-phone .btn-outline-primary:hover { background: var(--brand-primary); color: var(--brand-on-primary); }
.manage-page .btn-outline-danger { border-width: 1.5px; }
body.app-dark .manage-page .btn-outline-primary { color: color-mix(in srgb, var(--brand-primary) 70%, #fff); border-color: color-mix(in srgb, var(--brand-primary) 70%, #fff); }
body.app-dark .manage-page .btn-outline-primary:hover { color: var(--brand-on-primary); background: var(--brand-primary); }
.manage-page h2 { margin-top: 1.5rem; }

/* Radian's own account pages (sign-in, forced set-up): Radian teal buttons instead of Bootstrap's blue. */
.account-shell .btn-primary { background: var(--radian-teal); border-color: var(--radian-teal); color: #fff; font-weight: 600; border-radius: 6px; }
.account-shell .btn-primary:hover { background: var(--radian-teal-dark); border-color: var(--radian-teal-dark); }
.account-shell .lost-phone .btn-outline-primary { border-color: var(--radian-teal); color: #00807b; }
.account-shell .lost-phone .btn-outline-primary:hover { background: var(--radian-teal); color: #fff; }

/* ---- Control plane → Messages (edit automatic emails and banners) ---- */
.messages { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .messages { grid-template-columns: 1fr; } }
.messages__list { display: flex; flex-direction: column; gap: 0.1rem; border: 1px solid var(--hairline); border-radius: 8px; padding: 0.5rem; }
.messages__group { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-fg); margin: 0.6rem 0.4rem 0.2rem; }
.messages__group:first-child { margin-top: 0.2rem; }
.messages__item { display: flex; align-items: center; gap: 0.45rem; width: 100%; text-align: left; background: none; border: 0;
    border-radius: 6px; padding: 0.3rem 0.45rem; font-size: 0.875rem; color: inherit; cursor: pointer; }
.messages__item:hover { background: var(--surface-tint); }
.messages__item--on { background: var(--surface-tint); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand-primary); }
.messages__item .rzi { font-size: 1rem; color: var(--muted-fg); }
.messages__tag { margin-left: auto; font-size: 0.7rem; font-weight: 600; padding: 0 0.4rem; border-radius: 999px;
    background: var(--brand-primary); color: var(--brand-on-primary); }
.messages__edit { min-width: 0; }
.messages__fields { display: grid; grid-template-columns: 9rem 1fr; gap: 0.4rem 0.75rem; align-items: start; }
.messages__fields > label { padding-top: 0.4rem; font-size: 0.875rem; color: var(--muted-fg); }
@media (max-width: 600px) { .messages__fields { grid-template-columns: 1fr; } .messages__fields > label { padding-top: 0; } }
.messages__fields textarea { font-family: inherit; resize: vertical; }
.messages__fills { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.6rem; font-size: 0.85rem; }
.messages__fill { font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; border: 1px solid var(--hairline-strong);
    border-radius: 999px; padding: 0.05rem 0.55rem; background: none; color: inherit; cursor: pointer; }
.messages__fill:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.messages__h { font-size: 1rem; margin: 1.25rem 0 0.4rem; }
.messages__subject { margin-bottom: 0.35rem; font-size: 0.9rem; }
.messages__frame { width: 100%; height: 520px; border: 1px solid var(--hairline); border-radius: 8px; background: #fff; }

/* ---- Control plane → System: account rules ---- */
.rules-grid { display: grid; grid-template-columns: minmax(14rem, max-content) 1fr; gap: 0.4rem 0.9rem; align-items: center; font-size: 0.9rem; }
.rules-grid > label { color: var(--muted-fg); }
@media (max-width: 600px) { .rules-grid { grid-template-columns: 1fr; } }
.messages__page { border: 1px solid var(--hairline); border-radius: 8px; padding: 1rem 1.25rem; max-width: 640px; }

/* ---- Help page text (editable on control plane → Messages) ---- */
.help-body { line-height: 1.6; }
.help-body .help-h { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.35rem; }
.help-body .help-h:first-child { margin-top: 0; font-size: 1.15rem; }
.help-body .help-p { margin: 0 0 0.6rem; }
.help-body .help-list { margin: 0 0 0.6rem; padding-left: 1.3rem; line-height: 1.7; }
.help-body .help-code { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 6px; padding: 0.6rem 0.8rem; line-height: 1.8; margin: 0 0 0.6rem; }

/* ---- Control plane → Bug reports → Response times ---- */
.bug-kpis { margin-bottom: 0.5rem; }
.bug-kpis__h { font-size: 1rem; margin: 1rem 0 0.4rem; }

/* ---- Transactions: what happened to the money ---- */
.pay-status { font-size: 0.75rem; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 999px; }
.pay-status--paid { background: rgba(0, 161, 155, 0.15); color: var(--radian-teal-dark, #007a75); }
.pay-status--invoiced { background: rgba(240, 160, 0, 0.18); color: #8a5a00; }
body.app-dark .pay-status--invoiced { color: #ffc861; }
body.app-dark .pay-status--paid { color: #5fd6cf; }

/* ---- Early access ending banner: closable until the next sign-in ---- */
.early-access-banner { align-items: flex-start; }
.early-access-banner__close { background: none; border: 0; font-size: 1.25rem; line-height: 1; cursor: pointer; color: inherit; opacity: 0.7; padding: 0 0.25rem; }
.early-access-banner__close:hover { opacity: 1; }

/* Link buttons (TW 2026-11-09): "← Plan", "View companies →" and similar page-to-page links look like the small light
   buttons beside them (REFRESH, SEND A TEST EMAIL) instead of default blue hyperlinks. Neutral colours, so they read on
   any company's accent colour and in dark mode. */
a.rce-linkbtn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.25rem 0.7rem; border-radius: 6px;
    border: 1px solid var(--hairline-strong, #ccc); background: transparent;
    color: var(--rz-text-color, #222); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    text-decoration: none; line-height: 1.4; white-space: nowrap;
}
a.rce-linkbtn:hover, a.rce-linkbtn:focus-visible {
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    border-color: var(--brand-primary); color: var(--rz-text-color, #222);
}

/* Any other link in the control plane's pages (a word in a sentence, a company's address) uses Radian teal, not the
   browser's default blue. Radzen's own controls and the link buttons above keep their look. */
:root.brand-radian .rz-body a:not([class*="rz-"]):not(.rce-linkbtn):not(.btn) {
    color: var(--radian-teal-dark); text-decoration: none;
}
:root.brand-radian .rz-body a:not([class*="rz-"]):not(.rce-linkbtn):not(.btn):hover { text-decoration: underline; }

/* Choose a company: the first (most recently used) company gets a light tint, not Bootstrap's solid blue
   "active" row — the brand link colour made its text unreadable on blue (group test 2026-11-09). */
.list-group-item.rce-pick-first {
    background: color-mix(in srgb, var(--brand-primary) 12%, #fff);
    border-left: 4px solid var(--brand-primary);
}
.list-group-item.rce-pick-first, .list-group-item.rce-pick-first strong { color: #212529; }