/* ============================================================================
   Atasoft Control Center — global design system.
   Loaded after bootstrap.min.css, so everything here overrides Bootstrap
   defaults. All pages share these Bootstrap building blocks (cards, tables,
   badges, buttons, tabs, forms), so restyling them here restyles every page.
   ========================================================================== */

:root {
    /* Refined indigo brand (keeps the blue lineage, calmer + more modern). */
    --cc-primary: #4f46e5;        /* indigo-600 */
    --cc-primary-hover: #4338ca;  /* indigo-700 */
    --cc-primary-soft: #eef2ff;   /* indigo-50  */
    --cc-primary-ring: rgba(79, 70, 229, 0.22);
    --cc-bg: #f6f7fb;
    --cc-surface: #ffffff;
    --cc-surface-muted: #f8fafc;
    --cc-border: #e6e8ef;
    --cc-text: #0f172a;
    /* WCAG 1.4.3 (AA, 4.5:1 for body text): slate-500 (#64748b) reaches only 4.40:1 on the
       --cc-bg page background, so every `.text-muted` / `.small.text-muted` string on the page
       background failed the contrast check. #5b6677 gives 5.36:1 on --cc-bg and 5.67:1 on white. */
    --cc-muted: #5b6677;
    --cc-sidebar-1: #0f172a;      /* slate-900 */
    --cc-sidebar-2: #131a34;      /* subtle indigo-tinted depth */

    /* Link/foreground accent, kept SEPARATE from --cc-primary (which is a FILL colour carrying white
       text). In light mode they coincide; in dark mode they must not — a fill dark enough for white
       text is far too dark to read as text itself, and a text colour light enough to read on a dark
       page is far too light to sit under white button text. */
    --cc-link: #4f46e5;
    --cc-link-hover: #4338ca;

    /* Surfaces that were previously hard-coded in component CSS. Tokenised so the dark override
       below reaches them instead of leaving white patches on a dark page. */
    --cc-topbar-bg: rgba(255, 255, 255, 0.82);
    --cc-topbar-text: #475569;
    --cc-topbar-strong: #334155;
    --cc-neutral-bg: #ffffff;
    --cc-neutral-hover-bg: #f1f5f9;
    --cc-neutral-border: #cbd5e1;
    --cc-input-bg: #ffffff;
    --cc-input-border: #cbd5e1;
    --cc-input-placeholder: #94a3b8;
    --cc-label: #475569;
    --cc-table-head-bg: #f8fafc;
    --cc-table-hover-bg: #f8fafc;
    --cc-table-divider: #eef2f7;
    --cc-code: #a01a5e;
    --cc-danger-text: #dc2626;
    /* Status foregrounds for the compact stat tiles / counter chips (see "Status tiles" at the
       bottom of this file). Same hues as the .alert-* text colours, so a tile and a banner that
       report the same state read as the same state. */
    --cc-ok-text: #14713d;
    --cc-warn-text: #93500b;

    --cc-radius: 12px;
    --cc-radius-sm: 8px;
    --cc-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.05);
    --cc-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12);

    /* ── BlazorMHD.UI token bridge ──────────────────────────────────────────
       mhd-theme.css re-points the library's Tailwind palette vars at these
       --mhd-* tokens, so setting them here re-brands every Mhd* component
       (buttons, tags, dialogs, focus rings…) to match the Control Center. */
    --mhd-color-primary: #4f46e5;
    --mhd-color-primary-hover: #4338ca;
    --mhd-focus-ring: #6366f1;    /* indigo-500 */
    --mhd-color-success: #059669;
    --mhd-color-success-hover: #047857;
    --mhd-color-danger: #e11d48;
    --mhd-color-danger-hover: #be123c;
    --mhd-color-info: #0284c7;
    --mhd-color-info-hover: #0369a1;
    --mhd-radius-md: 0.5rem;
    --mhd-radius-lg: 0.625rem;
    --mhd-surface: var(--cc-surface);
    --mhd-surface-muted: var(--cc-surface-muted);
    --mhd-border: var(--cc-border);
    --mhd-text: var(--cc-text);
    --mhd-text-muted: var(--cc-muted);
}

html, body {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--cc-bg);
    color: var(--cc-text);
    font-size: 15px;
}

/* ---------------------------------------------------------------------------
   Typography — compact page titles and section headings shared by all pages.
   ------------------------------------------------------------------------- */

/* Content-first AND consistent: every page title is the same size and leaves the
   SAME gap below it — whether the title stands alone or shares its row with an
   action button (.page-header). This removes the old per-page mb-2/mb-3/none mix. */
h1, h1.h3 {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--cc-text);
    margin: 0 0 0.6rem;
    line-height: 1.25;
}

h1:focus {
    outline: none;
}

/* Title row that shares its line with an action (button/link) on the right.
   Use this instead of ad-hoc `d-flex … mb-2/mb-3` so the header gap is uniform. */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.page-header h1 {
    margin-bottom: 0;
}

/* Lead paragraph/subtitle directly under a page title — tight to the title, then
   the same gap to the content below on every page. */
h1 + p, h1 + .text-muted, .page-header + p, .page-header + .text-muted {
    margin-top: -0.55rem;
    margin-bottom: 0.85rem;
    font-size: 0.86rem;
}

h2.h5, h2 {
    font-size: 0.98rem;
    font-weight: 650;
    color: var(--cc-text);
    margin-top: 0.35rem;
    margin-bottom: 0.6rem;
}

.text-muted {
    color: var(--cc-muted) !important;
}

/* ---------------------------------------------------------------------------
   Content area — comfortable padding, capped line length on huge monitors.
   ------------------------------------------------------------------------- */

/* The cap used to live here as max-width: 1500px on the whole content area. With no auto margin the
   block stayed hard left, so every viewport wider than the sidebar + 1500 px piled the remainder into
   one empty band down the right-hand side — and .top-row, which has no cap, ran past the content edge,
   which is what made the gap read as a mistake rather than as margin. Centring it would have kept the
   same wasted width, just split in two. This console is table-heavy (Organizations alone is ten
   columns), so the width is worth using; only running prose actually needs a measure, and it gets one
   below rather than the whole page paying for it. */
.content {
    padding-top: 0.65rem;
    padding-bottom: 2rem;
}

/* Intro and explanatory paragraphs keep a readable measure instead of stretching into a single
   2500 px line on an ultrawide monitor. Tables, cards and grids are free to use the full width. */
.content > p {
    max-width: 80ch;
}

/* A Bootstrap .table is width: 100%, so in a full-width content area it shares its slack out across
   every column in proportion — which made a column of ten-character dates as wide as the name beside
   it. Here the slack is CLAIMED by the one column that can use it rather than refused by the nine that
   cannot: width: 100% on a cell in an auto-layout table means "take whatever is left over", which drops
   every other column to its own content width. (Marking the others 1% instead leaves the distribution
   to the browser's judgement, and across ten columns it kept handing width to a date or a single digit.)

   Opt in per table, then mark the column(s) worth widening with .col-flex on their th AND td. Two
   flexible columns simply share the slack between them. Selectors are qualified with .table so they
   outrank the .table > thead th block further down regardless of source order. */
.table.table-fit-cols th.col-flex,
.table.table-fit-cols td.col-flex {
    width: 100%;
    white-space: normal;
}

/* Every other data cell keeps its single line: a date or a tag breaking in two is exactly what the
   fit is for. Prose lives in a .col-flex column, which is excluded here and wraps freely. */
.table.table-fit-cols > tbody td:not(.col-flex) {
    white-space: nowrap;
}

/* The floor a column cannot shrink past is its widest unbreakable box — and for these columns that is
   the HEADER, not the data. .table > thead th renders labels uppercase, letter-spaced AND nowrap, so
   "APPS ENABLED" claims far more width than the single digit under it. Letting a multi-word label stack
   puts the data back in charge of the width; bottom alignment keeps one- and two-line labels on the
   same baseline. */
.table.table-fit-cols > thead th {
    white-space: normal;
    vertical-align: bottom;
}

/* Sortable headers wrap with the label they sit in rather than forcing it back onto one line. */
.table.table-fit-cols > thead th .btn {
    white-space: normal;
    text-align: left;
}

/* The page title now lives in the top bar, so the first content element sits
   directly under it — don't let a leading paragraph/heading add its own top gap. */
.content > :first-child {
    margin-top: 0;
}

/* ---------------------------------------------------------------------------
   Links & buttons.
   ------------------------------------------------------------------------- */

a, .btn-link {
    color: var(--cc-link);
    text-decoration: none;
}

a:hover, .btn-link:hover {
    color: var(--cc-link-hover);
}

/* Anchor "buttons" (<a class="btn">) stay Bootstrap-based for correct link
   semantics; these values mirror MhdButton (rounded-lg, semibold, subtle
   shadow) so they sit coherently next to the real Mhd buttons. */
.btn {
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.45rem 0.95rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.btn-sm {
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
    border-radius: 0.5rem;
}

.btn-primary {
    color: #fff;
    background-color: var(--cc-primary);
    border-color: var(--cc-primary);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--cc-primary-hover) !important;
    border-color: var(--cc-primary-hover) !important;
}

.btn-outline-primary {
    color: var(--cc-link);
    border-color: var(--cc-outline-primary-border, #c7c9f7);
}

.btn-outline-primary:hover {
    background-color: var(--cc-primary);
    border-color: var(--cc-primary);
}

.btn-outline-secondary {
    color: var(--cc-topbar-text);
    border-color: var(--cc-neutral-border);
    background-color: var(--cc-neutral-bg);
}

.btn-outline-secondary:hover {
    color: var(--cc-text);
    background-color: var(--cc-neutral-hover-bg);
    border-color: var(--cc-neutral-border);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem var(--cc-primary-ring);
}

/* ---------------------------------------------------------------------------
   Cards — soft borders, rounded corners, gentle elevation. Stat tiles on the
   dashboard and detail panels everywhere pick this up automatically.
   ------------------------------------------------------------------------- */

.card {
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
    background-color: var(--cc-surface);
}

.card-body {
    padding: 0.9rem 1.1rem;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--cc-border);
    font-weight: 600;
    padding: 0.85rem 1.3rem;
}

/* ---------------------------------------------------------------------------
   Tables — every list page renders a bare <table class="table">; give it a
   card-like surface (rounded, bordered, white) without extra markup.
   ------------------------------------------------------------------------- */

.table {
    --bs-table-bg: var(--cc-surface);
    --bs-table-hover-bg: var(--cc-table-hover-bg);
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
    overflow: hidden;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.table > thead th {
    font-size: 0.72rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cc-muted);
    background-color: var(--cc-table-head-bg);
    border-bottom: 1px solid var(--cc-border);
    padding: 0.55rem 0.75rem;
    white-space: nowrap;
}

.table > tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--cc-table-divider);
    color: var(--cc-text);
    vertical-align: middle;
}

.table > tbody tr:last-child td {
    border-bottom: none;
}

.table.table-sm > thead th {
    padding: 0.5rem 0.75rem;
}

.table.table-sm > tbody td {
    padding: 0.45rem 0.75rem;
}

/* Rounded corners on the actual corner cells (overflow:hidden alone is not
   reliable for table elements in all browsers). */
.table > thead tr:first-child th:first-child { border-top-left-radius: calc(var(--cc-radius) - 1px); }
.table > thead tr:first-child th:last-child  { border-top-right-radius: calc(var(--cc-radius) - 1px); }
.table > tbody tr:last-child td:first-child  { border-bottom-left-radius: calc(var(--cc-radius) - 1px); }
.table > tbody tr:last-child td:last-child   { border-bottom-right-radius: calc(var(--cc-radius) - 1px); }

/* ---------------------------------------------------------------------------
   Badges — soft, readable pills instead of saturated Bootstrap blocks.
   ------------------------------------------------------------------------- */

.badge {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.32em 0.72em;
    border-radius: 999px;
}

.badge.text-bg-success   { color: #14713d !important; background-color: #d9f2e4 !important; }
.badge.text-bg-danger    { color: #b42318 !important; background-color: #fde5e3 !important; }
.badge.text-bg-warning   { color: #93500b !important; background-color: #fdedd3 !important; }
.badge.text-bg-info      { color: #0e5f8a !important; background-color: #dbf0fb !important; }
.badge.text-bg-secondary { color: #475569 !important; background-color: #e9edf3 !important; }
.badge.text-bg-primary   { color: #4338ca !important; background-color: #e6e6fb !important; }
.badge.text-bg-light     { color: #475569 !important; background-color: #eef2f7 !important; }
.badge.text-bg-dark      { color: #f8fafc !important; background-color: #334155 !important; }

/* ---------------------------------------------------------------------------
   Tabs — modern underline strip (used by the InvoiceCraft sub-pages header).
   ------------------------------------------------------------------------- */

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

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--cc-muted);
    font-size: 0.86rem;
    font-weight: 550;
    padding: 0.5rem 0.8rem;
    margin-bottom: -1px;
}

.nav-tabs .nav-link:hover {
    color: var(--cc-text);
    border-bottom-color: var(--cc-neutral-border);
}

.nav-tabs .nav-link.active {
    color: var(--cc-link);
    background-color: transparent;
    border-bottom-color: var(--cc-primary);
    font-weight: 650;
}

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

.form-control, .form-select {
    border-radius: var(--cc-radius-sm);
    border-color: var(--cc-input-border);
    background-color: var(--cc-input-bg);
    font-size: 0.9rem;
    padding: 0.45rem 0.8rem;
    color: var(--cc-text);
}

/* Keep room for the dropdown chevron Bootstrap paints on the right. */
.form-select {
    padding-right: 2.25rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--cc-primary);
    box-shadow: 0 0 0 0.2rem var(--cc-primary-ring);
}

.form-label {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--cc-label);
    margin-bottom: 0.3rem;
}

.form-check-input:checked {
    background-color: var(--cc-primary);
    border-color: var(--cc-primary);
}

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

.alert {
    border-radius: var(--cc-radius-sm);
    font-size: 0.9rem;
    border-width: 1px;
}

.alert-warning { color: #93500b; background-color: #fdf3e0; border-color: #f5dcae; }
.alert-danger  { color: #b42318; background-color: #fdecea; border-color: #f6c8c4; }
.alert-success { color: #14713d; background-color: #e5f6ec; border-color: #bce5cd; }
.alert-info    { color: #0e5f8a; background-color: #e7f4fb; border-color: #bfe3f5; }

/* ---------------------------------------------------------------------------
   Modals & pagination (confirm dialogs, log pagers).
   ------------------------------------------------------------------------- */

.modal-content {
    border: none;
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow-lg);
}

.pagination .page-link {
    color: var(--cc-link);
    font-size: 0.875rem;
}

.pagination .page-item.active .page-link {
    background-color: var(--cc-primary);
    border-color: var(--cc-primary);
}

/* ---------------------------------------------------------------------------
   Validation + framework chrome (unchanged behaviors, refreshed colors).
   ------------------------------------------------------------------------- */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
    font-size: 0.82rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--cc-radius-sm);
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---------------------------------------------------------------------------
   Auth pages (login + forgot password) — centered card on a soft indigo-tinted
   backdrop, rendered inside EmptyLayout. Shared by both pages, hence global.
   ------------------------------------------------------------------------- */

.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(1100px 560px at 100% -10%, rgba(99, 102, 241, 0.12), transparent 60%),
        radial-gradient(880px 480px at -10% 110%, rgba(79, 70, 229, 0.09), transparent 55%),
        var(--cc-bg);
}

.auth-card {
    width: 100%;
    max-width: 24rem;
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 16px;
    box-shadow: 0 14px 44px rgba(15, 23, 42, 0.13);
    padding: 1.9rem 1.75rem;
}

.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.4rem;
    text-align: center;
}

.auth-mark {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -0.03em;
    box-shadow: 0 8px 22px rgba(79, 70, 229, 0.42);
}

.auth-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cc-text);
    margin: 0;
    line-height: 1.2;
}

.auth-sub {
    font-size: 0.83rem;
    color: var(--cc-muted);
    margin: 0.15rem 0 0;
}

.auth-field {
    margin-bottom: 1rem;
}

.auth-field .form-label {
    display: block;
}

/* Password input + inline reveal button. */
.pw-field {
    position: relative;
}

.pw-field .form-control {
    padding-right: 2.7rem;
}

.pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 0 var(--cc-radius-sm) var(--cc-radius-sm) 0;
}

.pw-toggle:hover {
    color: var(--cc-primary);
}

.pw-toggle:focus-visible {
    outline: 2px solid var(--cc-primary);
    outline-offset: -2px;
}

/* Two icons; show the "eye" by default, swap to "eye-off" when revealed. */
.pw-toggle .icon-on {
    display: inline-flex;
}

.pw-toggle .icon-off {
    display: none;
}

.pw-toggle.revealed .icon-on {
    display: none;
}

.pw-toggle.revealed .icon-off {
    display: inline-flex;
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
}

.auth-link {
    font-size: 0.82rem;
    font-weight: 550;
    color: var(--cc-link);
    text-decoration: none;
}

.auth-link:hover {
    color: var(--cc-link-hover);
    text-decoration: underline;
}

.btn-auth {
    width: 100%;
    border: none;
    border-radius: 9px;
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: filter 0.12s ease, box-shadow 0.12s ease;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.28);
}

.btn-auth:hover {
    filter: brightness(1.05);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.34);
}

.btn-auth:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.auth-error {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #fdecef;
    border: 1px solid #f6c8d1;
    color: #b42318;
    font-size: 0.84rem;
    border-radius: 9px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 1.1rem;
}

.auth-note {
    font-size: 0.85rem;
    color: var(--cc-text);
    line-height: 1.55;
}

.auth-note code {
    background: var(--cc-surface-muted);
    border: 1px solid var(--cc-border);
    border-radius: 5px;
    padding: 0.05rem 0.35rem;
    font-size: 0.82rem;
    color: var(--cc-text);
}

.field-error {
    color: var(--cc-danger-text);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* Inline checkbox row on the auth card (e.g. the 2FA "recovery code" toggle). */
.auth-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.84rem;
    color: var(--cc-text-muted, var(--cc-text));
    margin-bottom: 1.1rem;
    cursor: pointer;
}

.auth-check .form-check-input {
    margin: 0;
    cursor: pointer;
}

/* Shared width for the search/filter inputs on the InvoiceCraft app-detail pages
   (a `form-control-sm w-auto` box, previously an inline min-width on each page).
   `-wide` is for the GUID company-id filters that need room for a full id. */
.ic-filter {
    min-width: 260px;
}

.ic-filter-wide {
    min-width: 280px;
}

/* ===========================================================================
   BlazorMHD.UI component accent CSS.
   The library's DesignSystemService emits class NAMES for tags, status dots and
   sizes (e.g. .mhd-tag-base, .mhd-tone-ghost-success, .mhd-size-pad-xs,
   .mhd-status-dot-*) but ships NO CSS for them — they are meant to be provided
   by the consuming app. (MhdButton is pure Tailwind and already styled; its
   blue-600 is remapped to indigo by mhd-theme.css.) Without this block MhdTag /
   MhdStatusDot render as unstyled text. Colours mirror the Bootstrap .badge
   palette above so tags look identical wherever they appear. Scoped to
   .mhd-scope (the app shell wrapper) exactly like the library's own utilities.
   =========================================================================== */

/* MhdTag — pill base + size padding/text. */
.mhd-scope .mhd-tag-base {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.mhd-scope .mhd-size-pad-xs { padding: 0.32em 0.72em; }
.mhd-scope .mhd-size-pad-sm { padding: 0.36em 0.8em; }
.mhd-scope .mhd-size-pad-md { padding: 0.42em 0.9em; }
.mhd-scope .mhd-size-pad-lg { padding: 0.5em 1em; }
.mhd-scope .mhd-size-pad-xl { padding: 0.6em 1.15em; }

.mhd-scope .mhd-size-text-xs { font-size: 0.72rem; }
.mhd-scope .mhd-size-text-sm { font-size: 0.78rem; }
.mhd-scope .mhd-size-text-md { font-size: 0.85rem; }
.mhd-scope .mhd-size-text-lg { font-size: 0.95rem; }
.mhd-scope .mhd-size-text-xl { font-size: 1.05rem; }

/* MhdTag ghost tones — mirror the .badge palette for a consistent look. */
.mhd-scope .mhd-tone-ghost-success   { color: #14713d; background-color: #d9f2e4; }
.mhd-scope .mhd-tone-ghost-danger    { color: #b42318; background-color: #fde5e3; }
.mhd-scope .mhd-tone-ghost-warning   { color: #93500b; background-color: #fdedd3; }
.mhd-scope .mhd-tone-ghost-info      { color: #0e5f8a; background-color: #dbf0fb; }
.mhd-scope .mhd-tone-ghost-primary   { color: #4338ca; background-color: #e6e6fb; }
.mhd-scope .mhd-tone-ghost-secondary,
.mhd-scope .mhd-tone-ghost-neutral   { color: #475569; background-color: #e9edf3; }

/* MhdStatusDot — dot + label. */
.mhd-scope .mhd-status-root {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 550;
    color: var(--cc-text);
}

.mhd-scope .mhd-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.mhd-scope .mhd-status-dot-success { background-color: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15); }
.mhd-scope .mhd-status-dot-danger  { background-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }
.mhd-scope .mhd-status-dot-warning { background-color: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15); }
.mhd-scope .mhd-status-dot-info    { background-color: #0284c7; box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15); }
.mhd-scope .mhd-status-dot-primary { background-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); }
.mhd-scope .mhd-status-dot-neutral { background-color: #94a3b8; box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15); }

.mhd-scope .mhd-status-text { color: inherit; }

/* MhdCard — the library emits mhd-card-base/title/header/footer + mhd-card-pad-*
   but ships no CSS for them. Mirror the app's themed .card (same --cc-* tokens, so
   dark mode follows automatically) so an <MhdCard> looks identical to a .card. */
.mhd-scope .mhd-card-base {
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
    background-color: var(--cc-surface);
    color: var(--cc-text);
}

.mhd-scope .mhd-card-elevated {
    box-shadow: 0 10px 25px rgba(2, 6, 23, 0.12);
}

.mhd-scope .mhd-card-interactive {
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.mhd-scope .mhd-card-interactive:hover {
    box-shadow: 0 10px 25px rgba(2, 6, 23, 0.12);
    transform: translateY(-1px);
}

.mhd-scope .mhd-card-pad-regular { padding: 0.9rem 1.1rem; }
.mhd-scope .mhd-card-pad-compact { padding: 0.6rem 0.8rem; }

/* The title/header/footer divs each also carry a pad class, so these add only the divider + weight. */
.mhd-scope .mhd-card-title,
.mhd-scope .mhd-card-header {
    border-bottom: 1px solid var(--cc-border);
    font-weight: 600;
}

.mhd-scope .mhd-card-footer {
    border-top: 1px solid var(--cc-border);
}

/* Settings/detail forms that read better constrained rather than full-width. */
.mhd-scope .card-narrow { max-width: 640px; }

/* A flush body (padding:0) for cards whose content is a table meant to reach the card edges —
   the Bootstrap equivalent was `card-body p-0`. Targets only the body pad div, never the
   title/header/footer (which share the mhd-card-pad-regular class). */
.mhd-scope .card-flush-body > .mhd-card-pad-regular:not(.mhd-card-title):not(.mhd-card-header):not(.mhd-card-footer) {
    padding: 0;
}

/* Bootstrap's reboot ships an un-layered `button { border-radius: 0 }`, which
   outranks BlazorMHD's `@layer utilities` .rounded-* classes (layered CSS always
   loses to un-layered CSS). The result: every MhdButton (a <button> styled only by
   Tailwind utilities) renders with square corners, unlike our <a class="btn">
   links. Re-assert the library radii for buttons inside the app shell — un-layered
   and specific enough to beat the reboot rule. */
.mhd-scope button.rounded-lg   { border-radius: var(--radius-lg, 0.625rem); }
.mhd-scope button.rounded-md   { border-radius: var(--radius-md, 0.5rem); }
.mhd-scope button.rounded-full { border-radius: 999px; }

/* MhdButton spinner (only shown when IsLoading) — give it a spin. */
.mhd-scope .mhd-btn-spinner { animation: cc-spin 0.7s linear infinite; }

@keyframes cc-spin {
    to { transform: rotate(360deg); }
}

/* WCAG 1.4.3 (AA): Bootstrap's default inline-code pink (#d63384) reaches only ~4.3:1 on the page
   background, so inline <code> in prose (e.g. plan keys on /plans) failed the contrast check.
   #a01a5e keeps the same hue family at 6.2:1 on white and 5.9:1 on --cc-bg. */
:root {
    --bs-code-color: var(--cc-code);
}

code {
    color: var(--bs-code-color);
}

/* A <button> that must read as a link (used inside a POST form where an <a> would be wrong —
   e.g. "Sign in as someone else" on the access-denied page). */
.auth-linkbutton {
    border: none;
    background: none;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 550;
    color: var(--cc-link);
    cursor: pointer;
}

.auth-linkbutton:hover {
    color: var(--cc-link-hover);
    text-decoration: underline;
}

.auth-linkbutton:focus-visible {
    outline: 2px solid var(--cc-link);
    outline-offset: 2px;
}

/* ===========================================================================
   DARK THEME
   ===========================================================================
   Activated by `data-theme="dark"` on <html>, which wwwroot/theme.js sets BEFORE
   first paint (a render-blocking <head> script — inline script is forbidden by the
   CSP's `script-src 'self'`, so it is a real file). theme.js also adds the `dark`
   class, which is what BlazorMHD.UI's own dark variants (`&:is(.dark *)`) key off,
   so dialogs, tags and buttons from the library switch with the app.

   Precedence: `:root[data-theme="dark"]` (0,2,0) beats the plain `:root` (0,1,0)
   block at the top of this file regardless of source order.

   CONTRAST — every pair below was MEASURED (WCAG 2.1 relative-luminance formula),
   not eyeballed. Body text 15.3:1 · muted text 8.7:1 on the page background,
   7.9:1 on a card and 7.1:1 on a table header · links 9.2:1 / 8.3:1 · white on the
   primary button fill 5.5:1 (hover 4.6:1) · every badge and alert pair >= 8.4:1 ·
   inline <code> 9.8:1 · placeholder text 5.3:1. All clear WCAG AA (4.5:1 for text,
   3:1 for the button fill against the page). The light palette — including the
   deliberately-raised --cc-muted #5b6677 (5.43:1 on --cc-bg, 5.81:1 on white) — is
   untouched by this block.
   ========================================================================== */

:root[data-theme="dark"] {
    color-scheme: dark;

    --cc-primary: #5b52ea;        /* FILL only — carries white text at 5.47:1 */
    --cc-primary-hover: #6a61ec;  /* 4.63:1 with white, 3.95:1 against the page */
    --cc-primary-soft: #1e2247;
    --cc-primary-ring: rgba(129, 140, 248, 0.35);

    --cc-link: #a5b4fc;           /* TEXT accent — 9.17:1 on the page, 8.31:1 on a card */
    --cc-link-hover: #c7d2fe;

    --cc-bg: #0f1520;
    --cc-surface: #171f2b;
    --cc-surface-muted: #1e2836;
    --cc-border: #2b3748;
    --cc-text: #e6ebf2;           /* 15.26:1 on the page background */
    --cc-muted: #a7b4c4;          /* 8.68:1 page · 7.87:1 card · 7.06:1 table header */

    /* The sidebar was already dark in both themes; nudged a shade to sit under the darker page. */
    --cc-sidebar-1: #0b1120;
    --cc-sidebar-2: #0e1428;

    --cc-topbar-bg: rgba(20, 28, 39, 0.9);
    --cc-topbar-text: #a7b4c4;
    --cc-topbar-strong: #cbd5e1;
    --cc-neutral-bg: #1a2331;
    --cc-neutral-hover-bg: #223044;
    --cc-neutral-border: #3f4d61;
    --cc-input-bg: #1a2331;
    --cc-input-border: #3f4d61;
    --cc-input-placeholder: #8a97a8;   /* 5.32:1 on the input background */
    --cc-label: #c2ccd9;
    --cc-table-head-bg: #1e2836;
    --cc-table-hover-bg: #1c2532;
    --cc-table-divider: #232f3e;
    --cc-code: #f4a8c9;                /* 9.83:1 on the page, 8.91:1 on a card */
    --cc-danger-text: #ff9d95;
    --cc-ok-text: #6ee7a8;
    --cc-warn-text: #f5c26b;
    --cc-outline-primary-border: #3d3f80;
    --cc-palette-hint: #f5c26b;                    /* 10.11:1 on --cc-surface */
    --cc-palette-selected: rgba(129, 140, 248, 0.22);

    --cc-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.35);
    --cc-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55);

    /* BlazorMHD token bridge — same tokens, dark values, so library components follow. */
    --mhd-color-primary: #5b52ea;
    --mhd-color-primary-hover: #6a61ec;
    --mhd-focus-ring: #818cf8;
    --mhd-color-success: #059669;
    --mhd-color-danger: #e11d48;
}

/* Bootstrap paints many surfaces from its own variables; re-point the handful the
   Control Center actually renders. */
:root[data-theme="dark"] body {
    --bs-body-bg: var(--cc-bg);
    --bs-body-color: var(--cc-text);
    --bs-secondary-color: var(--cc-muted);
    --bs-emphasis-color: var(--cc-text);
    --bs-border-color: var(--cc-border);
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .dropdown-menu {
    background-color: var(--cc-surface);
    color: var(--cc-text);
    border-color: var(--cc-border);
}

:root[data-theme="dark"] .table {
    --bs-table-bg: var(--cc-surface);
    --bs-table-color: var(--cc-text);
    --bs-table-hover-color: var(--cc-text);
    --bs-table-striped-color: var(--cc-text);
    --bs-table-striped-bg: var(--cc-surface-muted);
}

:root[data-theme="dark"] .form-control::placeholder,
:root[data-theme="dark"] .form-select::placeholder {
    color: var(--cc-input-placeholder);
}

:root[data-theme="dark"] .form-control:disabled,
:root[data-theme="dark"] .form-control[readonly] {
    background-color: var(--cc-surface-muted);
    color: var(--cc-muted);
}

/* Bootstrap's chevron for <select> is a dark inline SVG; swap it for a light one. */
:root[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a7b4c4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

:root[data-theme="dark"] .form-check-input {
    background-color: var(--cc-input-bg);
    border-color: var(--cc-input-border);
}

:root[data-theme="dark"] .form-check-input:checked {
    background-color: var(--cc-primary);
    border-color: var(--cc-primary);
}

/* Badges — measured pairs, all >= 8.4:1. */
:root[data-theme="dark"] .badge.text-bg-success   { color: #6ee7a8 !important; background-color: #10281d !important; }
:root[data-theme="dark"] .badge.text-bg-danger    { color: #ffa7a0 !important; background-color: #2e1717 !important; }
:root[data-theme="dark"] .badge.text-bg-warning   { color: #f5c26b !important; background-color: #2e2413 !important; }
:root[data-theme="dark"] .badge.text-bg-info      { color: #7dd3fc !important; background-color: #10222e !important; }
:root[data-theme="dark"] .badge.text-bg-secondary { color: #cbd5e1 !important; background-color: #243040 !important; }
:root[data-theme="dark"] .badge.text-bg-primary   { color: #b4bcfd !important; background-color: #1e2247 !important; }
:root[data-theme="dark"] .badge.text-bg-light     { color: #cbd5e1 !important; background-color: #243040 !important; }
:root[data-theme="dark"] .badge.text-bg-dark      { color: #0f172a !important; background-color: #cbd5e1 !important; }

/* Alerts — same foregrounds on slightly deeper grounds, all >= 9.3:1. */
:root[data-theme="dark"] .alert-warning { color: #f5c26b; background-color: #291f10; border-color: #4a3a1c; }
:root[data-theme="dark"] .alert-danger  { color: #ffa7a0; background-color: #2a1414; border-color: #4d2422; }
:root[data-theme="dark"] .alert-success { color: #6ee7a8; background-color: #0e2419; border-color: #1c4632; }
:root[data-theme="dark"] .alert-info    { color: #7dd3fc; background-color: #0e1e29; border-color: #1b3d51; }

/* Auth pages (login / forgot password / access denied). */
:root[data-theme="dark"] .auth-wrap {
    background:
        radial-gradient(1100px 560px at 100% -10%, rgba(99, 102, 241, 0.16), transparent 60%),
        radial-gradient(880px 480px at -10% 110%, rgba(79, 70, 229, 0.12), transparent 55%),
        var(--cc-bg);
}

:root[data-theme="dark"] .auth-card {
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
}

:root[data-theme="dark"] .auth-error {
    background: #2e1717;
    border-color: #4d2422;
    color: #ffa7a0;
}

:root[data-theme="dark"] .btn-auth {
    background: linear-gradient(135deg, #5b52ea, #4740d4);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

:root[data-theme="dark"] .pw-toggle {
    color: var(--cc-muted);
}

/* MhdTag ghost tones — the library ships no CSS for these class names, so the dark
   values are ours to supply. Same measured pairs as the badges above. */
:root[data-theme="dark"] .mhd-scope .mhd-tone-ghost-success   { color: #6ee7a8; background-color: #10281d; }
:root[data-theme="dark"] .mhd-scope .mhd-tone-ghost-danger    { color: #ffa7a0; background-color: #2e1717; }
:root[data-theme="dark"] .mhd-scope .mhd-tone-ghost-warning   { color: #f5c26b; background-color: #2e2413; }
:root[data-theme="dark"] .mhd-scope .mhd-tone-ghost-info      { color: #7dd3fc; background-color: #10222e; }
:root[data-theme="dark"] .mhd-scope .mhd-tone-ghost-primary   { color: #b4bcfd; background-color: #1e2247; }
:root[data-theme="dark"] .mhd-scope .mhd-tone-ghost-secondary,
:root[data-theme="dark"] .mhd-scope .mhd-tone-ghost-neutral   { color: #cbd5e1; background-color: #243040; }

/* Dialog surfaces: the library's own dark variants fire from the `dark` class, but its
   base rules hard-code white/slate-200. Pin them to the Control Center surfaces so a
   dialog matches the page it opened over. */
:root[data-theme="dark"] .mhd-scope .mhd-dialog-surface,
:root[data-theme="dark"] .mhd-scope .mhd-dialog-header,
:root[data-theme="dark"] .mhd-scope .mhd-dialog-footer {
    background-color: var(--cc-surface);
    border-color: var(--cc-border);
}

:root[data-theme="dark"] .mhd-scope .mhd-dialog-title { color: var(--cc-text); }
:root[data-theme="dark"] .mhd-scope .mhd-dialog-body { color: var(--cc-text); }
:root[data-theme="dark"] .mhd-scope .mhd-dialog-description { color: var(--cc-muted); }

/* ---------------------------------------------------------------------------
   Theme toggle (rendered in the top bar by MainLayout).
   ------------------------------------------------------------------------- */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    flex-shrink: 0;
    border: 1px solid var(--cc-border);
    background: var(--cc-neutral-bg);
    color: var(--cc-topbar-text);
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.theme-toggle:hover {
    background: var(--cc-neutral-hover-bg);
    color: var(--cc-text);
    border-color: var(--cc-neutral-border);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--cc-link);
    outline-offset: 2px;
}

/* One button, two glyphs: show the moon in light mode (click -> go dark) and the sun
   in dark mode (click -> go light). Pure CSS, so it is correct on the very first paint. */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: inline-flex; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---------------------------------------------------------------------------
   Status tiles + counter groups.

   Both were introduced for the organization "Health & sync" tab, where the
   same three facts (are we in sync · is the snapshot fresh · is a push
   pending) used to be repeated as a header tag, an alert banner AND three
   meta rows abusing the desired/actual comparison table. They are stated once
   here instead, and the table went back to being only a field comparison.

   Generic on purpose — any page with a "few headline facts, then the
   evidence" shape can use them.
   ------------------------------------------------------------------------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.stat-tile {
    border: 1px solid var(--cc-border);
    border-left: 3px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    background: var(--cc-surface-muted);
    padding: 0.6rem 0.8rem;
    min-width: 0;
}

.stat-tile-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    color: var(--cc-muted);
}

.stat-tile-value {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.3rem;
    font-weight: 600;
    color: var(--cc-text);
}

.stat-tile-meta {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--cc-muted);
    overflow-wrap: anywhere;
}

/* The accent stripe carries the verdict, so the tile is readable at a glance without
   relying on the tag's colour alone (the tag text still names the state — WCAG 1.4.1). */
.stat-tile--ok      { border-left-color: var(--cc-ok-text); }
.stat-tile--warn    { border-left-color: var(--cc-warn-text); }
.stat-tile--danger  { border-left-color: var(--cc-danger-text); }
.stat-tile--neutral { border-left-color: var(--cc-neutral-border); }

/* Counter groups — a labelled set of "name … number" rows, for the cached tenant-health
   counters that used to run together as one wrapping line of small spans. */
.counter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
}

.counter-group {
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    background: var(--cc-surface);
    padding: 0.5rem 0.65rem;
}

.counter-group-title {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    color: var(--cc-muted);
    margin-bottom: 0.3rem;
}

.counter-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8rem;
    padding: 0.1rem 0;
}

.counter-row + .counter-row {
    border-top: 1px solid var(--cc-table-divider);
}

.counter-name { color: var(--cc-muted); }

.counter-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--cc-text);
}

/* A zero is the good case for every counter in this set, so it recedes; a non-zero
   count is what the operator is looking for and steps forward. */
.counter-value.is-zero   { font-weight: 500; color: var(--cc-muted); }
.counter-value.is-warn   { color: var(--cc-warn-text); }
.counter-value.is-danger { color: var(--cc-danger-text); }

/* Status foregrounds as utilities, for the odd inline phrase that must carry the same
   colour as a tile/counter. Bootstrap's own .text-danger is not re-toned for the dark
   theme; these follow the tokens above and stay legible in both. */
.text-status-warn   { color: var(--cc-warn-text); }
.text-status-danger { color: var(--cc-danger-text); }

/* Sticky per-record context bar (organization detail). Bootstrap's .bg-body paints from
   --bs-body-bg, which the dark theme only re-points on <body> itself, so the bar stayed
   white over a dark page while content scrolled under it. Paint it from the page token. */
.org-context-bar {
    background-color: var(--cc-bg);
}

/* Bootstrap ships .alert-secondary but this file only re-toned warning/danger/success/info
   for dark, so the neutral "pending work" drift banner stayed a bright grey slab. */
:root[data-theme="dark"] .alert-secondary {
    color: var(--cc-text);
    background-color: var(--cc-surface-muted);
    border-color: var(--cc-border);
}

/* Outline buttons in dark mode. Same root cause as the dialog surfaces above: the library's base
   rule hard-codes `bg-white` and its dark counterpart fires from Tailwind's `dark` CLASS, which
   this app never sets (it themes via data-theme). Every outline button therefore rendered as a
   white slab on a dark page. Foregrounds reuse the measured ghost-tag tones and the borders reuse
   the alert borders, so an outline button matches the tag/alert of the same state. */
:root[data-theme="dark"] .mhd-scope [class*="mhd-btn-outline-"] {
    background-color: transparent;
}

:root[data-theme="dark"] .mhd-scope [class*="mhd-btn-outline-"]:hover:not(:disabled) {
    background-color: var(--cc-neutral-hover-bg);
}

:root[data-theme="dark"] .mhd-scope .mhd-btn-outline-success { color: #6ee7a8; border-color: #1c4632; }
:root[data-theme="dark"] .mhd-scope .mhd-btn-outline-danger  { color: #ffa7a0; border-color: #4d2422; }
:root[data-theme="dark"] .mhd-scope .mhd-btn-outline-warning { color: #f5c26b; border-color: #4a3a1c; }
:root[data-theme="dark"] .mhd-scope .mhd-btn-outline-info    { color: #7dd3fc; border-color: #1b3d51; }
:root[data-theme="dark"] .mhd-scope .mhd-btn-outline-primary { color: #b4bcfd; border-color: var(--cc-outline-primary-border); }
:root[data-theme="dark"] .mhd-scope .mhd-btn-outline-secondary,
:root[data-theme="dark"] .mhd-scope .mhd-btn-outline-neutral { color: #cbd5e1; border-color: var(--cc-neutral-border); }