/* ═══════════════════════════════════════════════════════════════════════════
   LearnKusto — Premium Design System
   Loaded AFTER Bootstrap 5.3 to override defaults.
   Dark-mode-first. Light mode via [data-bs-theme="light"].
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
/* Inter and JetBrains Mono, vendored latin subsets (static/vendor/fonts).
   Previously a Google Fonts @import, which died silently on venue networks. */
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../vendor/fonts/Inter-300-latin.260c81a4759b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/Inter-400-latin.260c81a4759b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/fonts/Inter-500-latin.260c81a4759b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/fonts/Inter-600-latin.260c81a4759b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../vendor/fonts/Inter-700-latin.260c81a4759b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/JetBrainsMono-400-latin.b636a65da4f0.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/fonts/JetBrainsMono-500-latin.b636a65da4f0.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Design Tokens ─────────────────────────────────────────────────────── */
:root {
  /* surfaces */
  --lk-bg-base:        #0a0f1a;
  --lk-bg-card:        rgba(17, 24, 39, 0.85);
  --lk-bg-elevated:    rgba(30, 41, 59, 0.7);
  --lk-bg-sidebar:     #070b14;
  --lk-bg-input:       rgba(15, 23, 42, 0.8);

  /* accent gradient */
  --lk-accent-1:       #06b6d4;   /* cyan-500  */
  --lk-accent-2:       #3b82f6;   /* blue-500  */
  --lk-accent-gradient: linear-gradient(135deg, var(--lk-accent-1), var(--lk-accent-2));

  /* status */
  --lk-success:        #10b981;
  --lk-warning:        #f59e0b;
  --lk-danger:         #ef4444;
  --lk-info:           #06b6d4;

  /* text */
  --lk-text-primary:   #f1f5f9;
  --lk-text-secondary: #94a3b8;
  /* A11Y-101 (WCAG 1.4.3): was #64748b, which is 3.8:1 on the card surface and
     4.0:1 on the base. This value clears 4.5:1 on base, card and elevated. */
  --lk-text-muted:     #7d8ba1;

  /* Text-on-surface variants of the accent and status colours. The solid
     brand values above are tuned for fills and borders, where 4.5:1 does not
     apply. These are the values to use when the colour carries words. */
  --lk-accent-text:    #06b6d4;
  --lk-success-text:   #10b981;
  --lk-warning-text:   #f59e0b;
  --lk-danger-text:    #f87171;
  --lk-info-text:      #06b6d4;

  /* borders & shadows */
  --lk-border:         rgba(148, 163, 184, 0.1);
  --lk-border-hover:   rgba(6, 182, 212, 0.25);
  --lk-shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.3);
  --lk-shadow-md:      0 4px 14px rgba(0, 0, 0, 0.35);
  --lk-shadow-lg:      0 8px 30px rgba(0, 0, 0, 0.4);
  --lk-shadow-glow:    0 0 20px rgba(6, 182, 212, 0.08);
  --lk-shadow-glow-md: 0 0 30px rgba(6, 182, 212, 0.12);

  /* radii */
  --lk-radius-sm:  6px;
  --lk-radius-md:  10px;
  --lk-radius-lg:  14px;
  --lk-radius-xl:  20px;

  /* transitions */
  --lk-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --lk-duration:   0.3s;

  /* typography */
  --lk-font-body:  'Inter', system-ui, -apple-system, sans-serif;
  --lk-font-mono:  'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
}

/* Light-mode overrides */
[data-bs-theme="light"] {
  --lk-bg-base:        #f8fafc;
  --lk-bg-card:        rgba(255, 255, 255, 0.9);
  --lk-bg-elevated:    rgba(241, 245, 249, 0.9);
  --lk-bg-sidebar:     #ffffff;
  --lk-bg-input:       rgba(241, 245, 249, 0.8);
  --lk-text-primary:   #0f172a;
  --lk-text-secondary: #334155;
  --lk-text-muted:     #64748b;
  /* A11Y-101 (WCAG 1.4.3): the dark-mode accent and status colours drop to
     2.2:1 - 3.8:1 on a white card, so light mode needs darker text variants. */
  --lk-accent-text:    #0e7490;
  --lk-success-text:   #047857;
  --lk-warning-text:   #a16207;
  --lk-danger-text:    #b91c1c;
  --lk-info-text:      #0e7490;
  --lk-border:         rgba(15, 23, 42, 0.08);
  --lk-border-hover:   rgba(59, 130, 246, 0.25);
  --lk-shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.06);
  --lk-shadow-md:      0 4px 14px rgba(0, 0, 0, 0.08);
  --lk-shadow-lg:      0 8px 30px rgba(0, 0, 0, 0.1);
  --lk-shadow-glow:    0 0 20px rgba(59, 130, 246, 0.06);
  --lk-shadow-glow-md: 0 0 30px rgba(59, 130, 246, 0.1);
}


/* ── Base Reset & Typography ───────────────────────────────────────────── */
body {
  font-family: var(--lk-font-body) !important;
  background: var(--lk-bg-base) !important;
  color: var(--lk-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--lk-text-primary);
}

h1, .h1 { font-weight: 700; }
h2, .h2 { font-weight: 600; }

small, .small, .text-muted { color: var(--lk-text-muted) !important; }
.text-body-secondary { color: var(--lk-text-secondary) !important; }
.text-body-tertiary  { color: var(--lk-text-muted) !important; }
.text-secondary      { color: var(--lk-text-secondary) !important; }
.text-primary:not(.badge):not(.alert):not(.bg-primary) { color: var(--lk-accent-text) !important; }

/* A11Y-101 (WCAG 1.4.3). Bootstrap's status text colours are fixed hex values
   tuned for a white page: on the dark surfaces they land at 3.8:1 - 4.0:1, and
   the brand greens and ambers fall to 2.2:1 - 2.5:1 in light mode. Route the
   text-only utilities through the theme-aware text tokens instead. Badges,
   alerts and filled backgrounds are excluded: they set their own ground, so the
   pairing is already controlled and must not be repainted here. */
.text-success:not(.badge):not(.alert):not([class*='bg-']) { color: var(--lk-success-text) !important; }
.text-danger:not(.badge):not(.alert):not([class*='bg-'])  { color: var(--lk-danger-text) !important; }
.text-warning:not(.badge):not(.alert):not([class*='bg-']) { color: var(--lk-warning-text) !important; }
.text-info:not(.badge):not(.alert):not([class*='bg-'])    { color: var(--lk-info-text) !important; }

code, pre, .flag-input {
  font-family: var(--lk-font-mono) !important;
}


/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--lk-bg-card) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--lk-border) !important;
  border-radius: var(--lk-radius-lg) !important;
  box-shadow: var(--lk-shadow-sm);
  transition: box-shadow var(--lk-duration) var(--lk-ease),
              border-color var(--lk-duration) var(--lk-ease),
              transform var(--lk-duration) var(--lk-ease);
}

.card:hover {
  box-shadow: var(--lk-shadow-md), var(--lk-shadow-glow);
  border-color: var(--lk-border-hover) !important;
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--lk-border) !important;
  padding: 1.1rem 1.5rem;
}

.card-body { padding: 1.5rem; }

.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--lk-border) !important;
  padding: 1rem 1.5rem;
}

/* Lift-on-hover cards (opt-in) */
.card-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--lk-shadow-lg), var(--lk-shadow-glow-md);
}

/* Suppress hover glow on cards that wrap tables or static content */
.card:has(.table):hover,
.card:has(.card-body.p-0):hover {
  box-shadow: var(--lk-shadow-sm);
  border-color: var(--lk-border) !important;
  transform: none;
}


/* ── KPI / Stat Cards ──────────────────────────────────────────────────── */
.kpi-card {
  position: relative;
  overflow: hidden;
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--lk-accent-gradient);
  border-radius: var(--lk-radius-lg) var(--lk-radius-lg) 0 0;
}

.kpi-value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: var(--lk-accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.kpi-label {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lk-text-muted);
  margin-top: 0.25rem;
}

.kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--lk-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: var(--lk-bg-elevated);
  color: var(--lk-accent-1);
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.1);
}

.kpi-icon--success { color: var(--lk-success); box-shadow: 0 0 15px rgba(16, 185, 129, 0.1); }
.kpi-icon--warning { color: var(--lk-warning); box-shadow: 0 0 15px rgba(245, 158, 11, 0.1); }
.kpi-icon--danger  { color: var(--lk-danger);  box-shadow: 0 0 15px rgba(239, 68, 68, 0.1); }
.kpi-icon--info    { color: var(--lk-info);    box-shadow: 0 0 15px rgba(6, 182, 212, 0.1); }


/* A11Y-102: heading level expresses structure, not size. A card title is an
   h2 (or h3 inside a section) and carries Bootstrap's .h4, .h5 or .h6 utility
   for the size it had when the level was chosen for its type scale, so the
   document outline has no gaps and nothing moves on screen. New cards follow
   the same rule: pick the level from the outline, the size from the class. */

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  font-weight: 500;
  border-radius: var(--lk-radius-sm) !important;
  padding: 0.55rem 1.25rem;
  transition: all var(--lk-duration) var(--lk-ease);
  letter-spacing: 0.01em;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }

.btn-primary {
  background: var(--lk-accent-gradient) !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(6, 182, 212, 0.2);
}
.btn-primary:hover {
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.35) !important;
}

.btn-outline-primary {
  border-color: var(--lk-accent-1) !important;
  color: var(--lk-accent-1) !important;
}
.btn-outline-primary:hover {
  background: rgba(6, 182, 212, 0.1) !important;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.15);
}

.btn-outline-secondary {
  border-color: var(--lk-border) !important;
}
.btn-outline-secondary:hover {
  background: var(--lk-bg-elevated) !important;
}

/* A11Y-105, WCAG 2.2 SC 2.5.8 target size. A small button keeps its type size
   but never renders under 24 by 24 CSS pixels. The compact scale replaces the
   old btn-sm plus py-0 pairing in dense tables and toolbars: the same 14px
   text with 2px of vertical padding, which measures about 27px tall against
   the 22.6px the py-0 variant rendered at. Padding, not font size, so the
   visual weight of the row is kept. */
.btn-sm {
  min-height: 1.5rem;
  min-width: 1.5rem;
}

.btn-sm.lk-btn-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

/* Pill buttons (CTF filters, tags) */
.btn-pill {
  border-radius: 50px !important;
  padding: 0.4rem 1.1rem;
  font-size: 0.85rem;
}


/* ── Form Controls ─────────────────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--lk-bg-input) !important;
  border: 1px solid var(--lk-border) !important;
  border-radius: var(--lk-radius-sm) !important;
  color: var(--lk-text-primary) !important;
  padding: 0.65rem 1rem;
  transition: border-color var(--lk-duration) var(--lk-ease),
              box-shadow var(--lk-duration) var(--lk-ease);
}

.form-control:focus, .form-select:focus {
  border-color: var(--lk-accent-1) !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15) !important;
}

.form-control::placeholder { color: var(--lk-text-muted) !important; }

.form-label {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--lk-text-secondary);
  margin-bottom: 0.4rem;
}

.form-check-input:checked {
  background-color: var(--lk-accent-1) !important;
  border-color: var(--lk-accent-1) !important;
}

.form-switch .form-check-input {
  transition: background-color var(--lk-duration) var(--lk-ease);
}


/* ── Badges ────────────────────────────────────────────────────────────── */
.badge {
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.35em 0.75em;
  border-radius: 50px;
}

.badge-glow {
  box-shadow: 0 0 10px currentColor;
}

/* Status badges */
.badge-done       { background: var(--lk-success) !important; }
.badge-stuck      { background: var(--lk-danger) !important; }
.badge-exercising { background: var(--lk-accent-2) !important; }
.badge-reading    { background: var(--lk-text-muted) !important; }


/* ── Tables ────────────────────────────────────────────────────────────── */
.table {
  --bs-table-bg: transparent;
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  background: var(--lk-bg-elevated);
  border-bottom: 2px solid var(--lk-border) !important;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lk-text-muted);
  padding: 0.85rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1;
}

.table tbody tr {
  transition: background var(--lk-duration) var(--lk-ease);
}

.table tbody tr:hover {
  background: var(--lk-bg-elevated) !important;
}

.table tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--lk-border) !important;
  vertical-align: middle;
}

.table-highlight {
  background: rgba(6, 182, 212, 0.05) !important;
  border-left: 3px solid var(--lk-accent-1);
}


/* ── List Groups ───────────────────────────────────────────────────────── */
.list-group-item {
  background: var(--lk-bg-card) !important;
  border-color: var(--lk-border) !important;
  color: var(--lk-text-primary);
  transition: background var(--lk-duration) var(--lk-ease);
}

.list-group-item:hover {
  background: var(--lk-bg-elevated) !important;
}


/* ── Alerts / Flash Messages ───────────────────────────────────────────── */
.alert {
  border-radius: var(--lk-radius-md) !important;
  border: none !important;
  border-left: 4px solid !important;
  padding: 1rem 1.25rem;
  backdrop-filter: blur(8px);
  animation: lk-slideDown 0.4s var(--lk-ease);
}

.alert-success { background: rgba(16, 185, 129, 0.1) !important; border-left-color: var(--lk-success) !important; color: var(--lk-success) !important; }
.alert-danger  { background: rgba(239, 68, 68, 0.1) !important; border-left-color: var(--lk-danger) !important; color: var(--lk-danger) !important; }
.alert-warning { background: rgba(245, 158, 11, 0.1) !important; border-left-color: var(--lk-warning) !important; color: var(--lk-warning) !important; }
.alert-info    { background: rgba(6, 182, 212, 0.1) !important; border-left-color: var(--lk-info) !important; color: var(--lk-info) !important; }


/* ── Sidebar ───────────────────────────────────────────────────────────── */
.lk-sidebar {
  background: var(--lk-bg-sidebar) !important;
  border-right: 1px solid var(--lk-border) !important;
  min-height: 100vh;
  width: 260px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
}

.lk-sidebar-brand {
  padding: 1.5rem 1.5rem 1.25rem;
  border-bottom: 1px solid var(--lk-border);
}

.lk-sidebar-brand h5 {
  font-size: 1.15rem;
  font-weight: 700;
  background: var(--lk-accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.lk-sidebar-brand .brand-icon {
  font-size: 1.4rem;
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.4));
}

.lk-sidebar-section {
  padding: 1rem 1rem 0.25rem;
}

.lk-sidebar-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lk-text-muted);
  padding: 0 0.75rem;
  margin-bottom: 0.4rem;
}

.lk-sidebar .nav-link {
  color: var(--lk-text-secondary) !important;
  padding: 0.55rem 0.75rem;
  border-radius: var(--lk-radius-sm);
  font-size: 0.875rem;
  font-weight: 450;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 1px 0;
  position: relative;
  transition: all var(--lk-duration) var(--lk-ease);
}

.lk-sidebar .nav-link i {
  font-size: 1rem;
  width: 1.25rem;
  text-align: center;
  opacity: 0.7;
  transition: opacity var(--lk-duration) var(--lk-ease);
}

.lk-sidebar .nav-link:hover {
  color: var(--lk-text-primary) !important;
  background: var(--lk-bg-elevated);
}

.lk-sidebar .nav-link:hover i { opacity: 1; }

.lk-sidebar .nav-link.active {
  color: var(--lk-text-primary) !important;
  background: rgba(6, 182, 212, 0.1) !important;
  font-weight: 500;
}

.lk-sidebar .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--lk-accent-gradient);
  border-radius: 0 3px 3px 0;
}

.lk-sidebar .nav-link.active i { opacity: 1; color: var(--lk-accent-1); }

.lk-sidebar-footer {
  margin-top: auto;
  padding: 1rem 1rem 1.25rem;
  border-top: 1px solid var(--lk-border);
}

.lk-sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--lk-radius-sm);
  text-decoration: none;
  color: var(--lk-text-primary);
  transition: background var(--lk-duration) var(--lk-ease);
}

.lk-sidebar-user:hover { background: var(--lk-bg-elevated); color: var(--lk-text-primary); }

.lk-sidebar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lk-accent-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  color: #fff;
  flex-shrink: 0;
}

.lk-sidebar-username {
  font-weight: 500;
  font-size: 0.875rem;
}


/* ── Main Content Area ─────────────────────────────────────────────────── */
.lk-main {
  flex-grow: 1;
  padding: 2rem 2.5rem;
  overflow-y: auto;
  max-height: 100vh;
  animation: lk-fadeIn 0.35s var(--lk-ease);
}


/* ── Page Header ───────────────────────────────────────────────────────── */
.lk-page-header {
  margin-bottom: 2rem;
}

/* A11Y-101: the page title is an h1 so every page has a top-level heading.
   h2 stays in the selector for the headers not yet converted, so both render
   identically and the conversion can finish surface by surface. */
.lk-page-header h1,
.lk-page-header h2 {
  font-size: 1.65rem;
  margin-bottom: 0.25rem;
}

.lk-page-header .lk-subtitle {
  color: var(--lk-text-muted);
  font-size: 0.9rem;
}


/* ── Public Page Hero (consistent header for all public pages) ────────── */
.lk-public-hero {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
    var(--lk-bg-base);
  border-bottom: 1px solid var(--lk-border);
}

[data-bs-theme="light"] .lk-public-hero {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(6, 182, 212, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(59, 130, 246, 0.04) 0%, transparent 50%),
    var(--lk-bg-base);
}


/* ── Training Day Timeline / Roadmap ───────────────────────────────────── */
.lk-timeline {
  position: relative;
  padding-left: 2.5rem;
}

.lk-timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--lk-border);
}

.lk-timeline-item {
  position: relative;
  margin-bottom: 1.5rem;
}

.lk-timeline-dot {
  position: absolute;
  left: -2.5rem;
  top: 1.2rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--lk-bg-card);
  border: 2px solid var(--lk-text-muted);
  z-index: 1;
  transition: all var(--lk-duration) var(--lk-ease);
}

.lk-timeline-item--completed .lk-timeline-dot {
  background: var(--lk-success);
  border-color: var(--lk-success);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.lk-timeline-item--current .lk-timeline-dot {
  background: var(--lk-accent-1);
  border-color: var(--lk-accent-1);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.4);
  animation: lk-pulse 2s infinite;
}

.lk-timeline-item--locked .lk-timeline-dot {
  background: var(--lk-bg-base);
  border-style: dashed;
  border-color: var(--lk-text-muted);
}

.lk-timeline-item--locked .card {
  opacity: 0.55;
}


/* ── Progress Ring (SVG) ───────────────────────────────────────────────── */
.lk-progress-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lk-progress-ring svg {
  transform: rotate(-90deg);
}

.lk-progress-ring__track {
  fill: none;
  stroke: var(--lk-border);
  stroke-width: 6;
}

.lk-progress-ring__fill {
  fill: none;
  stroke: url(#lk-gradient);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s var(--lk-ease);
}

.lk-progress-ring__label {
  position: absolute;
  font-size: 1.4rem;
  font-weight: 700;
  background: var(--lk-accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ── Difficulty / Category Strips ──────────────────────────────────────── */
.card-difficulty-easy    { border-top: 3px solid var(--lk-success) !important; }
.card-difficulty-medium  { border-top: 3px solid var(--lk-warning) !important; }
.card-difficulty-hard    { border-top: 3px solid var(--lk-danger) !important; }

.difficulty-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.difficulty-dot--easy   { background: var(--lk-success); box-shadow: 0 0 6px rgba(16, 185, 129, 0.4); }
.difficulty-dot--medium { background: var(--lk-warning); box-shadow: 0 0 6px rgba(245, 158, 11, 0.4); }
.difficulty-dot--hard   { background: var(--lk-danger);  box-shadow: 0 0 6px rgba(239, 68, 68, 0.4); }


/* ── Podium / Leaderboard ──────────────────────────────────────────────── */
.lk-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 0;
}

.lk-podium-place {
  text-align: center;
  padding: 1.25rem 1.5rem;
  border-radius: var(--lk-radius-lg);
  background: var(--lk-bg-card);
  border: 1px solid var(--lk-border);
  min-width: 140px;
  transition: transform var(--lk-duration) var(--lk-ease);
}

.lk-podium-place:hover { transform: translateY(-4px); }

.lk-podium-place--gold {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 25px rgba(251, 191, 36, 0.12);
  order: 2;
}

.lk-podium-place--silver {
  border-color: #94a3b8 !important;
  box-shadow: 0 0 20px rgba(148, 163, 184, 0.08);
  order: 1;
}

.lk-podium-place--bronze {
  border-color: #d97706 !important;
  box-shadow: 0 0 20px rgba(217, 119, 6, 0.08);
  order: 3;
}

.lk-podium-rank {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.lk-podium-place--gold   .lk-podium-rank { color: #fbbf24; }
.lk-podium-place--silver .lk-podium-rank { color: #94a3b8; }
.lk-podium-place--bronze .lk-podium-rank { color: #d97706; }

.lk-podium-name {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.lk-podium-score {
  font-size: 0.8rem;
  color: var(--lk-text-muted);
}


/* ── Rating Selectors (Questionnaire) ──────────────────────────────────── */
.lk-rating-group {
  display: flex;
  gap: 0.5rem;
}

.lk-rating-option {
  width: 48px;
  height: 48px;
  border-radius: var(--lk-radius-md);
  border: 2px solid var(--lk-border);
  background: var(--lk-bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--lk-duration) var(--lk-ease);
  color: var(--lk-text-secondary);
}

.lk-rating-option:hover {
  border-color: var(--lk-accent-1);
  background: rgba(6, 182, 212, 0.08);
  color: var(--lk-accent-1);
  transform: translateY(-2px);
}

.lk-rating-option.active,
.lk-rating-option input:checked + & {
  background: var(--lk-accent-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
  transform: translateY(-2px);
}

/* Hidden radio inside rating option */
.lk-rating-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* NPS scale (0-10) */
.lk-nps-scale {
  display: flex;
  gap: 4px;
}

.lk-nps-option {
  flex: 1;
  padding: 0.6rem 0;
  text-align: center;
  border-radius: var(--lk-radius-sm);
  border: 1px solid var(--lk-border);
  background: var(--lk-bg-input);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--lk-duration) var(--lk-ease);
}

.lk-nps-option:hover { border-color: var(--lk-accent-1); }

.lk-nps-option.active {
  color: #fff;
  border-color: transparent;
}

.lk-nps-option.active.nps-low    { background: var(--lk-danger); }
.lk-nps-option.active.nps-mid    { background: var(--lk-warning); }
.lk-nps-option.active.nps-high   { background: var(--lk-success); }

/* Skill level meter */
.lk-skill-meter {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.lk-skill-level {
  flex: 1;
  padding: 0.6rem 0.75rem;
  text-align: center;
  border-radius: var(--lk-radius-sm);
  border: 1px solid var(--lk-border);
  background: var(--lk-bg-input);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all var(--lk-duration) var(--lk-ease);
}

.lk-skill-level:hover { border-color: var(--lk-accent-1); }

.lk-skill-level.active {
  background: var(--lk-accent-gradient);
  border-color: transparent;
  color: #fff;
}

/* Choice cards (multiple choice) */
.lk-choice-card {
  padding: 1rem 1.25rem;
  border-radius: var(--lk-radius-md);
  border: 2px solid var(--lk-border);
  background: var(--lk-bg-card);
  cursor: pointer;
  transition: all var(--lk-duration) var(--lk-ease);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lk-choice-card:hover {
  border-color: var(--lk-accent-1);
  background: rgba(6, 182, 212, 0.04);
}

.lk-choice-card.active {
  border-color: var(--lk-accent-1);
  background: rgba(6, 182, 212, 0.08);
}

.lk-choice-card .lk-choice-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--lk-border);
  transition: all var(--lk-duration) var(--lk-ease);
  flex-shrink: 0;
}

.lk-choice-card.active .lk-choice-indicator {
  border-color: var(--lk-accent-1);
  background: var(--lk-accent-1);
  box-shadow: inset 0 0 0 3px var(--lk-bg-card);
}


/* ── Wizard / Multi-Step Form ──────────────────────────────────────────── */
.lk-wizard-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 2rem;
}

.lk-wizard-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--lk-text-muted);
  transition: color var(--lk-duration) var(--lk-ease);
}

.lk-wizard-step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--lk-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all var(--lk-duration) var(--lk-ease);
  flex-shrink: 0;
}

.lk-wizard-step.active .lk-wizard-step-number {
  background: var(--lk-accent-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
}

.lk-wizard-step.active {
  color: var(--lk-text-primary);
}

.lk-wizard-step.completed .lk-wizard-step-number {
  background: var(--lk-success);
  border-color: var(--lk-success);
  color: #fff;
}

.lk-wizard-step.completed { color: var(--lk-success); }

.lk-wizard-connector {
  flex: 1;
  height: 2px;
  background: var(--lk-border);
  margin: 0 0.75rem;
  position: relative;
}

.lk-wizard-connector.completed {
  background: var(--lk-success);
}

/* Step panels */
.lk-wizard-panel {
  display: none;
  animation: lk-slideRight 0.35s var(--lk-ease);
}

.lk-wizard-panel.active { display: block; }


/* ── Auth Pages ────────────────────────────────────────────────────────── */
.lk-auth-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(6, 182, 212, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
    var(--lk-bg-base);
  padding: 2rem;
}

.lk-auth-card {
  width: 100%;
  max-width: 440px;
  padding: 2.5rem;
}

.lk-auth-logo {
  font-size: 2.5rem;
  background: var(--lk-accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(6, 182, 212, 0.3));
}

.lk-auth-tagline {
  font-size: 0.85rem;
  color: var(--lk-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}


/* ── Live Indicator ────────────────────────────────────────────────────── */
.lk-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lk-danger);
  display: inline-block;
  animation: lk-pulse 1.5s infinite;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}


/* ── Empty States ──────────────────────────────────────────────────────── */
.lk-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--lk-text-muted);
}

.lk-empty-icon {
  font-size: 2.5rem;
  opacity: 0.4;
  margin-bottom: 1rem;
}

.lk-empty-text {
  font-size: 0.95rem;
  margin-bottom: 1rem;
}


/* ── Notification Dot ──────────────────────────────────────────────────── */
.lk-notification-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lk-danger);
  display: inline-block;
  margin-left: 0.35rem;
  animation: lk-pulse 2s infinite;
}


/* ── Stagger Animation Helpers ─────────────────────────────────────────── */
.lk-stagger > * { animation: lk-fadeInUp 0.45s var(--lk-ease) both; }
.lk-stagger > *:nth-child(1)  { animation-delay: 0s; }
.lk-stagger > *:nth-child(2)  { animation-delay: 0.06s; }
.lk-stagger > *:nth-child(3)  { animation-delay: 0.12s; }
.lk-stagger > *:nth-child(4)  { animation-delay: 0.18s; }
.lk-stagger > *:nth-child(5)  { animation-delay: 0.24s; }
.lk-stagger > *:nth-child(6)  { animation-delay: 0.30s; }
.lk-stagger > *:nth-child(7)  { animation-delay: 0.36s; }
.lk-stagger > *:nth-child(8)  { animation-delay: 0.42s; }
.lk-stagger > *:nth-child(9)  { animation-delay: 0.48s; }
.lk-stagger > *:nth-child(10) { animation-delay: 0.54s; }
.lk-stagger > *:nth-child(11) { animation-delay: 0.60s; }
.lk-stagger > *:nth-child(12) { animation-delay: 0.66s; }


/* ── Gradient Text Utility ─────────────────────────────────────────────── */
.lk-gradient-text {
  background: var(--lk-accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ── Progress Bar ──────────────────────────────────────────────────────── */
.progress {
  background: var(--lk-bg-elevated) !important;
  border-radius: 50px !important;
  height: 8px;
  overflow: hidden;
}

.progress-bar {
  background: var(--lk-accent-gradient) !important;
  border-radius: 50px;
  transition: width 1s var(--lk-ease);
}


/* ── Modals ────────────────────────────────────────────────────────────── */
.modal-content {
  background: var(--lk-bg-card) !important;
  border: 1px solid var(--lk-border) !important;
  border-radius: var(--lk-radius-xl) !important;
  box-shadow: var(--lk-shadow-lg);
  backdrop-filter: blur(16px);
}

.modal-header {
  border-bottom-color: var(--lk-border) !important;
  padding: 1.25rem 1.5rem;
}

.modal-footer {
  border-top-color: var(--lk-border) !important;
}


/* ── Dropdown ──────────────────────────────────────────────────────────── */
.dropdown-menu {
  background: var(--lk-bg-card) !important;
  border: 1px solid var(--lk-border) !important;
  border-radius: var(--lk-radius-md) !important;
  box-shadow: var(--lk-shadow-lg);
  backdrop-filter: blur(12px);
}

.dropdown-item {
  color: var(--lk-text-secondary) !important;
  border-radius: var(--lk-radius-sm);
  padding: 0.5rem 1rem;
  transition: all var(--lk-duration) var(--lk-ease);
}

.dropdown-item:hover {
  background: var(--lk-bg-elevated) !important;
  color: var(--lk-text-primary) !important;
}


/* ── Tooltips ──────────────────────────────────────────────────────────── */
.tooltip-inner {
  background: var(--lk-bg-elevated) !important;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-sm);
  font-size: 0.8rem;
  padding: 0.4rem 0.75rem;
}


/* ── Mobile Sidebar Toggle ─────────────────────────────────────────────── */
.lk-sidebar-toggle {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1060;
  width: 40px;
  height: 40px;
  border-radius: var(--lk-radius-sm);
  background: var(--lk-bg-card);
  border: 1px solid var(--lk-border);
  color: var(--lk-text-primary);
  font-size: 1.2rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

@media (max-width: 991.98px) {
  .lk-sidebar-toggle { display: flex; }

  .lk-sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    z-index: 1050;
    width: 260px;
    transition: left 0.3s var(--lk-ease);
    box-shadow: none;
  }

  .lk-sidebar.show {
    left: 0;
    box-shadow: var(--lk-shadow-lg);
  }

  .lk-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    backdrop-filter: blur(2px);
  }

  .lk-sidebar-backdrop.show { display: block; }

  .lk-main { padding: 1.5rem 1rem; padding-top: 4rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Keyframe Animations
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes lk-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes lk-fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lk-slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lk-slideRight {
  from { opacity: 0; transform: translateX(-15px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes lk-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.1); }
}

@keyframes lk-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Shimmer loading skeleton */
.lk-skeleton {
  background: linear-gradient(
    90deg,
    var(--lk-bg-elevated) 25%,
    rgba(148, 163, 184, 0.08) 50%,
    var(--lk-bg-elevated) 75%
  );
  background-size: 200% 100%;
  animation: lk-shimmer 1.5s infinite;
  border-radius: var(--lk-radius-sm);
}

/* A single shimmering placeholder line; combine with .lk-skeleton and a width
   utility, e.g. <div class="lk-skeleton lk-skeleton-line w-75"></div>. */
.lk-skeleton-line {
  height: 1rem;
  margin-bottom: 0.6rem;
}
.lk-skeleton-line:last-child {
  margin-bottom: 0;
}

/* HTMX request indicator: fade an element in only while its request is in
   flight. htmx adds .htmx-request to the trigger and the hx-indicator target. */
.htmx-indicator {
  opacity: 0;
  transition: opacity 0.15s ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}


/* ── KQL block component ───────────────────────────────────────────────────
   Reusable, accessible read-only KQL display. Behaviour in static/js/kql-block.js
   (copy states, light highlighting). Works in both themes; used in lessons,
   challenges, scenarios and the query library. */
.lk-kql {
  margin: 1rem 0;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-md);
  overflow: hidden;
  background: var(--lk-bg-elevated);
}
.lk-kql-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--lk-border);
  background: var(--lk-bg-input);
  font-size: 0.75rem;
}
.lk-kql-lang {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--lk-accent-1);
  text-transform: uppercase;
}
.lk-kql-badges { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.lk-kql-actions { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; }
.lk-kql-run {
  font-size: 0.75rem;
  white-space: nowrap;
  text-decoration: none;
}
.lk-kql-copy {
  font: inherit;
  font-size: 0.72rem;
  line-height: 1;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-sm);
  background: var(--lk-bg-card);
  color: var(--lk-text-secondary);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.lk-kql-copy:hover { color: var(--lk-text-primary); border-color: var(--lk-border-hover); }
.lk-kql-copy.is-copied { color: var(--lk-success); border-color: var(--lk-success); }
.lk-kql-copy.is-failed { color: var(--lk-warning); border-color: var(--lk-warning); }
.lk-kql pre {
  margin: 0;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  background: transparent;
  border: none;
  border-radius: 0;
}
.lk-kql pre code {
  font-family: var(--lk-font-mono);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--lk-text-primary);
  background: transparent;
  white-space: pre;
}
.lk-kql-tables {
  margin: 0;
  padding: 0.4rem 1rem;
  border-top: 1px solid var(--lk-border);
  font-size: 0.75rem;
  color: var(--lk-text-muted);
}
/* Highlight tokens: readable in both light and dark themes. */
.lk-kql-tok-kw { color: var(--lk-accent-1); font-weight: 600; }
.lk-kql-tok-pipe { color: var(--lk-accent-2); font-weight: 700; }
.lk-kql-tok-string { color: var(--lk-success); }
.lk-kql-tok-comment { color: var(--lk-text-muted); font-style: italic; }

/* Plain lesson code blocks: a small copy button, injected by kql-block.js. */
.content-body pre.lk-code { position: relative; }
.content-body pre.lk-code .lk-kql-copy {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.content-body pre.lk-code:hover .lk-kql-copy,
.content-body pre.lk-code:focus-within .lk-kql-copy { opacity: 1; }


/* ── Auto-dismiss Alerts ───────────────────────────────────────────────── */
.alert-autodismiss {
  animation: lk-slideDown 0.4s var(--lk-ease),
             lk-fadeOut 0.4s var(--lk-ease) 4.6s forwards;
}

@keyframes lk-fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}


/* ── Scrollbar Styling ─────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--lk-border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--lk-text-muted);
}


/* ── Nav Tabs (Premium) ───────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid var(--lk-border) !important;
  gap: 0.25rem;
}

.nav-tabs .nav-link {
  color: var(--lk-text-muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 0.65rem 1.1rem;
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: var(--lk-radius-sm) var(--lk-radius-sm) 0 0 !important;
  transition: all var(--lk-duration) var(--lk-ease);
  margin-bottom: -2px;
}

.nav-tabs .nav-link:hover {
  color: var(--lk-text-primary) !important;
  background: var(--lk-bg-elevated) !important;
  border-bottom-color: var(--lk-text-muted) !important;
}

.nav-tabs .nav-link.active {
  color: var(--lk-accent-1) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--lk-accent-1) !important;
}

.nav-tabs .nav-link .badge {
  font-size: 0.7rem;
  padding: 0.2em 0.5em;
  vertical-align: middle;
}


/* ── Breadcrumbs (Premium) ────────────────────────────────────────────── */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
}

.breadcrumb-item a {
  color: var(--lk-text-muted) !important;
  text-decoration: none;
  transition: color var(--lk-duration) var(--lk-ease);
}

.breadcrumb-item a:hover {
  color: var(--lk-accent-1) !important;
}

.breadcrumb-item.active {
  color: var(--lk-text-secondary) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--lk-text-muted) !important;
}


/* ── Enhanced Empty States ────────────────────────────────────────────── */
.lk-empty {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--lk-text-muted);
}

.lk-empty-icon {
  font-size: 3rem;
  opacity: 0.3;
  margin-bottom: 1.25rem;
  background: var(--lk-accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lk-empty-text {
  font-size: 1rem;
  font-weight: 500;
  color: var(--lk-text-secondary);
  margin-bottom: 0.5rem;
}

.lk-empty-hint {
  font-size: 0.85rem;
  color: var(--lk-text-muted);
  margin-bottom: 1.25rem;
}

.lk-empty .btn {
  margin-top: 0.5rem;
}


/* ── Error Pages ──────────────────────────────────────────────────────── */
.lk-error-page {
  text-align: center;
  padding: 6rem 2rem;
}

.lk-error-code {
  font-size: 6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: var(--lk-accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 0.5rem;
  opacity: 0.7;
}

.lk-error-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.lk-error-desc {
  font-size: 0.95rem;
  color: var(--lk-text-muted);
  max-width: 420px;
  margin: 0 auto 2rem;
}


/* ── Pagination ───────────────────────────────────────────────────────── */
.pagination {
  gap: 4px;
}

.page-link {
  background: var(--lk-bg-card) !important;
  border: 1px solid var(--lk-border) !important;
  color: var(--lk-text-secondary) !important;
  border-radius: var(--lk-radius-sm) !important;
  padding: 0.45rem 0.85rem;
  font-weight: 500;
  font-size: 0.85rem;
  transition: all var(--lk-duration) var(--lk-ease);
}

.page-link:hover {
  background: var(--lk-bg-elevated) !important;
  color: var(--lk-accent-1) !important;
  border-color: var(--lk-border-hover) !important;
}

.page-item.active .page-link {
  background: var(--lk-accent-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.25);
}

.page-item.disabled .page-link {
  background: var(--lk-bg-elevated) !important;
  color: var(--lk-text-muted) !important;
  opacity: 0.5;
}


/* ── Toast Notifications ──────────────────────────────────────────────── */
.toast {
  background: var(--lk-bg-card) !important;
  border: 1px solid var(--lk-border) !important;
  border-radius: var(--lk-radius-md) !important;
  box-shadow: var(--lk-shadow-lg);
  backdrop-filter: blur(12px);
}

.toast-header {
  background: transparent !important;
  border-bottom: 1px solid var(--lk-border) !important;
  color: var(--lk-text-primary) !important;
}

.toast-body {
  color: var(--lk-text-secondary);
}


/* ── Links ────────────────────────────────────────────────────────────── */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.page-link):not(.lk-sidebar-user) {
  color: var(--lk-accent-1);
  text-decoration: none;
  transition: color var(--lk-duration) var(--lk-ease);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.page-link):not(.lk-sidebar-user):hover {
  color: var(--lk-accent-2);
}


/* ── Text Selection ───────────────────────────────────────────────────── */
::selection {
  background: rgba(6, 182, 212, 0.25);
  color: var(--lk-text-primary);
}


/* ── Bootstrap bg- Utility Overrides ──────────────────────────────────── */
.bg-body-secondary { background: var(--lk-bg-elevated) !important; }
.bg-body-tertiary  { background: var(--lk-bg-elevated) !important; }


/* ── Horizontal Rule ──────────────────────────────────────────────────── */
hr {
  border-color: var(--lk-border) !important;
  opacity: 1;
}


/* ── Focus Rings (Accessibility) ──────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--lk-accent-1) !important;
  outline-offset: 2px;
  border-radius: var(--lk-radius-sm);
}

/* Skip-to-content link: hidden until focused, so keyboard users can bypass the
   nav and jump straight to the main content (WCAG 2.4.1). */
.lk-skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 2000;
  padding: 0.5rem 0.9rem;
  border-radius: var(--lk-radius-sm);
  background: var(--lk-accent-1);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease-in;
}
.lk-skip-link:focus {
  top: 0.5rem;
}

.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.25) !important;
}


/* ── Reduced Motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .lk-stagger > * { animation: none !important; }
  .card-lift:hover { transform: none; }
  .btn:hover { transform: none; }
}


/* ── Module Progress Steps ────────────────────────────────────────────── */
.lk-module-list .list-group-item {
  border-left: 3px solid transparent;
  transition: all var(--lk-duration) var(--lk-ease);
}

.lk-module-list .list-group-item:hover {
  border-left-color: var(--lk-accent-1);
}

.lk-module-list .list-group-item.lk-module--completed {
  border-left-color: var(--lk-success);
}

.lk-module-list .list-group-item.lk-module--in-progress {
  border-left-color: var(--lk-warning);
}


/* ── Credential Box ───────────────────────────────────────────────────── */
.lk-credential-box {
  background: var(--lk-bg-elevated);
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-md);
  padding: 0.75rem 1rem;
}


/* ── Print Override: Skip Premium Styling ──────────────────────────────── */
@media print {
  .lk-sidebar, .lk-sidebar-toggle, .lk-sidebar-backdrop { display: none !important; }
  .lk-main { padding: 0 !important; max-height: none !important; }
  body { background: #fff !important; }
  .card { box-shadow: none !important; backdrop-filter: none !important; border: 1px solid #ddd !important; }
  .kpi-value { -webkit-text-fill-color: #000 !important; color: #000 !important; }
  .alert-autodismiss { animation: none !important; }
}

/* ── Connection-lost bar (LKWS, static/js/ws-connection.js) ─────────────── */
.lk-conn-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  padding: 0.55rem 1rem;
  background: var(--lk-warning);
  color: #1a1206;
  font-weight: 600;
  box-shadow: var(--lk-shadow-md);
  transform: translateY(-105%);
  transition: transform 0.25s ease;
  pointer-events: none;
}
.lk-conn-bar.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.lk-conn-bar.is-up {
  background: var(--lk-success);
  color: #042417;
}
.lk-conn-bar .lk-conn-sub {
  font-weight: 500;
  opacity: 0.8;
}
.lk-conn-bar .lk-conn-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.lk-conn-bar .lk-conn-refresh {
  font-weight: 600;
}



/* ── Sidebar section toggles (declarative nav) ─────────────────────────── */
.lk-nav-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.lk-nav-section-toggle .lk-nav-chevron {
  font-size: 0.65rem;
  transition: transform 0.15s var(--lk-ease, ease);
}

.lk-nav-section-toggle[aria-expanded='false'] .lk-nav-chevron {
  transform: rotate(-90deg);
}

.lk-nav-section-toggle:focus-visible {
  outline: 2px solid var(--lk-accent-1);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Shared components (IA overhaul PR 6) ──────────────────────────────── */
/* Card accent variants: replace the repeated
   style="border-color: var(--lk-danger) !important" pattern. */
.lk-card--danger { border-color: var(--lk-danger) !important; }
.lk-card--warning { border-color: var(--lk-warning) !important; }
.lk-card--success { border-color: var(--lk-success) !important; }
.lk-card--accent { border-color: var(--lk-accent-1) !important; }
.lk-card--muted { opacity: 0.75; }

/* Consistent data table: wrap in .lk-table-wrap for responsive scroll. */
.lk-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--lk-border);
  border-radius: 10px;
}

.lk-table {
  width: 100%;
  margin-bottom: 0;
  font-size: 0.9rem;
}

.lk-table thead th {
  position: sticky;
  top: 0;
  background: var(--lk-bg-elevated);
  color: var(--lk-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--lk-border);
  white-space: nowrap;
}

.lk-table tbody td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--lk-border);
  vertical-align: middle;
}

.lk-table tbody tr:last-child td { border-bottom: 0; }

.lk-table tbody tr:hover { background: var(--lk-bg-hover, rgba(148, 163, 184, 0.06)); }

/* Filter bar above lists: search + selects + clear, wraps on mobile. */
.lk-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

.lk-filter-bar .form-control,
.lk-filter-bar .form-select {
  width: auto;
  min-width: 10rem;
}

/* Toolbar: actions row aligned right of a heading or table. */
.lk-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

/* Explanatory note beside a control. Capped so the line length stays readable
   next to a button rather than running the full card width. */
.lk-note-narrow {
  max-width: 22rem;
}

/* Learning path progress meter (CURR-106).
   The fill width comes from a step class rather than an inline style, because
   the inline-style ratchet (core/tests_inline_style_ratchet.py) blocks new
   style attributes in templates. The service rounds the percentage down to the
   nearest 5 and the template picks the matching class. */
.lk-path-meter {
  background: var(--lk-bg-elevated);
  border-radius: 50px;
  height: 6px;
  overflow: hidden;
}

.lk-path-meter__fill {
  background: var(--lk-accent-gradient);
  border-radius: 50px;
  height: 100%;
  transition: width 1s var(--lk-ease);
}

.lk-path-meter__fill--0   { width: 0; }
.lk-path-meter__fill--5   { width: 5%; }
.lk-path-meter__fill--10  { width: 10%; }
.lk-path-meter__fill--15  { width: 15%; }
.lk-path-meter__fill--20  { width: 20%; }
.lk-path-meter__fill--25  { width: 25%; }
.lk-path-meter__fill--30  { width: 30%; }
.lk-path-meter__fill--35  { width: 35%; }
.lk-path-meter__fill--40  { width: 40%; }
.lk-path-meter__fill--45  { width: 45%; }
.lk-path-meter__fill--50  { width: 50%; }
.lk-path-meter__fill--55  { width: 55%; }
.lk-path-meter__fill--60  { width: 60%; }
.lk-path-meter__fill--65  { width: 65%; }
.lk-path-meter__fill--70  { width: 70%; }
.lk-path-meter__fill--75  { width: 75%; }
.lk-path-meter__fill--80  { width: 80%; }
.lk-path-meter__fill--85  { width: 85%; }
.lk-path-meter__fill--90  { width: 90%; }
.lk-path-meter__fill--95  { width: 95%; }
.lk-path-meter__fill--100 { width: 100%; }