/* Put this AFTER bootstrap.min.css */
:root {
    /* Azure Blue */
    --bs-primary: #2287FD;
    --pro-primary-light: #4E9FFD;
    --pro-primary-lighter: #E9F3FF;
    --pro-primary-dark: #1F7BE6;
    --pro-primary-darker: #1B60A4;
    --pro-primary-active: #1665c1;
    --bs-primary-rgb: 34,135,253; /* #2287FD */
    /* Yale Blue */
    --bs-secondary: #0A3971;
    --pro-secondary-light: #4E6FFD;
    --pro-secondary-lighter: #E7EBF1;
    --pro-secondary-dark: #093467;
    --pro-secondary-darker: #072850;
    --pro-secondary-active: #072850;
    --bs-secondary-rgb: 10,57,113; /* #0A3971 */
    /* Yellow */
    --bs-warning: #FFB800;
    --pro-warning-light: #FFC633;
    --pro-warning-lighter: #FFF8E6;
    --pro-warning-dark: #E8A700;
    --pro-warning-darker: #B58300;
    --pro-warning-active: #c88f00;
    --bs-warning-rgb: 255,184,0; /* #FFB800 */
    /* Periwinkle */
    --bs-info: #7F7FFA;
    --pro-info-light: #9999FB;
    --pro-info-lighter: #F2F2FF;
    --pro-info-dark: #7474E4;
    --pro-info-darker: #5A5AB2;
    --pro-info-active: #5a5ad1;
    --bs-info-rgb: 127,127,250; /* #7F7FFA */
    /* Accent */
    --pro-accent: #F7C9D9;
    /* Neutrals */
    --pro-bg: #f6f7fb;
    --pro-card: #ffffff;
    --pro-text: #0f172a;
    --pro-muted: #64748b;
    --pro-radius: 16px;
    /* Focus */
    --pro-focus-width: .2rem;
    /* Font (you already load General Sans in _Layout) */
    --bs-body-font-family: 'General Sans', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body {
    font-family: var(--bs-body-font-family);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--pro-primary-dark);
    --bs-btn-hover-border-color: var(--pro-primary-dark);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--pro-primary-active);
    --bs-btn-active-border-color: var(--pro-primary-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.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);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--pro-primary-active);
    --bs-btn-active-border-color: var(--pro-primary-active);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-primary);
}


.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--pro-secondary-dark);
    --bs-btn-hover-border-color: var(--pro-secondary-dark);
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    --bs-btn-active-bg: var(--pro-secondary-active);
    --bs-btn-active-border-color: var(--pro-secondary-active);
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
}

.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);
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    --bs-btn-active-bg: var(--pro-secondary-active);
    --bs-btn-active-border-color: var(--pro-secondary-active);
    --bs-btn-disabled-color: var(--bs-secondary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-secondary);
}

.btn-warning {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--pro-warning-dark);
    --bs-btn-hover-border-color: var(--pro-warning-dark);
    --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
    --bs-btn-active-bg: var(--pro-warning-active);
    --bs-btn-active-border-color: var(--pro-warning-active);
    --bs-btn-disabled-bg: var(--bs-warning);
    --bs-btn-disabled-border-color: var(--bs-warning);
}

.btn-outline-warning {
    --bs-btn-color: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-warning);
    --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
    --bs-btn-active-bg: var(--pro-warning-active);
    --bs-btn-active-border-color: var(--pro-warning-active);
    --bs-btn-disabled-color: var(--bs-warning);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-warning);
}


.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-bg: var(--pro-info-dark);
    --bs-btn-hover-border-color: var(--pro-info-dark);
    --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
    --bs-btn-active-bg: var(--pro-info-active);
    --bs-btn-active-border-color: var(--pro-info-active);
    --bs-btn-disabled-bg: var(--bs-info);
    --bs-btn-disabled-border-color: var(--bs-info);
}

.btn-outline-info {
    --bs-btn-color: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-info);
    --bs-btn-hover-border-color: var(--bs-info);
    --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
    --bs-btn-active-bg: var(--pro-info-active);
    --bs-btn-active-border-color: var(--pro-info-active);
    --bs-btn-disabled-color: var(--bs-info);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-info);
}


/* =========================================================
   PROBOOKS • Bootstrap 5.3 Theme Add-ons
   Matching Alerts • Badges • Form focus (variable-based)
   Put in theme.css AFTER your :root palette
========================================================= */

/* ---------- Required (Bootstrap 5.3 uses RGB vars a lot) ---------- */
:root {
    /* If you already added these, keep only one copy */
    --bs-primary-rgb: 34,135,253; /* #2287FD */
    --bs-secondary-rgb: 10,57,113; /* #0A3971 */
    --bs-warning-rgb: 255,184,0; /* #FFB800 */
    --bs-info-rgb: 127,127,250; /* #7F7FFA */
}

/* =========================================================
   1) Matching Alert Overrides (uses BS 5.3 alert CSS vars)
========================================================= */
.alert-primary {
    --bs-alert-color: #0b2e6a;
    --bs-alert-bg: var(--pro-primary-lighter); /* #E9F3FF */
    --bs-alert-border-color: rgba(var(--bs-primary-rgb), .22);
    --bs-alert-link-color: var(--bs-primary);
}

.alert-secondary {
    --bs-alert-color: #072850;
    --bs-alert-bg: var(--pro-secondary-lighter); /* #E7EBF1 */
    --bs-alert-border-color: rgba(var(--bs-secondary-rgb), .22);
    --bs-alert-link-color: var(--bs-secondary);
}

.alert-warning {
    --bs-alert-color: #5a4300;
    --bs-alert-bg: var(--pro-warning-lighter); /* #FFF8E6 */
    --bs-alert-border-color: rgba(var(--bs-warning-rgb), .22);
    --bs-alert-link-color: #8a6400;
}

.alert-info {
    --bs-alert-color: #2b2b74;
    --bs-alert-bg: var(--pro-info-lighter); /* #F2F2FF */
    --bs-alert-border-color: rgba(var(--bs-info-rgb), .22);
    --bs-alert-link-color: var(--bs-info);
}

/* =========================================================
   2) Badge Overrides
   - Fixes bg-* badges to match your palette
   - Adds "soft" badge helpers (optional but useful)
========================================================= */

/* Hard badges (Bootstrap classes) */
.badge.bg-primary {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

.badge.bg-secondary {
    background-color: var(--bs-secondary) !important;
    color: #fff !important;
}

.badge.bg-warning {
    background-color: var(--bs-warning) !important;
    color: #000 !important;
}

.badge.bg-info {
    background-color: var(--bs-info) !important;
    color: #fff !important;
}

/* Soft badge helpers (use: class="badge badge-soft-primary") */
.badge-soft-primary {
    color: var(--bs-primary) !important;
    background: var(--pro-primary-lighter) !important;
    border: 1px solid rgba(var(--bs-primary-rgb), .22) !important;
}

.badge-soft-secondary {
    color: var(--bs-secondary) !important;
    background: var(--pro-secondary-lighter) !important;
    border: 1px solid rgba(var(--bs-secondary-rgb), .22) !important;
}

.badge-soft-warning {
    color: #5a4300 !important;
    background: var(--pro-warning-lighter) !important;
    border: 1px solid rgba(var(--bs-warning-rgb), .22) !important;
}

.badge-soft-info {
    color: var(--bs-info) !important;
    background: var(--pro-info-lighter) !important;
    border: 1px solid rgba(var(--bs-info-rgb), .22) !important;
}

/* Optional: pill polish */
.badge {
    border-radius: 999px;
}

/* =========================================================
   3) Form Control Focus Styles (inputs, selects, textarea)
   - Default focus ring uses Primary
   - Also styles checkbox/radio/switch checked
========================================================= */

/* Global focus ring size (optional) */
:root {
    --pro-focus-width: .2rem;
}

/* Inputs/select/textarea focus */
.form-control:focus,
.form-select:focus,
.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
    border-color: rgba(var(--bs-primary-rgb), .55);
    box-shadow: 0 0 0 var(--pro-focus-width) rgba(var(--bs-primary-rgb), .22);
}

/* Checkbox & radio focus ring */
.form-check-input:focus {
    border-color: rgba(var(--bs-primary-rgb), .55);
    box-shadow: 0 0 0 var(--pro-focus-width) rgba(var(--bs-primary-rgb), .22);
}

/* Checkbox/radio checked */
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Switch checked */
.form-switch .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Range slider thumb */
.form-range::-webkit-slider-thumb {
    background-color: var(--bs-primary);
}

.form-range::-moz-range-thumb {
    background-color: var(--bs-primary);
}

/* Optional: per-field focus color helpers
   usage: <input class="form-control pro-focus-secondary">
*/
.pro-focus-secondary:focus {
    border-color: rgba(var(--bs-secondary-rgb), .55) !important;
    box-shadow: 0 0 0 var(--pro-focus-width) rgba(var(--bs-secondary-rgb), .22) !important;
}

.pro-focus-warning:focus {
    border-color: rgba(var(--bs-warning-rgb), .55) !important;
    box-shadow: 0 0 0 var(--pro-focus-width) rgba(var(--bs-warning-rgb), .22) !important;
}

.pro-focus-info:focus {
    border-color: rgba(var(--bs-info-rgb), .55) !important;
    box-shadow: 0 0 0 var(--pro-focus-width) rgba(var(--bs-info-rgb), .22) !important;
}