/* ============================================================
   TAHFIDZ MTsS JEUMALA AMAL — Stylesheet (token desain Stitch: teal/emerald + navy)
   Mobile-first. Mode gelap: [data-theme="dark"]. Tanpa framework CSS.
   ============================================================ */
:root{
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --arab:'Amiri','Scheherazade New',serif;
  --bg:#f4f7f9;--surface:#fff;--surface2:#f8fafc;--border:#e2e8f0;--border2:#cbd5e1;
  --text:#0f172a;--muted:#64748b;--faint:#94a3b8;
  --primary:#0d9488;--primary-d:#0f766e;--primary-l:#ccfbf1;--primary-ink:#fff;
  --navy:#0b1f3a;--navy2:#12304f;
  --c-emerald:#10b981;--c-indigo:#6366f1;--c-amber:#f59e0b;--c-rose:#f43f5e;--c-sky:#0ea5e9;
  --ok-bg:#dcfce7;--ok:#166534;--warn-bg:#fef3c7;--warn:#92400e;--bad-bg:#ffe4e6;--bad:#9f1239;
  --indigo-bg:#e0e7ff;--indigo:#3730a3;--gray-bg:#f1f5f9;--gray:#475569;--amber-bg:#fef3c7;--amber:#92400e;
  --shadow:0 1px 2px rgba(15,23,42,.05),0 4px 14px rgba(15,23,42,.06);
  --shadow-lg:0 12px 40px rgba(15,23,42,.18);
  --r:14px;--r-sm:10px;--r-lg:20px;
  --nav-h:64px;--side-w:248px;--top-h:60px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
[data-theme="dark"]{
  --bg:#0b1220;--surface:#111a2c;--surface2:#16213a;--border:#223049;--border2:#2d3d5b;
  --text:#e6edf7;--muted:#94a3b8;--faint:#64748b;
  --primary:#2dd4bf;--primary-d:#14b8a6;--primary-l:#0f3b3a;--primary-ink:#04201e;
  --navy:#070d1a;--navy2:#0e1a30;
  --c-emerald:#34d399;--c-indigo:#818cf8;--c-amber:#fbbf24;--c-rose:#fb7185;--c-sky:#38bdf8;
  --ok-bg:#12372a;--ok:#86efac;--warn-bg:#3b2f10;--warn:#fcd34d;--bad-bg:#3d1620;--bad:#fda4af;
  --indigo-bg:#25264f;--indigo:#c7d2fe;--gray-bg:#1b2740;--gray:#cbd5e1;--amber-bg:#3b2f10;--amber:#fcd34d;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);--shadow-lg:0 12px 40px rgba(0,0,0,.6);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.modal-open{overflow:hidden}
h1,h2,h3,h4,h5{margin:0;line-height:1.25;font-weight:800;letter-spacing:-.01em}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--primary-d)}
[data-theme="dark"] a{color:var(--primary)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 55%,transparent);outline-offset:2px;border-radius:8px}
.hide{display:none!important}
.muted{color:var(--muted)}.small{font-size:.8125rem}.xs{font-size:.75rem}.bold{font-weight:700}.right{text-align:right}.center{text-align:center}
.arab{font-family:var(--arab);direction:rtl;line-height:1.7}
.row{display:flex;gap:.75rem;align-items:center}.row.wrap{flex-wrap:wrap}.row.between{justify-content:space-between}.grow{flex:1;min-width:0}
.stack{display:flex;flex-direction:column;gap:.75rem}
.gap-s{gap:.4rem}.mt{margin-top:1rem}.mt-s{margin-top:.5rem}.mb{margin-bottom:1rem}
.trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Ikon Material Symbols */
.ms{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;font-size:22px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased;vertical-align:middle;user-select:none;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
.ms.fill{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.ms.sm{font-size:18px}.ms.lg{font-size:28px}.ms.xl{font-size:44px}
.ms-fallback .ms,.ms-fallback .ms.lg,.ms-fallback .ms.xl,.ms-fallback .ms.sm,.ms-fallback .bottom a .ms{font-size:0!important;width:16px;height:16px;overflow:hidden;text-indent:-9999px}.ms-fallback .ms::before{content:'•';font-size:14px;text-indent:0;display:inline-block}

/* Progres atas */
#topProgress{position:fixed;left:0;top:0;right:0;height:3px;z-index:9999;background:transparent;pointer-events:none;opacity:0;transition:opacity .2s}
#topProgress.on{opacity:1}
#topProgress::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--primary),var(--c-emerald),transparent);animation:bar 1.1s linear infinite}
@keyframes bar{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.spin{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:rot .7s linear infinite;vertical-align:-.15em}
@keyframes rot{to{transform:rotate(360deg)}}

/* ───────── Layar boot & login ───────── */
#boot{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;background:var(--bg);transition:opacity .3s}
#boot.out{opacity:0;pointer-events:none}
.boot-in{text-align:center}
.boot-logo{width:68px;height:68px;border-radius:20px;background:linear-gradient(135deg,var(--primary),var(--c-emerald));display:grid;place-items:center;color:#fff;margin:0 auto 14px;box-shadow:0 10px 30px rgba(13,148,136,.35);animation:pulse 1.6s ease-in-out infinite}
.boot-logo .ms{font-size:36px}
@keyframes pulse{50%{transform:scale(1.06)}}
.login-wrap{min-height:100dvh;display:grid;grid-template-columns:1fr;background:var(--bg)}
.login-hero{display:none;position:relative;overflow:hidden;background:linear-gradient(160deg,var(--navy),var(--navy2) 55%,#0f4c4a);color:#fff;padding:3rem;flex-direction:column;justify-content:space-between}
.login-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(600px 300px at 90% 0,rgba(45,212,191,.28),transparent 60%),radial-gradient(500px 300px at 0 100%,rgba(99,102,241,.25),transparent 60%)}
.login-hero>*{position:relative}
.login-hero .ayat{font-family:var(--arab);font-size:2.1rem;line-height:1.8;direction:rtl;opacity:.95}
.login-main{display:grid;place-items:center;padding:1.25rem}
.login-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.75rem 1.5rem;box-shadow:var(--shadow-lg)}
.brand-mark{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.brand-mark .logo{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--c-emerald));color:#fff;display:grid;place-items:center;flex:none;overflow:hidden}
.brand-mark .logo img{width:100%;height:100%;object-fit:cover}
.brand-mark b{display:block;font-size:1.0625rem}.brand-mark span{font-size:.8125rem;color:var(--muted)}
@media(min-width:900px){.login-wrap{grid-template-columns:1.1fr 1fr}.login-hero{display:flex}}

/* ───────── Form ───────── */
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem;min-width:0}
.field>label,.lbl{font-size:.8125rem;font-weight:700;color:var(--text)}
.field .hint{font-size:.75rem;color:var(--muted)}
.field .err{font-size:.75rem;color:var(--bad);font-weight:600}
.input,.select,.textarea{width:100%;min-height:46px;padding:.65rem .85rem;border:1.5px solid var(--border2);border-radius:var(--r-sm);background:var(--surface);color:var(--text);transition:border-color .15s,box-shadow .15s}
.input::placeholder,.textarea::placeholder{color:var(--faint)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--faint)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 20%,transparent)}
.input.invalid{border-color:var(--c-rose)}
.textarea{min-height:84px;resize:vertical}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;padding-right:2.2rem}
.input-ic{position:relative}.input-ic>.ms{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.input-ic .input{padding-left:2.6rem}
.input-ic .eye{position:absolute;right:.35rem;top:50%;transform:translateY(-50%)}
.grid2{display:grid;grid-template-columns:1fr;gap:0 .85rem}
@media(min-width:560px){.grid2{grid-template-columns:1fr 1fr}}
.seg{display:inline-flex;background:var(--gray-bg);border-radius:12px;padding:3px;gap:2px;max-width:100%;overflow:auto}
.seg button{border:0;background:transparent;padding:.5rem .9rem;border-radius:9px;font-weight:700;font-size:.8125rem;color:var(--muted);cursor:pointer;white-space:nowrap;min-height:38px}
.seg button.on{background:var(--surface);color:var(--primary-d);box-shadow:var(--shadow)}
[data-theme="dark"] .seg button.on{color:var(--primary)}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{border:1.5px solid var(--border2);background:var(--surface);color:var(--text);border-radius:999px;padding:.4rem .85rem;font-weight:700;font-size:.8125rem;cursor:pointer;min-height:38px;display:inline-flex;align-items:center;gap:.35rem}
.chip.on{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.chip:hover:not(.on){border-color:var(--primary)}

/* ───────── Tombol ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;padding:.55rem 1.1rem;border-radius:var(--r-sm);border:1.5px solid var(--border2);background:var(--surface);color:var(--text);font-weight:700;font-size:.875rem;cursor:pointer;transition:transform .08s,background .15s,box-shadow .15s,border-color .15s;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.btn:hover{border-color:var(--primary);background:var(--surface2)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-d));border-color:transparent;color:var(--primary-ink);box-shadow:0 4px 14px color-mix(in srgb,var(--primary) 38%,transparent)}
.btn-primary:hover{background:linear-gradient(135deg,var(--primary-d),var(--primary-d));border-color:transparent}
[data-theme="dark"] .btn-primary{color:var(--primary-ink)}
.btn-danger{background:var(--c-rose);border-color:transparent;color:#fff}.btn-danger:hover{background:#e11d48;border-color:transparent}
.btn-wa{background:#25d366;border-color:transparent;color:#052e16}.btn-wa:hover{background:#1ebe5b;border-color:transparent}
.btn-ghost{border-color:transparent;background:transparent}.btn-ghost:hover{background:var(--gray-bg);border-color:transparent}
.btn-sm{min-height:36px;padding:.35rem .75rem;font-size:.8125rem}
.btn-block{width:100%}.btn-lg{min-height:52px;font-size:1rem;border-radius:12px}
.icon-btn{width:44px;height:44px;border-radius:12px;border:0;background:transparent;display:inline-grid;place-items:center;cursor:pointer;color:var(--muted);flex:none;position:relative}
.icon-btn:hover{background:var(--gray-bg);color:var(--text)}
.icon-btn.sm{width:36px;height:36px}
.t-act{border:0;background:none;color:inherit;font-weight:800;text-decoration:underline;cursor:pointer;margin-left:.4rem}

/* ───────── Kerangka aplikasi ───────── */
#app{min-height:100dvh}
.shell{display:none}
.shell.on{display:block}
.side{display:none}
.topbar{position:sticky;top:0;z-index:60;height:var(--top-h);display:flex;align-items:center;gap:.5rem;padding:0 .9rem;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--border)}
.topbar .ttl{font-weight:800;font-size:1.0625rem;flex:1;min-width:0}
.topbar .ttl small{display:block;font-weight:600;font-size:.7rem;color:var(--muted);margin-top:-2px}
.topbar .brand{display:flex;align-items:center;gap:.55rem;min-width:0}
.topbar .brand .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--c-emerald));display:grid;place-items:center;color:#fff;flex:none;overflow:hidden}
.topbar .brand .logo img{width:100%;height:100%;object-fit:cover}
.topbar .brand .logo .ms{font-size:20px}
.main{padding:1rem .9rem calc(var(--nav-h) + var(--safe-b) + 28px);max-width:1280px;margin:0 auto}
.page{animation:fade .25s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.page-head h2{font-size:1.3rem}
.page-head p{color:var(--muted);font-size:.875rem;margin-top:.15rem}
.page-head .acts{display:flex;gap:.5rem;flex-wrap:wrap}

/* Navigasi bawah (mobile) */
.bottom{position:fixed;left:0;right:0;bottom:0;z-index:70;height:calc(var(--nav-h) + var(--safe-b));padding-bottom:var(--safe-b);background:var(--surface);border-top:1px solid var(--border);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center;box-shadow:0 -6px 24px rgba(15,23,42,.06)}
.bottom a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:var(--nav-h);color:var(--muted);font-size:.6875rem;font-weight:700;text-decoration:none;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.bottom a .ms{font-size:24px;transition:transform .15s}
.bottom a.on{color:var(--primary-d)}
[data-theme="dark"] .bottom a.on{color:var(--primary)}
.bottom a.on .ms{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;transform:translateY(-1px)}
.bottom a.on::before{content:'';position:absolute;top:0;width:28px;height:3px;border-radius:0 0 4px 4px;background:var(--primary)}
.bottom a.fab{position:relative}
.bottom a.fab .fab-c{width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,var(--primary),var(--primary-d));color:var(--primary-ink);display:grid;place-items:center;margin-top:-26px;box-shadow:0 8px 22px color-mix(in srgb,var(--primary) 50%,transparent);border:4px solid var(--bg)}
.bottom a.fab .fab-c .ms{font-size:28px}
.bottom a.fab::before{display:none}
.bottom a.fab span.lb{margin-top:-1px}

/* Desktop */
@media(min-width:1000px){
  .shell.on{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100dvh}
  .side{display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;background:linear-gradient(180deg,var(--navy),var(--navy2));color:#cbd5e1;padding:1.1rem .85rem;overflow-y:auto}
  .side .brand{display:flex;align-items:center;gap:.7rem;padding:.25rem .5rem 1.1rem;color:#fff}
  .side .brand .logo{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--primary),var(--c-emerald));display:grid;place-items:center;flex:none;overflow:hidden;color:#fff}
  .side .brand .logo img{width:100%;height:100%;object-fit:cover}
  .side .brand b{display:block;font-size:.95rem;line-height:1.2}.side .brand span{font-size:.7rem;opacity:.7}
  .side nav{display:flex;flex-direction:column;gap:2px;flex:1}
  .side nav .grp{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:#64748b;font-weight:800;padding:.9rem .75rem .35rem}
  .side nav a{display:flex;align-items:center;gap:.75rem;padding:.65rem .75rem;border-radius:11px;color:#cbd5e1;text-decoration:none;font-weight:600;font-size:.875rem;cursor:pointer;transition:background .15s}
  .side nav a:hover{background:rgba(255,255,255,.07);color:#fff}
  .side nav a.on{background:linear-gradient(135deg,rgba(45,212,191,.25),rgba(45,212,191,.1));color:#fff;box-shadow:inset 3px 0 0 #2dd4bf}
  .side nav a.on .ms{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;color:#2dd4bf}
  .side .me{display:flex;align-items:center;gap:.65rem;padding:.7rem;border-radius:13px;background:rgba(255,255,255,.06);margin-top:.75rem;color:#fff}
  .side .me b{display:block;font-size:.8125rem}.side .me span{font-size:.7rem;opacity:.7}
  .bottom{display:none}
  .topbar .brand{display:none}
  .main{padding:1.5rem 2rem 3rem}
  .page-head h2{font-size:1.55rem}
}

/* ───────── Kartu, KPI, badge ───────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:1rem}
.card.flat{box-shadow:none}.card.pad0{padding:0;overflow:hidden}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.75rem}
.card-h h3{font-size:.95rem}.card-h .sub{font-size:.75rem;color:var(--muted);font-weight:600}
.grid{display:grid;gap:.85rem}
.kpis{grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{display:flex;flex-direction:column;gap:.15rem;position:relative;overflow:hidden}
.kpi .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;margin-bottom:.35rem}
.kpi .v{font-size:1.65rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.kpi .l{font-size:.75rem;color:var(--muted);font-weight:600}
.kpi .d{font-size:.7rem;color:var(--muted);margin-top:.15rem}
.ic-teal{background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary-d)}
.ic-indigo{background:var(--indigo-bg);color:var(--indigo)}.ic-amber{background:var(--amber-bg);color:var(--amber)}.ic-rose{background:var(--bad-bg);color:var(--bad)}.ic-ok{background:var(--ok-bg);color:var(--ok)}
[data-theme="dark"] .ic-teal{color:var(--primary)}
.cols{display:grid;gap:.85rem;grid-template-columns:1fr}
@media(min-width:1000px){.cols.c21{grid-template-columns:2fr 1fr}.cols.c12{grid-template-columns:1fr 2fr}.cols.c11{grid-template-columns:1fr 1fr}.cols.c111{grid-template-columns:repeat(3,1fr)}}
.chart-box{position:relative;height:240px}.chart-box.tall{height:300px}
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .6rem;border-radius:999px;font-size:.7rem;font-weight:800;white-space:nowrap}
.b-ok{background:var(--ok-bg);color:var(--ok)}.b-warn,.b-amber{background:var(--warn-bg);color:var(--warn)}.b-bad{background:var(--bad-bg);color:var(--bad)}.b-indigo{background:var(--indigo-bg);color:var(--indigo)}.b-gray{background:var(--gray-bg);color:var(--gray)}.b-teal{background:var(--primary-l);color:var(--primary-d)}
[data-theme="dark"] .b-teal{color:var(--primary)}
.stars{color:#f59e0b;letter-spacing:1px;font-size:.9rem}.stars i{font-style:normal;color:var(--border2)}
.progress{height:8px;border-radius:99px;background:var(--gray-bg);overflow:hidden}
.progress i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--c-emerald),var(--primary));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.progress.amber i{background:linear-gradient(90deg,#fbbf24,#f59e0b)}.progress.rose i{background:linear-gradient(90deg,#fb7185,#f43f5e)}
.avatar{width:42px;height:42px;border-radius:50%;display:inline-grid;place-items:center;flex:none;font-size:.8125rem;font-weight:800;color:#fff;background-size:cover;background-position:center;position:relative;overflow:hidden}
.avatar.sm{width:32px;height:32px;font-size:.7rem}.avatar.lg{width:64px;height:64px;font-size:1.2rem}.avatar.xl{width:96px;height:96px;font-size:1.7rem}
.avatar.has-foto b{display:none}
.av0{background:linear-gradient(135deg,#14b8a6,#0d9488)}.av1{background:linear-gradient(135deg,#818cf8,#6366f1)}.av2{background:linear-gradient(135deg,#fbbf24,#f59e0b)}.av3{background:linear-gradient(135deg,#fb7185,#f43f5e)}.av4{background:linear-gradient(135deg,#38bdf8,#0ea5e9)}

/* Insight */
.insight{background:linear-gradient(135deg,var(--navy),#0f4c4a);color:#e6fffb;border:0;position:relative;overflow:hidden}
.insight::after{content:'';position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(45,212,191,.35),transparent 70%)}
.insight h3{color:#fff}.insight ul{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem;position:relative}
.insight li{display:flex;gap:.55rem;font-size:.84rem;line-height:1.5}.insight li .ms{color:#5eead4;flex:none;margin-top:1px}
.hafizh{display:flex;gap:.85rem;align-items:center}
.hafizh .trophy{width:44px;height:44px;border-radius:14px;background:var(--amber-bg);color:var(--amber);display:grid;place-items:center;flex:none}

/* List item */
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:.75rem;padding:.7rem 0;border-bottom:1px solid var(--border)}
.li:last-child{border-bottom:0}
.li.click{cursor:pointer;margin:0 -.5rem;padding:.7rem .5rem;border-radius:12px}.li.click:hover{background:var(--surface2)}
.li .main2{flex:1;min-width:0}.li .t1{font-weight:700;font-size:.9rem}.li .t2{font-size:.78rem;color:var(--muted)}
.set-ayat{font-weight:700}

/* Tabel */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:.84rem}
.tbl th{position:sticky;top:0;text-align:left;background:var(--surface2);color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;padding:.65rem .75rem;border-bottom:1px solid var(--border);white-space:nowrap}
.tbl td{padding:.65rem .75rem;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tbody tr:hover{background:var(--surface2)}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .acts{white-space:nowrap;text-align:right}

/* Toolbar & filter */
.toolbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:.85rem}
.toolbar .search{flex:1 1 220px;min-width:0}
.toolbar .select{width:auto;min-width:130px}
.filters{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media(min-width:720px){.filters{grid-template-columns:repeat(4,1fr)}}
.pager{display:flex;justify-content:space-between;align-items:center;padding:.75rem;gap:.5rem}

/* Kartu murid mobile */
.mcards{display:grid;gap:.6rem;grid-template-columns:1fr}
@media(min-width:720px){.mcards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.mcards{grid-template-columns:repeat(3,1fr)}}
.mcard{display:flex;gap:.8rem;align-items:center;padding:.85rem;cursor:pointer;transition:transform .12s,box-shadow .12s}
.mcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.only-m{display:block}.only-d{display:none}
@media(min-width:900px){.only-m{display:none}.only-d{display:block}}

/* Peta juz */
.juzmap{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
@media(max-width:480px){.juzmap{grid-template-columns:repeat(6,1fr)}}
.jz{aspect-ratio:1;border-radius:9px;display:grid;place-items:center;font-size:.72rem;font-weight:800;border:1.5px solid var(--border2);color:var(--muted);position:relative;overflow:hidden;background:var(--surface2)}
.jz i{position:absolute;left:0;bottom:0;right:0;background:color-mix(in srgb,var(--c-emerald) 55%,transparent);z-index:0}
.jz span{position:relative;z-index:1}
.jz.full{background:var(--c-emerald);border-color:var(--c-emerald);color:#fff}.jz.full i{display:none}

/* Setoran cepat */
.quick{max-width:620px;margin:0 auto}
.pick{display:flex;align-items:center;gap:.75rem;padding:.8rem;border:1.5px solid var(--border2);border-radius:var(--r);background:var(--surface);cursor:pointer;width:100%;text-align:left;min-height:64px}
.pick:hover{border-color:var(--primary)}
.nilai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
.nilai-opt{border:1.5px solid var(--border2);border-radius:var(--r);padding:.7rem .4rem;text-align:center;cursor:pointer;background:var(--surface);min-height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem}
.nilai-opt b{font-size:.9rem}.nilai-opt small{font-size:.66rem;color:var(--muted);line-height:1.25}
.nilai-opt.on.ok{border-color:var(--c-emerald);background:var(--ok-bg)}.nilai-opt.on.warn{border-color:var(--c-amber);background:var(--warn-bg)}.nilai-opt.on.bad{border-color:var(--c-rose);background:var(--bad-bg)}
.jenis-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.jenis-opt{border:1.5px solid var(--border2);border-radius:var(--r-sm);padding:.6rem .3rem;text-align:center;font-weight:800;font-size:.84rem;cursor:pointer;background:var(--surface);min-height:48px}
.jenis-opt.on{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.stepper{display:flex;align-items:center;gap:.4rem}
.stepper .input{text-align:center;font-weight:800;font-size:1.1rem;padding:.5rem}
.stepper .icon-btn{border:1.5px solid var(--border2);background:var(--surface)}
.sticky-save{position:sticky;bottom:calc(var(--nav-h) + var(--safe-b) + 8px);z-index:20;padding-top:.5rem}
@media(min-width:1000px){.sticky-save{bottom:12px}}
.sesi-bar{display:flex;gap:.4rem;align-items:center}
.ayat-prev{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 12%,transparent),transparent);border:1.5px dashed color-mix(in srgb,var(--primary) 45%,transparent);border-radius:var(--r);padding:.8rem;text-align:center}
.ayat-prev .arab{font-size:1.6rem;color:var(--primary-d)}
[data-theme="dark"] .ayat-prev .arab{color:var(--primary)}

/* Modal */
#modalRoot{position:relative;z-index:3000}
.overlay{position:fixed;inset:0;background:rgba(8,15,30,.55);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .2s;z-index:3000}
.overlay.in{opacity:1}
.dialog{background:var(--surface);width:100%;max-height:92dvh;display:flex;flex-direction:column;border-radius:22px 22px 0 0;box-shadow:var(--shadow-lg);transform:translateY(40px);transition:transform .25s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.overlay.in .dialog{transform:none}
.dlg-grip{width:40px;height:4px;border-radius:4px;background:var(--border2);margin:8px auto 0;flex:none}
.dlg-head{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem .5rem}
.dlg-ti{flex:1;min-width:0}.dlg-ti h3{font-size:1.05rem}.dlg-ti p{font-size:.8rem;color:var(--muted)}
.dlg-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--primary-l);color:var(--primary-d);flex:none}
.dlg-ic.bad{background:var(--bad-bg);color:var(--bad)}
.dlg-body{padding:.5rem 1rem 1rem;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}
.dlg-foot{display:flex;gap:.6rem;justify-content:flex-end;padding:.75rem 1rem calc(.75rem + var(--safe-b));border-top:1px solid var(--border);background:var(--surface);flex-wrap:wrap}
.dlg-foot .btn{flex:1 1 auto}
@media(min-width:700px){
  .overlay{align-items:center;padding:1rem}
  .dialog{border-radius:20px;max-width:560px;transform:translateY(14px) scale(.98)}
  .dialog.sm{max-width:420px}.dialog.lg{max-width:780px}.dialog.xl{max-width:980px}
  .dlg-grip{display:none}.dlg-foot .btn{flex:0 0 auto}
}
.preview-frame{background:#fff;color:#0f172a;border:1px solid var(--border);border-radius:12px;padding:14px;max-height:56dvh;overflow:auto;font-size:11px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.02)}
.preview-frame table{border-collapse:collapse;width:100%}
.wa-bubble{background:#dcf8c6;color:#0b141a;border-radius:12px 12px 12px 2px;padding:.7rem .85rem;font-size:.84rem;white-space:pre-wrap;word-break:break-word;max-height:42dvh;overflow:auto;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.wa-bg{background:#e5ddd5;border-radius:12px;padding:.85rem}
[data-theme="dark"] .wa-bg{background:#0b141a}[data-theme="dark"] .wa-bubble{background:#005c4b;color:#e9edef}

/* Toast */
#toasts{position:fixed;z-index:9000;left:.75rem;right:.75rem;bottom:calc(var(--nav-h) + var(--safe-b) + 14px);display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none}
@media(min-width:1000px){#toasts{left:auto;right:1.25rem;bottom:1.25rem;align-items:flex-end;width:380px}}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:.65rem;background:var(--navy);color:#f1f5f9;border-radius:14px;padding:.7rem .75rem;width:100%;max-width:440px;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(12px) scale(.98);transition:all .25s}
.toast.in{opacity:1;transform:none}
.toast .t-ic{flex:none;margin-top:1px}.toast .t-tx{flex:1;font-size:.84rem;font-weight:600;line-height:1.45;padding-top:2px}
.toast .t-x{border:0;background:none;color:#94a3b8;cursor:pointer;padding:0;flex:none}
.t-ok .t-ic{color:#34d399}.t-err .t-ic{color:#fb7185}.t-warn .t-ic{color:#fbbf24}.t-info .t-ic{color:#38bdf8}
.t-err{background:#4c0519}

/* Kerangka, kosong, galat */
.skel-wrap{display:flex;flex-direction:column;gap:.75rem}
.skel{height:84px;border-radius:var(--r);background:linear-gradient(90deg,var(--gray-bg) 25%,var(--surface2) 50%,var(--gray-bg) 75%);background-size:200% 100%;animation:shim 1.3s infinite}
@keyframes shim{to{background-position:-200% 0}}
.empty{text-align:center;padding:2.5rem 1rem;color:var(--muted)}
.empty .ms{color:var(--faint)}.empty h4{color:var(--text);margin:.5rem 0 .2rem}.empty p{font-size:.84rem;max-width:340px;margin:0 auto .9rem}
.alert{display:flex;gap:.65rem;padding:.75rem .9rem;border-radius:var(--r-sm);font-size:.84rem;align-items:flex-start}
.alert.warn{background:var(--warn-bg);color:var(--warn)}.alert.info{background:var(--primary-l);color:var(--primary-d)}.alert.bad{background:var(--bad-bg);color:var(--bad)}
[data-theme="dark"] .alert.info{color:var(--primary)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;font-size:.86rem}.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600;word-break:break-word}
.drop{border:2px dashed var(--border2);border-radius:var(--r);padding:1.25rem;text-align:center;cursor:pointer;color:var(--muted)}
.drop:hover,.drop.over{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 7%,transparent)}
.cred{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--gray-bg);padding:.6rem .8rem;border-radius:10px;font-size:.9rem;user-select:all;word-break:break-all}
.hari-nav{display:flex;align-items:center;gap:.4rem}
.presensi-row{padding:.85rem;border-bottom:1px solid var(--border)}
.presensi-row:last-child{border-bottom:0}
.sesi-line{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:.5rem;margin-top:.5rem}
.stat-pills{display:flex;gap:.3rem;flex-wrap:wrap}
.pill{border:1.5px solid var(--border2);background:var(--surface);border-radius:999px;padding:.3rem .7rem;font-size:.75rem;font-weight:800;cursor:pointer;min-height:34px;color:var(--muted)}
.pill.on.Hadir{background:var(--ok-bg);color:var(--ok);border-color:var(--c-emerald)}.pill.on.Izin{background:var(--indigo-bg);color:var(--indigo);border-color:var(--c-indigo)}.pill.on.Sakit{background:var(--warn-bg);color:var(--warn);border-color:var(--c-amber)}.pill.on.Alpa{background:var(--bad-bg);color:var(--bad);border-color:var(--c-rose)}
.member-pick{max-height:38dvh;overflow:auto;border:1px solid var(--border);border-radius:var(--r-sm)}
.member-pick label{display:flex;gap:.65rem;align-items:center;padding:.55rem .7rem;border-bottom:1px solid var(--border);cursor:pointer;font-size:.86rem}
.member-pick label:last-child{border-bottom:0}
.member-pick input{width:20px;height:20px;accent-color:var(--primary);flex:none}
.hero-ortu{background:linear-gradient(135deg,var(--navy),#0f4c4a);color:#fff;border:0;position:relative;overflow:hidden}
.hero-ortu .muted{color:#a7f3d0}
.big-ring{--p:0;width:112px;height:112px;border-radius:50%;background:conic-gradient(#2dd4bf calc(var(--p)*1%),rgba(255,255,255,.18) 0);display:grid;place-items:center;flex:none}
.big-ring>div{width:88px;height:88px;border-radius:50%;background:#0b2a33;display:grid;place-items:center;text-align:center;line-height:1.1}
.big-ring b{font-size:1.5rem}.big-ring small{font-size:.65rem;opacity:.8}

/* Cetak (rekap A4 lanskap) */
.print-only{display:none}
@media print{
  @page{size:A4 landscape;margin:12mm}
  body{background:#fff;color:#000;font-size:11px}
  .shell>.side,.topbar,.bottom,#toasts,.no-print,.page-head .acts,.toolbar,.pager,.btn,.icon-btn{display:none!important}
  .shell.on{display:block!important}.main{padding:0!important;max-width:none}
  .card{box-shadow:none;border:1px solid #bbb;break-inside:avoid}
  .print-only{display:block}
  .tbl th{background:#eee!important;color:#000!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .overlay{position:static;background:none;backdrop-filter:none;display:block;opacity:1}
  .dialog{box-shadow:none;max-height:none;transform:none;max-width:none;border-radius:0}
  body.printing-modal .shell,body.printing-modal #toasts{display:none!important}
  body.printing-modal .dlg-head,body.printing-modal .dlg-foot,body.printing-modal .dlg-grip{display:none!important}
  body.printing-modal .preview-frame{max-height:none;border:0;padding:0}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}