/* ==========================================================================
   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}
/* Elemen ber-atribut `hidden` WAJIB benar-benar tersembunyi. Banyak wadah di tema ini memakai
   display:grid/flex, dan karena aturan penulis (author) selalu mengalahkan gaya bawaan peramban,
   `[hidden]{display:none}` dari UA stylesheet bisa IKUT KALAH sehingga elemen yang seharusnya
   disembunyikan tetap tampil (pernah terjadi pada navigasi slider portal). Dipakai mis. oleh medan
   NSM pada halaman pendaftaran saat jenisnya "Sekolah Umum" (sekolah umum tidak punya NSM). */
[hidden]{display:none !important}
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}

/* ----- SUB MENU sidebar (permintaan pemilik, v1.57.0) -----
   "menu posisi dirubah dan dijadikan sub menu dengan urutan baru … bagian tugas tambahan buat
   sub menu Ketika di klik baru muncul".
   Memakai <details>/<summary> sehingga buka-tutupnya bekerja TANPA JavaScript; judulnya bergaya
   seperti .nav-item dan isinya menjorok dengan garis emas tipis di kiri. */
.nav-grup > summary{list-style:none;cursor:pointer}
.nav-grup > summary::-webkit-details-marker{display:none}
.nav-grup > summary::marker{content:''}
.nav-grup[open] > summary{background:rgba(255,255,255,.10);border-color:rgba(201,162,39,.4)}
.nav-caret{
  margin-left:auto;font-size:.7rem;line-height:1;color:rgba(234,243,238,.85);
  transition:transform .16s;flex:0 0 auto;
}
.nav-caret::before{content:'\25BE'}   /* ▾ */
.nav-grup[open] > summary .nav-caret{transform:rotate(180deg)}
.nav-sub{
  display:flex;flex-direction:column;gap:2px;margin:3px 0 3px 15px;padding-left:11px;
  border-left:1px solid rgba(201,162,39,.38);
}
.nav-sub .nav-item{padding:7px 10px;font-size:.835rem}
.nav-sub .nav-item svg{width:15px;height:15px;opacity:.9}
.nav-sub .nav-item .pill{font-size:.62rem}

/* ----- TANDA "NEW" BERKEDIP pada menu sidebar (permintaan pemilik, v1.59.0) -----
   *"Pada menu ujian online tambahkan tulisan new berkedip seperti pada aplikasi smart teacher"*.
   Dipakai `daftar_apps_badge_new()`/`daftar_apps_nama_sidebar()` (inc/daftar_apps.php) untuk menu
   daftar aplikasi yang memakai fitur ini (kini: "Ujian Online"). Tanda diletakkan **SEBARIS DI ATAS
   nama menu** lewat wadah `.nav-nama` — sama seperti aplikasi Smart Teacher.
   Kedipan memakai `opacity` (bukan warna) supaya kontras huruf tetap terjaga, dan dimatikan bagi
   pengguna yang mengaktifkan "kurangi gerakan" pada perangkatnya. */
@keyframes newKedip{
  0%,100%{opacity:1}
  50%{opacity:.32}
}
.new-tag{
  display:inline-block;padding:1px 7px;border-radius:999px;width:max-content;
  /* Merah sengaja TIDAK memakai #ef4444: huruf putih di atasnya berkontras 3,76:1 (di bawah
     standar 4,5:1). #dc2626 = 4,83:1 dan #991b1b = 8,31:1 sehingga teks tetap terbaca. */
  background:linear-gradient(145deg,#dc2626,#991b1b);color:#fff;
  font-size:.54rem;font-weight:800;letter-spacing:.07em;line-height:1.45;white-space:nowrap;
  box-shadow:0 4px 10px -6px rgba(185,28,28,.85);
  animation:newKedip 1.15s ease-in-out infinite;
}
/* Wadah nama menu pada sidebar: tanda NEW berada SEBARIS DI ATAS nama menu. */
.nav-nama{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.nav-nama>.new-tag{margin-bottom:1px}
/* Kotak setelan "Tandai sebagai baru" pada formulir aplikasi (hanya menu yang memakai label ini). */
.apps-baru{
  padding:12px 14px;border:1px solid rgba(185,28,28,.28);border-left:4px solid #dc2626;
  border-radius:var(--radius-sm);background:#fef5f5;
}
.apps-baru-setelan{display:flex;gap:10px;align-items:flex-start;font-weight:600;cursor:pointer}
.apps-baru-setelan .new-tag{vertical-align:middle;margin:0 4px}
.apps-baru-setelan .xs{display:inline;font-weight:500}
@media (prefers-reduced-motion: reduce){
  .new-tag{animation:none}
}
.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}
/* Baris JUMLAH pada tabel ringkasan (permintaan pemilik): total kelas/guru/siswa/mapel/jurnal/nilai
   dari seluruh sekolah/madrasah yang terdaftar di atasnya — dibuat menonjol dengan latar emas muda. */
table.tbl tfoot td{
  background:var(--emas-muda);font-weight:800;color:var(--hijau-tua);
  border-top:2px solid var(--emas);border-bottom:none;
}
table.tbl tfoot td.kiri{text-align:left}
table.tbl tfoot .tbl-sub{font-weight:400}

/* ===== KARTU "PENGAWAS BINA" pada dashboard (v1.45.0, permintaan pemilik) =====
   Menampilkan foto + nama pengawas yang membina sekolah/madrasah itu, di bagian ATAS dashboard akun
   Kepala Sekolah/Madrasah & akun Guru. Kartu memakai kelas `.card` yang sudah ada (glassmorphic);
   yang ditambahkan hanya tata letak isinya. Kartu tetap dicetak walau belum ada pengawas (keterangan
   ramah), supaya pengguna tahu keadaannya. */
.card-pengawas{border-left:3px solid var(--emas)}
.bina-grid{display:flex;flex-wrap:wrap;gap:18px}
.bina-item{
  display:flex;align-items:center;gap:14px;padding:12px 16px;min-width:250px;flex:1 1 250px;
  background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.bina-avatar{flex:0 0 auto;font-weight:800}
.bina-teks{min-width:0}
.bina-teks b{display:block;font-size:.95rem;color:var(--hijau-tua);line-height:1.25}
.bina-ket{display:block;font-size:.74rem;color:var(--muted);margin-top:2px}
.bina-kosong{
  display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--radius-sm);
  background:rgba(201,162,39,.08);border:1px dashed rgba(201,162,39,.45);color:var(--muted);
  font-size:.86rem;
}
.bina-kosong svg{flex:0 0 auto;color:var(--emas)}
@media (max-width:560px){.bina-grid{gap:12px}.bina-item{min-width:0;flex:1 1 100%}}

/* ===== KARTU "GABUNG GRUP e-GURU" pada dashboard (v1.47.0, permintaan pemilik) =====
   Diletakkan SEJAJAR dengan kartu "Pengawas Bina" (`index.php`, pembungkus `.grid.g2.atas-dashboard`).
   ⚠️ `align-items:start` WAJIB: tanpa itu kedua kartu saling meregang setinggi kartu tertinggi —
   permintaan pemilik: "kartu pengawas bina di dashboard guru dan kepala madrasah jangan
   dipanjangkan". Kartu tetap memakai kelas `.card` yang sudah ada. */
.atas-dashboard{align-items:start}
.card-grup{border-left:3px solid #25D366}
.card-grup .card-head{margin-bottom:12px}
/* Tombol gabung grup: hijau WhatsApp (aksen tambahan khusus kartu ini, tombol utama tetap indigo). */
.btn-wa{
  background:#25D366;color:#0b2e13;border:1px solid #1da851;font-weight:700;
}
.btn-wa:hover{background:#1da851;color:#06210d}
@media (max-width:900px){.atas-dashboard{grid-template-columns:minmax(0,1fr)}}

/* ===== 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],input[type=url],input[type=email],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 APLIKASI (hasil unggahan Super Admin lewat menu "Logo Aplikasi") -----
   Ketiga tempat di bawah memakai lambang bawaan (ikon SVG) bila logo belum diunggah, dan gambar
   logo bila sudah. Ukuran/kelas dasarnya TIDAK diubah supaya tata letak halaman tidak bergeser;
   varian `*-img` hanya menambahkan latar putih + gambar yang muat di dalam kotaknya. */
.brand-logo-img,
.portal-logo-img,
.daftar-logo-img{background:#fff;padding:3px;overflow:hidden}
.brand-logo-img img,
.portal-logo-img img,
.daftar-logo-img img{width:100%;height:100%;object-fit:contain;display:block;border-radius:10px}
.logo-contoh{background:var(--hijau-muda);border-radius:12px;padding:14px;display:flex;
  flex-direction:column;gap:14px;align-items:center}
.contoh-baris{display:flex;flex-direction:column;align-items:center;gap:6px}
.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}

/* ---------- Pas foto siswa 3 x 4 (form Tambah/Ubah Data Siswa) ----------
   Kotak pratinjau 96 x 128 px = rasio 3:4 persis, gambar di-crop dari ATAS supaya
   kepala/wajah tidak terpotong (foto siswa umumnya berformat potret). */
.pasfoto-baris{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.pasfoto-sisi{flex:0 0 auto}
.pasfoto-kotak{width:96px;height:128px;border-radius:10px;overflow:hidden;border:2px solid var(--emas);
  background:#faf8f0;display:grid;place-items:center;text-align:center;line-height:1.4;padding:6px}
.pasfoto-kotak img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.pasfoto-form{flex:1 1 300px;min-width:240px}

/* ===== 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) =====
   Permintaan pemilik: keempat tombol tampil SAMA pada keadaan awal — kotak putih-krem dengan huruf
   hitam — supaya tidak menyiratkan arti, lalu berubah HIJAU ketika dipilih.
   Karena itu aturan warna PER KODE (sel-H/sel-S/sel-I/sel-A) DIHAPUS dari CSS: kelas dasarnya tetap
   ada di markup (absensi_form.php) karena assets/app.js `tandai()` memakainya sebagai penanda —
   jangan dihapus dari markup, cukup warnanya yang tidak diatur lagi di sini.
   Tombol H sudah terpilih otomatis saat formulir dibuka (default 'H' dari absensi_form.php). */
.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:#fcf9ef;font-weight:800;font-size:.8rem;cursor:pointer;transition:.14s;color:#111827;
}
.st input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.st label:hover{transform:translateY(-1px);border-color:var(--emas)}
/* Terpilih: kotak DAN huruf berubah menjadi hijau (huruf dibuat putih agar tetap terbaca di atas
   latar hijau — bila pemilik ingin huruf tetap hijau, ubah warna huruf pada aturan ini). */
.st label.sel{
  background:linear-gradient(150deg,#178a5f,#0b5c3f);color:#fff;border-color:transparent;
  box-shadow:0 8px 16px -10px rgba(0,0,0,.7);
}

/* ===== 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}

/* ===== Jurnal Harian: "Kelas / Tempat" (permintaan pemilik, v1.37.0) =====
   Guru memilih KELAS **atau** mengisi TEMPAT kegiatan secara manual (kegiatan di luar kelas,
   mis. Ruang Guru, Lab IPA, Aula) — cukup salah satu. Dua isian berdampingan dan menumpuk sendiri
   di layar sempit. Skrip initJurnalForm() (assets/app.js) hanya membantu mengosongkan/menonaktifkan
   isian yang tidak dipakai (mengosongkannya); penjagaan "tidak boleh keduanya" di SERVER
   (jurnal.php) — kedua isian sengaja TETAP AKTIF agar guru tidak terjebak. */
.kelas-tempat{display:flex;gap:10px;flex-wrap:wrap}
.kelas-tempat > select{flex:1 1 180px;min-width:0}
.kelas-tempat > input{flex:1 1 170px;min-width:0}

/* ===== 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}

/* ---------------------------------------------------------------------------
   PENGATURAN PENILAIAN (guru) — kartu #cardPengaturanNilai pada halaman nilai.
   Formulir dibungkus <details> supaya bisa dibuka-tutup TANPA JavaScript (tombolnya <summary>).
   Permintaan pemilik: guru menyetel sendiri kolom Formatif/Sumatif, bobot ASAS, dan ambang
   predikat A/B/C/D untuk tiap mata pelajaran yang diampu.
--------------------------------------------------------------------------- */
.set-nilai summary{list-style:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  user-select:none}
.set-nilai summary::-webkit-details-marker{display:none}
.set-nilai summary::after{content:'▾';font-size:.7em;margin-left:2px;transition:transform .15s}
.set-nilai[open] summary::after{transform:rotate(180deg)}
.set-nilai summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.set-nilai-isi{margin-top:14px}
.set-nilai .grid.g3{gap:16px}
@media print{.set-nilai summary{display:none}}
.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}

/* ============================================================================
   HALAMAN DEPAN (LANDING PAGE) — login.php
   Permintaan pemilik: "Buat halaman depan aplikasi menjadi tampilan web landing page yang
   menampilkan beranda, Slider (Judul, gambar, keterangan), fitur aplikasi, keunggulan,
   Total Pengguna (Pengawas, Kepala Sekolah, Madrasah, Guru), testimoni, kontak. Panel login tetap
   dipertahankan. Untuk mengisi halaman landing page di isi lewat akun super admin."
   Tema: tetap HIJAU TUA + EMAS aplikasi ini, tetapi lebih MODERN & BERSIH (kartu lembut,
   banyak ruang, tanpa bingkai ganda yang ramai).
   ============================================================================ */
.lp-wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* --- bilah navigasi --- */
.lp-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid rgba(11,74,51,.14);
}
.lp-nav-isi{display:flex;align-items:center;gap:16px;min-height:72px}
.lp-brand{display:flex;align-items:center;gap:12px;min-width:0}
/* Lambang pada bilah navigasi: memakai kelas portal-logo, ukurannya disesuaikan di sini. */
.lp-brand .portal-logo{
  width:46px;height:46px;border-radius:14px;border-width:1.5px;
  box-shadow:0 8px 18px -12px rgba(9,61,44,.9);
}
.lp-brand .portal-logo svg{width:24px;height:24px}
.lp-brand-teks{min-width:0}
.lp-brand-teks b{display:block;font-size:1.06rem;font-family:var(--serif);letter-spacing:-.01em;color:var(--hijau-tua)}
.lp-brand-teks p{margin:3px 0 0;font-size:.76rem;color:var(--muted);line-height:1.35}
.lp-nav-link{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:wrap}
.lp-nav-link a{padding:8px 11px;border-radius:10px;font-size:.84rem;font-weight:600;color:var(--ink)}
.lp-nav-link a:hover{background:rgba(16,107,74,.09);text-decoration:none}
.lp-nav-link a.btn-primary{color:#fff}
.lp-nav-toggle{
  display:none;margin-left:auto;width:42px;height:42px;border-radius:12px;cursor:pointer;
  background:#fff;border:1px solid rgba(11,74,51,.22);color:var(--hijau-tua);place-items:center;
}

/* --- beranda: slider (kiri) + panel masuk (kanan) --- */
.lp-hero{padding:48px 0 8px}
.lp-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,1fr);gap:34px;align-items:start}
.lp-hero-teks{min-width:0;padding-top:4px}
.lp-label{
  display:inline-block;padding:6px 14px;border-radius:999px;font-size:.72rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--hijau-tua);
  background:var(--emas-muda);border:1px solid rgba(201,162,39,.45);
}
.lp-hero-side{position:sticky;top:94px}

/* --- DUA TAB PANEL MASUK (v1.61.0): "Pengguna" & "Siswa" ---
   Tabnya berupa TAUTAN (bukan radio/JS) sehingga tetap benar walau skrip gagal dimuat dan
   keadaan tab tersimpan pada alamat halaman (?tab=siswa). */
.lp-tab{
  display:flex;gap:6px;padding:5px;margin:0 0 16px;border-radius:12px;
  background:rgba(11,74,51,.07);border:1px solid rgba(11,74,51,.12);
}
.lp-tab-btn{
  flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 12px;border-radius:9px;font-size:.85rem;font-weight:700;color:var(--hijau-tua);
  text-align:center;
}
.lp-tab-btn:hover{background:rgba(255,255,255,.7);text-decoration:none}
.lp-tab-btn.on{
  background:#fff;box-shadow:0 8px 18px -14px rgba(11,74,51,.8);
  border:1px solid rgba(201,162,39,.55);
}

/* Kartu pintasan pada beranda siswa (mengikuti pola .card.stat, ditambah efek timbul halus). */
a.sis-kartu{display:flex;gap:13px;align-items:flex-start;color:inherit;text-decoration:none}
a.sis-kartu:hover{text-decoration:none;border-color:rgba(201,162,39,.55)}

/* --- Kartu "Data Saya" (siswa_saya.php): pas foto + tabel identitas berdampingan --- */
.sis-profil{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.sis-foto{
  width:126px;flex:0 0 auto;aspect-ratio:3/4;border-radius:12px;overflow:hidden;
  display:grid;place-items:center;background:rgba(255,255,255,.7);
  border:1px solid rgba(11,74,51,.2);
}
.sis-foto img{width:100%;height:100%;object-fit:cover;display:block}
.sis-foto-kosong{display:grid;place-items:center;gap:6px;padding:8px;text-align:center;color:var(--muted)}
.sis-foto-kosong small{font-size:.7rem}
table.tbl th[scope],table.tbl tbody th{text-align:left}
/* Halaman siswa: tidak ada tombol pengubahan, jadi tabel identitas memakai th sebagai label. */
table.tbl tbody th{font-weight:700;color:var(--hijau-tua);background:rgba(231,242,236,.55)}

/* --- Rincian pertemuan pada halaman Daftar Hadir siswa (<details>) --- */
details.sis-rincian{
  margin-top:12px;border:1px solid rgba(11,74,51,.16);border-radius:10px;
  background:rgba(231,242,236,.45);padding:10px 12px;
}
details.sis-rincian summary{
  cursor:pointer;font-size:.86rem;color:var(--hijau-tua);display:flex;gap:8px;
  align-items:center;flex-wrap:wrap;
}
details.sis-rincian summary::marker{color:var(--emas)}
details.sis-rincian > .table-wrap{margin-top:10px}
details.sis-rincian:target{outline:2px solid var(--emas);outline-offset:2px}

/* --- Kartu identitas siswa pada sidebar akun siswa --- */
.nav-ket-siswa{
  margin:4px 8px 8px;padding:11px 13px;border-radius:10px;
  background:rgba(255,255,255,.12);border:1px solid rgba(233,204,120,.35);
}
.nav-ket-siswa b{display:block;font-size:.85rem;cursor:default}
.nav-ket-siswa span{display:block;font-size:.74rem;opacity:.85;margin-top:3px}
.lp-ikon{flex:0 0 auto}

/* --- SLIDER BERANDA (Judul + gambar + keterangan) ---
   TANPA JavaScript tetap bekerja: lintasan memakai overflow-x + scroll-snap sehingga bisa digeser
   sendiri, dan seluruh slide tetap ada di HTML. */
.lp-slider{position:relative;margin-top:16px}
.lp-slider-track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:var(--radius);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.lp-slider-track::-webkit-scrollbar{display:none}
.lp-slide{
  flex:0 0 100%;scroll-snap-align:start;margin:0;position:relative;overflow:hidden;
  border:1px solid rgba(11,74,51,.14);border-radius:var(--radius);
  box-shadow:0 18px 38px -26px rgba(11,74,51,.55);background:#fff;
}
.lp-slide-gambar{
  position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(150deg,var(--hijau-tua),var(--hijau) 55%,var(--hijau-terang));
}
.lp-slide-gambar img{width:100%;height:100%;object-fit:cover;display:block}
.lp-slide-kosong{display:grid;place-items:center;gap:10px;padding:20px;text-align:center;color:rgba(255,255,255,.92)}
.lp-slide-kosong small{font-size:.76rem;font-weight:600}
.lp-slide-teks{
  position:absolute;left:0;right:0;bottom:0;padding:22px 24px 20px;color:#fff;
  background:linear-gradient(180deg,rgba(11,40,29,0) 0%,rgba(11,40,29,.5) 42%,rgba(11,40,29,.88) 100%);
}
.lp-slide-judul{margin:0;font-size:1.45rem;line-height:1.25;color:#fff;font-family:var(--serif)}
.lp-slide-ket{margin:9px 0 0;font-size:.87rem;line-height:1.62;color:rgba(255,255,255,.95)}
.lp-slider-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}

/* --- Baris "Cepat, Mudah, Praktis, Lengkap" di bawah slider beranda (v1.60.2) ---
   Empat kotak kecil berisi ikon + kata; diletakkan di kolom kiri halaman depan. */
.lp-cepat{
  list-style:none;margin:22px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
}
.lp-cepat-item{
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.82);border:1px solid rgba(11,74,51,.14);
  box-shadow:0 12px 26px -24px rgba(11,74,51,.6);
  font-weight:700;font-size:.86rem;color:var(--hijau-tua);
}
.lp-cepat-ikon{
  width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
  color:#4a3906;background:linear-gradient(150deg,var(--emas-terang),var(--emas));
}
.lp-cepat-teks{min-width:0;overflow-wrap:break-word}

/* --- bagian umum --- */
.lp-seksi{padding:62px 0}
.lp-seksi.lp-alt{
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.16));
  border-top:1px solid rgba(11,74,51,.1);border-bottom:1px solid rgba(11,74,51,.1);
}
.lp-seksi-head{max-width:760px;margin:0 auto 34px;text-align:center}
.lp-seksi-head h2{font-size:1.7rem}
.lp-seksi-head p{margin:12px 0 0;color:var(--muted);font-size:.92rem;line-height:1.72}
.lp-seksi-head .lp-label{margin-bottom:10px}
.lp-grid{display:grid;gap:20px}
.lp-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lp-kartu{
  background:rgba(255,255,255,.82);border:1px solid rgba(11,74,51,.12);border-radius:var(--radius);
  box-shadow:0 16px 34px -28px rgba(11,74,51,.6);padding:24px;
  transition:transform .18s ease,box-shadow .18s ease;
}
.lp-kartu h3{margin:15px 0 8px;font-size:1.02rem}
.lp-kartu p{margin:0;font-size:.86rem;color:var(--muted);line-height:1.72}
.lp-ikon{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--hijau),var(--hijau-tua));
  box-shadow:0 10px 20px -14px rgba(11,74,51,.95);
}
.lp-ikon-emas{background:linear-gradient(150deg,var(--emas-terang),var(--emas));color:#4a3906}
.lp-ikon-kecil{width:34px;height:34px;border-radius:11px}
/* Efek timbul pada kartu (halus; dihormati saat pengguna memilih gerak minimal). */
@media (hover:hover){
  .lp-timbul:hover{transform:translateY(-5px);box-shadow:0 22px 40px -24px rgba(11,74,51,.5)}
}
/* Terasa "ditekan" saat ditekan — WAJIB ditulis SESUDAH blok hover di atas. */
.lp-timbul:active{transform:translateY(-2px) scale(.995)}

/* --- TOTAL PENGGUNA (angka dihitung otomatis; lihat landing_pengguna_list()) --- */
.lp-pengguna{
  background:linear-gradient(150deg,var(--hijau-tua),#0e5c3f 60%,var(--hijau));
  border-top:1px solid rgba(201,162,39,.5);border-bottom:1px solid rgba(201,162,39,.5);
}
.lp-pengguna .lp-seksi-head h2,.lp-pengguna .lp-seksi-head p{color:#fff}
.lp-pengguna .lp-seksi-head p{color:rgba(255,255,255,.82)}
.lp-pengguna-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.lp-pengguna-kartu{
  background:rgba(255,255,255,.1);border:1px solid rgba(233,204,120,.42);border-radius:var(--radius);
  padding:22px 18px;text-align:center;color:#fff;
}
.lp-pengguna-ikon{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;margin:0 auto 12px;
  color:#3f2f05;background:linear-gradient(150deg,var(--emas-terang),var(--emas));
}
.lp-pengguna-angka{display:block;font-size:2rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.lp-pengguna-label{display:block;margin-top:6px;font-size:.8rem;color:rgba(255,255,255,.88);font-weight:600}
.lp-pengguna-ringkas{
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;margin-top:26px;padding-top:20px;
  border-top:1px solid rgba(233,204,120,.32);color:rgba(255,255,255,.9);font-size:.83rem;
}
.lp-pengguna-ringkas span{display:inline-flex;align-items:center;gap:7px}
.lp-pengguna-ringkas b{color:var(--emas-terang);font-size:.95rem}

/* --- testimoni --- */
.lp-testi-slider{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.lp-testi-track{display:flex;gap:20px}
.lp-testi-slide{
  flex:0 0 calc((100% - 20px) / 2);scroll-snap-align:start;margin:0;
  background:rgba(255,255,255,.86);border:1px solid rgba(11,74,51,.12);border-radius:var(--radius);
  box-shadow:0 16px 34px -28px rgba(11,74,51,.6);padding:24px;
  display:flex;flex-direction:column;gap:14px;
}
.lp-kutip{font-size:2.4rem;line-height:.6;color:var(--emas);opacity:.75;font-family:Georgia,serif}
.lp-testi-slide blockquote{margin:0;font-size:.9rem;line-height:1.78;color:var(--ink)}
.lp-testi-sumber{display:flex;align-items:center;gap:12px;margin-top:auto}
.lp-testi-foto{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.lp-testi-inisial{
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.05rem;
  background:linear-gradient(150deg,var(--hijau),var(--hijau-tua));
}
.lp-testi-teks{min-width:0}
.lp-testi-teks b{display:block;font-size:.88rem;color:var(--hijau-tua)}
.lp-testi-teks small{display:block;font-size:.76rem;color:var(--muted)}
.lp-testi-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px}
/* Tombol panah & titik penunjuk dipakai BERSAMA oleh slider beranda dan slider testimoni. */
.lp-testi-panah,.lp-slider-panah{
  width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.3rem;line-height:1;
  background:#fff;border:1px solid rgba(11,74,51,.22);color:var(--hijau-tua);
}
.lp-testi-panah:hover,.lp-slider-panah:hover{background:var(--hijau-muda)}
.lp-testi-titik,.lp-slider-titik{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.lp-testi-titik button,.lp-slider-titik button{width:9px;height:9px;padding:0;border-radius:50%;border:none;cursor:pointer;
  background:rgba(11,74,51,.25)}
.lp-testi-titik button.on,.lp-slider-titik button.on{background:var(--emas);width:24px;border-radius:999px}

/* --- tentang aplikasi (satu kartu, isi dari menu "Tentang Aplikasi") --- */
.lp-tentang-kartu{padding:30px;margin:0}
.lp-tentang-kartu .lp-seksi-head{margin-bottom:26px}
.lp-tentang-kartu .portal-tentang{margin:0;padding-bottom:0;border-bottom:0}

/* --- kontak ---
   Kedua kartu bagian kontak WAJIB sama lebar & sama tinggi (permintaan pemilik): grid 1fr:1fr
   menyamakan lebarnya, dan `align-items:stretch` membuat kartu yang lebih pendek ikut meregang. */
.lp-kontak-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.lp-kontak{display:flex;flex-direction:column}
.lp-kontak form{display:flex;flex-direction:column;flex:1 1 auto}
.lp-kontak form textarea{flex:1 1 auto;min-height:132px}
.lp-kontak p{margin:0 0 14px;font-size:.86rem;color:var(--muted);line-height:1.72}
.lp-kontak-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:14px}
.lp-kontak-list li{display:flex;align-items:flex-start;gap:12px}
.lp-kontak-list small{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:700}
.lp-kontak-list span{font-size:.88rem}
.lp-kontak-aksi{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}

/* --- kaki halaman --- */
.lp-foot{
  margin-top:0;background:rgba(255,255,255,.72);border-top:1px solid rgba(11,74,51,.14);
  padding:26px 0;
}
/* Kaki halaman hanya memuat keterangan versi + baris pengembang, DIPUSATKAN (permintaan pemilik:
   blok nama aplikasi & daftar tautan bagian dihapus). */
.lp-foot-isi{display:flex;justify-content:center;text-align:center}
.lp-foot-ket{font-size:.78rem;color:var(--muted);line-height:1.7}

/* --- halaman Super Admin "Halaman Depan (Landing)" (landing.php) --- */
.landing-ikon-pratinjau{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;
  color:#fff;background:linear-gradient(150deg,var(--hijau),var(--hijau-tua))}
.landing-foto-kecil{width:38px;height:38px;border-radius:50%;object-fit:cover}
.landing-foto-pratinjau img{width:64px;height:64px;border-radius:50%;object-fit:cover;
  border:1px solid rgba(11,74,51,.18);margin-bottom:8px}
/* Pratinjau gambar SLIDER (mendatar) — dipakai daftar slide & formulir ubah. */
.landing-gambar-kecil{width:88px;height:55px;border-radius:9px;object-fit:cover;
  border:1px solid rgba(11,74,51,.18)}
.landing-gambar-pratinjau img{width:180px;max-width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:11px;border:1px solid rgba(11,74,51,.18);margin-bottom:8px;display:block}
table.tbl tr.baris-baru{background:rgba(201,162,39,.12)}

@media (max-width:1000px){
  .lp-hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .lp-hero-side{position:static}
  .lp-slide-judul{font-size:1.3rem}
  .lp-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-pengguna-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .lp-nav-toggle{display:grid}
  .lp-nav-link{display:none;width:100%;flex-direction:column;align-items:stretch;gap:2px;padding:10px 0 14px}
  .lp-nav-link.lp-nav-on{display:flex}
  .lp-nav-isi{flex-wrap:wrap}
  .lp-nav-link a{padding:11px 12px}
  .lp-hero{padding:32px 0 6px}
  .lp-slide-gambar{aspect-ratio:4/3}
  .lp-slide-judul{font-size:1.16rem}
  .lp-slide-teks{padding:16px 16px 14px}
  .lp-slide-ket{font-size:.82rem}
  .lp-seksi{padding:42px 0}
  .lp-seksi-head h2{font-size:1.34rem}
  .lp-grid-3,.lp-kontak-grid{grid-template-columns:minmax(0,1fr)}
  .lp-pengguna-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .lp-pengguna-angka{font-size:1.6rem}
  /* Baris "Cepat, Mudah, Praktis, Lengkap" tetap muat dua kolom di HP. */
  .lp-cepat{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
  .lp-cepat-item{padding:10px 12px;font-size:.82rem;gap:9px}
  .lp-cepat-ikon{width:28px;height:28px;border-radius:9px}
  .lp-testi-slide{flex:0 0 100%}
  .lp-foot-isi{flex-direction:column;align-items:center}
  /* slogan pada bilah navigasi turun ke baris sendiri agar tidak berdesakan dengan nama aplikasi */
  .portal-tagline{display:block;margin:4px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .lp-timbul:hover{transform:none}
}

/* ===== Komponen "portal" yang MASIH DIPAKAI di halaman depan & halaman lain =====
   Halaman depan kini berbentuk LANDING PAGE (lihat blok "HALAMAN DEPAN (LANDING PAGE)" di atas).
   Yang tersisa di sini hanya kelas yang benar-benar masih dipakai:
   `.portal-brand`/`.portal-logo`/`.portal-tagline`/`.portal-brand p` (lambang & slogan pada bilah
   navigasi), `.portal-login`, `.portal-bantuan`, `.portal-foot`/`.portal-pengembang`,
   `.portal-hero .portal-lead` (rata kiri-kanan), `.portal-tentang` + `.tentang-*` (dipakai
   `login.php` dan `tentang.php`), serta `.portal-alur`/`.portal-cek` (dipakai `aktivasi.php`
   & `akun_operator.php`). */
.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-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}

/* ----- Isi kartu "Tentang Aplikasi" pada HALAMAN MASUK: FOTO + NAMA + KETERANGAN -----
   Permintaan pemilik: "Pada halaman depan di bagian tentang aplikasi tambahkan tempat foto, nama
   dan keterangan dengan posisi atau letak dibuat sama dengan aplikasi supervisi".
   Tata letaknya MENIRU aplikasi Supervisi: DUA kotak foto 3x4 berdampingan di KIRI (nama di bawah
   masing-masing foto) dan KETERANGAN di SISI KANANNYA (`.tentang-baris` = flex, wrap di layar
   sempit sehingga keterangan turun ke bawah dengan sendirinya — tanpa luapan horizontal).
   Isinya diinput Super Admin di `tentang.php`; kotak foto memakai rasio 3:4 (potret) supaya benar
   berukuran 3x4. Paragraf keterangan memakai .portal-lead (rata KIRI-KANAN) — jangan diubah ke
   kelas lain tanpa memeriksa uji rata kiri-kanannya. */
.portal-tentang{margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid rgba(11,74,51,.16)}
.tentang-baris{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.tentang-foto-grid{display:flex;flex-wrap:wrap;gap:18px;margin:0;flex:0 0 auto}
figure.tentang-slot{margin:0}
.tentang-slot{width:132px;flex:0 0 auto;text-align:center}
.tentang-bingkai{
  width:132px;aspect-ratio:3/4;border-radius:12px;overflow:hidden;display:grid;place-items:center;
  background:rgba(255,255,255,.72);border:1px solid rgba(11,74,51,.22);
  box-shadow:0 14px 26px -20px rgba(11,74,51,.75);
}
.tentang-bingkai img{width:100%;height:100%;object-fit:cover;display:block}
.tentang-kosong{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;color:var(--muted);font-size:.72rem;text-align:center}
.tentang-nama{margin-top:9px;font-size:.8rem;font-weight:700;color:var(--ink);line-height:1.35;overflow-wrap:break-word}
/* Keterangan: di SAMPING kanan kedua foto (bukan di bawahnya). Paragraf di dalamnya memakai
   .portal-lead supaya tetap rata kiri-kanan; hyphens/overflow-wrap menjaga celah antarkata. */
.tentang-ket{flex:1 1 240px;min-width:190px;margin:0}
.tentang-ket .portal-lead{margin:0 0 10px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.tentang-ket .portal-lead:last-child{margin-bottom:0}

/* Halaman Super Admin (tentang.php): pratinjau kotak foto berdampingan dengan isiannya. */
.tentang-admin{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.tentang-admin .tentang-slot{width:150px}
.tentang-admin .tentang-bingkai{width:150px}
.tentang-isi{flex:1 1 260px;min-width:0}

@media (max-width:520px){
  .tentang-foto-grid{gap:14px}
  .tentang-slot,.tentang-bingkai,
  .tentang-admin .tentang-slot,.tentang-admin .tentang-bingkai{width:118px}
  .tentang-ket{min-width:0}
}

/* Paragraf "Tentang Aplikasi" rata KIRI-KANAN (permintaan pemilik: "agar terlihat rapi").
   .portal-lead hanya dipakai pada kartu Tentang Aplikasi di login.php — jangan pakai kelas ini
   untuk paragraf lain kalau tidak ingin ikut rata kiri-kanan. */
.portal-hero .portal-lead{margin:0 0 10px;font-size:.93rem;line-height:1.72;text-align:justify;text-justify:inter-word}
.portal-lead b{color:var(--hijau-tua)}

.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)}

/* Catatan: aturan `.portal-foot` sudah dihapus — kaki halaman depan sekarang memakai `.lp-foot`
   (kelas `portal-foot` tetap dipasang pada elemennya sebagai penanda, tanpa gaya tersendiri). */

/* ===== 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);
}
.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}
}

/* ===== Foto bukti kegiatan pada Notulen rapat ===== */
.not-foto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.not-foto-item{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:var(--radius);
  padding:12px;background:#fff}
.not-foto-gambar{border:2px solid var(--emas);border-radius:12px;overflow:hidden;background:#f6f7f4}
.not-foto-gambar img{width:100%;height:170px;object-fit:cover;display:block}
.not-foto-ket{display:flex;gap:8px;align-items:center}
.not-foto-ket input{flex:1 1 auto;min-width:0;padding:7px 10px;font-size:.82rem}

/* ===== 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)}
/* Nama sekolah/madrasah pada kop dibuat TEBAL (permintaan pemilik) — dipakai semua lembar cetak
   lewat kop_cetak() di inc/kop.php. */
.sheet-head .kop-nama{font-weight:800;font-size:.95rem;color:var(--hijau-tua);letter-spacing:.01em}
.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}
/* Baris "tempat, tanggal" di atas blok tanda tangan (permintaan pemilik, v1.39.0): nama KECAMATAN
   dari identitas lembaga disambung tanggal aktif sistem saat mencetak, mis. "Mootilango, 30
   September 2026". Diletakkan di atas jabatan pada blok tanda tangan pihak pelaksana (kanan).
   ⚠️ Ukuran & line-height WAJIB sama dengan SATU baris jabatan (.sheet-foot font-size:.85rem ×
   line-height 1.55 body) dan tanpa margin, supaya jumlah tinggi baris blok KIRI ("Mengetahui," +
   "Kepala Madrasah") sama dengan blok KANAN (tempat/tanggal + jabatan guru) sehingga
   NAMA guru & NAMA kepala sekolah/madrasah tercetak SEJAJAR (permintaan pemilik).
   Kelas .ttd-spacer dipakai blok kiri yang labelnya hanya satu baris. */
.ttd-tempat{font-size:.85rem;line-height:1.55;margin-bottom:0}
.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}
}

/* ===== MENU DAFTAR APLIKASI (Smart Teacher & Hasil Supervisi) =====
   Kelas diawali "apps-" karena dipakai BERSAMA oleh dua menu (modul inc/daftar_apps.php).
   Isinya nama aplikasi + keterangan + tombol Buka Aplikasi (global, diisi Super Admin). */
.apps-grid{gap:20px}
.apps-kartu{display:flex;flex-direction:column;gap:14px;padding:18px;margin:0}
.apps-kartu-head{display:flex;gap:12px;align-items:flex-start}
.apps-ikon{
  flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--hijau),var(--hijau-tua));color:#fff;font-weight:800;font-size:.95rem;
  letter-spacing:.02em;border:1px solid rgba(201,162,39,.55);box-shadow:0 3px 10px rgba(11,74,51,.18);
}
.apps-judul{min-width:0;flex:1}
.apps-judul h3{font-size:1rem;line-height:1.3;color:var(--hijau-tua);overflow-wrap:break-word}
.apps-judul .pill{margin-top:6px}
.apps-ket-isi{font-size:.85rem;line-height:1.55;color:var(--muted);margin:0;flex:1;overflow-wrap:break-word}
.apps-kartu-aksi{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.apps-kartu-kelola{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:12px;margin-top:auto;
}
.apps-kartu-kelola form{display:flex;gap:6px;margin:0}
.apps-kartu.apps-mati{opacity:.62;border-style:dashed}
/* Menu BENDAHARA: tiap aplikasi punya daftar sekolah/madrasah pengaksesnya sendiri.
   Kartu yang TIDAK boleh dibuka sekolah yang sedang masuk ditandai (bukan disembunyikan) supaya
   pengguna tahu aplikasinya ada beserta keterangan "belum punya akses". */
.apps-kartu.apps-kunci{background:rgba(109,27,37,.04);border-style:dashed;border-color:rgba(109,27,37,.28)}
.apps-tanpa-akses{
  display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;line-height:1.45;
  color:var(--maroon);background:rgba(109,27,37,.07);border:1px solid rgba(109,27,37,.25);
  border-radius:var(--radius-sm);padding:9px 12px;
}
.apps-akses-ringkas{
  display:flex;align-items:center;gap:7px;font-size:.75rem;color:var(--muted);
  border-top:1px dashed var(--line);padding-top:11px;
}
.apps-akses-ringkas b{color:var(--hijau-tua)}
.apps-akses{
  grid-column:1 / -1;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:#fff;padding:14px 16px;
}
.apps-akses-judul{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.88rem;color:var(--hijau-tua);margin-bottom:12px}
.apps-akses-daftar{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 16px;
  max-height:280px;overflow:auto;padding:2px;
}
.apps-akses-item{
  display:flex;align-items:flex-start;gap:9px;font-size:.84rem;padding:7px 9px;border-radius:var(--radius-sm);
  border:1px solid transparent;cursor:pointer;
}
.apps-akses-item:hover{background:var(--emas-muda);border-color:rgba(201,162,39,.45)}
.apps-akses-item .xs{display:block}
@media (max-width:720px){
  .apps-akses-daftar{grid-template-columns:minmax(0,1fr);max-height:none}
}
.apps-form{border:1px dashed rgba(201,162,39,.6);border-radius:var(--radius-sm);padding:16px 18px;margin-bottom:20px;background:rgba(201,162,39,.05)}
.apps-form-judul{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--hijau-tua);margin-bottom:14px}
.apps-form .apps-ket{grid-column:1 / -1}
.apps-catatan{margin:0;padding-left:20px;display:grid;gap:9px;font-size:.85rem;color:var(--muted);line-height:1.55}
.apps-catatan b{color:var(--hijau-tua)}
@media (max-width:1080px){
  .apps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .apps-grid{grid-template-columns:minmax(0,1fr)}
  .apps-kartu-kelola{gap:6px}
}

/* ===== AKTIVASI sekolah/madrasah (kode aktivasi lembaga) ===== */
.kode-kotak{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kode-kotak code{
  display:inline-block;padding:9px 14px;border-radius:10px;letter-spacing:.18em;font-weight:800;
  font-size:1.05rem;color:var(--hijau-tua);background:var(--emas-muda,#fbf4dd);
  border:1px dashed rgba(201,162,39,.85);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  user-select:all;
}
.pill-uji{background:rgba(201,162,39,.18);color:#7a5c06;border-color:rgba(201,162,39,.45)}
.aktivasi-sisa{font-weight:700;color:#7a5c06}

/* Hitung mundur masa uji coba pada kartu "Status Aktivasi Lembaga" (aktivasi.php).
   Nilai awal dicetak PHP; initHitungMundur() (assets/app.js) memperbarui tiap detik. */
.hitung-mundur{
  border:1px dashed rgba(201,162,39,.75);border-radius:var(--radius-sm);
  background:rgba(201,162,39,.07);padding:14px 16px;margin-bottom:16px;
}
.hitung-mundur-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;
  margin-bottom:12px;
}
.hitung-mundur-judul{
  display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:700;color:var(--hijau-tua);
}
.hitung-mundur-judul svg{color:var(--emas)}
.hitung-mundur-ket{font-size:.8rem;font-weight:700;color:#7a5c06}
.hitung-mundur-unit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hm-unit{
  background:#fff;border:1px solid var(--line);border-top:2px solid var(--emas);border-radius:10px;
  padding:9px 6px;text-align:center;
}
.hm-unit b{
  display:block;font-size:1.55rem;font-weight:800;line-height:1.15;color:var(--hijau-tua);
  font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.hm-unit span{display:block;font-size:.7rem;color:var(--muted);margin-top:2px}
.hitung-mundur-kaki{margin-top:11px;font-size:.78rem;color:var(--muted);line-height:1.55}
.hitung-mundur-kaki b{color:var(--hijau-tua)}
.hitung-mundur.habis{
  display:flex;align-items:center;gap:9px;
  border-style:solid;border-color:rgba(109,27,37,.35);background:rgba(109,27,37,.06);
  color:var(--maroon);font-size:.84rem;
}
.hitung-mundur.habis b{color:var(--maroon)}
.hitung-mundur.habis svg{flex:0 0 auto}
@media (max-width:560px){
  .hm-unit b{font-size:1.2rem}
  .hm-unit span{font-size:.63rem}
  .hitung-mundur-unit{gap:7px}
  .hitung-mundur{padding:12px 12px}
}

/* Formulir ringkas pilihan aktivasi pada kartu pendaftaran/kelola sekolah */
.form-setujui{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0}
.form-setujui select{padding:6px 9px;font-size:.76rem;border-radius:8px;max-width:150px}

/* ===== Akun Pengawas: daftar pilihan sekolah binaan ===== */
.pengawas-pilih{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pengawas-item{
  display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:#fff;
  border:1px solid var(--line);border-left:3px solid var(--emas);border-radius:10px;cursor:pointer;
}
.pengawas-item input{margin-top:3px;width:16px;height:16px;accent-color:var(--accent);flex:0 0 auto}
.pengawas-item b{display:block;font-size:.86rem;color:var(--hijau-tua)}
.pengawas-item input:checked ~ span b{color:var(--hijau)}
/* ATURAN "1 sekolah/madrasah hanya untuk 1 pengawas" (permintaan pemilik): pilihan yang sudah
   dibina pengawas lain dinonaktifkan (kotaknya di-disable di markup) dan diberi keterangan pembina. */
.pengawas-item.terkunci{background:rgba(92,107,99,.06);border-left-color:var(--muted);cursor:not-allowed}
.pengawas-item.terkunci b{color:var(--muted)}
.pengawas-item.terkunci input{accent-color:var(--muted)}
.binaan-terkunci{display:block;margin-top:2px;color:#7a5c06;font-size:.72rem}
@media (max-width:900px){.pengawas-pilih{grid-template-columns:minmax(0,1fr)}}

/* ===== POPUP "Selamat datang" (pengumuman sambutan, diatur Super Admin di pengumuman.php) =====
   Muncul SEKALI setiap kali pengguna masuk (Pengawas, Kepala Sekolah/Madrasah, Admin Operator,
   Guru) — isi & urutannya dari tabel `pengumuman`. Memakai elemen <dialog> bawaan peramban
   (Esc & klik latar gelap menutup sendiri); initSambutan() hanya pelengkap. */
dialog.popup{
  border:1px solid var(--line);border-radius:var(--radius);padding:0;max-width:620px;width:calc(100% - 32px);
  background:var(--card);color:var(--ink);box-shadow:0 24px 60px rgba(11,42,30,.28);
  font-family:inherit;font-size:1rem;line-height:1.6;
}
dialog.popup::backdrop{background:rgba(9,32,23,.55)}
dialog.popup[open]{animation:popupMuncul .18s ease-out}
@keyframes popupMuncul{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){dialog.popup[open]{animation:none}}
dialog.popup-sambutan{border-top:3px solid var(--emas)}
.popup-head{display:flex;gap:13px;align-items:flex-start;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.popup-head h3{margin:0;font-size:1.1rem;color:var(--hijau-tua)}
.popup-sub{margin:3px 0 0;font-size:.82rem;color:var(--muted)}
.popup-sambutan-ic{
  flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:var(--emas-muda);background:linear-gradient(150deg,var(--hijau-tua),var(--hijau));border:1px solid rgba(201,162,39,.55);
}
.popup-sambutan-isi{padding:16px 20px;display:grid;gap:12px;max-height:min(58vh,460px);overflow-y:auto}
.popup-foot{
  display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:13px 20px;border-top:1px solid var(--line);background:rgba(201,162,39,.06);border-radius:0 0 var(--radius) var(--radius);
}
.pengumuman-item{
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--emas);border-radius:10px;padding:11px 13px;
}
.pengumuman-item-head{display:flex;gap:9px;align-items:center;margin-bottom:6px}
.pengumuman-item-head b{font-size:.92rem;color:var(--hijau-tua)}
.pengumuman-no{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:800;color:#fff;background:linear-gradient(150deg,var(--hijau),var(--hijau-tua));
}
.pengumuman-teks{font-size:.86rem;color:var(--ink);line-height:1.65;overflow-wrap:anywhere}
.pengumuman-kartu .pengumuman-teks{border-top:1px dashed var(--line);padding-top:10px}
.pengumuman-kartu.pengumuman-mati{border-style:dashed;background:rgba(255,255,255,.7)}
.pengumuman-kartu.pengumuman-mati .pengumuman-teks{color:var(--muted)}
/* Pratinjau popup pada halaman pengelolaan (pengumuman.php) */
.popup-contoh{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius-sm);
  border:1px dashed rgba(201,162,39,.75);background:rgba(201,162,39,.06);
}
.popup-contoh b{color:var(--hijau-tua)}
.popup-contoh-isi{margin-top:12px;display:grid;gap:10px}
@media (max-width:560px){
  .popup-head,.popup-sambutan-isi,.popup-foot{padding-left:14px;padding-right:14px}
  .popup-foot .btn{width:100%}
}
@media print{dialog.popup{display:none !important}}

/* ===== Pratinjau IMPOR DATA SISWA (siswa_import.php) =====
   13 kolom (NIS, NISN, Nama, JK, Tempat Lahir, Tanggal Lahir, No. HP, Ayah, Ibu, Wali, Kelas,
   Status) sehingga tabelnya lebih lebar daripada tabel biasa — dibuat lebih rapat agar muat
   tanpa menggulir di desktop, dan tetap bisa digeser mendatar di layar sempit (.table-wrap). */
table.tbl.tbl-impor th,
table.tbl.tbl-impor td{padding:7px 8px;font-size:.78rem;vertical-align:top}
table.tbl.tbl-impor thead th{font-size:.68rem;letter-spacing:.02em;white-space:nowrap}
table.tbl.tbl-impor td.nowrap{white-space:nowrap}
table.tbl.tbl-impor tbody tr:hover{background:rgba(201,162,39,.07)}

/* ===== Keterangan "Pendaftaran Gratis (Aktif 30 Hari)" pada halaman pendaftaran (daftar.php) =====
   Permintaan pemilik: tulisan ini harus terlihat mencolok di halaman pendaftaran publik. */
.alert.daftar-gratis{
  border-left-color:var(--emas);border-color:rgba(201,162,39,.55);background:rgba(201,162,39,.1);
  color:var(--hijau-tua);font-size:.92rem;line-height:1.6;padding:15px 18px;
}
.alert.daftar-gratis b{color:var(--hijau-tua)}
.alert.daftar-gratis svg{color:var(--emas);flex:0 0 auto;margin-top:2px}
@media (max-width:560px){.alert.daftar-gratis{font-size:.86rem;padding:13px 14px}}

/* ===== Tabel PROGRAM KERJA KESISWAAN (tugas.php?kode=kesiswaan) =====
   9 kolom data (No, Jenis, Bentuk, Tujuan, Target, Tahun Ajaran, Waktu, Sumber Dana, Keterangan)
   sehingga dirapatkan agar muat tanpa menggulir di desktop; tetap bisa digeser di layar sempit
   (.table-wrap). */
table.tbl.tbl-kesiswaan th,
table.tbl.tbl-kesiswaan td{padding:7px 8px;font-size:.78rem;vertical-align:top}
table.tbl.tbl-kesiswaan thead th{font-size:.68rem;letter-spacing:.02em}
table.tbl.tbl-kesiswaan td.sm{font-size:.72rem;color:var(--ink)}
table.tbl.tbl-kesiswaan tbody tr:hover{background:rgba(201,162,39,.07)}
/* Baris rekap bulan yang tidak ada kegiatannya dibuat samar agar fokus ke bulan yang ada isinya. */
table.tbl tr.baris-kosong{opacity:.55}

/* ===== Tabel OSIM/OSIS (tugas.php?kode=osim) =====
   Dua tabel: Susunan Organisasi (No, Jabatan/Nama Seksi, Nama) dan Program Kerja
   (No, Nama Program, Waktu Pelaksanaan, Target, Tahun Ajaran, Terlaksana, Keterangan). */
table.tbl.tbl-osim th,
table.tbl.tbl-osim td{padding:7px 8px;font-size:.78rem;vertical-align:top}
table.tbl.tbl-osim thead th{font-size:.68rem;letter-spacing:.02em}
table.tbl.tbl-osim td.sm{font-size:.72rem}
table.tbl.tbl-osim tbody tr:hover{background:rgba(201,162,39,.07)}

/* ===== BAGAN SUSUNAN ORGANISASI OSIM/OSIS (tugas.php?kode=osim&tampilan=bagan) =====
   Permintaan pemilik: susunan organisasi selain dalam bentuk tabel juga ditampilkan sebagai BAGAN
   (seperti contoh struktur organisasi pada umumnya). Digambar murni dengan CSS (tanpa pustaka luar)
   supaya tampil sama di layar maupun saat dicetak.

   Struktur markup: .osim-bagan > .osim-bagan-kepala + .osim-bagan-baris (satu per tingkat)
   > .osim-bagan-kotak. Garis penghubung dibuat oleh pseudo-element:
   - .osim-bagan-baris::before  = garis tegak dari induk turun ke "bus" baris;
   - .osim-bagan-kotak::before  = garis tegak pendek dari bus ke kotak;
   - .osim-bagan-kotak::after   = garis mendatar (bus) yang menyambung antar kotak sebaris.
   Karena bus hanya digambar pada baris BERKOTAK BANYAK (.banyak) dan panjangnya dihitung dari
   setengah jarak (--osim-jarak / 2), posisinya tetap rapi berapa pun jumlah kotaknya. */
.osim-bagan{
  --osim-line:#1e4f8a;          /* biru tua seperti contoh */
  --osim-biru:#3b6fb0;
  --osim-jarak:18px;            /* jarak antar kotak sebaris */
  --osim-sambung:17px;          /* setengah panjang garis penghubung antar tingkat */
  display:flex;flex-direction:column;align-items:center;padding:18px 12px 22px;
  background:#fff;
}
.osim-bagan-kepala{
  width:100%;max-width:760px;margin:0 auto 6px;padding:14px 20px;border-radius:18px;
  background:linear-gradient(150deg,var(--osim-biru),var(--osim-line));color:#fff;text-align:center;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.osim-bagan-kepala-judul{font-size:1.05rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;line-height:1.3}
.osim-bagan-kepala-sekolah{font-size:.95rem;font-weight:700;margin-top:3px;text-transform:uppercase}
.osim-bagan-kepala-periode{font-size:.88rem;margin-top:2px;text-transform:uppercase;opacity:.95}
.osim-bagan-baris{
  display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;
  gap:var(--osim-jarak);position:relative;width:100%;
  padding-top:calc(var(--osim-sambung) * 2);
}
.osim-bagan-baris::before{
  content:'';position:absolute;top:0;left:50%;width:2px;height:var(--osim-sambung);
  background:var(--osim-line);transform:translateX(-1px);
}
.osim-bagan-kotak{
  position:relative;background:#fff;border:2px solid var(--osim-line);border-radius:8px;
  box-shadow:3px 3px 0 rgba(30,79,138,.35);padding:8px 14px;min-width:150px;max-width:320px;
  text-align:center;-webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.osim-bagan-kotak::before{
  content:'';position:absolute;bottom:100%;left:50%;width:2px;height:var(--osim-sambung);
  background:var(--osim-line);transform:translateX(-1px);
}
.osim-bagan-baris.banyak .osim-bagan-kotak::after{
  content:'';position:absolute;bottom:calc(100% + var(--osim-sambung));height:2px;
  background:var(--osim-line);
}
.osim-bagan-baris.banyak .osim-bagan-kotak:first-child::after{left:50%;right:calc(-1 * var(--osim-jarak) / 2)}
.osim-bagan-baris.banyak .osim-bagan-kotak:last-child::after{left:calc(-1 * var(--osim-jarak) / 2);right:50%}
.osim-bagan-baris.banyak .osim-bagan-kotak:not(:first-child):not(:last-child)::after{
  left:calc(-1 * var(--osim-jarak) / 2);right:calc(-1 * var(--osim-jarak) / 2);
}
.osim-bagan-jabatan{font-weight:800;font-size:.85rem;color:var(--ink);line-height:1.25}
.osim-bagan-nama{font-size:.82rem;color:#243b53;line-height:1.35;margin-top:1px}
.osim-bagan-kadiv-label{font-size:.72rem;color:var(--muted);margin-top:5px;text-align:left}
/* Tingkat SEKSI/DIVISI (7): kotak lebih lebar, judul bergaris bawah, isi rata kiri seperti contoh. */
.osim-bagan-baris[data-tingkat="7"] .osim-bagan-kotak{text-align:left;min-width:180px;padding:9px 14px 11px}
.osim-bagan-baris[data-tingkat="7"] .osim-bagan-jabatan{
  border-bottom:1px solid var(--osim-line);padding-bottom:5px;margin-bottom:6px;
}
.osim-bagan-baris[data-tingkat="7"] .osim-bagan-nama{font-weight:700}
.osim-bagan-baris[data-tingkat="8"] .osim-bagan-kotak{min-width:300px}
.osim-bagan-baris[data-tingkat="8"] .osim-bagan-nama{font-weight:700}
.osim-bagan-kosong{
  padding:34px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:12px;
}
/* Di layar sempit bagan dapat digeser mendatar (ukurannya harus tetap akurat saat dicetak). */
.osim-bagan-luapan{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media print{
  /* Bagan dirapatkan agar muat SATU halaman A4 landscape (tinggi area cetak ±703px pada lebar
     1032px). Ukuran di atas kertas diukur ulang setiap kali tata letak bagan diubah. */
  .osim-bagan{background:#fff;padding:0;--osim-sambung:5px;--osim-jarak:9px}
  .osim-bagan-luapan{overflow:visible}
  .osim-bagan-kepala{padding:6px 12px;border-radius:10px;margin-bottom:0;max-width:560px}
  .osim-bagan-kepala-judul{font-size:.78rem;line-height:1.2}
  .osim-bagan-kepala-sekolah{font-size:.74rem;margin-top:1px}
  .osim-bagan-kepala-periode{font-size:.7rem;margin-top:1px}
  .osim-bagan-kotak{padding:3px 8px;min-width:108px;border-width:1.4px;border-radius:5px;
    box-shadow:1.5px 1.5px 0 rgba(30,79,138,.45)}
  .osim-bagan-jabatan{font-size:.68rem;line-height:1.15}
  .osim-bagan-nama{font-size:.66rem;line-height:1.2;margin-top:0}
  .osim-bagan-kadiv-label{font-size:.6rem;margin-top:2px}
  .osim-bagan-baris[data-tingkat="7"] .osim-bagan-kotak{padding:4px 8px 5px;min-width:140px}
  .osim-bagan-baris[data-tingkat="7"] .osim-bagan-jabatan{padding-bottom:2px;margin-bottom:3px}
  .osim-bagan-baris[data-tingkat="8"] .osim-bagan-kotak{min-width:200px}
}

/* ===== Tabel LAPORAN PERPUSTAKAAN hasil impor e-PERPUS (tugas.php?kode=kepala_perpus) =====
   Jumlah kolomnya MENGIKUTI berkas laporan e-PERPUS yang diimpor (tidak tetap: 9-12 kolom),
   jadi tabel ini dibuat ringkas, bisa digeser mendatar (.table-wrap), dan tiap selnya dipotong
   satu baris dengan teks lengkap pada atribut title — supaya barisnya tetap rapi berapa pun
   banyaknya kolom. Baris JUMLAH (tfoot) hanya muncul untuk kolom angka yang bermakna dijumlahkan. */
table.tbl.tbl-perpus th,
table.tbl.tbl-perpus td{padding:6px 8px;font-size:.78rem;vertical-align:top}
table.tbl.tbl-perpus thead th{font-size:.68rem;letter-spacing:.02em;white-space:nowrap}
table.tbl.tbl-perpus td.potong{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.tbl.tbl-perpus tbody tr:hover{background:rgba(201,162,39,.07)}
table.tbl.tbl-perpus tfoot th{
  background:rgba(11,74,51,.07);color:var(--hijau-tua);font-weight:800;white-space:nowrap;
}

/* ===== Tabel KEPALA LAB — inventaris barang & program kerja (tugas.php?kode=kepala_lab|tata_usaha) =====
   Hanya 5 kolom (No, Nama Barang/Program Kerja, Jumlah/Alokasi Waktu, Keadaan/Status Realisasi,
   Keterangan) sehingga tabelnya lega; dirapatkan sedikit agar banyak baris tetap terbaca. */
table.tbl.tbl-lab th,
table.tbl.tbl-lab td{padding:7px 9px;font-size:.79rem;vertical-align:top}
table.tbl.tbl-lab thead th{font-size:.68rem;letter-spacing:.02em}
table.tbl.tbl-lab td.sm{font-size:.73rem}
table.tbl.tbl-lab tbody tr:hover{background:rgba(201,162,39,.07)}
table.tbl.tbl-lab tfoot th{
  background:rgba(11,74,51,.07);color:var(--hijau-tua);font-weight:800;
}

/* ===== DOKUMEN KURIKULUM — kartu "inbox" dokumen pada akun guru =====
   Permintaan pemilik: dokumen dari menu Kurikulum masuk ke akun guru (kartu di dashboard +
   halaman "Dokumen Saya"). Gaya kartunya sengaja memakai keluarga tampilan yang sama dengan kartu
   daftar aplikasi (`.apps-kartu`) supaya konsisten, tetapi dengan warna per JENIS berkas agar
   guru cepat mengenali isinya. */
.dok-grid{gap:16px}
.card-dokumen{margin-top:18px}
.dok-kartu{margin:0;display:flex;flex-direction:column;gap:11px}
.dok-kartu-head{display:flex;gap:12px;align-items:flex-start}
.dok-ikon{
  flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(150deg,#2b7bb9,#1b5c8f);box-shadow:0 3px 10px rgba(27,92,143,.22);
}
.dok-ikon.dok-gambar{background:linear-gradient(150deg,#1e9e77,#0f7a53);box-shadow:0 3px 10px rgba(15,122,83,.22)}
.dok-ikon.dok-video{background:linear-gradient(150deg,#7b3fb0,#57308a);box-shadow:0 3px 10px rgba(87,48,138,.22)}
.dok-judul{min-width:0}
.dok-kartu .dok-judul h3{
  margin:0 0 5px;font-size:.98rem;line-height:1.3;color:var(--hijau-tua);
  overflow-wrap:anywhere;
}
.dok-catatan{margin:0;font-size:.83rem;color:var(--muted);line-height:1.55;overflow-wrap:anywhere}
.dok-kaki{border-top:1px dashed var(--line);padding-top:9px}
.dok-aksi{margin-top:auto}
.dok-aksi .btn{width:100%;justify-content:center}
/* Tabel daftar dokumen pada halaman Kurikulum */
table.tbl.tbl-dokumen th,table.tbl.tbl-dokumen td{padding:7px 8px;font-size:.78rem;vertical-align:top}
table.tbl.tbl-dokumen thead th{font-size:.68rem;letter-spacing:.02em}
table.tbl.tbl-dokumen td.sm{font-size:.73rem}
table.tbl.tbl-dokumen tbody tr:hover{background:rgba(201,162,39,.07)}
table.tbl.tbl-dokumen tfoot th{
  background:rgba(11,74,51,.07);color:var(--hijau-tua);font-weight:800;
}
table.tbl.tbl-dokumen .k-judul{width:24%}
table.tbl.tbl-dokumen .k-no{width:34px}
/* Kolom "Binaan" hanya dipakai pada halaman Kirim Dokumen milik pengawas (lintas sekolah). */
table.tbl.tbl-dokumen .k-binaan{width:20%}
table.tbl.tbl-dokumen .k-jenis{width:110px}
table.tbl.tbl-dokumen .k-ukuran{width:80px}
table.tbl.tbl-dokumen .k-aksi{width:130px}
@media (max-width:640px){
  .dok-aksi .btn{width:100%}
}

/* ===== Tabel WALI KELAS (tugas.php?kode=wali_kelas) =====
   Empat laporan kelas: struktur organisasi, program kerja, absensi harian, dan jadwal piket.
   Tabel struktur/program/absensi/piket memakai kelas yang sama supaya tampil konsisten. */
table.tbl.tbl-wali th,
table.tbl.tbl-wali td{padding:7px 8px;font-size:.78rem;vertical-align:top}
table.tbl.tbl-wali thead th{font-size:.68rem;letter-spacing:.02em}
table.tbl.tbl-wali td.sm{font-size:.73rem}
table.tbl.tbl-wali tbody tr:hover{background:rgba(201,162,39,.07)}
table.tbl.tbl-wali tfoot th{
  background:rgba(11,74,51,.07);color:var(--hijau-tua);font-weight:800;
}
table.tbl.tbl-wali .k-no{width:34px}
table.tbl.tbl-wali .k-jabatan{width:34%}
table.tbl.tbl-wali .k-nama{width:36%}
table.tbl.tbl-wali .k-hari{width:110px}
table.tbl.tbl-wali .k-jml{width:90px}
table.tbl.tbl-wali .k-aksi{width:190px}
/* Tabel pilih siswa piket pada tiap hari (Senin–Minggu) */
table.tbl.piket-pilih td,table.tbl.piket-pilih th{padding:5px 8px;font-size:.78rem}
table.tbl.piket-pilih tbody tr:hover{background:rgba(201,162,39,.07)}
/* Lembar cetak modul Wali Kelas */
table.sheet.wali .k-jabatan{width:34%}
table.sheet.wali .k-nama{width:36%}
table.sheet.wali .k-bagan{width:11%}
table.sheet.wali .k-hari{width:12%}
table.sheet.wali .k-jml{width:10%}

/* ---------------------------------------------------------------------------
   PETUNJUK PENGGUNAAN (petunjuk.php) — panduan tiap menu dalam bentuk <details>
   yang bisa dibuka-tutup TANPA JavaScript (tombolnya <summary>).
   Permintaan pemilik: menu "Petunjuk Penggunaan" di bawah "Akun Saya", isinya
   menyesuaikan peran, tampil sebagai daftar yang bisa dibuka-tutup.
--------------------------------------------------------------------------- */
.panduan-wrap{display:flex;flex-direction:column;gap:10px}
details.panduan{
  border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;
  transition:border-color .15s, box-shadow .15s;
}
details.panduan[open]{border-color:var(--emas);box-shadow:0 6px 18px -12px rgba(11,74,51,.45)}
details.panduan > summary{
  display:flex;align-items:center;gap:11px;cursor:pointer;user-select:none;
  padding:12px 14px;list-style:none;background:linear-gradient(180deg,#fff,var(--hijau-muda));
}
details.panduan > summary::-webkit-details-marker{display:none}
details.panduan > summary::after{
  content:'\25BE';font-size:.72rem;color:var(--muted);margin-left:auto;flex:0 0 auto;
  transition:transform .15s;
}
details.panduan[open] > summary::after{transform:rotate(180deg)}
details.panduan > summary:hover{background:var(--emas-muda)}
details.panduan > summary:focus-visible{outline:2px solid var(--hijau);outline-offset:-2px}
.panduan-ikon{
  width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--hijau-terang),var(--hijau-tua));color:#fff;
}
.panduan-nama{font-weight:700;color:var(--hijau-tua);flex:0 0 auto}
.panduan-ringkas{
  color:var(--muted);font-size:.8rem;min-width:0;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.panduan-isi{padding:2px 16px 16px;border-top:1px dashed rgba(11,74,51,.18)}
.panduan-sub{
  display:flex;align-items:center;gap:6px;margin:14px 0 8px;
  font-size:.76rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--hijau);
}
.panduan-langkah{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.panduan-langkah li{font-size:.86rem;line-height:1.55}
.panduan-ket{
  margin:14px 0 0;padding:10px 12px;border-radius:var(--radius-sm);font-size:.79rem;line-height:1.55;
  background:var(--emas-muda);border:1px solid rgba(201,162,39,.45);color:#5d4808;
}
.panduan-ket svg.ic{vertical-align:-2px;margin-right:4px;color:var(--emas)}
.panduan-aksi{margin-top:14px}
@media (max-width:640px){
  /* Di layar sempit ringkasannya ditata bertingkat supaya nama menu tetap terbaca utuh. */
  details.panduan > summary{flex-wrap:wrap;gap:8px;padding:11px 12px}
  .panduan-ringkas{-webkit-line-clamp:2;flex:1 1 100%;order:3}
  .panduan-isi{padding:2px 12px 14px}
  .panduan-langkah{padding-left:17px}
}

/* ===== KARTU "AKTIVASI SEKOLAH/MADRASAH" pada halaman Status & Aktivasi =====
   Permintaan pemilik: kartu ini memuat ajakan menghubungi HD Admin + tombol permohonan yang langsung
   membuka WhatsApp (pesan sudah disiapkan), serta NOMOR REKENING tujuan aktivasi beserta keterangannya
   ("Pastikan anda transfer ke nomer rekening tersebut …"). Tampil juga saat aplikasi terkunci supaya
   pengguna langsung tahu caranya memperpanjang. */
.permohonan-aktivasi{
  border:1px solid rgba(201,162,39,.55);border-radius:var(--radius-sm);
  background:linear-gradient(180deg,rgba(201,162,39,.07),rgba(255,255,255,.6));
  padding:16px 18px;
}
.permohonan-judul{
  display:flex;align-items:center;gap:8px;font-weight:800;color:var(--hijau-tua);
  font-size:1rem;margin-bottom:9px;
}
.permohonan-ajak{margin:0 0 14px;font-size:.86rem;line-height:1.6;color:var(--ink)}
.btn-permohonan{width:auto}
.rekening-aktivasi{
  border:1px dashed rgba(11,74,51,.35);border-radius:var(--radius-sm);background:#fff;padding:13px 15px;
}
.rekening-baris{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rekening-ikon{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(150deg,var(--hijau-terang),var(--hijau-tua));color:#fff;
}
.rekening-baris > div{flex:1 1 220px;min-width:0}
.rekening-baris .xs{display:block;margin-bottom:2px}
.rekening-baris b{font-size:.95rem;color:var(--hijau-tua);overflow-wrap:break-word;display:block}
.rekening-ket{
  margin:11px 0 0;font-size:.78rem;line-height:1.55;color:#7f1d28;
  background:rgba(109,27,37,.07);border:1px solid rgba(109,27,37,.28);border-radius:var(--radius-sm);
  padding:9px 11px;
}
.rekening-ket svg.ic{vertical-align:-2px;margin-right:4px;color:var(--maroon)}
@media (max-width:560px){
  .permohonan-aktivasi{padding:13px 14px}
  .btn-permohonan{width:100%;justify-content:center}
}

/* ----- Blok NOMINAL BIAYA AKTIVASI (v1.52.0) -----
   Permintaan pemilik: "Pada menu status dan aktifasi tampilkan nominal aktifasi … Jika aplikasi
   sudah di aktifasi maka muncul info: biaya langganan Rp. 500.000 untuk tahun depan". */
.biaya-aktivasi{
  margin-top:14px;padding:14px 16px;border-radius:var(--radius-sm);
  border:1px solid rgba(11,74,51,.28);background:#fff;
}
.biaya-kepala{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.biaya-ikon{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(150deg,var(--emas-terang),var(--emas));color:#3d2f06;
}
.biaya-kepala > div{flex:1 1 200px;min-width:0}
.biaya-kepala .xs{display:block;margin-bottom:2px}
.biaya-nominal{
  display:block;font-size:1.5rem;font-weight:800;color:var(--hijau-tua);letter-spacing:-.01em;
  font-family:var(--serif);line-height:1.2;
}
.biaya-kalimat{
  margin:11px 0 0;font-size:.86rem;line-height:1.6;color:var(--ink);
  background:var(--emas-muda);border:1px dashed rgba(201,162,39,.6);border-radius:var(--radius-sm);
  padding:10px 12px;overflow-wrap:break-word;
}
.btn-bukti{width:auto;margin-top:11px}
.biaya-tarif{margin:11px 0 0;line-height:1.5}
.biaya-tarif b{color:var(--hijau-tua)}
.biaya-langganan{margin-top:14px}
@media (max-width:560px){
  .biaya-nominal{font-size:1.28rem}
  .btn-bukti{width:100%;justify-content:center}
}

/* ============================================================================
   OBROLAN / CHAT sesama pengguna aplikasi (v1.51.0)
   Permintaan pemilik: "Tambahkan fitur chat agar sesama pengguna aplikasi yang sedang online bisa
   berkomunikasi." Pilihannya: SATU ruang bersama (lintas sekolah + Super Admin), untuk SEMUA PERAN,
   pesan baru muncul otomatis tiap beberapa detik, dan tampil sebagai KOTAK MENGAMBANG di pojok
   kanan bawah pada semua halaman.
   Tombol & panel diletakkan `position:fixed` dengan z-index tinggi supaya tidak menutupi pesan
   sistem/notifikasi halaman, dan TIDAK ikut tercetak.
   ========================================================================== */
.chat-kotak{position:fixed;right:20px;bottom:20px;z-index:70;font-size:.86rem}
@media (max-width:520px){ .chat-kotak{right:12px;bottom:12px} }

/* ---- tombol mengambang ---- */
.chat-tombol{
  width:54px;height:54px;border-radius:50%;border:2px solid var(--emas);cursor:pointer;
  display:grid;place-items:center;position:relative;color:#fff;
  background:linear-gradient(150deg,var(--hijau-terang),var(--hijau-tua));
  box-shadow:0 12px 26px -12px rgba(11,74,51,.75), 0 2px 6px -2px rgba(0,0,0,.2);
  transition:transform .15s, box-shadow .15s;
}
.chat-tombol:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(11,74,51,.8)}
.chat-tombol:focus-visible{outline:3px solid var(--emas-terang);outline-offset:2px}
.chat-lencana{
  position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:var(--maroon);color:#fff;font-size:.7rem;font-weight:700;line-height:22px;text-align:center;
  border:2px solid #fff;box-shadow:0 2px 6px -2px rgba(0,0,0,.4);
}

/* ---- panel obrolan ---- */
.chat-panel{
  position:absolute;right:0;bottom:66px;width:min(360px, calc(100vw - 40px));
  max-height:min(520px, calc(100vh - 140px));display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--emas);border-radius:var(--radius);
  box-shadow:0 24px 48px -20px rgba(11,74,51,.6), 0 3px 10px -4px rgba(0,0,0,.18);
  backdrop-filter:blur(14px) saturate(150%);
}
.chat-kepala{
  display:flex;align-items:center;gap:10px;justify-content:space-between;padding:11px 13px;
  background:linear-gradient(150deg,var(--hijau-tua),var(--hijau));color:#fff;
}
.chat-kepala b{display:flex;align-items:center;gap:7px;font-size:.92rem}
.chat-kepala .xs{display:block;color:rgba(255,255,255,.8);margin-top:1px}
.chat-kepala .xs b{display:inline;color:#fff}
.chat-tutup{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;
}
.chat-tutup:hover{background:rgba(255,255,255,.25)}

/* ---- daftar pesan ---- */
.chat-isi{
  flex:1 1 auto;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:9px;
  min-height:180px;background:linear-gradient(180deg,#fff,var(--hijau-muda));
}
.chat-kosong{margin:auto;text-align:center;color:var(--muted);font-size:.82rem;padding:16px 8px}
.chat-pesan{display:flex;flex-direction:column;align-items:flex-start;gap:2px;max-width:88%}
.chat-pesan.saya{align-self:flex-end;align-items:flex-end}
.chat-dari{font-size:.7rem;color:var(--muted);font-weight:600;padding-left:2px}
.chat-gelembung{
  display:block;padding:8px 11px;border-radius:12px;font-size:.85rem;line-height:1.45;
  background:#fff;border:1px solid var(--line);overflow-wrap:break-word;word-break:break-word;
}
.chat-pesan.saya .chat-gelembung{
  background:linear-gradient(150deg,var(--hijau-terang),var(--hijau));color:#fff;border-color:transparent;
}
.chat-jam{font-size:.66rem;color:var(--muted);padding:0 3px}

/* ---- formulir kirim ---- */
.chat-form{border-top:1px solid var(--line);padding:10px 12px;background:#fff}
.chat-form textarea{
  width:100%;resize:none;font:inherit;font-size:.85rem;padding:8px 10px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:#fff;color:var(--ink);
}
.chat-form textarea:focus{outline:2px solid var(--hijau);outline-offset:-1px;border-color:var(--hijau)}
.chat-aksi{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px}
.chat-catatan{
  margin:0;padding:0 12px 11px;background:#fff;color:var(--muted);font-size:.68rem;line-height:1.4;
}
@media (max-width:520px){
  .chat-panel{width:calc(100vw - 24px);max-height:calc(100vh - 120px)}
}

/* Obrolan tidak pernah ikut tercetak (lembar cetak & PDF). */
@media print{ .chat-kotak{display:none !important} }

/* Pesan galat pada kotak obrolan (mis. gagal terkirim) — warna maroon agar jelas terlihat. */
.chat-galat{
  align-self:center;text-align:center;font-size:.74rem;color:#7f1d28;background:rgba(109,27,37,.08);
  border:1px solid rgba(109,27,37,.28);border-radius:var(--radius-sm);padding:6px 10px;
}