/* ============================================================
   SimpliTrain LMS — Base CSS
   common/css/base.css
   Scope: CSS custom properties, reset, typography, layout,
          dark mode, RTL, responsive, accessibility utilities.
   Naming: BEM (block__element--modifier)
   ============================================================ */

/* ── 1. DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Brand */
  --color-primary:       #0069ba;  /* WCAG AA: 5.61:1 on white, 4.75:1 on surface-bg */
  --color-primary-dark:  #005fa3;
  --color-primary-light: #e0f0ff;
  --color-primary-rgb:   0, 105, 186;

  /* Semantic — all pass WCAG AA (≥4.5:1) as text on white AND as bg for white text */
  --color-success:       #198754;  /* 4.54:1 on white */
  --color-success-light: #d1f7e4;
  --color-warning:       #b45309;  /* 5.03:1 on white — amber; use --color-warning-vivid for yellow fills */
  --color-warning-vivid: #ffc700;  /* decorative fills only — not for text */
  --color-warning-light: #fef3c7;
  --color-danger:        #b91c3c;  /* 6.37:1 on white */
  --color-danger-light:  #ffe4e9;
  --color-info:          #7239ea;
  --color-info-light:    #f3e8ff;

  /* Surface — Light mode */
  --surface-bg:          #e8ecf4;
  --surface-card:        #ffffff;
  --surface-border:      #c8cde0;
  --surface-hover:       #dde2ef;

  /* Text — Light mode */
  --text-primary:        #181c32;  /* 16.79:1 on white — PASS */
  --text-secondary:      #3f4254;  /*  9.91:1 on white — PASS */
  --text-muted:          #626879;  /*  5.56:1 on white, 4.70:1 on surface-bg — PASS */
  --text-gray:           #565b72;  /*  6.69:1 on white, 5.66:1 on surface-bg — PASS */
  --text-inverse:        #ffffff;

  /* Elevation — layered compound shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.04), 0 3px 10px rgba(76,87,125,.10);
  --shadow-md:   0 2px 4px rgba(0,0,0,.04), 0 8px 28px rgba(76,87,125,.14);
  --shadow-lg:   0 4px 8px rgba(0,0,0,.05), 0 20px 56px rgba(76,87,125,.20);
  --shadow-xl:   0 8px 16px rgba(0,0,0,.06), 0 32px 80px rgba(76,87,125,.24);

  /* Shape */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 9999px;

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Typography */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                Roboto, Oxygen, Ubuntu, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code',
                Consolas, 'Courier New', monospace;
  --text-xs:    13px;
  --text-sm:    14px;
  --text-base:  15px;
  --text-md:    16px;
  --text-lg:    18px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   28px;
  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --lh-tight:   1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;

  /* Layout */
  --nav-height:     64px;
  --content-max-w:  1200px;
  --sidebar-w:      240px;
  --content-pad:    32px;
  --content-pad-sm: 16px;
  /* Header + main: same horizontal inset as inner edge of max-width + padded column */
  --layout-content-inline: max(var(--content-pad), calc((100vw - var(--content-max-w)) / 2 + var(--content-pad)));

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

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(var(--color-primary-rgb), .4);
}

/* ── 2. DARK MODE TOKENS ────────────────────────────────────── */
/* All ratios tested on --surface-card #1e1e2d (L=0.014)       */
[data-theme="dark"] {
  --surface-bg:    #151521;
  --surface-card:  #1e1e2d;
  --surface-border:#2b2b40;
  --surface-hover: #23233a;

  /* Text — WCAG AA on surface-card */
  --text-primary:   #cdcdde;  /* L=0.622 → 10.5:1  ✓ */
  --text-secondary: #b8b8cc;  /* L=0.490 →  8.4:1  ✓ */
  --text-muted:     #9899b0;  /* L=0.326 →  5.9:1  ✓  was #565674 → 2.3:1 FAIL */
  --text-gray:      #8487a0;  /* L=0.245 →  4.6:1  ✓  was #7e8299 → 4.3:1 FAIL */

  /* Primary — lighter for dark surfaces */
  --color-primary:       #3a95e0;  /* L=0.278 → 5.1:1 on card ✓  was #0069ba → 2.9:1 FAIL */
  --color-primary-dark:  #2d88d4;
  --color-primary-light: rgba(58,149,224,.18);
  --color-primary-rgb:   58, 149, 224;

  /* Semantic — all lightened for dark mode legibility */
  --color-success:       #4ade80;  /* L=0.553 → 9.4:1  ✓  was #198754 → 3.6:1 FAIL */
  --color-success-light: rgba(74,222,128,.12);

  --color-warning:       #fbbf24;  /* L=0.578 → 9.8:1  ✓  was #b45309 → 2.9:1 FAIL */
  --color-warning-vivid: #fbbf24;
  --color-warning-light: rgba(251,191,36,.12);

  --color-danger:        #f87171;  /* L=0.330 → 5.9:1  ✓  was #b91c3c → 2.4:1 FAIL */
  --color-danger-light:  rgba(248,113,113,.12);

  --color-info:          #a78bfa;  /* L=0.336 → 6.0:1  ✓  was #7239ea → 2.7:1 FAIL */
  --color-info-light:    rgba(167,139,250,.12);

  --shadow-sm: 0 1px 4px rgba(0,0,0,.2);
  --shadow-md: 0 4px 24px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.4);
}

/* ── 3. OS PREFERENCE: COLOR SCHEME ────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-bg:    #151521;
    --surface-card:  #1e1e2d;
    --surface-border:#2b2b40;
    --surface-hover: #23233a;
    --text-primary:   #cdcdde;
    --text-secondary: #b8b8cc;
    --text-muted:     #9899b0;
    --text-gray:      #8487a0;
    --color-primary:       #3a95e0;
    --color-primary-dark:  #2d88d4;
    --color-primary-light: rgba(58,149,224,.18);
    --color-primary-rgb:   58, 149, 224;
    --color-success:       #4ade80;
    --color-success-light: rgba(74,222,128,.12);
    --color-warning:       #fbbf24;
    --color-warning-vivid: #fbbf24;
    --color-warning-light: rgba(251,191,36,.12);
    --color-danger:        #f87171;
    --color-danger-light:  rgba(248,113,113,.12);
    --color-info:          #a78bfa;
    --color-info-light:    rgba(167,139,250,.12);
    --shadow-sm: 0 1px 4px rgba(0,0,0,.2);
    --shadow-md: 0 4px 24px rgba(0,0,0,.3);
    --shadow-lg: 0 8px 40px rgba(0,0,0,.4);
  }
}

/* ── 4. FONT FACE — Self-hosted Inter ───────────────────────── */
/* Place Inter WOFF2 files in /common/fonts/
   Download from: https://fonts.google.com/specimen/Inter
   Required files: Inter-Regular.woff2, Inter-Medium.woff2,
                   Inter-SemiBold.woff2, Inter-Bold.woff2        */
  @font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 400;
    font-display: swap;
    src: local('Inter'), local('Inter Regular'), local('Inter-Regular');
  }
  @font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 500;
    font-display: swap;
    src: local('Inter Medium'), local('Inter-Medium');
  }
  @font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 600;
    font-display: swap;
    src: local('Inter SemiBold'), local('Inter-SemiBold');
  }
  @font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 700;
    font-display: swap;
    src: local('Inter Bold'), local('Inter-Bold');
  }

/* ── 5. CSS RESET ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  line-height: var(--lh-normal);
  color:       var(--text-primary);
  background:  var(--surface-bg);
  min-height:  100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video {
  display: block;
  max-width: 100%;
}
svg {
  display: block;
}

/* ── ICON UTILITIES ──────────────────────────────────────────── */
.icon {
  display: inline-block;
  width:  1em;
  height: 1em;
  fill: currentColor;
  flex-shrink: 0;
  overflow: visible;
  vertical-align: middle;
  /* explicit size always wins over any max-width */
  max-width: none;
  max-height: none;
}
.icon--xs  { width: 12px; height: 12px; }
.icon--sm  { width: 16px; height: 16px; }
.icon--md  { width: 20px; height: 20px; }
.icon--lg  { width: 24px; height: 24px; }
.icon--xl  { width: 32px; height: 32px; }
input, button, textarea, select {
  font: inherit;
}
ul, ol {
  list-style: none;
}
a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
p {
  line-height: var(--lh-relaxed);
}
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

/* ── 6. TYPOGRAPHY UTILITIES ────────────────────────────────── */
.text-xs       { font-size: var(--text-xs); }
.text-sm       { font-size: var(--text-sm); }
.text-base     { font-size: var(--text-base); }
.text-md       { font-size: var(--text-md); }
.text-lg       { font-size: var(--text-lg); }
.text-xl       { font-size: var(--text-xl); }
.text-2xl      { font-size: var(--text-2xl); }
.text-3xl      { font-size: var(--text-3xl); }
.fw-normal     { font-weight: var(--fw-normal); }
.fw-medium     { font-weight: var(--fw-medium); }
.fw-semi       { font-weight: var(--fw-semi); }
.fw-bold       { font-weight: var(--fw-bold); }
.text-primary  { color: var(--text-primary); }
.text-secondary{ color: var(--text-secondary); }
.text-muted    { color: var(--text-muted); }
.text-gray     { color: var(--text-gray); }
.text-brand    { color: var(--color-primary); }
.text-success  { color: var(--color-success); }
.text-warning  { color: var(--color-warning); }
.text-danger   { color: var(--color-danger); }
.text-info     { color: var(--color-info); }
.text-inverse  { color: var(--text-inverse); }
.text-center   { text-align: center; }
.text-right    { text-align: end; }
.text-left     { text-align: start; }
.text-uppercase{ text-transform: uppercase; letter-spacing: .6px; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 7. LAYOUT UTILITIES ────────────────────────────────────── */
.page-container {
  max-width: var(--content-max-w);
  margin: 0 auto;
  padding: var(--content-pad) var(--space-6);
}
.d-flex        { display: flex; }
.d-grid        { display: grid; }
.d-block       { display: block; }
.d-none        { display: none; }
.d-inline-flex { display: inline-flex; }
.flex-1        { flex: 1; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.align-center  { align-items: center; }
.align-start   { align-items: flex-start; }
.align-end     { align-items: flex-end; }
.justify-center{ justify-content: center; }
.justify-between{justify-content: space-between; }
.justify-end   { justify-content: flex-end; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }
.mb-1   { margin-bottom: var(--space-1); }
.mb-2   { margin-bottom: var(--space-2); }
.mb-3   { margin-bottom: var(--space-3); }
.mb-4   { margin-bottom: var(--space-4); }
.mb-5   { margin-bottom: var(--space-5); }
.mb-6   { margin-bottom: var(--space-6); }
.mb-8   { margin-bottom: var(--space-8); }
.mt-4   { margin-top: var(--space-4); }
.mt-6   { margin-top: var(--space-6); }
.p-4    { padding: var(--space-4); }
.p-5    { padding: var(--space-5); }
.p-6    { padding: var(--space-6); }
.w-full { width: 100%; }
.h-full { height: 100%; }
.pos-relative { position: relative; }
.pos-sticky   { position: sticky; }

/* ── 8. ACCESSIBILITY ───────────────────────────────────────── */
/* Skip navigation */
.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: var(--space-1);
  z-index: 9999;
  background: var(--color-primary);
  color: var(--text-inverse);
  padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  text-decoration: none;
  transition: inset-inline-start 0s;
}
.skip-link:focus {
  left: 50%;
  transform: translateX(-50%);
  outline: 3px solid var(--text-inverse);
  outline-offset: 2px;
}
[dir="rtl"] .skip-link:focus { left: auto; right: 50%; transform: translateX(50%); }

/* Focus visible — AA WCAG 2.4.7 */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* Visually hidden — for screen reader text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
/* Not sr-only when focused (skip links) */
.sr-only-focusable:focus { all: unset; }

/* Reduced motion — AA */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 9. BREADCRUMB ──────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
  padding: 0;
  list-style: none;
}
.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.breadcrumb__item + .breadcrumb__item::before {
  content: '/';
  color: var(--text-muted);
  margin-right: var(--space-1);
}
.breadcrumb__link {
  color: var(--color-primary);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.breadcrumb__link:hover { text-decoration: underline; }
.breadcrumb__current {
  color: var(--text-muted);
  font-weight: var(--fw-normal);
}

/* RTL breadcrumb separator */
[dir="rtl"] .breadcrumb__item + .breadcrumb__item::before {
  content: '\\';
  margin-right: 0;
  margin-left: var(--space-1);
}

/* ── 10. RESPONSIVE BREAKPOINTS ─────────────────────────────── */
/* xs  < 576px  — Mobile portrait
   sm  ≥ 576px  — Mobile landscape / small tablet
   md  ≥ 768px  — Tablet (iPad portrait)
   lg  ≥ 992px  — Tablet landscape / small desktop
   xl  ≥ 1200px — Desktop
   xxl ≥ 1400px — Large desktop                                  */

@media (max-width: 575.98px) {
  .page-container { padding: var(--space-4) var(--content-pad-sm); }
  .hide-xs { display: none !important; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .hide-sm { display: none !important; }
}
@media (max-width: 767.98px) {
  .page-container { padding: var(--space-4) var(--space-4); }
  .col-sm-full { flex: 0 0 100%; width: 100%; }
}
@media (max-width: 991.98px) {
  :root {
    --content-pad: 20px;
    --layout-content-inline: var(--content-pad-sm);
  }
  .hide-md { display: none !important; }
  .col-md-full { flex: 0 0 100%; width: 100%; }
}
@media (min-width: 1200px) {
  .hide-xl { display: none !important; }
}

/* ── 11. RTL SUPPORT ────────────────────────────────────────── */
[dir="rtl"] {
  text-align: right;
}
[dir="rtl"] .breadcrumb {
  flex-direction: row-reverse;
}
[dir="rtl"] .d-flex:not(.no-rtl-flip) {
  /* Flex row auto-reverses in RTL — override per component as needed */
}

/* ── 12. PAGE STRUCTURE ─────────────────────────────────────── */
.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.app-layout__main {
  flex: 1;
}

/* ── 13. SKELETON / LOADING STATES ──────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-border) 25%,
    var(--surface-hover)  50%,
    var(--surface-border) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  color: transparent;
  pointer-events: none;
  user-select: none;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--surface-border); }
}
.skeleton--text  { height: 14px; border-radius: var(--radius-pill); }
.skeleton--title { height: 22px; width: 60%; border-radius: var(--radius-pill); }
.skeleton--card  { height: 160px; border-radius: var(--radius-lg); }
.skeleton--avatar{ height: 48px; width: 48px; border-radius: var(--radius-md); }
.skeleton--btn   { height: 36px; width: 100px; border-radius: var(--radius-md); }

/* Loading overlay */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8000;
}
.loading-overlay__spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255,255,255,.3);
  border-top-color: var(--text-inverse);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .loading-overlay__spinner { animation: none; border-top-color: var(--color-primary); }
}

/* ── 14. EMPTY STATES ───────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  gap: var(--space-4);
}
.empty-state__icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-xl);
  background: var(--surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 32px;
}
.empty-state__title {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.empty-state__desc {
  font-size: var(--text-base);
  color: var(--text-muted);
  max-width: 360px;
  line-height: var(--lh-relaxed);
}

/* ── 15. SESSION TIMEOUT BANNER ─────────────────────────────── */
.session-warning {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 7000;
  background: var(--color-warning-vivid); /* vivid yellow; #1a1200 text = 13:1 */
  color: #1a1200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  box-shadow: var(--shadow-md);
  transform: translateY(-100%);
  transition: transform var(--transition-normal);
}
.session-warning--visible {
  transform: translateY(0);
}
.session-warning__actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* ── 16. NOSCRIPT ───────────────────────────────────────────── */
.noscript-warning {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: var(--color-danger);
  color: var(--text-inverse);
  text-align: center;
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-md);
  font-weight: var(--fw-semi);
  line-height: var(--lh-normal);
}
.noscript-warning a {
  color: var(--text-inverse);
  text-decoration: underline;
  margin-left: var(--space-3);
}

/* ── 17. PRINT ──────────────────────────────────────────────── */
@media print {
  *                  { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .app-header,
  .app-nav,
  .no-print          { display: none !important; }
  body               { background: #fff; color: #000; font-size: 11pt; }
  .page-container    { max-width: 100%; padding: 0; }
  a                  { color: #000; text-decoration: none; }
  @page              { margin: 15mm; size: A4; }
}