/* ================================================================================================
   Varyx Assist — UI layer
   ------------------------------------------------------------------------------------------------
   site.css holds the historical, feature-by-feature styling of the portal.  This file is the
   design system that sits on top of it: one set of tokens, one type scale, one page shell, and
   one set of surfaces/controls that every page shares.

   It is loaded *after* site.css and after the Bootswatch theme, so it has the last word.  New
   pages should style themselves from the tokens and components defined here rather than inventing
   bespoke colours, radii or shadows.

   Order of the file:
     1. Tokens          5. Surfaces and cards   9. Navigation
     2. Typography      6. Controls            10. Feedback
     3. Page shell      7. Tables              11. Utilities
     4. Layout grids    8. Status              12. Dark theme
   ================================================================================================ */

/* ==============================================================================================
   1. TOKENS
   ============================================================================================== */

:root {
    /* --- Brand ----------------------------------------------------------------------------- */
    --vx-accent: #0d9488;
    --vx-accent-strong: #0f766e;
    --vx-accent-bright: #14b8a6;
    --vx-accent-soft: #f0fdfa;
    --vx-accent-line: #99f6e4;
    --vx-accent-ink: #115e59;

    --vx-ink-a: #1d4ed8;
    --vx-ink-a-soft: #eff6ff;
    --vx-ink-a-line: #bfdbfe;

    --vx-navy: #0b1120;
    --vx-navy-2: #111c33;

    /* --- Semantics ------------------------------------------------------------------------- */
    --vx-ok: #059669;
    --vx-ok-soft: #ecfdf5;
    --vx-ok-line: #a7f3d0;

    --vx-warn: #b45309;
    --vx-warn-soft: #fffbeb;
    --vx-warn-line: #fde68a;

    --vx-bad: #dc2626;
    --vx-bad-soft: #fef2f2;
    --vx-bad-line: #fecaca;

    --vx-info: #1d4ed8;
    --vx-info-soft: #eff6ff;
    --vx-info-line: #bfdbfe;

    /* --- Surfaces -------------------------------------------------------------------------- */
    --vx-bg: #f6f8fb;
    --vx-bg-2: #eef2f7;
    --vx-surface: #ffffff;
    --vx-surface-2: #fafbfd;
    --vx-surface-3: #f1f5f9;
    --vx-surface-inset: #f8fafc;

    --vx-border: #e4e9f0;
    --vx-border-strong: #cfd8e3;
    --vx-border-faint: #eef1f6;

    /* --- Text ------------------------------------------------------------------------------ */
    --vx-text: #0f172a;
    --vx-text-2: #475569;
    /* Muted copy has to clear 4.5:1 on the tinted page and inset surfaces, not only on white;
       #7b8a9e only reached 3.5:1 there. */
    --vx-text-3: #5a6a80;
    --vx-text-on-dark: #f8fafc;

    /* Links and inline code are the two places where a single colour cannot serve both themes:
       the dark teal is unreadable on the dark surfaces, and bootstrap's magenta never passed. */
    --vx-link: #0f766e;
    --vx-link-hover: #115e59;
    --vx-code-ink: #9d174d;

    /* --- Elevation ------------------------------------------------------------------------- */
    --vx-e1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --vx-e2: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 10px -2px rgba(15, 23, 42, 0.07);
    --vx-e3: 0 2px 4px rgba(15, 23, 42, 0.04), 0 12px 24px -6px rgba(15, 23, 42, 0.1);
    --vx-e4: 0 4px 8px rgba(15, 23, 42, 0.05), 0 24px 48px -12px rgba(15, 23, 42, 0.16);
    --vx-e-accent: 0 6px 18px -4px rgba(13, 148, 136, 0.32);

    /* --- Radius ---------------------------------------------------------------------------- */
    --vx-r-xs: 6px;
    --vx-r-sm: 8px;
    --vx-r: 12px;
    --vx-r-lg: 16px;
    --vx-r-xl: 22px;
    --vx-r-pill: 999px;

    /* --- Rhythm ---------------------------------------------------------------------------- */
    --vx-gap: 1.25rem;
    --vx-gap-sm: 0.75rem;
    --vx-gap-lg: 1.75rem;
    --vx-page-max: 1520px;
    --vx-reading-max: 68ch;

    /* --- Motion ---------------------------------------------------------------------------- */
    --vx-t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --vx-t: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --vx-t-slow: 260ms cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Focus ----------------------------------------------------------------------------- */
    --vx-ring: 0 0 0 3px rgba(13, 148, 136, 0.22);
    --vx-ring-bad: 0 0 0 3px rgba(220, 38, 38, 0.2);

    /* --- Sidebar --------------------------------------------------------------------------- */
    --vx-sidebar-w: 262px;
    --vx-topbar-h: 64px;
}

/* ==============================================================================================
   2. TYPOGRAPHY
   ============================================================================================== */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--vx-text);
    background: var(--vx-bg);
    font-variant-ligatures: contextual;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--vx-text);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

h1, .h1 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2rem); font-weight: 750; }
h2, .h2 { font-size: 1.375rem; font-weight: 720; }
h3, .h3 { font-size: 1.125rem; font-weight: 700; }
h4, .h4 { font-size: 1rem;     font-weight: 700; }
h5, .h5 { font-size: 0.9375rem; font-weight: 700; }
h6, .h6 { font-size: 0.875rem; font-weight: 700; }

p { margin-bottom: 0.85rem; }
p:last-child { margin-bottom: 0; }

small, .small { font-size: 0.8125rem; }

.lead {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--vx-text-2);
    font-weight: 400;
}

.text-muted,
.text-body-secondary {
    color: var(--vx-text-3) !important;
}

.text-secondary {
    color: var(--vx-text-2) !important;
}

strong, b { font-weight: 650; }

code, kbd, samp, pre, .font-monospace {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
}

/* Bootstrap colours inline code magenta, which fails on the light surfaces and again on the dark
   ones.  Code inside a block keeps the block's own colour. */
code { color: var(--vx-code-ink); }
pre code { color: inherit; }

kbd {
    background: var(--vx-surface-3);
    border: 1px solid var(--vx-border-strong);
    border-bottom-width: 2px;
    border-radius: var(--vx-r-xs);
    color: var(--vx-text-2);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    line-height: 1.3;
}

/* The small uppercase label that introduces a page or a card. */
.vx-eyebrow,
.eyebrow {
    color: var(--vx-accent-strong);
    display: block;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

html[data-varyx-theme="dark"] .vx-eyebrow,
html[data-varyx-theme="dark"] .eyebrow {
    color: var(--vx-accent-bright);
}

/* ==============================================================================================
   3. PAGE SHELL
   Every page is: an optional page head, an optional toolbar, then content.
   ============================================================================================== */

.content {
    box-sizing: border-box;
    padding: 1.35rem 0 3.5rem;
}

.content > * {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--vx-page-max);
    width: 100%;
}

/* --- Page head ----------------------------------------------------------------------------- */

.page-head {
    align-items: flex-end;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    margin-bottom: 1.35rem;
    padding-bottom: 1.15rem;
    border-bottom: 1px solid var(--vx-border-faint);
}

.page-head-text {
    min-width: 0;
}

.page-title,
.page-head h1 {
    color: var(--vx-text);
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
    font-weight: 760;
    letter-spacing: -0.028em;
    line-height: 1.15;
    margin: 0;
}

/* :where() keeps this rule's specificity unchanged while stopping it from matching the eyebrow,
   which would otherwise repaint that label muted grey on every page using PageHeader. */
.page-subtitle,
.page-head > .page-head-text > p:where(:not(.vx-eyebrow):not(.eyebrow)) {
    color: var(--vx-text-3);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0.4rem 0 0;
    max-width: var(--vx-reading-max);
}

.page-title-icon {
    color: var(--vx-accent);
    font-size: 0.78em;
    margin-right: 0.4rem;
    vertical-align: 0.06em;
}

.page-head-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.7rem;
}

.page-head-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Compact head used inside a card, a drawer, or an existing flex toolbar row. */
.page-head.is-tight {
    align-items: flex-start;
    border-bottom: 0;
    flex: 1 1 auto;
    gap: 1rem;
    margin-bottom: 0;
    min-width: 0;
    padding-bottom: 0;
}

/* --- Toolbar ------------------------------------------------------------------------------- */

.vx-toolbar {
    align-items: center;
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    border-radius: var(--vx-r);
    box-shadow: var(--vx-e1);
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: space-between;
    margin-bottom: 1.15rem;
    padding: 0.7rem 0.85rem;
}

.vx-toolbar-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.vx-toolbar .form-control,
.vx-toolbar .form-select {
    min-height: 2.35rem;
    padding-bottom: 0.45rem;
    padding-top: 0.45rem;
}

/* --- Section heading ----------------------------------------------------------------------- */

.vx-section {
    margin-bottom: 1.6rem;
}

.vx-section-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.vx-section-head h2,
.vx-section-head h3 {
    margin: 0;
}

.vx-section-head p {
    color: var(--vx-text-3);
    font-size: 0.85rem;
    margin: 0.25rem 0 0;
}

/* ==============================================================================================
   4. LAYOUT GRIDS
   ============================================================================================== */

.vx-grid {
    display: grid;
    gap: var(--vx-gap);
    grid-template-columns: repeat(var(--vx-cols, 3), minmax(0, 1fr));
}

.vx-grid-2 { --vx-cols: 2; }
.vx-grid-3 { --vx-cols: 3; }
.vx-grid-4 { --vx-cols: 4; }

.vx-split {
    align-items: start;
    display: grid;
    gap: var(--vx-gap-lg);
    grid-template-columns: minmax(0, 1fr) 340px;
}

.vx-split.is-wide {
    grid-template-columns: minmax(0, 1fr) 420px;
}

/* ==============================================================================================
   5. SURFACES AND CARDS
   ============================================================================================== */

html body .card,
html body .modal-content,
html body .dropdown-menu,
html body .offcanvas,
html body .popover {
    background: var(--vx-surface) !important;
    border: 1px solid var(--vx-border) !important;
    border-radius: var(--vx-r) !important;
    box-shadow: var(--vx-e2) !important;
    color: var(--vx-text) !important;
}

html body .card {
    overflow: hidden;
    transition: border-color var(--vx-t), box-shadow var(--vx-t), transform var(--vx-t);
}

/* A card that reacts to the pointer. Add .is-interactive, or use it in a grid of links. */
html body .card.is-interactive,
html body .vx-tile {
    cursor: pointer;
}

html body .card.is-interactive:hover,
html body .vx-tile:hover {
    border-color: var(--vx-accent-line) !important;
    box-shadow: var(--vx-e3) !important;
    transform: translateY(-2px);
}

html body .card-header {
    align-items: center;
    background: var(--vx-surface-2) !important;
    border-bottom: 1px solid var(--vx-border) !important;
    color: var(--vx-text) !important;
    display: flex;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    gap: 0.65rem;
    letter-spacing: -0.012em;
    min-height: 3rem;
    padding: 0.8rem 1.15rem !important;
}

html body .card-header > *:last-child {
    margin-left: auto;
}

html body .card-body {
    background: transparent !important;
    color: var(--vx-text) !important;
    padding: 1.15rem !important;
}

html body .card-footer {
    background: var(--vx-surface-2) !important;
    border-top: 1px solid var(--vx-border) !important;
    color: var(--vx-text-3) !important;
    padding: 0.8rem 1.15rem !important;
}

/* --- Panel: a flat surface with no hover behaviour ---------------------------------------- */

.vx-panel {
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    border-radius: var(--vx-r);
    box-shadow: var(--vx-e1);
    padding: var(--vx-gap);
}

.vx-panel.is-flush { padding: 0; overflow: hidden; }

.vx-panel.is-inset {
    background: var(--vx-surface-inset);
    box-shadow: none;
}

/* --- Tile: a link-sized card used in pickers and overview grids ---------------------------- */

.vx-tile {
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    border-radius: var(--vx-r);
    box-shadow: var(--vx-e1);
    color: var(--vx-text);
    display: block;
    padding: 1.05rem 1.15rem;
    text-decoration: none;
    transition: border-color var(--vx-t), box-shadow var(--vx-t), transform var(--vx-t);
}

.vx-tile:hover {
    color: var(--vx-text);
    text-decoration: none;
}

.vx-tile-icon {
    align-items: center;
    background: var(--vx-accent-soft);
    border-radius: var(--vx-r-sm);
    color: var(--vx-accent-strong);
    display: inline-flex;
    font-size: 1.05rem;
    height: 2.5rem;
    justify-content: center;
    margin-bottom: 0.75rem;
    width: 2.5rem;
}

.vx-tile-title {
    color: var(--vx-text);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.vx-tile-text {
    color: var(--vx-text-3);
    font-size: 0.83rem;
    line-height: 1.5;
    margin-top: 0.25rem;
}

/* --- Stat card ----------------------------------------------------------------------------- */

.vx-stat {
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    border-radius: var(--vx-r);
    box-shadow: var(--vx-e1);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 116px;
    padding: 1.05rem 1.15rem;
    position: relative;
    transition: border-color var(--vx-t), box-shadow var(--vx-t);
}

.vx-stat:hover { box-shadow: var(--vx-e2); }

.vx-stat-label {
    align-items: center;
    color: var(--vx-text-3);
    display: flex;
    font-size: 0.75rem;
    font-weight: 700;
    gap: 0.4rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vx-stat-label .oi { color: var(--vx-accent); font-size: 0.85rem; }

.vx-stat-value {
    color: var(--vx-text);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-variant-numeric: tabular-nums;
    font-weight: 760;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.vx-stat-note {
    color: var(--vx-text-3);
    font-size: 0.8rem;
    margin-top: auto;
}

.vx-stat-note.is-up .oi { color: var(--vx-ok); }
.vx-stat-note.is-down .oi { color: var(--vx-bad); }

.vx-stat.is-accent {
    background: linear-gradient(140deg, var(--vx-accent-strong), var(--vx-accent));
    border-color: transparent;
    color: #fff;
}

.vx-stat.is-accent .vx-stat-label,
.vx-stat.is-accent .vx-stat-label .oi,
.vx-stat.is-accent .vx-stat-value,
.vx-stat.is-accent .vx-stat-note {
    color: #fff;
}

.vx-stat.is-accent .vx-stat-label { opacity: 0.85; }
.vx-stat.is-accent .vx-stat-note { opacity: 0.85; }

/* --- Hero band: the dark gradient banner used by landing/overview pages -------------------- */

.vx-hero {
    background:
        radial-gradient(ellipse at 88% 15%, rgba(20, 184, 166, 0.34), transparent 58%),
        linear-gradient(135deg, var(--vx-navy) 0%, var(--vx-navy-2) 52%, var(--vx-accent-strong) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--vx-r-lg);
    box-shadow: var(--vx-e4);
    color: var(--vx-text-on-dark);
    display: flex;
    gap: 1.75rem;
    justify-content: space-between;
    margin-bottom: var(--vx-gap);
    min-height: 168px;
    overflow: hidden;
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    position: relative;
}

.vx-hero h1 {
    color: var(--vx-text-on-dark);
    font-size: clamp(1.5rem, 1.1rem + 2vw, 2.35rem);
    font-weight: 780;
    letter-spacing: -0.03em;
    margin: 0 0 0.4rem;
}

.vx-hero p {
    color: rgba(248, 250, 252, 0.76);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    max-width: var(--vx-reading-max);
}

.vx-hero .eyebrow,
.vx-hero .vx-eyebrow { color: var(--vx-accent-bright); }

.vx-hero-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* --- Existing banner styles are folded into the same look -------------------------------- */
/* SectionOverview, ClientSetup and the public landing page each grew their own hero. Rather than
   rewrite those pages, they inherit the shared treatment here, so every banner in the product
   reads as the same component. */

html body .section-overview-head,
html body .setup-hero,
html body .public-hero {
    align-items: center;
    background:
        radial-gradient(ellipse at 88% 15%, rgba(20, 184, 166, 0.32), transparent 58%),
        linear-gradient(135deg, var(--vx-navy) 0%, var(--vx-navy-2) 52%, var(--vx-accent-strong) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--vx-r-lg) !important;
    box-shadow: var(--vx-e4) !important;
    color: var(--vx-text-on-dark) !important;
    display: flex;
    gap: 1.75rem;
    justify-content: space-between;
    margin-bottom: var(--vx-gap) !important;
    overflow: hidden;
    padding: clamp(1.5rem, 2.5vw, 2.25rem) !important;
    position: relative;
}

html body .section-overview-head { min-height: 150px; }
html body .setup-hero { min-height: 168px; }
html body .public-hero { min-height: min(460px, calc(100vh - 200px)) !important; }

html body .section-overview-head h1,
html body .setup-hero h1,
html body .public-hero h1 {
    color: var(--vx-text-on-dark) !important;
    font-size: clamp(1.45rem, 1.1rem + 1.9vw, 2.3rem) !important;
    font-weight: 780 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.14 !important;
    margin-bottom: 0.45rem !important;
}

html body .section-overview-head p,
html body .setup-hero p,
html body .public-hero p {
    color: rgba(248, 250, 252, 0.76) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 0;
    max-width: var(--vx-reading-max);
}

html body .section-overview-head .eyebrow,
html body .setup-hero .eyebrow,
html body .public-hero .eyebrow {
    color: var(--vx-accent-bright) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.11em !important;
    margin-bottom: 0.6rem !important;
}

/* The old "choose an area below" note becomes a translucent chip on the banner. */
html body .section-overview-note {
    align-items: center;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: var(--vx-r-sm) !important;
    color: rgba(248, 250, 252, 0.85) !important;
    display: flex;
    flex: 0 0 auto;
    font-size: 0.82rem;
    gap: 0.55rem;
    max-width: 22rem;
    padding: 0.7rem 0.85rem;
}

/* Buttons that sit on the dark banner need light outlines to stay visible. */
html body .section-overview-head .btn-outline-secondary,
html body .setup-hero .btn-outline-secondary,
html body .public-hero .btn-outline-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: var(--vx-text-on-dark) !important;
}

html body .section-overview-head .btn-outline-secondary:hover,
html body .setup-hero .btn-outline-secondary:hover,
html body .public-hero .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #fff !important;
}

@media (max-width: 860px) {
    html body .section-overview-head,
    html body .setup-hero,
    html body .public-hero {
        align-items: flex-start;
        display: block;
        min-height: 0;
        padding: 1.5rem !important;
    }

    html body .setup-hero-actions,
    html body .section-overview-note {
        justify-content: flex-start;
        margin-top: 1.1rem;
    }
}

/* --- Divider ------------------------------------------------------------------------------- */

.vx-divider {
    border: 0;
    border-top: 1px solid var(--vx-border-faint);
    margin: 1.15rem 0;
}

html body hr {
    border-color: var(--vx-border-faint);
    opacity: 1;
}

/* ==============================================================================================
   6. CONTROLS
   ============================================================================================== */

/* --- Buttons ------------------------------------------------------------------------------- */

html body .btn {
    align-items: center;
    border-radius: var(--vx-r-sm) !important;
    display: inline-flex;
    font-size: 0.85rem !important;
    font-weight: 640 !important;
    gap: 0.4rem;
    justify-content: center;
    letter-spacing: -0.01em;
    line-height: 1.35;
    padding: 0.5rem 1rem !important;
    transition: background-color var(--vx-t), border-color var(--vx-t), box-shadow var(--vx-t), color var(--vx-t), transform var(--vx-t) !important;
    white-space: nowrap;
}

html body .btn:focus-visible {
    box-shadow: var(--vx-ring) !important;
    outline: none !important;
}

html body .btn-sm {
    border-radius: var(--vx-r-xs) !important;
    font-size: 0.79rem !important;
    gap: 0.3rem;
    padding: 0.32rem 0.7rem !important;
}

html body .btn-lg {
    border-radius: var(--vx-r) !important;
    font-size: 0.95rem !important;
    padding: 0.7rem 1.4rem !important;
}

html body .btn-primary {
    background: linear-gradient(180deg, var(--vx-accent) 0%, var(--vx-accent-strong) 100%) !important;
    border: 1px solid var(--vx-accent-strong) !important;
    box-shadow: 0 1px 2px rgba(13, 148, 136, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
}

html body .btn-primary:hover,
html body .btn-primary:focus {
    background: linear-gradient(180deg, var(--vx-accent-bright) 0%, var(--vx-accent) 100%) !important;
    box-shadow: var(--vx-e-accent), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

html body .btn-primary:active {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.22) !important;
    transform: translateY(0);
}

html body .btn-secondary,
html body .btn-outline-primary,
html body .btn-outline-secondary,
html body .btn-outline-dark {
    background: var(--vx-surface) !important;
    border: 1px solid var(--vx-border-strong) !important;
    box-shadow: var(--vx-e1) !important;
    color: var(--vx-text-2) !important;
}

html body .btn-secondary:hover,
html body .btn-outline-primary:hover,
html body .btn-outline-secondary:hover,
html body .btn-outline-dark:hover {
    background: var(--vx-surface-3) !important;
    border-color: var(--vx-accent-line) !important;
    color: var(--vx-accent-strong) !important;
    transform: translateY(-1px);
}

html body .btn-danger {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
    border: 1px solid #dc2626 !important;
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
}

html body .btn-danger:hover {
    box-shadow: 0 6px 18px -4px rgba(220, 38, 38, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

html body .btn-link {
    color: var(--vx-accent-strong) !important;
    font-weight: 620 !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

html body .btn-link:hover { color: var(--vx-accent) !important; }

html body .btn:disabled,
html body .btn.disabled {
    box-shadow: none !important;
    cursor: not-allowed;
    filter: grayscale(0.2);
    opacity: 0.55;
    transform: none !important;
}

/* A button group reads as one control. */
html body .btn-group > .btn { box-shadow: none !important; }

/* --- Links --------------------------------------------------------------------------------- */

a, .btn-link { transition: color var(--vx-t-fast); }

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
    color: var(--vx-link);
    font-weight: 550;
    text-decoration: none;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
    color: var(--vx-link-hover);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Visible keyboard focus everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible {
    border-radius: var(--vx-r-xs);
    box-shadow: var(--vx-ring) !important;
    outline: 2px solid transparent !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Forms --------------------------------------------------------------------------------- */

.form-label,
.col-form-label {
    color: var(--vx-text-2);
    font-size: 0.79rem;
    font-weight: 680;
    letter-spacing: -0.005em;
    margin-bottom: 0.35rem;
}

html body .form-control,
html body .form-select,
html body select,
html body textarea,
html body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not(.auth-field-input) {
    background-color: var(--vx-surface) !important;
    border: 1px solid var(--vx-border-strong) !important;
    border-radius: var(--vx-r-sm) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    color: var(--vx-text) !important;
    font-size: 0.875rem !important;
    min-height: 2.55rem;
    padding: 0.55rem 0.8rem !important;
    transition: border-color var(--vx-t-fast), box-shadow var(--vx-t-fast), background-color var(--vx-t-fast) !important;
}

html body .form-control:focus,
html body .form-select:focus,
html body select:focus,
html body textarea:focus,
html body input:not([type="checkbox"]):not([type="radio"]):focus {
    background-color: var(--vx-surface) !important;
    border-color: var(--vx-accent) !important;
    box-shadow: var(--vx-ring) !important;
    color: var(--vx-text) !important;
    outline: none !important;
}

html body .form-control::placeholder,
html body textarea::placeholder {
    color: var(--vx-text-3) !important;
    opacity: 1;
}

html body .form-control:disabled,
html body .form-select:disabled,
html body input:disabled,
html body textarea:disabled,
html body input[readonly],
html body textarea[readonly] {
    background-color: var(--vx-surface-3) !important;
    border-color: var(--vx-border) !important;
    color: var(--vx-text-3) !important;
    cursor: not-allowed !important;
}

html body .form-text { color: var(--vx-text-3) !important; font-size: 0.79rem; }

html body .input-group-text {
    background: var(--vx-surface-3) !important;
    border: 1px solid var(--vx-border-strong) !important;
    color: var(--vx-text-3) !important;
    font-size: 0.83rem;
    font-weight: 600;
}

html body .form-check-input {
    background-color: var(--vx-surface) !important;
    border: 1.5px solid var(--vx-border-strong) !important;
    height: 1.15em;
    margin-top: 0.18em;
    width: 1.15em;
}

html body .form-check-input:checked {
    background-color: var(--vx-accent) !important;
    border-color: var(--vx-accent) !important;
}

html body .form-check-input:focus {
    border-color: var(--vx-accent) !important;
    box-shadow: var(--vx-ring) !important;
}

html body .form-check-label { color: var(--vx-text-2); font-size: 0.86rem; }

html body .form-switch .form-check-input { width: 2.2em; height: 1.15em; }

/* Validation. */
html body .validation-message,
html body .validation-errors,
html body .text-danger {
    color: var(--vx-bad) !important;
    font-size: 0.79rem;
    font-weight: 560;
}

html body .valid.modified:not([type=checkbox]) {
    border-color: var(--vx-ok) !important;
    outline: none !important;
}

html body .invalid {
    border-color: var(--vx-bad) !important;
    box-shadow: var(--vx-ring-bad) !important;
    outline: none !important;
}

html body .validation-summary-errors {
    background: var(--vx-bad-soft);
    border: 1px solid var(--vx-bad-line);
    border-radius: var(--vx-r-sm);
    color: var(--vx-bad) !important;
    font-size: 0.84rem;
    padding: 0.7rem 0.9rem;
}

html body .validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }

/* --- Dropdowns ----------------------------------------------------------------------------- */

html body .dropdown-menu {
    box-shadow: var(--vx-e3) !important;
    min-width: 12rem;
    padding: 0.3rem !important;
}

html body .dropdown-item {
    align-items: center;
    border-radius: var(--vx-r-xs);
    color: var(--vx-text-2) !important;
    display: flex;
    font-size: 0.85rem;
    font-weight: 560;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem !important;
    transition: background-color var(--vx-t-fast), color var(--vx-t-fast);
}

html body .dropdown-item:hover,
html body .dropdown-item:focus {
    background: var(--vx-accent-soft) !important;
    color: var(--vx-accent-ink) !important;
}

html body .dropdown-item.active,
html body .dropdown-item:active {
    background: var(--vx-accent) !important;
    color: #fff !important;
}

html body .dropdown-divider { border-color: var(--vx-border-faint) !important; margin: 0.3rem 0 !important; }

html body .dropdown-header {
    color: var(--vx-text-3) !important;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* --- Modals and drawers -------------------------------------------------------------------- */

html body .modal-content {
    box-shadow: var(--vx-e4) !important;
    overflow: hidden;
}

html body .modal-header {
    align-items: center;
    background: var(--vx-surface-2) !important;
    border-bottom: 1px solid var(--vx-border) !important;
    color: var(--vx-text) !important;
    gap: 0.75rem;
    padding: 1rem 1.25rem !important;
}

html body .modal-title { font-size: 1.02rem; font-weight: 720; letter-spacing: -0.018em; }

html body .modal-body { color: var(--vx-text) !important; padding: 1.25rem !important; }

html body .modal-footer {
    background: var(--vx-surface-2) !important;
    border-top: 1px solid var(--vx-border) !important;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem !important;
}

html body .modal-backdrop.show { opacity: 0.55; }

html body .modal-dialog {
    margin: 1.5rem auto;
    max-width: min(760px, calc(100vw - 2rem));
}

html body .modal-dialog.modal-lg { max-width: min(1040px, calc(100vw - 2rem)); }

html body .modal-dialog.modal-fullscreen { max-width: none; margin: 0; }

/* --- Tabs and pills ------------------------------------------------------------------------ */

html body .nav-tabs {
    border-bottom: 1px solid var(--vx-border);
    gap: 0.15rem;
}

html body .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--vx-text-3) !important;
    font-size: 0.85rem;
    font-weight: 620;
    padding: 0.6rem 0.85rem;
    transition: color var(--vx-t-fast), border-color var(--vx-t-fast);
}

html body .nav-tabs .nav-link:hover {
    border-bottom-color: var(--vx-border-strong);
    color: var(--vx-text) !important;
}

html body .nav-tabs .nav-link.active {
    background: transparent !important;
    border-bottom-color: var(--vx-accent) !important;
    color: var(--vx-accent-strong) !important;
}

html body .nav-pills .nav-link {
    border-radius: var(--vx-r-sm);
    color: var(--vx-text-2) !important;
    font-size: 0.86rem;
    font-weight: 620;
    padding: 0.5rem 0.8rem;
    transition: background-color var(--vx-t-fast), color var(--vx-t-fast);
}

html body .nav-pills .nav-link:hover {
    background: var(--vx-surface-3);
    color: var(--vx-text) !important;
}

html body .nav-pills .nav-link.active {
    background: var(--vx-accent-soft) !important;
    color: var(--vx-accent-ink) !important;
    box-shadow: inset 0 0 0 1px var(--vx-accent-line);
}

/* --- Pagination ---------------------------------------------------------------------------- */

html body .pagination { gap: 0.25rem; }

html body .page-link {
    background: var(--vx-surface) !important;
    border: 1px solid var(--vx-border) !important;
    border-radius: var(--vx-r-xs) !important;
    color: var(--vx-text-2) !important;
    font-size: 0.83rem;
    font-weight: 600;
    min-width: 2.2rem;
    padding: 0.4rem 0.6rem !important;
    text-align: center;
}

html body .page-link:hover {
    background: var(--vx-accent-soft) !important;
    border-color: var(--vx-accent-line) !important;
    color: var(--vx-accent-ink) !important;
}

html body .page-item.active .page-link {
    background: var(--vx-accent) !important;
    border-color: var(--vx-accent) !important;
    color: #fff !important;
}

html body .page-item.disabled .page-link {
    background: var(--vx-surface-2) !important;
    color: var(--vx-text-3) !important;
    opacity: 0.6;
}

/* --- Progress ------------------------------------------------------------------------------ */

html body .progress {
    background: var(--vx-surface-3);
    border-radius: var(--vx-r-pill);
    height: 0.5rem;
}

html body .progress-bar { background: var(--vx-accent); }

/* --- Endpoint policy choices ----------------------------------------------------------------- */
/* The USB storage and uninstall-password panels present three or fewer consequential choices.
   Each is a full-width row rather than a bare radio button, because "record only" and "block"
   are not self-explanatory and the wrong pick leaves a machine nobody can put a memory stick in. */

.usb-mode-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.usb-mode-option {
    align-items: flex-start;
    background: var(--vx-surface-2);
    border: 1px solid var(--vx-border);
    border-radius: var(--vx-r);
    cursor: pointer;
    display: flex;
    gap: 0.75rem;
    margin: 0;
    min-height: 3.25rem;
    padding: 0.8rem 0.9rem;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.usb-mode-option:hover { border-color: var(--vx-border-strong); }

.usb-mode-option:focus-within {
    border-color: var(--vx-accent);
    box-shadow: var(--vx-ring);
}

.usb-mode-option.selected {
    background: var(--vx-accent-soft);
    border-color: var(--vx-accent-line);
}

.usb-mode-option .form-check-input {
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

.usb-mode-option:has(input:disabled) {
    cursor: default;
    opacity: 0.72;
}

.usb-mode-text {
    color: var(--vx-text);
    cursor: inherit;
    line-height: 1.45;
    margin: 0;
}

.usb-mode-text .text-muted { color: var(--vx-text-3) !important; }

/* ==============================================================================================
   7. TABLES
   ============================================================================================== */

html body .table-responsive {
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    border-radius: var(--vx-r);
    box-shadow: var(--vx-e1);
    margin-bottom: var(--vx-gap);
    max-width: 100%;
    /* Bootstrap's `.table-responsive` is `overflow-x: auto`, which is what lets a wide table scroll
       instead of being clipped. `overflow: hidden auto` re-hid the x axis, so on a phone the last
       columns of every data table were unreachable. Keep the y axis at its computed default so
       row-attached menus and tooltips are not clipped either. */
    overflow-x: auto;
}

html body .table {
    border-color: var(--vx-border);
    color: var(--vx-text) !important;
    margin-bottom: 0 !important;
    --bs-table-bg: transparent;
    --bs-table-color: var(--vx-text);
    --bs-table-border-color: var(--vx-border-faint);
    --bs-table-striped-bg: var(--vx-surface-2);
    --bs-table-striped-color: var(--vx-text);
    --bs-table-hover-bg: var(--vx-accent-soft);
    --bs-table-hover-color: var(--vx-text);
}

html body .table > :not(caption) > * > * {
    background-color: transparent !important;
    border-bottom: 1px solid var(--vx-border-faint) !important;
    box-shadow: none !important;
    color: var(--vx-text) !important;
    padding: 0.72rem 1rem !important;
    vertical-align: middle;
    white-space: normal;
}

html body .table thead th,
html body .table > thead > tr > th {
    background-color: var(--vx-surface-2) !important;
    border-bottom: 1px solid var(--vx-border) !important;
    color: var(--vx-text-3) !important;
    font-size: 0.71rem !important;
    font-weight: 720 !important;
    letter-spacing: 0.055em;
    padding: 0.7rem 1rem !important;
    text-transform: uppercase;
    white-space: nowrap;
}

html body .table tbody tr {
    background-color: transparent !important;
    transition: background-color var(--vx-t-fast);
}

html body .table tbody tr:hover > * {
    background-color: var(--vx-accent-soft) !important;
    color: var(--vx-text) !important;
}

html body .table tbody tr:last-child > * { border-bottom: 0 !important; }

html body .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--vx-surface-2) !important;
    color: var(--vx-text) !important;
}

html body .table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: transparent !important;
    color: var(--vx-text) !important;
}

html body .table td.num,
html body .table th.num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

html body .table-sm > :not(caption) > * > * { padding: 0.45rem 0.7rem !important; }

/* ==============================================================================================
   8. STATUS
   ============================================================================================== */

html body .badge {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--vx-r-pill) !important;
    display: inline-flex;
    font-size: 0.735rem !important;
    font-weight: 640 !important;
    gap: 0.32rem;
    letter-spacing: 0.008em;
    line-height: 1.35;
    padding: 0.22rem 0.62rem !important;
    white-space: nowrap;
}

html body .badge.bg-success,
html body .badge.text-bg-success {
    background-color: var(--vx-ok-soft) !important;
    border-color: var(--vx-ok-line) !important;
    color: var(--vx-ok) !important;
}

html body .badge.bg-warning,
html body .badge.text-bg-warning {
    background-color: var(--vx-warn-soft) !important;
    border-color: var(--vx-warn-line) !important;
    color: #92400e !important;
}

html body .badge.bg-danger,
html body .badge.text-bg-danger {
    background-color: var(--vx-bad-soft) !important;
    border-color: var(--vx-bad-line) !important;
    color: #b91c1c !important;
}

html body .badge.bg-primary,
html body .badge.bg-info,
html body .badge.text-bg-primary,
html body .badge.text-bg-info {
    background-color: var(--vx-info-soft) !important;
    border-color: var(--vx-info-line) !important;
    color: var(--vx-info) !important;
}

html body .badge.bg-secondary,
html body .badge.text-bg-secondary,
html body .badge.bg-light {
    background-color: var(--vx-surface-3) !important;
    border-color: var(--vx-border) !important;
    color: var(--vx-text-2) !important;
}

html body .badge.bg-dark {
    background-color: var(--vx-navy-2) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* --- Alerts -------------------------------------------------------------------------------- */

html body .alert {
    align-items: flex-start;
    border: 1px solid transparent;
    border-radius: var(--vx-r-sm);
    display: flex;
    font-size: 0.855rem;
    gap: 0.6rem;
    line-height: 1.55;
    padding: 0.8rem 1rem;
}

html body .alert > .oi { font-size: 1rem; line-height: 1.4; margin-top: 0.05rem; }
html body .alert > div { min-width: 0; }

html body .alert-info {
    background: var(--vx-info-soft) !important;
    border-color: var(--vx-info-line) !important;
    color: #1e40af !important;
}

html body .alert-success {
    background: var(--vx-ok-soft) !important;
    border-color: var(--vx-ok-line) !important;
    color: #065f46 !important;
}

html body .alert-danger,
html body .alert-error {
    background: var(--vx-bad-soft) !important;
    border-color: var(--vx-bad-line) !important;
    color: #991b1b !important;
}

html body .alert-warning {
    background: var(--vx-warn-soft) !important;
    border-color: var(--vx-warn-line) !important;
    color: #92400e !important;
}

/* ==============================================================================================
   9. NAVIGATION
   ============================================================================================== */

html body .breadcrumb {
    align-items: center;
    background: transparent;
    font-size: 0.79rem;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    padding: 0;
}

html body .breadcrumb-item { color: var(--vx-text-3); }
html body .breadcrumb-item.active { color: var(--vx-text-2); font-weight: 600; }
html body .breadcrumb-item + .breadcrumb-item::before { color: var(--vx-border-strong); content: '›'; }

/* --- Error state ---------------------------------------------------------------------------- */

.vx-error-state {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 640px;
    padding: clamp(2rem, 5vw, 4rem) 1rem;
    text-align: center;
}

.vx-error-icon {
    align-items: center;
    background: var(--vx-warn-soft);
    border: 1px solid var(--vx-warn-line);
    border-radius: var(--vx-r-lg);
    color: #b45309;
    display: inline-flex;
    font-size: 1.6rem;
    height: 3.4rem;
    justify-content: center;
    margin-bottom: 1.25rem;
    width: 3.4rem;
}

.vx-error-state h1 {
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
    font-weight: 760;
    letter-spacing: -0.028em;
    margin-bottom: 0.7rem;
}

.vx-error-state > p {
    color: var(--vx-text-3);
    font-size: 0.93rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

.vx-error-ref {
    align-items: center;
    background: var(--vx-surface-inset);
    border: 1px solid var(--vx-border);
    border-radius: var(--vx-r-sm);
    color: var(--vx-text-3) !important;
    display: inline-flex;
    font-size: 0.8rem !important;
    gap: 0.6rem;
    margin-bottom: 1.5rem !important;
    padding: 0.5rem 0.9rem;
}

.vx-error-ref span {
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.68rem;
}

.vx-error-ref code { color: var(--vx-text-2); }

.vx-error-details {
    border-top: 1px solid var(--vx-border-faint);
    color: var(--vx-text-3);
    font-size: 0.83rem;
    margin-top: 2rem;
    padding-top: 1.1rem;
    text-align: left;
    width: 100%;
}

.vx-error-details summary {
    color: var(--vx-text-2);
    cursor: pointer;
    font-weight: 620;
    padding: 0.2rem 0;
}

.vx-error-details p {
    line-height: 1.6;
    margin: 0.7rem 0 0;
}

.vx-error-details code {
    background: var(--vx-surface-3);
    border-radius: var(--vx-r-xs);
    padding: 0.1rem 0.35rem;
}

/* --- Empty state --------------------------------------------------------------------------- */

.vx-empty {
    align-items: center;
    background:
        repeating-linear-gradient(135deg, transparent 0 9px, rgba(148, 163, 184, 0.045) 9px 18px),
        var(--vx-surface-2);
    border: 1px dashed var(--vx-border-strong);
    border-radius: var(--vx-r);
    color: var(--vx-text-3);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    justify-content: center;
    min-height: 220px;
    padding: 2rem 1.5rem;
    text-align: center;
}

.vx-empty > .oi {
    align-items: center;
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    border-radius: var(--vx-r-pill);
    color: var(--vx-accent);
    display: inline-flex;
    font-size: 1.35rem;
    height: 3.1rem;
    justify-content: center;
    width: 3.1rem;
}

.vx-empty-title {
    color: var(--vx-text);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.vx-empty-text {
    font-size: 0.85rem;
    line-height: 1.55;
    max-width: 46ch;
}

html body .empty-state {
    align-items: center;
    background: var(--vx-surface-2);
    border: 1px dashed var(--vx-border-strong);
    border-radius: var(--vx-r);
    color: var(--vx-text-3);
    display: flex;
    flex-direction: column;
    font-weight: 500;
    gap: 0.5rem;
    justify-content: center;
    min-height: 240px;
    padding: 1.5rem;
    text-align: center;
}

/* ==============================================================================================
   10. FEEDBACK
   ============================================================================================== */

html body .spinner-border,
html body .spinner-grow { color: var(--vx-accent); }

html body .toast {
    background: var(--vx-surface) !important;
    border: 1px solid var(--vx-border) !important;
    border-radius: var(--vx-r) !important;
    box-shadow: var(--vx-e4) !important;
    color: var(--vx-text) !important;
}

html body .list-group {
    border-radius: var(--vx-r);
    overflow: hidden;
}

html body .list-group-item {
    background: var(--vx-surface) !important;
    border-color: var(--vx-border-faint) !important;
    color: var(--vx-text) !important;
    padding: 0.8rem 1rem;
}

html body .list-group-item-action:hover {
    background: var(--vx-accent-soft) !important;
    color: var(--vx-text) !important;
}

html body .list-group-item.active {
    background: var(--vx-accent) !important;
    border-color: var(--vx-accent) !important;
    color: #fff !important;
}

/* ==============================================================================================
   11. UTILITIES
   ============================================================================================== */

.vx-stack { display: flex; flex-direction: column; gap: var(--vx-gap-sm); }
.vx-row   { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vx-gap-sm); }
.vx-spread { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vx-gap-sm); justify-content: space-between; }
.vx-fill { flex: 1 1 auto; min-width: 0; }

.vx-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.vx-tnum { font-variant-numeric: tabular-nums; }
.vx-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vx-muted { color: var(--vx-text-3) !important; }
.vx-dim { color: var(--vx-text-2) !important; }

.vx-divider-v {
    align-self: stretch;
    background: var(--vx-border);
    width: 1px;
}

/* --- Numbered steps list (what happens next, setup instructions) ---------------------------- */

.vx-steps {
    counter-reset: vx-step;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.vx-steps > li {
    color: var(--vx-text-2);
    counter-increment: vx-step;
    font-size: 0.86rem;
    line-height: 1.55;
    padding-left: 2rem;
    position: relative;
}

.vx-steps > li::before {
    align-items: center;
    background: var(--vx-accent-soft);
    border: 1px solid var(--vx-accent-line);
    border-radius: var(--vx-r-pill);
    color: var(--vx-accent-ink);
    content: counter(vx-step);
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 700;
    height: 1.45rem;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0.1rem;
    width: 1.45rem;
}

/* --- Two-column label/value list ------------------------------------------------------------ */

.vx-detail-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

.vx-detail-list > div {
    align-items: baseline;
    border-top: 1px solid var(--vx-border-faint);
    display: grid;
    gap: 0.5rem 1rem;
    grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
    padding: 0.7rem 0;
}

.vx-detail-list > div:first-child { border-top: 0; }

.vx-detail-list dt {
    color: var(--vx-text-3);
    font-size: 0.79rem;
    font-weight: 650;
    margin: 0;
}

.vx-detail-list dd {
    color: var(--vx-text);
    font-size: 0.87rem;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* A link that is the whole of its row gets a real tap height. */
.vx-detail-list dd a {
    align-items: center;
    display: inline-flex;
    min-height: 24px;
}

/* A paragraph used as the single child of a page-head-meta row should fill the width. */
.page-head-meta > p {
    flex: 1 1 100%;
    max-width: var(--vx-reading-max);
}

@media (max-width: 620px) {
    .vx-detail-list > div { grid-template-columns: minmax(0, 1fr); }
}

/* ==============================================================================================
   12. DARK THEME
   The Bootswatch "darkly" theme is loaded in dark mode, but most of site.css hard-codes light
   surfaces.  These rules restore the dark palette for the shared components.  Hero bands and
   gradient headers stay as they are — they are already dark by design.
   ============================================================================================== */

html[data-varyx-theme="dark"] {
    --vx-bg: #080c15;
    --vx-bg-2: #0d1220;
    --vx-surface: #121a2b;
    --vx-surface-2: #162032;
    --vx-surface-3: #1b2540;
    --vx-surface-inset: #0f1727;

    --vx-border: #243049;
    --vx-border-strong: #33415c;
    --vx-border-faint: #1c2740;

    --vx-text: #eef2f8;
    --vx-text-2: #b3c0d4;
    --vx-text-3: #8697ae;

    --vx-link: #14b8a6;
    --vx-link-hover: #5eead4;
    --vx-code-ink: #f472b6;

    --vx-accent-soft: rgba(13, 148, 136, 0.16);
    --vx-accent-line: rgba(45, 212, 191, 0.34);
    --vx-accent-ink: #5eead4;
    /* Used as a text colour for active tabs and links, so it has to be lifted in dark mode - the
       light-theme teal-700 lands at 3.6:1 against the dark surface. */
    --vx-accent-strong: #5eead4;

    --vx-info-soft: rgba(59, 130, 246, 0.16);
    --vx-info-line: rgba(96, 165, 250, 0.34);
    --vx-ok-soft: rgba(16, 185, 129, 0.16);
    --vx-ok-line: rgba(52, 211, 153, 0.32);
    --vx-warn-soft: rgba(245, 158, 11, 0.16);
    --vx-warn-line: rgba(251, 191, 36, 0.32);
    --vx-bad-soft: rgba(239, 68, 68, 0.16);
    --vx-bad-line: rgba(248, 113, 113, 0.32);

    --vx-e1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --vx-e2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -2px rgba(0, 0, 0, 0.45);
    --vx-e3: 0 2px 6px rgba(0, 0, 0, 0.42), 0 14px 28px -8px rgba(0, 0, 0, 0.5);
    --vx-e4: 0 6px 12px rgba(0, 0, 0, 0.45), 0 28px 56px -14px rgba(0, 0, 0, 0.6);

    /* site.css hard-codes the light palette on :root and is loaded after the Bootswatch theme, so
       its values win even in dark mode. Remapping the tokens here restores dark mode for every
       component that reads them, instead of each component needing its own dark override - which
       is how a card ended up painting a near-white surface with near-white text on it.
       --varyx-white is deliberately left alone: it is also the text colour on the dark hero
       bands, so the background usages were moved to --varyx-surface instead. */
    --varyx-surface: var(--vx-surface);
    --varyx-surface-2: var(--vx-bg);
    --varyx-surface-3: var(--vx-surface-3);
    --varyx-border: var(--vx-border);
    --varyx-ink: var(--vx-text);
    --varyx-muted: var(--vx-text-3);
    --varyx-slate-300: var(--vx-border-strong);
    --varyx-slate-400: var(--vx-text-3);
    --varyx-slate-700: var(--vx-text-2);

    --bs-body-bg: var(--vx-surface);
    --bs-body-color: var(--vx-text);
    --bs-emphasis-color: var(--vx-text);
    --bs-table-color: var(--vx-text);
    --bs-secondary-color: var(--vx-text-3);
    /* .text-secondary resolves the RGB triple, not --bs-secondary-color, so it has to be remapped
       too - otherwise it stays at the theme's near-black and disappears on a dark surface. */
    --bs-secondary-rgb: 134, 151, 174;
    --bs-tertiary-bg: var(--vx-surface-2);
    --bs-border-color: var(--vx-border);

    color-scheme: dark;
}

html[data-varyx-theme="dark"],
html[data-varyx-theme="dark"] body {
    background: var(--vx-bg) !important;
    color: var(--vx-text) !important;
}

html[data-varyx-theme="dark"] h1,
html[data-varyx-theme="dark"] h2,
html[data-varyx-theme="dark"] h3,
html[data-varyx-theme="dark"] h4,
html[data-varyx-theme="dark"] h5,
html[data-varyx-theme="dark"] h6,
html[data-varyx-theme="dark"] .page-title {
    color: var(--vx-text) !important;
}

html[data-varyx-theme="dark"] .text-muted,
html[data-varyx-theme="dark"] .text-body-secondary,
html[data-varyx-theme="dark"] .text-secondary {
    color: var(--vx-text-3) !important;
}

html[data-varyx-theme="dark"] .form-label,
html[data-varyx-theme="dark"] .form-check-label { color: var(--vx-text-2) !important; }

/* Dark-mode colour fixes that belong to the theme rather than to any one component. */
html[data-varyx-theme="dark"] .text-info { color: #67e8f9 !important; }
html[data-varyx-theme="dark"] .text-secondary { color: var(--vx-text-3) !important; }
html[data-varyx-theme="dark"] .btn.btn-link { color: var(--vx-link) !important; }
html[data-varyx-theme="dark"] .btn.btn-link:hover { color: var(--vx-link-hover) !important; }
html[data-varyx-theme="dark"] .nav-link.active { color: var(--vx-text) !important; }
html[data-varyx-theme="dark"] .bg-secondary-subtle { background-color: var(--vx-surface-3) !important; }
html[data-varyx-theme="dark"] .bg-light-subtle,
html[data-varyx-theme="dark"] .bg-body-secondary { background-color: var(--vx-surface-2) !important; }

html[data-varyx-theme="dark"] .badge.bg-secondary,
html[data-varyx-theme="dark"] .badge.bg-light,
html[data-varyx-theme="dark"] .badge.text-bg-secondary {
    background-color: var(--vx-surface-3) !important;
    border-color: var(--vx-border) !important;
    color: var(--vx-text-2) !important;
}

html[data-varyx-theme="dark"] .badge.bg-success,
html[data-varyx-theme="dark"] .badge.text-bg-success { color: #6ee7b7 !important; }
html[data-varyx-theme="dark"] .badge.bg-warning,
html[data-varyx-theme="dark"] .badge.text-bg-warning { color: #fcd34d !important; }
html[data-varyx-theme="dark"] .badge.bg-danger,
html[data-varyx-theme="dark"] .badge.text-bg-danger { color: #fca5a5 !important; }
html[data-varyx-theme="dark"] .badge.bg-primary,
html[data-varyx-theme="dark"] .badge.bg-info,
html[data-varyx-theme="dark"] .badge.text-bg-primary,
html[data-varyx-theme="dark"] .badge.text-bg-info { color: #93c5fd !important; }

html[data-varyx-theme="dark"] .alert-info { color: #93c5fd !important; }
html[data-varyx-theme="dark"] .alert-success { color: #6ee7b7 !important; }
html[data-varyx-theme="dark"] .alert-danger,
html[data-varyx-theme="dark"] .alert-error { color: #fca5a5 !important; }
html[data-varyx-theme="dark"] .alert-warning { color: #fcd34d !important; }

html[data-varyx-theme="dark"] .btn-secondary,
html[data-varyx-theme="dark"] .btn-outline-primary,
html[data-varyx-theme="dark"] .btn-outline-secondary,
html[data-varyx-theme="dark"] .btn-outline-dark {
    background: var(--vx-surface-3) !important;
    border-color: var(--vx-border-strong) !important;
    color: var(--vx-text-2) !important;
}

html[data-varyx-theme="dark"] .btn-secondary:hover,
html[data-varyx-theme="dark"] .btn-outline-primary:hover,
html[data-varyx-theme="dark"] .btn-outline-secondary:hover {
    background: var(--vx-surface) !important;
    border-color: var(--vx-accent-line) !important;
    color: var(--vx-accent-ink) !important;
}

html[data-varyx-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }

html[data-varyx-theme="dark"] .table-dark {
    --bs-table-bg: var(--vx-surface-3);
}

html[data-varyx-theme="dark"] #blazor-error-ui {
    background: #3f2d05;
    border-top-color: #7c5a10;
    color: #fde68a;
}

html[data-varyx-theme="dark"] #blazor-error-ui a,
html[data-varyx-theme="dark"] #blazor-error-ui .dismiss { color: #fde68a; }

/* --- Shell (top bar) ----------------------------------------------------------------------- */

html[data-varyx-theme="dark"] .portal-topbar {
    background: rgba(18, 26, 43, 0.86) !important;
    border-bottom-color: var(--vx-border) !important;
}

html[data-varyx-theme="dark"] .portal-kicker { color: var(--vx-text-3) !important; }
html[data-varyx-theme="dark"] .portal-title { color: var(--vx-text) !important; }
html[data-varyx-theme="dark"] .portal-trail-item { color: var(--vx-text-3) !important; }
html[data-varyx-theme="dark"] .portal-trail-item.is-current { color: var(--vx-accent-bright) !important; }

html[data-varyx-theme="dark"] .portal-search {
    background: var(--vx-surface-3) !important;
    border-color: var(--vx-border) !important;
    color: var(--vx-text-3) !important;
}

html[data-varyx-theme="dark"] .portal-search kbd {
    background: var(--vx-surface) !important;
    border-color: var(--vx-border-strong) !important;
    color: var(--vx-text-3) !important;
}

html[data-varyx-theme="dark"] .portal-status-strip > span {
    background: var(--vx-surface-3) !important;
    border-color: var(--vx-border) !important;
    color: var(--vx-text-2) !important;
}

html[data-varyx-theme="dark"] .portal-status-strip .status-live {
    background: var(--vx-ok-soft) !important;
    border-color: var(--vx-ok-line) !important;
    color: #6ee7b7 !important;
}

html[data-varyx-theme="dark"] .portal-status-strip .status-warning {
    background: var(--vx-warn-soft) !important;
    border-color: var(--vx-warn-line) !important;
    color: #fcd34d !important;
}

@media (max-width: 640.98px) {
    html[data-varyx-theme="dark"] .portal-topbar { background: var(--vx-bg) !important; }
}

/* --- Cards, panels and surfaces ------------------------------------------------------------ */

html[data-varyx-theme="dark"] .device-card,
html[data-varyx-theme="dark"] .device-card .card-body {
    background: var(--vx-surface) !important;
    color: var(--vx-text) !important;
}

html[data-varyx-theme="dark"] .account-manage-nav,
html[data-varyx-theme="dark"] .account-manage-panel,
html[data-varyx-theme="dark"] .auth-panel,
html[data-varyx-theme="dark"] .legal-acceptance-panel {
    background: var(--vx-surface) !important;
    border-color: var(--vx-border) !important;
    color: var(--vx-text) !important;
}

html[data-varyx-theme="dark"] .account-manage-nav .nav-link.active {
    background: var(--vx-accent-soft) !important;
    color: var(--vx-accent-ink) !important;
}

html[data-varyx-theme="dark"] .legal-terms {
    background: var(--vx-surface-inset) !important;
    border-color: var(--vx-border) !important;
    color: var(--vx-text-2) !important;
}

/* The legal panel is generated by legal.js and site.css paints its labels in fixed slate tones.
   They are unreadable on the dark surface, so repaint them here and let the fields follow the
   theme instead of staying white boxes inside a dark card. */
html[data-varyx-theme="dark"] .legal-kicker,
html[data-varyx-theme="dark"] .legal-acceptance-head span {
    color: var(--vx-text-3) !important;
}

html[data-varyx-theme="dark"] .legal-acceptance-panel .legal-grid label,
html[data-varyx-theme="dark"] .legal-acceptance-panel .legal-check {
    color: var(--vx-text-2) !important;
}

html[data-varyx-theme="dark"] .legal-grid input,
html[data-varyx-theme="dark"] .legal-grid textarea {
    background: var(--vx-surface-2) !important;
    border-color: var(--vx-border-strong) !important;
    color: var(--vx-text) !important;
}

/* Tables keep their tinted hover in the dark theme. */
html[data-varyx-theme="dark"] .table > :not(caption) > * > * { color: var(--vx-text) !important; }
html[data-varyx-theme="dark"] .table thead th { color: var(--vx-text-3) !important; }

/* ==============================================================================================
   13. PRE-AUTHENTICATION SHELL
   Sign-in, registration and the other pre-auth screens render inside AuthLayout: brand story on
   the left, the form on the right.  Account *management* pages still use the application shell.
   ============================================================================================== */

.auth-shell {
    background: var(--vx-bg);
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    min-height: 100vh;
}

/* --- Brand side ---------------------------------------------------------------------------- */

.auth-brand {
    background:
        radial-gradient(ellipse at 12% 8%, rgba(20, 184, 166, 0.26), transparent 52%),
        radial-gradient(ellipse at 88% 92%, rgba(29, 78, 216, 0.22), transparent 55%),
        linear-gradient(150deg, #0b1120 0%, #0e1729 48%, #0f172a 100%);
    color: var(--vx-text-on-dark);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: space-between;
    padding: clamp(1.75rem, 4vw, 3.25rem);
    position: relative;
}

.auth-brand-mark {
    align-self: flex-start;
    display: inline-block;
    text-decoration: none;
}

.auth-brand-mark img {
    background: rgba(255, 255, 255, 0.96);
    border-radius: var(--vx-r-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    display: block;
    height: auto;
    max-height: 52px;
    max-width: 190px;
    padding: 0.45rem 0.7rem;
    width: auto;
}

.auth-brand-copy { max-width: 34rem; }

.auth-brand-eyebrow {
    color: var(--vx-accent-bright);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.11em;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.auth-brand-copy h2 {
    color: #fff;
    font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.4rem);
    font-weight: 770;
    letter-spacing: -0.032em;
    line-height: 1.13;
    margin: 0 0 0.85rem;
}

.auth-brand-lede {
    color: rgba(226, 235, 245, 0.72);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0;
}

.auth-brand-points {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.auth-brand-points li {
    align-items: flex-start;
    display: flex;
    gap: 0.8rem;
}

.auth-brand-points .oi {
    align-items: center;
    background: rgba(20, 184, 166, 0.14);
    border: 1px solid rgba(45, 212, 191, 0.26);
    border-radius: var(--vx-r-sm);
    color: #5eead4;
    display: inline-flex;
    flex: 0 0 2.1rem;
    font-size: 0.95rem;
    height: 2.1rem;
    justify-content: center;
    width: 2.1rem;
}

.auth-brand-points strong {
    color: #fff;
    display: block;
    font-size: 0.87rem;
    font-weight: 650;
    letter-spacing: -0.012em;
}

.auth-brand-points span {
    color: rgba(226, 235, 245, 0.6);
    font-size: 0.81rem;
    line-height: 1.5;
}

.auth-brand-foot {
    color: rgba(226, 235, 245, 0.42);
    font-size: 0.75rem;
    margin: 0;
}

/* --- Form side ----------------------------------------------------------------------------- */

.auth-body {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
}

/* Pages that render .auth-page > .auth-panel, and the older identity pages that render bare
   h1/h2/form markup, are both centred here. */
.auth-body > * {
    max-width: 520px;
    width: 100%;
}

.auth-body > .row {
    max-width: 620px;
}

/* The Identity scaffold wraps each form in a .col-md-4; inside this single-column shell it should
   use the full width. */
.auth-body > .row > [class*='col-'],
.auth-body > .row > [class*='col-md-'] {
    flex: 0 0 100%;
    max-width: 100%;
}

.auth-body > h1 {
    font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.85rem);
    font-weight: 760;
    letter-spacing: -0.026em;
    margin-bottom: 0.4rem;
    text-align: center;
}

.auth-body > h2 {
    color: var(--vx-text-3) !important;
    font-size: 0.92rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
    text-align: center;
}

.auth-body > p {
    color: var(--vx-text-2);
    font-size: 0.88rem;
    line-height: 1.6;
    text-align: center;
}

.auth-body > hr { width: 100%; max-width: 520px; }

/* The scaffold puts each identity form on a card; give it the panel treatment. */
.auth-body > .row > [class*='col-'] > .card,
.auth-body > form > .card {
    border-radius: var(--vx-r-lg) !important;
}

/* The page markup keeps its .auth-page > .auth-panel shape; the layout now owns the centring. */
.auth-page {
    align-items: stretch;
    background: transparent !important;
    border: 0 !important;
    display: block;
    justify-content: flex-start;
    min-height: 0 !important;
    padding: 0 !important;
    width: 100%;
}

.auth-panel {
    background: var(--vx-surface) !important;
    border: 1px solid var(--vx-border) !important;
    border-radius: var(--vx-r-lg) !important;
    box-shadow: var(--vx-e3) !important;
    color: var(--vx-text) !important;
    margin: 0 auto;
    max-width: 440px;
    padding: clamp(1.6rem, 3.5vw, 2.4rem);
    width: 100%;
}

.auth-logo {
    display: block;
    height: auto;
    margin: 0 auto 1.35rem;
    max-height: 42px;
    max-width: 168px;
    width: auto;
}

.auth-heading {
    margin-bottom: 1.5rem;
    text-align: center;
}

.auth-heading h1 {
    color: var(--vx-text);
    font-size: 1.55rem;
    font-weight: 770;
    letter-spacing: -0.028em;
    margin-bottom: 0.35rem;
}

.auth-heading p {
    color: var(--vx-text-3);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0;
}

/* --- Fields -------------------------------------------------------------------------------- */

.auth-field {
    margin-bottom: 1.15rem;
    text-align: left;
}

.auth-field-header {
    align-items: baseline;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.auth-field-label {
    color: var(--vx-text-2) !important;
    display: block !important;
    font-size: 0.8rem !important;
    font-weight: 660 !important;
    letter-spacing: -0.006em !important;
    line-height: 1.4 !important;
    margin-bottom: 0.4rem !important;
}

.auth-field-header .auth-field-label { margin-bottom: 0 !important; }

/* Icon sits inside the field, so the input gets extra room on the left. */
.auth-input {
    position: relative;
}

.auth-input-icon {
    color: var(--vx-text-3);
    font-size: 0.9rem;
    left: 0.95rem;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.auth-input:focus-within .auth-input-icon { color: var(--vx-accent); }

.auth-panel .auth-field-input {
    background-color: var(--vx-surface) !important;
    border: 1.5px solid var(--vx-border-strong) !important;
    border-radius: var(--vx-r-sm) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    box-sizing: border-box !important;
    color: var(--vx-text) !important;
    display: block !important;
    font-size: 0.92rem !important;
    height: 48px !important;
    line-height: 1.5 !important;
    max-height: 48px !important;
    min-height: 48px !important;
    padding: 0.7rem 1.1rem 0.7rem 3.6rem !important;
    transition: border-color var(--vx-t-fast), box-shadow var(--vx-t-fast) !important;
    width: 100% !important;
}

/* Keep typed and placeholder text clear of the leading icon. This selector also wins over
   the older generic auth-field rule and browser autofill padding resets. */
.auth-panel .auth-input > .auth-field-input {
    /* Equal insets so the centred text sits in the true middle of the block rather than being
       pushed right by the icon gutter. The start inset still clears the leading icon. */
    padding-inline-start: 3.6rem !important;
    padding-inline-end: 3.6rem !important;
    padding-block: 0 !important;
    line-height: 48px !important;
    text-align: center !important;
}

.auth-panel .auth-field-input:focus {
    background-color: var(--vx-surface) !important;
    border-color: var(--vx-accent) !important;
    box-shadow: var(--vx-ring) !important;
    color: var(--vx-text) !important;
    outline: none !important;
}

.auth-panel .auth-field-input::placeholder {
    color: var(--vx-text-3) !important;
    opacity: 1 !important;
}

.auth-panel .auth-field-input:-webkit-autofill,
.auth-panel .auth-field-input:-webkit-autofill:hover,
.auth-panel .auth-field-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 40px var(--vx-surface) inset !important;
    -webkit-text-fill-color: var(--vx-text) !important;
}

/* --- Remember me --------------------------------------------------------------------------- */

.auth-remember {
    align-items: center;
    color: var(--vx-text-2) !important;
    cursor: pointer;
    display: flex;
    font-size: 0.84rem;
    font-weight: 550;
    gap: 0.55rem;
    margin: 0.25rem 0 1.15rem;
    /* The whole row is the target, so it carries a full tap height rather than the 15px box. */
    min-height: 24px;
    user-select: none;
}

.auth-remember .form-check-input {
    flex: 0 0 auto;
    margin: 0;
}

/* --- Actions ------------------------------------------------------------------------------- */

.auth-submit {
    min-height: 2.85rem;
    width: 100%;
}

.auth-divider {
    align-items: center;
    color: var(--vx-text-3);
    display: flex;
    font-size: 0.72rem;
    font-weight: 650;
    gap: 0.75rem;
    letter-spacing: 0.08em;
    margin: 1.1rem 0;
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
    background: var(--vx-border-faint);
    content: '';
    flex: 1;
    height: 1px;
}

.auth-foot {
    border-top: 1px solid var(--vx-border-faint);
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    text-align: center;
}

.auth-foot p {
    color: var(--vx-text-3);
    font-size: 0.83rem;
    line-height: 1.6;
    margin: 0 0 0.45rem;
}

.auth-foot p:last-child { margin-bottom: 0; }

.auth-foot a { font-weight: 620; }

.auth-panel .auth-link-subtle {
    color: var(--vx-link) !important;
    font-size: 0.8rem !important;
    font-weight: 620 !important;
    text-decoration: none !important;
}

.auth-panel .auth-link-subtle:hover {
    color: var(--vx-link-hover) !important;
    text-decoration: underline !important;
    text-underline-offset: 0.18em;
}

.auth-panel a {
    color: var(--vx-link);
    text-decoration: none;
}

.auth-panel a:hover { color: var(--vx-link-hover); }

/* Action links that sit on their own row, and checkbox captions, get a full tap height.  Links
   running inline inside a sentence are deliberately left alone: their height is governed by the
   line-height of the text around them, which is the one case WCAG 2.5.8 exempts. */
.auth-foot a,
.auth-panel .auth-link-subtle,
.auth-message-panel a,
.form-check-label {
    align-items: center;
    display: inline-flex;
    min-height: 24px;
}

.form-check,
.legal-check {
    min-height: 24px;
}

/* Confirmation / message panels reuse the card with centred copy. */
.auth-message-panel { text-align: center; }

.auth-message-panel .auth-heading { margin-bottom: 1.25rem; }

/* --- Optional status icon above the heading ------------------------------------------------- */

.auth-heading-icon {
    align-items: center;
    background: var(--vx-accent-soft);
    border: 1px solid var(--vx-accent-line);
    border-radius: var(--vx-r);
    color: var(--vx-accent-strong);
    display: inline-flex;
    font-size: 1.35rem;
    height: 3rem;
    justify-content: center;
    margin-bottom: 1rem;
    width: 3rem;
}

.auth-panel.is-danger .auth-heading-icon {
    background: var(--vx-bad-soft);
    border-color: var(--vx-bad-line);
    color: var(--vx-bad);
}

.auth-panel.is-danger .auth-heading h1 { color: var(--vx-bad) !important; }

/* Full-width primary action inside an auth card. */
.auth-panel .btn-lg { min-height: 2.85rem; }

.auth-panel > .btn,
.auth-panel form > .btn:not(.btn-sm) { width: 100%; }

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.auth-actions .btn { width: 100%; }

/* The recovery-code and confirmation screens carry a line of small print above the links. */
.auth-note {
    color: var(--vx-text-3) !important;
    font-size: 0.79rem !important;
    line-height: 1.55 !important;
}

/* One-time codes read better spaced out and in a mono face. */
.auth-code-input {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.22em !important;
    text-align: center;
    padding-left: 1rem !important;
}

/* --- Responsive ---------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .auth-shell { grid-template-columns: minmax(0, 1fr); }

    /* The brand side folds into a slim banner above the form. */
    .auth-brand {
        gap: 1rem;
        padding: 1.35rem clamp(1.25rem, 4vw, 2rem);
    }

    .auth-brand-copy,
    .auth-brand-points,
    .auth-brand-foot { display: none; }

    .auth-brand-mark img { max-height: 42px; max-width: 160px; }
}

@media (min-width: 1025px) {
    /* The brand side already shows the mark, so the panel does not repeat it. */
    .auth-body .auth-logo { display: none; }
}

@media (max-width: 520px) {
    .auth-body { padding: 1.25rem 1rem 2rem; }

    .auth-panel {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0.25rem 0 0;
    }

    .auth-shell { background: var(--vx-bg); }
}

/* ==============================================================================================
   14. RESPONSIVE
   ============================================================================================== */

@media (max-width: 1280px) {
    .vx-grid-4 { --vx-cols: 2; }
}

@media (max-width: 1100px) {
    .vx-grid-3,
    .vx-grid-4 { --vx-cols: 2; }
    .vx-split,
    .vx-split.is-wide { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
    .page-head {
        align-items: flex-start;
        display: block;
        gap: 0;
    }

    .page-head-actions {
        justify-content: flex-start;
        margin-top: 0.9rem;
    }

    .vx-hero {
        display: block;
    }

    .vx-hero-actions {
        justify-content: flex-start;
        margin-top: 1.1rem;
    }
}

@media (max-width: 760px) {
    .content {
        padding: 1rem 0 2.5rem;
    }

    .vx-grid,
    .vx-grid-2,
    .vx-grid-3,
    .vx-grid-4 { --vx-cols: 1; }

    .vx-panel { padding: 1rem; }

    .vx-section { margin-bottom: 1.25rem; }
}

@media (max-width: 640.98px) {
    html body .card-body,
    html body .card-header,
    html body .card-footer { padding-left: 0.9rem !important; padding-right: 0.9rem !important; }

    html body .table-responsive { border-radius: var(--vx-r-sm); }
}

/* Print: drop the chrome, keep the data. */
@media print {
    .sidebar,
    .portal-topbar,
    .vx-toolbar,
    .page-head-actions,
    #blazor-error-ui { display: none !important; }

    .page,
    .main,
    .content { background: #fff !important; }

    html body .card,
    html body .table-responsive { box-shadow: none !important; border-color: #ddd !important; }
}