/* ============================================================
   CostusWorx Training Portal — Stylesheet
   CostusWorx brand design system (navy / blue / light-blue).
   Shared look & feel with CentreForge.
   Brand: NAVY #1F3864 · BLUE #2E5FA3 · LT-BLUE #D5E8F0
   ============================================================ */

/* ── Google Fonts loaded in index.php ──────────────────────── */

:root {
  --bg:       #eef2f7;
  --surface:  #ffffff;
  --card:     #ffffff;
  --cardAlt:  #f4f7fb;
  --border:   rgba(31,56,100,0.12);
  --borderG:  rgba(46,95,163,0.35);
  /* Brand accent (formerly "gold") — now CostusWorx BLUE */
  --gold:     #2e5fa3;   /* brand BLUE — primary action / accent */
  --goldL:    #24528f;   /* darker blue — hover */
  --goldBg:   rgba(46,95,163,0.08);
  /* Brand primary — CostusWorx NAVY */
  --navy:     #1f3864;   /* brand NAVY — headers / titles */
  --navyL:    #2e5fa3;   /* brand BLUE — lighter navy */
  --ltblue:   #d5e8f0;   /* brand LT-BLUE — soft accent fills */
  --ltblueBg: rgba(213,232,240,0.55);
  --text:     #1a2636;
  --textM:    #4a6282;
  --textD:    #8aa0b8;
  --green:    #1a7c45;
  --greenL:   #21a05a;
  --greenBg:  rgba(26,124,69,0.08);
  --amber:    #b85c00;
  --amberBg:  rgba(184,92,0,0.08);
  --red:      #c0392b;
  --redBg:    rgba(192,57,43,0.08);
  --radius:   5px;
  --shadow:   0 2px 12px rgba(31,56,100,0.08);
  --shadowM:  0 4px 20px rgba(31,56,100,0.14);
  /* Chart palette — blue-anchored, brand-cohesive (see dashboards) */
  --chart-1: #1f3864;
  --chart-2: #2e5fa3;
  --chart-3: #5b8fd0;
  --chart-4: #8fbce8;
  --chart-5: #b8d4ee;
  --chart-6: #16324f;
  /* Tenant branding — overridden at runtime */
  --primary:       var(--navy);
  --primary-dark:  var(--navyL);
  --accent:        var(--gold);
  --tenant-primary: var(--navy);
  --tenant-accent:  var(--gold);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'DM Sans', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
}

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }

/* ── Utility ────────────────────────────────────────────────── */
.hidden      { display: none !important; }
.sr-only     { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.text-muted  { color: var(--textM); }
.text-sm     { font-size: 13px; }
.text-danger { color: var(--red); }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-8  { margin-bottom: 8px; }
.mono  { font-family: 'JetBrains Mono', monospace; font-size: 12px; }

/* ── Screens ────────────────────────────────────────────────── */
.hidden { display: none !important; }
.screen { display: none; }
#screen-login.active {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #1f3864 0%, #2e5fa3 60%, #16324f 100%);
}
#screen-app.active  { display: flex; flex-direction: column; min-height: 100vh; }
/* legacy selectors kept for JS compat */
#screen-admin.active,
#screen-learner.active { display: block; }

/* ── Login Card ─────────────────────────────────────────────── */
.login-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 44px 40px;
  width: 400px; max-width: 96vw;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
  position: relative;
}
.login-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--tenant-primary), var(--tenant-accent), var(--tenant-primary));
  border-radius: var(--radius) var(--radius) 0 0;
}
.login-brand { text-align: center; margin-bottom: 30px; }
/* Product lockup on the login card. Minimum width for the full horizontal
   lockup is 120px per the brand kit; 230px sits comfortably in the 400px card. */
.login-brandmark { display:block; width:230px; max-width:78%; height:auto; margin:0 auto 6px; }
.login-brand-title {
  font-family: 'Bebas Neue', serif;
  font-size: 34px; letter-spacing: 3px;
  color: var(--navy); display: block;
}
.login-brand-title span { color: var(--tenant-accent); }
.login-brand-sub {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--textM); display: block; margin-top: 3px;
  font-family: 'JetBrains Mono', monospace;
}
.login-logo { text-align: center; margin-bottom: 16px; }
.login-logo img { max-height: 64px; max-width: 180px; object-fit: contain; margin: 0 auto; }
.login-version {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); text-align: center;
}
.login-version-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--cardAlt); border: 1px solid var(--border); border-radius: 20px;
  padding: 5px 14px; font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--textM); cursor: pointer; transition: border-color .2s, background .2s;
}
.login-version-tag:hover { border-color: var(--gold); background: #eef4fb; color: var(--navy); }
.login-version-tag .vtag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.login-version-tag .vtag-label { color: var(--gold); font-weight: 700; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 22px; border: none; border-radius: 3px;
  font-size: 10px; font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase; font-weight: 700; letter-spacing: 1.5px;
  line-height: 1; min-height: 40px; transition: all .2s; white-space: nowrap; cursor: pointer;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Primary = gold (matches DMS btn-gold) */
.btn-primary, .btn-gold { background: var(--gold); color: #fff; }
.btn-primary:hover:not(:disabled), .btn-gold:hover:not(:disabled) { background: var(--goldL); }

/* Secondary = navy outline */
.btn-secondary, .btn-outline { background: transparent; border: 1px solid var(--gold); color: var(--gold); }
.btn-secondary:hover:not(:disabled), .btn-outline:hover:not(:disabled) { background: var(--goldBg); }

/* Navy solid */
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover:not(:disabled) { background: var(--navyL); }

/* Ghost */
.btn-ghost { background: transparent; border: 1px solid #c8d4e0; color: var(--textM); }
.btn-ghost:hover:not(:disabled) { border-color: var(--navyL); color: var(--navy); }

.btn-danger { background: var(--redBg); border: 1px solid rgba(192,57,43,.3); color: var(--red); }
.btn-danger:hover:not(:disabled) { background: rgba(192,57,43,.15); }

.btn-sm   { padding: 5px 11px; font-size: 9px; min-height: 32px; }
.btn-full { width: 100%; padding: 13px; }
.btn-icon { padding: 8px; min-height: auto; border-radius: 50%;
            background: transparent; color: var(--textM); font-size: 16px; }
.btn-icon:hover { background: var(--cardAlt); }

/* ── Form Controls ──────────────────────────────────────────── */
/* .field and .fg are both supported */
.field, .fg { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }

.field label, .fg label {
  font-size: 10px; text-transform: uppercase; color: var(--textM);
  font-family: 'JetBrains Mono', monospace; letter-spacing: 1.8px; font-weight: 600;
}
.field input, .field select, .field textarea,
.fg input,    .fg select,    .fg textarea {
  background: #fff; border: 1px solid #c8d4e0;
  padding: 11px 13px; color: var(--text);
  border-radius: 3px; font-size: 14px; font-family: 'DM Sans', sans-serif;
  outline: none; transition: border-color .2s, box-shadow .2s; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus,
.fg input:focus,    .fg select:focus,    .fg textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(46,95,163,0.15);
}
.field select, .fg select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%234a6282' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.field input:read-only, .fg input:read-only { background: #f5f7fa; color: var(--textM); cursor: default; }
.fg-hint, .field-hint { font-size: 10px; color: var(--textD); }

.input-sm {
  padding: 7px 10px; font-size: 13px;
  border: 1px solid #c8d4e0; border-radius: 3px;
  background: var(--card); color: var(--text); min-height: 34px;
  font-family: 'DM Sans', sans-serif; outline: none;
}
.input-sm:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(46,95,163,0.12); }

/* Alert inside forms */
.alert { padding: 10px 14px; border-radius: 3px; font-size: 13px; margin-bottom: 12px; }
.alert-error { background: var(--redBg); color: var(--red); border: 1px solid rgba(192,57,43,.3); }
.alert-success { background: var(--greenBg); color: var(--green); border: 1px solid rgba(26,124,69,.3); }

/* ── Header ─────────────────────────────────────────────────── */
.hdr {
  background: var(--tenant-primary);
  border-bottom: 3px solid var(--tenant-accent);
  padding: 0 26px; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 2px 16px rgba(0,0,0,0.2);
}
.hdr-brand { font-family: 'Bebas Neue', serif; font-size: 22px; letter-spacing: 2px; color: #fff; }
.hdr-brand span { color: var(--tenant-accent); }
.hdr-logo  { height: 32px; width: auto; object-fit: contain; margin-right: 10px; vertical-align: middle; }
.hdr-user  { text-align: right; font-size: 12px; line-height: 1.6; }
.hdr-user strong { display: block; font-size: 13px; color: #fff; }
.hdr-user em { font-style: normal; font-size: 10px; color: var(--gold);
               letter-spacing: 1px; font-family: 'JetBrains Mono', monospace; }
.hdr-right { display: flex; align-items: center; gap: 16px; }

/* ── Nav / Tabs ─────────────────────────────────────────────── */
.nav {
  background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; padding: 0 26px; box-shadow: var(--shadow); overflow-x: auto;
}
.nav-tab {
  padding: 14px 22px; cursor: pointer;
  font-size: 10px; font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase; color: var(--textM);
  border-bottom: 3px solid transparent;
  transition: all .2s; white-space: nowrap; letter-spacing: 1.5px; background: none; border-top: none; border-left: none; border-right: none;
}
.nav-tab:hover  { color: var(--navy); }
.nav-tab.active { color: var(--navy); border-bottom-color: var(--gold); font-weight: 700; }

/* Admin tab bar inside content */
.tab-bar {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
  margin-bottom: 20px; overflow-x: auto;
}
.tab-btn {
  padding: 11px 18px; background: none; border: none;
  border-bottom: 3px solid transparent; cursor: pointer;
  font-size: 10px; font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--textM);
  transition: all .2s; white-space: nowrap;
}
.tab-btn:hover  { color: var(--navy); }
.tab-btn.active { color: var(--navy); border-bottom-color: var(--gold); font-weight: 700; }
/* + Invite nav tab gets gold accent at rest */
#tab-invite        { color: var(--gold); }
#tab-invite:hover  { color: var(--navy); }
#tab-invite.active { color: var(--navy); border-bottom-color: var(--gold); font-weight: 700; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Main Layout ────────────────────────────────────────────── */
.main { flex: 1; padding: 26px; max-width: 1380px; margin: 0 auto; width: 100%; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.card-title {
  font-family: 'Bebas Neue', serif; font-size: 22px; letter-spacing: 1px;
  color: var(--navy); margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}
.card-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Page Heading ───────────────────────────────────────────── */
.pg-head { display: flex; align-items: flex-start; justify-content: space-between;
           flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.pg-title { font-family: 'Bebas Neue', serif; font-size: 32px; letter-spacing: 1px;
            color: var(--navy); line-height: 1; }
.pg-sub   { font-size: 12px; color: var(--textM); margin-top: 4px; }
.pg-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ── Stat Strip ─────────────────────────────────────────────── */
.stats-strip, .admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.stat, .stat-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow); transition: box-shadow .2s, transform .2s;
}
.stat:hover, .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadowM); }
.stat::before, .stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gold);
}
.stat.c-green::before,  .stat-card.c-green::before  { background: var(--green); }
.stat.c-navy::before,   .stat-card.c-navy::before   { background: var(--navy); }
.stat.c-amber::before,  .stat-card.c-amber::before  { background: var(--amber); }
.stat.c-red::before,    .stat-card.c-red::before    { background: var(--red); }
.stat-lbl, .stat-lbl {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--textM); font-family: 'JetBrains Mono', monospace;
  font-weight: 700; margin-bottom: 7px;
}
.stat-val {
  font-family: 'Bebas Neue', serif; font-size: 36px;
  color: var(--navy); line-height: 1;
}

/* ── Tables ─────────────────────────────────────────────────── */
.table-wrap, .tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead tr { background: var(--cardAlt); }
th {
  text-align: left; font-size: 9px; color: var(--textM);
  padding: 11px 13px; border-bottom: 2px solid var(--border);
  text-transform: uppercase; font-family: 'JetBrains Mono', monospace;
  font-weight: 700; white-space: nowrap;
}
td {
  padding: 11px 13px; border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text);
}
tbody tr:hover { background: #f5f8fc; }
tbody tr:last-child td { border-bottom: none; }
tfoot tr { background: var(--goldBg); }
tfoot td {
  padding: 11px 13px; font-family: 'JetBrains Mono', monospace;
  font-size: 13px; color: var(--gold);
  border-top: 2px solid rgba(46,95,163,0.25); font-weight: 700;
}

/* ── Form Grid ──────────────────────────────────────────────── */
.form-grid      { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 4px; }
.form-grid-wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.form-sep  { grid-column: 1/-1; border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.form-sec  {
  grid-column: 1/-1; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--textM); font-weight: 700; font-family: 'JetBrains Mono', monospace;
}
.form-actions { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Empty State ─────────────────────────────────────────────── */
.empty     { text-align: center; padding: 48px 20px; color: var(--textD); }
.empty-ico { font-size: 40px; margin-bottom: 12px; opacity: .35; }
.text-muted { color: var(--textD); font-size: 13px; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 2px;
  font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;
  font-weight: 700; font-family: 'JetBrains Mono', monospace;
}
.badge-gold   { background: var(--goldBg); color: var(--gold); border: 1px solid rgba(46,95,163,0.3); }
.badge-green  { background: var(--greenBg); color: var(--green); border: 1px solid rgba(26,124,69,0.3); }
.badge-navy   { background: rgba(31,56,100,0.08); color: var(--navy); border: 1px solid rgba(31,56,100,0.2); }
.badge-red    { background: var(--redBg); color: var(--red); border: 1px solid rgba(192,57,43,0.3); }
.badge-amber  { background: rgba(184,92,0,0.08); color: var(--amber); border: 1px solid rgba(184,92,0,0.25); }

/* Legacy badge class used in app.js */
.badge[style*="background:#e3f2fd"] { background: rgba(27,47,78,0.08) !important; color: var(--navy) !important; }

/* ── Modal ──────────────────────────────────────────────────── */
.modal-backdrop,
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 20px;
}
.modal {
  background: #fff; border-radius: var(--radius);
  width: 520px; max-width: 100%; max-height: 90vh;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,.4);
}
.modal-head {
  padding: 22px 28px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.modal-head h2 {
  font-family: 'Bebas Neue', serif; font-size: 22px;
  letter-spacing: 2px; color: var(--navy);
}
.modal-body { padding: 22px 28px; overflow-y: auto; }

/* ── Assign Panel (inline, below courses heading) ────────────── */
.assign-panel {
  background: var(--navy); color: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  max-height: 0;
  margin-bottom: 0;
  transition: max-height .3s cubic-bezier(.4,0,.2,1),
              margin-bottom .3s cubic-bezier(.4,0,.2,1);
}
.assign-panel.open {
  max-height: 320px;
  margin-bottom: 16px;
}
.assign-panel-inner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 14px 20px;
}
.assign-panel-title {
  font-family: 'Bebas Neue', serif; font-size: 18px;
  letter-spacing: 2px; white-space: nowrap; flex-shrink: 0;
}
.assign-panel-course {
  font-size: 11px; color: rgba(255,255,255,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 180px;
}
.assign-panel-sep {
  width: 1px; height: 30px; background: rgba(255,255,255,.2);
  flex-shrink: 0;
}
.assign-panel select,
.assign-panel input[type="text"],
.assign-panel input[type="email"],
.assign-panel input[type="date"] {
  padding: 8px 12px; border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,.2);
  font-size: 13px; background: rgba(255,255,255,.1);
  color: #fff; outline: none;
}
.assign-panel select:focus,
.assign-panel input:focus {
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.18);
}
.assign-panel select option { background: #1a2340; color: #fff; }
.assign-panel input::placeholder { color: rgba(255,255,255,.45); }
.assign-panel-lookup {
  display: flex; flex-direction: column; gap: 2px;
}
.assign-panel-lookup small {
  font-size: 11px; color: rgba(255,255,255,.6);
}
.assign-panel-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; white-space: nowrap; cursor: pointer;
  color: rgba(255,255,255,.85);
}
.assign-panel-alert {
  font-size: 12px; color: #ff8a80;
}
.assign-panel .btn-close-panel {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1.5px solid rgba(255,255,255,.2);
  padding: 8px 14px; border-radius: 4px; cursor: pointer;
  font-size: 14px; line-height: 1; flex-shrink: 0;
}
.assign-panel .btn-close-panel:hover { background: rgba(255,255,255,.22); }

/* ── Toast ──────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 26px; right: 26px;
  padding: 12px 22px; border-radius: 3px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2); z-index: 9999; pointer-events: none;
  animation: tsIn .3s cubic-bezier(.34,1.56,.64,1) both;
}
.toast.ok,  .toast-success { background: var(--green); color: #fff; }
.toast.err, .toast-error   { background: var(--red);   color: #fff; }
.toast.inf, .toast-info    { background: var(--navy);  color: #fff; }
/* Toast.show() emits `toast success` / `toast error` / `toast info`, but only the
   abbreviated .ok/.err/.inf selectors existed — so error toasts rendered with no
   background at all. Aliases added; pre-existing bug, not demo-specific. */
.toast.success { background: var(--green); color: #fff; }
.toast.error   { background: var(--red);   color: #fff; }
.toast.info    { background: var(--navy);  color: #fff; }
/* Read-only demo notice — an explanation, not a failure. Explicit colours so it
   renders regardless of the .toast.err / .toast-error class-name mismatch. */
.toast.demo {
  background: #1F3864; color: #fff;
  border-left: 4px solid #F5A524;
  font-weight: 500; line-height: 1.4; max-width: 380px;
}
@keyframes tsIn  { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes tsOut { to   { transform: translateX(110%); opacity: 0; } }
.toast.out { animation: tsOut .25s ease both; }

/* ── Learner Dashboard Header ───────────────────────────────── */
.learner-header {
  background: linear-gradient(135deg, rgba(46,95,163,0.07), rgba(213,232,240,0.35));
  border: 1px solid rgba(46,95,163,0.18); border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 18px 22px; margin-bottom: 20px;
}
.learner-header .welcome {
  font-family: 'Bebas Neue', serif; font-size: 26px; letter-spacing: 2px;
  color: var(--navy); line-height: 1;
}
.learner-header .meta {
  font-size: 11px; color: var(--textM); margin-top: 4px;
  font-family: 'JetBrains Mono', monospace; letter-spacing: 1px;
}

/* ── Section Headings ───────────────────────────────────────── */
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.section-head h2 {
  font-family: 'Bebas Neue', serif; font-size: 22px; letter-spacing: 2px;
  color: var(--navy);
}

/* ── Empty State ────────────────────────────────────────────── */
.empty-state, .empty {
  text-align: center; padding: 48px 20px;
  color: var(--textD);
}
.empty-state .icon, .empty-ico { font-size: 40px; margin-bottom: 12px; opacity: .35; }
.empty-state p { color: var(--textM); font-size: 14px; }

/* ── Spinner ────────────────────────────────────────────────── */
.spinner {
  display: flex; justify-content: center; align-items: center; padding: 32px;
  color: var(--textM); font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  gap: 10px;
}
.spinner::before {
  content: ''; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--gold);
  animation: spin .7s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Course Cards (Learner Dashboard) ──────────────────────── */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px; margin-top: 16px;
}
.course-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: box-shadow .2s, transform .2s;
}
.course-card:hover { transform: translateY(-2px); box-shadow: var(--shadowM); }
.course-card-thumb {
  height: 120px; background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; overflow: hidden;
}
.course-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.course-card-body { padding: 16px; }
.course-card-title {
  font-family: 'Bebas Neue', serif; font-size: 18px; letter-spacing: 1px;
  color: var(--navy); margin-bottom: 6px; line-height: 1.2;
}
.course-card-meta { font-size: 11px; color: var(--textM); margin-bottom: 10px; }
.course-card-footer {
  padding: 10px 16px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--cardAlt);
}

/* ── Progress Bar ───────────────────────────────────────────── */
.progress-bar {
  height: 6px; background: var(--border); border-radius: 3px; overflow: hidden;
}
.progress-bar-fill {
  height: 100%; background: var(--gold); border-radius: 3px;
  transition: width .4s ease;
}
.progress-bar-fill.complete { background: var(--green); }

/* ── Progress Ring (learner course cards) ───────────────────── */
.progress-ring { flex-shrink: 0; }
.progress-ring-arc {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset .5s ease, stroke .3s ease;
}
.progress-ring-label {
  font-size: 9px;
  fill: #888;
  font-family: inherit;
}

/* ── Unit List (Course Viewer) ──────────────────────────────── */
.unit-list { list-style: none; margin: 0; padding: 0; }
.unit-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .15s;
}
.unit-item:last-child { border-bottom: none; }
.unit-item:hover { background: var(--cardAlt); }
.unit-item.active { background: var(--goldBg); border-left: 3px solid var(--gold); }
.unit-item.completed .unit-icon { color: var(--green); }
.unit-icon { font-size: 18px; flex-shrink: 0; color: var(--textD); }
.unit-name { font-size: 14px; color: var(--text); flex: 1; }
.unit-type-badge {
  font-size: 8px; font-family: 'JetBrains Mono', monospace;
  letter-spacing: 1px; text-transform: uppercase;
  background: var(--goldBg); color: var(--gold);
  padding: 2px 6px; border-radius: 2px; flex-shrink: 0;
}

/* ── Quiz Player ────────────────────────────────────────────── */
.quiz-question {
  font-size: 18px; font-weight: 600; color: var(--navy);
  margin-bottom: 20px; line-height: 1.4;
}
.quiz-answers { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.quiz-answer-btn {
  width: 100%; min-height: 56px; padding: 14px 18px;
  text-align: left; background: var(--card);
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: 15px; color: var(--text); cursor: pointer;
  transition: all .15s; font-family: 'DM Sans', sans-serif;
}
.quiz-answer-btn:hover { border-color: var(--gold); background: var(--goldBg); }
.quiz-answer-btn.selected { border-color: var(--navy); background: rgba(31,56,100,0.06); font-weight: 600; }
.quiz-answer-btn.correct  { border-color: var(--green); background: var(--greenBg); }
.quiz-answer-btn.wrong    { border-color: var(--red);   background: var(--redBg); }

.quiz-timer {
  font-family: 'JetBrains Mono', monospace; font-size: 14px;
  color: var(--textM); text-align: right; margin-bottom: 16px;
}
.quiz-timer.warning { color: var(--red); animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }

.quiz-result { text-align: center; padding: 32px 20px; }
.quiz-result-score {
  font-family: 'Bebas Neue', serif; font-size: 72px;
  line-height: 1; margin-bottom: 8px;
}
.quiz-result-score.pass { color: var(--green); }
.quiz-result-score.fail { color: var(--red); }

/* ── Certificate ────────────────────────────────────────────── */
.cert-card {
  background: var(--card); border: 2px solid var(--gold);
  border-radius: var(--radius); padding: 28px;
  text-align: center; box-shadow: var(--shadowM);
}
.cert-number {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--textM); letter-spacing: 2px;
}

/* ── Pager ──────────────────────────────────────────────────── */
.pager {
  display: flex; align-items: center; gap: 10px;
  justify-content: flex-end; margin-top: 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--textM);
}

/* ── Form Grid ──────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 14px; }
.form-actions { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Footer ─────────────────────────────────────────────────── */
.footer {
  padding: 14px; text-align: center; font-size: 10px;
  font-family: 'JetBrains Mono', monospace; color: var(--textM);
  border-top: 1px solid var(--border); background: var(--surface);
}

/* ── Dashboard (BI) — CostusWorx shared kit ─────────────────── */
.dash-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 16px; margin-bottom: 22px;
}
.dash-tile {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; display: flex; flex-direction: column; min-width: 0;
}
.dash-tile-title {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--textM); font-weight: 700; margin-bottom: 14px;
}
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

/* KPI tile */
.kpi { position: relative; }
.kpi .kpi-val { font-family: 'Bebas Neue', serif; font-size: 40px; line-height: 1; color: var(--navy); }
.kpi .kpi-lbl {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--textM); font-weight: 700; margin-top: 7px;
}
.kpi .kpi-delta { font-size: 11px; font-weight: 700; margin-top: 9px; display: inline-flex; gap: 4px; align-items: center;
  font-family: 'JetBrains Mono', monospace; }
.kpi.up .kpi-delta   { color: var(--green); }
.kpi.down .kpi-delta { color: var(--red); }
.kpi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gold); border-radius: var(--radius) var(--radius) 0 0;
}
.kpi.c-green::before { background: var(--green); }
.kpi.c-red::before   { background: var(--red); }
.kpi.c-navy::before  { background: var(--navy); }
.kpi.c-amber::before { background: var(--amber); }

/* Gauge / donut */
.chart-center { display: flex; align-items: center; justify-content: center; }
.gauge-val { font-family: 'Bebas Neue', serif; font-size: 30px; fill: var(--navy); }
.gauge-sub { font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: 1.5px;
  fill: var(--textM); text-transform: uppercase; }
.donut-total { font-family: 'Bebas Neue', serif; font-size: 28px; fill: var(--navy); }
.donut-sub   { font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: 1.5px;
  fill: var(--textM); text-transform: uppercase; }

/* Legend */
.chart-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.chart-legend .lg { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); }
.chart-legend .sw { width: 11px; height: 11px; border-radius: 2px; flex-shrink: 0; }
.chart-legend .lg .v { margin-left: auto; font-weight: 700; color: var(--navy);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; }

/* Horizontal bars */
.hbar { display: grid; grid-template-columns: 130px 1fr 54px; align-items: center; gap: 10px;
  margin-bottom: 10px; font-size: 12px; }
.hbar .hb-lbl { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar .hb-track { background: var(--cardAlt); border-radius: 3px; height: 16px; overflow: hidden; }
.hbar .hb-fill { height: 100%; border-radius: 3px; transition: width .5s ease; }
.hbar .hb-val { text-align: right; font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--navy); }
.dash-flex { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 900px) {
  .dash-grid { grid-template-columns: repeat(6, 1fr); }
  .span-3 { grid-column: span 3; }
  .span-4, .span-5 { grid-column: span 6; }
  .span-6, .span-7, .span-8 { grid-column: span 6; }
  .span-12 { grid-column: span 6; }
}
@media (max-width: 560px) {
  .dash-grid { grid-template-columns: repeat(2, 1fr); }
  [class*="span-"] { grid-column: span 2; }
  .hbar { grid-template-columns: 92px 1fr 44px; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 700px) {
  .main    { padding: 14px 10px; }
  .hdr, .nav { padding: 0 12px; }
  .stats-strip, .admin-stats { grid-template-columns: repeat(2, 1fr); }
  .login-card { padding: 32px 24px; }
  .course-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* Nav — tighter padding so all 5 tabs fit without horizontal scroll */
  .nav-tab { padding: 12px 10px; font-size: 9px; letter-spacing: 0.8px; }

  /* Header — stack user info below logo on very narrow screens */
  .hdr { flex-wrap: wrap; gap: 6px; min-height: unset; padding: 8px 12px; }
  .hdr-user { font-size: 10px; max-width: 140px; }

  /* Page title — smaller on mobile */
  .pg-title { font-size: 22px; }

  /* Stats strip — single column on very narrow */
  .stats-strip, .admin-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-card { padding: 12px; }
  .stat-value { font-size: 22px; }

  /* Tables — ensure horizontal scroll container is always present */
  .table-wrap, .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Table action buttons — prevent wrapping overflow */
  td .btn { white-space: nowrap; font-size: 10px; padding: 4px 8px; }

  /* Report sub-tab bar — scrollable on mobile */
  .tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .tab-btn { white-space: nowrap; padding: 8px 12px; font-size: 11px; }

  /* Course cards — full width already, just ensure padding works */
  .course-card { padding: 12px; }
  .course-card-header { gap: 10px; }
  .course-thumb { width: 48px; height: 48px; }

  /* Assign panel — full width */
  .assign-panel { max-width: 100%; }

  /* Modal — full-screen on mobile */
  .modal { width: 100%; max-width: 100%; border-radius: 12px 12px 0 0; }
  .modal-overlay { align-items: flex-end; }
}
/* ════════════════════════════════════════════════════════
   POPIA Unit Styles — append to assets/css/styles.css
   ════════════════════════════════════════════════════════
   These styles control the rendering of POPIA course unit
   content_html inside the .text-unit container in course.php.
   ════════════════════════════════════════════════════════ */

/* ── POPIA Unit Container ──────────────────────────────── */
.popi-unit h2 {
  font-size: 20px;
  font-weight: 800;
  color: #1b2f4e;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid #dde3ec;
}
.popi-unit h3 {
  font-size: 15px;
  font-weight: 700;
  color: #1b2f4e;
  margin: 22px 0 10px;
  padding-left: 10px;
  border-left: 3px solid #c0392b;
}
.popi-unit p  { margin-bottom: 12px; line-height: 1.7; }
.popi-unit ul,
.popi-unit ol {
  padding-left: 20px;
  margin-bottom: 14px;
}
.popi-unit li { margin-bottom: 6px; line-height: 1.6; }
.popi-unit strong { color: #1b2f4e; }

/* ── Info Blocks ───────────────────────────────────────── */
.info-block {
  display: flex;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 8px;
  margin: 16px 0;
  font-size: 14px;
  align-items: flex-start;
}
.ib-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

.info-blue  { background: #ebf4ff; border: 1px solid #aed6f1; }
.info-green { background: #eafaf1; border: 1px solid #a9dfbf; }
.info-amber { background: #fef9e7; border: 1px solid #f9e79f; }
.info-red   { background: #fdedec; border: 1px solid #f1948a; }

/* ── Scenario Blocks ───────────────────────────────────── */
.scenario-block {
  background: #f8f9fd;
  border: 2px solid #1b2f4e;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 18px 0;
}
.sb-header {
  font-weight: 700;
  color: #1b2f4e;
  margin-bottom: 8px;
  font-size: 13px;
}
.scenario-block p  { font-size: 14px; margin-bottom: 6px; }
.scenario-block ol { font-size: 14px; padding-left: 18px; }
.scenario-block li { margin-bottom: 4px; }

/* ── Data Tables ───────────────────────────────────────── */
.popi-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 13px;
}
.popi-table th {
  background: #1b2f4e;
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
}
.popi-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #dde3ec;
  vertical-align: top;
  line-height: 1.5;
}
.popi-table tr:last-child td { border-bottom: none; }
.popi-table tr:hover td      { background: #f9fafd; }