/* ============================================================
   GetSiap - Coach Dashboard (Learning Experience)
   Dimuat HANYA di belajar.html. Dark-mode aware, reduced-motion aware.
   ============================================================ */

/* ---------- Dark mode: override token global khusus halaman ini ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220; --card:#121b2e; --ink:#e7ecf6; --muted:#8fa0b8;
    --line:#20304e; --brand:#5b93f5; --brand-soft:#15233d;
    --ok:#34d399; --ok-soft:#0d2b22; --warn:#f0b35c; --warn-soft:#2b2213;
    --danger:#f37e74; --danger-soft:#331816;
    --shadow:0 1px 3px rgba(0,0,0,.5),0 8px 30px rgba(0,0,0,.35);
  }
  .topbar{background:#0e1626;border-color:var(--line)}
  .btn{background:#16223a;color:var(--ink);border-color:var(--line)}
  .btn:hover{background:#1b2a47;border-color:#31456b}
  .card,.metric,.coach-card{background:var(--card)}
  .rank-table th{background:var(--card)}
  .modal{background:var(--card);color:var(--ink)}
  .tabs{background:#0e1626}
  .tabs button.on{background:var(--card)}
}

/* ---------- Reveal & animasi ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
.skel{position:relative;overflow:hidden;background:var(--line);border-radius:8px;color:transparent!important;min-height:14px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:shimmer 1.3s infinite}
@media (prefers-color-scheme: dark){.skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ---------- Layout ---------- */
.sec{margin-bottom:30px}
.sec>h2{font-size:19px;margin:0 0 4px;display:flex;align-items:center;gap:8px}
.sec>.sub{color:var(--muted);font-size:13.5px;margin:0 0 14px}
.cardx{background:var(--card,#fff);border:1px solid var(--line);border-radius:16px;
  padding:20px;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
a.cardx{display:block;color:inherit}
.cardx.hov:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}

/* ---------- Hero coach ---------- */
.coach-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin:6px 0 24px}
.coach-hero h1{font-size:clamp(22px,3.4vw,30px);margin:0 0 4px;letter-spacing:-.01em}
.coach-hero p{margin:0;color:var(--muted)}
.streak-chip{display:inline-flex;align-items:center;gap:8px;background:var(--warn-soft);color:var(--warn);
  font-weight:700;font-size:14px;border-radius:100px;padding:8px 16px}

/* ---------- Today's Goal ---------- */
.goal-card{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
  background:linear-gradient(120deg,var(--brand) 0%,#3b82f6 70%,#0ea5b7 130%);color:#fff;
  border-radius:18px;padding:24px 26px;box-shadow:0 10px 30px rgba(24,87,196,.35)}
.goal-card .lab{font-size:13px;opacity:.85;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.goal-card .big{font-size:clamp(24px,3vw,32px);font-weight:800;margin:2px 0 10px}
.goal-meta{display:flex;gap:20px;flex-wrap:wrap;font-size:14px}
.goal-meta b{font-size:17px}
.goal-bar{height:12px;border-radius:8px;background:rgba(255,255,255,.25);overflow:hidden;margin-top:14px}
.goal-bar i{display:block;height:100%;width:0;background:#fff;border-radius:8px;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.goal-count{font-size:13.5px;margin-top:8px;opacity:.95;font-variant-numeric:tabular-nums}
.goal-done{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;margin-top:10px}
.goal-ring{flex:none}

/* ---------- Continue Learning ---------- */
.cont-card{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;border-left:4px solid var(--warn)}
.cont-card .ic{width:40px;height:40px;border-radius:11px;background:var(--warn-soft);color:var(--warn);
  display:flex;align-items:center;justify-content:center;font-size:19px}
.cont-card h3{margin:0;font-size:15.5px}
.cont-meta{font-size:12.5px;color:var(--muted);margin-top:3px;display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Roadmap visual ---------- */
.rm-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.rm-tabs button{padding:8px 14px;border-radius:100px;border:1px solid var(--line);background:var(--card,#fff);
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer}
.rm-tabs button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.rm-track{position:relative;padding-left:26px}
.rm-track::before{content:"";position:absolute;left:9px;top:14px;bottom:14px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--brand),var(--line))}
.rm-node{position:relative;margin-bottom:12px}
.rm-node::before{content:"";position:absolute;left:-24px;top:18px;width:15px;height:15px;border-radius:50%;
  background:var(--card,#fff);border:3px solid var(--line)}
.rm-node.st-done::before{background:var(--ok);border-color:var(--ok)}
.rm-node.st-learn::before{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.rm-node.st-next::before{border-color:var(--brand)}
.rm-node .cardx{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:14px 18px}
.rm-node.st-lock .cardx{opacity:.55}
.rm-node h3{margin:0;font-size:15px}
.rm-info{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:4px}
.rm-status{font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px;white-space:nowrap}
.st-done .rm-status{background:var(--ok-soft);color:var(--ok)}
.st-learn .rm-status{background:var(--brand-soft);color:var(--brand)}
.st-next .rm-status{background:var(--warn-soft);color:var(--warn)}
.st-lock .rm-status{background:var(--line);color:var(--muted)}
.rm-mbar{width:110px;height:7px;border-radius:5px;background:var(--bg);overflow:hidden}
.rm-mbar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--ok));width:0;transition:width .8s ease}

/* ---------- Progress rings ---------- */
.rings{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.ring-card{text-align:center;padding:18px 10px}
.ring-wrap{position:relative;width:92px;height:92px;margin:0 auto 8px}
.ring-wrap svg{transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--line);stroke-width:9}
.ring-fg{fill:none;stroke:url(#ringGrad);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:213.6;stroke-dashoffset:213.6;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1)}
.ring-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:18px;font-variant-numeric:tabular-nums}
.ring-lab{font-size:13px;font-weight:700}
.ring-sub{font-size:11.5px;color:var(--muted)}

/* ---------- Mastery & weak ---------- */
.mast-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.mast-card h3{margin:0 0 2px;font-size:14.5px}
.mast-card .pct{font-size:26px;font-weight:800;
  background:linear-gradient(100deg,var(--brand),#0ea5b7);-webkit-background-clip:text;background-clip:text;color:transparent}
.mast-stats{display:flex;gap:12px;font-size:12px;color:var(--muted);margin:6px 0 10px}
.mast-stats b{color:var(--ink)}
.weak-list{display:flex;gap:10px;flex-wrap:wrap}
.weak-chip{display:inline-flex;align-items:center;gap:8px;background:var(--danger-soft);color:var(--danger);
  border:1px solid color-mix(in srgb,var(--danger) 25%,transparent);border-radius:100px;padding:8px 16px;
  font-size:13px;font-weight:600;text-decoration:none;transition:transform .15s}
.weak-chip:hover{transform:translateY(-2px)}
.reco-card{border-left:4px solid var(--brand);font-size:14.5px;line-height:1.7}
.reco-card b{color:var(--brand)}

/* ---------- Timeline history ---------- */
.tl{position:relative;padding-left:24px}
.tl::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tl-item{position:relative;margin-bottom:12px}
.tl-item::before{content:"";position:absolute;left:-22px;top:16px;width:11px;height:11px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.tl-item .cardx{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 18px;flex-wrap:wrap}
.tl-when{font-size:12px;color:var(--muted)}
.tl-score{font-weight:800;font-size:17px}
.tl-meta{font-size:12.5px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Kalender belajar (GitHub style) ---------- */
.cal-wrap{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.cal-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,13px);gap:3px}
.cal-cell{width:13px;height:13px;border-radius:3px;background:var(--line);cursor:pointer;border:none;padding:0}
.cal-cell.l1{background:color-mix(in srgb,var(--brand) 30%,var(--line))}
.cal-cell.l2{background:color-mix(in srgb,var(--brand) 60%,var(--line))}
.cal-cell.l3{background:var(--brand)}
.cal-cell:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.cal-side{font-size:13px;color:var(--muted);min-width:150px}
.cal-side b{display:block;font-size:22px;color:var(--ink)}
.cal-legend{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);margin-top:8px}

/* ---------- Leaderboard & achievement ---------- */
.lb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ach{text-align:center;opacity:.55}
.ach .em{font-size:30px;filter:grayscale(1)}
.ach .nm{font-size:12.5px;font-weight:600;margin-top:6px}
.soon-pill{font-size:11px;font-weight:700;background:var(--warn-soft);color:var(--warn);border-radius:100px;padding:2px 10px}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:12px;font-size:13.5px;
  box-shadow:0 8px 30px rgba(0,0,0,.25);animation:toastIn .25s ease}
@media (prefers-color-scheme: dark){.toast{background:#e7ecf6;color:#0b1220}}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Modal (review) ---------- */
.overlay{position:fixed;inset:0;background:rgba(10,16,29,.55);display:none;align-items:flex-start;
  justify-content:center;padding:26px 14px;overflow:auto;z-index:80}
.overlay.on{display:flex}
.modal{background:var(--card,#fff);border-radius:16px;width:100%;max-width:720px;padding:24px;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.chip-diff{font-size:10px;font-weight:700;padding:1px 6px;border-radius:5px}
.chip-diff.easy{background:var(--ok-soft);color:var(--ok)}.chip-diff.medium{background:var(--warn-soft);color:var(--warn)}.chip-diff.hard{background:var(--danger-soft);color:var(--danger)}
.empty{color:var(--muted);font-size:14px}

/* ---------- Responsif ---------- */
@media(max-width:760px){
  .goal-card{grid-template-columns:1fr}
  .goal-ring{display:none}
  .cont-card{grid-template-columns:1fr}
  .rm-node .cardx{grid-template-columns:1fr}
  .rm-mbar{width:100%}
}
@media(max-width:400px){
  .cal-grid{grid-template-rows:repeat(7,11px)}
  .cal-cell{width:11px;height:11px}
}

/* ---------- Kunci akses per-jabatan (Belajar SKB) ---------- */
.terkunci{opacity:.6;filter:saturate(.55)}
a.terkunci{cursor:pointer}
a.terkunci.hov:hover{transform:none;border-color:var(--line);box-shadow:var(--shadow)}
.lock-badge{margin-left:6px;font-size:.92em;vertical-align:baseline}
.rm-tab.terkunci,.mast-card.terkunci{position:relative}