/* ============================================================================
   HR Agent — Tabler / Bootstrap variable overrides
   Loaded LAST so it wins specificity over Tabler core CSS.
   Strategy: remap --tblr-* variables to our semantic tokens so Tabler
   components (modals, tables, forms, navbar) follow the active theme.
   ============================================================================ */

:root,
[data-theme="light"] {
    /* Body & surfaces */
    --tblr-body-bg:        var(--bg-page);
    --tblr-body-color:     var(--text-primary);
    --tblr-body-color-rgb: 15, 23, 42;
    --tblr-bg-surface:     var(--bg-surface);
    --tblr-bg-surface-secondary: var(--bg-surface-sunken);

    /* Borders */
    --tblr-border-color:        var(--border-default);
    --tblr-border-color-translucent: var(--border-subtle);

    /* Brand */
    --tblr-primary:        var(--brand-500);
    --tblr-primary-rgb:    26, 95, 122;
    --tblr-primary-fg:     #ffffff;
    --tblr-primary-darken: var(--brand-600);
    --tblr-primary-lt:     var(--brand-tint);

    /* Semantic */
    --tblr-success:     var(--success);
    --tblr-success-rgb: 22, 163, 74;
    --tblr-warning:     var(--warning);
    --tblr-warning-rgb: 217, 119, 6;
    --tblr-danger:      var(--danger);
    --tblr-danger-rgb:  220, 38, 38;
    --tblr-info:        var(--info);
    --tblr-info-rgb:    2, 132, 199;

    /* Cards / nav */
    --tblr-card-bg:           var(--bg-surface);
    --tblr-card-border-color: var(--border-subtle);
    --tblr-navbar-bg:         var(--bg-surface);
    --tblr-navbar-color:      var(--text-secondary);
    --tblr-navbar-active-color: var(--brand-600);

    /* Text */
    --tblr-secondary-color: var(--text-secondary);
    --tblr-muted:           var(--text-muted);

    /* Form elements */
    --tblr-form-control-bg:           var(--bg-surface);
    --tblr-form-control-color:        var(--text-primary);
    --tblr-form-control-border-color: var(--border-default);
}

[data-theme="dark"] {
    --tblr-body-bg:        var(--bg-page);
    --tblr-body-color:     var(--text-primary);
    --tblr-body-color-rgb: 241, 245, 249;
    --tblr-bg-surface:     var(--bg-surface);
    --tblr-bg-surface-secondary: var(--bg-surface-sunken);

    --tblr-border-color:        var(--border-default);
    --tblr-border-color-translucent: var(--border-subtle);

    --tblr-primary:        var(--brand-500);
    --tblr-primary-rgb:    79, 163, 192;
    --tblr-primary-fg:     #0b1216;
    --tblr-primary-darken: var(--brand-600);
    --tblr-primary-lt:     var(--brand-tint);

    --tblr-success:     var(--success);
    --tblr-success-rgb: 52, 211, 153;
    --tblr-warning:     var(--warning);
    --tblr-warning-rgb: 251, 191, 36;
    --tblr-danger:      var(--danger);
    --tblr-danger-rgb:  248, 113, 113;
    --tblr-info:        var(--info);
    --tblr-info-rgb:    56, 189, 248;

    --tblr-card-bg:           var(--bg-surface);
    --tblr-card-border-color: var(--border-subtle);
    --tblr-navbar-bg:         var(--bg-surface);
    --tblr-navbar-color:      var(--text-secondary);
    --tblr-navbar-active-color: var(--teal-300);

    --tblr-secondary-color: var(--text-secondary);
    --tblr-muted:           var(--text-muted);

    --tblr-form-control-bg:           var(--bg-surface);
    --tblr-form-control-color:        var(--text-primary);
    --tblr-form-control-border-color: var(--border-default);
}

/* Tabler often hardcodes `bg-white` / `bg-light` — make them theme-aware */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

/* Header / sidebar Tabler's data-bs-theme override */
.navbar.navbar-vertical[data-bs-theme="light"],
.navbar.navbar-vertical[data-bs-theme="dark"] {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

/* Tabler's .text-default depends on body color */
.text-default { color: var(--text-primary) !important; }

/* Bootstrap close button (X) needs to be visible in both modes */
.btn-close {
    filter: invert(0);
    opacity: 0.6;
}
.btn-close:hover { opacity: 1; }
[data-theme="dark"] .btn-close { filter: invert(0.9); }
.btn-close-white { filter: invert(1); opacity: 0.9; }
[data-theme="dark"] .btn-close-white { filter: invert(1); }

/* Tabler accordion */
.accordion-button {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}
.accordion-button:not(.collapsed) {
    background-color: var(--brand-tint);
    color: var(--brand-600);
}
[data-theme="dark"] .accordion-button:not(.collapsed) { color: var(--teal-300); }
.accordion-item {
    background-color: var(--bg-surface);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

/* HR rule */
hr {
    border-color: var(--border-subtle);
    opacity: 1;
}

/* Tabler datatable / divider helpers */
.divider {
    color: var(--text-muted);
    border-color: var(--border-subtle);
}

/* Forms within dark mode that Tabler stamps with white */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-check-input {
    color-scheme: dark;
}

/* Tabler's stamps and decorative tints */
.tag {
    background-color: var(--bg-surface-sunken);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}

/* Empty state placeholders */
.empty {
    background-color: transparent;
    color: var(--text-secondary);
}
.empty-title  { color: var(--text-primary); }
.empty-subtitle { color: var(--text-muted); }