[x-cloak] { display: none !important; }

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background-color: var(--surface-bg);
    color: #0f172a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[data-bs-theme="dark"] body {
    color: var(--text-primary);
}

/* Utility fixes: hardcoded light classes stay readable in dark mode */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-body,
[data-bs-theme="dark"] .bg-body-tertiary {
    background-color: var(--surface-card) !important;
}

[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-body-secondary {
    background-color: var(--surface-elevated) !important;
}

[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-body,
[data-bs-theme="dark"] .text-black {
    color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .bg-warning.text-dark,
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .btn-warning,
[data-bs-theme="dark"] .alert-warning {
    color: #111 !important;
}

[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .text-body-secondary {
    color: var(--text-muted) !important;
}

[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--text-primary);
    --bs-table-bg: var(--surface-elevated);
    --bs-table-border-color: var(--surface-border);
    --bs-table-striped-bg: #1f1f1f;
    --bs-table-striped-color: var(--text-primary);
    --bs-table-active-bg: #2a2a2a;
    --bs-table-active-color: var(--text-primary);
    --bs-table-hover-bg: #262626;
    --bs-table-hover-color: var(--text-primary);
    color: var(--text-primary);
    border-color: var(--surface-border);
}

[data-bs-theme="dark"] .list-group-item {
    background-color: var(--surface-card);
    border-color: var(--surface-border);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--surface-card);
    border-color: var(--surface-border);
    color: var(--text-primary);
}

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

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--surface-elevated);
    color: var(--text-primary);
}

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

[data-bs-theme="dark"] .modal-content {
    background-color: var(--surface-card);
    border-color: var(--surface-border);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    border-color: var(--surface-border);
}

[data-bs-theme="dark"] .offcanvas {
    background-color: var(--surface-card);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .accordion-item {
    background-color: var(--surface-card);
    border-color: var(--surface-border);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .accordion-button {
    background-color: var(--surface-card);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--surface-elevated);
    color: var(--text-primary);
    box-shadow: none;
}

[data-bs-theme="dark"] .accordion-button::after {
    filter: invert(1) grayscale(1);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--surface-elevated);
    border-color: var(--surface-border);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: #888;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--surface-elevated);
    border-color: color-mix(in srgb, var(--section-color) 55%, var(--surface-border));
    color: var(--text-primary);
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled,
[data-bs-theme="dark"] .form-control[readonly] {
    background-color: #141414;
    color: #9a9a9a;
}

[data-bs-theme="dark"] .card {
    background-color: var(--surface-card);
    border-color: var(--surface-border);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
    background-color: transparent;
    border-color: var(--surface-border);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .table {
    --bs-table-color: var(--text-primary);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--surface-border);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border-color: var(--surface-border);
}

[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: var(--text-primary);
    --bs-btn-border-color: #555;
    --bs-btn-hover-color: #0c0c0c;
    --bs-btn-hover-bg: #ececec;
    --bs-btn-hover-border-color: #ececec;
    --bs-btn-active-color: #0c0c0c;
    --bs-btn-active-bg: #ececec;
    --bs-btn-active-border-color: #ececec;
}

[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: #111;
    --bs-btn-bg: #e8e8e8;
    --bs-btn-border-color: #e8e8e8;
    --bs-btn-hover-bg: #d4d4d4;
    --bs-btn-hover-border-color: #d4d4d4;
}

[data-bs-theme="dark"] .badge.bg-light {
    background-color: var(--surface-elevated) !important;
    color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .alert-light {
    background-color: var(--surface-elevated);
    border-color: var(--surface-border);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: var(--surface-border);
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-muted);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--surface-card);
    border-color: var(--surface-border) var(--surface-border) var(--surface-card);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .page-link {
    background-color: var(--surface-card);
    border-color: var(--surface-border);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--surface-elevated);
    border-color: var(--surface-border);
    color: #777;
}

[data-bs-theme="dark"] .page-item.active .page-link {
    background-color: var(--section-color);
    border-color: var(--section-color);
}

[data-bs-theme="dark"] .popover {
    background-color: var(--surface-card);
    border-color: var(--surface-border);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .popover-header {
    background-color: var(--surface-elevated);
    border-bottom-color: var(--surface-border);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .popover-body {
    color: var(--text-primary);
}

[data-bs-theme="dark"] hr {
    border-color: var(--surface-border);
    opacity: 1;
}

[data-bs-theme="dark"] pre,
[data-bs-theme="dark"] code,
[data-bs-theme="dark"] .form-control-plaintext {
    color: var(--text-primary);
}

[data-bs-theme="dark"] .ts-wrapper .ts-control,
[data-bs-theme="dark"] .ts-dropdown {
    background: var(--surface-elevated);
    border-color: var(--surface-border);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .ts-dropdown .option:hover,
[data-bs-theme="dark"] .ts-dropdown .active {
    background: var(--surface-card);
    color: var(--text-primary);
}

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

a {
    transition: color 0.15s ease;
}

.btn-primary {
    --bs-btn-bg: var(--section-color);
    --bs-btn-border-color: var(--section-color);
    --bs-btn-hover-bg: color-mix(in srgb, var(--section-color) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--section-color) 85%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--section-color) 75%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--section-color) 75%, #000);
}

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

.text-primary {
    color: var(--section-color) !important;
}

.bg-primary {
    background-color: var(--section-color) !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}