/*
 * public/assets/css/theme-bootstrap-bridge.css
 *
 * Stage 53A — Theme / Bootstrap Integration.
 *
 * PROBLEM (audited before this stage): ThemeService::renderCssVariables()
 * has always injected --mcq-color-* tokens correctly, but nothing ever
 * connected them to Bootstrap's own --bs-primary / --bs-success / etc.
 * variables. bootstrap.min.css defines those on :root with hardcoded hex
 * values, and every component (.btn-primary, .bg-success, .alert-danger,
 * form validation, ...) reads from ITS OWN component-level custom property
 * (e.g. .btn-primary{--bs-btn-bg:#0d6efd}), not from the root token. So
 * editing a Theme's colours in Theme Manager never actually changed a
 * single button, badge, or alert anywhere in the app — the two systems
 * were parallel, not layered.
 *
 * FIX: establish the required architecture —
 *
 *     Theme Tokens (--mcq-color-*)
 *           |
 *     Bootstrap Variables (--bs-primary, --bs-success, ...)
 *           |
 *     Components (.btn-primary, .badge, .alert-*, utilities)
 *           |
 *     Application
 *
 * Every semantic slot below (primary/secondary/success/warning/danger/
 * info — the six colour tokens the locked Theme Architecture actually
 * exposes; light/dark are intentionally left as Bootstrap's own
 * defaults, exactly as the architecture doc's token list specifies) maps
 * to exactly ONE --mcq-color-* token and is fully independent of the
 * others: changing Primary can never recolor Success, Warning, or
 * Danger, because each slot below only ever reads its own token.
 *
 * Loaded AFTER bootstrap.min.css (see admin.php / main.php / auth.php /
 * public.php <head>) so these rules win the cascade without needing
 * !important anywhere except the small set of Bootstrap utility classes
 * that are themselves declared !important in bootstrap.min.css.
 *
 * No component is redesigned here — only re-pointed at the Theme.
 */

:root {
    /* Step 1: Theme Tokens -> Bootstrap semantic variables.
       Each line is independent — no shared intermediate variable. */
    --bs-primary:   var(--mcq-color-primary, #0F3D5C);
    --bs-secondary: var(--mcq-color-secondary, #6c757d);
    --bs-success:   var(--mcq-color-success, #198754);
    --bs-warning:   var(--mcq-color-warning, #ffc107);
    --bs-danger:    var(--mcq-color-danger, #dc3545);
    --bs-info:      var(--mcq-color-info, #0dcaf0);

    /* Form validation colours already exist as separate Bootstrap
       variables (bootstrap.min.css hardcodes them to the same hex as
       --bs-success / --bs-danger) — re-point them at the same tokens so
       .is-valid / .is-invalid track the Theme too. */
    --bs-form-valid-color:          var(--bs-success);
    --bs-form-valid-border-color:   var(--bs-success);
    --bs-form-invalid-color:        var(--bs-danger);
    --bs-form-invalid-border-color: var(--bs-danger);
}

/* ---------------------------------------------------------------------
   Step 2: Bootstrap Variables -> Components.
   bootstrap.min.css's .btn-primary etc. do NOT read var(--bs-primary) —
   each button variant hardcodes its own --bs-btn-bg/--bs-btn-border-color
   literal. Re-declaring those component-level custom properties (not the
   underlying colour) is what actually makes the cascade flow through.
   --------------------------------------------------------------------- */

/* Solid buttons */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 70%, black);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-secondary {
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) 70%, black);
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
}
.btn-success {
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-success) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-success) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-success) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-success) 70%, black);
    --bs-btn-disabled-bg: var(--bs-success);
    --bs-btn-disabled-border-color: var(--bs-success);
}
.btn-warning {
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-warning) 85%, white);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-warning) 80%, white);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-warning) 75%, white);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-warning) 70%, white);
    --bs-btn-disabled-bg: var(--bs-warning);
    --bs-btn-disabled-border-color: var(--bs-warning);
}
.btn-danger {
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-danger) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-danger) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-danger) 70%, black);
    --bs-btn-disabled-bg: var(--bs-danger);
    --bs-btn-disabled-border-color: var(--bs-danger);
}
.btn-info {
    --bs-btn-bg: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-info) 85%, white);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-info) 80%, white);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-info) 75%, white);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-info) 70%, white);
    --bs-btn-disabled-bg: var(--bs-info);
    --bs-btn-disabled-border-color: var(--bs-info);
}

/* Outline buttons */
.btn-outline-primary   { --bs-btn-color: var(--bs-primary);   --bs-btn-border-color: var(--bs-primary);   --bs-btn-hover-bg: var(--bs-primary);   --bs-btn-hover-border-color: var(--bs-primary);   --bs-btn-active-bg: var(--bs-primary);   --bs-btn-active-border-color: var(--bs-primary);   --bs-btn-disabled-color: var(--bs-primary);   --bs-btn-disabled-border-color: var(--bs-primary); }
.btn-outline-secondary { --bs-btn-color: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-bg: var(--bs-secondary); --bs-btn-hover-border-color: var(--bs-secondary); --bs-btn-active-bg: var(--bs-secondary); --bs-btn-active-border-color: var(--bs-secondary); --bs-btn-disabled-color: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); }
.btn-outline-success    { --bs-btn-color: var(--bs-success);   --bs-btn-border-color: var(--bs-success);   --bs-btn-hover-bg: var(--bs-success);   --bs-btn-hover-border-color: var(--bs-success);   --bs-btn-active-bg: var(--bs-success);   --bs-btn-active-border-color: var(--bs-success);   --bs-btn-disabled-color: var(--bs-success);   --bs-btn-disabled-border-color: var(--bs-success); }
.btn-outline-warning    { --bs-btn-color: var(--bs-warning);   --bs-btn-border-color: var(--bs-warning);   --bs-btn-hover-bg: var(--bs-warning);   --bs-btn-hover-border-color: var(--bs-warning);   --bs-btn-active-bg: var(--bs-warning);   --bs-btn-active-border-color: var(--bs-warning);   --bs-btn-disabled-color: var(--bs-warning);   --bs-btn-disabled-border-color: var(--bs-warning); }
.btn-outline-danger     { --bs-btn-color: var(--bs-danger);    --bs-btn-border-color: var(--bs-danger);    --bs-btn-hover-bg: var(--bs-danger);    --bs-btn-hover-border-color: var(--bs-danger);    --bs-btn-active-bg: var(--bs-danger);    --bs-btn-active-border-color: var(--bs-danger);    --bs-btn-disabled-color: var(--bs-danger);    --bs-btn-disabled-border-color: var(--bs-danger); }
.btn-outline-info       { --bs-btn-color: var(--bs-info);      --bs-btn-border-color: var(--bs-info);      --bs-btn-hover-bg: var(--bs-info);      --bs-btn-hover-border-color: var(--bs-info);      --bs-btn-active-bg: var(--bs-info);      --bs-btn-active-border-color: var(--bs-info);      --bs-btn-disabled-color: var(--bs-info);      --bs-btn-disabled-border-color: var(--bs-info); }

/* Utility classes: bg-*, text-*, border-*, text-bg-* (badges, chips,
   icon tints). These are the classes used throughout Admin/Student
   views for status colours, so this is the highest-traffic fix. */
.bg-primary   { background-color: var(--bs-primary)   !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; }
.bg-success   { background-color: var(--bs-success)   !important; }
.bg-warning   { background-color: var(--bs-warning)   !important; }
.bg-danger    { background-color: var(--bs-danger)    !important; }
.bg-info      { background-color: var(--bs-info)      !important; }

.text-primary   { color: var(--bs-primary)   !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-success   { color: var(--bs-success)   !important; }
.text-warning   { color: var(--bs-warning)   !important; }
.text-danger    { color: var(--bs-danger)    !important; }
.text-info      { color: var(--bs-info)      !important; }

.border-primary   { border-color: var(--bs-primary)   !important; }
.border-secondary { border-color: var(--bs-secondary) !important; }
.border-success   { border-color: var(--bs-success)   !important; }
.border-warning   { border-color: var(--bs-warning)   !important; }
.border-danger    { border-color: var(--bs-danger)    !important; }
.border-info      { border-color: var(--bs-info)      !important; }

.text-bg-primary   { background-color: var(--bs-primary)   !important; color: #fff !important; }
.text-bg-secondary { background-color: var(--bs-secondary) !important; color: #fff !important; }
.text-bg-success   { background-color: var(--bs-success)   !important; color: #fff !important; }
.text-bg-warning   { background-color: var(--bs-warning)   !important; color: #000 !important; }
.text-bg-danger    { background-color: var(--bs-danger)    !important; color: #fff !important; }
.text-bg-info      { background-color: var(--bs-info)      !important; color: #000 !important; }

/* Alerts: subtle tint + readable text, derived from the same single
   token per slot via color-mix() rather than a separate hardcoded
   "-subtle" palette, so alerts always match the active Theme. */
.alert-primary   { --bs-alert-color: color-mix(in srgb, var(--bs-primary) 65%, black);   --bs-alert-bg: color-mix(in srgb, var(--bs-primary) 12%, white);   --bs-alert-border-color: color-mix(in srgb, var(--bs-primary) 28%, white); }
.alert-secondary { --bs-alert-color: color-mix(in srgb, var(--bs-secondary) 65%, black); --bs-alert-bg: color-mix(in srgb, var(--bs-secondary) 12%, white); --bs-alert-border-color: color-mix(in srgb, var(--bs-secondary) 28%, white); }
.alert-success   { --bs-alert-color: color-mix(in srgb, var(--bs-success) 65%, black);   --bs-alert-bg: color-mix(in srgb, var(--bs-success) 12%, white);   --bs-alert-border-color: color-mix(in srgb, var(--bs-success) 28%, white); }
.alert-warning   { --bs-alert-color: color-mix(in srgb, var(--bs-warning) 65%, black);   --bs-alert-bg: color-mix(in srgb, var(--bs-warning) 16%, white);   --bs-alert-border-color: color-mix(in srgb, var(--bs-warning) 32%, white); }
.alert-danger    { --bs-alert-color: color-mix(in srgb, var(--bs-danger) 65%, black);    --bs-alert-bg: color-mix(in srgb, var(--bs-danger) 12%, white);    --bs-alert-border-color: color-mix(in srgb, var(--bs-danger) 28%, white); }
.alert-info      { --bs-alert-color: color-mix(in srgb, var(--bs-info) 65%, black);      --bs-alert-bg: color-mix(in srgb, var(--bs-info) 16%, white);      --bs-alert-border-color: color-mix(in srgb, var(--bs-info) 32%, white); }

/* Spinners / progress bars that default to Bootstrap blue regardless of
   the surrounding button/context colour. */
.progress-bar { background-color: var(--bs-primary); }