/* TTLINK Custom Styles */

:root {
    /* Primary palette — distinct from Bootstrap defaults */
    --tt-primary:       #2563eb;  /* richer blue */
    --tt-primary-hover: #1d4ed8;
    --tt-danger:        #dc2626;  /* cleaner red */
    --tt-success:       #16a34a;  /* deeper green */
    --tt-warning:       #d97706;  /* amber — more serious than yellow */
    --tt-gray:          #64748b;  /* slate — blue-toned, not flat grey */
    --tt-light:         #f8fafc;  /* barely blue-tinted off-white */
    --tt-dark:          #0f172a;  /* deep slate-navy */

    /* Surface & structure */
    --tt-border:        #e2e8f0;  /* blue-tinted border */
    --tt-nav-bg:        #111214;  /* true black navbar */
    --tt-surface:       #ffffff;
    --tt-page-bg:       #f8fafc;

    /* Radii */
    --tt-radius:        0.375rem; /* 6 px — more modern than default 4 px */
    --tt-radius-sm:     0.25rem;
    --tt-radius-lg:     0.5rem;
}

.tt-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--tt-border);
}

.tt-card {
    background: var(--tt-surface);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.tt-table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--tt-dark);
    vertical-align: top;
    border-color: var(--tt-border);
}

.tt-table th,
.tt-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--tt-border);
}

.tt-table th {
    text-align: left;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tt-gray);
    background-color: var(--tt-light);
}

.tt-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: var(--tt-dark);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: var(--tt-radius);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

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

.tt-btn-primary:hover {
    background-color: var(--tt-primary-hover) !important;
    border-color: var(--tt-primary-hover) !important;
}

.tt-btn-danger {
    color: #fff !important;
    background-color: var(--tt-danger) !important;
    border-color: var(--tt-danger) !important;
}

.tt-btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    border-radius: var(--tt-radius-sm);
    font-weight: 500;
}

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

.tt-btn-danger.tt-btn-sm {
    color: #fff;
    background-color: var(--tt-danger);
    border-color: var(--tt-danger);
}

.tt-badge {
    display: inline-block;
    padding: 0.3em 0.65em;
    font-size: 0.72em;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 999px;  /* pill shape */
    letter-spacing: 0.02em;
    background-color: var(--tt-gray);
}

.tt-badge-success {
    background-color: var(--tt-success);
}

.tt-badge-warning {
    background-color: var(--tt-warning);
    color: #000;
}

.tt-badge-danger {
    background-color: var(--tt-danger);
}

.tt-form .tt-field {
    margin-bottom: 1rem;
}

.tt-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.tt-input {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--tt-dark);
    background-color: var(--tt-surface);
    background-clip: padding-box;
    border: 1px solid var(--tt-border);
    appearance: none;
    border-radius: var(--tt-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.tt-input:focus {
    border-color: var(--tt-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.tt-help {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--tt-gray);
}

.tt-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.5rem;
}

.tt-alert {
    position: relative;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--tt-radius);
    font-size: 0.9375rem;
}

.tt-alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.tt-alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.tt-alert-warning {
    color: #664d03;
    background-color: rgba(217, 119, 6, 0.1);
    border-color: #d97706;
}

.tt-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

/* Consistent max-width for device-scoped tab pages.
   Many templates include _device_context_tabs.html; this keeps layout stable when switching tabs. */
.tt-device-container {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* Device log: compact analysis first, technical evidence on demand. */
.tt-log-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--bs-border-color);
    border-radius: var(--tt-radius);
    background: var(--bs-body-bg);
    overflow: hidden;
}

.tt-log-metric {
    min-width: 0;
    padding: 0.75rem 0.9rem;
    border-right: 1px solid var(--bs-border-color);
}

.tt-log-metric:last-child { border-right: 0; }
.tt-log-metric span { display: block; color: var(--bs-secondary-color); font-size: 0.75rem; }
.tt-log-metric strong { display: block; margin-top: 0.15rem; font-size: 1.25rem; line-height: 1.25; }
.tt-log-metric.is-warning strong { color: var(--bs-warning-text-emphasis); }
.tt-log-metric.is-danger strong { color: var(--bs-danger); }
.tt-log-metric .tt-log-metric-time { font-size: 0.875rem; white-space: nowrap; }

.tt-log-insights {
    display: grid;
    gap: 0.4rem;
}

.tt-log-insight {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    padding: 0.55rem 0.75rem;
    border-left: 3px solid var(--bs-info);
    background: rgba(var(--bs-info-rgb), 0.08);
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

.tt-log-insight.is-danger {
    border-left-color: var(--bs-danger);
    background: rgba(var(--bs-danger-rgb), 0.08);
}

.tt-log-tabs { border-bottom: 1px solid var(--bs-border-color); }
.tt-log-tabs .nav-link { border-radius: var(--tt-radius) var(--tt-radius) 0 0; }
.tt-technical-table > tbody > tr:not(.tt-evidence-row) > td { padding-top: 0.7rem; padding-bottom: 0.7rem; }
.tt-evidence-row:hover > td { background: transparent !important; }
.tt-event-evidence { margin: 0 0 0.5rem; padding: 0.85rem 1rem; background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); }

@media (max-width: 767.98px) {
    .tt-log-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tt-log-metric:nth-child(2) { border-right: 0; }
    .tt-log-metric:nth-child(-n+2) { border-bottom: 1px solid var(--bs-border-color); }
}

/* ==============================================================
   Typography
   ============================================================== */
body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--tt-dark);
    background-color: var(--tt-page-bg);
    font-size: 0.9375rem;  /* 15px — tighter than Bootstrap's 16px */
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

h1 { font-size: 1.625rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }

/* Monospace: code, IDs, account numbers */
code, pre, kbd {
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, 'Courier New', monospace;
    font-size: 0.8125em;
}

/* Override Bootstrap's harsh pink --bs-code-color with a readable dark slate */
code {
    color: #1e3a5f;
    background-color: rgba(30, 58, 95, 0.07);
    padding: 0.1em 0.35em;
    border-radius: 0.2rem;
}

/* Dark mode: flip to a light blue-white so code is readable on dark backgrounds */
[data-bs-theme="dark"] code {
    color: #a8c8f0;
    background-color: rgba(168, 200, 240, 0.1);
}

/* ==============================================================
   Footer
   ============================================================== */
.tt-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    padding: 1.25rem 0;
    margin-top: 2rem;
    border-top: 1px solid var(--tt-border);
    font-size: 0.75rem;
    color: var(--tt-gray);
    opacity: 0.6;
    letter-spacing: 0.03em;
    width: 100%;
    text-align: center;
}

.tt-footer-sep {
    opacity: 0.5;
}

.tt-footer-version {
    color: inherit;
    text-decoration: none;
}

.tt-footer-version:hover {
    color: inherit;
    text-decoration: underline;
}

/* ==============================================================
   Navbar — true black with a subtle blue accent line
   ============================================================== */
.navbar.bg-dark {
    background-color: var(--tt-nav-bg) !important;
    border-bottom: 2px solid rgba(37, 99, 235, 0.45);
    padding-top: 0;
    padding-bottom: 0;
    min-height: 3.25rem;
}

/* Branded dot before TTLINK */
.navbar-brand {
    letter-spacing: -0.025em;
    font-weight: 700;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.navbar-brand::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--tt-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.navbar-dark .navbar-nav .nav-link {
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #ffffff;
}

/* Navbar dropdown — less Bootstrap-y */
.navbar .dropdown-menu {
    border-color: rgba(255,255,255,0.08);
    border-radius: var(--tt-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.12);
    padding: 0.375rem;
    min-width: 11rem;
    font-size: 0.8125rem;
}

.navbar .dropdown-item {
    border-radius: calc(var(--tt-radius) - 2px);
    padding: 0.4rem 0.6rem;
    font-weight: 500;
}

.navbar .dropdown-divider {
    margin: 0.3rem 0.25rem;
}

/* ==============================================================
   Bootstrap component overrides — align with tt-* palette
   ============================================================== */

/* Body background — driven purely by CSS var, not the Bootstrap utility class */
body {
    background-color: var(--tt-page-bg);
}

/* Bootstrap .card — match tt-card look */
.card {
    border-color: var(--tt-border);
    border-radius: var(--tt-radius-lg);
    box-shadow: none;
}

/* shadow-sm override — Bootstrap's version is too recognizable */
.shadow-sm {
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

/* ==============================================================
   Button overrides — more app-like, less Bootstrap-like
   ============================================================== */
.btn {
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    padding: 0.4rem 0.875rem;
    border-radius: var(--tt-radius);
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.btn-sm {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
}

.btn-outline-light {
    --bs-btn-border-color: rgba(255,255,255,0.25);
    --bs-btn-hover-bg:     rgba(255,255,255,0.1);
    --bs-btn-hover-border-color: rgba(255,255,255,0.4);
}

/* ==============================================================
   Alert overrides — left-border accent instead of colored backgrounds
   ============================================================== */
.alert {
    border: none;
    border-left: 3px solid;
    border-radius: 0 var(--tt-radius) var(--tt-radius) 0;
    background-color: transparent;
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
}

.alert-warning {
    border-left-color: var(--tt-warning);
    background-color: rgba(217, 119, 6, 0.07);
    color: #92400e;
}

.alert-danger {
    border-left-color: var(--tt-danger);
    background-color: rgba(220, 38, 38, 0.07);
    color: #991b1b;
}

.alert-success {
    border-left-color: var(--tt-success);
    background-color: rgba(22, 163, 74, 0.07);
    color: #166534;
}

.alert-info {
    border-left-color: var(--tt-primary);
    background-color: rgba(37, 99, 235, 0.07);
    color: #1e3a8a;
}

/* ==============================================================
   Table overrides — clean dividers, no Bootstrap stripes
   ============================================================== */

/* Suppress Bootstrap's grey alternating stripe */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    background-color: transparent;
    color: inherit;
}

/* Subtle primary-tint hover instead of grey */
.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: rgba(37, 99, 235, 0.04);
    background-color: rgba(37, 99, 235, 0.04);
    color: inherit;
}

/* Table borders: only row separators, no outer border */
.table {
    --bs-table-border-color: var(--tt-border);
    border-collapse: collapse;
    font-size: 0.875rem;
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--tt-border);
    border-top: none;
}

.table > thead > tr > th {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tt-gray);
    border-bottom: 1px solid var(--tt-border);
    padding-bottom: 0.625rem;
}

/* ==============================================================
   Dropdown (page-level, non-navbar)
   ============================================================== */
.dropdown-menu {
    border-color: var(--tt-border);
    border-radius: var(--tt-radius);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1), 0 1px 4px rgba(15, 23, 42, 0.06);
    padding: 0.375rem;
    font-size: 0.8125rem;
}

.dropdown-item {
    border-radius: calc(var(--tt-radius) - 2px);
    padding: 0.4rem 0.6rem;
    font-weight: 500;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: rgba(37, 99, 235, 0.07);
    color: var(--tt-primary);
}

.dropdown-divider {
    border-color: var(--tt-border);
    margin: 0.3rem 0.25rem;
}

/* ==============================================================
   Login page — branded accent card
   ============================================================== */
.tt-login-card {
    border-top: 3px solid var(--tt-primary);
    border-radius: 0 0 var(--tt-radius-lg) var(--tt-radius-lg);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.09), 0 1px 4px rgba(15, 23, 42, 0.05);
}

/* ==============================================================
   Scrollbar — subtle custom style (WebKit/Blink)
   ============================================================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--tt-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--tt-gray);
}

/* Bootstrap btn-primary — use our primary */
.btn-primary {
    --bs-btn-bg:              var(--tt-primary);
    --bs-btn-border-color:    var(--tt-primary);
    --bs-btn-hover-bg:        var(--tt-primary-hover);
    --bs-btn-hover-border-color: var(--tt-primary-hover);
    --bs-btn-active-bg:       var(--tt-primary-hover);
    --bs-btn-focus-shadow-rgb: 37, 99, 235;
}

.btn-outline-primary {
    --bs-btn-color:           var(--tt-primary);
    --bs-btn-border-color:    var(--tt-primary);
    --bs-btn-hover-bg:        var(--tt-primary);
    --bs-btn-hover-border-color: var(--tt-primary);
    --bs-btn-active-bg:       var(--tt-primary-hover);
}

/* Form focus ring: match our primary */
.form-control:focus,
.form-select:focus {
    border-color: var(--tt-primary);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.18);
}

/* Table headers used in index.html (table-primary thead) */
.table > thead.table-primary > tr > th,
.table > thead.table-primary th {
    background-color: #dbeafe !important;
    color: #1e3a6e !important;
    border-color: #bfdbfe !important;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}

/* ==============================================================
   Dark mode
   Fires on EITHER:
     data-theme="dark"    — our custom toggle (set by anti-FOUC + JS toggle)
     data-bs-theme="dark" — Bootstrap's native dark mode attribute
   Using both ensures dark mode works even if only one attribute is set.
   ============================================================== */
:is([data-theme="dark"],[data-bs-theme="dark"]) {
    color-scheme: dark;

    /* — our palette overrides — */
    --tt-dark:     #e2e8f0;
    --tt-light:    #1e2435;  /* card/table-header bg */
    --tt-page-bg:  #111827;  /* page background */
    --tt-surface:  #1a2030;  /* card surface */
    --tt-border:   #2d3555;
    --tt-gray:     #94a3b8;

    /* — bridge to Bootstrap's own CSS variables so native components go dark — */
    --bs-body-bg:            #111827;
    --bs-body-color:         #e2e8f0;
    --bs-border-color:       #2d3555;
    --bs-card-bg:            #1a2030;
    --bs-card-border-color:  #2d3555;
    --bs-table-bg:           transparent;
    --bs-table-striped-bg:   rgba(255, 255, 255, 0.04);
    --bs-table-hover-bg:     rgba(255, 255, 255, 0.07);
    --bs-table-color:        #e2e8f0;
    --bs-table-border-color: #2d3555;
    --bs-input-bg:           #2a3347;
    --bs-input-border-color: #3d4f70;
    --bs-input-color:        #e2e8f0;
    --bs-dropdown-bg:        #1a2030;
    --bs-dropdown-border-color: #2d3555;
    --bs-dropdown-link-color: #e2e8f0;
    --bs-dropdown-link-hover-bg: #252e45;
    --bs-secondary-bg:       #1e2435;
    --bs-tertiary-bg:        #252e45;
}

/* Explicit body bg */
:is([data-theme="dark"],[data-bs-theme="dark"]) body {
    background-color: #111827 !important;
    color: #e2e8f0;
}

/* Bootstrap bg-light / bg-white utility classes */
:is([data-theme="dark"],[data-bs-theme="dark"]) .bg-light,
:is([data-theme="dark"],[data-bs-theme="dark"]) .card-header.bg-light {
    background-color: #1e2435 !important;
    color: #cbd5e1 !important;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .bg-white {
    background-color: #1a2030 !important;
    color: #e2e8f0 !important;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .text-bg-light {
    background-color: #1e2435 !important;
    color: #94a3b8 !important;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .text-dark {
    color: #cbd5e1 !important;
}

/* table-warning rows in dark mode — replace harsh yellow with a muted amber-dark */
:is([data-theme="dark"],[data-bs-theme="dark"]) .table-warning,
:is([data-theme="dark"],[data-bs-theme="dark"]) .table-warning > td,
:is([data-theme="dark"],[data-bs-theme="dark"]) .table-warning > th {
    --bs-table-bg: #2d2510 !important;
    --bs-table-color: #e2c97e !important;
    background-color: #2d2510 !important;
    color: #e2c97e !important;
}

/* table-danger rows in dark mode — Bootstrap's default light-pink bg + dark-red
   text is unreadable on a dark surface; same treatment as table-warning above */
:is([data-theme="dark"],[data-bs-theme="dark"]) .table-danger,
:is([data-theme="dark"],[data-bs-theme="dark"]) .table-danger > td,
:is([data-theme="dark"],[data-bs-theme="dark"]) .table-danger > th {
    --bs-table-bg: #2d1414 !important;
    --bs-table-color: #f1a9a0 !important;
    background-color: #2d1414 !important;
    color: #f1a9a0 !important;
}

/* table-success rows in dark mode */
:is([data-theme="dark"],[data-bs-theme="dark"]) .table-success,
:is([data-theme="dark"],[data-bs-theme="dark"]) .table-success > td,
:is([data-theme="dark"],[data-bs-theme="dark"]) .table-success > th {
    --bs-table-bg: #132d1e !important;
    --bs-table-color: #8fd9b6 !important;
    background-color: #132d1e !important;
    color: #8fd9b6 !important;
}

/* table-primary rows in dark mode */
:is([data-theme="dark"],[data-bs-theme="dark"]) .table-primary,
:is([data-theme="dark"],[data-bs-theme="dark"]) .table-primary > td,
:is([data-theme="dark"],[data-bs-theme="dark"]) .table-primary > th {
    --bs-table-bg: #12233d !important;
    --bs-table-color: #9ec5f5 !important;
    background-color: #12233d !important;
    color: #9ec5f5 !important;
}

/* table-secondary rows in dark mode — used mostly for header/disabled rows */
:is([data-theme="dark"],[data-bs-theme="dark"]) .table-secondary,
:is([data-theme="dark"],[data-bs-theme="dark"]) .table-secondary > td,
:is([data-theme="dark"],[data-bs-theme="dark"]) .table-secondary > th {
    --bs-table-bg: #1e2435 !important;
    --bs-table-color: #cbd5e1 !important;
    --bs-table-striped-bg: #1e2435 !important;
    --bs-table-striped-color: #cbd5e1 !important;
    --bs-table-accent-bg: #1e2435 !important;
    background-color: #1e2435 !important;
    color: #cbd5e1 !important;
    box-shadow: none !important;
}

/* *-subtle background utilities (e.g. table-danger-subtle, bg-danger-subtle)
   inherit from these Bootstrap CSS variables; without dark overrides they stay
   at their light-mode pastel values same as the table-contextual classes above */
:is([data-theme="dark"],[data-bs-theme="dark"]) {
    --bs-danger-bg-subtle:    #2d1414;
    --bs-danger-text-emphasis: #f1a9a0;
    --bs-success-bg-subtle:   #132d1e;
    --bs-success-text-emphasis: #8fd9b6;
    --bs-warning-bg-subtle:   #2d2510;
    --bs-warning-text-emphasis: #e2c97e;
    --bs-primary-bg-subtle:   #12233d;
    --bs-primary-text-emphasis: #9ec5f5;
    --bs-secondary-bg-subtle: #1e2435;
    --bs-secondary-text-emphasis: #cbd5e1;
}

/* Bootstrap .card — BS5.3 defines --bs-card-bg at component level; target directly */
:is([data-theme="dark"],[data-bs-theme="dark"]) .card {
    background-color: #1a2030 !important;
    border-color: #2d3555 !important;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .card-header {
    background-color: #1e2435 !important;
    border-color: #2d3555 !important;
    color: #cbd5e1;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .card-body {
    background-color: transparent;
    color: #e2e8f0;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .card-footer {
    background-color: #1e2435 !important;
    border-color: #2d3555 !important;
    color: #94a3b8;
}

/* Custom tt-card */
:is([data-theme="dark"],[data-bs-theme="dark"]) .tt-card {
    background: #1a2030 !important;
    border-color: #2d3555;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Bootstrap form controls — slightly lighter than card surface so fields read as editable */
:is([data-theme="dark"],[data-bs-theme="dark"]) .form-control,
:is([data-theme="dark"],[data-bs-theme="dark"]) .form-select {
    background-color: #2a3347 !important;
    border-color: #3d4f70 !important;
    color: #e2e8f0 !important;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .form-control::placeholder {
    color: #64748b;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .form-control:focus,
:is([data-theme="dark"],[data-bs-theme="dark"]) .form-select:focus {
    background-color: #2a3347 !important;
    border-color: var(--tt-primary) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.22);
}

/* tt-table header cells */
:is([data-theme="dark"],[data-bs-theme="dark"]) .tt-table th {
    background-color: #1e2435 !important;
    color: #94a3b8 !important;
    border-color: #2d3555 !important;
    box-shadow: none !important;
}

/* Plain Bootstrap thead (no variant class) */
:is([data-theme="dark"],[data-bs-theme="dark"]) .table > thead:not(.table-light):not(.table-primary):not(.table-dark) > tr > th {
    background-color: #1e2a42 !important;
    color: #94a3b8 !important;
    border-color: #2d3555 !important;
    box-shadow: none !important;
}

/* thead.table-primary */
:is([data-theme="dark"],[data-bs-theme="dark"]) .table > thead.table-primary > tr > th,
:is([data-theme="dark"],[data-bs-theme="dark"]) .table > thead.table-primary th {
    background-color: #1e2d4a !important;
    color: #93c5fd !important;
    border-color: #2d4070 !important;
}

/* Custom alerts — translucent left-border */
:is([data-theme="dark"],[data-bs-theme="dark"]) .tt-alert-danger {
    color: #fca5a5;
    background-color: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.4);
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .tt-alert-success {
    color: #86efac;
    background-color: rgba(22, 163, 74, 0.15);
    border-color: rgba(22, 163, 74, 0.4);
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .tt-alert-warning {
    color: #fcd34d;
    background-color: rgba(217, 119, 6, 0.15);
    border-color: rgba(217, 119, 6, 0.4);
}

/* Navbar stays black in both modes */
:is([data-theme="dark"],[data-bs-theme="dark"]) .navbar.bg-dark {
    background-color: var(--tt-nav-bg) !important;
}

/* Bootstrap alert variants */
:is([data-theme="dark"],[data-bs-theme="dark"]) .alert-warning {
    background-color: rgba(217, 119, 6, 0.12);
    border-left-color: #d97706;
    color: #fcd34d;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .alert-danger {
    background-color: rgba(220, 38, 38, 0.12);
    border-left-color: #dc2626;
    color: #fca5a5;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .alert-success {
    background-color: rgba(22, 163, 74, 0.12);
    border-left-color: #16a34a;
    color: #86efac;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .alert-info {
    background-color: rgba(37, 99, 235, 0.12);
    border-left-color: #2563eb;
    color: #93c5fd;
}

/* Table stripes / hover */
:is([data-theme="dark"],[data-bs-theme="dark"]) .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: transparent;
    color: inherit;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .table-hover > tbody > tr:hover > * {
    background-color: rgba(37, 99, 235, 0.07);
    color: inherit;
}

/* thead.table-light / tfoot.table-light
   Bootstrap sets --bs-table-bg: #f8f9fa at element level — override directly. */
:is([data-theme="dark"],[data-bs-theme="dark"]) .table-light,
:is([data-theme="dark"],[data-bs-theme="dark"]) .table-light > tr > th,
:is([data-theme="dark"],[data-bs-theme="dark"]) .table-light > tr > td,
:is([data-theme="dark"],[data-bs-theme="dark"]) thead.table-light > tr > th,
:is([data-theme="dark"],[data-bs-theme="dark"]) thead.table-light > tr > td,
:is([data-theme="dark"],[data-bs-theme="dark"]) tfoot.table-light > tr > th,
:is([data-theme="dark"],[data-bs-theme="dark"]) tfoot.table-light > tr > td {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-color: #94a3b8;
    background-color: #1e2a42 !important;
    box-shadow: none !important;
    color: #94a3b8 !important;
    border-color: #2d3555 !important;
    font-size: 0.7rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: 600;
}

/* Expanded user editor: use a purpose-built row instead of Bootstrap's
   light contextual table variant so it follows the active theme. */
.tt-user-edit-row > td,
.tt-user-edit-row > th {
    --bs-table-bg: #f8f9fa;
    --bs-table-color: #212529;
    --bs-table-bg-state: transparent;
    --bs-table-color-state: #212529;
    background-color: #f8f9fa !important;
    color: #212529;
    box-shadow: none !important;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .tt-user-edit-row > td,
:is([data-theme="dark"],[data-bs-theme="dark"]) .tt-user-edit-row > th {
    --bs-table-bg: #1e2435;
    --bs-table-color: #cbd5e1;
    --bs-table-bg-state: transparent;
    --bs-table-color-state: #cbd5e1;
    background-color: #1e2435 !important;
    color: #cbd5e1 !important;
    border-color: #2d3555 !important;
    box-shadow: none !important;
}

/* Login card */
:is([data-theme="dark"],[data-bs-theme="dark"]) .tt-login-card {
    border-top-color: var(--tt-primary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* Scrollbar */
:is([data-theme="dark"],[data-bs-theme="dark"]) ::-webkit-scrollbar-thumb {
    background-color: #2d3555;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) ::-webkit-scrollbar-thumb:hover {
    background-color: #3d4a70;
}

/* ==============================================================
   Admin sidebar — dark mode overrides
   Inline <style> in _admin_sidebar.html loads after external CSS
   (same-document source order), so !important is required here.
   ============================================================== */
:is([data-theme="dark"],[data-bs-theme="dark"]) .tt-admin-sidebar .sidebar-section {
    border-color: #2d3555 !important;
    background: #1a2030 !important;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .tt-admin-sidebar .sidebar-section-header {
    background: #1e2a42 !important;
    color: #cbd5e1 !important;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .tt-admin-sidebar .sidebar-section-header:hover {
    background: #253352 !important;
    color: #e2e8f0 !important;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .tt-admin-sidebar .sidebar-section-header.is-active {
    background: #1e3461 !important;
    color: #93c5fd !important;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .tt-admin-sidebar .sidebar-section-caret {
    color: #64748b;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .tt-admin-sidebar .sidebar-tool {
    color: #64748b;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .tt-admin-sidebar .sidebar-tool:hover {
    color: #e2e8f0;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .tt-admin-sidebar .sidebar-section-links .list-group-item {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #94a3b8;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .tt-admin-sidebar .sidebar-section-links .list-group-item:hover {
    background-color: rgba(37, 99, 235, 0.1) !important;
    color: #e2e8f0;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .tt-admin-sidebar .sidebar-section-links .list-group-item.active {
    background-color: rgba(37, 99, 235, 0.2) !important;
    border-color: transparent !important;
    color: #93c5fd;
}

/* ── Admin console shell and overview ─────────────────────────────── */
.admin-shell {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 2rem;
    margin: 1.5rem 0 3rem;
}
.admin-shell-nav { min-width: 0; }
.admin-shell-content { min-width: 0; }
.tt-admin-sidebar {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: .4rem .65rem .75rem 0;
}
.admin-nav-brand { display:flex; align-items:center; gap:.7rem; padding:.25rem .55rem 1rem; }
.admin-nav-brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; color:#fff; background:#185adb; font-size:.72rem; font-weight:800; letter-spacing:.04em; }
.admin-nav-brand strong, .admin-nav-brand small { display:block; }
.admin-nav-brand strong { font-size:.92rem; }
.admin-nav-brand small { color:var(--bs-secondary-color); font-size:.7rem; }
.admin-nav-search { display:flex; align-items:center; gap:.45rem; margin:0 .25rem 1rem; padding:.48rem .6rem; border:1px solid var(--bs-border-color); border-radius:8px; background:var(--bs-body-bg); color:var(--bs-secondary-color); }
.admin-nav-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--bs-body-color); font-size:.82rem; }
.admin-nav-search kbd { border:1px solid var(--bs-border-color); border-radius:4px; background:transparent; color:var(--bs-secondary-color); font-size:.65rem; padding:.05rem .3rem; box-shadow:none; }
.admin-nav-overview, .admin-nav-section > button, .admin-nav-help { display:flex; align-items:center; gap:.65rem; width:100%; padding:.57rem .65rem; border:0; border-radius:7px; background:transparent; color:var(--bs-secondary-color); font-size:.85rem; font-weight:600; text-align:left; text-decoration:none; }
.admin-nav-overview:hover, .admin-nav-section > button:hover, .admin-nav-help:hover { background:rgba(24,90,219,.07); color:var(--bs-body-color); }
.admin-nav-overview.active, .admin-nav-section.is-current > button { background:rgba(24,90,219,.11); color:#185adb; }
.admin-nav-icon { display:inline-grid; place-items:center; width:1rem; flex:0 0 1rem; font-size:1rem; }
.admin-nav-caret { margin-left:auto; transition:transform .15s ease; }
.admin-nav-section > button[aria-expanded="true"] .admin-nav-caret { transform:rotate(90deg); }
.admin-nav-links { margin:.1rem 0 .45rem 1.4rem; padding-left:.65rem; border-left:1px solid var(--bs-border-color); }
.admin-nav-links a { display:block; padding:.4rem .6rem; border-radius:6px; color:var(--bs-secondary-color); font-size:.79rem; text-decoration:none; }
.admin-nav-links a:hover { color:var(--bs-body-color); background:rgba(24,90,219,.06); }
.admin-nav-links a.active { color:#185adb; background:rgba(24,90,219,.1); font-weight:600; }
.admin-nav-help { margin-top:.65rem; border-top:1px solid var(--bs-border-color); border-radius:0; padding-top:1rem; }
.admin-nav-help span:last-child { margin-left:auto; }
.admin-page-header { display:flex; justify-content:space-between; gap:1rem; align-items:flex-end; padding:.35rem 0 1.25rem; }
.admin-page-header h1 { margin:.1rem 0 .25rem; font-size:1.75rem; font-weight:700; letter-spacing:-.025em; }
.admin-page-header p, .admin-panel-header p { margin:0; color:var(--bs-secondary-color); font-size:.84rem; }
.admin-eyebrow { color:#185adb; font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.admin-header-actions { display:flex; gap:.5rem; }
.admin-metric-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:.8rem; margin-bottom:1rem; }
.admin-metric { position:relative; display:grid; grid-template-columns:1fr auto; padding:1rem; border:1px solid var(--bs-border-color); border-radius:10px; background:var(--bs-body-bg); color:inherit; text-decoration:none; box-shadow:0 1px 2px rgba(15,23,42,.035); }
.admin-metric:hover { color:inherit; border-color:#91b2f4; box-shadow:0 4px 14px rgba(15,23,42,.08); transform:translateY(-1px); }
.admin-metric-icon { grid-column:2; grid-row:1/3; display:grid; place-items:center; align-self:start; width:28px; height:28px; border-radius:8px; background:rgba(24,90,219,.09); color:#185adb; font-weight:700; }
.admin-metric-label { grid-column:1; color:var(--bs-secondary-color); font-size:.75rem; font-weight:600; }
.admin-metric strong { grid-column:1; margin:.22rem 0; font-size:1.65rem; line-height:1; }
.admin-metric small { grid-column:1/3; color:var(--bs-secondary-color); font-size:.69rem; }
.admin-metric.is-danger .admin-metric-icon { color:#dc3545; background:rgba(220,53,69,.1); }
.admin-metric.is-warning .admin-metric-icon { color:#b7791f; background:rgba(245,158,11,.12); }
.admin-metric.is-healthy .admin-metric-icon { color:#198754; background:rgba(25,135,84,.1); }
.admin-dashboard-grid { display:grid; grid-template-columns:minmax(0, 1.65fr) minmax(280px, .85fr); gap:1rem; margin-bottom:1rem; }
.admin-dashboard-grid-bottom { grid-template-columns:1.2fr 1fr; margin-top:1rem; }
.admin-panel { border:1px solid var(--bs-border-color); border-radius:10px; background:var(--bs-body-bg); overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,.035); }
.admin-panel-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:1rem 1.1rem; border-bottom:1px solid var(--bs-border-color); }
.admin-panel-header h2 { margin:0 0 .15rem; font-size:.94rem; font-weight:700; }
.admin-panel-header > a { font-size:.75rem; text-decoration:none; white-space:nowrap; }
.admin-attention-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:.7rem; align-items:center; padding:.75rem 1.05rem; border-bottom:1px solid var(--bs-border-color); color:inherit; text-decoration:none; }
.admin-attention-item:last-child { border:0; }
.admin-attention-item:hover { color:inherit; background:rgba(24,90,219,.035); }
.admin-status-dot { width:8px; height:8px; border-radius:50%; background:#94a3b8; }
.admin-status-dot.is-danger { background:#dc3545; box-shadow:0 0 0 3px rgba(220,53,69,.1); }
.admin-status-dot.is-warning { background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.1); }
.admin-status-dot.is-success { background:#198754; }
.admin-attention-copy strong, .admin-attention-copy small { display:block; }
.admin-attention-copy strong { font-size:.8rem; }
.admin-attention-copy small, .admin-attention-item time { color:var(--bs-secondary-color); font-size:.68rem; }
.admin-row-arrow { color:var(--bs-secondary-color); font-size:1.15rem; }
.admin-activity-list { margin:0; padding:.45rem 1.05rem; }
.admin-activity-list > div { display:flex; justify-content:space-between; padding:.55rem 0; border-bottom:1px solid var(--bs-border-color); }
.admin-activity-list dt { color:var(--bs-secondary-color); font-size:.76rem; font-weight:500; }
.admin-activity-list dd { margin:0; font-size:.84rem; font-weight:700; }
.admin-activity-list dd small { color:var(--bs-secondary-color); font-weight:400; }
.admin-backup-status { display:grid; grid-template-columns:auto 1fr auto; gap:.6rem; align-items:center; margin:.5rem 1.05rem 1rem; padding:.7rem; border-radius:8px; background:rgba(25,135,84,.06); }
.admin-backup-status strong, .admin-backup-status small { display:block; font-size:.72rem; }
.admin-backup-status small { color:var(--bs-secondary-color); }
.admin-backup-status a { font-size:.72rem; text-decoration:none; }
.admin-dashboard-table thead th { color:var(--bs-secondary-color); font-size:.67rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.admin-dashboard-table tbody td { font-size:.78rem; }
.admin-dashboard-table td:first-child strong, .admin-dashboard-table td:first-child small { display:block; }
.admin-dashboard-table td:first-child small { color:var(--bs-secondary-color); font-size:.66rem; }
.admin-state-pill { display:inline-block; padding:.15rem .42rem; border-radius:999px; background:var(--bs-secondary-bg); color:var(--bs-secondary-color); font-size:.66rem; font-weight:600; }
.admin-state-pill.is-active { color:#147a4b; background:rgba(25,135,84,.1); }
.admin-audit-list > a { display:flex; justify-content:space-between; gap:1rem; padding:.72rem 1.05rem; border-bottom:1px solid var(--bs-border-color); color:inherit; text-decoration:none; }
.admin-audit-list > a:hover { color:inherit; background:rgba(24,90,219,.035); }
.admin-audit-list strong, .admin-audit-list small { display:block; font-size:.73rem; }
.admin-audit-list small, .admin-audit-list time { color:var(--bs-secondary-color); font-size:.65rem; }
.admin-quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; padding:1rem; }
.admin-quick-actions a { display:grid; grid-template-columns:28px 1fr; column-gap:.55rem; padding:.7rem; border:1px solid var(--bs-border-color); border-radius:8px; color:inherit; text-decoration:none; }
.admin-quick-actions a:hover { color:inherit; border-color:#91b2f4; background:rgba(24,90,219,.035); }
.admin-quick-actions a > span { grid-row:1/3; display:grid; place-items:center; width:28px; height:28px; border-radius:7px; color:#185adb; background:rgba(24,90,219,.09); }
.admin-quick-actions strong, .admin-quick-actions small { display:block; font-size:.72rem; }
.admin-quick-actions small { color:var(--bs-secondary-color); font-size:.63rem; }
.admin-empty-state { padding:2rem 1rem; text-align:center; color:var(--bs-secondary-color); }
.admin-empty-state strong, .admin-empty-state p { display:block; margin:.3rem 0 0; font-size:.78rem; }
.admin-empty-check { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#198754; background:rgba(25,135,84,.1); }
@media (max-width: 991.98px) {
    .admin-shell { grid-template-columns:1fr; gap:1rem; }
    .tt-admin-sidebar { position:static; max-height:none; padding-right:0; }
    .admin-nav-brand { display:none; }
    .admin-metric-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 767.98px) {
    .admin-page-header { align-items:flex-start; flex-direction:column; }
    .admin-dashboard-grid, .admin-dashboard-grid-bottom { grid-template-columns:1fr; }
    .admin-metric-grid { grid-template-columns:1fr; }
    .admin-attention-item { grid-template-columns:auto 1fr auto; }
    .admin-attention-item time { display:none; }
    .admin-quick-actions { grid-template-columns:1fr; }
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .admin-nav-overview.active,
:is([data-theme="dark"],[data-bs-theme="dark"]) .admin-nav-section.is-current > button,
:is([data-theme="dark"],[data-bs-theme="dark"]) .admin-nav-links a.active { color:#93b4ff; background:rgba(59,130,246,.14); }
:is([data-theme="dark"],[data-bs-theme="dark"]) .admin-panel,
:is([data-theme="dark"],[data-bs-theme="dark"]) .admin-metric { box-shadow:none; }

/* Warning badges — Bootstrap's #ffc107 yellow is unreadable on dark surfaces;
   use a deeper amber with white text instead */
:is([data-theme="dark"],[data-bs-theme="dark"]) .badge.bg-warning,
:is([data-theme="dark"],[data-bs-theme="dark"]) .badge.text-bg-warning {
    background-color: #92400e !important; /* deep amber — readable on dark */
    color: #fde68a !important;            /* warm yellow text */
}

/* Info badges — Bootstrap's #0dcaf0 cyan is too bright on dark surfaces */
:is([data-theme="dark"],[data-bs-theme="dark"]) .badge.bg-info,
:is([data-theme="dark"],[data-bs-theme="dark"]) .badge.text-bg-info {
    background-color: #164e63 !important; /* deep teal — readable on dark */
    color: #67e8f9 !important;            /* light cyan text */
}

/* Dropdowns */
:is([data-theme="dark"],[data-bs-theme="dark"]) .dropdown-item:hover,
:is([data-theme="dark"],[data-bs-theme="dark"]) .dropdown-item:focus {
    background-color: rgba(37, 99, 235, 0.12);
    color: #93c5fd;
}

/* ── Modals ─────────────────────────────────────────────────────────────── */
:is([data-theme="dark"],[data-bs-theme="dark"]) .modal-content {
    background-color: #1a2030 !important;
    border-color: #2d3555 !important;
    color: #e2e8f0;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .modal-header {
    background-color: #1e2435 !important;
    border-color: #2d3555 !important;
    color: #e2e8f0;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .modal-body {
    background-color: #1a2030;
    color: #e2e8f0;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .modal-footer {
    background-color: #1e2435 !important;
    border-color: #2d3555 !important;
}

/* ── Input groups ────────────────────────────────────────────────────────── */
:is([data-theme="dark"],[data-bs-theme="dark"]) .input-group-text {
    background-color: #1e2435 !important;
    border-color: #2d3555 !important;
    color: #94a3b8;
}

/* ── Nav tabs ────────────────────────────────────────────────────────────── */
:is([data-theme="dark"],[data-bs-theme="dark"]) .nav-tabs {
    border-color: #2d3555;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .nav-tabs .nav-link {
    color: #94a3b8;
    border-color: transparent;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .nav-tabs .nav-link:hover {
    color: #e2e8f0;
    border-color: #2d3555;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .nav-tabs .nav-link.active,
:is([data-theme="dark"],[data-bs-theme="dark"]) .nav-tabs .nav-item.show .nav-link {
    background-color: #1a2030 !important;
    border-color: #2d3555 #2d3555 #1a2030 !important;
    color: #e2e8f0;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .tab-content {
    background-color: transparent;
    color: #e2e8f0;
}

/* ── List groups (outside admin sidebar) ─────────────────────────────────── */
:is([data-theme="dark"],[data-bs-theme="dark"]) .list-group-item {
    background-color: #1a2030 !important;
    border-color: #2d3555 !important;
    color: #e2e8f0;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .list-group-item:hover {
    background-color: #1e2435 !important;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .list-group-item.active {
    background-color: rgba(37, 99, 235, 0.25) !important;
    border-color: #2d3555 !important;
    color: #93c5fd;
}

/* ── Pre / code blocks ───────────────────────────────────────────────────── */
:is([data-theme="dark"],[data-bs-theme="dark"]) pre {
    background-color: #0d1117 !important;
    color: #cdd9e5;
    border: 1px solid #2d3555;
    border-radius: 0.375rem;
}

/* ── Bootstrap btn-outline on dark bg ─────────────────────────────────────── */
:is([data-theme="dark"],[data-bs-theme="dark"]) .btn-outline-secondary {
    color: #94a3b8;
    border-color: #2d3555;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .btn-outline-secondary:hover {
    background-color: #1e2435;
    border-color: #3d4a70;
    color: #e2e8f0;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .btn-outline-danger {
    color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.5);
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .btn-outline-danger:hover {
    background-color: rgba(220, 38, 38, 0.15);
    border-color: #dc2626;
    color: #fca5a5;
}

/* ── Zone map editor sidebar ─────────────────────────────────────────────── */
.zone-map-sidebar {
    background-color: #fff;
    border: 1px solid #dee2e6;
}
.zone-map-sidebar .sidebar-row.active-pin {
    background-color: #dbeafe;
    color: #1e3a8a;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .zone-map-sidebar {
    background-color: #1a2030;
    border-color: #2d3555;
    color: #e2e8f0;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .zone-map-sidebar .border-bottom {
    border-color: #2d3555 !important;
}
:is([data-theme="dark"],[data-bs-theme="dark"]) .zone-map-sidebar .sidebar-row.active-pin {
    background-color: rgba(37, 99, 235, 0.25);
    color: #bfdbfe;
}