/* ==========================================================================
   Discover Talent – LMS UI
   Accessible, keyboard-friendly, SCORM/xAPI-agnostic styles
   ========================================================================== */

/* -------------------- Theme -------------------- */
:root{
  /* surfaces */
  --bg:#0b1024;
  --bg2:#0f172a;
  --surface:#111827;
  --card:#0f172a;
  --line:#263146;

  /* text */
  --text:#e5e7eb;          /* test contrast on backgrounds */
  --muted:#9ca3af;         /* adjust if it fails contrast with your content */
  --text-dark:#1f2937;

  /* brand */
  --brand:#2563eb;
  --brand2:#7c3aed;
  --brand-text:#ffffff;    /* high-contrast on brand backgrounds */

  /* states */
  --ok:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;

  /* layout */
  --radius:16px;
  --radius-sm:12px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}

/* help form controls adopt dark colors where supported */
:root{ color-scheme: dark; }

/* -------------------- Base / Typography -------------------- */
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial;
  background:
    radial-gradient(1200px 600px at 10% -20%, rgba(37,99,235,.18) 0, transparent 60%),
    radial-gradient(1000px 500px at 110% -10%, rgba(124,58,237,.18) 0, transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2) 40%);
  color:var(--text);
  line-height:1.6;
}
a{color:#93c5fd;text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}

.wrap{max-width:1100px;margin:0 auto;padding:24px}
.prose{max-width:65ch;line-height:1.6}

/* visually hidden but accessible */
.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;
}

/* -------------------- Layout blocks -------------------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 18px}
.logo{font-weight:800;letter-spacing:.2px}

.card{
  background:rgba(17,24,39,.82);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.full{grid-column:span 12}
.cols{display:grid;grid-template-columns:2.2fr 1fr;gap:16px}
@media (max-width:900px){.cols{grid-template-columns:1fr}}

/* -------------------- Form controls -------------------- */
.field{display:flex;flex-direction:column;gap:8px;margin:10px 0}
label{font-size:.95rem}
.input{
  width:100%;
  padding:12px 14px;
  background:#0b1222;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:12px;
  outline:none;
  transition:.18s border-color ease, .18s box-shadow ease;
}
.input::placeholder{color:#7b89a6}
.input:focus-visible{
  border-color:#36507a;
  box-shadow:0 0 0 3px rgba(37,99,235,.35);
  outline:none;
}

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:12px;border:1px solid var(--line);
  background:#172033;color:var(--text);
  cursor:pointer;
  transition:.18s transform ease,.18s background ease,.18s border-color ease,.18s box-shadow ease;
  text-decoration:none;
}
.btn:hover{transform:translateY(-1px);border-color:#36507a}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn:disabled{opacity:.6;cursor:not-allowed}

.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand2));color:var(--brand-text);border:none}
.btn.primary:hover{filter:brightness(1.08)}
.btn.success{background:linear-gradient(90deg,var(--ok),#84cc16);color:var(--text-dark);border:none}
.btn.warn{background:linear-gradient(90deg,#fbbf24,var(--warn));color:#111827;border:none}
.btn.danger{background:linear-gradient(90deg,#f87171,var(--danger));color:#111827;border:none}

/* -------------------- Tabs -------------------- */
.tabs{display:flex;gap:8px;margin-bottom:12px}
.tab{
  padding:8px 14px;border:1px solid var(--line);
  border-radius:999px;background:#1b253b;color:var(--text);
  cursor:pointer;
}
.tab.active{background:linear-gradient(90deg,var(--brand),var(--brand2));border:none;color:var(--brand-text)}
.tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* -------------------- Course cards -------------------- */
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.course{
  border:1px solid var(--line);
  background:#111827;border-radius:16px;overflow:hidden;
}
.thumb{
  height:140px;width:100%;object-fit:cover;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
}
.course .body{padding:12px 14px}
.title{font-weight:700;margin:0 0 6px}
.muted{color:var(--muted);font-size:13px}

/* course state visuals */
.course.completed .thumb{border-top:4px solid var(--ok);box-shadow:0 0 0 2px rgba(34,197,94,.35) inset}
.course.completed .title{color:var(--ok)}
.course.in-progress{border-color:rgba(37,99,235,.6)}
.course.locked{opacity:.6;pointer-events:none}

/* progress */
.progress{height:8px;background:#1f2a3e;border-radius:10px;overflow:hidden;margin:10px 0 8px}
.bar{height:100%;background:linear-gradient(90deg,var(--ok),#84cc16);width:0%;transition:width .6s ease}

/* "empty state" blocks */
.empty{
  text-align:center;padding:30px;border:1px dashed var(--line);
  border-radius:16px;background:rgba(17,24,39,.5)
}

/* -------------------- Accessibility helpers -------------------- */
/* High-contrast / Windows HC mode */
@media (forced-colors: active){
  *{forced-color-adjust:auto}
  .btn,.input,.card,.tab{border:1px solid CanvasText}
  .btn:focus-visible,.tab:focus-visible,a:focus-visible{outline:2px solid CanvasText}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

/* Small utilities */
.text-center{text-align:center}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}

/* -------------------- Hero (login left panel) -------------------- */
.hero{
  min-height:420px;
  background:
    radial-gradient(500px 260px at 20% 10%, rgba(37,99,235,.35) 0, transparent 60%),
    radial-gradient(400px 220px at 80% 0%, rgba(124,58,237,.35) 0, transparent 60%),
    linear-gradient(135deg,#0d142b,#0f203f);
  border-radius:var(--radius);
}
.bullet{display:flex;gap:10px;align-items:flex-start}
.dot{width:8px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand2));margin-top:7px}