/* file: portal/app/static/css/overrides.css
 *
 * Bootstrap component CSS variable overrides.
 * Remaps Bootstrap's --bs-{component}-* variables to our design tokens.
 *
 * MUST load AFTER bootstrap.min.css AND theme.css.
 *
 * Dark mode: tokens remap automatically in theme.css,
 * so these overrides work in both light and dark mode without duplication.
 *
 * Components not covered:
 *   .form-control / .form-select — no component CSS vars (uses globals)
 *   .badge — no --bs-badge-bg (uses utility classes)
 */

@layer overrides {

/* ===========================================
   Buttons
   =========================================== */

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

.btn-secondary {
    --bs-btn-bg: var(--secondary);
    --bs-btn-color: var(--secondary-text);
    --bs-btn-border-color: var(--secondary-border);
    --bs-btn-hover-bg: var(--secondary-hover);
    --bs-btn-hover-border-color: var(--secondary-hover);
    --bs-btn-hover-color: var(--secondary-text);
    --bs-btn-active-bg: var(--secondary-active);
    --bs-btn-active-border-color: var(--secondary-active);
    --bs-btn-active-color: var(--secondary-text);
    --bs-btn-disabled-bg: var(--secondary);
    --bs-btn-disabled-border-color: var(--secondary-border);
    --bs-btn-disabled-color: var(--secondary-text);
}

.btn-danger {
    --bs-btn-bg: var(--danger);
    --bs-btn-color: var(--danger-text);
    --bs-btn-border-color: var(--danger-border);
    --bs-btn-hover-bg: var(--danger-hover);
    --bs-btn-hover-border-color: var(--danger-hover);
    --bs-btn-hover-color: var(--danger-text);
    --bs-btn-active-bg: var(--danger-active);
    --bs-btn-active-border-color: var(--danger-active);
    --bs-btn-active-color: var(--danger-text);
    --bs-btn-disabled-bg: var(--danger);
    --bs-btn-disabled-border-color: var(--danger-border);
    --bs-btn-disabled-color: var(--danger-text);
}

.btn-warning {
    --bs-btn-bg: var(--warning);
    --bs-btn-color: var(--warning-text);
    --bs-btn-border-color: var(--warning-border);
    --bs-btn-hover-bg: var(--warning-hover);
    --bs-btn-hover-border-color: var(--warning-hover);
    --bs-btn-hover-color: var(--warning-text);
    --bs-btn-active-bg: var(--warning-active);
    --bs-btn-active-border-color: var(--warning-active);
    --bs-btn-active-color: var(--warning-text);
    --bs-btn-disabled-bg: var(--warning);
    --bs-btn-disabled-border-color: var(--warning-border);
    --bs-btn-disabled-color: var(--warning-text);
}

.btn-success {
    --bs-btn-bg: var(--success);
    --bs-btn-color: var(--success-text);
    --bs-btn-border-color: var(--success-border);
    --bs-btn-hover-bg: var(--success-hover);
    --bs-btn-hover-border-color: var(--success-hover);
    --bs-btn-hover-color: var(--success-text);
    --bs-btn-active-bg: var(--success-active);
    --bs-btn-active-border-color: var(--success-active);
    --bs-btn-active-color: var(--success-text);
    --bs-btn-disabled-bg: var(--success);
    --bs-btn-disabled-border-color: var(--success-border);
    --bs-btn-disabled-color: var(--success-text);
}

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

/* shadcn-style outline: white surface, thin light border, subtle shadow,
   soft gray hover fill. Text color stays the page foreground (no muted
   gray). Works in light and dark via --palette-neutral-* remap. */
.btn-outline-secondary {
    --bs-btn-bg: var(--outline-bg);
    --bs-btn-color: var(--page-text);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-color: var(--page-text);
    --bs-btn-hover-border-color: var(--border);
    --bs-btn-active-bg: var(--palette-neutral-200);
    --bs-btn-active-color: var(--page-text);
    --bs-btn-active-border-color: var(--border);
    --bs-btn-disabled-bg: var(--outline-bg);
    --bs-btn-disabled-color: var(--page-text);
    --bs-btn-disabled-border-color: var(--border);
    --bs-btn-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-border-color: var(--danger-border);
    --bs-btn-hover-color: var(--danger-text);
    --bs-btn-hover-bg: var(--danger-hover);
    --bs-btn-hover-border-color: var(--danger-hover);
    --bs-btn-active-color: var(--danger-text);
    --bs-btn-active-bg: var(--danger-active);
    --bs-btn-active-border-color: var(--danger-active);
    --bs-btn-disabled-color: var(--danger);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--danger-border);
}

/* All buttons: 12px radius with squircle corners. corner-shape is a
   progressive enhancement (Chromium-based browsers); unsupported browsers
   fall back to standard border-radius rounding. */
.btn {
    border-radius: var(--radius-button);
    corner-shape: squircle;
}

/* Circular buttons opt out: squircle + 50% radius renders as a rounded
   square, not a circle. Reset corner-shape so the circle stays round. */
.btn.rounded-circle {
    border-radius: 50%;
    corner-shape: round;
}

/* ===========================================
   Cards
   =========================================== */

.card {
    --surface: var(--card);
    --bs-card-bg: var(--card);
    --bs-card-color: var(--card-text);
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: var(--radius-box);
    --bs-card-inner-border-radius: var(--radius-box);
    --bs-card-cap-bg: var(--card);
}

/* ===========================================
   Modals
   =========================================== */

.modal {
    --surface: var(--modal);
    --bs-modal-bg: var(--modal);
    --bs-modal-color: var(--modal-text);
    --bs-modal-border-color: var(--border);
    --bs-modal-header-border-color: var(--border);
    --bs-modal-footer-border-color: var(--border);
}

/* ===========================================
   Dropdowns
   =========================================== */

.dropdown-menu {
    --bs-dropdown-bg: var(--dropdown);
    --bs-dropdown-color: var(--dropdown-text);
    --bs-dropdown-border-color: var(--border);
    --bs-dropdown-link-color: var(--dropdown-text);
    --bs-dropdown-link-hover-bg: var(--hover-bg);
    --bs-dropdown-link-active-bg: var(--palette-neutral-300);
    --bs-dropdown-link-active-color: var(--dropdown-text);
}

/* ===========================================
   Tables
   =========================================== */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg: var(--card-secondary);
    --bs-table-hover-bg: var(--hover-bg);
}

.table thead a {
    color: var(--palette-blue-600);
}

/* ===========================================
   Alerts
   =========================================== */

.alert-danger {
    --bs-alert-bg: color-mix(in srgb, var(--danger) 10%, var(--page));
    --bs-alert-color: var(--danger);
    --bs-alert-border-color: color-mix(in srgb, var(--danger) 25%, var(--page));
}

.alert-warning {
    --bs-alert-bg: color-mix(in srgb, var(--warning) 10%, var(--page));
    --bs-alert-color: var(--warning);
    --bs-alert-border-color: color-mix(in srgb, var(--warning) 25%, var(--page));
}

.alert-success {
    --bs-alert-bg: color-mix(in srgb, var(--success) 10%, var(--page));
    --bs-alert-color: var(--success);
    --bs-alert-border-color: color-mix(in srgb, var(--success) 25%, var(--page));
}

/* ===========================================
   Accordion
   =========================================== */

.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--card-text);
    --bs-accordion-border-color: var(--border);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-color: var(--card-text);
    --bs-accordion-active-bg: var(--toggle);
    --bs-accordion-active-color: var(--primary);
}

/* ===========================================
   Nav Tabs
   =========================================== */

.nav-tabs {
    --bs-nav-tabs-border-color: var(--border);
    --bs-nav-tabs-link-active-bg: var(--surface);
    --bs-nav-tabs-link-active-color: var(--text);
    --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--surface);
    --bs-nav-tabs-link-hover-border-color: var(--border) var(--border) var(--border);
    --bs-nav-link-color: var(--text-light);
    --bs-nav-link-hover-color: var(--text);
}

/* ===========================================
   List Group
   =========================================== */

.list-group {
    --bs-list-group-bg: var(--card);
    --bs-list-group-color: var(--card-text);
    --bs-list-group-border-color: var(--border);
    --bs-list-group-action-hover-bg: var(--hover-bg);
    --bs-list-group-action-active-bg: var(--hover-bg);
}

/* ===========================================
   Form Controls & Selects
   =========================================== */

.form-control {
    background-color: var(--input);
    color: var(--input-text);
    border-color: var(--border);
}
.form-control:disabled {
  background-color: var(--input-disabled);
}

.form-control:focus {
    background-color: var(--input);
    color: var(--input-text);
}

.form-select:disabled {
  background-color: var(--input-disabled);
}

.form-select {
    background-color: var(--input);
    color: var(--input-text);
    border-color: var(--input-border);
}

.form-select:focus {
    background-color: var(--input);
    color: var(--input-text);
}


/* ===========================================
   Navbar (horizontal section nav)
   =========================================== */

.navbar {
    background-color: var(--card);
}

/* ===========================================
   Navbar Nav
   =========================================== */

.navbar-nav {
    --bs-nav-link-color: var(--text-light);
    --bs-nav-link-hover-color: var(--text);
    gap: var(--space-3);
}

/* ===========================================
   Utility overrides
   =========================================== */

.form-floating > textarea:focus ~ label::after,
.form-floating > textarea:not(:placeholder-shown) ~ label::after {
    background-color: transparent;
}

.variation-card .card-header input.form-control:focus {
    background-color: var(--input);
    border: 1px solid var(--focus-border);
}

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

/* Bootstrap bumps h4 to 1.5rem at >=1200px (RFS). Keep it at 1.25rem. */
@media (min-width: 1200px) {
    .h4,
    h4 {
        font-size: 1.5rem;
    }
}

} /* end @layer overrides */