/*
 * 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;
    --radius-sm: 4px;
    --radius-md: 6px;
}

/* ── 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);
    --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);
    --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 page-header + crud-form + list-toolbar — Tabler skin
   Ported from upstream so new MCP admin and tokenmgr pages render
   cleanly inside the Tabler chrome without per-template rewrites.
   ============================================================ */
/* ── SmallStack-style page header (used by mcp/admin, tokenmgr, etc.) ─
   Upstream apps use a "bleed" header that breaks out of the page-body
   container with a tinted background. We render it inside Tabler's
   .container-xl so it looks intentional instead of forced edge-to-edge. */
.page-header-bleed {
    background: color-mix(in srgb, var(--tblr-primary) 8%, var(--tblr-body-bg));
    border-radius: var(--tblr-border-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

body.theme-dark .page-header-bleed, [data-bs-theme="dark"] .page-header-bleed {
    background: color-mix(in srgb, var(--tblr-primary) 12%, var(--tblr-card-bg));
}

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

.page-header-content h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--tblr-body-color);
    margin: 0;
}

.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 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;
}
.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 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 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;
}