/* ============================================================
 * THEME COLORS — two roles, two names
 * ============================================================
 * PRIMARY = the school color from Settings > Branding (--color-primary).
 *   For what you click and what shows where you are: buttons, links, focus
 *   rings, checkboxes, the active tab / page / pill, selected cards, page,
 *   modal and card headers, spinners. Every Bootstrap "primary" class
 *   (btn-primary, text-primary, bg-primary, border-primary, alert-primary...)
 *   follows it, including a color changed later in Settings.
 *
 * BLUE = blue as a color code. For something that labels or describes, next
 *   to other meaning colors: status / priority / type / department maps,
 *   badges, stat numbers, decorative icons, data bars. Use the -blue classes
 *   below (text-blue, bg-blue, badge bg-blue, btn-outline-blue, table-blue...)
 *   and the --color-blue* tokens (1-tokens.css). In a color map, write 'blue',
 *   never 'primary'.
 *
 * success / danger / warning / info keep their Bootstrap meanings.
 *
 * Never hard-code #0d6efd, #3b82f6, #2563eb, #2D88FF and friends: use
 * var(--color-primary) / var(--brand-*) for the first role and
 * var(--color-blue*) for the second, so dark mode follows on its own.
 * bin/check_colors.sh enforces this on commit (.githooks/pre-commit).
 */

/* ---- PRIMARY: the school color --------------------------------------- */
:root {
    --brand:          var(--color-primary);
    --brand-hover:    color-mix(in srgb, var(--color-primary) 86%, black);
    --brand-active:   color-mix(in srgb, var(--color-primary) 76%, black);
    --brand-ring:     color-mix(in srgb, var(--color-primary) 28%, transparent);
    --brand-border:   color-mix(in srgb, var(--color-primary) 55%, white);
    --brand-soft:     color-mix(in srgb, var(--color-primary) 12%, transparent);
    /* Text, outlines and links: the color itself on light surfaces; dark mode
       lightens it (7-dark-mode.css) so it reads on a dark background. */
    --brand-ink:      var(--color-primary);

    /* Bootstrap's own utilities (text-primary, bg-primary, bg-opacity-*,
       text-bg-primary, link-primary...) build from these. */
    --bs-primary:               var(--color-primary);
    --bs-primary-rgb:           var(--isms-primary-rgb, 30, 58, 138);
    --bs-primary-text-emphasis: var(--brand-active);
    --bs-primary-bg-subtle:     color-mix(in srgb, var(--color-primary) 12%, white);
    --bs-primary-border-subtle: color-mix(in srgb, var(--color-primary) 35%, white);
    --bs-link-color:            var(--brand-ink);
    --bs-link-color-rgb:        var(--isms-primary-rgb, 30, 58, 138);
    --bs-link-hover-color:      var(--brand-hover);
    --bs-link-hover-color-rgb:  var(--isms-primary-rgb, 30, 58, 138);
    --bs-focus-ring-color:      var(--brand-ring);

    /* For inline rgba(var(--bs-<color>-rgb), ...) built from a color map. */
    --bs-blue-rgb:              var(--color-blue-rgb);
}

/* Buttons */
.btn-primary {
    --bs-btn-bg: var(--brand);                 --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-hover);     --bs-btn-hover-border-color: var(--brand-hover);
    --bs-btn-active-bg: var(--brand-active);   --bs-btn-active-border-color: var(--brand-active);
    --bs-btn-disabled-bg: var(--brand);        --bs-btn-disabled-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--brand-ink);          --bs-btn-border-color: var(--brand-ink);
    --bs-btn-hover-color: #fff;                --bs-btn-hover-bg: var(--brand);          --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-color: #fff;               --bs-btn-active-bg: var(--brand-active);  --bs-btn-active-border-color: var(--brand-active);
    --bs-btn-disabled-color: var(--brand-ink); --bs-btn-disabled-border-color: var(--brand-ink);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-link { --bs-btn-color: var(--brand-ink); --bs-btn-hover-color: var(--brand-hover); --bs-btn-active-color: var(--brand-hover); }

/* Inputs: focus ring, checkboxes, radios, switches, sliders */
.form-control:focus, .form-select:focus {
    border-color: var(--brand-border);
    box-shadow: 0 0 0 .25rem var(--brand-ring);
}
.form-check-input:focus { border-color: var(--brand-border); box-shadow: 0 0 0 .25rem var(--brand-ring); }
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate { background-color: var(--brand); border-color: var(--brand); }
.form-range::-webkit-slider-thumb { background-color: var(--brand); }
.form-range::-moz-range-thumb     { background-color: var(--brand); }

/* Navigation and selection */
.nav           { --bs-nav-link-color: var(--brand-ink); --bs-nav-link-hover-color: var(--brand-hover); }
.nav-pills     { --bs-nav-pills-link-active-bg: var(--brand); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--brand); }
.list-group    { --bs-list-group-active-bg: var(--brand); --bs-list-group-active-border-color: var(--brand); }
.pagination {
    --bs-pagination-color: var(--brand-ink);       --bs-pagination-hover-color: var(--brand-hover);
    --bs-pagination-focus-color: var(--brand-hover); --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--brand-ring);
    --bs-pagination-active-bg: var(--brand);       --bs-pagination-active-border-color: var(--brand);
}
.progress, .progress-stacked { --bs-progress-bar-bg: var(--brand); }
.accordion {
    --bs-accordion-active-color: var(--brand-active);
    --bs-accordion-active-bg: var(--brand-soft);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--brand-ring);
}
.alert-primary { --bs-alert-color: var(--brand-active); --bs-alert-bg: var(--brand-soft); --bs-alert-border-color: var(--brand-border); }

/* ---- TEXT ON THE SCHOOL'S COLORS --------------------------------------
   The colors come from Settings, so white text on them is not a given: a gold
   secondary under white text reads at 2:1. --on-<color> is black or white,
   whichever reads, decided from the color's own lightness. Browsers without
   relative colors keep white. */
:root { --on-primary: #fff; --on-secondary: #fff; --on-accent: #fff; }
@supports (color: oklch(from red l c h)) {
    :root {
        --on-primary:   oklch(from var(--color-primary)   clamp(0, (0.62 - l) * 1000, 1) 0 0);
        --on-secondary: oklch(from var(--color-secondary) clamp(0, (0.62 - l) * 1000, 1) 0 0);
        --on-accent:    oklch(from var(--color-accent)    clamp(0, (0.62 - l) * 1000, 1) 0 0);
    }
}
/* A badge or band in the school's second and third colors. */
.bg-school-secondary { background-color: var(--color-secondary) !important; color: var(--on-secondary) !important; }
.bg-school-accent    { background-color: var(--color-accent) !important;    color: var(--on-accent) !important; }

/* Dark mode: the school color is too dark to read as text on a dark surface. */
html.dark-mode .text-primary,
html.dark-mode .link-primary { color: var(--brand-ink) !important; }

/* ---- STATUS COLORS AS TEXT ------------------------------------------- */
/* success / danger / warning / info / secondary keep their Bootstrap
   meanings, but as text they take the ink tokens (1-tokens.css): a darker
   yellow and cyan on light surfaces, lighter steps of all five on dark ones.
   Fills (bg-warning, btn-info, badge bg-success...) keep Bootstrap's colors. */
.text-success   { color: rgba(var(--ink-success-rgb),   var(--bs-text-opacity)) !important; }
.text-danger    { color: rgba(var(--ink-danger-rgb),    var(--bs-text-opacity)) !important; }
.text-warning   { color: rgba(var(--ink-warning-rgb),   var(--bs-text-opacity)) !important; }
.text-info      { color: rgba(var(--ink-info-rgb),      var(--bs-text-opacity)) !important; }
.text-secondary { color: rgba(var(--ink-secondary-rgb), var(--bs-text-opacity)) !important; }
.link-success   { color: var(--ink-success) !important; }
.link-danger    { color: var(--ink-danger) !important; }
.link-warning   { color: var(--ink-warning) !important; }
.link-info      { color: var(--ink-info) !important; }

/* Outline buttons: the label and the line are ink; hover fills with the
   Bootstrap color as before. */
.btn-outline-success { --bs-btn-color: var(--ink-success); --bs-btn-border-color: var(--ink-success); --bs-btn-disabled-color: var(--ink-success); --bs-btn-disabled-border-color: var(--ink-success); }
.btn-outline-danger  { --bs-btn-color: var(--ink-danger);  --bs-btn-border-color: var(--ink-danger);  --bs-btn-disabled-color: var(--ink-danger);  --bs-btn-disabled-border-color: var(--ink-danger); }
.btn-outline-warning { --bs-btn-color: var(--ink-warning); --bs-btn-border-color: var(--ink-warning); --bs-btn-disabled-color: var(--ink-warning); --bs-btn-disabled-border-color: var(--ink-warning); }
.btn-outline-info    { --bs-btn-color: var(--ink-info);    --bs-btn-border-color: var(--ink-info);    --bs-btn-disabled-color: var(--ink-info);    --bs-btn-disabled-border-color: var(--ink-info); }

/* Status text on its own soft badge (bg-success-subtle text-success...): the
   tone's ink, not the plain one, which reads at 3.5:1 on the tint. */
.bg-success-subtle .text-success, .bg-success-subtle.text-success     { color: var(--tone-green-text) !important; }
.bg-danger-subtle .text-danger, .bg-danger-subtle.text-danger         { color: var(--tone-red-text) !important; }
.bg-warning-subtle .text-warning, .bg-warning-subtle.text-warning     { color: var(--tone-amber-text) !important; }
.bg-info-subtle .text-info, .bg-info-subtle.text-info                 { color: var(--tone-cyan-text) !important; }
.bg-secondary-subtle .text-secondary, .bg-secondary-subtle.text-secondary { color: var(--tone-slate-text) !important; }
.bg-blue-subtle .text-blue, .bg-blue-subtle.text-blue                 { color: var(--color-blue-text) !important; }

/* A light fill reads dark, whatever the page asked for: Bootstrap's info is
   as pale as its warning, and .text-dark is turned light in dark mode. */
.badge.bg-info { color: var(--color-text-primary); }
.progress-bar:is(.bg-warning, .bg-info) { --bs-progress-bar-color: #1e293b; color: #1e293b; } /* color-ok: a light fill in either theme */
html.dark-mode :is(.bg-warning, .bg-info, .btn-warning, .btn-info).text-dark { color: #1e293b !important; }

/* ---- BLUE: a color that means something ------------------------------ */
/* Same shape as Bootstrap's color utilities, so bg-opacity-* / text-opacity-*
   / border-opacity-* still work. :where() keeps the opacity reset at zero
   specificity, so an opacity class on the same element wins. */
:where(.text-blue, .link-blue)  { --bs-text-opacity: 1; }
:where(.bg-blue, .text-bg-blue) { --bs-bg-opacity: 1; }
:where(.border-blue)            { --bs-border-opacity: 1; }
.text-blue          { color: rgba(var(--color-blue-rgb), var(--bs-text-opacity)) !important; }
.link-blue          { color: rgba(var(--color-blue-rgb), var(--bs-text-opacity)) !important; text-decoration-color: rgba(var(--color-blue-rgb), .5) !important; }
.bg-blue            { background-color: rgba(var(--color-blue-rgb), var(--bs-bg-opacity)) !important; }
.text-bg-blue       { color: #fff !important; background-color: rgba(var(--color-blue-rgb), var(--bs-bg-opacity)) !important; }
.border-blue        { border-color: rgba(var(--color-blue-rgb), var(--bs-border-opacity)) !important; }
.bg-blue-subtle     { background-color: var(--color-blue-bg) !important; }
.text-blue-emphasis { color: var(--color-blue-text) !important; }
.border-blue-subtle { border-color: var(--color-blue-border) !important; }

.btn-blue {
    --bs-btn-color: #fff;          --bs-btn-bg: var(--color-blue);  --bs-btn-border-color: var(--color-blue);
    --bs-btn-hover-color: #fff;    --bs-btn-hover-bg: color-mix(in srgb, var(--color-blue) 86%, black);  --bs-btn-hover-border-color: color-mix(in srgb, var(--color-blue) 86%, black);
    --bs-btn-active-color: #fff;   --bs-btn-active-bg: color-mix(in srgb, var(--color-blue) 76%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--color-blue) 76%, black);
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--color-blue); --bs-btn-disabled-border-color: var(--color-blue);
    --bs-btn-focus-shadow-rgb: var(--color-blue-rgb);
}
.btn-outline-blue {
    --bs-btn-color: var(--color-blue);          --bs-btn-border-color: var(--color-blue);
    --bs-btn-hover-color: #fff;                 --bs-btn-hover-bg: var(--color-blue);  --bs-btn-hover-border-color: var(--color-blue);
    --bs-btn-active-color: #fff;                --bs-btn-active-bg: var(--color-blue); --bs-btn-active-border-color: var(--color-blue);
    --bs-btn-disabled-color: var(--color-blue); --bs-btn-disabled-border-color: var(--color-blue);
    --bs-btn-focus-shadow-rgb: var(--color-blue-rgb);
}
.alert-blue {
    --bs-alert-color: var(--color-blue-text); --bs-alert-bg: var(--color-blue-bg);
    --bs-alert-border-color: var(--color-blue-border); --bs-alert-link-color: var(--color-blue-text);
}
.list-group-item-blue {
    --bs-list-group-color: var(--color-blue-text); --bs-list-group-bg: var(--color-blue-bg);
    --bs-list-group-border-color: var(--color-blue-border);
}
.table-blue {
    --bs-table-color: #000;                 --bs-table-bg: var(--color-blue-bg);
    --bs-table-border-color: var(--color-blue-border);
    --bs-table-striped-color: #000;         --bs-table-striped-bg: color-mix(in srgb, var(--color-blue-bg) 95%, black);
    --bs-table-active-color: #000;          --bs-table-active-bg: color-mix(in srgb, var(--color-blue-bg) 90%, black);
    --bs-table-hover-color: #000;           --bs-table-hover-bg: color-mix(in srgb, var(--color-blue-bg) 92%, black);
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}
html.dark-mode .table-blue {
    --bs-table-color: #E4E6EB; --bs-table-striped-color: #E4E6EB; --bs-table-active-color: #E4E6EB; --bs-table-hover-color: #E4E6EB;
    --bs-table-hover-bg: color-mix(in srgb, var(--color-blue) 26%, #242526);
}
/* Badges: a soft tint in dark mode, like the other badge colors. */
html.dark-mode .badge.bg-blue { background-color: var(--color-blue-bg) !important; color: var(--color-blue-text) !important; }