/* ============================================================================
   BOOTSTRAP OVERRIDES — Theme-Aware Component Fixes
   Makes Bootstrap components respect the active theme's design tokens.
   ============================================================================ */

/* --- .bg-* utility classes — theme-aware --- */
.bg-light {
    background-color: var(--surface-3) !important;
    color: var(--text-primary) !important;
}

.bg-white {
    background-color: var(--surface-2) !important;
    color: var(--text-primary) !important;
}

.bg-dark {
    background-color: var(--surface-0) !important;
    color: var(--text-primary) !important;
}

.bg-body {
    background-color: var(--surface-1) !important;
    color: var(--text-primary) !important;
}

/* --- Bootstrap shadows — softer for dark themes --- */
.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow {
    box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

/* --- text-dark / text-white — theme-aware --- */
.text-dark {
    color: var(--text-primary) !important;
}

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

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

/* --- Typography Utilities --- */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-tertiary) !important; }
.fw-semibold { font-weight: 600; }

/* --- Scrollbars --- */
.overflow-auto::-webkit-scrollbar { width: 6px; }
.overflow-auto::-webkit-scrollbar-track { background: var(--surface-3); border-radius: 3px; }
.overflow-auto::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }
.overflow-auto::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* --- Radzen DataGrid — theme-aware row backgrounds ---
   Radzen defaults white on every row (and alternating row). These overrides
   make the grid respect the active theme's surface tokens across all themes,
   not just midnight. */
.rz-data-grid,
.rz-datatable,
.rz-grid-table {
    background: transparent !important;
    color: var(--text-primary) !important;
}

.rz-data-row,
.rz-datatable-data tr,
.rz-grid-table > tbody > tr,
.rz-datatable tbody tr {
    background: transparent !important;
    background-color: transparent !important;
}

.rz-data-row > td,
.rz-datatable-data tr > td,
.rz-grid-table > tbody > tr > td {
    background: transparent !important;
    background-color: transparent !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-secondary) !important;
}

/* Hover state */
.rz-data-row:hover,
.rz-datatable-data tr:hover,
.rz-grid-table > tbody > tr:hover {
    background: var(--surface-2) !important;
}

.rz-data-row:hover > td,
.rz-datatable-data tr:hover > td {
    background: var(--surface-2) !important;
}

/* Radzen header */
.rz-datatable-thead tr,
.rz-grid-table > thead > tr {
    background: var(--surface-2) !important;
}

.rz-datatable-thead th,
.rz-grid-table > thead > tr > th,
.rz-column-title {
    background: var(--surface-2) !important;
    color: var(--text-tertiary) !important;
    border-color: var(--border-subtle) !important;
}

/* --- Tables --- */
.table {
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--panel-radius, 8px);
    overflow: hidden;
    background: var(--surface-panel, var(--surface-2));
}

.table thead th {
    color: var(--text-tertiary);
    background: var(--table-header-bg, var(--surface-3));
    border-bottom-color: var(--border-default);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.table td,
.table th {
    border-color: var(--border-subtle);
    color: var(--text-secondary);
}

.table-hover tbody tr:hover {
    background-color: var(--table-row-hover, var(--surface-3)) !important;
}

.table-secondary {
    background-color: var(--surface-3) !important;
    color: var(--text-primary) !important;
}

.table tbody tr {
    transition: background-color var(--duration-fast) var(--ease-out);
}

/* --- Buttons --- */
.btn {
    border-radius: var(--control-radius, var(--radius-sm)) !important;
    font-weight: 800 !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    line-height: 1.1 !important;
    padding: 0.72rem 1rem !important;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out) !important;
    border: none !important;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--button-primary-bg, var(--accent-gradient)) !important;
    color: var(--button-primary-text, #fff) !important;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 56%, var(--text-primary) 12%) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent),
        0 14px 32px var(--accent-primary-glow) !important;
}

.btn-primary:hover {
    filter: brightness(1.05);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 32%, transparent),
        0 18px 42px var(--accent-primary-glow) !important;
    color: var(--button-primary-text, #fff) !important;
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--surface-control, var(--surface-3)) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
}

.btn-secondary:hover {
    background: var(--surface-control-hover, var(--surface-4)) !important;
    color: var(--text-primary) !important;
}

.btn-outline-primary {
    border: 1px solid var(--accent-primary) !important;
    color: var(--accent-primary) !important;
    background: color-mix(in srgb, var(--accent-primary-subtle) 42%, transparent) !important;
}

.btn-outline-primary:hover {
    background: var(--accent-primary) !important;
    color: var(--button-primary-text, #fff) !important;
}

.btn-outline-secondary {
    border: 1px solid var(--border-strong) !important;
    color: var(--text-secondary) !important;
    background: var(--surface-control, transparent) !important;
}

.btn-outline-secondary:hover {
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
}

.btn-success {
    background: var(--accent-success) !important;
    border: none !important;
    color: #fff !important;
}

.btn-success:hover {
    background: var(--accent-success-hover) !important;
}

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

.btn-danger:hover {
    background: var(--accent-danger-hover) !important;
}

.btn-link {
    color: var(--accent-secondary);
    text-decoration: none;
}

.btn-link:hover {
    color: var(--accent-secondary-hover);
    text-decoration: none;
}

.btn-sm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8125rem !important;
    border-radius: 6px !important;
}

.btn-accent {
    background: var(--button-primary-bg, var(--accent-gradient)) !important;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 56%, var(--text-primary) 12%) !important;
    color: var(--button-primary-text, #fff) !important;
    font-weight: 800 !important;
}

.btn-accent:hover {
    background: var(--accent-primary-hover) !important;
    box-shadow: var(--shadow-md) !important;
    color: #fff !important;
}

/* --- Badges --- */
.badge {
    padding: 0.25rem 0.5rem !important;
    border-radius: var(--radius-xs) !important;
    font-family: var(--font-body) !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0;
}

.badge.bg-secondary {
    background: var(--surface-4) !important;
    color: var(--text-primary) !important;
}

.badge.bg-light {
    background: var(--surface-3) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-subtle);
}

.badge.bg-warning {
    background-color: var(--accent-warning) !important;
}

.badge.bg-success {
    background-color: var(--accent-success) !important;
}

.badge.bg-danger {
    background-color: var(--accent-danger) !important;
}

.badge.bg-info {
    background-color: var(--accent-info) !important;
}

.badge-primary, .bg-primary {
    background: var(--accent-primary) !important;
    color: #fff !important;
}

.badge-success, .bg-success {
    background: var(--accent-success) !important;
    color: #fff !important;
}

.badge-warning, .bg-warning {
    background: var(--accent-warning) !important;
    color: var(--surface-0) !important;
}

.badge-danger, .bg-danger {
    background: var(--accent-danger) !important;
    color: #fff !important;
}

.badge-secondary, .bg-secondary {
    background: var(--surface-3) !important;
    color: var(--text-secondary) !important;
}

.badge-info, .bg-info {
    background: var(--accent-info) !important;
    color: #fff !important;
}

.status-badge {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
}

.status-badge.active { background: var(--accent-success-subtle); color: var(--accent-success); }
.status-badge.ending { background: var(--accent-warning-subtle); color: var(--accent-warning); }
.status-badge.closed { background: var(--accent-danger-subtle); color: var(--accent-danger); }

/* --- Form Controls --- */
.form-control {
    border: 1px solid var(--border-default) !important;
    border-radius: var(--control-radius, var(--radius-sm)) !important;
    padding: 12px 16px !important;
    background: var(--surface-control, color-mix(in srgb, var(--surface-2) 86%, var(--surface-0) 14%)) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out) !important;
}

.form-control:focus {
    border-color: var(--accent-primary) !important;
    background: var(--surface-control-hover, var(--surface-control)) !important;
    box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-primary-subtle)) !important;
    outline: none !important;
}

.form-control::placeholder { color: var(--text-quaternary) !important; }

.form-select {
    background-color: var(--surface-control, color-mix(in srgb, var(--surface-2) 86%, var(--surface-0) 14%)) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--control-radius, var(--radius-sm)) !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out) !important;
}

.form-select:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-primary-subtle)) !important;
    outline: none !important;
}

/* --- Form Check --- */
.form-check-input:checked {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

.form-check-input:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: var(--focus-ring, 0 0 0 0.25rem var(--accent-primary-subtle)) !important;
}

/* Auth screens use a neutral glass surface independent of the selected app skin. */
html[data-theme] .login-page .login-form-container .form-control,
html[data-theme] .login-page .login-form-container input.form-control,
html[data-theme] .login-page .login-form-container .form-control-lg {
    min-height: 3.35rem !important;
    border: 1px solid rgba(16, 20, 23, 0.12) !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.74) !important;
    color: #101417 !important;
    font-family: var(--font-body, 'DM Sans', system-ui, sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 650 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 12px 26px rgba(16, 20, 23, 0.055) !important;
    caret-color: #18bce8 !important;
}

html[data-theme] .login-page .login-form-container .auth-input-shell .form-control {
    padding-left: 3rem !important;
}

html[data-theme] .login-page .login-form-container .form-control:focus,
html[data-theme] .login-page .login-form-container input.form-control:focus,
html[data-theme] .login-page .login-form-container .form-control-lg:focus {
    border-color: rgba(24, 188, 232, 0.62) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow:
        0 0 0 3px rgba(24, 188, 232, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

html[data-theme] .login-page .login-form-container .form-control::placeholder,
html[data-theme] .login-page .login-form-container .form-control-lg::placeholder {
    color: rgba(16, 20, 23, 0.35) !important;
}

html[data-theme] .login-page .login-form-container input.form-control:-webkit-autofill,
html[data-theme] .login-page .login-form-container input.form-control:-webkit-autofill:hover,
html[data-theme] .login-page .login-form-container input.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #101417 !important;
    box-shadow:
        0 0 0 1000px rgba(255, 255, 255, 0.9) inset,
        0 12px 26px rgba(16, 20, 23, 0.055) !important;
}

html[data-theme] .login-page .login-form-container .form-check-input {
    width: 1.15rem !important;
    height: 1.15rem !important;
    border: 1px solid rgba(16, 20, 23, 0.24) !important;
    border-radius: 5px !important;
    background-color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme] .login-page .login-form-container .form-check-input:checked {
    border-color: #18bce8 !important;
    background-color: #18bce8 !important;
}

/* --- Cards --- */
.card {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--text-primary) 4%, transparent), transparent 9rem),
        var(--surface-panel, var(--surface-2)) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--panel-radius, var(--radius-sm)) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden !important;
    margin-bottom: 1rem !important;
    transition:
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out) !important;
}

.card-header {
    background: color-mix(in srgb, var(--surface-panel-strong, var(--surface-3)) 78%, transparent) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    padding: 1rem var(--card-padding) !important;
    font-family: var(--font-display);
    font-weight: 720;
}

.card-body { padding: var(--card-padding) !important; }

.card a {
    color: var(--accent-primary);
}

.card a:hover {
    color: var(--accent-primary-hover);
}

/* --- List Groups --- */
.list-group {
    border-radius: var(--radius-sm) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-xs) !important;
    background: var(--surface-2) !important;
}

.list-group-item {
    border: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    padding: 0.75rem 1rem !important;
    background: var(--surface-2) !important;
    font-family: var(--font-body) !important;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out) !important;
}

.list-group-item:hover { background: var(--surface-3) !important; }
.list-group-item:last-child { border-bottom: none !important; }

.list-group-item.active {
    background: var(--accent-primary-subtle) !important;
    border-left: 3px solid var(--accent-primary) !important;
    color: var(--text-primary) !important;
}

.list-group-flush > .list-group-item,
.list-group-item.flush {
    padding-left: 0;
    padding-right: 0;
}

/* --- Alerts --- */
.alert {
    border: none !important;
    border-radius: 8px !important;
    padding: 0.875rem 1rem !important;
    font-size: 0.875rem !important;
    font-family: var(--font-body) !important;
}

.alert-primary { background: var(--accent-primary-subtle) !important; color: var(--accent-primary) !important; border-left: 3px solid var(--accent-primary) !important; }
.alert-success { background: var(--accent-success-subtle) !important; color: var(--accent-success) !important; border-left: 3px solid var(--accent-success) !important; }
.alert-warning { background: var(--accent-warning-subtle) !important; color: var(--accent-warning) !important; border-left: 3px solid var(--accent-warning) !important; }
.alert-danger { background: var(--accent-danger-subtle) !important; color: var(--accent-danger) !important; border-left: 3px solid var(--accent-danger) !important; }

/* --- Modals --- */
.modal-content {
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-xl) !important;
    background: var(--surface-2) !important;
}

.modal-header {
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    padding: 24px !important;
}

.modal-body { padding: 24px !important; }

.modal-footer {
    background: var(--surface-2) !important;
    border-top: 1px solid var(--border-subtle) !important;
    padding: 20px 24px !important;
}

/* --- Nav Tabs --- */
.nav-tabs { border-bottom: 1px solid var(--border-subtle) !important; }

.nav-tabs .nav-link {
    border: none !important;
    color: var(--text-tertiary) !important;
    font-weight: 700 !important;
    padding: 12px 20px !important;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
}

.nav-tabs .nav-link.active {
    color: var(--accent-secondary) !important;
    border-bottom: 2px solid var(--accent-secondary) !important;
    background: transparent !important;
}

.nav-tabs .nav-link:hover { color: var(--accent-secondary) !important; }

/* --- Nav Pills --- */
.nav-pills-sm .nav-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: var(--bs-border-radius-sm);
}

/* --- Breadcrumbs --- */
.breadcrumb, .breadcrumb-item { background: transparent; margin-bottom: 0; padding: 0; }
.breadcrumb-item + .breadcrumb-item::before { content: ">"; color: var(--text-quaternary); font-weight: 600; }
.breadcrumb-item a { color: var(--accent-secondary) !important; text-decoration: none !important; font-weight: 500 !important; }
.breadcrumb-item a:hover { color: var(--accent-secondary-hover) !important; }
.breadcrumb-item.active { color: var(--text-tertiary) !important; font-weight: 500 !important; }

/* --- Accordions --- */
.accordion-item {
    background-color: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

.accordion-button {
    background-color: var(--surface-2) !important;
    color: var(--text-primary) !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--surface-3) !important;
    color: var(--text-primary) !important;
}

.accordion-body {
    background-color: var(--surface-2) !important;
}

/* --- Dropdowns --- */
.dropdown-menu {
    background-color: var(--surface-2) !important;
    border-color: var(--border-default) !important;
}

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

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--surface-3) !important;
    color: var(--text-primary) !important;
}

/* --- Pre/Code --- */
pre {
    background-color: var(--surface-3) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

/* --- Tooltips & Popovers --- */
.tooltip-inner {
    background-color: var(--surface-4) !important;
    color: var(--text-primary) !important;
}

.popover {
    background-color: var(--surface-2) !important;
    border-color: var(--border-default) !important;
}

.popover-header {
    background-color: var(--surface-3) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-default) !important;
}

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

/* ============================================================================
   PRODUCT SURFACE OWNERSHIP
   Final pass over Bootstrap primitives so legacy views inherit DynastyDb.
   ============================================================================ */

.card,
.modal-content,
.dropdown-menu,
.list-group,
.accordion-item {
    background: color-mix(in srgb, var(--surface-module) 88%, transparent) !important;
    border-color: var(--line-default) !important;
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: blur(18px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
}

.card-header,
.modal-header,
.accordion-button,
.table thead th,
.table-light,
thead.table-light,
.table > :not(caption) > * > .table-light {
    background: color-mix(in srgb, var(--surface-module-strong) 82%, transparent) !important;
    color: var(--text-secondary) !important;
    border-color: var(--line-faint) !important;
}

.card-footer,
.modal-footer {
    background: color-mix(in srgb, var(--surface-module-soft) 92%, transparent) !important;
    border-color: var(--line-faint) !important;
}

.table {
    background: color-mix(in srgb, var(--surface-module) 78%, transparent) !important;
    border-color: var(--line-default) !important;
    box-shadow: none !important;
}

.table > :not(caption) > * > * {
    background: transparent !important;
    border-bottom-color: var(--line-faint) !important;
    color: var(--text-secondary) !important;
}

.table tbody tr:hover > *,
.table-hover > tbody > tr:hover > * {
    background: var(--surface-row-hover) !important;
    color: var(--text-primary) !important;
}

.table-active,
.table-active > *,
.table > tbody > tr.table-active > * {
    background: var(--surface-selected) !important;
    color: var(--text-primary) !important;
}

.input-group-text {
    background: color-mix(in srgb, var(--surface-module-strong) 76%, transparent) !important;
    border-color: var(--line-default) !important;
    color: var(--text-tertiary) !important;
}

.form-check-input {
    background-color: var(--surface-control) !important;
    border-color: var(--line-strong) !important;
}

.form-range::-webkit-slider-thumb {
    background: var(--accent-primary) !important;
    box-shadow: 0 0 0 4px var(--accent-primary-subtle) !important;
}

.form-range::-webkit-slider-runnable-track {
    background: color-mix(in srgb, var(--surface-4) 70%, var(--surface-1) 30%) !important;
}

.progress {
    background: color-mix(in srgb, var(--surface-4) 70%, var(--surface-1) 30%) !important;
    border-radius: var(--radius-full) !important;
}

.progress-bar {
    background: var(--accent-primary) !important;
}

.alert {
    background: color-mix(in srgb, var(--surface-module) 86%, transparent) !important;
    border: 1px solid var(--line-default) !important;
    color: var(--text-secondary) !important;
}

.alert-info {
    background: color-mix(in srgb, var(--accent-info-subtle) 55%, var(--surface-module) 45%) !important;
    color: var(--text-primary) !important;
    border-left: 3px solid var(--accent-info) !important;
}

.btn-info,
.btn-outline-info:hover {
    background: var(--accent-info) !important;
    border-color: var(--accent-info) !important;
    color: #fff !important;
}

.btn-warning {
    background: color-mix(in srgb, var(--accent-warning) 92%, var(--surface-0) 8%) !important;
    border-color: color-mix(in srgb, var(--accent-warning) 68%, var(--line-default) 32%) !important;
    color: var(--surface-0) !important;
}

.btn-outline-warning {
    background: var(--accent-warning-subtle) !important;
    border: 1px solid color-mix(in srgb, var(--accent-warning) 48%, var(--line-default) 52%) !important;
    color: var(--accent-warning) !important;
}

.btn-outline-warning:hover {
    background: var(--accent-warning) !important;
    color: var(--surface-0) !important;
}

.btn-outline-success {
    background: var(--accent-success-subtle) !important;
    border: 1px solid color-mix(in srgb, var(--accent-success) 48%, var(--line-default) 52%) !important;
    color: var(--accent-success) !important;
}

.btn-outline-success:hover {
    background: var(--accent-success) !important;
    color: #fff !important;
}

.btn-outline-danger {
    background: var(--accent-danger-subtle) !important;
    border: 1px solid color-mix(in srgb, var(--accent-danger) 48%, var(--line-default) 52%) !important;
    color: var(--accent-danger) !important;
}

.btn-outline-danger:hover {
    background: var(--accent-danger) !important;
    color: #fff !important;
}

.nav-tabs {
    gap: 0.35rem;
    border-bottom: 1px solid var(--line-faint) !important;
}

.nav-tabs .nav-link {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--control-radius) var(--control-radius) 0 0 !important;
    color: var(--text-tertiary) !important;
    letter-spacing: 0 !important;
}

.nav-tabs .nav-link:hover {
    background: var(--surface-row-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--line-faint) !important;
}

.nav-tabs .nav-link.active {
    background: color-mix(in srgb, var(--surface-module) 88%, transparent) !important;
    border: 1px solid var(--line-default) !important;
    border-bottom-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

.btn-close {
    filter: invert(1) grayscale(1);
    opacity: 0.72;
}

.btn-close:hover {
    opacity: 1;
}

/* Radzen overlay popups (dropdown / multiselect / autocomplete panels) are portaled to
   <body>, outside the themed page container, so Radzen's default LIGHT panel showed through
   on the dark themes — e.g. the auction "Years" dropdown rendered white options on a dark
   page. Theme them with the design tokens so the popup always matches the active theme. */
.rz-dropdown-panel,
.rz-overlaypanel,
.rz-overlay-panel,
.rz-popup,
.rz-multiselect-panel,
.rz-autocomplete-panel {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
    /* Soft, theme-neutral elevation — reads fine on both light and dark themes
       (a heavy near-black shadow looked wrong on the light themes). */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}

.rz-dropdown-panel .rz-dropdown-item,
.rz-dropdown-panel .rz-dropdown-items li,
.rz-multiselect-panel .rz-multiselect-item,
.rz-autocomplete-panel .rz-autocomplete-list-item {
    background: transparent !important;
    color: var(--text-primary) !important;
}

.rz-dropdown-panel .rz-dropdown-item:hover,
.rz-dropdown-panel .rz-dropdown-item.rz-state-highlight,
.rz-multiselect-panel .rz-multiselect-item:hover,
.rz-autocomplete-panel .rz-autocomplete-list-item:hover {
    background: var(--accent-primary-subtle) !important;
    color: var(--text-primary) !important;
}

.rz-dropdown-filter,
.rz-multiselect-filter {
    background: var(--surface-1) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}