/**
 * eFit Design System  (site-wide)
 * ---------------------------------------------------------------------------
 * Source of truth: dashboard/modules-online/coursera-DESIGN.md
 * Brand palette sampled from the eFit logo: blue -> electric cyan (no purple).
 * WCAG 2.2 AAA contrast discipline. Loaded globally via admin/body.php after
 * Bootstrap + style.css + dashboard-v3.css, so it themes every page.
 *
 * SAFETY: this layer only sets color / background / border / radius / shadow /
 * font / focus / transition. It does NOT touch width / display / position /
 * float / margin on shared elements, so existing page layouts are preserved.
 * The dashboard's richer dashboard-june.css loads later and is scoped to
 * .dashboard-main, so it still wins on that page.
 */

/* ============================================================================
   TOKENS
   ============================================================================ */
:root {
    /* Brand (logo) */
    --efit-blue:        #004BB5;   /* primary; white text 7.9:1 (AAA) */
    --efit-blue-hover:  #00368A;   /* white text 10.4:1 (AAA) */
    --efit-cobalt:      #2864F0;   /* decorative / large-bold white-on */
    --efit-sky:         #3389FF;   /* decorative */
    --efit-cyan:        #19CFFC;   /* decorative only, never text */
    --efit-teal:        #0E7490;   /* data-viz / icon fills */

    /* Ink (AAA on white and on #F5F7F9) */
    --efit-ink:         #1F1F1F;
    --efit-ink-muted:   #444444;
    --efit-ink-subdued: #545454;

    /* Surfaces */
    --efit-canvas:      #FFFFFF;
    --efit-canvas-2:    #F5F7F9;
    --efit-border:      #D6DBDF;
    --efit-border-soft: #EEF0F2;

    /* Grade / status */
    --efit-pass:        #0A5E33;
    --efit-fail:        #A4231F;

    /* Gradients */
    --efit-grad:        linear-gradient(135deg, #0B2E93 0%, #163FC0 46%, #2864F0 100%);
    --efit-grad-accent: linear-gradient(135deg, #19CFFC 0%, #2864F0 100%);

    /* Radius / shadow / motion */
    --efit-r-sm: 8px; --efit-r-md: 12px; --efit-r-lg: 20px; --efit-r-pill: 9999px;
    --efit-shadow:    0 2px 8px rgba(15, 23, 42, 0.07);
    --efit-shadow-md: 0 10px 28px -12px rgba(15, 23, 42, 0.22);
    --efit-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --efit-fast: 150ms;
    --efit-base: 250ms;

    /* ---- Bootstrap 5.3 variable overrides (recolors all BS components) ---- */
    --bs-primary: #004BB5;
    --bs-primary-rgb: 0, 75, 181;
    --bs-link-color: #004BB5;
    --bs-link-color-rgb: 0, 75, 181;
    --bs-link-hover-color: #00368A;
    --bs-link-hover-color-rgb: 0, 54, 138;
    --bs-body-color: #1F1F1F;
    --bs-body-color-rgb: 31, 31, 31;
    --bs-emphasis-color: #1F1F1F;
    --bs-border-color: #D6DBDF;
    --bs-border-radius: 0.75rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 1.25rem;
    --bs-border-radius-xl: 1.5rem;
    --bs-border-radius-pill: 9999px;
    --bs-body-font-family: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================================
   BASE
   ============================================================================ */
body {
    font-family: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--efit-ink);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--efit-ink);
    letter-spacing: -0.01em;
}
a { color: var(--efit-blue); }
a:hover { color: var(--efit-blue-hover); }

/* ============================================================================
   FOCUS VISIBILITY (WCAG 2.2 AAA 2.4.13) - 2px solid brand, 2px offset
   ============================================================================ */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--efit-blue) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 75, 181, 0.20) !important;
}

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn { border-radius: var(--efit-r-pill); font-weight: 600; transition: transform var(--efit-fast) var(--efit-ease), box-shadow var(--efit-fast) var(--efit-ease), background-color var(--efit-fast) var(--efit-ease); }
.btn-primary {
    --bs-btn-bg: var(--efit-blue);
    --bs-btn-border-color: var(--efit-blue);
    --bs-btn-hover-bg: var(--efit-blue-hover);
    --bs-btn-hover-border-color: var(--efit-blue-hover);
    --bs-btn-active-bg: var(--efit-blue-hover);
    --bs-btn-active-border-color: var(--efit-blue-hover);
}
.btn-outline-primary {
    --bs-btn-color: var(--efit-blue);
    --bs-btn-border-color: var(--efit-blue);
    --bs-btn-hover-bg: var(--efit-blue);
    --bs-btn-hover-border-color: var(--efit-blue);
    --bs-btn-active-bg: var(--efit-blue);
}
.btn-primary:hover, .btn-outline-primary:hover { transform: translateY(-1px); box-shadow: var(--efit-shadow); }

/* Legacy template accent buttons (were teal #23b195) -> brand blue */
.btn-custom, .btn-bordered.btn-custom {
    background-color: var(--efit-blue) !important;
    border-color: var(--efit-blue) !important;
    color: #fff !important;
    border-radius: var(--efit-r-pill);
}
.btn-custom:hover { background-color: var(--efit-blue-hover) !important; border-color: var(--efit-blue-hover) !important; }

/* ============================================================================
   CARDS
   ============================================================================ */
.card {
    border: 1px solid var(--efit-border-soft);
    border-radius: var(--efit-r-lg);
    box-shadow: var(--efit-shadow);
}
/* Only tint plain headers — never override intentional bg-* colored headers */
.card > .card-header:not([class*="bg-"]) {
    background: var(--efit-canvas-2);
    border-bottom: 1px solid var(--efit-border-soft);
    font-weight: 700;
}

/* ============================================================================
   TABLES
   ============================================================================ */
.table { --bs-table-hover-bg: rgba(0, 75, 181, 0.05); color: var(--efit-ink); }
.table > thead th, .table thead th {
    color: var(--efit-ink-subdued);
    text-transform: uppercase;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    font-weight: 800;
    border-bottom: 2px solid var(--efit-border);
}

/* ============================================================================
   FORMS
   ============================================================================ */
.form-control, .form-select {
    border-radius: var(--efit-r-sm);
    border-color: var(--efit-border);
}
.form-control:focus, .form-select:focus {
    border-color: var(--efit-blue);
    box-shadow: 0 0 0 3px rgba(0, 75, 181, 0.18);
}
.form-check-input:checked { background-color: var(--efit-blue); border-color: var(--efit-blue); }

/* ============================================================================
   BADGES / TEXT + BG UTILITIES (rebrand template teal)
   ============================================================================ */
.badge.bg-primary { background-color: var(--efit-blue) !important; }
.badge-custom, .bg-custom { background-color: var(--efit-blue) !important; }
.text-custom { color: var(--efit-blue) !important; }
.badge { border-radius: var(--efit-r-pill); font-weight: 700; }

/* ============================================================================
   ALERTS  (brand-tinted primary/info)
   ============================================================================ */
.alert { border-radius: var(--efit-r-md); }
.alert-primary, .alert-info {
    --bs-alert-color: #0B2E93;
    --bs-alert-bg: rgba(0, 75, 181, 0.08);
    --bs-alert-border-color: rgba(0, 75, 181, 0.20);
}

/* ============================================================================
   PROGRESS
   ============================================================================ */
.progress { border-radius: var(--efit-r-pill); background-color: var(--efit-border); }
.progress-bar { background: var(--efit-grad); }

/* ============================================================================
   PAGINATION / LIST-GROUP (rebrand teal -> blue)
   ============================================================================ */
.page-link { color: var(--efit-blue); }
.page-item.active .page-link { background-color: var(--efit-blue) !important; border-color: var(--efit-blue) !important; }
.list-group-item.active { background-color: var(--efit-blue); border-color: var(--efit-blue); }

/* ============================================================================
   TABS / NAV  (rebrand teal accent)
   ============================================================================ */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover { color: var(--efit-blue) !important; }
.tabs-bordered li a.active { border-bottom: 2px solid var(--efit-blue) !important; }
.nav-pills .nav-link.active { background-color: var(--efit-blue); }
.nav-second-level li.active > a { color: var(--efit-blue) !important; }
.dropdown-item:active, .dropdown-item.active { background-color: var(--efit-blue); }

/* ============================================================================
   CHROME: left sidebar + topbar (rebrand teal accent -> brand blue)
   ============================================================================ */
#sidebar-menu > ul > li > a.active,
#sidebar-menu > ul > li > a:hover,
#sidebar-menu > ul > li.active > a {
    color: var(--efit-blue) !important;
}
#sidebar-menu > ul > li > a.active {
    box-shadow: inset 3px 0 0 var(--efit-blue);
    background: rgba(0, 75, 181, 0.05);
}
.logo span span { color: var(--efit-blue) !important; }

/* ============================================================================
   MODALS
   ============================================================================ */
.modal-content { border: 0; border-radius: var(--efit-r-lg); box-shadow: 0 8px 40px rgba(15, 23, 42, 0.18); }
.modal-header.bg-primary { background: var(--efit-grad) !important; }

/* ============================================================================
   REDUCED MOTION (AAA)
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .btn, .card, .progress-bar { transition: none !important; }
}