/* ==========================================================
   Buku Induk Siswa — sistem desain
   Palet: tinta teal gelap (sidebar), teal (aksi), kuning pensil (penanda)
   Font : Plus Jakarta Sans
   ========================================================== */
:root{
  --brand:#0f766e;--brand-d:#115e59;--brand-l:#e6f6f3;--brand-xl:#f3fbf9;
  --ink:#0b1c20;--text:#15282c;--muted:#5d7176;--line:#dde5e7;--line-2:#eef2f3;--bg:#f2f5f5;--card:#fff;
  --pencil:#f2b01e;--warn:#b45309;--warn-l:#fef3c7;--bad:#be123c;--bad-l:#ffe4e9;--ok:#047857;--ok-l:#d9f7ea;--info:#0369a1;--info-l:#e0f2fe;
  --r:12px;--sh:0 1px 2px rgba(11,28,32,.05),0 6px 18px -8px rgba(11,28,32,.10);
}
[x-cloak]{display:none!important}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- tombol ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:var(--brand);color:#fff;border:1px solid transparent;border-radius:10px;padding:.5rem 1rem;font-weight:600;font-size:.9rem;cursor:pointer;min-height:42px;text-decoration:none;transition:background .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{background:var(--brand-d)}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{background:var(--brand-xl);border-color:#b7dcd6;color:var(--brand-d)}
.btn.soft{background:var(--brand-l);color:var(--brand-d)}.btn.soft:hover{background:#d3efe9}
.btn.danger{background:var(--bad)}.btn.danger:hover{background:#9f1239}
.btn.sm{min-height:36px;padding:.3rem .75rem;font-size:.82rem;border-radius:8px}
.ib{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:9px;color:var(--muted);background:transparent;border:0;cursor:pointer;transition:background .15s,color .15s}
.ib:hover{background:var(--brand-l);color:var(--brand-d)}.ib.red:hover{background:var(--bad-l);color:var(--bad)}

/* ---------- form ---------- */
.inp{width:100%;border:1px solid #cdd8da;border-radius:10px;padding:.5rem .7rem;font-size:.94rem;background:#fff;min-height:42px;color:var(--text);transition:border-color .15s,box-shadow .15s}
.inp::placeholder{color:#98a8ab}
.inp:hover{border-color:#aebfc2}
.inp:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,118,110,.18)}
.lbl{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:.25rem}
.hint{font-size:.8rem;color:var(--muted)}
select.inp{padding-right:2rem}

/* ---------- kartu ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.15rem;box-shadow:var(--sh)}
.card.flat{box-shadow:none}
.card.tip{background:var(--brand-xl);border-color:#c4e6e0;box-shadow:none}
.card h2,.h2{font-size:1rem;font-weight:700;color:var(--ink);letter-spacing:-.005em}
.ph{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.9rem;margin-bottom:1.25rem}
.ph h1{font-size:1.65rem;line-height:1.2;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.ph p{color:var(--muted);font-size:.92rem;margin-top:.2rem;max-width:60ch}
.ph-act{display:flex;flex-wrap:wrap;gap:.5rem}

.stat{display:flex;gap:.85rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem;box-shadow:var(--sh)}
.stat .ico{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--brand-l);color:var(--brand-d)}
.stat b{display:block;font-size:1.55rem;line-height:1.1;color:var(--ink);font-weight:800;letter-spacing:-.02em}
.stat span{font-size:.8rem;color:var(--muted)}

/* ---------- chip & badge ---------- */
.chip{display:inline-flex;align-items:center;gap:.25rem;padding:.12rem .6rem;border-radius:999px;background:#e8eef0;color:#40545a;font-size:.74rem;font-weight:600;white-space:nowrap}
.chip.ok{background:var(--ok-l);color:var(--ok)}.chip.warn{background:var(--warn-l);color:var(--warn)}.chip.bad{background:var(--bad-l);color:var(--bad)}.chip.info{background:var(--info-l);color:var(--info)}
.avatar{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.8rem;background:var(--brand-l);color:var(--brand-d)}

/* ---------- tabel ---------- */
.tbl{border-collapse:collapse;width:100%;background:#fff;font-size:.9rem}
.tbl th,.tbl td{border-bottom:1px solid var(--line-2);padding:.65rem .75rem;vertical-align:middle}
.tbl th{background:#f6f9f9;font-weight:600;font-size:.76rem;color:var(--muted);text-align:left;white-space:nowrap}
.tbl tbody tr:hover td{background:#fafcfc}
.tbl.c th,.tbl.c td{text-align:center}
.nl th,.nl td{text-align:center;border:1px solid var(--line)}.nl .low{color:var(--bad)}.nl .gh td{background:#f1f6f6;font-weight:700;text-align:left}
.lnk{color:var(--brand);background:none;border:0;cursor:pointer;font-size:.9rem;padding:0;font-weight:600}.lnk:hover{text-decoration:underline}.lnk.red{color:var(--bad)}

/* ---------- bar kecil & donat ---------- */
.b2{display:grid;grid-template-columns:minmax(90px,38%) 1fr auto;gap:.7rem;align-items:center;margin:.5rem 0;font-size:.84rem}
.b2>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.b2>div{background:var(--line-2);border-radius:6px;height:10px;overflow:hidden}
.b2 i{display:block;height:100%;background:var(--brand);border-radius:6px}.b2 b{font-weight:700;color:var(--ink)}
.meter{height:8px;background:var(--line-2);border-radius:99px;overflow:hidden}.meter>i{display:block;height:100%;border-radius:99px;background:var(--brand);transition:width .25s}
.meter.amber>i{background:var(--pencil)}
.donut{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;flex:none}
.donut>div{width:76px;height:76px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:800;color:var(--ink);font-size:1.1rem}

/* ---------- sidebar: tinta teal + penanda halaman kuning ---------- */
.side{background:linear-gradient(180deg,#0e2529 0%,#0a1b1f 100%);color:#bccfd2}
.side .grp{font-size:.72rem;font-weight:600;color:#6f9096;padding:.9rem .85rem .3rem}
.nv{display:flex;align-items:center;gap:.7rem;padding:.58rem .85rem;border-radius:10px;font-size:.9rem;font-weight:500;color:#b4c8cb;position:relative;transition:background .15s,color .15s;text-decoration:none}
.nv:hover{background:rgba(255,255,255,.07);color:#fff}
.nv.on{background:rgba(255,255,255,.1);color:#fff;font-weight:700}
.nv.on::before{content:"";position:absolute;left:-.75rem;top:7px;bottom:7px;width:6px;border-radius:0 5px 5px 0;background:var(--pencil)}
.brandmark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--pencil);color:#3a2a00}

/* ---------- navigasi seksi biodata ---------- */
.secnav a{display:flex;align-items:center;gap:.6rem;padding:.45rem .65rem;border-radius:9px;font-size:.86rem;color:var(--muted);font-weight:500;text-decoration:none;background:#fff;border:1px solid var(--line)}
@media (min-width:1024px){.secnav a{background:transparent;border-color:transparent}}
.secnav a:hover{background:#fff;color:var(--ink)}
.secnav a.on{background:var(--brand-l);color:var(--brand-d);font-weight:700;border-color:transparent}
.secnav .lt{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:.72rem;font-weight:700;background:#e8eef0;color:#40545a}
.secnav a.on .lt{background:var(--brand);color:#fff}
.sec-h{display:flex;align-items:center;gap:.65rem;margin-bottom:.9rem}
.sec-h .lt{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:.85rem;background:var(--brand);color:#fff}

/* ---------- tab semester & grid nilai ---------- */
.tabs{display:flex;gap:.35rem;overflow-x:auto;padding-bottom:.4rem;margin-bottom:.6rem;scrollbar-width:thin}
.tab{border:1px solid var(--line);background:#fff;padding:.4rem .85rem;border-radius:10px;white-space:nowrap;font-size:.86rem;position:relative;min-height:46px;font-weight:600;color:var(--muted);cursor:pointer;line-height:1.2;transition:background .15s}
.tab small{display:block;font-size:.66rem;font-weight:500;opacity:.8}
.tab:hover{background:var(--brand-xl)}
.tab.on{background:var(--brand);border-color:var(--brand);color:#fff}
.dot{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--pencil)}
.ng{border-collapse:separate;border-spacing:0;width:100%;font-size:.9rem}
.ng th{background:#f6f9f9;font-weight:600;font-size:.76rem;color:var(--muted);padding:.55rem .5rem;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
.ng td{padding:.2rem;border-bottom:1px solid var(--line-2);text-align:center}
.ng td.l,.ng th.l{text-align:left;padding-left:.7rem}
.ng input{width:5rem;min-width:4rem;text-align:center;border:1px solid #d3dee0;border-radius:8px;padding:.4rem .2rem;min-height:40px;background:#fff;font-variant-numeric:tabular-nums}
.ng input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,118,110,.2);background:var(--brand-xl)}
.ng input.low{color:var(--bad);font-weight:700;background:#fff1f3;border-color:#f3b5c0}
.ng tr.gh td{background:#f1f6f6;font-weight:700;text-align:left;padding:.45rem .7rem;font-size:.82rem;color:var(--brand-d)}
.ng .stick{position:sticky;left:0;background:#fff;white-space:nowrap;z-index:1;box-shadow:2px 0 0 var(--line-2)}
.fs{border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem .9rem;background:#fcfdfd}.fs legend{font-weight:700;font-size:.85rem;padding:0 .35rem;color:var(--ink)}.fs label{margin-top:.45rem}

/* ---------- bilah aksi bawah ---------- */
.actbar{position:fixed;bottom:0;left:0;right:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:.7rem 1rem;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end;align-items:center}
@media (min-width:768px){.actbar{left:16rem;padding:.7rem 1.5rem}}

/* ---------- dropzone & langkah ---------- */
.dz{border:2px dashed #b3cfcb;border-radius:14px;background:var(--brand-xl);padding:1.6rem 1rem;text-align:center;cursor:pointer;display:block;transition:background .15s,border-color .15s}
.dz:hover,.dz.over{background:var(--brand-l);border-color:var(--brand)}
.dz .big{width:52px;height:52px;margin:0 auto .6rem;border-radius:14px;background:#fff;display:grid;place-items:center;color:var(--brand);box-shadow:var(--sh)}
.steps{counter-reset:s;display:grid;gap:.75rem}
.steps>li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:.7rem;align-items:start;font-size:.9rem}
.steps>li::before{content:counter(s);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;background:var(--brand);color:#fff}
.seg{display:inline-flex;background:#e6ecee;border-radius:12px;padding:4px;gap:2px}
.seg a,.seg button{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem 1rem;border-radius:9px;font-weight:600;font-size:.88rem;color:var(--muted);text-decoration:none;border:0;background:transparent;cursor:pointer}
.seg .on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* ---------- pratinjau impor ---------- */
tr.r-error td{background:#fff5f6}tr.r-x td{color:#8aa0a5}tr.r-baru td:first-child{box-shadow:inset 3px 0 0 var(--ok)}tr.r-update td:first-child{box-shadow:inset 3px 0 0 var(--info)}tr.r-error td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.empty{text-align:center;padding:2.5rem 1rem;color:var(--muted)}
.empty .ill{width:84px;height:84px;margin:0 auto 1rem;border-radius:24px;background:var(--brand-l);display:grid;place-items:center;color:var(--brand)}

/* ---------- login: halaman buku bergaris ---------- */
.ruled{background-color:#0e2529;background-image:repeating-linear-gradient(0deg,transparent 0 35px,rgba(255,255,255,.055) 35px 36px),linear-gradient(90deg,transparent 0 56px,rgba(242,176,30,.55) 56px 58px,transparent 58px)}

/* ---------- toast ---------- */
.toast{position:fixed;top:1rem;right:1rem;z-index:60;max-width:min(92vw,26rem);display:flex;gap:.6rem;align-items:flex-start;padding:.8rem 1rem;border-radius:12px;color:#fff;box-shadow:0 10px 30px -8px rgba(0,0,0,.35);font-size:.9rem}
.toast.ok{background:#065f46}.toast.err{background:#9f1239}