/* 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;
}

/* ==============================================================
   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;
}

/* ==============================================================
   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;
}

/* 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;
}

/* tr.table-light (admin edit rows) */
:is([data-theme="dark"],[data-bs-theme="dark"]) tr.table-light > td,
:is([data-theme="dark"],[data-bs-theme="dark"]) tr.table-light > th {
    background-color: #1e2435 !important;
    color: #cbd5e1;
    border-color: #2d3555 !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;
}

/* 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;
}