/* ===================================================================
   Finance Portal Theme — maps design tokens → Bootstrap vars
   ================================================================ */

/* ── Bootstrap variable overrides ── */
:root {
    /* Primary */
    --bs-primary:          #0F6B5B;
    --bs-primary-rgb:      15, 107, 91;
    --bs-primary-text:     #0F6B5B;
    --bs-primary-bg-subtle: rgba(15, 107, 91, 0.10);
    --bs-primary-border-subtle: rgba(15, 107, 91, 0.25);

    /* Body */
    --bs-body-bg:    var(--surface-0);
    --bs-body-color: var(--text-normal);
    --bs-body-font-family: var(--font-system, system-ui, sans-serif);

    /* Secondary text */
    --bs-secondary-color: var(--text-muted);

    /* Borders */
    --bs-border-color: var(--border-subtle);
    --bs-border-color-translucent: rgba(15, 107, 91, 0.15);

    /* Surfaces */
    --bs-secondary-bg:  var(--surface-2);
    --bs-tertiary-bg:   var(--surface-3);
    --bs-emphasis-color: var(--text-strong);

    /* Link */
    --bs-link-color:       var(--accent);
    --bs-link-hover-color: var(--accent-strong);

    /* State */
    --bs-success: var(--success);
    --bs-warning: var(--warning);
    --bs-danger:  var(--danger);
    --bs-info:    var(--info);

    /* Focus ring */
    --bs-focus-ring-color: rgba(15, 107, 91, 0.30);
    --bs-focus-ring-width: 3px;

    /* Link color driven by primary */
    --bs-link-color-rgb: 15, 107, 91;
    --bs-link-hover-color-rgb: 10, 79, 68;
}

[data-theme="dark"] {
    --bs-body-bg:    var(--surface-0);
    --bs-body-color: var(--text-normal);
    --bs-border-color: var(--border-subtle);
    --bs-secondary-bg: var(--surface-2);
    --bs-tertiary-bg:  var(--surface-3);
    --bs-emphasis-color: var(--text-strong);
    --bs-link-color:       var(--accent);
    --bs-link-hover-color: var(--accent-strong);
}

/* ── Base ── */
body {
    background-color: var(--surface-0);
    color: var(--text-normal);
}

/* ── Buttons ── */
.btn-primary {
    /* Bootstrap 5.2+ CSS variable overrides */
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  #0F6B5B;
    --bs-btn-border-color:        #0F6B5B;
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            #0A4F44;
    --bs-btn-hover-border-color:  #0A4F44;
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           #083d35;
    --bs-btn-active-border-color: #083d35;
    --bs-btn-disabled-color:      #fff;
    --bs-btn-disabled-bg:         #0F6B5B;
    --bs-btn-disabled-border-color: #0F6B5B;
    --bs-btn-focus-shadow-rgb:    15, 107, 91;
    /* Direct property fallbacks */
    background-color: #0F6B5B;
    border-color: #0F6B5B;
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #0A4F44;
    border-color: #0A4F44;
    color: #fff;
}

.btn-primary:active,
.btn-primary.active {
    background-color: #083d35;
    border-color: #083d35;
    color: #fff;
}

.btn-outline-primary {
    /* Bootstrap 5.2+ CSS variable overrides */
    --bs-btn-color:               #0F6B5B;
    --bs-btn-border-color:        #0F6B5B;
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            #0F6B5B;
    --bs-btn-hover-border-color:  #0F6B5B;
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           #0A4F44;
    --bs-btn-active-border-color: #0A4F44;
    --bs-btn-focus-shadow-rgb:    15, 107, 91;
    /* Direct property fallbacks */
    color: #0F6B5B;
    border-color: #0F6B5B;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: #0F6B5B;
    border-color: #0F6B5B;
    color: #fff;
}

.btn-outline-secondary {
    --bs-btn-color:               var(--text-muted);
    --bs-btn-border-color:        var(--border-normal);
    --bs-btn-hover-color:         var(--text-normal);
    --bs-btn-hover-bg:            var(--surface-3);
    --bs-btn-hover-border-color:  var(--border-normal);
    --bs-btn-active-color:        var(--text-normal);
    --bs-btn-active-bg:           var(--surface-3);
    --bs-btn-focus-shadow-rgb:    82, 96, 109;
}

/* ── Cards ── */
.card {
    background-color: rgba(255, 252, 247, 0.97);
    border: 1px solid rgba(215, 224, 219, 0.65);
    border-radius: 1rem;
    /* Pin text colors exactly like the login card — no inheritance ambiguity */
    color: #1F2933;
    --bs-card-color: #1F2933;
    --bs-card-bg: rgba(255, 252, 247, 0.97);
    box-shadow:
        0 8px 32px rgba(6, 46, 38, 0.10),
        0 2px 8px rgba(10, 79, 68, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.card .text-muted,
.card small.text-muted {
    color: #52606D !important;
}

.card-header,
.card-footer {
    background-color: #EEF3F0;
    border-color: rgba(215, 224, 219, 0.65);
    color: #1F2933;
}

/* Dark mode: switch card back to token-based dark surfaces */
[data-theme="dark"] .card {
    background-color: var(--surface-1);
    border-color: var(--border-subtle);
    color: var(--text-normal);
    --bs-card-color: var(--text-normal);
    --bs-card-bg: var(--surface-1);
    box-shadow: var(--shadow-2);
}

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

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

/* ── Forms ── */
.form-control,
.form-select {
    background-color: var(--surface-1);
    border-color: var(--border-normal);
    color: var(--text-normal);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--surface-1);
    border-color: var(--accent);
    color: var(--text-normal);
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

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

.form-control:disabled,
.form-select:disabled {
    background-color: var(--surface-2);
    color: var(--text-disabled);
    border-color: var(--border-subtle);
}

.input-group-text {
    background-color: var(--surface-2);
    border-color: var(--border-normal);
    color: var(--text-muted);
}

.form-label {
    color: var(--text-normal);
    font-weight: var(--font-medium, 500);
    font-size: var(--text-sm, 0.875rem);
}

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

.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

/* ── Modals ── */
.modal-content {
    background-color: rgba(255, 252, 247, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    /* Pin text like the login card */
    color: #1F2933;
    border: 1px solid rgba(215, 224, 219, 0.65);
    border-radius: 1.25rem;
    box-shadow:
        0 24px 64px rgba(6, 46, 38, 0.28),
        0 8px 24px rgba(10, 79, 68, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.modal-content .text-muted,
.modal-content small.text-muted {
    color: #52606D !important;
}

.modal-header {
    background-color: rgba(246, 244, 238, 0.85);
    border-bottom-color: rgba(215, 224, 219, 0.65);
    border-radius: 1.25rem 1.25rem 0 0;
    color: #1F2933;
}

.modal-footer {
    border-top-color: rgba(215, 224, 219, 0.65);
    color: #1F2933;
}

/* Dark mode modals: revert to token surfaces */
[data-theme="dark"] .modal-content {
    background-color: var(--surface-1);
    color: var(--text-normal);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-4);
}

[data-theme="dark"] .modal-content .text-muted,
[data-theme="dark"] .modal-content small.text-muted {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .modal-header {
    background-color: var(--surface-2);
    border-bottom-color: var(--border-subtle);
    color: var(--text-normal);
}

[data-theme="dark"] .modal-header .btn-close,
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-subtle);
    color: var(--text-normal);
}

/* ── Dropdowns ── */
.dropdown-menu {
    background-color: var(--surface-1);
    border-color: var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
}

.dropdown-item {
    color: var(--text-normal);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}

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

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--accent-soft);
    color: var(--accent-strong);
}

.dropdown-divider {
    border-top-color: var(--border-subtle);
}

/* ── Tables ── */
.table {
    --bs-table-bg:            transparent;
    --bs-table-color:         #1F2933;
    --bs-table-border-color:  rgba(215, 224, 219, 0.65);
    --bs-table-striped-bg:    rgba(238, 243, 240, 0.6);
    --bs-table-hover-bg:      rgba(228, 237, 232, 0.7);
    --bs-table-active-bg:     rgba(15, 107, 91, 0.08);
    color: #1F2933;
}

[data-theme="dark"] .table {
    --bs-table-bg:            transparent;
    --bs-table-color:         var(--text-normal);
    --bs-table-border-color:  var(--border-subtle);
    --bs-table-striped-bg:    var(--surface-2);
    --bs-table-hover-bg:      var(--surface-3);
    --bs-table-active-bg:     var(--accent-soft);
    color: var(--text-normal);
}

/* ── Badges ── */
.badge.bg-success { background-color: var(--success) !important; }
.badge.bg-warning { background-color: var(--warning) !important; }
.badge.bg-danger  { background-color: var(--danger)  !important; }
.badge.bg-primary { background-color: var(--accent)  !important; }

/* ── Alerts ── */
.alert-danger {
    background-color: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}

.alert-success {
    background-color: var(--success-soft);
    border-color: var(--success);
    color: var(--success);
}

.alert-warning {
    background-color: var(--warning-soft);
    border-color: var(--warning);
    color: var(--warning);
}

.alert-info {
    background-color: var(--info-soft);
    border-color: var(--info);
    color: var(--info);
}

/* ── Nav tabs ── */
.nav-tabs .nav-link {
    color: var(--text-muted);
    border-color: transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.nav-tabs .nav-link.active {
    background-color: var(--surface-1);
    border-color: var(--border-subtle) var(--border-subtle) var(--surface-1);
    color: var(--accent);
}

/* ── List groups ── */
.list-group-item {
    background-color: transparent;
    border-color: rgba(215, 224, 219, 0.65);
    color: #1F2933;
}

.list-group-item:hover {
    background-color: rgba(238, 243, 240, 0.6);
    color: #1F2933;
}

[data-theme="dark"] .list-group-item {
    background-color: transparent;
    border-color: var(--border-subtle);
    color: var(--text-normal);
}

[data-theme="dark"] .list-group-item:hover {
    background-color: var(--surface-2);
    color: var(--text-normal);
}

/* ── Progress ── */
.progress {
    background-color: var(--surface-2);
}

.progress-bar {
    background-color: var(--accent);
}

/* ── Pagination ── */
.page-link {
    background-color: var(--surface-1);
    border-color: var(--border-subtle);
    color: var(--text-normal);
}

.page-link:hover {
    background-color: var(--surface-2);
    color: var(--accent);
}

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

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

/* ── Utility overrides ── */
.text-primary { color: var(--accent) !important; }
.text-muted   { color: var(--text-muted) !important; }

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

.border { border-color: var(--border-subtle) !important; }

/* ── Smooth transitions ── */
body,
.card,
.modal-content,
.dropdown-menu,
.form-control,
.form-select,
.btn {
    transition: background-color var(--transition-base),
                color var(--transition-base),
                border-color var(--transition-base);
}

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