@supports not selector(::-webkit-scrollbar) {
    .scroll {
        scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0);
        scrollbar-width: thin;
    }
}

:root {
    color-scheme: dark;
    --lispod-primary: #4f8cff;
    --lispod-primary-rgb: 79, 140, 255;
    --lispod-bg: #0f172a;
    --lispod-surface: #111c33;
    --lispod-surface-alt: #18243d;
    --lispod-border: rgba(148, 163, 184, 0.22);
    --lispod-text: #e5eefc;
    --lispod-text-muted: #96a4bf;
    --lispod-table-hover: rgba(79, 140, 255, 0.08);
    --lispod-table-striped: rgba(255, 255, 255, 0.02);
}

html[data-bs-theme="light"],
body[data-bs-theme="light"] {
    color-scheme: light;
    --lispod-primary: #0b6efd;
    --lispod-primary-rgb: 11, 110, 253;
    --lispod-bg: #f5f7fb;
    --lispod-surface: #ffffff;
    --lispod-surface-alt: #eef3fb;
    --lispod-border: rgba(15, 23, 42, 0.12);
    --lispod-text: #172033;
    --lispod-text-muted: #5f6b84;
    --lispod-table-hover: rgba(11, 110, 253, 0.06);
    --lispod-table-striped: rgba(15, 23, 42, 0.02);
}

html[data-bs-theme="dark"],
body[data-bs-theme="dark"] {
    color-scheme: dark;
}

body {
    background: var(--lispod-bg);
    color: var(--lispod-text);
}

a {
    color: color-mix(in srgb, var(--lispod-primary) 92%, white 8%);
}

a:hover {
    color: var(--lispod-primary);
}

.btn,
.form-control,
.form-select,
.card,
.modal-content,
.dropdown-menu,
.table,
.list-group-item,
.navbar,
.accordion-item,
.offcanvas,
.toast,
.alert,
.popover,
.nav-tabs .nav-link {
    border-color: var(--lispod-border);
}

.btn-primary {
    --bs-btn-bg: var(--lispod-primary);
    --bs-btn-border-color: var(--lispod-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--lispod-primary) 88%, black 12%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--lispod-primary) 80%, black 20%);
    --bs-btn-active-bg: color-mix(in srgb, var(--lispod-primary) 82%, black 18%);
    --bs-btn-active-border-color: color-mix(in srgb, var(--lispod-primary) 74%, black 26%);
}

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

.btn-outline-secondary {
    --bs-btn-color: var(--lispod-text-muted);
    --bs-btn-border-color: var(--lispod-border);
    --bs-btn-hover-color: var(--lispod-text);
    --bs-btn-hover-bg: var(--lispod-surface-alt);
    --bs-btn-hover-border-color: var(--lispod-border);
    --bs-btn-active-color: var(--lispod-text);
    --bs-btn-active-bg: var(--lispod-surface-alt);
    --bs-btn-disabled-color: var(--lispod-text-muted);
    --bs-btn-disabled-border-color: var(--lispod-border);
}

.btn-secondary {
    --bs-btn-color: var(--lispod-text);
    --bs-btn-bg: var(--lispod-surface-alt);
    --bs-btn-border-color: var(--lispod-border);
    --bs-btn-hover-color: var(--lispod-text);
    --bs-btn-hover-bg: color-mix(in srgb, var(--lispod-surface-alt) 80%, var(--lispod-primary) 20%);
    --bs-btn-hover-border-color: var(--lispod-border);
}

.btn-info {
    --bs-btn-bg: var(--lispod-primary);
    --bs-btn-border-color: var(--lispod-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--lispod-primary) 88%, black 12%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--lispod-primary) 80%, black 20%);
}

.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.toast,
.alert,
.popover,
.list-group-item,
.accordion-item,
.navbar,
.table {
    background-color: var(--lispod-surface);
    color: var(--lispod-text);
}

.table {
    --bs-table-color: var(--lispod-text);
    --bs-table-bg: var(--lispod-surface);
    --bs-table-striped-bg: var(--lispod-table-striped);
    --bs-table-hover-bg: var(--lispod-table-hover);
    --bs-table-border-color: var(--lispod-border);
}

.table thead th,
.table tfoot th,
.table> :not(caption)>*>* {
    border-color: var(--lispod-border);
}

html[data-bs-theme="dark"] .table-light,
body[data-bs-theme="dark"] .table-light,
html[data-bs-theme="dark"] .table-light>th,
body[data-bs-theme="dark"] .table-light>th,
html[data-bs-theme="dark"] .table-light>td,
body[data-bs-theme="dark"] .table-light>td,
html[data-bs-theme="dark"] .table thead,
body[data-bs-theme="dark"] .table thead,
html[data-bs-theme="dark"] .table thead th,
body[data-bs-theme="dark"] .table thead th,
html[data-bs-theme="dark"] .table tfoot,
body[data-bs-theme="dark"] .table tfoot,
html[data-bs-theme="dark"] .table tfoot th,
body[data-bs-theme="dark"] .table tfoot th,
html[data-bs-theme="dark"] .bb-table thead,
body[data-bs-theme="dark"] .bb-table thead,
html[data-bs-theme="dark"] .bb-table thead th,
body[data-bs-theme="dark"] .bb-table thead th {
    background-color: var(--lispod-surface-alt) !important;
    color: var(--lispod-text) !important;
}

html[data-bs-theme="light"] .table-light,
body[data-bs-theme="light"] .table-light,
html[data-bs-theme="light"] .table-light>th,
body[data-bs-theme="light"] .table-light>th,
html[data-bs-theme="light"] .table-light>td,
body[data-bs-theme="light"] .table-light>td,
html[data-bs-theme="light"] .table thead,
body[data-bs-theme="light"] .table thead,
html[data-bs-theme="light"] .table thead th,
body[data-bs-theme="light"] .table thead th,
html[data-bs-theme="light"] .table tfoot,
body[data-bs-theme="light"] .table tfoot,
html[data-bs-theme="light"] .table tfoot th,
body[data-bs-theme="light"] .table tfoot th,
html[data-bs-theme="light"] .bb-table thead,
body[data-bs-theme="light"] .bb-table thead,
html[data-bs-theme="light"] .bb-table thead th,
body[data-bs-theme="light"] .bb-table thead th {
    background-color: var(--lispod-surface-alt) !important;
    color: var(--lispod-text) !important;
}

.form-control,
.form-select,
.input-group-text {
    background-color: var(--lispod-surface-alt);
    color: var(--lispod-text);
    border-color: var(--lispod-border);
}

.form-control::placeholder {
    color: var(--lispod-text-muted);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--lispod-surface-alt);
    color: var(--lispod-text);
    border-color: color-mix(in srgb, var(--lispod-primary) 70%, white 30%);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--lispod-primary) 18%, transparent);
}

.nav-tabs {
    border-bottom-color: var(--lispod-border);
}

.nav-tabs .nav-link {
    color: var(--lispod-text-muted);
}

.nav-tabs .nav-link.active {
    background-color: var(--lispod-surface);
    color: var(--lispod-text);
    border-color: var(--lispod-border) var(--lispod-border) var(--lispod-surface);
}

.dropdown-item {
    color: var(--lispod-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--lispod-table-hover);
    color: var(--lispod-text);
}

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

.text-dark {
    color: var(--lispod-text) !important;
}

.bg-white,
.bg-light {
    background-color: var(--lispod-surface) !important;
}

.border,
.border-top,
.border-end,
.border-bottom,
.border-start {
    border-color: var(--lispod-border) !important;
}

.shadow,
.shadow-sm,
.shadow-lg {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18) !important;
}

.page-link {
    background-color: var(--lispod-surface);
    color: var(--lispod-primary);
    border-color: var(--lispod-border);
}

.page-link:hover,
.page-link:focus {
    background-color: var(--lispod-surface-alt);
    color: var(--lispod-text);
}

.pagination .page-item:not(.active) .page-link:hover,
.pagination .page-item:not(.active) .page-link:focus {
    color: var(--lispod-text) !important;
    background-color: var(--lispod-surface-alt) !important;
    border-color: var(--lispod-border) !important;
}

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

/* Theme-adaptive status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3em 0.65em;
    font-size: 0.85em;
    font-weight: 500;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    line-height: 1.2;
}

html[data-bs-theme="dark"] .status-pending,
body[data-bs-theme="dark"] .status-pending {
    background-color: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.28);
}
html[data-bs-theme="light"] .status-pending,
body[data-bs-theme="light"] .status-pending {
    background-color: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

html[data-bs-theme="dark"] .status-uploading,
body[data-bs-theme="dark"] .status-uploading {
    background-color: rgba(14, 165, 233, 0.16);
    color: #38bdf8;
    border-color: rgba(14, 165, 233, 0.35);
}
html[data-bs-theme="light"] .status-uploading,
body[data-bs-theme="light"] .status-uploading {
    background-color: #e0f2fe;
    color: #0369a1;
    border-color: #bae6fd;
}

html[data-bs-theme="dark"] .status-success,
body[data-bs-theme="dark"] .status-success {
    background-color: rgba(34, 197, 94, 0.16);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.35);
}
html[data-bs-theme="light"] .status-success,
body[data-bs-theme="light"] .status-success {
    background-color: #dcfce7;
    color: #15803d;
    border-color: #86efac;
}

html[data-bs-theme="dark"] .status-fail,
body[data-bs-theme="dark"] .status-fail {
    background-color: rgba(239, 68, 68, 0.16);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.35);
}
html[data-bs-theme="light"] .status-fail,
body[data-bs-theme="light"] .status-fail {
    background-color: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
}