﻿/* Bootstrap 5 WCAG 2.1 AA Overrides
   - Subtle, non-drastic tweaks to improve contrast & focus
   - Works best with Bootstrap 5.2+
   - Load AFTER bootstrap.css
*/

/* ---------- Core color variables ---------- */
:root {
    /* Text & body */
    --bs-body-bg: #fff;
    --bs-body-color: #212529; /* default, already AA on white */
    /* Brand palette (slightly darker than BS defaults for contrast) */
    --bs-primary: #0b3d91; /* deeper blue than #0d6efd */
    --bs-primary-rgb: 11, 61, 145;
    --bs-secondary: #495057; /* darker gray than #6c757d */
    --bs-secondary-rgb: 73, 80, 87;
    --bs-success: #146c43; /* darker than #198754 */
    --bs-success-rgb: 20, 108, 67;
    --bs-danger: #b02a37; /* darker than #dc3545 */
    --bs-danger-rgb: 176, 42, 55;
    --bs-warning: #c28a00; /* readable with black text */
    --bs-warning-rgb: 194, 138, 0;
    --bs-info: #087990; /* darker than #0dcaf0 */
    --bs-info-rgb: 8, 121, 144;
    --bs-dark: #212529;
    --bs-dark-rgb: 33, 37, 41;
    /* Links */
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: #072c6a;
    /* Form borders/focus */
    --bs-border-color: #6c757d; /* slightly darker than default */
}

/* ---------- Links ---------- */
a, .link-primary {
    text-decoration: underline; /* visible affordance */
    text-underline-offset: 2px;
}

    a:hover, a:focus-visible {
        text-decoration-thickness: 2px;
    }

/* ---------- Focus visibility (keyboard) ---------- */
:focus-visible {
    outline: 3px solid rgba(var(--bs-primary-rgb), 0.9);
    outline-offset: 2px;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.page-link:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
    outline: 3px solid rgba(var(--bs-primary-rgb), 0.9);
    outline-offset: 2px;
    box-shadow: none !important; /* avoid faint low-contrast glow */
}

/* ---------- Buttons: solid ---------- */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #072c6a;
    --bs-btn-hover-border-color: #072c6a;
    --bs-btn-active-bg: #062556;
    --bs-btn-active-border-color: #062556;
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: #3d444a;
    --bs-btn-hover-border-color: #3d444a;
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: #105236;
    --bs-btn-hover-border-color: #105236;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: #8c222c;
    --bs-btn-hover-border-color: #8c222c;
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-bg: #066073;
    --bs-btn-hover-border-color: #066073;
}

.btn-warning {
    --bs-btn-color: #000; /* black text for AA on warm yellow */
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-bg: #a47400;
    --bs-btn-hover-border-color: #a47400;
}

/* ---------- Buttons: outline (ensure text/background contrast) ---------- */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
}

/* ---------- Forms ---------- */
.form-label {
    color: #212529;
}

.form-text { /* help text */
    color: #343a40;
}

.form-control, .form-select {
    border-color: var(--bs-border-color);
}

    .form-control::placeholder {
        color: #616971;
        opacity: 1;
    }

    .form-control:disabled,
    .form-select:disabled,
    .input-group .disabled > .form-control {
        color: #495057;
        background-color: #e9ecef;
        opacity: 1;
    }

/* Validation colors (darker for AA against white backgrounds) */
.is-valid, .was-validated .form-control:valid {
    border-color: #198754;
}

.is-invalid, .was-validated .form-control:invalid {
    border-color: #b02a37;
}

.invalid-feedback, .valid-feedback {
    color: #212529;
}

    .invalid-feedback strong, .valid-feedback strong {
        color: inherit;
        font-weight: 600;
    }

/* ---------- Alerts (text/background/border tuned for AA) ---------- */
.alert-primary {
    color: #0b3d91;
    background: #e6effa;
    border-color: #b3cdf4;
}

.alert-secondary {
    color: #2b3035;
    background: #eceff1;
    border-color: #cfd4d8;
}

.alert-success {
    color: #0f5132;
    background: #e8f3ee;
    border-color: #c7e5d7;
}

.alert-danger {
    color: #842029;
    background: #f8e9eb;
    border-color: #f1c5cb;
}

.alert-warning {
    color: #3a2e00;
    background: #fff4d6;
    border-color: #f3dc9a;
}

.alert-info {
    color: #055160;
    background: #e6f6f9;
    border-color: #b8e3ec;
}

/* ---------- Badges (ensure text contrast) ---------- */
.badge.bg-primary {
    background-color: var(--bs-primary) !important;
    color: #fff;
}

.badge.bg-secondary {
    background-color: var(--bs-secondary) !important;
    color: #fff;
}

.badge.bg-success {
    background-color: var(--bs-success) !important;
    color: #fff;
}

.badge.bg-danger {
    background-color: var(--bs-danger) !important;
    color: #fff;
}

.badge.bg-info {
    background-color: var(--bs-info) !important;
    color: #fff;
}

.badge.bg-warning {
    background-color: var(--bs-warning) !important;
    color: #000;
}

/* ---------- Navs / Dropdowns ---------- */
.nav-link {
    color: var(--bs-body-color);
}

    .nav-link.active, .nav-link:hover {
        color: var(--bs-primary);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

.dropdown-item {
    color: #212529;
}

    .dropdown-item:hover, .dropdown-item:focus {
        color: #fff;
        background-color: var(--bs-primary);
    }

/* ---------- Pagination ---------- */
.page-link {
    color: var(--bs-primary);
    border-color: #adb5bd;
}

    .page-link:hover {
        color: #fff;
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
    }

.page-item.active .page-link {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* ---------- Tables ---------- */
.table thead th {
    color: #212529;
    border-bottom-color: #8A96A2;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: #f7f9fc;
}

.table > :not(caption) > * > * {
    border-bottom-color: #DEE2E6;
}

/* ---------- Toasts / Tooltips / Popovers ---------- */
.toast {
    color: #212529;
    background-color: #ffffff;
    border-color: #ced4da;
}

.tooltip .tooltip-inner {
    color: #fff;
    background-color: #000;
}

.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #000;
}

.popover {
    color: #212529;
    border-color: #adb5bd;
}

/* ---------- Modals (lighter, AA-compliant dividers) ---------- */
.modal-header {
    border-bottom: 1px solid #949494;
}
/* ~3:1 against white */
.modal-footer {
    border-top: 1px solid #949494;
}
/* ~3:1 against white */

/* ---------- Utilities ---------- */
/* Optional utility to bump overall contrast on demand */
.high-contrast * {
    --bs-border-color: #495057;
    --bs-link-color: #072c6a;
    --bs-link-hover-color: #051f49;
}


/* ---- Modal separator fix (lighter, AA-compliant) ---- */
/* Set the modal-specific variables */
:root {
    --bs-modal-header-border-color: #d0d7de; /* ~3:1 on white */
    --bs-modal-footer-border-color: #d0d7de;
    --bs-modal-header-border-width: 1px;
    --bs-modal-footer-border-width: 1px;
}

/* Beat Bootstrap's rules with specificity and !important */
.modal .modal-header {
    border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color) !important;
}

.modal .modal-footer {
    border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color) !important;
}

/* Safety net for older builds that hardcode rgba borders */
.modal .modal-header,
.modal .modal-footer {
    border-color: #d0d7de !important; /* GitHub-like light gray */
}

/* WCAG-friendly lighter table header divider */
.table > thead {
    border-bottom: 1px solid #d0d7de !important; /* soft gray, ~3:1 contrast */
}

.table thead th {
    border-bottom: 1px solid #d0d7de !important; /* ensure th cells match */
}