/*
 * Tabler Theme Overrides — SmallStack
 * Supports dark + light modes via body.theme-dark
 */

/* ── Theme-neutral (accent, fonts, components) ───────────── */
:root {
    --tblr-primary: #f59f00;
    --tblr-primary-rgb: 245, 159, 0;
    --tblr-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --tblr-code-color: #f59f00;
    /* SmallStack compatibility aliases — let upstream templates that
       reference SmallStack's CSS variable names (var(--primary),
       var(--card-bg), var(--body-fg), etc.) render correctly inside
       the Tabler theme without rewriting every template. */
    --primary: var(--tblr-primary);
    --primary-hover: color-mix(in srgb, var(--tblr-primary) 88%, black);
    --success-fg: #2fb344;
    --error-fg: #d63939;
    --warning-fg: #f76707;
    --message-warning-bg: rgba(247, 103, 7, 0.12);
    --delete-button-bg: #d63939;
    --font-monospace: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --font-mono: var(--font-monospace);
    --radius-sm: 4px;
    --radius-md: 6px;
    /* Categorical series (calendars, legends) — distinct hues, not state or accent. */
    --series-1: #0284c7;
    --series-2: #7c3aed;
    --series-3: #059669;
    --series-4: #d97706;
    --series-5: #e11d48;
    --series-6: #0d9488;
    --series-7: #ea580c;
    --series-8: #db2777;
}

/* ── Light-mode SmallStack aliases ─────────────────────────────── */
body:not(.theme-dark) {
    --body-bg: var(--tblr-body-bg, #f7f7f7);
    --body-fg: var(--tblr-body-color, #1d2433);
    --body-quiet-color: var(--tblr-muted, #656d77);
    --muted-fg: var(--tblr-muted, #656d77);
    --card-bg: var(--tblr-card-bg, #ffffff);
    --border: var(--tblr-border-color, #e6e7e9);
    --border-color: var(--tblr-border-color, #e6e7e9);
    --hairline-color: var(--tblr-border-color, #e6e7e9);
    --card-border: var(--tblr-border-color, #e6e7e9);
    --card-header-bg: transparent;
    --input-bg: var(--tblr-bg-forms, #ffffff);
    --input-focus-border: var(--tblr-primary);
    --link-color: var(--tblr-primary);
    --text-muted: var(--tblr-muted, #656d77);
    --accent-band-bg: color-mix(in srgb, var(--tblr-primary) 12%, var(--tblr-bg-surface, #ffffff));
    --input-border: var(--tblr-border-color, #e6e7e9);
    --code-bg: rgba(0, 0, 0, 0.04);
    --control-height: 36px;
}

/* ── Dark-mode SmallStack-var aliases ─────────────────────────────
   Only re-export Tabler 1.4's cool Tailwind-slate surface tokens
   under SmallStack-style var names so downstream templates that
   reference var(--primary), var(--card-bg), var(--body-fg), etc.
   render correctly inside Tabler chrome. We intentionally do NOT
   override --tblr-body-bg / --tblr-card-bg / --tblr-border-color /
   --tblr-gray-* here — Tabler 1.4's defaults (#111827 body-bg,
   cool blue-gray border, Tailwind slate scale) are what we want. */
body.theme-dark, [data-bs-theme="dark"] {
    /* Tabler 1.4 only scopes --tblr-card-bg to .card elements
       (via `.card { --tblr-card-bg: var(--tblr-bg-surface); }`).
       Re-expose it at the root so our overrides for non-.card
       surfaces (dropdown-menu, modal-content, list-group-item,
       and the ported SmallStack components) get an opaque
       surface color instead of resolving to empty/transparent. */
    --tblr-card-bg: var(--tblr-bg-surface);
    --body-bg: var(--tblr-body-bg);
    --body-fg: var(--tblr-body-color);
    --body-quiet-color: var(--tblr-muted);
    --muted-fg: var(--tblr-muted);
    --card-bg: var(--tblr-bg-surface);
    --border: var(--tblr-border-color);
    --border-color: var(--tblr-border-color);
    --hairline-color: var(--tblr-border-color);
    --card-border: var(--tblr-border-color);
    --card-header-bg: transparent;
    --input-bg: var(--tblr-bg-forms);
    --input-focus-border: var(--tblr-primary);
    --link-color: var(--tblr-primary);
    --text-muted: var(--tblr-muted);
    --accent-band-bg: color-mix(in srgb, var(--tblr-primary) 12%, var(--tblr-bg-surface));
    --series-1: #38bdf8;
    --series-2: #a78bfa;
    --series-3: #34d399;
    --series-4: #fbbf24;
    --series-5: #fb7185;
    --series-6: #2dd4bf;
    --series-7: #fb923c;
    --series-8: #f472b6;
    --input-border: var(--tblr-border-color);
    --code-bg: rgba(245, 159, 0, 0.08);
    --control-height: 36px;
    /* Tabler 1.4 sets --tblr-code-bg to #111827 in dark mode — identical
       to the body background — so <code> pills (e.g. request paths in the
       activity tables) render darker than the card and look recessed.
       Lift it to a subtle cool surface so the pill reads on both the body
       and card backgrounds. */
    --tblr-code-bg: rgba(255, 255, 255, 0.07);
}

body.theme-dark .navbar, [data-bs-theme="dark"] .navbar {
    background-color: var(--tblr-body-bg);
    border-bottom: 1px solid var(--tblr-border-color);
}

body.theme-dark .navbar-brand, [data-bs-theme="dark"] .navbar-brand {
    color: #ffffff !important;
}

body.theme-dark .navbar .nav-link, [data-bs-theme="dark"] .navbar .nav-link {
    color: var(--tblr-gray-300);
}

body.theme-dark .navbar .nav-link:hover, [data-bs-theme="dark"] .navbar .nav-link:hover,
body.theme-dark .navbar .nav-link.active, [data-bs-theme="dark"] .navbar .nav-link.active {
    color: #ffffff;
}

body.theme-dark .navbar .nav-link-icon, [data-bs-theme="dark"] .navbar .nav-link-icon {
    color: var(--tblr-muted);
}

body.theme-dark .navbar .nav-link:hover .nav-link-icon, [data-bs-theme="dark"] .navbar .nav-link:hover .nav-link-icon {
    color: #f59f00;
}

body.theme-dark .page, [data-bs-theme="dark"] .page {
    min-height: 100vh;
    background-color: var(--tblr-body-bg);
}

body.theme-dark .page-wrapper, [data-bs-theme="dark"] .page-wrapper,
body.theme-dark .page-body, [data-bs-theme="dark"] .page-body {
    background-color: var(--tblr-body-bg);
}

body.theme-dark .card, [data-bs-theme="dark"] .card {
    background-color: var(--tblr-card-bg);
    border: 1px solid var(--tblr-border-color);
    box-shadow: none;
}

body.theme-dark .card-header, [data-bs-theme="dark"] .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--tblr-border-color);
}

body.theme-dark .card-footer, [data-bs-theme="dark"] .card-footer {
    background-color: transparent;
    border-top: 1px solid var(--tblr-border-color);
}

body.theme-dark .page-header, [data-bs-theme="dark"] .page-header {
    background-color: var(--tblr-body-bg);
}

body.theme-dark .page-pretitle, [data-bs-theme="dark"] .page-pretitle {
    color: var(--tblr-muted);
}

body.theme-dark .page-title, [data-bs-theme="dark"] .page-title {
    color: #ffffff;
}

body.theme-dark .dropdown-menu, [data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--tblr-card-bg);
    border-color: var(--tblr-border-color);
}

body.theme-dark .dropdown-item, [data-bs-theme="dark"] .dropdown-item {
    color: var(--tblr-body-color);
}

body.theme-dark .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:hover {
    background-color: var(--tblr-border-color);
    color: #ffffff;
}

body.theme-dark .dropdown-divider, [data-bs-theme="dark"] .dropdown-divider {
    border-color: var(--tblr-border-color);
}

body.theme-dark .footer, [data-bs-theme="dark"] .footer {
    border-top: 1px solid var(--tblr-border-color);
    color: var(--tblr-muted);
}

body.theme-dark .footer a, [data-bs-theme="dark"] .footer a {
    color: var(--tblr-muted);
}

body.theme-dark .footer a:hover, [data-bs-theme="dark"] .footer a:hover {
    color: #f59f00;
}

body.theme-dark .progress, [data-bs-theme="dark"] .progress {
    background-color: var(--tblr-border-color);
}

body.theme-dark .table, [data-bs-theme="dark"] .table {
    --tblr-table-bg: transparent;
    --tblr-table-striped-bg: rgba(245, 159, 0, 0.04);
    color: var(--tblr-body-color);
}

body.theme-dark .table thead th, [data-bs-theme="dark"] .table thead th {
    background-color: rgba(245, 159, 0, 0.08);
    color: var(--tblr-muted);
    border-bottom-color: var(--tblr-border-color);
}

body.theme-dark .table td, [data-bs-theme="dark"] .table td {
    border-bottom-color: var(--tblr-border-color);
}

body.theme-dark .nav-tabs .nav-link, [data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--tblr-gray-300);
}

body.theme-dark .nav-tabs .nav-link.active, [data-bs-theme="dark"] .nav-tabs .nav-link.active {
    color: #f59f00;
    border-bottom-color: #f59f00;
    background-color: transparent;
}

body.theme-dark .form-control, [data-bs-theme="dark"] .form-control,
body.theme-dark .form-select, [data-bs-theme="dark"] .form-select {
    background-color: var(--tblr-border-color);
    border-color: var(--tblr-border-color-light);
    color: var(--tblr-body-color);
}

body.theme-dark .form-control:focus, [data-bs-theme="dark"] .form-control:focus,
body.theme-dark .form-select:focus, [data-bs-theme="dark"] .form-select:focus {
    border-color: #f59f00;
    box-shadow: 0 0 0 0.25rem rgba(245, 159, 0, 0.15);
}

body.theme-dark .form-label, [data-bs-theme="dark"] .form-label {
    color: var(--tblr-body-color);
}

body.theme-dark .input-group-text, [data-bs-theme="dark"] .input-group-text {
    background-color: var(--tblr-border-color);
    border-color: var(--tblr-border-color-light);
    color: var(--tblr-body-color);
}

body.theme-dark .alert, [data-bs-theme="dark"] .alert {
    border: 1px solid var(--tblr-border-color);
}

body.theme-dark .breadcrumb-item + .breadcrumb-item::before, [data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--tblr-muted);
}

body.theme-dark .breadcrumb-item a, [data-bs-theme="dark"] .breadcrumb-item a {
    color: var(--tblr-gray-300);
}

body.theme-dark .breadcrumb-item.active, [data-bs-theme="dark"] .breadcrumb-item.active {
    color: var(--tblr-muted);
}

body.theme-dark .modal-content, [data-bs-theme="dark"] .modal-content {
    background-color: var(--tblr-card-bg);
    border-color: var(--tblr-border-color);
}

body.theme-dark .list-group-item, [data-bs-theme="dark"] .list-group-item {
    background-color: var(--tblr-card-bg);
    border-color: var(--tblr-border-color);
    color: var(--tblr-body-color);
}

/* ── Light theme — mostly Tabler defaults, accent overrides ── */
body:not(.theme-dark) .navbar .nav-link.active {
    color: #f59f00;
}

body:not(.theme-dark) .navbar .nav-link:hover .nav-link-icon {
    color: #f59f00;
}

/* ── Shared (both themes) ────────────────────────────────── */
.navbar-brand {
    font-weight: 600;
}

.card {
    border-radius: var(--tblr-border-radius-lg, 8px);
}

.avatar {
    font-weight: 600;
    font-size: 0.75rem;
}

.page-pretitle {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.page-title {
    font-size: 1.4rem;
    font-weight: 700;
}

/* ── Buttons (both themes) ───────────────────────────────── */
.btn-primary,
.btn-warning {
    background-color: #f59f00;
    border-color: #f59f00;
    color: #1a1c23;
    font-weight: 600;
}

.btn-primary:hover,
.btn-warning:hover {
    background-color: #e09100;
    border-color: #e09100;
    color: #1a1c23;
}

.btn-outline-primary {
    color: #f59f00;
    border-color: #f59f00;
}

.btn-outline-primary:hover {
    background-color: #f59f00;
    color: #1a1c23;
}

/* ── Stat cards ──────────────────────────────────────────── */
.stat-card .stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tblr-muted, #656d77);
    margin-bottom: 0.25rem;
}

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

body.theme-dark .stat-card .stat-value, [data-bs-theme="dark"] .stat-card .stat-value {
    color: #ffffff;
}

.stat-card .stat-change {
    font-size: 0.8rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.stat-change.positive { color: #2fb344; }
.stat-change.negative { color: #d63939; }

.stat-card .sparkline-container {
    height: 40px;
    margin-top: 0.75rem;
}

/* ── Welcome / Hero card ─────────────────────────────────── */
body.theme-dark .welcome-card, [data-bs-theme="dark"] .welcome-card {
    background: linear-gradient(135deg, var(--tblr-card-bg) 0%, var(--tblr-border-color) 100%);
    border: 1px solid var(--tblr-border-color);
}

body:not(.theme-dark) .welcome-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.welcome-card {
    border-radius: var(--tblr-border-radius-lg, 8px);
    min-height: 200px;
}

.welcome-card .welcome-title {
    font-size: 1.5rem;
    font-weight: 700;
}

body.theme-dark .welcome-card .welcome-title { color: #ffffff; }

.welcome-card .welcome-subtitle {
    color: var(--tblr-muted, #656d77);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.welcome-card .mini-stat-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tblr-muted, #656d77);
    margin-bottom: 0.25rem;
}

.welcome-card .mini-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
}

body.theme-dark .welcome-card .mini-stat-value { color: #ffffff; }

.welcome-card .mini-stat-bar {
    height: 4px;
    border-radius: 2px;
    margin-top: 0.35rem;
    overflow: hidden;
}

body.theme-dark .welcome-card .mini-stat-bar { background-color: var(--tblr-border-color); }
body:not(.theme-dark) .welcome-card .mini-stat-bar { background-color: #dee2e6; }

.welcome-card .mini-stat-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

.mini-stat-bar-fill.green { background-color: #2fb344; }
.mini-stat-bar-fill.red { background-color: #d63939; }

.welcome-illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

.welcome-illustration svg {
    opacity: 0.15;
    color: #f59f00;
}

/* ── Donut/gauge chart container ─────────────────────────── */
.chart-donut-container {
    position: relative;
    width: 80px;
    height: 80px;
}

.chart-donut-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    font-weight: 700;
}

body.theme-dark .chart-donut-label { color: #ffffff; }

/* ── Text selection ──────────────────────────────────────────
   No ::selection style was defined, so selected text used the faint
   browser default — which gets visually swallowed by the amber row
   :hover tint on the data tables, making it look like selection wasn't
   working. Give it a solid, high-contrast highlight so selected text is
   clearly visible everywhere (including over hovered rows). */
::selection {
    background: rgba(var(--tblr-primary-rgb, 245, 159, 0), 0.85);
    color: #1a1c23;
}
::-moz-selection {
    background: rgba(var(--tblr-primary-rgb, 245, 159, 0), 0.85);
    color: #1a1c23;
}

/* ── Utilities ───────────────────────────────────────────── */
.text-amber { color: #f59f00 !important; }
.bg-amber { background-color: #f59f00 !important; }
.text-green { color: #2fb344 !important; }
.text-red { color: #d63939 !important; }
.text-teal { color: #0ca678 !important; }


/* ── Layout: Boxed ──────────────────────────────────────── */
@media (min-width: 768px) {
    body.layout-boxed {
        padding: 1rem;
        background: var(--tblr-gray-950, #0a0a0a);
    }

    body.layout-boxed .page {
        max-width: 1320px;
        margin: 0 auto;
        border: 1px solid var(--tblr-border-color);
        border-radius: var(--tblr-border-radius-lg, 8px);
        background: var(--tblr-body-bg, #1a1c23);
        overflow: hidden;
    }

    body.layout-boxed .page > .navbar:first-child {
        border-radius: var(--tblr-border-radius-lg, 8px) var(--tblr-border-radius-lg, 8px) 0 0;
    }

    body.layout-boxed .container,
    body.layout-boxed [class^='container-'],
    body.layout-boxed [class*=' container-'] {
        max-width: 100%;
    }
}

/* ── Layout: Condensed ───────────────────────────────────── */
body.layout-condensed .page-body {
    padding-top: 0.5rem;
}

body.layout-condensed .container-xl {
    max-width: 960px;
}

body.layout-condensed .navbar .container-xl {
    max-width: 960px;
}

body.layout-condensed .page-header {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

body.layout-condensed .card {
    margin-bottom: 0.75rem;
}

/* ── Layout: Fluid ──────────────────────────────────────── */
body.layout-fluid .container,
body.layout-fluid [class^='container-'],
body.layout-fluid [class*=' container-'] {
    max-width: 100%;
}

/* ── Layout: Navbar overlap ─────────────────────────────── */
.navbar.navbar-overlap::after {
    content: '';
    height: 9rem;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: inherit;
    z-index: -1;
    box-shadow: inherit;
}

.navbar.navbar-overlap + .page-wrapper .page-body {
    margin-top: -6rem;
    position: relative;
    z-index: 1;
}

/* ── Layout: Sticky navbar ───────────────────────────────── */
.navbar.navbar-sticky {
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* ── Layout: Right vertical ──────────────────────────────── */
.page.navbar-side.navbar-side-end {
    flex-direction: row-reverse;
}

body.theme-dark .page.navbar-side.navbar-side-end > .navbar, [data-bs-theme="dark"] .page.navbar-side.navbar-side-end > .navbar {
    border-right: none;
    border-left: 1px solid var(--tblr-border-color);
}

body:not(.theme-dark) .page.navbar-side.navbar-side-end > .navbar {
    border-right: none;
    border-left: 1px solid var(--tblr-border-color, #e6e7e9);
}

/* ── Layout dropdown active state ────────────────────────── */
.dropdown-item[data-layout].active {
    background-color: rgba(245, 159, 0, 0.1);
    color: #f59f00;
    font-weight: 600;
}

/* ── Settings trigger in navbar ──────────────────────────── */
.navbar .nav-link[data-bs-target="#offcanvas-settings"] {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    transition: background-color 0.15s, transform 0.3s;
}

.navbar .nav-link[data-bs-target="#offcanvas-settings"]:hover {
    background-color: rgba(var(--tblr-primary-rgb, 245, 159, 0), 0.1);
    transform: rotate(30deg);
}

/* ── Offcanvas settings panel ───────────────────────────── */
#offcanvas-settings .form-hint {
    font-size: 0.8rem;
    color: var(--tblr-muted, #656d77);
    margin-bottom: 0.75rem;
}

#offcanvas-settings .form-check {
    margin-bottom: 0.25rem;
}

#offcanvas-settings .form-selectgroup-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body.theme-dark #offcanvas-settings, [data-bs-theme="dark"] #offcanvas-settings {
    background-color: var(--tblr-card-bg);
    border-color: var(--tblr-border-color);
}

body.theme-dark #offcanvas-settings .offcanvas-header, [data-bs-theme="dark"] #offcanvas-settings .offcanvas-header {
    border-bottom-color: var(--tblr-border-color);
}

body.theme-dark #offcanvas-settings .btn-close, [data-bs-theme="dark"] #offcanvas-settings .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ── Side navbar layout ─────────────────────────────────── */
.page.navbar-side {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}

.page.navbar-side > .navbar {
    flex: 0 0 auto;
    width: 15rem;
    min-height: 100vh;
    flex-direction: column;
    align-items: stretch;
    border-bottom: none;
}

body.theme-dark .page.navbar-side > .navbar, [data-bs-theme="dark"] .page.navbar-side > .navbar {
    border-right: 1px solid var(--tblr-border-color);
    border-bottom: none;
}

body:not(.theme-dark) .page.navbar-side > .navbar {
    border-right: 1px solid var(--tblr-border-color, #e6e7e9);
    border-bottom: none;
}

.page.navbar-side > .page-wrapper {
    flex: 1;
    min-width: 0;
}

.page.navbar-side .navbar .container-xl {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
    max-width: 100%;
}

.page.navbar-side .navbar-brand {
    margin-bottom: 1.5rem;
    padding: 0;
}

.page.navbar-side .navbar-collapse {
    display: flex !important;
    flex-direction: column;
}

.page.navbar-side .navbar-nav {
    flex-direction: column;
    width: 100%;
}

.page.navbar-side .navbar-nav .nav-item {
    width: 100%;
}

.page.navbar-side .navbar-nav .nav-link {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    margin-bottom: 2px;
}

.page.navbar-side .navbar-nav .nav-link:hover {
    background: rgba(var(--tblr-primary-rgb, 245, 159, 0), 0.06);
}

.page.navbar-side .navbar-nav .nav-link.active {
    background: rgba(var(--tblr-primary-rgb, 245, 159, 0), 0.1);
}

.page.navbar-side .navbar-nav.flex-row {
    flex-direction: row !important;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--tblr-border-color, #2c2e34);
}

.page.navbar-side .navbar-toggler {
    display: none;
}

/* Dropdowns expand inline in vertical sidebar */
.page.navbar-side .navbar-collapse .dropdown-menu {
    position: static !important;
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
    display: none;
}

.page.navbar-side .navbar-collapse .dropdown-menu.show {
    display: block;
}

.page.navbar-side .navbar-collapse .dropdown-menu .dropdown-item {
    padding-left: 2.5rem;
    color: inherit;
    border-radius: 6px;
    margin-bottom: 1px;
}

.page.navbar-side .navbar-collapse .dropdown-menu .dropdown-item:hover {
    background: rgba(var(--tblr-primary-rgb, 245, 159, 0), 0.06);
}

.page.navbar-side .navbar-collapse .dropdown-menu .dropdown-divider {
    margin: 0.25rem 0.75rem;
}

.page.navbar-side .navbar-collapse .dropdown-toggle::after {
    margin-left: auto;
}

@media (max-width: 991.98px) {
    .page.navbar-side {
        flex-direction: column;
    }
    .page.navbar-side > .navbar {
        width: 100%;
        min-height: auto;
    }
}

/* ── Help system styles for Tabler ───────────────────────── */
.help-layout {
    display: grid;
    grid-template-columns: 220px 1fr 180px;
    gap: 1.5rem;
}

@media (max-width: 992px) {
    .help-layout {
        grid-template-columns: 1fr;
    }
    .help-sidebar,
    .help-toc-sidebar {
        display: none;
    }
}

/* ── Activity table overrides for Tabler ─────────────────── */
.table-activity thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Backup status badges ────────────────────────────────── */
.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

body.theme-dark .status-badge.status-success, [data-bs-theme="dark"] .status-badge.status-success {
    background: rgba(47, 179, 68, 0.15);
    color: #2fb344;
}
body.theme-dark .status-badge.status-failed, [data-bs-theme="dark"] .status-badge.status-failed {
    background: rgba(214, 57, 57, 0.15);
    color: #d63939;
}
body.theme-dark .status-badge.status-pruned, [data-bs-theme="dark"] .status-badge.status-pruned {
    opacity: 0.5;
}

body:not(.theme-dark) .status-badge.status-success {
    background: rgba(47, 179, 68, 0.1);
    color: #2fb344;
}
body:not(.theme-dark) .status-badge.status-failed {
    background: rgba(214, 57, 57, 0.1);
    color: #d63939;
}
body:not(.theme-dark) .status-badge.status-pruned {
    opacity: 0.6;
}

/* ── Timeline (backup detail) ────────────────────────────── */
.timeline {
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: var(--tblr-border-color, #e6e7e9);
}

.timeline-item {
    position: relative;
    padding: 16px 16px 16px 48px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.timeline-dot {
    position: absolute;
    left: 10px;
    top: 20px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.timeline-dot.dot-success { background: #2fb344; }
.timeline-dot.dot-failed { background: #d63939; }
.timeline-dot.dot-pruned { background: #656d77; }
.timeline-dot.dot-warning { background: #d63939; }

body.theme-dark .timeline-dot svg { width: 10px; height: 10px; fill: var(--tblr-card-bg); }
body:not(.theme-dark) .timeline-dot svg { width: 10px; height: 10px; fill: #ffffff; }

.timeline-content { flex: 1; }
.timeline-label { font-weight: 600; font-size: 0.95rem; }
.timeline-detail { color: var(--tblr-muted, #656d77); font-size: 0.85rem; margin-top: 2px; }
.timeline-time { color: var(--tblr-muted, #656d77); font-size: 0.8rem; white-space: nowrap; margin-top: 2px; }

/* ── Profile page styles ─────────────────────────────────── */
.profile-photo-lg {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    background-color: #f59f00;
    color: #1a1c23;
    overflow: hidden;
}

.profile-photo-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Theme bar (activity users) ──────────────────────────── */
.theme-usage-row {
    margin-bottom: 12px;
}

.theme-usage-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.theme-name { font-weight: 600; font-size: 0.85rem; }
.theme-total { font-size: 0.8rem; color: var(--tblr-muted, #656d77); }

.theme-bar {
    display: flex;
    min-height: 34px;
    border: 1px solid var(--tblr-border-color);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.theme-bar-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    font-size: 0.85rem;
    font-weight: 700;
    transition: filter 0.15s;
}

.theme-bar-segment:hover {
    filter: brightness(1.05);
}

/* Accent-filled "dark" segment + faint accent tint for "light", matching
   the base SmallStack theme bar (was flat gray before). */
.theme-bar-segment.is-dark {
    background: var(--tblr-primary);
    color: #1a1c23;
}

.theme-bar-segment.is-light {
    background: color-mix(in srgb, var(--tblr-primary) 18%, var(--tblr-card-bg));
    color: var(--tblr-body-color);
    border-left: 1px solid color-mix(in srgb, var(--tblr-primary) 35%, var(--tblr-border-color));
}

/* ── Apps grid dropdown ────────────────────────────────── */
.dropdown-apps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 12px;
}

.dropdown-apps-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    border-radius: var(--tblr-border-radius-lg, 8px);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s;
}

.dropdown-apps-item:hover {
    background-color: rgba(var(--tblr-primary-rgb, 245, 159, 0), 0.08);
    text-decoration: none;
    color: inherit;
}

.dropdown-apps-item.active {
    background-color: rgba(var(--tblr-primary-rgb, 245, 159, 0), 0.12);
}

.dropdown-apps-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(var(--tblr-primary-rgb, 245, 159, 0), 0.1);
    color: var(--tblr-primary, #f59f00);
}

.dropdown-apps-icon svg {
    width: 24px;
    height: 24px;
}

.dropdown-apps-label {
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

body.theme-dark .dropdown-apps-item, [data-bs-theme="dark"] .dropdown-apps-item {
    color: var(--tblr-body-color);
}

body.theme-dark .dropdown-apps-item:hover, [data-bs-theme="dark"] .dropdown-apps-item:hover {
    color: #ffffff;
}


/* ── Theme Base (gray palette) ────────────────────────────── */

[data-bs-theme-base='slate'] {
    --tblr-gray-50: #f8fafc;
    --tblr-gray-100: #f1f5f9;
    --tblr-gray-200: #e2e8f0;
    --tblr-gray-300: #cbd5e1;
    --tblr-gray-400: #94a3b8;
    --tblr-gray-500: #64748b;
    --tblr-gray-600: #475569;
    --tblr-gray-700: #334155;
    --tblr-gray-800: #1e293b;
    --tblr-gray-900: #0f172a;
    --tblr-gray-950: #020617;
}

[data-bs-theme-base='zinc'] {
    --tblr-gray-50: #fafafa;
    --tblr-gray-100: #f4f4f5;
    --tblr-gray-200: #e4e4e7;
    --tblr-gray-300: #d4d4d8;
    --tblr-gray-400: #a1a1aa;
    --tblr-gray-500: #71717a;
    --tblr-gray-600: #52525b;
    --tblr-gray-700: #3f3f46;
    --tblr-gray-800: #27272a;
    --tblr-gray-900: #18181b;
    --tblr-gray-950: #09090b;
}

[data-bs-theme-base='neutral'] {
    --tblr-gray-50: #fafafa;
    --tblr-gray-100: #f5f5f5;
    --tblr-gray-200: #e5e5e5;
    --tblr-gray-300: #d4d4d4;
    --tblr-gray-400: #a3a3a3;
    --tblr-gray-500: #737373;
    --tblr-gray-600: #525252;
    --tblr-gray-700: #404040;
    --tblr-gray-800: #262626;
    --tblr-gray-900: #171717;
    --tblr-gray-950: #0a0a0a;
}

[data-bs-theme-base='stone'] {
    --tblr-gray-50: #fafaf9;
    --tblr-gray-100: #f5f5f4;
    --tblr-gray-200: #e7e5e4;
    --tblr-gray-300: #d6d3d1;
    --tblr-gray-400: #a8a29e;
    --tblr-gray-500: #78716c;
    --tblr-gray-600: #57534e;
    --tblr-gray-700: #44403c;
    --tblr-gray-800: #292524;
    --tblr-gray-900: #1c1917;
    --tblr-gray-950: #0c0a09;
}

/* Light-mode theme base: map grays to semantic Tabler vars */
body:not(.theme-dark)[data-bs-theme-base] {
    --tblr-body-bg: var(--tblr-gray-50);
    --tblr-border-color: var(--tblr-gray-200);
}


/* ── Theme Font ───────────────────────────────────────────── */

:root {
    --tblr-font-serif: Georgia, 'Times New Roman', Times, serif;
    --tblr-font-comic: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', sans-serif, cursive;
}

[data-bs-theme-font='sans-serif'] {
    --tblr-body-font-family: var(--tblr-font-sans-serif);
}

[data-bs-theme-font='serif'] {
    --tblr-body-font-family: var(--tblr-font-serif);
}

[data-bs-theme-font='monospace'] {
    --tblr-body-font-family: var(--tblr-font-monospace);
    --tblr-body-font-size: 80%;
}

[data-bs-theme-font='comic'] {
    --tblr-body-font-family: var(--tblr-font-comic);
}


/* ── Corner Radius ────────────────────────────────────────── */

[data-bs-theme-radius='0'] {
    --tblr-border-radius: 0;
    --tblr-border-radius-sm: 0;
    --tblr-border-radius-lg: 0;
    --tblr-border-radius-xl: 0;
    --tblr-border-radius-xxl: 0;
    --tblr-border-radius-pill: 0;
}

[data-bs-theme-radius='0.5'] {
    --tblr-border-radius: 2px;
    --tblr-border-radius-sm: 1px;
    --tblr-border-radius-lg: 4px;
    --tblr-border-radius-xl: 0.5rem;
    --tblr-border-radius-xxl: 1rem;
}

[data-bs-theme-radius='1.5'] {
    --tblr-border-radius: 6px;
    --tblr-border-radius-sm: 3px;
    --tblr-border-radius-lg: 12px;
    --tblr-border-radius-xl: 1.5rem;
    --tblr-border-radius-xxl: 3rem;
}

[data-bs-theme-radius='2'] {
    --tblr-border-radius: 8px;
    --tblr-border-radius-sm: 4px;
    --tblr-border-radius-lg: 16px;
    --tblr-border-radius-xl: 2rem;
    --tblr-border-radius-xxl: 4rem;
}

/* ── SmallStack "bleed" page header → normalized to Tabler-native ───────
   Upstream apps (mcp/api/tokenmgr/search/runbook, …) render a self-contained
   .page-header-bleed block: a tinted/bordered band with the breadcrumb below
   the title. That read as an inconsistent "block header" next to the pages
   with a native Tabler override (Backups/Explorer/Activity/Users), which use
   a plain header — breadcrumb on top, title + subtitle left, actions right,
   NO block. Strip the block and reorder so every bleed page matches the
   native header. (These pages empty the {% block breadcrumbs %}, so the
   breadcrumb lives in a <nav> inside .page-header-content — reorder it up.) */
.page-header-bleed {
    background: none;
    border: none;
    border-radius: 0;
    /* The bleed lives in the full-width {% block page_header %}, but the page
       content sits in a .container-xl. Replicate the container so the header
       aligns with (rather than overhangs) the content below it. */
    width: 100%;
    margin: 0 auto 1.25rem;
    padding: 1.25rem calc(var(--tblr-gutter-x, 1.5rem) * 0.5) 0;
}
@media (min-width: 1200px) {
    .page-header-bleed {
        max-width: 1320px;
    }
}

.page-header-with-actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header-bleed .page-header-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
/* breadcrumb nav → above the title (Tabler renders it first), small + muted */
.page-header-bleed .page-header-content > nav {
    order: -1;
    margin: 0 0 0.35rem 0 !important;
}

.page-header-content h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--tblr-body-color);
    margin: 0;
    line-height: 1.2;
}

.page-header-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.page-subtitle {
    color: var(--tblr-muted);
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
}

/* ── SmallStack action-card → Tabler button look ─────────────────────────
   Upstream renders page-header CTAs ("Mint Token", "Run Self-Test") as
   icon + title + subtitle mini-cards. The gold-standard pages (Backups)
   use standard Tabler buttons, so restyle the action-card as a compact
   button: icon + label at .btn metrics, subtitle hidden. */
.action-cards {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.action-card,
a.action-card:link,
a.action-card:visited {
    display: inline-flex;
    align-items: center;
    padding: 0.4375rem 1rem;
    border: 1px solid color-mix(in srgb, var(--tblr-primary) 50%, transparent);
    border-radius: var(--tblr-border-radius, 4px);
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.action-card:hover,
.action-card:focus-visible {
    border-color: var(--tblr-primary);
    background: color-mix(in srgb, var(--tblr-primary) 8%, var(--tblr-card-bg));
    outline: none;
}
.action-card-body {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
}
.action-card-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: var(--tblr-primary);
}
.action-card-title {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.4285714;
    color: var(--tblr-primary);
    white-space: nowrap;
}
.action-card-subtitle {
    display: none;
}
.action-card-success { border-color: color-mix(in srgb, var(--success-fg) 50%, transparent); }
.action-card-success:hover,
.action-card-success:focus-visible {
    border-color: var(--success-fg);
    background: color-mix(in srgb, var(--success-fg) 6%, var(--tblr-card-bg));
}
.action-card-success .action-card-icon { fill: var(--success-fg); }
.action-card-success .action-card-title { color: var(--success-fg); }
.action-card-danger { border-color: color-mix(in srgb, var(--delete-button-bg, #dc3545) 50%, transparent); }
.action-card-danger:hover,
.action-card-danger:focus-visible {
    border-color: var(--delete-button-bg, #dc3545);
    background: color-mix(in srgb, var(--delete-button-bg, #dc3545) 6%, var(--tblr-card-bg));
}
.action-card-danger .action-card-icon { fill: var(--delete-button-bg, #dc3545); }
.action-card-danger .action-card-title { color: var(--delete-button-bg, #dc3545); }

/* ── SmallStack CRUD form classes (used by tokenmgr, etc.) ───────────
   These are simpler than upstream's full crud-form rules — they cover
   labels, help text, errors, and a sensible default for unstyled inputs
   while letting any .form-control inputs inside still use Tabler's
   own styling. */
.crud-form .crud-field {
    margin-bottom: 1.25rem;
}

.crud-form .crud-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--tblr-body-color);
}

.crud-form .crud-label .required {
    color: #d63939;
    margin-left: 0.15rem;
}

.crud-form .crud-help {
    color: var(--tblr-muted);
    font-size: 0.8rem;
    margin-top: 0.3rem;
    line-height: 1.4;
}

.crud-form .crud-error {
    color: #d63939;
    font-size: 0.8rem;
    margin-top: 0.3rem;
}

.crud-form .crud-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tblr-border-color);
}

/* Default styling for inputs inside .crud-form that don't already have
   .form-control. Mirrors Tabler's form-control look so server-rendered
   Django widgets without explicit classes still look right. */
.crud-form input:not([type="checkbox"]):not([type="radio"]):not(.form-control):not(.form-check-input),
.crud-form select:not(.form-control):not(.form-select),
.crud-form textarea:not(.form-control) {
    display: block;
    width: 100%;
    padding: 0.4375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.4285714;
    color: var(--tblr-body-color);
    background-color: var(--tblr-bg-forms, var(--tblr-card-bg));
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.crud-form input:not([type="checkbox"]):not([type="radio"]):not(.form-control):not(.form-check-input):focus,
.crud-form select:not(.form-control):not(.form-select):focus,
.crud-form textarea:not(.form-control):focus {
    outline: 0;
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.15);
}

.crud-form .crud-field.has-error input,
.crud-form .crud-field.has-error select,
.crud-form .crud-field.has-error textarea {
    border-color: #d63939;
}

/* ── SmallStack config copy button (backup page paths, etc.) ──────────
   Ported from apps/smallstack/static/smallstack/css/theme.css. Without it
   the inline copy buttons next to file paths fall back to the default
   raised gray browser button instead of a flat icon-only affordance. */
.config-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    vertical-align: middle;
    color: var(--tblr-muted);
    transition: color 0.15s;
}

.config-copy-btn:hover {
    color: var(--tblr-body-color);
}

/* ── SmallStack list-toolbar (search + filter dropdowns) ──────────────
   Used by CRUDView list pages — tokenmgr, etc. Ported from
   apps/smallstack/static/smallstack/css/components.css so that
   SmallStack template includes/list_toolbar.html renders correctly
   inside the Tabler theme without rewriting the include. */
.list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 0 12px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--tblr-border-color);
}

.list-toolbar-search {
    position: relative;
    width: 200px;
    flex-shrink: 1;
    min-width: 140px;
}

.list-toolbar-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tblr-primary);
    opacity: 0.7;
    pointer-events: none;
    z-index: 1;
}

.list-toolbar-search-input {
    width: 100%;
    height: 36px;
    padding: 0 10px 0 30px !important;
    border: 1px solid color-mix(in srgb, var(--tblr-primary) 15%, var(--tblr-card-bg)) !important;
    border-radius: var(--tblr-border-radius, 4px) !important;
    background: color-mix(in srgb, var(--tblr-primary) 6%, var(--tblr-card-bg)) !important;
    color: var(--tblr-body-color) !important;
    font-size: 0.8rem !important;
    font-weight: 500;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
}

.list-toolbar-search-input:hover {
    border-color: color-mix(in srgb, var(--tblr-primary) 30%, var(--tblr-card-bg)) !important;
}

.list-toolbar-search-input:focus {
    border-color: color-mix(in srgb, var(--tblr-primary) 45%, var(--tblr-card-bg)) !important;
    background: color-mix(in srgb, var(--tblr-primary) 10%, var(--tblr-card-bg)) !important;
    outline: none;
}

.list-toolbar-search:focus-within .list-toolbar-search-icon {
    opacity: 1;
}

.list-toolbar-search-input::placeholder {
    color: var(--tblr-muted);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}

.list-toolbar-filters {
    display: contents;
}

.list-toolbar-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 36px;
    max-width: 220px;
    padding: 0 0.4rem 0 0.6rem;
    border: 1px solid color-mix(in srgb, var(--tblr-primary) 15%, var(--tblr-card-bg));
    border-radius: var(--tblr-border-radius, 4px);
    background: color-mix(in srgb, var(--tblr-primary) 6%, var(--tblr-card-bg));
    box-sizing: border-box;
    flex: 0 0 auto;
    transition: border-color 0.15s, background 0.15s;
    cursor: pointer;
    overflow: hidden;
}

.list-toolbar-filter:hover {
    border-color: color-mix(in srgb, var(--tblr-primary) 30%, var(--tblr-card-bg));
}

.list-toolbar-filter-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--tblr-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    pointer-events: none;
}

.list-toolbar-filter.is-filtered {
    border-color: color-mix(in srgb, var(--tblr-primary) 35%, var(--tblr-card-bg));
    background: color-mix(in srgb, var(--tblr-primary) 12%, var(--tblr-card-bg));
}

.list-toolbar-filter.is-filtered .list-toolbar-filter-label {
    color: var(--tblr-primary);
}

.list-toolbar-filter .list-toolbar-filter-select {
    height: auto !important;
    min-height: 0 !important;
    padding: 2px 18px 2px 2px !important;
    border: none !important;
    background: transparent !important;
    color: var(--tblr-body-color) !important;
    font-size: 0.8rem !important;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--tblr-muted) 50%),
        linear-gradient(135deg, var(--tblr-muted) 50%, transparent 50%) !important;
    background-position: calc(100% - 10px) 50%, calc(100% - 6px) 50% !important;
    background-size: 4px 4px, 4px 4px !important;
    background-repeat: no-repeat !important;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.list-toolbar-filter .list-toolbar-filter-select:focus {
    outline: none !important;
    box-shadow: none !important;
}

.list-toolbar-filter-text {
    height: 36px;
    padding: 4px 8px !important;
    border: 1px solid var(--tblr-border-color) !important;
    border-radius: var(--tblr-border-radius, 4px) !important;
    background: var(--tblr-card-bg) !important;
    color: var(--tblr-body-color) !important;
    font-size: 0.75rem !important;
    transition: border-color 0.15s;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 140px;
}

.list-toolbar-filter-text:focus {
    border-color: var(--tblr-primary) !important;
}

.list-toolbar-filter-text.is-filtered {
    border-left: 3px solid var(--tblr-primary) !important;
    background: color-mix(in srgb, var(--tblr-primary) 6%, var(--tblr-card-bg)) !important;
}

.list-toolbar-overflow-toggle {
    height: 36px;
    padding: 4px 10px;
    border: 1px dashed var(--tblr-border-color);
    border-radius: var(--tblr-border-radius, 4px);
    background: var(--tblr-card-bg);
    color: var(--tblr-muted);
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}

.list-toolbar-overflow-toggle:hover,
.list-toolbar.show-overflow .list-toolbar-overflow-toggle {
    border-color: var(--tblr-primary);
    color: var(--tblr-primary);
}

.list-toolbar-overflow-panel {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--tblr-border-color);
    width: 100%;
}

.list-toolbar.show-overflow .list-toolbar-overflow-panel {
    display: grid;
}

.list-toolbar-overflow-panel .list-toolbar-filter,
.list-toolbar-overflow-panel .list-toolbar-filter-text {
    width: 100%;
}

.list-toolbar-overflow-panel .list-toolbar-filter .list-toolbar-filter-select {
    flex: 1;
}

.list-toolbar-spacer {
    flex: 1;
}

.list-toolbar-count {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: color-mix(in srgb, var(--tblr-primary) 8%, var(--tblr-card-bg));
    border: 1px solid color-mix(in srgb, var(--tblr-primary) 15%, var(--tblr-card-bg));
    border-radius: var(--tblr-border-radius, 4px);
    white-space: nowrap;
}

.list-toolbar-count-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--tblr-primary);
    line-height: 1;
}

.list-toolbar-count-label {
    font-size: 0.7rem;
    color: var(--tblr-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.list-toolbar-clear {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    color: var(--tblr-muted);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: var(--tblr-border-radius, 4px);
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}

.list-toolbar-clear:hover {
    color: var(--tblr-body-color);
    background: color-mix(in srgb, var(--tblr-primary) 10%, var(--tblr-card-bg));
}




/* ── SmallStack tab bar (mcp/api admin _nav, related tabs) ─────────────
   Ported from apps/smallstack/static/smallstack/css/components.css. These
   underline-style tabs are used by the MCP and API admin nav and CRUD
   related-record tabs; without the port they fall back to plain text. */
.tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--tblr-border-color);
    margin-bottom: 1rem;
}

.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--tblr-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
    border-radius: var(--radius-sm, 4px) var(--radius-sm, 4px) 0 0;
    text-decoration: none;
}

.tab-btn:hover {
    color: var(--tblr-body-color);
    background-color: color-mix(in srgb, var(--tblr-body-color) 5%, transparent);
}

.tab-btn.active {
    color: var(--tblr-primary);
    border-bottom-color: var(--tblr-primary);
}

.tab-count {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--tblr-primary) 15%, var(--tblr-card-bg));
    color: var(--tblr-primary);
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.3rem;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* ── SmallStack paginator (explorer/CRUD list pagination) ──────────────
   Ported from apps/smallstack/static/smallstack/css/theme.css. Renders
   the prev/next nav + "page X of Y" control used at the foot of CRUD
   list pages; otherwise it falls back to cramped plain-text arrows. */
.paginator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 1rem 0 0;
    font-size: 0.85rem;
}

.paginator-info {
    color: var(--tblr-muted);
}

.paginator-nav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
}

.paginator-btn,
a.paginator-btn:link,
a.paginator-btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: none;
    color: var(--tblr-muted);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.15s, background 0.15s;
    cursor: pointer;
    border: none;
}

a.paginator-btn:hover {
    color: var(--tblr-primary);
    background: color-mix(in srgb, var(--tblr-primary) 10%, var(--tblr-body-bg));
    text-decoration: none;
}

.paginator-btn.disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.paginator-current {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.6rem;
    height: 2rem;
    color: var(--tblr-body-color);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.paginator-of {
    font-weight: 400;
    color: var(--tblr-muted);
}

/* ── SmallStack crud-table / table-plain (activity logs, CRUD lists, ──
   mcp & api admin tables). Ported from smallstack/crud/_table_styles.html
   so these classes render their tinted header + zebra striping globally —
   the CRUD object_list includes that partial, but the activity tab tables
   (.crud-table on Recent/Top Paths, .table-plain on Errors/By Method) and
   the mcp/api admin tables (.table-plain) use them without it and rendered
   flat. The visual rules are shared; only table-layout:fixed and the cell
   ellipsis are crud-table-only (those tables carry a <colgroup>; the
   .table-plain tables have none and must keep auto layout). */
.crud-table,
.table-plain {
    width: 100%;
    border-collapse: collapse;
}
.crud-table {
    table-layout: fixed;
}
.crud-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Checkbox + actions columns must never truncate (the ellipsis would
   render a stray "..." next to the select checkbox). */
.crud-table td:has(.bulk-select-row),
.crud-table td.crud-actions-cell {
    overflow: visible;
    text-overflow: clip;
}
.crud-table tr:nth-child(odd),
.crud-table tr:nth-child(even),
.table-plain tr:nth-child(odd),
.table-plain tr:nth-child(even) {
    background: transparent;
}
.crud-table thead tr,
.table-plain thead tr {
    background-color: rgba(var(--tblr-primary-rgb), 0.15) !important;
    border: none !important;
}
.crud-table thead th,
.table-plain thead th {
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 10px 16px;
    border: none !important;
    background-color: transparent !important;
    color: var(--tblr-secondary) !important;
    text-align: left;
    /* Headers are short labels — never break them mid-word. With
       table-layout:fixed the column must be wide enough (set via the
       template's <colgroup>); nowrap keeps "METHOD"/"STATUS" on one line. */
    white-space: nowrap;
}
/* Accessible sortable headers (v0.14 upstream): sortable_th renders a real
   <button class="th-sort"> inside <th class="th-sortable"> with aria-sort.
   Ported from components.css — the button reset keeps the header looking
   like plain header text at the table's padding. */
.crud-table thead th.th-sortable,
.table-plain thead th.th-sortable {
    padding: 0 !important;
}
.th-sort {
    display: flex;
    align-items: center;
    gap: 0.35em;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px;
    margin: 0;
    border: none;
    background: transparent;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: color 0.15s;
}
.th-sort:focus:not(:focus-visible) { outline: none; }
/* Right-aligned numeric columns (sortable_th align="right") */
.th-right .th-sort {
    justify-content: flex-end;
    text-align: right;
}
/* Sortable-column discoverability: highlight the header and reveal a faint
   arrow on hover so it's clear the column can be clicked to sort. Covers the
   new button structure plus legacy <th hx-get> / <th><a> sortable headers. */
.crud-table thead th[hx-get],
.table-plain thead th[hx-get],
.crud-table thead th a[href],
.table-plain thead th a[href] {
    cursor: pointer;
    transition: color 0.15s;
}
.th-sort:hover,
.crud-table thead th[hx-get]:hover,
.table-plain thead th[hx-get]:hover,
.crud-table thead th a[href]:hover,
.table-plain thead th a[href]:hover {
    color: var(--tblr-primary) !important;
}
.th-sort:hover > span[aria-hidden],
.crud-table thead th[hx-get]:hover > span,
.crud-table thead th a[href]:hover > span,
.table-plain thead th[hx-get]:hover > span,
.table-plain thead th a[href]:hover > span {
    visibility: visible !important;
    opacity: 0.55;
}
.crud-table tbody tr,
.table-plain tbody tr {
    border: none !important;
}
.crud-table tbody tr:nth-child(odd),
.table-plain tbody tr:nth-child(odd) {
    background-color: rgba(var(--tblr-primary-rgb), 0.04) !important;
}
.crud-table tbody tr:nth-child(even),
.table-plain tbody tr:nth-child(even) {
    background-color: rgba(var(--tblr-primary-rgb), 0.12) !important;
}
.crud-table tbody td,
.crud-table tbody th,
.table-plain tbody td,
.table-plain tbody th {
    border: none !important;
    padding: 10px 16px;
    font-size: 0.85rem;
}
.crud-table tbody tr:hover,
.table-plain tbody tr:hover {
    background-color: rgba(var(--tblr-primary-rgb), 0.20) !important;
}
.crud-table a,
.table-plain a {
    color: var(--tblr-primary);
    text-decoration: none;
}
.crud-table a:hover,
.table-plain a:hover {
    text-decoration: underline;
}
.crud-actions-cell {
    text-align: right;
    white-space: nowrap;
}
/* Tint icon-only delete links red. Skipped when the element is a full
   button (.btn.btn-danger has its own red background + white text) — else
   a full Delete button (edit/detail pages) renders red text on red. */
.crud-action-delete:not(.btn) {
    color: var(--delete-button-bg, #dc3545) !important;
}
/* Full danger buttons that also carry .crud-action-delete (the modal-hook
   Delete on edit/detail pages) must keep readable white text. */
.btn.btn-danger.crud-action-delete,
.btn.btn-danger.crud-action-delete:hover,
.btn.btn-danger.crud-action-delete:focus {
    color: #fff !important;
}

/* ── SmallStack form/action buttons (btn-tint / btn-save / btn-cancel) ──
   Ported from components.css. Upstream forms rendered via the Tabler bridge
   (e.g. the tabbed user-edit form) use these SmallStack-specific button
   classes, which Tabler doesn't define — so Save / password-reset / unlock
   rendered as plain gray browser buttons. (btn-danger / btn-secondary are
   left to Tabler's own styling.) */
/* All bare SmallStack buttons share Tabler's .btn metrics (padding,
   font-size, line-height, radius, and a 1px border so borderless tinted
   variants match the visual height of real Tabler buttons) — they sit
   flush next to .btn.btn-primary on the same header row. */
.btn-tint,
a.btn-tint:link,
a.btn-tint:visited {
    display: inline-block;
    padding: 0.4375rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--tblr-border-radius, 4px);
    background: color-mix(in srgb, var(--tblr-primary) 20%, var(--tblr-card-bg));
    color: var(--tblr-primary);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4285714;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.btn-tint:hover,
.btn-tint:focus-visible {
    background: color-mix(in srgb, var(--tblr-primary) 35%, var(--tblr-card-bg));
    color: var(--tblr-primary);
    text-decoration: none;
    outline: none;
}
/* Bare .btn-primary (runbook "New Runbook", token forms, …) — the color
   block near the top of this file paints it; give it .btn metrics too. */
.btn-primary:not(.btn) {
    display: inline-block;
    padding: 0.4375rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--tblr-border-radius, 4px);
    font-size: 0.875rem;
    line-height: 1.4285714;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-save {
    padding: 0.4375rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--tblr-border-radius, 4px);
    background: var(--tblr-primary);
    color: #1a1c23;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4285714;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-save:hover {
    background: color-mix(in srgb, var(--tblr-primary) 88%, black);
}
.btn-cancel,
a.btn-cancel:link,
a.btn-cancel:visited {
    /* Reset the default <button> chrome — on a <button> (e.g. the runbook
       modal Cancel) it would otherwise keep the browser's gray box + border,
       which reads as low-contrast disabled text in dark mode. */
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 0.4375rem 1.25rem;
    color: var(--tblr-muted);
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.4285714;
    transition: color 0.15s;
}
.btn-cancel:hover {
    color: var(--tblr-body-color);
}
/* Bare SmallStack .btn-secondary / .btn-outline (used without Tabler's .btn,
   e.g. runbook "Download All"). Scoped :not(.btn) so Tabler's own
   .btn.btn-secondary keeps its styling. */
.btn-secondary:not(.btn),
a.btn-secondary:not(.btn):link,
a.btn-secondary:not(.btn):visited {
    display: inline-block;
    padding: 0.4375rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--tblr-border-radius, 4px);
    background: color-mix(in srgb, var(--tblr-primary) 15%, var(--tblr-card-bg));
    color: var(--tblr-primary);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4285714;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-secondary:not(.btn):hover {
    background: color-mix(in srgb, var(--tblr-primary) 25%, var(--tblr-card-bg));
}
.btn-outline:not(.btn),
a.btn-outline:not(.btn):link,
a.btn-outline:not(.btn):visited {
    display: inline-block;
    padding: 0.4375rem 1rem;
    border: 1px solid color-mix(in srgb, var(--tblr-body-color) 20%, var(--tblr-card-bg));
    border-radius: var(--tblr-border-radius, 4px);
    background: transparent;
    color: var(--tblr-muted);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4285714;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.btn-outline:not(.btn):hover {
    border-color: var(--tblr-primary);
    color: var(--tblr-primary);
}

/* ── SmallStack crud-modal (runbook download modal, CRUD delete/bulk) ────
   Ported from components.css. The overlay defaults to display:flex and the
   template toggles an inline display:none, so this only styles the panel. */
.crud-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}
.crud-modal {
    width: 90%;
    max-width: 420px;
    overflow: hidden;
    background: var(--tblr-card-bg);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.crud-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tblr-border-color);
    background: color-mix(in srgb, var(--tblr-primary) 8%, var(--tblr-card-bg));
}
.crud-modal-body {
    padding: 16px;
}
.crud-modal-close {
    border: none;
    background: none;
    color: var(--tblr-muted);
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    padding: 2px 6px;
}
.crud-modal-close:hover {
    color: var(--tblr-body-color);
}

/* ── SmallStack clickable stat cards (backup activity KPIs, etc.) ──────
   Ported from theme.css. These .card stat tiles open a drill-down modal
   on click but, without the port, gave no pointer cursor or hover cue. */
.stat-card-clickable {
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.stat-card-clickable:hover {
    border-color: var(--tblr-primary) !important;
    background: color-mix(in srgb, var(--tblr-primary) 8%, var(--tblr-card-bg));
}

/* ── SmallStack stat-card GRID (runbook dashboard, admin KPI tiles) ─────
   The {% stat_card %} tag / .stat-cards grid. Ported from components.css so
   the tiles render as accent-striped metric cards instead of a flat list. */
.stat-cards {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.stat-card {
    flex: 1;
    min-width: 140px;
    padding: 0.9rem 1.1rem 1rem 1rem;
    text-align: left;
    background: var(--tblr-card-bg);
    border: 1px solid color-mix(in srgb, var(--tblr-body-color) 9%, transparent);
    border-left: 3px solid var(--tblr-primary);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.stat-card-value {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--tblr-primary);
    font-feature-settings: "tnum", "lnum";
    letter-spacing: -0.015em;
}
.stat-card-unit {
    font-size: 0.55em;
    color: var(--tblr-muted);
    margin-left: 2px;
}
.stat-card-label {
    font-family: var(--font-monospace);
    font-size: 0.68rem;
    color: var(--tblr-muted);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 600;
    line-height: 1.4;
}
.stat-card--success { border-left-color: var(--success-fg); }
.stat-card--success .stat-card-value { color: var(--success-fg); }
.stat-card--warning { border-left-color: var(--warning-fg); }
.stat-card--warning .stat-card-value { color: var(--warning-fg); }
.stat-card--danger { border-left-color: var(--error-fg); }
.stat-card--danger .stat-card-value { color: var(--error-fg); }
.stat-card--muted { border-left-color: color-mix(in srgb, var(--tblr-body-color) 20%, transparent); }
.stat-card--muted .stat-card-value { color: var(--tblr-muted); }

/* ── SmallStack .stat-modal (runbook drill-downs use this, NOT the Tabler
   bootstrap stat_modal). Without the port .stat-modal has no display:none,
   so the "Details / Loading…" panel renders inline on the page. */
.stat-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1055;
    align-items: center;
    justify-content: center;
}
.stat-modal.open {
    display: flex;
}
.stat-modal-panel {
    width: min(80%, 90vw);
    height: min(520px, 80vh);
    display: flex;
    flex-direction: column;
    background: var(--tblr-card-bg);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--radius-md, 6px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.stat-modal-panel > .card-body {
    overflow-y: auto;
    min-height: 0;
    flex: 1;
}
.stat-modal-panel table {
    width: 100%;
    border-collapse: collapse;
}
.stat-modal-panel thead tr,
.stat-modal-panel thead th {
    background-color: color-mix(in srgb, var(--tblr-primary) 15%, var(--tblr-card-bg)) !important;
    border: none !important;
}
.stat-modal-panel thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 10px 16px;
    color: var(--tblr-muted) !important;
    text-align: left;
}
.stat-modal-panel tbody tr { border: none !important; }
.stat-modal-panel tbody tr:nth-child(odd) {
    background-color: color-mix(in srgb, var(--tblr-primary) 4%, var(--tblr-card-bg)) !important;
}
.stat-modal-panel tbody tr:nth-child(even) {
    background-color: color-mix(in srgb, var(--tblr-primary) 12%, var(--tblr-card-bg)) !important;
}
.stat-modal-panel tbody td {
    border: none !important;
    padding: 10px 16px;
    font-size: 0.85rem;
}
.stat-modal-panel tbody tr:hover {
    background-color: color-mix(in srgb, var(--tblr-primary) 20%, var(--tblr-card-bg)) !important;
}

/* ── SmallStack display-palette (CRUD list/detail view switcher) ───────
   The icon buttons that toggle table/grid display. Ported from
   components.css; without it they render as default gray browser buttons. */
.display-palette {
    display: inline-flex;
    gap: 0.25rem;
    margin-right: 0.75rem;
}
.display-palette-btn {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--tblr-border-color) !important;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    background: var(--tblr-card-bg) !important;
    color: var(--tblr-body-color) !important;
    transition: background 0.15s, color 0.15s;
}
.display-palette-btn.active {
    background: var(--tblr-primary) !important;
    color: #1a1c23 !important;
}
.display-palette-btn:hover:not(.active) {
    background: color-mix(in srgb, var(--tblr-primary) 15%, var(--tblr-card-bg)) !important;
}

/* ── SmallStack CRUD detail grid (object detail, ?display=grid) ─────────
   Two-column label/value grid. Ported from the inline <style> in
   smallstack/crud/_form_styles.html, which the Tabler detail page doesn't
   include — so the detail rendered as an unstyled stacked list. */
.crud-detail-grid {
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
}
.crud-detail-grid .crud-grid-row {
    display: grid;
    grid-template-columns: minmax(140px, 0.35fr) 1fr;
    border-bottom: 1px solid var(--tblr-border-color);
}
.crud-detail-grid .crud-grid-row:last-child {
    border-bottom: none;
}
.crud-detail-grid .crud-grid-label {
    padding: 0.7rem 0.9rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--tblr-body-color);
    background: color-mix(in srgb, var(--tblr-body-color) 5%, var(--tblr-card-bg));
    border-right: 1px solid var(--tblr-border-color);
    display: flex;
    align-items: center;
}
.crud-detail-grid .crud-grid-value {
    padding: 0.7rem 0.9rem;
    font-size: 0.9rem;
    color: var(--tblr-body-color);
    background: color-mix(in srgb, var(--tblr-body-color) 2%, var(--tblr-card-bg));
    min-height: 2.6rem;
    box-sizing: border-box;
    word-break: break-word;
    display: flex;
    align-items: center;
}
.crud-detail-grid .crud-grid-value:empty::before {
    content: "\2014";
    color: var(--tblr-muted);
}




/* ── Calendar display (TableDisplay + DayCounter calendar partial) ─
   Extracted from apps/tabler/templates/smallstack/crud/displays/
   calendar.html so custom calendar templates (apps/daycounters/) get
   the same chrome without duplicating the rules. */
/* Calendar Display — Tabler-compatible styles */
.calendar-display {
    background: var(--tblr-card-bg, var(--tblr-bg-surface));
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    overflow: hidden;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 1rem;
    background: var(--tblr-bg-surface-secondary, rgba(var(--tblr-body-color-rgb), 0.024));
    border-bottom: 1px solid var(--tblr-border-color);
}

.calendar-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.calendar-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-sm, 4px);
    background: var(--tblr-card-bg, var(--tblr-bg-surface));
    color: var(--tblr-body-color);
    text-decoration: none;
    font-size: 1.1rem;
    line-height: 1;
    transition: border-color 0.15s, background 0.15s;
}
.calendar-nav-btn:link,
.calendar-nav-btn:visited { color: var(--tblr-body-color); }
.calendar-nav-btn:hover {
    border-color: var(--tblr-primary);
    background: rgba(var(--tblr-primary-rgb), 0.08);
    text-decoration: none;
}

.calendar-title {
    margin: 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tblr-body-color);
}

.calendar-today-btn {
    margin-left: 0.5rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-sm, 4px);
    background: var(--tblr-card-bg, var(--tblr-bg-surface));
    color: var(--tblr-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}
.calendar-today-btn:link,
.calendar-today-btn:visited { color: var(--tblr-secondary); }
.calendar-today-btn:hover {
    border-color: var(--tblr-primary);
    color: var(--tblr-primary);
    text-decoration: none;
}

.calendar-count {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    background: rgba(var(--tblr-primary-rgb), 0.08);
    border: 1px solid rgba(var(--tblr-primary-rgb), 0.15);
    border-radius: var(--tblr-border-radius-sm, 4px);
}
.calendar-count-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tblr-primary);
    line-height: 1;
}
.calendar-count-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tblr-secondary);
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--tblr-bg-surface-secondary, rgba(var(--tblr-body-color-rgb), 0.024));
    border-bottom: 1px solid var(--tblr-border-color);
}
.calendar-weekday {
    padding: 0.4rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tblr-secondary);
    text-align: center;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(68px, auto);
}

.calendar-cell {
    position: relative;
    padding: 0.2rem;
    border-right: 1px solid var(--tblr-border-color-translucent, rgba(var(--tblr-body-color-rgb), 0.08));
    border-bottom: 1px solid var(--tblr-border-color-translucent, rgba(var(--tblr-body-color-rgb), 0.08));
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.calendar-cell:nth-child(7n) { border-right: none; }

.calendar-cell--blank {
    background: rgba(var(--tblr-body-color-rgb), 0.02);
}
.calendar-cell--today {
    background: rgba(var(--tblr-primary-rgb), 0.06);
}

.calendar-cell-day {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--tblr-secondary);
    padding: 0 0.15rem 0.1rem;
}
.calendar-cell--today .calendar-cell-day {
    color: var(--tblr-primary);
    font-weight: 700;
}

.calendar-event {
    position: relative;
    display: block;
    padding: 0.2rem 0.4rem;
    background: rgba(var(--tblr-primary-rgb), 0.12);
    border-left: 3px solid var(--tblr-primary);
    border-radius: var(--tblr-border-radius-sm, 3px);
    font-size: 0.78rem;
    color: var(--tblr-body-color);
    text-decoration: none;
    transition: background 0.15s;
}
.calendar-event-label {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.calendar-event:link,
.calendar-event:visited { color: var(--tblr-body-color); }
.calendar-event:hover {
    background: rgba(var(--tblr-primary-rgb), 0.22);
    text-decoration: none;
    z-index: 2;
}

/* Status modifiers */
.calendar-event--success,
.calendar-event--success:link,
.calendar-event--success:visited {
    background: rgba(var(--tblr-success-rgb), 0.12);
    border-left-color: var(--tblr-success);
    color: var(--tblr-success);
}
.calendar-event--success:hover { background: rgba(var(--tblr-success-rgb), 0.25); }

.calendar-event--warning,
.calendar-event--warning:link,
.calendar-event--warning:visited {
    background: rgba(var(--tblr-warning-rgb), 0.12);
    border-left-color: var(--tblr-warning);
    color: var(--tblr-warning);
}
.calendar-event--warning:hover { background: rgba(var(--tblr-warning-rgb), 0.25); }

.calendar-event--danger,
.calendar-event--danger:link,
.calendar-event--danger:visited {
    background: rgba(var(--tblr-danger-rgb), 0.12);
    border-left-color: var(--tblr-danger);
    color: var(--tblr-danger);
}
.calendar-event--danger:hover { background: rgba(var(--tblr-danger-rgb), 0.25); }

/* Block variant */
.calendar-display--block .calendar-grid { grid-auto-rows: minmax(90px, auto); }
.calendar-display--block .calendar-cell { padding: 0.3rem; gap: 0.25rem; }
.calendar-display--block .calendar-event {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.5rem;
    border-left-width: 4px;
    font-size: 1.15rem;
    font-weight: 700;
}
.calendar-display--block .calendar-event-label { text-align: center; }

/* Hover tooltip */
.calendar-event-tooltip {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 4px;
    min-width: 200px;
    max-width: 280px;
    padding: 0.5rem 0.65rem;
    background: var(--tblr-card-bg, var(--tblr-bg-surface));
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-sm, 4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    font-size: 0.7rem;
    color: var(--tblr-body-color);
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.12s, transform 0.12s, visibility 0.12s;
    pointer-events: none;
    z-index: 10;
}
.calendar-event:hover .calendar-event-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.calendar-event-tooltip-title {
    font-weight: 700;
    font-size: 0.75rem;
    margin-bottom: 0.35rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--tblr-border-color);
    color: var(--tblr-body-color);
    white-space: normal;
}
.calendar-event-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.15rem;
}
.calendar-event-tooltip-label {
    text-transform: uppercase;
    font-size: 0.6rem;
    letter-spacing: 0.03em;
    color: var(--tblr-secondary);
    font-weight: 600;
}

/* Flip tooltip on right-edge cells */
.calendar-cell:nth-child(7n) .calendar-event-tooltip,
.calendar-cell:nth-child(7n-1) .calendar-event-tooltip {
    left: auto;
    right: 0;
}

/* ---------------------------------------------------------------------------
   Notification bell (upstream apps/notifications) — Tabler navbar port.
   Upstream renders .notif-bell / .notif-bell-badge in its own topbar; here the
   markup lives in tabler/includes/navbar.html and only needs badge placement.
   --------------------------------------------------------------------------- */
.notif-bell {
    display: flex;
    align-items: center;
}
.notif-bell-badge {
    position: absolute;
    top: -0.35rem;
    right: -0.5rem;
    min-width: 1rem;
    padding: 0 0.25rem;
    font-size: 0.625rem;
    line-height: 1rem;
    border-radius: 999px;
    /* Explicit, not inherited: the count sits on a solid .bg-red, but the
       parent nav-link is .text-reset, so the digit inherited the navbar's grey
       and vanished against the red in light mode. White reads on bg-red in
       both themes. */
    color: #fff;
}

/* ---------------------------------------------------------------------------
   Empty states (upstream smallstack/includes/empty_state.html) — Tabler port.

   The shared empty-state component is used by the dashboard, the MCP tools
   admin, search, the notifications inbox and the CRUD lists, but its styles
   live in smallstack/css/components.css, which this downstream does not load.
   Without them the markup renders as unpadded, unstyled text flush to the card
   edge. Ported verbatim; every var below is aliased to its --tblr-* equivalent
   above, so these follow the active accent and dark/light mode.
   --------------------------------------------------------------------------- */
.empty-state {
    text-align: center;
}
.empty-state-body {
    padding: 2.5rem 1.5rem;
    max-width: 540px;
    margin: 0 auto;
}
.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 12%, var(--card-bg, var(--body-bg)));
    color: var(--primary);
}
.empty-state-icon svg {
    width: 28px;
    height: 28px;
}
.empty-state-title {
    font-family: var(--font-monospace);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--body-fg);
    margin-bottom: 0.5rem;
}
.empty-state-message {
    color: var(--body-quiet-color);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
}
.empty-state-message code {
    font-family: var(--font-monospace);
    background: color-mix(in srgb, var(--body-fg) 7%, var(--card-bg, var(--body-bg)));
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.85em;
    color: var(--body-fg);
}
.empty-state-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    justify-content: center;
}
.empty-state-cta {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    background: color-mix(in srgb, var(--primary) 16%, var(--card-bg, var(--body-bg)));
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    transition: background 0.15s, border-color 0.15s;
}
.empty-state-cta:hover,
.empty-state-cta:focus-visible {
    background: var(--primary);
    color: var(--btn-primary-fg, #fff);
    border-color: var(--primary);
}
.empty-state-cta:focus:not(:focus-visible) {
    outline: none;
}
.empty-state-secondary {
    font-size: 0.85rem;
    color: var(--body-quiet-color);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--body-quiet-color) 25%, transparent);
}
.empty-state-secondary:hover,
.empty-state-secondary:focus-visible {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.empty-state-secondary:focus:not(:focus-visible) {
    outline: none;
}

/* ---------------------------------------------------------------------------
   .sr-only — visually hidden, still announced by screen readers.

   Upstream defines this in smallstack/css/theme.css, which this downstream does
   not load, and Bootstrap/Tabler name their equivalent .visually-hidden. Without
   it every upstream {% comment %}sr-only{% endcomment %} span renders as visible
   body text: the notifications inbox printed a literal "Unread." before each
   row, and the logs viewer and activity partial leak theirs the same way.
   --------------------------------------------------------------------------- */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ── Ported from upstream components.css (v0.24–v0.29): column resize, wrap mode,
   activity drilldowns. tabler/base.html does not load components.css, so these
   live here and resolve through the aliases above. ── */
/* Numeric columns: the header label sits over the numbers it sorts. */
.crud-table thead th.th-right .th-sort { justify-content: flex-end; text-align: right; }
.crud-table thead th.th-right { text-align: right; }
.crud-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* --------------------------------------------------------------------------
   Column resize (table-resize.js)
   --------------------------------------------------------------------------
   Every data header carries a .col-resizer on its right edge. The handle is a
   focusable role="separator": drag or arrow keys change the <th> width,
   double-click / Enter fits the column to its content. The table uses
   table-layout: fixed so header widths are the column widths. Once a user has
   resized, the script pins every data column to px and sets a min-width on
   the table so widening one column grows the table (the wrapper scrolls)
   instead of silently squeezing its neighbours.
   -------------------------------------------------------------------------- */
.crud-table thead th[data-field] {
    position: relative;
}
/* A resized table can be wider than the card. The wrapper must scroll it, not
   hand its min-content width up to a flex/grid ancestor (which would widen the
   whole page). `contain: inline-size` makes the wrapper's intrinsic width
   independent of its contents, whatever the ancestors are. */
.crud-table-wrap {
    contain: inline-size;
    max-width: 100%;
}
.col-resizer {
    position: absolute;
    top: 0;
    right: -5px;
    bottom: 0;
    width: 10px;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
    z-index: 1;
    /* Inert until the script marks the table — no cursor hint for a handle that does nothing. */
    display: none;
}
.crud-table.is-resizable .col-resizer {
    display: block;
}
/* The visible part: a hairline that only shows on header hover, accent on the active handle. */
.col-resizer::after {
    content: "";
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: 4px;
    width: 2px;
    border-radius: 1px;
    background: transparent;
    transition: background 0.12s;
}
.crud-table thead:hover .col-resizer::after {
    background: color-mix(in srgb, var(--body-fg) 18%, transparent);
}
.col-resizer:hover::after,
.col-resizer.is-dragging::after,
.col-resizer:focus-visible::after {
    background: var(--primary);
    top: 0;
    bottom: 0;
}
.col-resizer:focus:not(:focus-visible) { outline: none; }
.crud-table.is-dragging,
.crud-table.is-dragging * {
    cursor: col-resize !important;
    user-select: none;
}
/* Last data column's handle must not hang past the table edge when it is the final header. */
.crud-table thead th[data-field]:last-child .col-resizer {
    right: 0;
    width: 6px;
}
.crud-table thead th[data-field]:last-child .col-resizer::after {
    left: 2px;
}

/* Wrap mode — the "Wrap text" tool: cells wrap instead of clipping. */
.crud-table.is-wrapping td {
    white-space: normal;
    overflow-wrap: anywhere;
}
.crud-table.is-wrapping td.crud-actions-cell {
    white-space: nowrap;
}

/* Tools row under the table (un-hidden by the script). */
.crud-table-tools {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem 0;
}
.crud-table-tool {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 4px);
    background: transparent;
    font: inherit;
    font-size: 0.72rem;
    color: var(--body-quiet-color);
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.crud-table-tool:hover {
    color: var(--body-fg);
    background: color-mix(in srgb, var(--primary) 10%, var(--body-bg));
}
.crud-table-tool[aria-pressed="true"] {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    background: color-mix(in srgb, var(--primary) 12%, var(--body-bg));
}
.crud-table-tool:focus:not(:focus-visible) { outline: none; }

@media (max-width: 768px) {
    /* Too fiddly for touch at phone width; the wrapper already scrolls horizontally. */
    .crud-table.is-resizable .col-resizer { display: none; }
    .crud-table-reset-widths { display: none; }
}



/* --------------------------------------------------------------------------
   Activity module (apps/activity) — status pills, probe flags, histogram,
   key/value facts. All palette-derived; no literals.
   -------------------------------------------------------------------------- */
.status-pill {
    display: inline-block;
    min-width: 2.6em;
    padding: 1px 7px;
    border-radius: 4px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}
.status-pill--ok { background: color-mix(in srgb, var(--success-fg) 14%, var(--card-bg)); color: var(--success-fg); }
.status-pill--redirect { background: color-mix(in srgb, var(--body-fg) 10%, var(--card-bg)); color: var(--body-quiet-color); }
.status-pill--warn { background: color-mix(in srgb, var(--warning-fg) 16%, var(--card-bg)); color: var(--warning-fg); }
.status-pill--error { background: color-mix(in srgb, var(--error-fg) 16%, var(--card-bg)); color: var(--error-fg); }

.probe-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3em;
    height: 1.3em;
    margin-left: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--warning-fg) 18%, var(--card-bg));
    color: var(--warning-fg);
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: middle;
    cursor: help;
}
.reason-chip {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--warning-fg) 14%, var(--card-bg));
    color: var(--warning-fg);
    white-space: nowrap;
}
.reason-chip--danger {
    background: color-mix(in srgb, var(--error-fg) 14%, var(--card-bg));
    color: var(--error-fg);
}

/* The warning area: a card with a severity stripe. */
.activity-alert { border-left: 4px solid var(--warning-fg); }
.activity-alert--danger { border-left-color: var(--error-fg); }
.activity-alert--muted { border-left-color: var(--success-fg); }

/* Traffic histogram: one bar per bucket, stacked by status class. */
.activity-hist { display: flex; align-items: flex-end; gap: 2px; height: 72px; }
.activity-hist-bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.activity-hist-stack { display: flex; flex-direction: column; border-radius: 2px; overflow: hidden; }
.activity-hist-empty { height: 3px; border-radius: 2px; background: var(--card-border); }
.activity-hist-seg--server { background: var(--error-fg); }
.activity-hist-seg--client { background: var(--warning-fg); }
.activity-hist-seg--redirect { background: color-mix(in srgb, var(--body-quiet-color) 60%, var(--card-bg)); }
.activity-hist-seg--ok { background: var(--primary); opacity: 0.85; }
.activity-hist-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.72rem; color: var(--body-quiet-color); }
/* Hover: the column lifts and a tooltip summarises the bucket (histogram.html wires it). */
.activity-hist-wrap { position: relative; }
.activity-hist-bar { border-radius: 3px; transition: background 0.1s; cursor: default; }
.activity-hist-bar:hover, .activity-hist-bar.is-active { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.activity-hist-bar:hover .activity-hist-stack, .activity-hist-bar.is-active .activity-hist-stack { filter: brightness(1.25); }
.activity-hist-tip {
    /* Moved to <body> by the chart script and placed in viewport coordinates,
       so no card/header stacking context can paint over it or clip it. */
    position: fixed;
    z-index: 1000;
    min-width: 170px;
    padding: 8px 10px;
    border-radius: var(--radius-sm, 6px);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--body-fg);
    pointer-events: none;
    transform: translate(-50%, -8px);
    opacity: 0;
    transition: opacity 0.08s;
}
.activity-hist-tip.is-visible { opacity: 1; }
.activity-hist-tip .tip-when { color: var(--body-quiet-color); font-size: 0.72rem; white-space: nowrap; }
.activity-hist-tip .tip-total { font-weight: 700; font-size: 0.92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.activity-hist-tip .tip-share { color: var(--body-quiet-color); font-weight: 500; font-size: 0.72rem; }
.activity-hist-tip .tip-rows { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; margin-top: 6px; align-items: center; font-variant-numeric: tabular-nums; }
.activity-hist-tip .tip-dot { width: 8px; height: 8px; border-radius: 2px; }
.activity-hist-tip .tip-n { text-align: right; font-weight: 600; }
.activity-hist-tip .tip-empty { color: var(--body-quiet-color); }
.activity-legend { display: inline-flex; gap: 12px; font-size: 0.72rem; color: var(--body-quiet-color); }
.activity-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: var(--primary); }
.activity-legend .is-redirect::before { background: color-mix(in srgb, var(--body-quiet-color) 60%, var(--card-bg)); }
.activity-legend .is-client::before { background: var(--warning-fg); }
.activity-legend .is-server::before { background: var(--error-fg); }

/* Key / value facts list (user + resource detail side panels). */
.activity-kv { list-style: none; margin: 0; padding: 0; }
.activity-kv li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--card-border); font-size: 0.85rem; }
.activity-kv li:last-child { border-bottom: none; }
.activity-kv .k { color: var(--body-quiet-color); flex: 0 0 auto; }
.activity-kv .v { text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.activity-mono { font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; font-size: 0.85rem; }

/* Header tools (the right side of page-header-bleed): ONE row — a compact
   inline stat strip and the window picker — so the header stays one line
   tall and the title does not get pushed down. Wraps below ~900px. */
.page-header-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}
/* The title block yields first: it sizes to the available width instead of
   to its longest line, so a slightly longer subtitle ("in the last 30 days"
   vs "all time") wraps its own text rather than shoving the tools onto a
   second row. Below tablet width the tools take a full row of their own. */
.page-header-content:has(+ .page-header-tools) {
    flex: 1 1 0;
    min-width: 0;
}
@media (max-width: 900px) {
    .page-header-tools {
        flex-basis: 100%;
        justify-content: flex-start;
    }
}
.header-stats {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 5px 12px;
    background: color-mix(in srgb, var(--primary) 8%, var(--body-bg));
    border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--body-bg));
    border-radius: var(--radius-sm, 6px);
}
.header-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}
.header-stat + .header-stat::before {
    content: "";
    align-self: center;
    width: 1px;
    height: 0.9em;
    margin: 0 10px;
    background: color-mix(in srgb, var(--body-fg) 18%, transparent);
}
.header-stat-value {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.header-stat-value.is-success { color: var(--success-fg); }
.header-stat-value.is-warning { color: var(--warning-fg); }
.header-stat-value.is-error { color: var(--error-fg); }
.header-stat-value.is-plain { color: var(--body-fg); }
.header-stat-label {
    font-size: 0.68rem;
    color: var(--body-quiet-color);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.activity-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; margin-bottom: 24px; }
.activity-grid-even { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; }
@media (max-width: 900px) {
    .activity-grid, .activity-grid-even { grid-template-columns: 1fr; }
}

/* A page that puts the display palette in its own header (calendar Events) must
   not show the copy this fork's list template renders in the card body. */
body:has(.page-header-actions .display-palette) #crud-list-content > .display-palette {
    display: none;
}