/* ============================================================
   BOV LMS — Design System
   WCAG 2.2 AA Compliant | Bootstrap 5.3 Extended
   ============================================================ */

/* ─── CSS Custom Properties ─────────────────────────────────── */
:root {
  /* Brand Colors */
  --bov-primary:        #1e40af;  /* Blue 800 — contrast 7.2:1 on white */
  --bov-primary-hover:  #1d3a9e;
  --bov-primary-light:  #dbeafe;
  --bov-secondary:      #0f766e;  /* Teal 700 */
  --bov-accent:         #7c3aed;  /* Violet 700 */
  --bov-success:        #15803d;  /* Green 700 — contrast 5.1:1 */
  --bov-warning:        #b45309;  /* Amber 700 — contrast 5.8:1 */
  --bov-danger:         #b91c1c;  /* Red 700 — contrast 6.1:1 */
  --bov-info:           #0369a1;  /* Sky 700 */

  /* Neutral Palette */
  --bov-gray-50:        #f9fafb;
  --bov-gray-100:       #f3f4f6;
  --bov-gray-200:       #e5e7eb;
  --bov-gray-300:       #d1d5db;
  --bov-gray-400:       #9ca3af;
  --bov-gray-500:       #6b7280;
  --bov-gray-600:       #4b5563;
  --bov-gray-700:       #374151;
  --bov-gray-800:       #1f2937;
  --bov-gray-900:       #111827;

  /* Semantic Tokens — Light Mode */
  --color-bg:           #ffffff;
  --color-bg-secondary: var(--bov-gray-50);
  --color-bg-card:      #ffffff;
  --color-surface:      var(--bov-gray-100);
  --color-border:       var(--bov-gray-200);
  --color-text:         var(--bov-gray-900);
  --color-text-muted:   var(--bov-gray-500);
  --color-text-inverse: #ffffff;
  --color-link:         var(--bov-primary);
  --color-link-hover:   var(--bov-primary-hover);
  --color-focus-ring:   var(--bov-primary);

  /* Typography */
  --font-sans:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-dyslexia:'OpenDyslexic', 'Comic Sans MS', cursive;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl:1.5rem;
  --font-size-3xl:1.875rem;
  --line-height:  1.6;

  /* Spacing */
  --radius-sm:    0.375rem;
  --radius-md:    0.5rem;
  --radius-lg:    0.75rem;
  --radius-xl:    1rem;
  --radius-2xl:   1.5rem;

  /* Shadows */
  --shadow-sm:  0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.05);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,.1);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   350ms ease;

  /* Sidebar */
  --sidebar-width:      260px;
  --sidebar-collapsed:  72px;

  /* Auth Pages */
  --auth-max-width:     440px;
}

/* ─── Dark Mode ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg:           #0f172a;
  --color-bg-secondary: #1e293b;
  --color-bg-card:      #1e293b;
  --color-surface:      #334155;
  --color-border:       #334155;
  --color-text:         #f1f5f9;
  --color-text-muted:   #94a3b8;
  --color-text-inverse: #0f172a;
  --color-link:         #93c5fd;
  --color-link-hover:   #bfdbfe;
}

/* ─── High Contrast Mode ────────────────────────────────────── */
[data-high-contrast="true"] {
  --color-text:       #000000;
  --color-bg:         #ffffff;
  --color-border:     #000000;
  --bov-primary:      #00008b;
  --bov-danger:       #8b0000;
  --bov-success:      #006400;
  --color-focus-ring: #000000;
}
[data-high-contrast="true"][data-theme="dark"] {
  --color-text:  #ffffff;
  --color-bg:    #000000;
  --color-border:#ffffff;
}

/* ─── Dyslexia Font ─────────────────────────────────────────── */
[data-dyslexia-font="true"] {
  --font-sans: var(--font-dyslexia);
}

/* ─── Font Scale ────────────────────────────────────────────── */
[data-font-size="large"]   { font-size: 112.5%; }
[data-font-size="x-large"] { font-size: 125%; }
[data-font-size="small"]   { font-size: 87.5%; }

/* ─── Reduced Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce),
       ([data-reduce-motion="true"]) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Base Styles ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family:      var(--font-sans);
  font-size:        var(--font-size-md);
  line-height:      var(--line-height);
  color:            var(--color-text);
  background-color: var(--color-bg);
  margin:           0;
  padding:          0;
  transition:       background-color var(--transition-normal),
                    color var(--transition-normal);
}

/* ─── Skip Navigation (WCAG 2.4.1) ─────────────────────────── */
.skip-link {
  position:   absolute;
  top:        -100%;
  left:       1rem;
  z-index:    9999;
  padding:    .75rem 1.5rem;
  background: var(--bov-primary);
  color:      #fff;
  font-weight:700;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none;
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ─── Focus Indicators (WCAG 2.4.11) ───────────────────────── */
:focus-visible {
  outline:        3px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius:  var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ─── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight:   700;
  line-height:   1.3;
  color:         var(--color-text);
  margin-top:    0;
}

a {
  color:           var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--color-link-hover); }

/* ─── Auth Body & Page Wrapper ──────────────────────────────── */
.auth-body {
  background: var(--color-bg-secondary);
  min-height: 100vh;
}
[data-theme="dark"] .auth-body {
  background: #0a0f1e;
}

/* Mobile top bar — banner landmark */
.auth-topbar {
  position:    fixed;
  top:         0; left: 0; right: 0;
  height:      56px;
  background:  var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
  display:     flex;
  align-items: center;
  padding:     0 1.25rem;
  z-index:     200;
  box-shadow:  var(--shadow-sm);
}
.auth-brand-link {
  text-decoration: none;
  font-size:       1.35rem;
  font-weight:     900;
  letter-spacing:  -.025em;
}

/* Brand name colours — shared across layouts */
.brand-b   { color: var(--bov-primary); }
.brand-lms { color: var(--color-text-muted); font-weight: 500; }

.auth-page-wrapper {
  min-height:      100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         2rem 1rem;
}
@media (max-width: 991px) {
  .auth-page-wrapper { padding-top: calc(56px + 1.5rem); align-items: flex-start; }
}

/* ─── Unified Split Card ─────────────────────────────────────── */
/*
  Both panels share the same card background — no colour clash.
  Left: brand accent used only for icons and accents (not full bleed).
  Right: the form on the identical background.
*/
.auth-split-card {
  display:       flex;
  width:         100%;
  max-width:     920px;
  background:    var(--color-bg-card);
  border-radius: var(--radius-2xl);
  box-shadow:    var(--shadow-xl);
  overflow:      hidden;
  border:        1px solid var(--color-border);
}

/* ─── Left Info Panel ───────────────────────────────────────── */
.auth-info-panel {
  flex:            0 0 42%;
  background:      var(--color-bg-secondary);
  padding:         3rem 2.5rem;
  display:         flex;
  flex-direction:  column;
  gap:             0;
  position:        relative;
  overflow:        hidden;
  border-right:    1px solid var(--color-border);
}
[data-theme="dark"] .auth-info-panel {
  background: #111827;
}

/* Top accent stripe */
.auth-info-panel::before {
  content:    '';
  position:   absolute;
  top:        0; left: 0; right: 0;
  height:     4px;
  background: linear-gradient(90deg, var(--bov-primary), var(--bov-accent));
}

/* h1 greeting above the brand mark on the left info panel */
.auth-panel-greeting {
  font-size:     1.75rem;
  font-weight:   800;
  color:         var(--color-text);
  line-height:   1.2;
  margin-bottom: .75rem;
  letter-spacing: -.02em;
}

.auth-brand {
  display:     flex;
  align-items: center;
  gap:         .625rem;
  margin-bottom: 1.25rem;
}
.auth-brand-icon {
  font-size:   2rem;
  line-height: 1;
}
.auth-brand-name {
  font-size:   1.625rem;
  font-weight: 900;
  letter-spacing: -.03em;
}

.auth-tagline {
  font-size:     .9375rem;
  color:         var(--color-text-muted);
  line-height:   1.6;
  margin-bottom: 2rem;
}

/* Features list */
.auth-features-list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        1rem;
}
.auth-feature-item {
  display:     flex;
  align-items: flex-start;
  gap:         .875rem;
  font-size:   .9rem;
  color:       var(--color-text);
  line-height: 1.5;
}
.auth-feature-icon {
  width:           2.25rem;
  height:          2.25rem;
  border-radius:   var(--radius-md);
  background:      var(--bov-primary-light);
  color:           var(--bov-primary);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1rem;
  flex-shrink:     0;
  border:          1px solid rgba(30,64,175,.15);
}
[data-theme="dark"] .auth-feature-icon {
  background: rgba(30,64,175,.2);
  border-color: rgba(30,64,175,.3);
  color: #93c5fd;
}
[data-high-contrast="true"] .auth-feature-icon {
  background: #000080;
  color: #fff;
  border-color: #fff;
}

/* Bottom decorative accent */
.auth-info-accent {
  margin-top:    auto;
  padding-top:   2rem;
  height:        3px;
  border-radius: 999px;
  background:    linear-gradient(90deg, var(--bov-primary), var(--bov-secondary), var(--bov-accent));
  opacity:       .3;
}

/* Vertical divider between panels */
.auth-divider-vertical {
  width:      1px;
  background: var(--color-border);
  flex-shrink:0;
}

/* ─── Right Form Panel ──────────────────────────────────────── */
.auth-form-panel {
  flex:    1;
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ─── Mobile: stack vertically ──────────────────────────────── */
@media (max-width: 767px) {
  .auth-split-card   { flex-direction: column; border-radius: var(--radius-xl); }
  .auth-info-panel   { flex: none; padding: 2rem 1.5rem; border-right: none; border-bottom: 1px solid var(--color-border); }
  .auth-divider-vertical { display: none; }
  .auth-form-panel   { padding: 2rem 1.5rem; }
  .auth-features-list { flex-direction: row; flex-wrap: wrap; gap: .625rem; }
  .auth-feature-item { flex: 1 1 45%; font-size: .8rem; }
  .auth-feature-icon { width: 1.75rem; height: 1.75rem; font-size: .875rem; }
  .auth-info-accent  { display: none; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .auth-split-card { max-width: 700px; }
  .auth-info-panel { flex: 0 0 40%; padding: 2.5rem 2rem; }
  .auth-form-panel { padding: 2.5rem 2rem; }
}

.auth-title {
  font-size:     1.625rem;
  font-weight:   700;
  color:         var(--color-text);
  margin-bottom: .25rem;
}
.auth-subtitle {
  font-size:   .9375rem;
  color:       var(--color-text-muted);
  margin-bottom: 1.75rem;
}

/* ─── Form Controls (WCAG AA) ───────────────────────────────── */
.form-label {
  font-weight:   600;
  font-size:     .9375rem;
  color:         var(--color-text);
  margin-bottom: .375rem;
  display:       block;
}
.form-label .required {
  color:        var(--bov-danger);
  margin-left:  .25rem;
}

.form-control, .form-select {
  background-color: var(--color-bg);
  border:         2px solid var(--color-border);
  border-radius:  var(--radius-md);
  color:          var(--color-text);
  font-size:      var(--font-size-md);
  padding:        .625rem .875rem;
  width:          100%;
  transition:     border-color var(--transition-fast),
                  box-shadow var(--transition-fast);
  min-height:     2.75rem; /* Large touch target */
}
.form-control:focus, .form-select:focus {
  border-color: var(--bov-primary);
  box-shadow:   0 0 0 3px rgba(30,64,175,.25);
  outline:      none;
}
.form-control.is-invalid, .form-select.is-invalid {
  border-color: var(--bov-danger);
}
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(185,28,28,.2);
}
.invalid-feedback {
  color:     var(--bov-danger);
  font-size: var(--font-size-sm);
  display:   flex;
  align-items: center;
  gap:       .25rem;
  margin-top:.375rem;
}

/* Password input wrapper */
.input-password-wrapper {
  position: relative;
}
.input-password-wrapper .form-control {
  padding-right: 3rem;
}
.btn-password-toggle {
  position:   absolute;
  right:      .75rem;
  top:        50%;
  transform:  translateY(-50%);
  background: none;
  border:     none;
  color:      var(--color-text-muted);
  cursor:     pointer;
  padding:    .25rem;
  display:    flex;
  align-items: center;
  border-radius: var(--radius-sm);
  min-width:  44px;  /* WCAG 2.5.5 touch target */
  min-height: 44px;
  justify-content: center;
}
.btn-password-toggle:hover { color: var(--color-text); }

/* ─── Buttons ───────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             .5rem;
  font-weight:     600;
  border-radius:   var(--radius-md);
  padding:         .625rem 1.25rem;
  font-size:       var(--font-size-md);
  cursor:          pointer;
  text-decoration: none;
  border:          2px solid transparent;
  transition:      background-color var(--transition-fast),
                   border-color var(--transition-fast),
                   color var(--transition-fast),
                   box-shadow var(--transition-fast);
  min-height:      44px; /* WCAG 2.5.5 */
  min-width:       44px;
  white-space:     nowrap;
}
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .6;
  cursor:  not-allowed;
  pointer-events: none;
}
.btn-primary {
  background: var(--bov-primary);
  color:      #fff;
  border-color: var(--bov-primary);
}
.btn-primary:hover {
  background:   var(--bov-primary-hover);
  border-color: var(--bov-primary-hover);
  color:        #fff;
}
.btn-outline-primary {
  background:   transparent;
  color:        var(--bov-primary);
  border-color: var(--bov-primary);
}
.btn-outline-primary:hover {
  background: var(--bov-primary-light);
}
.btn-lg {
  padding:   .75rem 1.75rem;
  font-size: var(--font-size-lg);
}
.btn-full { width: 100%; }

/* ─── Alerts ────────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius-md);
  padding:       .875rem 1.125rem;
  display:       flex;
  align-items:   flex-start;
  gap:           .625rem;
  font-size:     .9375rem;
  border:        2px solid transparent;
}
.alert-success {
  background:   #dcfce7;
  border-color: #16a34a;
  color:        #14532d;
}
.alert-danger {
  background:   #fee2e2;
  border-color: var(--bov-danger);
  color:        #7f1d1d;
}
.alert-warning {
  background:   #fef9c3;
  border-color: var(--bov-warning);
  color:        #713f12;
}
.alert-info {
  background:   #dbeafe;
  border-color: var(--bov-info);
  color:        #1e3a8a;
}

/* ─── Form Check (Checkbox / Radio) ─────────────────────────── */
.form-check {
  display:     flex;
  align-items: center;
  gap:         .625rem;
  cursor:      pointer;
}
.form-check-input {
  width:         1.25rem;
  height:        1.25rem;
  cursor:        pointer;
  border:        2px solid var(--color-border);
  border-radius: var(--radius-sm);
  flex-shrink:   0;
  accent-color:  var(--bov-primary);
}
.form-check-label {
  font-size: .9375rem;
  cursor:    pointer;
  line-height: 1.4;
}

/* ─── Divider ───────────────────────────────────────────────── */
.auth-divider {
  display:         flex;
  align-items:     center;
  gap:             1rem;
  color:           var(--color-text-muted);
  font-size:       var(--font-size-sm);
  margin:          1.25rem 0;
}
.auth-divider::before,
.auth-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--color-border);
}

/* ─── Password Strength ─────────────────────────────────────── */
.password-strength {
  margin-top: .5rem;
}
.strength-bar {
  height:        4px;
  border-radius: 2px;
  background:    var(--color-border);
  overflow:      hidden;
}
.strength-fill {
  height:     100%;
  border-radius: 2px;
  transition: width var(--transition-normal), background var(--transition-normal);
  width:      0;
}
.strength-fill.weak   { width: 25%; background: var(--bov-danger); }
.strength-fill.fair   { width: 50%; background: var(--bov-warning); }
.strength-fill.good   { width: 75%; background: var(--bov-info); }
.strength-fill.strong { width: 100%; background: var(--bov-success); }

.strength-label {
  font-size:   var(--font-size-xs);
  color:       var(--color-text-muted);
  margin-top:  .25rem;
}

/* ─── Disability Badge ──────────────────────────────────────── */
.disability-info-box {
  background:    var(--bov-primary-light);
  border:        2px solid var(--bov-primary);
  border-radius: var(--radius-md);
  padding:       .875rem 1rem;
  font-size:     .9rem;
  color:         #1e3a8a;
  margin-top:    .75rem;
  display:       none;
}
.disability-info-box.visible { display: block; }

/* ─── Loading Spinner ───────────────────────────────────────── */
.btn-loading .spinner-border {
  width:  1rem;
  height: 1rem;
  border-width: 2px;
}

/* ─── Accessibility Toolbar ─────────────────────────────────── */
.a11y-toolbar {
  position:    fixed;
  bottom:      1.5rem;
  right:       1.5rem;
  z-index:     9000;
  display:     flex;
  flex-direction: column;
  gap:         .5rem;
  align-items: flex-end;
}
.a11y-toggle-btn {
  width:         3rem;
  height:        3rem;
  border-radius: 50%;
  background:    var(--bov-primary);
  color:         #fff;
  border:        none;
  cursor:        pointer;
  box-shadow:    var(--shadow-lg);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.25rem;
  transition:    background var(--transition-fast), transform var(--transition-fast);
}
.a11y-toggle-btn:hover  { background: var(--bov-primary-hover); }
.a11y-toggle-btn:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}
.a11y-panel {
  background:    var(--color-bg-card);
  border:        2px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow:    var(--shadow-xl);
  padding:       1rem;
  width:         220px;
  display:       none;
}
.a11y-panel.open { display: block; }
.a11y-panel h3 {
  font-size:     .875rem;
  font-weight:   700;
  color:         var(--color-text);
  margin-bottom: .75rem;
  padding-bottom:.5rem;
  border-bottom: 1px solid var(--color-border);
}
.a11y-btn {
  display:         flex;
  align-items:     center;
  gap:             .5rem;
  width:           100%;
  padding:         .5rem .75rem;
  background:      var(--color-surface);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-sm);
  font-size:       .875rem;
  color:           var(--color-text);
  cursor:          pointer;
  margin-bottom:   .375rem;
  min-height:      44px;
  text-align:      left;
  transition:      background var(--transition-fast);
}
.a11y-btn:hover { background: var(--color-border); }
.a11y-btn.active {
  background:   var(--bov-primary-light);
  border-color: var(--bov-primary);
  color:        var(--bov-primary);
  font-weight:  600;
}

/* ─── Utility Classes ───────────────────────────────────────── */
.text-muted { color: var(--color-text-muted) !important; }
.text-primary { color: var(--bov-primary) !important; }
.bg-card { background: var(--color-bg-card) !important; }
.border-color { border-color: var(--color-border) !important; }
.visually-hidden {
  position: absolute;
  width:    1px;
  height:   1px;
  padding:  0;
  margin:   -1px;
  overflow: hidden;
  clip:     rect(0,0,0,0);
  white-space: nowrap;
  border:   0;
}