/* ==========================================================================
   e-GURU (Administrasi Guru Digital) — tema resmi madrasah/sekolah Islam
   Hijau tua + maroon + aksen emas. Garis & bingkai ganda agar terkesan formal.
   ========================================================================== */
:root{
  /* hijau tua (utama) */
  --hijau-tua:#0b4a33;
  --hijau:#106b4a;
  --hijau-terang:#178a5f;
  --hijau-muda:#e7f2ec;
  /* maroon (aksen kedua) */
  --maroon:#6d1b25;
  --maroon-terang:#8d2733;
  /* emas (aksen mewah) */
  --emas:#c9a227;
  --emas-terang:#e3c368;
  --emas-muda:#fbf4dd;

  --ink:#16261f;
  --muted:#5c6b63;
  --line:rgba(11,74,51,.18);
  --card:rgba(255,255,255,.92);
  --kertas:#fbf9f2;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 14px 30px -18px rgba(11,74,51,.45), 0 2px 6px -3px rgba(11,74,51,.18);
  --sidebar-w:288px;
  --serif:Georgia,"Times New Roman",'Playfair Display',serif;
  /* alias kompatibilitas: beberapa isian memakai accent-color:var(--accent) */
  --accent:var(--hijau);
  --accent2:var(--emas);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,sans-serif;
  color:var(--ink);
  background:var(--kertas);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--hijau);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:700;letter-spacing:-.01em;color:var(--hijau-tua)}
h1{font-size:1.42rem;font-family:var(--serif)}
h2{font-size:1.1rem;font-family:var(--serif)}
h3{font-size:1rem}
svg.ic{flex:0 0 auto}

/* latar: pola geometris islami halus + gradien hijau/emas */
.bg-deco{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:
  linear-gradient(180deg,#f8fbf7 0%,#fbf9f2 55%,#f6f3e6 100%)}
.bg-deco::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%230b4a33' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M42 2l40 40-40 40L2 42z'/%3E%3Cpath d='M42 14l28 28-28 28-28-28z'/%3E%3Ccircle cx='42' cy='42' r='7'/%3E%3C/g%3E%3C/svg%3E");
  background-size:84px 84px;
}
.bg-deco span{position:absolute;border-radius:50%;filter:blur(80px);opacity:.34}
.bg-deco .b1{width:540px;height:540px;background:#63b48d;top:-180px;left:-140px}
.bg-deco .b2{width:430px;height:430px;background:#e3c368;top:16%;right:-150px;opacity:.3}
.bg-deco .b3{width:560px;height:560px;background:#8d2733;bottom:-280px;left:30%;opacity:.14}

/* ===== Sidebar ===== */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);
  padding:20px 15px;display:flex;flex-direction:column;gap:16px;
  background:linear-gradient(165deg,#0a4530 0%,#0b4a33 45%,#0e5738 100%);
  border-right:3px double var(--emas);z-index:40;overflow-y:auto;
  color:#eaf3ee;
}
.sidebar::-webkit-scrollbar{width:9px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(201,162,39,.5);border-radius:9px}
.brand{display:flex;align-items:center;gap:12px;padding:2px 6px 8px;border-bottom:1px solid rgba(201,162,39,.35)}
.brand-logo{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:var(--hijau-tua);
  background:linear-gradient(150deg,var(--emas-terang),var(--emas));
  box-shadow:0 8px 20px -10px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.4);
}
.brand-name{font-weight:800;font-size:1.03rem;letter-spacing:-.01em;color:#fff;font-family:var(--serif)}
.brand-sub{font-size:.72rem;color:rgba(234,243,238,.72);max-width:176px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* kotak konteks sekolah */
.ctx-box{
  background:rgba(255,255,255,.08);border:1px solid rgba(201,162,39,.4);border-left:3px solid var(--emas);
  border-radius:var(--radius-sm);padding:10px 12px;
}
.ctx-nama{font-weight:700;font-size:.86rem;color:#fff;line-height:1.3}
.ctx-ket{font-size:.7rem;color:rgba(234,243,238,.72);margin-top:3px}

.nav{display:flex;flex-direction:column;gap:3px}
.nav-sec{
  font-size:.66rem;text-transform:uppercase;letter-spacing:.11em;color:var(--emas-terang);
  font-weight:700;margin:14px 8px 6px;padding-bottom:4px;border-bottom:1px solid rgba(201,162,39,.3);
}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  color:#eaf3ee;font-size:.88rem;font-weight:500;transition:.16s;border:1px solid transparent;
}
.nav-item:hover{background:rgba(255,255,255,.12);text-decoration:none;border-color:rgba(201,162,39,.45)}
.nav-item.on{
  background:linear-gradient(120deg,rgba(201,162,39,.95),rgba(227,195,104,.9));color:#3a2c05;
  font-weight:700;border-color:rgba(255,255,255,.4);box-shadow:0 8px 18px -12px rgba(0,0,0,.8);
}
.nav-item.on svg{color:#3a2c05}
.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;border-top:1px solid rgba(201,162,39,.35);padding-top:14px}
.who{display:flex;align-items:center;gap:10px;padding:0 4px}
.who-txt{min-width:0}
.who-txt strong{display:block;font-size:.84rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.who-txt small{color:rgba(234,243,238,.75);font-size:.71rem}
.sidebar .btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(201,162,39,.45);color:#fff}
.sidebar .btn-ghost:hover{background:rgba(255,255,255,.2)}
.avatar{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--hijau-tua);font-weight:800;font-size:.9rem;
  background:linear-gradient(150deg,var(--emas-terang),var(--emas));flex:0 0 auto;border:1px solid rgba(255,255,255,.5);
}

/* ===== Main ===== */
.main{margin-left:var(--sidebar-w);padding:24px 30px 40px;min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:10px;
  padding-bottom:14px;border-bottom:3px double var(--emas)}
.topbar-sub{margin:6px 0 0;color:var(--muted);font-size:.82rem}
.topbar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.content{display:flex;flex-direction:column;gap:24px;flex:1;margin-top:16px}
.foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.75rem;
  margin-top:32px;padding-top:14px;border-top:3px double var(--emas)}

/* ===== Kartu ===== */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px 22px;position:relative;
}
.card::before{ /* garis emas dekoratif di atas kartu */
  content:"";position:absolute;left:14px;right:14px;top:0;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--hijau-tua),var(--emas) 45%,var(--maroon));
  opacity:.85;
}
.card-tight{padding:15px 17px}
.card-terpilih{border-color:var(--emas);box-shadow:0 0 0 2px rgba(201,162,39,.35),var(--shadow)}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.card-head p{margin:4px 0 0;color:var(--muted);font-size:.82rem}
.section-title{display:flex;align-items:center;gap:9px;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--hijau-tua);font-weight:700;padding-bottom:5px;border-bottom:1px solid rgba(201,162,39,.45)}
.danger-zone{border-color:rgba(109,27,37,.4)}
.danger-zone > summary{color:var(--maroon)}

.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g12{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}

/* stat */
.stat{display:flex;gap:14px;align-items:flex-start}
.stat-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  color:var(--emas-muda);background:linear-gradient(150deg,var(--hijau-tua),var(--hijau));
  border:1px solid var(--emas)}
.stat-ic.g{background:linear-gradient(150deg,#0f7a53,#0b4a33)}
.stat-ic.o{background:linear-gradient(150deg,#a9741b,#8a5a12);color:#fff8e6}
.stat-ic.p{background:linear-gradient(150deg,var(--maroon-terang),var(--maroon));color:#fdf1f1}
.stat-ic.s{background:linear-gradient(150deg,#1d6f8b,#14556b);color:#eef9fd}
.stat-num{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--hijau-tua);font-variant-numeric:tabular-nums}
.stat-lbl{color:var(--muted);font-size:.78rem;margin-top:3px}
.stat-hint{font-size:.73rem;color:var(--muted);margin-top:6px}
.stat-mini{display:flex;gap:12px;flex-wrap:wrap}
.stat-mini div{min-width:94px;border:1px solid var(--line);border-top:2px solid var(--emas);border-radius:10px;padding:9px 13px;background:rgba(255,255,255,.75)}
.stat-mini b{display:block;font-size:1.14rem;font-weight:800;line-height:1.2;color:var(--hijau-tua);font-variant-numeric:tabular-nums}
.stat-mini span{font-size:.73rem;color:var(--muted)}

/* ===== Tombol ===== */
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:10px;border:1px solid transparent;
  font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:.16s;background:#fff;color:var(--hijau-tua);
  white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(150deg,var(--hijau),var(--hijau-tua));color:#fff;
  box-shadow:0 10px 20px -12px rgba(11,74,51,.95);border-color:rgba(201,162,39,.55);
}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--hijau-tua)}
.btn-ghost:hover{border-color:var(--emas);background:var(--emas-muda)}
.btn-danger{background:rgba(109,27,37,.07);color:var(--maroon);border-color:rgba(109,27,37,.35)}
.btn-danger:hover{background:rgba(109,27,37,.14)}
.btn-ok{background:rgba(15,122,83,.1);color:#0b5c3f;border-color:rgba(15,122,83,.32)}
.btn-sm{padding:7px 11px;font-size:.78rem;border-radius:8px}
.btn.full{width:100%;justify-content:center}
.btn-ico{padding:7px;border-radius:8px}

/* ===== Tabel ===== */
.table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--line)}
table.tbl{width:100%;border-collapse:collapse;font-size:.86rem;background:#fff}
table.tbl th{
  text-align:left;padding:11px 13px;font-size:.71rem;text-transform:uppercase;letter-spacing:.06em;
  color:#fdf8ea;font-weight:700;background:linear-gradient(160deg,var(--hijau),var(--hijau-tua));
  border-bottom:2px solid var(--emas);white-space:nowrap;
}
table.tbl td{padding:11px 13px;border-bottom:1px solid rgba(11,74,51,.12);vertical-align:middle}
table.tbl tbody tr:nth-child(even) td{background:rgba(231,242,236,.45)}
table.tbl tbody tr:hover td{background:var(--emas-muda)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .ctr{text-align:center}
.tbl-sub{display:block;color:var(--muted);font-size:.74rem;margin-top:2px}
.row-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}

/* ===== Badge / pill ===== */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:.73rem;font-weight:700;border:1px solid transparent}
.pill-A,.pill-ok{background:rgba(15,122,83,.13);color:#0b5c3f;border-color:rgba(15,122,83,.32)}
.pill-B{background:rgba(29,111,139,.13);color:#14556b;border-color:rgba(29,111,139,.3)}
.pill-C,.pill-warn{background:rgba(201,162,39,.18);color:#7a5c06;border-color:rgba(201,162,39,.45)}
.pill-D{background:rgba(109,27,37,.12);color:#7f1d28;border-color:rgba(109,27,37,.34)}
.pill-gray{background:rgba(92,107,99,.12);color:var(--muted);border-color:rgba(92,107,99,.24)}
.pill-gold{background:linear-gradient(150deg,var(--emas-terang),var(--emas));color:#3f2f05;border-color:rgba(120,92,10,.35)}
.pill-st-H{background:rgba(15,122,83,.15);color:#0b5c3f;border-color:rgba(15,122,83,.3)}
.pill-st-S{background:rgba(201,162,39,.2);color:#7a5c06;border-color:rgba(201,162,39,.45)}
.pill-st-I{background:rgba(29,111,139,.15);color:#14556b;border-color:rgba(29,111,139,.32)}
.pill-st-A{background:rgba(109,27,37,.14);color:#7f1d28;border-color:rgba(109,27,37,.32)}
.bar-mini{height:8px;border-radius:99px;background:rgba(11,74,51,.12);overflow:hidden;min-width:74px;display:block}
.bar-mini i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--hijau-tua),var(--hijau-terang))}
.bar-mini i.lvA{background:linear-gradient(90deg,#0b5c3f,#178a5f)}
.bar-mini i.lvB{background:linear-gradient(90deg,#14556b,#2b8fae)}
.bar-mini i.lvC{background:linear-gradient(90deg,#a9741b,#e3c368)}
.bar-mini i.lvD{background:linear-gradient(90deg,#6d1b25,#a8394a)}
.tagmini{display:inline-block;padding:2px 9px;border-radius:6px;background:var(--hijau-muda);color:var(--hijau-tua);
  border:1px solid rgba(11,74,51,.16);font-size:.72rem;font-weight:700;margin:2px 3px 2px 0}

/* ===== Form ===== */
.form-grid{display:grid;gap:16px}
label.f{display:block;font-size:.77rem;font-weight:700;color:var(--hijau-tua);margin-bottom:6px}
input[type=text],input[type=password],input[type=date],input[type=month],input[type=number],input[type=search],select,textarea{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(11,74,51,.28);
  background:#fff;font:inherit;font-size:.88rem;color:var(--ink);outline:none;transition:.16s;
}
input:focus,select:focus,textarea:focus{border-color:var(--emas);box-shadow:0 0 0 3px rgba(201,162,39,.22)}
textarea{resize:vertical;min-height:72px;line-height:1.5}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230b4a33' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:32px}
.hint{font-size:.73rem;color:var(--muted);margin-top:6px}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.filterbar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.filterbar > div{min-width:150px;flex:0 1 auto}
input[type=file]{
  width:100%;padding:9px 11px;border-radius:10px;border:1px dashed rgba(11,74,51,.45);
  background:rgba(231,242,236,.6);font:inherit;font-size:.83rem;color:var(--muted);cursor:pointer;
}
input[type=file]:hover{border-color:var(--emas);background:var(--emas-muda)}

/* ===== Alert ===== */
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:11px;margin-bottom:16px;font-size:.86rem;
  border:1px solid transparent;border-left-width:4px}
.alert-ok{background:rgba(15,122,83,.09);border-color:rgba(15,122,83,.3);border-left-color:var(--hijau);color:#0b4a33}
.alert-warn{background:rgba(201,162,39,.13);border-color:rgba(201,162,39,.42);border-left-color:var(--emas);color:#6f5406}
.alert-err{background:rgba(109,27,37,.09);border-color:rgba(109,27,37,.32);border-left-color:var(--maroon);color:#7f1d28}

/* ===== Penilaian (butir) & form khusus ===== */
.butir{border:1px solid var(--line);border-left:3px solid var(--emas);border-radius:12px;background:#fff;padding:14px 16px;margin-bottom:12px}
.butir:last-child{margin-bottom:0}
.butir-head{display:flex;gap:12px;align-items:flex-start}
.butir-no{
  width:28px;height:28px;border-radius:8px;background:linear-gradient(150deg,var(--hijau),var(--hijau-tua));color:#fff;
  display:grid;place-items:center;font-size:.78rem;font-weight:800;flex:0 0 auto;margin-top:1px;border:1px solid var(--emas);
}
.butir-komponen{font-weight:700;font-size:.9rem;color:var(--hijau-tua)}
.butir-indikator{color:var(--muted);font-size:.8rem;margin-top:3px;line-height:1.45}
.skala{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.skala label{
  flex:1 1 130px;display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:#fff;font-size:.79rem;transition:.14s;
}
.skala label:hover{background:var(--emas-muda);border-color:var(--emas)}
.skala input{accent-color:var(--hijau);width:16px;height:16px;margin:0;flex:0 0 auto}
.skala label.sel{background:var(--emas-muda);border-color:var(--emas);font-weight:600}
.butir-note{margin-top:10px}

/* panel tambahan / detail */
details.editbox{margin-top:12px;border-top:1px dashed rgba(11,74,51,.25);padding-top:2px}
details.editbox > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
  font-size:.78rem;font-weight:700;color:var(--hijau);padding:8px 0 2px;
}
details.editbox > summary::-webkit-details-marker{display:none}
details.editbox > summary::after{content:'▾';font-size:.7rem;color:var(--muted)}
details.editbox[open] > summary::after{content:'▴'}
details.editbox > summary:hover{text-decoration:underline}
.skorlive{position:sticky;top:16px;display:flex;flex-direction:column;gap:14px}
.skorbig{font-size:2.3rem;font-weight:800;letter-spacing:-.03em;line-height:1}

/* kotak logo */
.logo-kotak{
  width:104px;height:104px;border-radius:12px;border:2px solid var(--emas);
  background:#fff;display:grid;place-items:center;overflow:hidden;flex:0 0 auto;
}
.logo-kotak img{width:100%;height:100%;object-fit:contain;display:block}
.logo-kosong{width:104px;height:104px;border-radius:12px;border:1px dashed rgba(11,74,51,.45);
  background:rgba(231,242,236,.6);display:grid;place-items:center;color:var(--muted);flex:0 0 auto}
.foto-baris{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.foto-sisi{display:flex;flex-direction:column;gap:10px;align-items:center;flex:0 0 auto}
.foto-form{flex:1 1 320px;min-width:240px}
.foto-input-baris{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.foto-preview-wrap{display:flex;flex-direction:column;gap:6px;align-items:center}
.foto-preview{width:96px;height:96px;border-radius:12px;overflow:hidden;border:2px solid var(--emas);background:#fff;display:grid;place-items:center}
.foto-preview img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-img{padding:0;overflow:hidden;background:var(--hijau-muda)}
.avatar-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.avatar-besar{box-shadow:0 12px 26px -14px rgba(11,74,51,.7);border:3px solid #fff}
.mini-avatar{display:inline-flex;align-items:center;gap:9px}
.mini-avatar .avatar{font-size:.78rem}
.foto-cetak{width:28mm;height:38mm;border:1px solid #b9b6a8;object-fit:cover;display:block}

/* ===== Log Aktivitas: penanda online ===== */
.dot-online{
  flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#10b981;
  box-shadow:0 0 0 3px rgba(16,185,129,.22);animation:denyut 2.2s ease-in-out infinite;
}
@keyframes denyut{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.86)}}

/* ===== Tabel nilai (Formatif / Sumatif Lingkup Materi / ASAS) =====
   Tabel memakai table-layout:fixed + <colgroup> sehingga lebar setiap kolom
   SAMA antara baris judul dan baris isian (tanpa ini judul F1..F4/S1..S4 tidak
   sejajar dengan kotak inputnya karena baris judul hanya memuat sel kolom nilai). */
.nil-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--line)}
table.grid{
  border-collapse:separate;border-spacing:0;font-size:.84rem;background:#fff;
  /* table-layout:fixed + lebar tabel yang dihitung di PHP (lihat nilai.php) sehingga
     jumlah lebar semua kolom = lebar tabel. Dengan begitu kolom judul dan kolom isian
     SELALU sama lebar, tanpa celah kosong di ujung kanan, dan tabel dipusatkan bila
     kartu lebih lebar; bila kolomnya banyak, gulir horizontal ada di .nil-wrap. */
  table-layout:fixed;margin:0 auto;
}
table.grid th,table.grid td{
  padding:0;vertical-align:middle;border-bottom:1px solid rgba(11,74,51,.12);
  text-align:center;overflow:hidden;
}
/* Lebar kolom dinyatakan pada SETIAP sel (kepala maupun isian), bukan hanya <colgroup>,
   supaya baris judul dan baris input selalu sejajar lebar-kolomnya. */
table.grid .c-no{width:40px}
/* Lebar kolom Nama Siswa WAJIB ditulis di sini juga (bukan hanya di <colgroup>): peramban
   memakai lebar pada SEL sebagai penentu utama, sehingga tanpa aturan ini kolom nama
   menyesuaikan isi setiap baris (judul 97px, isian 110px → semua kolom angka ikut meleset).
   Nilainya harus SAMA dengan $wNama pada nilai.php. */
table.grid .c-nama{width:260px;white-space:normal;overflow:hidden;text-overflow:ellipsis}
table.grid .c-nilai{width:58px}
/* 92px & 76px dipilih agar MELEBIHI lebar minimum teks judulnya ("NILAI AKHIR" ±89px,
   "PREDIKAT" ±74px). Kalau kolom lebih sempit dari teks judul yang nowrap, peramban
   melebarkan kolom itu → judul dan kotak isian jadi tidak sejajar. */
table.grid .c-na{width:92px}
table.grid .c-pred{width:76px}
/* padding kepala & isian untuk kolom identitas dibuat sama agar lebarnya tidak bergeser */
table.grid th.kiri,table.grid td.kiri{padding-left:12px;padding-right:10px}
table.grid td.kiri{padding-top:8px;padding-bottom:8px}
table.grid th{
  font-size:.69rem;text-transform:uppercase;letter-spacing:.04em;color:#fdf8ea;font-weight:700;
  background:linear-gradient(160deg,var(--hijau),var(--hijau-tua));
  white-space:nowrap;padding:9px 6px;
}
table.grid thead tr:last-child th{border-bottom:2px solid var(--emas)}
/* judul kolom identitas (No & Nama) rata kiri */
table.grid th.kiri,table.grid td.kiri{text-align:left}
table.grid td:first-child,table.grid th:first-child{padding-left:0}
table.grid tbody tr:nth-child(even) td{background:rgba(231,242,236,.4)}
table.grid tbody tr:hover td{background:var(--emas-muda)}
/* kelompok kolom: Formatif (hijau), Sumatif (biru), ASAS (maroon), Nilai Akhir (emas) */
table.grid thead th.grp-fmt{background:linear-gradient(160deg,var(--hijau-terang),var(--hijau))}
table.grid thead th.grp-smt{background:linear-gradient(160deg,#1d6f8b,#14556b)}
table.grid thead th.grp-asas{background:linear-gradient(160deg,var(--maroon-terang),var(--maroon))}
table.grid thead th.grp-na{background:linear-gradient(160deg,var(--emas),#a9741b);color:#3f2f05;
  border-bottom-color:#8a6a12}
table.grid thead tr.sub th{font-size:.63rem;padding:7px 4px}
/* pemisah antar kelompok kolom agar mata mudah menyusur judul ↔ isian */
table.grid th.awal-grup,table.grid td.awal-grup{border-left:2px solid rgba(11,74,51,.28)}
table.grid thead th.awal-grup{border-left:2px solid rgba(255,255,255,.55)}
/* kotak input: memenuhi selnya sendiri, jadi selalu tepat di bawah judulnya */
table.grid td.sel-nilai{padding:4px 5px}
input.nil{
  width:100%;min-width:0;box-sizing:border-box;padding:7px 4px;text-align:center;
  border-radius:8px;border:1px solid rgba(11,74,51,.25);background:#fff;
  font:inherit;font-size:.82rem;font-variant-numeric:tabular-nums;color:var(--ink);
}
input.nil:focus{border-color:var(--emas);box-shadow:0 0 0 2px rgba(201,162,39,.28);outline:none}
input.nil::-webkit-outer-spin-button,input.nil::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input.nil[type=number]{-moz-appearance:textfield}
input.nil[disabled]{background:rgba(231,242,236,.5);color:var(--muted);border-style:dashed}
/* kolom hitungan otomatis */
td.na{
  font-weight:800;background:rgba(201,162,39,.12);font-variant-numeric:tabular-nums;
  color:var(--hijau-tua);padding:9px 6px;
}
td.na.belum{color:var(--muted);font-weight:600}
td.predikat{padding:6px 4px}
tfoot td{background:var(--emas-muda);font-weight:700;padding:9px 6px;font-variant-numeric:tabular-nums}
tfoot td.kiri{text-align:left;padding-left:12px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.75rem;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-2px}

/* ===== Daftar hadir (H/S/I/A) ===== */
.st{display:inline-flex;gap:5px;position:relative}
.st label{
  width:34px;height:34px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line);
  background:#fff;font-weight:800;font-size:.8rem;cursor:pointer;transition:.14s;color:var(--hijau-tua);
}
.st input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.st label:hover{transform:translateY(-1px);border-color:var(--emas)}
.st label.sel{color:#fff;border-color:transparent;box-shadow:0 8px 16px -10px rgba(0,0,0,.7)}
.st label.sel-H{background:linear-gradient(150deg,#178a5f,#0b5c3f)}
.st label.sel-S{background:linear-gradient(150deg,var(--emas-terang),#a9741b);color:#3f2f05}
.st label.sel-I{background:linear-gradient(150deg,#2b8fae,#14556b)}
.st label.sel-A{background:linear-gradient(150deg,var(--maroon-terang),var(--maroon))}

/* ===== Ringkasan kehadiran pada Jurnal Harian ===== */
.kehadiran-kode{display:inline-flex;gap:5px;flex-wrap:wrap;justify-content:center}
.kehadiran-kode .kh{
  display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;
  background:rgba(11,74,51,.07);border:1px solid rgba(11,74,51,.18);
  font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted);
}
.kehadiran-kode .kh i{font-style:normal;font-size:.69rem;opacity:.85}
.kehadiran-kode .kh.ada{background:rgba(109,27,37,.12);border-color:rgba(109,27,37,.3);color:#7f1d28}

/* ===== Catatan & rumus ===== */
.list-ok{margin:0;padding-left:20px;font-size:.85rem}
.list-ok li{margin-bottom:6px}
.note-rumus{
  background:var(--emas-muda);border:1px dashed rgba(201,162,39,.7);border-radius:10px;
  padding:12px 15px;font-size:.82rem;color:#4d3f0c;line-height:1.55;
}
.note-rumus b{color:#3f2f05}
.ket{font-size:.72rem;color:var(--muted);margin-top:10px;line-height:1.5}
.ket-kode{font-size:.72rem;color:var(--muted);margin-top:10px;line-height:1.5}

/* grafik */
.chart-box{position:relative;height:270px}
.chart-box.tall{height:330px}
.chart-box.short{height:210px}

/* ===== Portal halaman masuk (login.php) ===== */
.portal-wrap{min-height:100vh;padding:30px 20px 44px}
.portal-inner{max-width:1240px;margin:0 auto}
.portal-head{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:22px;border-bottom:3px double var(--emas);
}
.portal-brand{display:flex;align-items:center;gap:15px;min-width:0}
.portal-logo{
  width:62px;height:62px;border-radius:17px;display:grid;place-items:center;color:#fff;flex:0 0 auto;
  background:linear-gradient(160deg,var(--hijau-tua),var(--hijau));
  border:2px solid var(--emas);box-shadow:0 12px 26px -14px rgba(9,61,44,.85);
}
.portal-brand h1{margin:0;font-size:1.5rem;font-family:var(--serif);color:var(--hijau-tua);letter-spacing:-.01em}
.portal-tagline{display:inline-block;font-family:Inter,system-ui,sans-serif;font-size:.78rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--maroon);vertical-align:middle;margin-left:8px}
.portal-brand p{margin:6px 0 0;color:var(--muted);font-size:.85rem}
.portal-head-kanan{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* dua kolom: penjelasan (kiri) + form masuk (kanan) */
.portal-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(330px,1fr);gap:22px;align-items:start}
.portal-info{display:flex;flex-direction:column;gap:20px;min-width:0}
.portal-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:22px}

.portal-hero .portal-lead{margin:0 0 10px;font-size:.92rem;line-height:1.65}
.portal-lead b{color:var(--hijau-tua)}

/* daftar menu: dua kolom di layar lebar */
.portal-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.portal-menu-item{
  display:flex;gap:11px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--emas);border-radius:10px;padding:11px 13px;
}
.portal-menu-ico{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;color:#fff;
  background:linear-gradient(150deg,var(--hijau),var(--hijau-tua));border:1px solid var(--emas);
}
.portal-menu-item b{display:block;font-size:.85rem;color:var(--hijau-tua)}
.portal-menu-item span{font-size:.77rem;color:var(--muted);line-height:1.45}

.portal-alur{margin:0 0 12px;padding-left:20px;font-size:.83rem;line-height:1.6;counter-reset:none}
.portal-alur li{margin-bottom:6px}
.portal-alur b{color:var(--hijau-tua)}
.portal-cek{margin:0;padding-left:20px;font-size:.8rem;color:var(--muted);line-height:1.6}
.portal-cek li{margin-bottom:5px}

.portal-login h2{display:flex;align-items:center;gap:8px;font-size:1.05rem}
.portal-bantuan{
  background:var(--emas-muda);border:1px dashed rgba(201,162,39,.7);border-radius:10px;padding:11px 13px;
  font-size:.78rem;line-height:1.5;color:#4d3f0c;
}
.portal-bantuan b{display:block;color:#3f2f05;margin-bottom:3px}
/* Footer portal: keterangan versi + baris pengembang (paling bawah halaman). */
.portal-pengembang{line-height:1.5;font-weight:600;color:var(--hijau-tua)}

.portal-foot{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.75rem;
  margin-top:28px;padding-top:14px;border-top:3px double var(--emas);text-align:center;
}

/* responsif: portal menjadi satu kolom */
@media (max-width:1080px){
  .portal-grid{grid-template-columns:minmax(0,1fr)}
  .portal-side{position:static}
  .portal-menu{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .portal-wrap{padding:20px 14px 34px}
  .portal-head-kanan{width:100%}
  .portal-brand h1{font-size:1.28rem}
  .portal-tagline{display:block;margin:4px 0 0}
  .portal-menu{grid-template-columns:minmax(0,1fr)}
  .portal-foot{flex-direction:column}
}

/* ===== Halaman pendaftaran publik (daftar.php) ===== */
.daftar-wrap{min-height:100vh;padding:32px 18px 46px}
.daftar-inner{max-width:940px;margin:0 auto}
.daftar-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.daftar-logo{
  width:58px;height:58px;border-radius:16px;display:grid;place-items:center;color:#fff;flex:0 0 auto;
  background:linear-gradient(160deg,var(--hijau-tua),var(--hijau));
  border:2px solid var(--emas);box-shadow:0 12px 26px -14px rgba(9,61,44,.85);
}
.daftar-head h1{font-size:1.38rem;margin:0}
.daftar-head p{margin:5px 0 0;color:var(--muted);font-size:.85rem}
.daftar-head-kanan{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.daftar-foot{margin-top:22px;text-align:center;font-size:.76rem;color:var(--muted)}
/* Langkah/alur pendaftaran — bernomor emas, dan varian ikon untuk daftar fitur */
.langkah{
  display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--emas);border-radius:11px;padding:11px 13px;
}
.langkah b{display:block;font-size:.85rem;color:var(--hijau-tua)}
.langkah span{font-size:.78rem;color:var(--muted)}
.langkah i{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-style:normal;
  font-weight:800;font-size:.78rem;color:#3f2f05;flex:0 0 auto;
  background:linear-gradient(150deg,var(--emas-terang),var(--emas));border:1px solid rgba(120,92,10,.35);
}
.langkah-ico{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;color:#fff;
  background:linear-gradient(150deg,var(--hijau),var(--hijau-tua));border:1px solid var(--emas);
}
.kredensial{border:1px dashed rgba(201,162,39,.7);background:var(--emas-muda);border-radius:11px;padding:12px 14px}
@media (max-width:640px){
  .daftar-head-kanan{margin-left:0;width:100%}
  .daftar-wrap{padding:22px 14px 36px}
}

/* ===== Cetak / dokumen ===== */
.print-sheet{background:#fff;padding:30px 34px;border-radius:var(--radius);box-shadow:var(--shadow);
  border:1px solid var(--line);border-top:4px solid var(--emas)}
.sheet-head{text-align:center;border-bottom:3px double var(--hijau-tua);padding-bottom:12px;margin-bottom:16px}
.sheet-head.kop-logo{display:flex;align-items:center;gap:18px;text-align:left}
.sheet-head.kop-logo .kop-gambar{flex:0 0 auto}
.sheet-head.kop-logo .kop-gambar img{width:26mm;height:26mm;object-fit:contain;display:block}
.sheet-head.kop-logo .kop-teks{flex:1;text-align:center}
.sheet-head h2{font-size:1.16rem;text-transform:uppercase;letter-spacing:.02em;color:var(--hijau-tua)}
.sheet-head p{margin:4px 0 0;font-size:.83rem;color:var(--muted)}
.sheet-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;font-size:.86rem;margin-bottom:18px}
.sheet-meta b{display:inline-block;min-width:132px;color:var(--hijau-tua);font-weight:700}
.sheet-foto{float:right;margin:0 0 14px 18px}
table.sheet{width:100%;border-collapse:collapse;font-size:.82rem}
table.sheet th,table.sheet td{border:1px solid #7d8f86;padding:7px 9px;vertical-align:top;text-align:left}
table.sheet th{background:var(--hijau-muda);font-weight:700;font-size:.78rem;color:var(--hijau-tua)}
table.sheet thead tr:first-child th{border-bottom:2px solid var(--hijau-tua)}
table.sheet tfoot th{background:var(--emas-muda)}
table.sheet td.ctr,table.sheet th.ctr{text-align:center}
table.sheet.padat th,table.sheet.padat td{padding:5px 6px;font-size:.76rem}
/* Judul KELOMPOK kolom pada lembar cetak (kelas .grp-fmt/.grp-smt/.grp-asas/.grp-na dipakai
   juga oleh tabel input nilai — di sini versi lembar cetak dibuat lebih terang agar aman dicetak).
   Hijau = Formatif (penilaian proses), biru = Sumatif Lingkup Materi, maroon = ASAS, emas = Nilai Akhir.
   "awal-grup" memberi garis pemisah antarkelompok kolom. */
table.sheet th.grp-fmt{background:#e2f1ea}
table.sheet th.grp-smt{background:#e0edf3}
table.sheet th.grp-asas{background:#f3e3e5}
table.sheet th.grp-na{background:var(--emas-muda)}
table.sheet th.awal-grup,table.sheet td.awal-grup{border-left:2px solid var(--hijau-tua)}
table.sheet thead tr.sub th{font-size:.72rem;color:var(--muted);font-weight:700}
.sheet-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sheet-foot{display:flex;justify-content:space-between;gap:30px;margin-top:32px;font-size:.85rem}
.sheet-sign{text-align:center;flex:1}
.sheet-sign .space{height:62px}
.sheet-sign u{font-weight:700}
.sheet-foot.kanan{justify-content:flex-end}
.sheet-sign-kanan{flex:0 0 auto;min-width:250px;text-align:center}
.sheet-sign-kiri{text-align:center}
/* Dua tanda tangan berdampingan (mis. kepala sekolah/madrasah & guru): kedua blok
   dibuat SAMA LEBAR sehingga berlaku simetris — posisinya ditentukan oleh URUTAN di HTML,
   bukan oleh kelas. Urutan yang dipakai aplikasi ini: kepala di KIRI, guru di KANAN. */
.sheet-foot.dua-ttd .sheet-sign{flex:1 1 0;min-width:0;text-align:center}
.nilai-box{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin:18px 0}
.nilai-chip{min-width:132px;text-align:center;border:1px solid var(--line);border-top:3px solid var(--emas);
  border-radius:11px;padding:11px 16px;background:#fff}
.nilai-chip b{display:block;font-size:1.5rem;font-weight:800;color:var(--hijau-tua)}
.nilai-chip span{font-size:.73rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.kop-kecil .sheet-head h2{font-size:1.05rem}

/* kosong */
.empty{text-align:center;padding:34px 20px;color:var(--muted)}
.empty svg{opacity:.5;margin-bottom:10px;color:var(--hijau)}
.empty h3{color:var(--hijau-tua);margin-bottom:6px}
.empty p{margin:0 0 16px;font-size:.86rem}

/* utilitas */
.mut{color:var(--muted)}
.sm{font-size:.8rem}
.xs{font-size:.73rem}
.nowrap{white-space:nowrap}
.mt0{margin-top:0}.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}
.center{text-align:center}
.right{text-align:right}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--emas),transparent);margin:16px 0}
.chip-list{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:8px;background:#fff;
  border:1px solid var(--line);font-size:.77rem;font-weight:600;color:var(--hijau-tua)}
.chip.on{background:linear-gradient(150deg,var(--hijau),var(--hijau-tua));color:#fff;border-color:transparent}
.chip-mati{opacity:.6}

/* nav toggle mobile */
.nav-toggle{display:none;position:fixed;top:14px;left:14px;z-index:60;width:42px;height:42px;border-radius:11px;
  border:1px solid var(--emas);background:var(--hijau-tua);cursor:pointer;align-items:center;justify-content:center;color:var(--emas-muda)}
.scrim{display:none;position:fixed;inset:0;background:rgba(9,42,30,.5);z-index:35;backdrop-filter:blur(2px)}

@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g21,.g12,.g3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .nav-toggle{display:flex}
  .sidebar{transform:translateX(-100%);transition:transform .22s ease}
  .sidebar.open{transform:none}
  .scrim.on{display:block}
  .main{margin-left:0;padding:70px 16px 32px}
  .g2{grid-template-columns:minmax(0,1fr)}
  .topbar{align-items:flex-start}
  .print-sheet{padding:18px 14px}
  .sheet-meta{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-num{font-size:1.45rem}
  .foto-baris{gap:16px}
  .foto-sisi{flex-direction:row;align-items:center;width:100%}
}

@media print{
  body{background:#fff}
  .bg-deco,.sidebar,.nav-toggle,.topbar,.foot,.no-print,.scrim{display:none !important}
  .main{margin:0;padding:0}
  .content{gap:0;margin-top:0}
  .print-sheet{box-shadow:none;border:none;border-top:none;padding:0;border-radius:0}
  .card{background:#fff;box-shadow:none;border:none}
  .card::before{display:none}
  .sheet-foto{float:right}
  a{color:inherit;text-decoration:none}
  table.sheet th{background:#eaf2ec !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  table.sheet tfoot th{background:#fbf4dd !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{size:A4;margin:14mm}
}