/* =============================================================================
   BRIDGE - Bootstrap 5.3 / dash-bootstrap-components -> theme roles
   -----------------------------------------------------------------------------
   Bootstrap components read their colors from --bs-* variables. This file
   points those variables at our roles, so modals, dropdowns, popovers, forms,
   tabs, cards and buttons follow whichever theme is active.

   - Declared on [data-bs-theme] (not :root) so fixed-theme areas work.
   - Only var(--color-...) here, plus two palette form icons (see palette file).
   - A few Bootstrap rules use hard-coded colors (focus glow, checked box,
     links); those are restyled directly at the bottom.
   ============================================================================= */

/* ---- Page-wide variables --------------------------------------------------- */
[data-bs-theme] {
    --bs-body-bg: var(--color-bg-app);
    --bs-body-color: var(--color-text);
    --bs-emphasis-color: var(--color-text-strong);
    --bs-secondary-color: var(--color-text-muted);
    --bs-tertiary-color: var(--color-text-subtle);
    --bs-tertiary-bg: var(--color-surface);          /* e.g. input-group labels */
    --bs-secondary-bg: var(--color-surface-raised);  /* e.g. disabled inputs */
    --bs-heading-color: inherit;

    --bs-border-color: var(--color-border);
    --bs-border-color-translucent: var(--color-border);

    --bs-link-color: var(--color-accent-text);
    --bs-link-hover-color: var(--color-accent-hover);
    --bs-focus-ring-color: var(--color-focus-ring);

    --bs-form-valid-color: var(--color-success);
    --bs-form-valid-border-color: var(--color-success);
    --bs-form-invalid-color: var(--color-danger);
    --bs-form-invalid-border-color: var(--color-danger);
}

/* ---- Floating surfaces: popovers, dropdown menus, modals ------------------ */
.popover {
    --bs-popover-bg: var(--color-surface-raised);
    --bs-popover-border-color: var(--color-border);
    --bs-popover-header-bg: var(--color-surface-raised);
    --bs-popover-header-color: var(--color-text);
    --bs-popover-body-color: var(--color-text);
    --bs-popover-box-shadow: var(--shadow-raised);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--color-surface-raised);
    --bs-dropdown-color: var(--color-text);
    --bs-dropdown-border-color: var(--color-border);
    --bs-dropdown-divider-bg: var(--color-border);
    --bs-dropdown-box-shadow: var(--shadow-raised);
    --bs-dropdown-link-color: var(--color-text);
    --bs-dropdown-link-hover-color: var(--color-text);
    --bs-dropdown-link-hover-bg: var(--color-state-hover);
    --bs-dropdown-link-active-color: var(--color-accent-text);
    --bs-dropdown-link-active-bg: var(--color-accent-subtle);
    --bs-dropdown-link-disabled-color: var(--color-text-subtle);
    --bs-dropdown-header-color: var(--color-text-muted);
}

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

.modal-backdrop {
    --bs-backdrop-bg: var(--color-overlay);
    --bs-backdrop-opacity: 1;   /* the overlay color already carries its transparency */
}

/* ---- In-page containers: transparent, they inherit the panel they sit on --- */
.card {
    --bs-card-bg: transparent;
    --bs-card-color: inherit;
    --bs-card-border-color: var(--color-border);
    --bs-card-cap-bg: var(--color-state-hover);
    --bs-card-cap-color: inherit;
}

.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: inherit;
    --bs-accordion-border-color: var(--color-border);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-color: inherit;
    --bs-accordion-active-bg: var(--color-state-hover);
    --bs-accordion-active-color: inherit;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem var(--color-focus-ring);
}

.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: inherit;
    --bs-list-group-border-color: var(--color-border);
    --bs-list-group-action-color: var(--color-text);
    --bs-list-group-action-hover-color: var(--color-text-strong);
    --bs-list-group-action-hover-bg: var(--color-state-hover);
    --bs-list-group-action-active-color: var(--color-text);
    --bs-list-group-action-active-bg: var(--color-state-pressed);
    --bs-list-group-active-color: var(--color-accent-text);
    --bs-list-group-active-bg: var(--color-accent-subtle);
    --bs-list-group-active-border-color: var(--color-border);
    --bs-list-group-disabled-color: var(--color-text-subtle);
    --bs-list-group-disabled-bg: transparent;
}

/* ---- Navigation ----------------------------------------------------------- */
.nav {
    --bs-nav-link-color: var(--color-text);
    --bs-nav-link-hover-color: var(--color-text-strong);
    --bs-nav-link-disabled-color: var(--color-text-subtle);
}

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

.navbar {
    --bs-navbar-color: var(--color-text);
    --bs-navbar-hover-color: var(--color-text-strong);
    --bs-navbar-active-color: var(--color-text-strong);
    --bs-navbar-disabled-color: var(--color-text-subtle);
    --bs-navbar-brand-color: var(--color-text-strong);
    --bs-navbar-brand-hover-color: var(--color-text-strong);
}

/* ---- Buttons -------------------------------------------------------------- */
/* Every button filled with the accent (solid primary and info buttons, and
   outline info buttons on hover and click) uses the action roles: one fill
   and one label color everywhere (--color-action, --color-on-action in the
   theme files). */
.btn-primary {
    --bs-btn-color: var(--color-on-action);
    --bs-btn-bg: var(--color-action);
    --bs-btn-border-color: var(--color-action);
    --bs-btn-hover-color: var(--color-on-action);
    --bs-btn-hover-bg: var(--color-action-hover);
    --bs-btn-hover-border-color: var(--color-action-hover);
    --bs-btn-active-color: var(--color-on-action);
    --bs-btn-active-bg: var(--color-action-hover);
    --bs-btn-active-border-color: var(--color-action-hover);
    --bs-btn-disabled-color: var(--color-on-action);
    --bs-btn-disabled-bg: var(--color-action);
    --bs-btn-disabled-border-color: var(--color-action);
}

.btn-outline-secondary {
    --bs-btn-color: var(--color-text);
    --bs-btn-border-color: var(--color-border-strong);
    --bs-btn-hover-color: var(--color-text-strong);
    --bs-btn-hover-bg: var(--color-state-hover);
    --bs-btn-hover-border-color: var(--color-border-strong);
    --bs-btn-active-color: var(--color-text-strong);
    --bs-btn-active-bg: var(--color-state-pressed);
    --bs-btn-active-border-color: var(--color-border-strong);
    --bs-btn-disabled-color: var(--color-text-subtle);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-border);
}

/* "danger" outline buttons (Remove, Delete, Discard): the theme's red, not
   Bootstrap's fixed #dc3545, so dark and light each get theirs. Hovered: a
   soft red tint, like Sign out in the account card (Bootstrap fills it red
   with white text, too faint on the dark theme's lighter red). */
.btn-outline-danger {
    --bs-btn-color: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-color: var(--color-danger);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-danger) 12%, transparent);
    --bs-btn-hover-border-color: var(--color-danger);
    --bs-btn-active-color: var(--color-danger);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-danger) 20%, transparent);
    --bs-btn-active-border-color: var(--color-danger);
    --bs-btn-disabled-color: var(--color-text-subtle);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-border);
}

/* ---- Form fields: filled, one soft outline shared by label and field ----- */
.form-control,
.form-control:focus,
.form-select,
.form-select:focus {
    background-color: var(--color-field);
}

.input-group-text {
    background-color: transparent;   /* the label sits on the panel it belongs to */
}

[data-bs-theme] .form-select {
    --bs-form-select-bg-img: var(--palette-icon-chevron);
}

/* ---- Native selects (dbc.Select) -------------------------------------------
   The open list of a <select> is drawn by the browser (blue highlight on most
   systems). Browsers that support the customizable select (Chrome/Edge 135+)
   draw it in the page instead, so it follows the theme. Others keep their
   native list. */
@supports (appearance: base-select) {
    .form-select,
    .form-select::picker(select) {
        appearance: base-select;
    }

    .form-select {
        display: flex;                 /* keep the value vertically centred, like the native select */
        align-items: center;
    }

    .form-select::picker-icon {
        display: none;                 /* Bootstrap already draws the chevron */
    }

    .form-select::picker(select) {
        margin-top: 2px;
        padding: 4px;
        border: 1px solid var(--color-border);
        border-radius: 6px;
        background-color: var(--color-surface-raised);
        color: var(--color-text);
        box-shadow: var(--shadow-raised);
    }

    .form-select option {
        padding: 4px 8px;
        border-radius: 4px;
    }

    .form-select option:hover,
    .form-select option:focus-visible {
        background-color: var(--color-accent-subtle);
        color: var(--color-text-strong);
        outline: none;
    }

    .form-select option:checked,
    .form-select option::checkmark {
        color: var(--color-accent-text);
    }
}

/* "info" buttons (Apply, Cluster) are the app's actions: they use the accent */
.btn-info {
    --bs-btn-color: var(--color-on-action);
    --bs-btn-bg: var(--color-action);
    --bs-btn-border-color: var(--color-action);
    --bs-btn-hover-color: var(--color-on-action);
    --bs-btn-hover-bg: var(--color-action-hover);
    --bs-btn-hover-border-color: var(--color-action-hover);
    --bs-btn-active-color: var(--color-on-action);
    --bs-btn-active-bg: var(--color-action-hover);
    --bs-btn-active-border-color: var(--color-action-hover);
}

.btn-outline-info {
    --bs-btn-color: var(--color-accent-text);
    --bs-btn-border-color: var(--color-accent-strong);
    --bs-btn-hover-color: var(--color-on-action);
    --bs-btn-hover-bg: var(--color-action);
    --bs-btn-hover-border-color: var(--color-action);
    --bs-btn-active-color: var(--color-on-action);
    --bs-btn-active-bg: var(--color-action-hover);
    --bs-btn-active-border-color: var(--color-action-hover);
    --bs-btn-disabled-color: var(--color-accent-text);        /* Bootstrap dims disabled buttons to 65% */
    --bs-btn-disabled-border-color: var(--color-accent-strong);
}

/* Switches (dbc.Switch, dbc.Checklist(switch=True)): soft track and muted knob
   when off, amber track and dark knob when on - the same toggle as the preview.
   Bootstrap recolors the knob on focus, so focus is covered too. */
.form-switch .form-check-input,
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: var(--palette-icon-switch-knob-off);
    background-image: var(--bs-form-switch-bg);
    background-color: var(--color-state-pressed);
    border-color: transparent;
    box-shadow: none;
}

.form-switch .form-check-input:checked,
.form-switch .form-check-input:checked:focus {
    --bs-form-switch-bg: var(--icon-switch-knob);
    background-color: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
}

/* A switch "in between" (input.indeterminate: on for some things, off for
   others; e.g. the Study header's gear menu for all charts, when only some
   charts show their legend): the knob in the middle, on a track half way
   between off and on. Without this, Bootstrap paints its blue checkbox dash. */
.form-switch .form-check-input:indeterminate,
.form-switch .form-check-input:indeterminate:focus {
    --bs-form-switch-bg: var(--icon-switch-knob);
    background-image: var(--bs-form-switch-bg);
    background-position: center;
    background-color: color-mix(in srgb, var(--color-accent-strong) 45%, var(--color-state-pressed));
    border-color: transparent;
}

.form-switch .form-check-input:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--color-focus-ring);
}

/* One toggle size everywhere (rem, not relative to the text around it, which
   made some switches smaller), centred on its label whatever the text size. */
.form-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0;
}

.form-switch .form-check-input {
    float: none;
    flex: none;
    width: 2rem;
    height: 1rem;
    margin: 0;
}

.form-switch .form-check-label {
    margin-bottom: 0;   /* dbc.Switch adds .form-label, whose bottom margin pulled the text up */
}

/* Checklist labels that light up when checked:
   dbc.Checklist(..., label_checked_class_name="is-checked") */
.form-check-label.is-checked {
    color: var(--color-accent-text);
}

/* ---- Rules Bootstrap writes with fixed colors ------------------------------ */
a {
    color: var(--color-accent-text);
}

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

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

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--color-focus-border);   /* soft amber outline, no glow */
    box-shadow: none;
}

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

.form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: var(--icon-check);
}

.form-switch .form-check-input:checked {
    --bs-form-switch-bg: var(--icon-switch-knob);
}