/* =================================================================
   SQOUT Muted Color Palette
   Central color override file — loaded AFTER bootstrap.min.css
   to override Bootstrap's default bright colors with muted variants.

   See docs/sys_recoloring.md for the full analysis and rationale.
   ================================================================= */

:root {
    /* === Base semantic colors (muted versions of Bootstrap defaults) === */
    --bs-primary:     #3a6fa0;    /* was #0d6efd */
    --bs-secondary:   #5a6570;    /* was #6c757d */
    --bs-success:     #3a7a5c;    /* was #198754 */
    --bs-danger:      #a04050;    /* was #dc3545 */
    --bs-warning:     #b8942e;    /* was #ffc107 */
    --bs-info:        #4a8a9a;    /* was #0dcaf0 */
    --bs-dark:        #2c3338;    /* was #212529 */

    /* === RGB triplets (required for Bootstrap's rgba() usage) === */
    --bs-primary-rgb:     58, 111, 160;
    --bs-secondary-rgb:   90, 101, 112;
    --bs-success-rgb:     58, 122, 92;
    --bs-danger-rgb:      160, 64, 80;
    --bs-warning-rgb:     184, 148, 46;
    --bs-info-rgb:        74, 138, 154;
    --bs-dark-rgb:        44, 51, 56;

    /* === Subtle variants (badge/alert backgrounds — Bootstrap 5.3) === */
    --bs-primary-bg-subtle:       #d6e3f0;
    --bs-primary-text-emphasis:   #1e3a5c;
    --bs-primary-border-subtle:   #a8c4dc;

    --bs-success-bg-subtle:       #d5e8dd;
    --bs-success-text-emphasis:   #1e3e2e;
    --bs-success-border-subtle:   #a0c8b0;

    --bs-danger-bg-subtle:        #f0d5da;
    --bs-danger-text-emphasis:    #5a2030;
    --bs-danger-border-subtle:    #d4a0aa;

    --bs-warning-bg-subtle:       #f0e8cc;
    --bs-warning-text-emphasis:   #5a4410;
    --bs-warning-border-subtle:   #d4c48a;

    --bs-info-bg-subtle:          #d5e8ec;
    --bs-info-text-emphasis:      #1e3a40;
    --bs-info-border-subtle:      #a0c8d0;

    --bs-secondary-bg-subtle:     #e0e3e6;
    --bs-secondary-text-emphasis: #2a2f34;
    --bs-secondary-border-subtle: #b0b8c0;

    /* === SQOUT Custom Variables (for non-Bootstrap elements) === */
    --sqout-accent:         #4a7ab5;
    --sqout-accent-hover:   #3d6a9e;
    --sqout-accent-dark:    #345d8a;

    --sqout-danger-light:   #ffeef0;   /* hover backgrounds */
    --sqout-success-light:  #e8f5ec;
    --sqout-warning-light:  #fdf5e0;
    --sqout-info-light:     #e4f0f4;

    /* === Link colors (Bootstrap pre-computes these too) === */
    --bs-link-color:         #3a6fa0;   /* was #0d6efd */
    --bs-link-color-rgb:     58, 111, 160;
    --bs-link-hover-color:   #2e5880;   /* was #0a58ca */
    --bs-link-hover-color-rgb: 46, 88, 128;

    /* === Focus ring (Bootstrap pre-computes with original blue) === */
    --bs-focus-ring-color: rgba(58, 111, 160, 0.25);  /* was rgba(13,110,253,.25) */
}

/* =================================================================
   Form controls — Bootstrap hardcodes the focus border & shadow
   ================================================================= */
.form-control:focus,
.form-select:focus {
    border-color: #8db3d0;    /* was #86b7fe — muted primary lightened */
    box-shadow: 0 0 0 .25rem rgba(58, 111, 160, 0.25);  /* was rgba(13,110,253,.25) */
}

.form-check-input:focus {
    border-color: #8db3d0;
    box-shadow: 0 0 0 .25rem rgba(58, 111, 160, 0.25);
}

.form-check-input:checked {
    background-color: #3a6fa0;  /* was #0d6efd */
    border-color: #3a6fa0;
}

.form-switch .form-check-input:checked {
    background-color: #3a6fa0;
}

.form-range::-webkit-slider-thumb {
    background-color: #3a6fa0;
}

.form-range::-moz-range-thumb {
    background-color: #3a6fa0;
}

/* Select option highlight — accent-color controls checkboxes, radios,
   range sliders and progress elements. For multi-select option highlight
   we use ::selection and option:checked. */
select,
.form-select,
.form-control,
.form-check-input {
    accent-color: #3a6fa0;
}

/* Multi-select option styling (Chromium/Firefox) */
select option:checked,
.form-select option:checked {
    background: #3a6fa0 linear-gradient(0deg, #3a6fa0 0%, #3a6fa0 100%);
    color: #fff;
}

/* Text selection highlight across the app */
::selection {
    background-color: rgba(58, 111, 160, 0.3);
    color: inherit;
}

/* List group active items — hardcoded #0d6efd in Bootstrap */
.list-group {
    --bs-list-group-active-bg: #3a6fa0;         /* was #0d6efd */
    --bs-list-group-active-border-color: #3a6fa0;
}

/* Nav pills active state */
.nav-pills {
    --bs-nav-pills-link-active-bg: #3a6fa0;  /* was #0d6efd */
}

/* Dropdown menu active item — the bright blue background on selected submenu items */
.dropdown-menu {
    --bs-dropdown-link-active-bg: #3a6fa0;  /* was #0d6efd */
}

/* Pagination active state — hardcoded #0d6efd */
.pagination {
    --bs-pagination-active-bg: #3a6fa0;           /* was #0d6efd */
    --bs-pagination-active-border-color: #3a6fa0;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(58, 111, 160, 0.25);
}

/* Accordion focus state — hardcoded #86b7fe border and bright blue shadow */
.accordion {
    --bs-accordion-btn-focus-border-color: #8db3d0;  /* was #86b7fe */
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(58, 111, 160, 0.25);
}

/* Table variant colors — Bootstrap pre-computes from original blue */
.table-primary {
    --bs-table-bg: #d6e3f0;          /* was #cfe2ff */
    --bs-table-border-color: #a8c4dc; /* was #a6b5cc */
    --bs-table-striped-bg: #ccdae8;   /* was #c5d7f2 */
}

/* Select2 dropdown highlight — overrides the hardcoded bright blue */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #3a6fa0 !important;
    color: #fff !important;
}

.select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #3a6fa0 !important;
    color: #fff !important;
}

/* Select2 focus border */
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #8db3d0;
    box-shadow: 0 0 0 0.25rem rgba(58, 111, 160, 0.25);
}

/* =================================================================
   Button overrides
   Bootstrap 5.3 buttons use pre-computed internal variables
   (--bs-btn-bg, etc.) that don't inherit from --bs-primary.
   We must override each variant explicitly.
   ================================================================= */

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #3a6fa0;
    --bs-btn-border-color: #3a6fa0;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #315e88;
    --bs-btn-hover-border-color: #2e5880;
    --bs-btn-focus-shadow-rgb: 156, 183, 207;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2e5880;
    --bs-btn-active-border-color: #2b5378;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #3a6fa0;
    --bs-btn-disabled-border-color: #3a6fa0;
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #5a6570;
    --bs-btn-border-color: #5a6570;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4c555f;
    --bs-btn-hover-border-color: #485059;
    --bs-btn-focus-shadow-rgb: 172, 178, 183;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #485059;
    --bs-btn-active-border-color: #434b54;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #5a6570;
    --bs-btn-disabled-border-color: #5a6570;
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #3a7a5c;
    --bs-btn-border-color: #3a7a5c;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #31674e;
    --bs-btn-hover-border-color: #2e6149;
    --bs-btn-focus-shadow-rgb: 156, 188, 173;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2e6149;
    --bs-btn-active-border-color: #2b5b45;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #3a7a5c;
    --bs-btn-disabled-border-color: #3a7a5c;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #a04050;
    --bs-btn-border-color: #a04050;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #883644;
    --bs-btn-hover-border-color: #803340;
    --bs-btn-focus-shadow-rgb: 207, 159, 167;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #803340;
    --bs-btn-active-border-color: #78303c;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #a04050;
    --bs-btn-disabled-border-color: #a04050;
}

.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: #b8942e;
    --bs-btn-border-color: #b8942e;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #9c7d27;
    --bs-btn-hover-border-color: #937624;
    --bs-btn-focus-shadow-rgb: 219, 201, 150;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #937624;
    --bs-btn-active-border-color: #8a6f22;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #b8942e;
    --bs-btn-disabled-border-color: #b8942e;
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: #4a8a9a;
    --bs-btn-border-color: #4a8a9a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3e7582;
    --bs-btn-hover-border-color: #3b6e7b;
    --bs-btn-focus-shadow-rgb: 164, 196, 204;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3b6e7b;
    --bs-btn-active-border-color: #376773;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #4a8a9a;
    --bs-btn-disabled-border-color: #4a8a9a;
}

.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: #2c3338;
    --bs-btn-border-color: #2c3338;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #252b2f;
    --bs-btn-hover-border-color: #23282c;
    --bs-btn-focus-shadow-rgb: 149, 153, 155;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #23282c;
    --bs-btn-active-border-color: #21262a;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #2c3338;
    --bs-btn-disabled-border-color: #2c3338;
}

/* Outline button variants */
.btn-outline-primary {
    --bs-btn-color: #3a6fa0;
    --bs-btn-border-color: #3a6fa0;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3a6fa0;
    --bs-btn-hover-border-color: #3a6fa0;
    --bs-btn-focus-shadow-rgb: 156, 183, 207;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3a6fa0;
    --bs-btn-active-border-color: #3a6fa0;
    --bs-btn-disabled-color: #3a6fa0;
    --bs-btn-disabled-border-color: #3a6fa0;
}

.btn-outline-secondary {
    --bs-btn-color: #5a6570;
    --bs-btn-border-color: #5a6570;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5a6570;
    --bs-btn-hover-border-color: #5a6570;
    --bs-btn-focus-shadow-rgb: 172, 178, 183;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5a6570;
    --bs-btn-active-border-color: #5a6570;
    --bs-btn-disabled-color: #5a6570;
    --bs-btn-disabled-border-color: #5a6570;
}

.btn-outline-success {
    --bs-btn-color: #3a7a5c;
    --bs-btn-border-color: #3a7a5c;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3a7a5c;
    --bs-btn-hover-border-color: #3a7a5c;
    --bs-btn-focus-shadow-rgb: 156, 188, 173;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3a7a5c;
    --bs-btn-active-border-color: #3a7a5c;
    --bs-btn-disabled-color: #3a7a5c;
    --bs-btn-disabled-border-color: #3a7a5c;
}

.btn-outline-danger {
    --bs-btn-color: #a04050;
    --bs-btn-border-color: #a04050;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #a04050;
    --bs-btn-hover-border-color: #a04050;
    --bs-btn-focus-shadow-rgb: 207, 159, 167;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #a04050;
    --bs-btn-active-border-color: #a04050;
    --bs-btn-disabled-color: #a04050;
    --bs-btn-disabled-border-color: #a04050;
}

.btn-outline-warning {
    --bs-btn-color: #b8942e;
    --bs-btn-border-color: #b8942e;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b8942e;
    --bs-btn-hover-border-color: #b8942e;
    --bs-btn-focus-shadow-rgb: 219, 201, 150;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b8942e;
    --bs-btn-active-border-color: #b8942e;
    --bs-btn-disabled-color: #b8942e;
    --bs-btn-disabled-border-color: #b8942e;
}

.btn-outline-info {
    --bs-btn-color: #4a8a9a;
    --bs-btn-border-color: #4a8a9a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4a8a9a;
    --bs-btn-hover-border-color: #4a8a9a;
    --bs-btn-focus-shadow-rgb: 164, 196, 204;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4a8a9a;
    --bs-btn-active-border-color: #4a8a9a;
    --bs-btn-disabled-color: #4a8a9a;
    --bs-btn-disabled-border-color: #4a8a9a;
}