/* =============================================================================
   CoreNet School Gate Watch — tema.
   Turunan tema CoreNet (sidebar gelap + aksen), disetel untuk sekolah:
   hijau-teal untuk hadir, amber untuk belum tercatat.

   MOBILE ADALAH KELAS SATU DI SINI, bukan penyesuaian belakangan. Wajah orang
   tua praktis hanya dibuka dari HP — mereka membacanya sambil berjalan, sekali
   sehari, beberapa detik. Wajah sekolah pun sering dibuka guru piket dari HP
   di gerbang, bukan dari meja.
   ========================================================================== */

:root{
  --csgw-primary:#0f766e; --csgw-primary-d:#0b5d56; --csgw-accent:#2dd4bf;
  --csgw-sidebar:#10231f; --csgw-sidebar-2:#0b1917;
  --csgw-sidebar-ink:#c3d8d4; --csgw-sidebar-ink-mut:#7e9b96;
  --csgw-bg:#f4f7f6; --csgw-card:#ffffff;
  --csgw-ok:#12855c; --csgw-warn:#b4700a; --csgw-bad:#c0453c; --csgw-info:#2a6f97;
  --csgw-ok-bg:#dff2e9; --csgw-warn-bg:#fbeed3; --csgw-bad-bg:#f8dedb; --csgw-info-bg:#dceaf3;
  --csgw-line:rgba(16,35,31,.10);
  --csgw-radius:14px; --csgw-side-w:250px;
}
[data-bs-theme="dark"]{
  --csgw-primary:#2dd4bf; --csgw-primary-d:#5eead4; --csgw-accent:#5eead4;
  --csgw-bg:#0c1413; --csgw-card:#141f1d; --csgw-sidebar:#0a1211; --csgw-sidebar-2:#060d0c;
  --csgw-ok:#4fc38c; --csgw-warn:#e0a64a; --csgw-bad:#e5786b; --csgw-info:#74b0d4;
  --csgw-ok-bg:#10312a; --csgw-warn-bg:#33290f; --csgw-bad-bg:#33191a; --csgw-info-bg:#14293a;
  --csgw-line:rgba(255,255,255,.08);
  --bs-body-bg:#0c1413; --bs-body-color:#dbe6e4;
}

body{
  background:var(--csgw-bg);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-text-size-adjust:100%;
}
.btn-primary{
  --bs-btn-bg:var(--csgw-primary);--bs-btn-border-color:var(--csgw-primary);
  --bs-btn-hover-bg:var(--csgw-primary-d);--bs-btn-hover-border-color:var(--csgw-primary-d);
  --bs-btn-active-bg:var(--csgw-primary-d);
}
[data-bs-theme="dark"] .btn-primary{--bs-btn-color:#08201d;--bs-btn-hover-color:#08201d;}
/* Varian outline ikut disetel. Tanpa ini tombol sekunder tetap biru bawaan
   Bootstrap dan halaman terlihat memakai dua warna aksen sekaligus. */
.btn-outline-primary{
  --bs-btn-color:var(--csgw-primary);--bs-btn-border-color:var(--csgw-primary);
  --bs-btn-hover-bg:var(--csgw-primary);--bs-btn-hover-border-color:var(--csgw-primary);
  --bs-btn-active-bg:var(--csgw-primary-d);--bs-btn-active-border-color:var(--csgw-primary-d);
}
[data-bs-theme="dark"] .btn-outline-primary{--bs-btn-hover-color:#08201d;--bs-btn-active-color:#08201d;}
.btn-link{--bs-btn-color:var(--csgw-primary);--bs-btn-hover-color:var(--csgw-primary-d);}
.form-control:focus,.form-select:focus{
  border-color:var(--csgw-primary);box-shadow:0 0 0 .2rem rgba(15,118,110,.18);
}
.form-check-input:checked{background-color:var(--csgw-primary);border-color:var(--csgw-primary);}
.progress{background:rgba(125,140,137,.18);}
.bg-success{background:var(--csgw-ok)!important;}
.text-primary{color:var(--csgw-primary)!important;}
a{color:var(--csgw-primary);text-decoration:none;}
a:hover{color:var(--csgw-primary-d);}
.fw-600{font-weight:600;}
.tnum{font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------------------- shell --- */
.csgw-shell{display:flex;min-height:100vh;}
.csgw-side{
  width:var(--csgw-side-w);background:var(--csgw-sidebar);color:var(--csgw-sidebar-ink);
  position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:1040;transition:transform .2s;
}
.csgw-side__brand{display:flex;align-items:center;gap:.6rem;padding:1.15rem 1.25rem;color:#fff;font-weight:700;font-size:1.1rem;}
.csgw-side__brand .bi{color:var(--csgw-accent);font-size:1.4rem;}
.csgw-side__brand small{font-weight:400;opacity:.6;font-size:.6rem;}
.csgw-side__nav{overflow-y:auto;padding:.5rem .75rem 1.5rem;flex:1;}
.csgw-side__label{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--csgw-sidebar-ink-mut);padding:1rem .75rem .4rem;}
.csgw-side__link{display:flex;align-items:center;gap:.7rem;padding:.62rem .75rem;border-radius:10px;color:var(--csgw-sidebar-ink);font-size:.92rem;font-weight:500;}
.csgw-side__link .bi{font-size:1.1rem;width:1.3rem;text-align:center;opacity:.85;}
.csgw-side__link:hover{background:var(--csgw-sidebar-2);color:#fff;}
.csgw-side__link.active{background:var(--csgw-primary);color:#fff;box-shadow:0 4px 14px rgba(15,118,110,.4);}
[data-bs-theme="dark"] .csgw-side__link.active{color:#08201d;}
.csgw-side__link.active .bi{opacity:1;}

.csgw-main{flex:1;margin-left:var(--csgw-side-w);display:flex;flex-direction:column;min-width:0;}
.csgw-top{
  height:60px;background:var(--csgw-card);border-bottom:1px solid var(--csgw-line);
  display:flex;align-items:center;gap:.35rem;padding:0 1rem;position:sticky;top:0;z-index:1030;
}
.csgw-top__btn{border:0;background:transparent;color:inherit;width:40px;height:40px;border-radius:10px;font-size:1.15rem;position:relative;}
.csgw-top__btn:hover{background:rgba(0,0,0,.05);}
[data-bs-theme="dark"] .csgw-top__btn:hover{background:rgba(255,255,255,.06);}
.csgw-top__badge{position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--csgw-bad);color:#fff;font-size:.62rem;line-height:16px;font-weight:700;}
.csgw-top__user{display:flex;align-items:center;gap:.6rem;padding:.25rem .5rem;border-radius:10px;}
.csgw-top__user img,.csgw-top__ava{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--csgw-primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem;}
[data-bs-theme="dark"] .csgw-top__ava{color:#08201d;}
.csgw-content{padding:1.25rem;flex:1;}

.csgw-page-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:1.15rem;}
.csgw-page-head h1{font-size:1.45rem;font-weight:700;margin:0;letter-spacing:-.01em;}
.csgw-page-head__sub{font-size:.85rem;color:var(--bs-secondary-color);margin-top:.15rem;}

/* --------------------------------------------------------- kartu & angka --- */
.csgw-card{background:var(--csgw-card);border:1px solid var(--csgw-line);border-radius:var(--csgw-radius);}
.csgw-card--pad{padding:1.1rem 1.25rem;}

.csgw-stat{padding:1.15rem 1.25rem;border-radius:var(--csgw-radius);color:#fff;position:relative;overflow:hidden;}
.csgw-stat .bi{position:absolute;right:-6px;bottom:-12px;font-size:4.5rem;opacity:.16;}
.csgw-stat__n{font-size:2rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;}
.csgw-stat__l{opacity:.92;font-size:.88rem;margin-top:.35rem;}
/* Angka besar itu untuk ANGKA. Nilai berupa kata atau rupiah dibuat lebih
   kecil supaya tidak terpotong pada kartu yang lebarnya sama. */
.csgw-stat__n--teks{font-size:1.1rem;line-height:1.3;}
.csgw-stat__n--uang{font-size:1.35rem;line-height:1.2;letter-spacing:-.02em;}
.csgw-stat--primary{background:linear-gradient(135deg,#0f766e,#14b8a6);}
.csgw-stat--teal{background:linear-gradient(135deg,#0e7490,#22d3ee);}
.csgw-stat--slate{background:linear-gradient(135deg,#44524f,#2b3634);}
.csgw-stat--rose{background:linear-gradient(135deg,#c0453c,#e0685f);}
.csgw-stat--amber{background:linear-gradient(135deg,#b4700a,#e0a63b);}

/* Kotak angka ringan — dipakai di layar piket, tidak berwarna penuh supaya
   yang berwarna hanya angka yang menuntut tindakan. */
.csgw-tile{background:var(--csgw-card);border:1px solid var(--csgw-line);border-radius:12px;padding:.9rem 1rem;height:100%;}
.csgw-tile__n{font-size:1.7rem;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums;}
.csgw-tile__l{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--bs-secondary-color);margin-top:.2rem;}
.csgw-tile--warn{border-color:var(--csgw-warn);background:var(--csgw-warn-bg);}
.csgw-tile--warn .csgw-tile__n{color:var(--csgw-warn);}
.csgw-tile--ok{border-color:var(--csgw-ok);background:var(--csgw-ok-bg);}
.csgw-tile--ok .csgw-tile__n{color:var(--csgw-ok);}

/* ------------------------------------------------------------- lencana --- */
.csgw-pill{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;font-weight:600;padding:.2rem .55rem;border-radius:999px;white-space:nowrap;}
.csgw-pill--ok{background:var(--csgw-ok-bg);color:var(--csgw-ok);}
.csgw-pill--warn{background:var(--csgw-warn-bg);color:var(--csgw-warn);}
.csgw-pill--bad{background:var(--csgw-bad-bg);color:var(--csgw-bad);}
.csgw-pill--info{background:var(--csgw-info-bg);color:var(--csgw-info);}
.csgw-pill--mut{background:rgba(125,140,137,.16);color:var(--bs-secondary-color);}

/* --------------------------------------------------------------- tabel --- */
.csgw-table{width:100%;margin:0;border-collapse:separate;border-spacing:0;}
.csgw-table th{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;font-weight:600;
  color:var(--bs-secondary-color);padding:.65rem .85rem;border-bottom:1px solid var(--csgw-line);white-space:nowrap;
}
.csgw-table td{padding:.7rem .85rem;border-bottom:1px solid var(--csgw-line);vertical-align:middle;font-size:.9rem;}
.csgw-table tbody tr:last-child td{border-bottom:0;}
.csgw-table tbody tr:hover{background:rgba(15,118,110,.035);}
[data-bs-theme="dark"] .csgw-table tbody tr:hover{background:rgba(45,212,191,.05);}
.csgw-table__kosong{padding:2rem 1rem;text-align:center;color:var(--bs-secondary-color);font-size:.9rem;}

/* Baris tabel berubah menjadi kartu di layar sempit.
   Setiap sel memakai data-l sebagai labelnya — tanpa itu, tabel enam kolom di
   layar 360px hanya menjadi tumpukan angka tanpa arti. */
@media (max-width:767.98px){
  .csgw-table--kartu thead{display:none;}
  .csgw-table--kartu tbody tr{
    display:block;margin-bottom:.7rem;border:1px solid var(--csgw-line);
    border-radius:12px;padding:.35rem .15rem;background:var(--csgw-card);
  }
  .csgw-table--kartu tbody tr:hover{background:var(--csgw-card);}
  .csgw-table--kartu td{display:flex;justify-content:space-between;gap:1rem;border:0;padding:.4rem .85rem;}
  .csgw-table--kartu td::before{
    content:attr(data-l);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
    color:var(--bs-secondary-color);font-weight:600;flex:none;padding-top:.15rem;
  }
  .csgw-table--kartu td:empty{display:none;}
  .csgw-table--kartu td.csgw-td--utama{
    display:block;border-bottom:1px solid var(--csgw-line);margin-bottom:.25rem;padding-bottom:.55rem;
  }
  .csgw-table--kartu td.csgw-td--utama::before{display:none;}
  .csgw-table--kartu td.csgw-td--aksi{justify-content:flex-end;padding-top:.6rem;}
  .csgw-table--kartu td.csgw-td--aksi::before{display:none;}
}

/* --------------------------------------------------------------- daftar --- */
/* Baris ringkas untuk layar sempit — dipakai wajah orang tua. */
.csgw-row{display:flex;align-items:center;gap:.75rem;padding:.8rem 0;border-bottom:1px solid var(--csgw-line);}
.csgw-row:last-child{border-bottom:0;}
.csgw-row__dot{width:10px;height:10px;border-radius:50%;flex:none;}
.csgw-row__dot--ok{background:var(--csgw-ok);}
.csgw-row__dot--warn{background:var(--csgw-warn);}
.csgw-row__dot--bad{background:var(--csgw-bad);}
.csgw-row__dot--mut{background:rgba(125,140,137,.5);}
.csgw-row__main{flex:1;min-width:0;}
.csgw-row__t{font-size:.94rem;font-weight:600;}
.csgw-row__s{font-size:.79rem;color:var(--bs-secondary-color);}
.csgw-row__v{font-variant-numeric:tabular-nums;font-weight:600;font-size:.95rem;white-space:nowrap;}

.csgw-ava{
  width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--csgw-info-bg);color:var(--csgw-info);font-weight:700;font-size:.85rem;
}

/* --------------------------------------------------- wajah orang tua (HP) --- */
/* Sidebar tidak dipakai di wajah member. Orang tua membuka aplikasi ini dari
   HP sambil berjalan; navigasi bawah dapat dijangkau ibu jari, sidebar tidak. */
.csgw-mob{max-width:560px;margin:0 auto;padding:0 0 5.5rem;}
.csgw-mob__top{
  position:sticky;top:0;z-index:1020;background:var(--csgw-card);
  border-bottom:1px solid var(--csgw-line);padding:.7rem 1rem;display:flex;align-items:center;gap:.7rem;
}
.csgw-mob__logo{width:36px;height:36px;border-radius:10px;background:var(--csgw-primary);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.8rem;flex:none;}
[data-bs-theme="dark"] .csgw-mob__logo{color:#08201d;}
.csgw-mob__t{font-weight:700;font-size:.98rem;line-height:1.2;}
.csgw-mob__s{font-size:.75rem;color:var(--bs-secondary-color);}
.csgw-mob__body{padding:1rem;display:flex;flex-direction:column;gap:.9rem;}

.csgw-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:1035;
  background:var(--csgw-card);border-top:1px solid var(--csgw-line);
  display:flex;padding:.35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
}
.csgw-nav a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;
  padding:.4rem .2rem;border-radius:10px;color:var(--bs-secondary-color);font-size:.68rem;font-weight:600;
}
.csgw-nav a .bi{font-size:1.25rem;}
.csgw-nav a.active{color:var(--csgw-primary);}
@media (min-width:576px){ .csgw-nav{max-width:560px;margin:0 auto;border-radius:16px 16px 0 0;border:1px solid var(--csgw-line);border-bottom:0;} }

/* Kartu anak di beranda orang tua. */
.csgw-anak{border:1px solid var(--csgw-line);border-radius:var(--csgw-radius);background:var(--csgw-card);overflow:hidden;}
.csgw-anak__head{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;border-bottom:1px solid var(--csgw-line);}
.csgw-anak__nama{font-weight:700;font-size:1rem;line-height:1.2;}
.csgw-anak__kelas{font-size:.78rem;color:var(--bs-secondary-color);}
.csgw-anak__grid{display:grid;grid-template-columns:1fr 1fr;}
.csgw-anak__sel{padding:.85rem 1rem;}
.csgw-anak__sel + .csgw-anak__sel{border-left:1px solid var(--csgw-line);}
.csgw-anak__l{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--bs-secondary-color);}
.csgw-anak__v{font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2;margin-top:.1rem;}
.csgw-anak__v--kecil{font-size:1rem;line-height:1.35;padding-top:.15rem;}
.csgw-anak__k{font-size:.75rem;color:var(--bs-secondary-color);margin-top:.1rem;}
.csgw-anak__aksi{display:flex;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--csgw-line);}
.csgw-anak__aksi .btn{flex:1;}

/* ------------------------------------------------------------- responsif --- */
@media (max-width:991.98px){
  .csgw-side{transform:translateX(-100%);}
  .csgw-side.show{transform:none;box-shadow:0 0 40px rgba(0,0,0,.35);}
  .csgw-main{margin-left:0;}
  .csgw-content{padding:1rem;}
  .csgw-page-head h1{font-size:1.25rem;}
}
.csgw-side__backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1035;}
.csgw-side__backdrop.show{display:block;}

/* Tombol aksi berkelompok: melebar penuh di HP supaya dapat ditekan ibu jari. */
@media (max-width:575.98px){
  .csgw-aksi{display:flex;flex-direction:column;gap:.4rem;width:100%;}
  .csgw-aksi .btn{width:100%;}
  .csgw-stat__n{font-size:1.7rem;}
}
.csgw-aksi{display:inline-flex;gap:.4rem;flex-wrap:wrap;}

/* -------------------------------------------------------- mode peninjauan --- */
/* Pita ini sengaja mencolok dan tidak dapat ditutup. Admin yang lupa sedang
   meninjau akun orang lain akan mengira ia melihat datanya sendiri. */
.csgw-viewas{
  position:sticky;top:0;z-index:1050;background:var(--csgw-warn);color:#1c1400;
  padding:.5rem 1rem;font-size:.85rem;font-weight:600;display:flex;align-items:center;
  justify-content:center;gap:.75rem;flex-wrap:wrap;
}
.csgw-viewas .btn{--bs-btn-padding-y:.15rem;--bs-btn-padding-x:.6rem;--bs-btn-font-size:.78rem;}

/* --------------------------------------------------------------- artikel --- */
.csgw-artikel h2{font-size:1.15rem;font-weight:700;margin-top:0;}
.csgw-artikel h3{font-size:1rem;font-weight:700;color:var(--csgw-primary);margin-top:1.5rem;}
.csgw-artikel p,.csgw-artikel li{line-height:1.75;}
.csgw-artikel pre{white-space:pre-wrap;word-break:break-word;}
.csgw-artikel img{max-width:100%;}

/* ------------------------------------------------------------------ cetak --- */
/* Kartu aktivasi dan rekap sering dicetak. Yang tidak berguna di kertas
   dibuang, bukan diperkecil. */
@media print{
  .csgw-side,.csgw-top,.csgw-nav,.csgw-viewas,.csgw-aksi,.btn{display:none!important;}
  .csgw-main{margin-left:0;}
  .csgw-card{border:1px solid #ccc;break-inside:avoid;}
  body{background:#fff;}
}