/*
 * MCC theme: a design layer on top of Bootstrap 5.3 (no build step, no Sass).
 *
 * Load it after bootstrap.min.css. It only uses Bootstrap's CSS variables and
 * classes, so it works in any Bootstrap 5.3 application:
 *   1. Palette: brand tokens (--cr-*). Change these for another brand.
 *   2. Semantic tokens (--mcc-*) for light and dark mode, derived from the palette.
 *   3. Bootstrap variables mapped to the semantic tokens.
 *   4. Component refinements (cards, tables, forms, buttons, navigation, ...).
 *   5. Dark mode corrections for fixed-colour utilities (bg-white, table-light, ...).
 *   6. Extra utilities of the palette (bg-soft-primary, bg-pale-primary, ...).
 *
 * Dark mode: <html data-bs-theme="dark"> (Bootstrap 5.3 colour modes).
 * Contrast: white text on --cr-blue ≈ 7.4:1. --cr-sky is an accent only; white text on
 * it is too weak (≈ 2.2:1), so it is used with dark text.
 */

/* 1. Palette ---------------------------------------------------------------- */
:root {
    --cr-blue: #1D50AF;
    --cr-sky: #5EB9F0;
    /* Shades of --cr-blue (12 % / 26 % black, 14 % / 6 % on white). */
    --cr-blue-600: #1A469A;
    --cr-blue-700: #153B82;
    --cr-blue-soft: #DFE7F4;
    --cr-blue-pale: #F1F5FA;
    --cr-gray-100: #F4F6FA;
    --cr-gray-200: #E7EBF1;
    --cr-gray-300: #D6DCE5;
    --cr-gray-400: #A9B3C1;
    --cr-gray-600: #5C6677;
    --cr-gray-900: #151C27;
    --cr-navy: #0F2552;
    --cr-body: #273142;
    --cr-dark: #0E1520;
}

/* 2. Semantic tokens: light (default) ---------------------------------------- */
:root,
[data-bs-theme="light"] {
    --mcc-surface: #FFFFFF;
    --mcc-surface-2: var(--cr-gray-100);
    --mcc-border: var(--cr-gray-200);
    --mcc-border-strong: var(--cr-gray-300);
    --mcc-text: var(--cr-body);
    --mcc-text-muted: var(--cr-gray-600);
    --mcc-heading: var(--cr-dark);
    --mcc-accent: var(--cr-blue);            /* fills: buttons, active states */
    --mcc-accent-hover: var(--cr-blue-600);
    --mcc-accent-active: var(--cr-blue-700);
    --mcc-accent-fg: var(--cr-blue);         /* accent text and links on surfaces */
    --mcc-accent-soft: var(--cr-blue-soft);
    --mcc-accent-pale: var(--cr-blue-pale);
    --mcc-accent-text: var(--cr-blue-700);   /* text on soft accent backgrounds */
    --mcc-focus-ring: rgba(29, 80, 175, 0.25);
    --mcc-shadow-color: 21, 28, 39;
}

/* 2. Semantic tokens: dark ---------------------------------------------------- */
[data-bs-theme="dark"] {
    --mcc-surface: #161D29;
    --mcc-surface-2: #0F151F;
    --mcc-border: #263042;
    --mcc-border-strong: #334056;
    --mcc-text: #D5DCE7;
    --mcc-text-muted: #8C97A8;
    --mcc-heading: #F2F5F9;
    --mcc-accent: #2E64CC;                   /* white text ≈ 5.7:1 */
    --mcc-accent-hover: #3A70D8;
    --mcc-accent-active: #2556B5;
    --mcc-accent-fg: #8DB2F2;                /* ≈ 7.9:1 on the dark surface */
    --mcc-accent-soft: rgba(110, 154, 232, 0.18);
    --mcc-accent-pale: rgba(110, 154, 232, 0.08);
    --mcc-accent-text: #A9C5F5;
    --mcc-focus-ring: rgba(141, 178, 242, 0.35);
    --mcc-shadow-color: 0, 0, 0;
}

/* 3. Bootstrap variables ------------------------------------------------------ */
:root,
[data-bs-theme="light"] {
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --bs-body-font-size: 0.9375rem;
    --bs-body-color: var(--mcc-text);
    --bs-body-color-rgb: 39, 49, 66;
    --bs-body-bg: var(--mcc-surface-2);
    --bs-body-bg-rgb: 244, 246, 250;
    --bs-emphasis-color: var(--mcc-heading);
    --bs-secondary-color: var(--mcc-text-muted);
    --bs-secondary-rgb: 92, 102, 119;
    --bs-secondary-bg: var(--cr-gray-200);
    --bs-tertiary-bg: var(--cr-gray-100);
    --bs-border-color: var(--mcc-border);
    --bs-border-color-translucent: rgba(21, 28, 39, 0.1);
    --bs-primary: var(--cr-blue);
    --bs-primary-rgb: 29, 80, 175;
    --bs-primary-text-emphasis: var(--cr-blue-700);
    --bs-primary-bg-subtle: var(--cr-blue-soft);
    --bs-primary-border-subtle: #B9CBEA;
    --bs-info: var(--cr-sky);
    --bs-info-rgb: 94, 185, 240;
    --bs-link-color: var(--mcc-accent-fg);
    --bs-link-color-rgb: 29, 80, 175;
    --bs-link-hover-color: var(--cr-blue-700);
    --bs-link-hover-color-rgb: 21, 59, 130;
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-border-radius-xl: 1rem;
    --bs-box-shadow-sm: 0 0 0 1px var(--mcc-border), 0 1px 2px rgba(var(--mcc-shadow-color), 0.04);
    --bs-box-shadow: 0 0 0 1px var(--mcc-border), 0 4px 12px rgba(var(--mcc-shadow-color), 0.08);
    --bs-box-shadow-lg: 0 0 0 1px var(--mcc-border), 0 12px 32px rgba(var(--mcc-shadow-color), 0.12);
    --bs-focus-ring-color: var(--mcc-focus-ring);
}

[data-bs-theme="dark"] {
    --bs-body-color: var(--mcc-text);
    --bs-body-color-rgb: 213, 220, 231;
    --bs-body-bg: var(--mcc-surface-2);
    --bs-body-bg-rgb: 15, 21, 31;
    --bs-emphasis-color: var(--mcc-heading);
    --bs-secondary-color: var(--mcc-text-muted);
    --bs-secondary-bg: #1E2635;
    --bs-tertiary-bg: #121925;
    --bs-border-color: var(--mcc-border);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
    --bs-primary: #2E64CC;
    --bs-primary-rgb: 46, 100, 204;
    --bs-primary-text-emphasis: var(--mcc-accent-text);
    --bs-primary-bg-subtle: #16264A;
    --bs-primary-border-subtle: #24407A;
    --bs-link-color: var(--mcc-accent-fg);
    --bs-link-color-rgb: 141, 178, 242;
    --bs-link-hover-color: var(--mcc-accent-text);
    --bs-link-hover-color-rgb: 169, 197, 245;
}

/* 4. Components ---------------------------------------------------------------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--bs-emphasis-color);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.card {
    --bs-card-bg: var(--mcc-surface);
    --bs-card-border-color: var(--mcc-border);
    --bs-card-cap-bg: var(--mcc-surface);
    --bs-card-border-radius: 0.75rem;
    --bs-card-inner-border-radius: calc(0.75rem - 1px);
}

.card-header {
    border-bottom-color: var(--mcc-border);
}

.card-footer {
    border-top-color: var(--mcc-border);
}

/* Buttons */
.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: 0.5rem;
    --bs-btn-focus-box-shadow: 0 0 0 0.2rem var(--mcc-focus-ring);
}

.btn-sm {
    --bs-btn-border-radius: 0.375rem;
}

.btn-primary {
    --bs-btn-bg: var(--mcc-accent);
    --bs-btn-border-color: var(--mcc-accent);
    --bs-btn-hover-bg: var(--mcc-accent-hover);
    --bs-btn-hover-border-color: var(--mcc-accent-hover);
    --bs-btn-active-bg: var(--mcc-accent-active);
    --bs-btn-active-border-color: var(--mcc-accent-active);
    --bs-btn-disabled-bg: var(--mcc-accent);
    --bs-btn-disabled-border-color: var(--mcc-accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--mcc-accent-fg);
    --bs-btn-border-color: var(--mcc-accent);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--mcc-accent);
    --bs-btn-hover-border-color: var(--mcc-accent);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--mcc-accent-active);
    --bs-btn-active-border-color: var(--mcc-accent-active);
    --bs-btn-disabled-color: var(--mcc-accent-fg);
    --bs-btn-disabled-border-color: var(--mcc-accent);
}

.btn-outline-secondary {
    --bs-btn-color: var(--mcc-text);
    --bs-btn-border-color: var(--mcc-border-strong);
    --bs-btn-hover-color: var(--mcc-heading);
    --bs-btn-hover-bg: var(--mcc-surface-2);
    --bs-btn-hover-border-color: var(--mcc-border-strong);
    --bs-btn-active-color: var(--mcc-heading);
    --bs-btn-active-bg: var(--mcc-border);
    --bs-btn-active-border-color: var(--mcc-border-strong);
    --bs-btn-disabled-color: var(--mcc-text-muted);
    --bs-btn-disabled-border-color: var(--mcc-border);
}

/* Forms */
.form-control,
.form-select {
    background-color: var(--mcc-surface);
    border-color: var(--mcc-border-strong);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mcc-accent);
    box-shadow: 0 0 0 0.2rem var(--mcc-focus-ring);
}

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

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

.form-label {
    font-weight: 500;
}

.input-group-text {
    background-color: var(--mcc-surface-2);
    border-color: var(--mcc-border-strong);
}

/* Tables: quiet header, light row lines, accent on hover */
.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--mcc-border);
    --bs-table-hover-bg: var(--mcc-accent-pale);
    --bs-table-hover-color: var(--mcc-text);
    --bs-table-striped-bg: var(--mcc-surface-2);
}

.table > :not(caption) > * > * {
    padding: 0.6rem 0.75rem;
}

.table-sm > :not(caption) > * > * {
    padding: 0.4rem 0.6rem;
}

.table > thead th {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mcc-text-muted);
    white-space: nowrap;
}

.table-light {
    --bs-table-color: var(--mcc-text-muted);
    --bs-table-bg: var(--mcc-surface-2);
    --bs-table-border-color: var(--mcc-border);
}

/* Badges */
.badge {
    font-weight: 600;
    border-radius: 0.375rem;
    padding: 0.35em 0.55em;
}

.badge.rounded-pill {
    border-radius: 50rem;
}

/* Navigation */
.nav {
    --bs-nav-link-color: var(--mcc-accent-fg);
    --bs-nav-link-hover-color: var(--mcc-accent-text);
}

.nav-pills {
    --bs-nav-pills-border-radius: 0.5rem;
    --bs-nav-pills-link-active-bg: var(--mcc-accent);
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--mcc-border);
    --bs-nav-tabs-link-active-bg: var(--mcc-surface);
    --bs-nav-tabs-link-active-border-color: var(--mcc-border) var(--mcc-border) var(--mcc-surface);
    --bs-nav-tabs-link-hover-border-color: var(--mcc-border) var(--mcc-border) var(--mcc-border);
}

.nav-tabs .nav-link.active {
    font-weight: 600;
}

.pagination {
    --bs-pagination-color: var(--mcc-accent-fg);
    --bs-pagination-bg: var(--mcc-surface);
    --bs-pagination-border-color: var(--mcc-border);
    --bs-pagination-hover-bg: var(--mcc-surface-2);
    --bs-pagination-active-bg: var(--mcc-accent);
    --bs-pagination-active-border-color: var(--mcc-accent);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem var(--mcc-focus-ring);
}

.list-group {
    --bs-list-group-bg: var(--mcc-surface);
    --bs-list-group-border-color: var(--mcc-border);
    --bs-list-group-action-hover-bg: var(--mcc-surface-2);
    --bs-list-group-action-active-bg: var(--mcc-border);
    --bs-list-group-active-bg: var(--mcc-accent);
    --bs-list-group-active-border-color: var(--mcc-accent);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--mcc-surface);
    --bs-dropdown-border-color: var(--mcc-border);
    --bs-dropdown-border-radius: 0.625rem;
    --bs-dropdown-box-shadow: var(--bs-box-shadow);
    --bs-dropdown-link-hover-bg: var(--mcc-surface-2);
    --bs-dropdown-link-active-bg: var(--mcc-accent);
    box-shadow: var(--bs-dropdown-box-shadow);
}

.modal {
    --bs-modal-bg: var(--mcc-surface);
    --bs-modal-border-color: var(--mcc-border);
    --bs-modal-border-radius: 0.875rem;
    --bs-modal-header-border-color: var(--mcc-border);
    --bs-modal-footer-border-color: var(--mcc-border);
}

.offcanvas {
    --bs-offcanvas-bg: var(--mcc-surface);
    --bs-offcanvas-border-color: var(--mcc-border);
}

.progress {
    --bs-progress-bg: var(--mcc-border);
    --bs-progress-bar-bg: var(--mcc-accent);
}

.alert {
    --bs-alert-border-radius: 0.625rem;
}

/* 5. Dark mode corrections ------------------------------------------------------- */
/* Bootstrap keeps these utilities fixed (white, light grey); in dark mode they follow the surfaces. */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--mcc-surface) !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--mcc-surface-2) !important;
}

[data-bs-theme="dark"] .text-dark {
    color: var(--mcc-heading) !important;
}

[data-bs-theme="dark"] .text-secondary {
    color: var(--mcc-text-muted) !important;
}

[data-bs-theme="dark"] .text-bg-light {
    color: var(--mcc-text) !important;
    background-color: var(--mcc-surface-2) !important;
}

[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: var(--mcc-text);
    --bs-btn-bg: var(--mcc-surface-2);
    --bs-btn-border-color: var(--mcc-border);
    --bs-btn-hover-color: var(--mcc-heading);
    --bs-btn-hover-bg: var(--mcc-border);
    --bs-btn-hover-border-color: var(--mcc-border-strong);
}

[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--mcc-text-muted);
    --bs-table-bg: var(--mcc-surface-2);
    --bs-table-border-color: var(--mcc-border);
}

[data-bs-theme="dark"] .border {
    border-color: var(--mcc-border) !important;
}

/* 6. Palette utilities -------------------------------------------------------------- */
.bg-soft-primary {
    background-color: var(--mcc-accent-soft) !important;
}

.bg-pale-primary {
    background-color: var(--mcc-accent-pale) !important;
}

.text-accent {
    color: var(--mcc-accent-fg) !important;
}

.bg-sky {
    background-color: var(--cr-sky) !important;
    color: var(--cr-dark) !important;
}

.text-sky {
    color: var(--cr-sky) !important;
}

.bg-navy {
    background-color: var(--cr-navy) !important;
    color: #FFFFFF !important;
}

.bg-surface {
    background-color: var(--mcc-surface) !important;
}

.border-subtle {
    border-color: var(--mcc-border) !important;
}