/* =====================================================================
   BAKTI 1.0 — Stylesheet
   Palet diturunkan dari logo Yayasan Pendidikan Teknologi Bunda Kandung:
   kuning emas (identitas) + hijau (mesin/industri di logo) sebagai aksen,
   di atas kanvas netral gelap-terang agar data tetap yang paling menonjol.

   v2 — redesain visual menyeluruh (emil-design-eng): motion dengan easing
   kustom, kedalaman lewat shadow berlapis (bukan garis tebal), warna aksen
   dipakai sebagai penekanan bukan dekorasi, dan detail interaktif (tekan/
   fokus/hover) di setiap elemen yang bisa disentuh. Struktur class TIDAK
   diubah — hanya nilai visual — supaya tidak menyentuh logika aplikasi.
   ===================================================================== */

:root {
  /* "Langit" — palet dari gambar user: #2373F4 #578EF5 #65D0F4 #F2F7A0.
     Nama variabel lama (ink/gold/leaf) DIPERTAHANKAN supaya seluruh modul
     ikut berubah tanpa menyentuh logika; nilainya yang diganti. "gold"
     sekarang berarti AKSEN UTAMA (biru), bukan kuning. */
  --ink-900: #0c1a3a;
  --ink-800: #17284d;
  --ink-700: #2b3b60;
  --ink-500: #51607d;
  --ink-300: #8e9bb8;
  --ink-100: #dfe7f5;
  --ink-50: #eef3fc;
  --paper: #f3f7ff;
  --card: #ffffff;

  --gold-700: #1245ab;
  --gold-600: #1558d6;
  --gold-500: #2373f4;
  --gold-400: #578ef5;
  --gold-100: #e3edff;
  --gold-50: #f1f6ff;

  --brand-fill: #1d66e4;
  --cyan-500: #65d0f4;
  --cyan-100: #dff5fd;
  --sun-500: #f2f7a0;
  --sun-100: #fbfcd9;

  --leaf-700: #1b6b46;
  --leaf-600: #2a8057;
  --leaf-500: #3f9863;
  --leaf-100: #e0f4e9;
  --leaf-50: #f1faf5;

  --danger-600: #b3261e;
  --danger-500: #d3382f;
  --danger-100: #fbe4e2;
  --danger-50: #fef4f3;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(18, 52, 120, 0.06);
  --shadow-sm: 0 1px 2px rgba(18, 52, 120, 0.05), 0 2px 8px rgba(18, 52, 120, 0.05);
  --shadow-md: 0 4px 16px rgba(18, 52, 120, 0.09), 0 1px 3px rgba(18, 52, 120, 0.06);
  --shadow-lg: 0 16px 40px rgba(18, 52, 120, 0.16), 0 2px 8px rgba(18, 52, 120, 0.06);
  --shadow-gold: 0 6px 18px rgba(35, 115, 244, 0.28);

  /* Gaya hard-shadow lama DINONAKTIFKAN lewat token (nama dipertahankan). */
  --ink-line: 1px solid var(--ink-100);
  --hard-shadow-sm: 0 1px 2px rgba(18, 52, 120, 0.06), 0 2px 8px rgba(18, 52, 120, 0.06);
  --hard-shadow-md: 0 4px 16px rgba(18, 52, 120, 0.1);
  --hard-shadow-gold: 0 6px 18px rgba(35, 115, 244, 0.22);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.23, 1, 0.32, 1);

  --font-ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--ink-800);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; }
a { color: inherit; }

::selection { background: var(--cyan-500); color: var(--ink-900); }

/* Scrollbar — detail kecil yang jarang disadari tapi bikin app terasa
   dibuat sungguhan, bukan template generik. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-100); border-radius: 999px; border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

/* ---------------------------------------------------------------- */
/* Layout util                                                       */
/* ---------------------------------------------------------------- */
.hidden { display: none !important; }

/* ---------------------------------------------------------------- */
/* LOGIN                                                              */
/* ---------------------------------------------------------------- */
.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  /* Background hitam polos diganti animasi gradasi bergerak pelan (simpel,
     bukan dekorasi ramai) — warna tetap gelap netral + sentuhan emas/hijau
     brand, supaya form login tetap jadi fokus utama. */
  background: linear-gradient(120deg, #14181f, #1a2030, #12161d, #191b13, #14181f);
  background-size: 300% 300%;
  animation: bkGradientDrift 18s ease-in-out infinite;
  padding: 24px;
}
@keyframes bkGradientDrift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Bentuk mengambang playful — dipisah dari background utama supaya bisa
   dianimasikan lambat tanpa mengganggu keterbacaan form (scope: HANYA
   login, sesuai permintaan "ini aja"). */
.login-screen::before,
.login-screen::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.5;
  pointer-events: none;
}
.login-screen::before {
  width: 420px; height: 420px;
  top: -140px; left: -120px;
  background: radial-gradient(circle at 30% 30%, var(--gold-400), transparent 70%);
  animation: bkFloat1 9s ease-in-out infinite;
}
.login-screen::after {
  width: 380px; height: 380px;
  bottom: -160px; right: -100px;
  background: radial-gradient(circle at 30% 30%, var(--leaf-500), transparent 70%);
  animation: bkFloat2 11s ease-in-out infinite;
}
@keyframes bkFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(24px, 18px) scale(1.06); }
}
@keyframes bkFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-20px, -16px) scale(1.05); }
}

.login-card {
  width: 100%;
  max-width: 384px;
  background: var(--card);
  border-radius: 28px;
  box-shadow: var(--hard-shadow-md), var(--shadow-lg);
  padding: 38px 32px 30px;
  border: var(--ink-line);
  position: relative;
  z-index: 1;
  animation: bkLoginPop 480ms var(--ease-spring);
}
@keyframes bkLoginPop {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.login-brand img {
  width: 50px; height: 50px; object-fit: contain;
  border-radius: 13px; border: 2px solid var(--ink-900); background: #fff; padding: 4px;
  transition: transform 220ms var(--ease-spring);
}
.login-card:hover .login-brand img { transform: rotate(-6deg) scale(1.05); }

.login-brand .brand-title { font-size: 18px; font-weight: 700; color: var(--ink-900); line-height: 1.25; letter-spacing: -0.01em; }
.login-brand .brand-sub { font-size: 12.5px; color: var(--ink-500); margin-top: 2px; }

.login-card h1 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-700);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-100);
}

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-md);
  font-size: 14px;
  background: var(--paper);
  color: var(--ink-900);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background 160ms ease;
}
.field input:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 4px rgba(35, 115, 244, 0.18);
  background: var(--card);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 140ms var(--ease-out), filter 160ms ease, background 160ms ease, box-shadow 140ms var(--ease-out);
}
/* Tombol utama (primary/gold): border tegas + hard-shadow offset ala
   referensi — "menekan" mendorong shadow menempel (bukan cuma scale),
   memberi kesan tombol benar-benar tombol fisik. */
.btn-primary, .btn-gold {
  border: var(--ink-line);
}
.btn-primary:active, .btn-gold:active {
  transform: translate(2px, 2px);
  box-shadow: none !important;
}
.btn-ghost:active, .btn-danger:active { transform: scale(0.97); }
.btn-primary { background: var(--ink-900); color: #fff; box-shadow: var(--hard-shadow-sm); }
.btn-primary:hover { filter: brightness(1.25); }
.btn-gold { background: linear-gradient(180deg, var(--gold-400), var(--gold-500)); color: var(--ink-900); box-shadow: var(--hard-shadow-gold); }
.btn-gold:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; color: var(--ink-700); border: 1.5px solid var(--ink-300); }
.btn-ghost:hover { background: var(--ink-50); border-color: var(--ink-900); }
.btn-danger { background: var(--danger-100); color: var(--danger-600); border: 1.5px solid transparent; }
.btn-danger:hover { background: #f6d3d0; border-color: var(--danger-600); }
.btn-block { width: 100%; }
/* BARU (sesi "Role TU & Pengaturan Pengguna"): varian tombol lebih kecil —
   dipakai utk "Atur Nomor Awal" (fitur jarang dipakai, superadmin-only,
   tidak perlu seukuran tombol utama) & tombol sekunder lain ke depannya. */
.btn-xs { padding: 4px 10px; font-size: 11.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(35, 115, 244, 0.35); }

.login-submit { margin-top: 8px; }

.login-error {
  background: var(--danger-50);
  color: var(--danger-600);
  font-size: 12.5px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  border: 1px solid var(--danger-100);
  animation: bkFadeUp 200ms var(--ease-out);
}

.login-foot {
  margin-top: 22px;
  font-size: 11.5px;
  color: var(--ink-300);
  text-align: center;
}

/* ---------------------------------------------------------------- */
/* APP SHELL                                                          */
/* ---------------------------------------------------------------- */
.app-shell {
  display: grid;
  grid-template-columns: 244px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: linear-gradient(190deg, #171c25 0%, #10141b 100%);
  color: #fff;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,0.04);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 12px;
}
.sidebar-brand img {
  width: 34px; height: 34px; object-fit: contain;
  border-radius: 9px;
  border: 2px solid rgba(255,255,255,0.85);
  background: #fff;
  padding: 2px;
}
.sidebar-brand .t1 { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.sidebar-brand .t2 { font-size: 10.5px; color: var(--gold-500); letter-spacing: .05em; font-weight: 700; }

.nav-group-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,0.38);
  padding: 14px 10px 6px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 150ms ease;
}
.nav-group-label:hover { color: rgba(255,255,255,0.78); }
.nav-group-arrow { font-size: 9px; display: inline-block; width: 10px; transition: transform 180ms var(--ease-out); }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: rgba(255,255,255,0.76);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background 150ms var(--ease-out), color 150ms ease, transform 120ms var(--ease-out);
}
.nav-item .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .5; flex-shrink: 0;
  transition: opacity 150ms ease, transform 150ms var(--ease-out);
}
.nav-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.nav-item:active { transform: scale(0.98); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(35,115,244,.16), rgba(35,115,244,.05));
  box-shadow: inset 2px 0 0 var(--gold-500);
  color: #fff;
  font-weight: 600;
}
.nav-item.active .dot { background: var(--gold-500); opacity: 1; transform: scale(1.3); }
.nav-item.soon {
  color: rgba(255,255,255,0.26);
  cursor: default;
}
.nav-item.soon:hover { background: transparent; transform: none; }

.nav-item.nav-subgroup-label {
  cursor: default;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,0.3);
  padding: 10px 10px 4px 12px;
  background: transparent;
}
.nav-item.nav-subgroup-label:hover { background: transparent; color: rgba(255,255,255,0.3); transform: none; }
.nav-item .badge-soon {
  margin-left: auto;
  font-size: 9.5px;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 1px 6px;
  border-radius: 999px;
  color: rgba(255,255,255,0.4);
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border-radius: var(--radius-sm);
  transition: background 150ms ease;
}
.user-chip:hover { background: rgba(255,255,255,0.05); }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(150deg, var(--gold-400), var(--gold-600));
  color: var(--ink-900);
  display: grid; place-items: center;
  font-weight: 700; font-size: 12.5px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.user-name { font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.2; }
.user-role { font-size: 10.5px; color: rgba(255,255,255,0.45); }
.logout-btn {
  width: 100%; margin-top: 8px;
  background: transparent; border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.7); border-radius: var(--radius-sm);
  padding: 7px; font-size: 12px; cursor: pointer;
  transition: background 150ms ease, color 150ms ease, transform 120ms var(--ease-out);
}
.logout-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.logout-btn:active { transform: scale(0.97); }

/* Main content */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  height: 58px;
  border-bottom: 1px solid var(--ink-100);
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(1.4) blur(6px);
  -webkit-backdrop-filter: saturate(1.4) blur(6px);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar .crumb-eyebrow { font-size: 11px; color: var(--ink-300); }
.topbar .crumb-title { font-size: 14px; font-weight: 700; color: var(--ink-900); letter-spacing: -0.01em; }
.notif-bell {
  margin-left: auto; position: relative; background: none; border: none;
  font-size: 18px; cursor: pointer; padding: 6px 10px; border-radius: var(--radius-sm);
  transition: background 150ms ease, transform 120ms var(--ease-out);
}
.notif-bell:hover { background: var(--ink-50); }
.notif-bell:active { transform: scale(0.93); }
.notif-badge {
  position: absolute; top: 0; right: 2px; background: var(--danger-600);
  color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px;
  min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 3px;
  box-shadow: 0 0 0 2px var(--card);
}

.content { padding: 24px; flex: 1; animation: bkFadeUp 220ms var(--ease-out); }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.page-head h2 { font-size: 21px; margin: 0 0 4px; color: var(--ink-900); letter-spacing: -0.02em; font-weight: 700; }
.page-head p { font-size: 13px; color: var(--ink-500); margin: 0; }

/* Cards / tables */
.card {
  background: var(--card);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms var(--ease-out);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ink-100);
  flex-wrap: wrap;
}
.bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--gold-100);
  border-bottom: 1px solid var(--gold-500);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-800);
  animation: bkFadeUp 180ms var(--ease-out);
}
.bulk-toolbar .spacer { flex: 1; }
.bulk-toolbar [data-role="bulk-actions"] { display: flex; gap: 8px; }
.toolbar .search-box {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 320px;
}
.toolbar .search-box input {
  width: 100%;
  padding: 8px 10px 8px 32px;
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--paper);
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out), background 150ms ease;
}
.toolbar .search-box input:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(35,115,244,0.16); background: var(--card); }
.toolbar .search-box svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); opacity: .45; }

.select-filter {
  padding: 8px 10px;
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--paper);
  color: var(--ink-700);
  transition: border-color 150ms var(--ease-out);
}
.select-filter:focus { outline: none; border-color: var(--gold-500); }

.toolbar .spacer { flex: 1; }

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-500);
  padding: 11px 16px;
  border-bottom: 1px solid var(--ink-100);
  background: var(--ink-50);
  white-space: nowrap;
}
.data-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--ink-100);
  color: var(--ink-800);
  vertical-align: middle;
}
.data-table tbody tr { transition: background 140ms ease; }
.data-table tbody tr:hover { background: var(--gold-50); }
.data-table tbody tr:last-child td { border-bottom: none; }

.mono-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--ink-100);
  padding: 2px 7px;
  border-radius: 6px;
  color: var(--ink-700);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1.5px solid currentColor;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-aktif { background: var(--leaf-100); color: var(--leaf-700); }
.badge-nonaktif { background: var(--ink-100); color: var(--ink-500); border-color: var(--ink-300); }

.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.icon-btn {
  border: 1.5px solid var(--ink-100);
  background: var(--card);
  border-radius: var(--radius-sm);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--ink-500);
  transition: transform 130ms var(--ease-out), background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.icon-btn:hover { background: var(--ink-50); color: var(--ink-900); border-color: var(--ink-300); }
.icon-btn:active { transform: scale(0.9); }
.icon-btn.danger:hover { background: var(--danger-50); color: var(--danger-600); border-color: var(--danger-100); }

.empty-state {
  padding: 52px 24px;
  text-align: center;
  color: var(--ink-500);
  animation: bkFadeUp 240ms var(--ease-out);
}
.empty-state .emoji { font-size: 28px; margin-bottom: 10px; }
.empty-state h4 { margin: 0 0 4px; color: var(--ink-800); font-size: 14px; font-weight: 600; }
.empty-state p { margin: 0; font-size: 12.5px; }

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--ink-100);
  font-size: 12.5px;
  color: var(--ink-500);
  flex-wrap: wrap;
  gap: 10px;
}
.pagination { display: flex; align-items: center; gap: 4px; }
.pagination button {
  border: 1.5px solid var(--ink-100);
  background: var(--card);
  border-radius: var(--radius-sm);
  width: 28px; height: 28px;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--ink-700);
  transition: transform 130ms var(--ease-out), background 140ms ease, color 140ms ease;
}
.pagination button:hover:not(:disabled) { background: var(--ink-50); }
.pagination button:not(:disabled):active { transform: scale(0.9); }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }
.pagination button.active { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.page-size-select { border: 1.5px solid var(--ink-100); border-radius: var(--radius-sm); padding: 5px 7px; font-size: 12.5px; background: var(--card); }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 18, 24, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: grid; place-items: center;
  z-index: 50;
  padding: 20px;
  animation: bkOverlayIn 180ms ease-out;
}
@keyframes bkOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: 100%; max-width: 440px;
  background: var(--card);
  border-radius: var(--radius-xl);
  border: var(--ink-line);
  box-shadow: var(--hard-shadow-md), var(--shadow-lg);
  overflow: hidden;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  animation: bkModalIn 220ms var(--ease-out);
}
@keyframes bkModalIn {
  from { opacity: 0; transform: scale(0.95) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--ink-100);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.modal-head h3 { margin: 0; font-size: 15px; color: var(--ink-900); font-weight: 700; }
.modal-close { background: none; border: none; cursor: pointer; color: var(--ink-500); font-size: 18px; line-height: 1; transition: color 140ms ease, transform 130ms var(--ease-out); border-radius: 6px; padding: 4px; }
.modal-close:hover { color: var(--ink-900); }
.modal-close:active { transform: scale(0.9); }
.modal-body { padding: 20px; flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--ink-100); display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0; }

.form-grid { display: grid; gap: 14px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field select {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--ink-100); border-radius: var(--radius-md);
  font-size: 14px; background: var(--paper); color: var(--ink-900);
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.field select:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 4px rgba(35,115,244,0.16); }

.confirm-body p { font-size: 13.5px; color: var(--ink-700); line-height: 1.5; margin: 0 0 6px; }
.confirm-body .target-name { font-weight: 700; color: var(--ink-900); }

.toast-stack {
  position: fixed; top: 18px; right: 18px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  background: var(--ink-900); color: #fff;
  padding: 11px 16px; border-radius: var(--radius-md);
  font-size: 13px; box-shadow: var(--shadow-lg);
  min-width: 220px;
  display: flex; align-items: center; gap: 8px;
  animation: bkToastIn 260ms var(--ease-out);
}
@keyframes bkToastIn {
  from { opacity: 0; transform: translateX(16px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.toast.success { background: var(--leaf-700); }
.toast.error { background: var(--danger-500); }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--card);
  border: var(--ink-line);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--hard-shadow-sm);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.stat-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink-900); }
.stat-card .stat-label { font-size: 11.5px; color: var(--ink-500); margin-bottom: 6px; font-weight: 700; }
.stat-card .stat-value { font-size: 24px; font-weight: 700; color: var(--ink-900); letter-spacing: -0.01em; }
.stat-card .stat-accent { width: 30px; height: 6px; border-radius: var(--radius-pill); background: var(--gold-500); border: 1.5px solid var(--ink-900); margin-bottom: 10px; }

.stat-strip.secondary {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
  opacity: 0.9;
}
.stat-strip.secondary .stat-card { padding: 10px 12px; border: 1.5px solid var(--ink-100); box-shadow: var(--shadow-xs); }
.stat-strip.secondary .stat-card:hover { transform: none; box-shadow: var(--shadow-xs); }
.stat-strip.secondary .stat-card .stat-value { font-size: 16px; }
.stat-strip.secondary .stat-card .stat-accent { display: none; }

.work-widget {
  background: linear-gradient(180deg, var(--card) 0%, var(--gold-50) 130%);
  border: var(--ink-line);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: var(--hard-shadow-gold);
}
.work-widget-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.work-widget-title { font-size: 14px; font-weight: 700; color: var(--ink-900); margin-bottom: 4px; }
.work-widget-desc { font-size: 12.5px; color: var(--ink-700); margin: 0; }
.work-widget-list {
  margin-top: 14px;
  border-top: 1px solid var(--ink-100);
  padding-top: 12px;
  max-height: 240px;
  overflow-y: auto;
}
.work-widget-list table { width: 100%; font-size: 13px; border-collapse: collapse; }
.work-widget-list th { text-align: left; font-size: 11px; color: var(--ink-500); font-weight: 600; padding: 4px 8px; }
.work-widget-list td { padding: 6px 8px; border-top: 1px solid var(--ink-100); }
.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.kv-grid .kv-label { font-size: 11.5px; color: var(--ink-500); margin-bottom: 4px; }
.kv-grid .kv-value { font-size: 18px; font-weight: 700; color: var(--ink-900); }

@keyframes bkFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduced motion: GERAKAN dihapus, perubahan opacity/warna tetap (lihat blok
   "Langit v3" di bawah) — bukan mematikan semua transisi. */

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
}

/* =====================================================================
   MODUL KEUANGAN — tampilan diganti mengikuti desain "BAKTI versi lama"
   yang dikirim user (tokens.css/layout.css/components.css: navy #16324F,
   font Inter, flat/profesional, badge & tabel bersih ala SaaS enterprise).

   SENGAJA DISCOPE hanya ke halaman Keuangan (keputusan eksplisit user:
   "Keuangan saja", bukan seluruh aplikasi) via selector
   [id^="page-keuangan-"] — setiap section halaman Keuangan di index.html
   memakai id dengan awalan ini. Modul lain (Siswa, Guru, dsb) TIDAK
   tersentuh sama sekali oleh blok ini.

   Keterbatasan yang jujur disampaikan ke user: modal (form Tambah/Ubah)
   di-render ke document.body oleh modules.js, BUKAN di dalam section
   #page-keuangan-*, jadi modal TIDAK ikut ter-scope ke gaya baru ini —
   modal tetap pakai gaya global (konsisten dgn modul lain). Yang berubah
   adalah tampilan halaman listnya sendiri: dashboard/KPI, tabel, toolbar,
   badge, tombol, empty state, card.
   ===================================================================== */
[id^="page-keuangan-"] {
  --kw-primary: #16324F;
  --kw-primary-600: #1E4066;
  --kw-primary-100: #E7ECF1;
  --kw-secondary: #475569;
  --kw-bg: #F8FAFC;
  --kw-surface: #FFFFFF;
  --kw-border: #E2E8F0;
  --kw-text: #0F172A;
  --kw-text-secondary: #64748B;
  --kw-success: #15803D;
  --kw-success-bg: #EAF6EE;
  --kw-warning: #B45309;
  --kw-warning-bg: #FDF3E7;
  --kw-danger: #B91C1C;
  --kw-danger-bg: #FBEAEA;
  --kw-info: #0369A1;
  --kw-info-bg: #E8F3FA;
  --kw-radius-sm: 8px;
  --kw-radius-md: 10px;
  --kw-radius-lg: 12px;
  --kw-shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --kw-shadow-md: 0 2px 8px rgba(15,23,42,.08);
  --kw-ease: cubic-bezier(.4,0,.2,1);
  font-family: var(--font-ui);
  color: var(--kw-text);
}

/* Judul halaman */
[id^="page-keuangan-"] .page-head h2 {
  color: var(--kw-text); font-weight: 700; letter-spacing: 0; font-size: 22px;
}
[id^="page-keuangan-"] .page-head p { color: var(--kw-text-secondary); font-size: 13px; }

/* Card & toolbar flat, border tipis, shadow halus (bukan hard-shadow) */
[id^="page-keuangan-"] .card {
  background: var(--kw-surface);
  border: 1px solid var(--kw-border);
  border-radius: var(--kw-radius-lg);
  box-shadow: var(--kw-shadow-sm);
}
[id^="page-keuangan-"] .toolbar,
[id^="page-keuangan-"] .bulk-toolbar {
  border-bottom: 1px solid var(--kw-border);
}
[id^="page-keuangan-"] .toolbar .search-box input,
[id^="page-keuangan-"] .select-filter,
[id^="page-keuangan-"] .page-size-select {
  border: 1px solid var(--kw-border);
  border-radius: var(--kw-radius-sm);
  background: var(--kw-bg);
  color: var(--kw-text);
}
[id^="page-keuangan-"] .toolbar .search-box input:focus,
[id^="page-keuangan-"] .select-filter:focus {
  border-color: var(--kw-primary);
  box-shadow: none;
  background: var(--kw-surface);
}

/* Tombol: flat, tanpa border tebal/hard-shadow, sesuai referensi */
[id^="page-keuangan-"] .btn {
  border-radius: var(--kw-radius-sm);
  font-weight: 600;
  box-shadow: none !important;
  border: 1px solid transparent;
}
[id^="page-keuangan-"] .btn:active { transform: scale(0.98); }
[id^="page-keuangan-"] .btn-primary,
[id^="page-keuangan-"] .btn-gold {
  background: var(--kw-primary); color: #fff; border-color: transparent;
}
[id^="page-keuangan-"] .btn-primary:hover,
[id^="page-keuangan-"] .btn-gold:hover { background: var(--kw-primary-600); filter: none; }
[id^="page-keuangan-"] .btn-primary:active,
[id^="page-keuangan-"] .btn-gold:active { transform: scale(0.98); }
[id^="page-keuangan-"] .btn-ghost {
  background: #fff; color: var(--kw-text); border-color: var(--kw-border);
}
[id^="page-keuangan-"] .btn-ghost:hover { background: var(--kw-bg); border-color: var(--kw-border); }
[id^="page-keuangan-"] .btn-danger { background: var(--kw-danger-bg); color: var(--kw-danger); border-color: transparent; }

/* Tabel: header sticky huruf kapital, hover halus, rapi */
[id^="page-keuangan-"] table.data-table { font-size: 13.5px; }
[id^="page-keuangan-"] .data-table th {
  position: sticky; top: 0;
  background: var(--kw-surface);
  color: var(--kw-text-secondary);
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  border-bottom: 1px solid var(--kw-border);
}
[id^="page-keuangan-"] .data-table td {
  border-bottom: 1px solid var(--kw-border);
  color: var(--kw-text);
}
[id^="page-keuangan-"] .data-table tbody tr:hover { background: var(--kw-bg); }

/* Badge: flat pill rapi, tanpa outline tebal */
[id^="page-keuangan-"] .badge { border: none; font-weight: 600; }
[id^="page-keuangan-"] .badge-aktif { background: var(--kw-success-bg); color: var(--kw-success); }
[id^="page-keuangan-"] .badge-nonaktif { background: var(--kw-bg); color: var(--kw-text-secondary); }

/* Icon button & pagination flat */
[id^="page-keuangan-"] .icon-btn {
  border: 1px solid var(--kw-border); border-radius: var(--kw-radius-sm);
  background: #fff; color: var(--kw-secondary);
}
[id^="page-keuangan-"] .icon-btn:hover { background: var(--kw-bg); color: var(--kw-text); border-color: var(--kw-border); }
[id^="page-keuangan-"] .pagination button {
  border: 1px solid var(--kw-border); border-radius: 6px; color: var(--kw-text);
}
[id^="page-keuangan-"] .pagination button.active {
  background: var(--kw-primary); color: #fff; border-color: var(--kw-primary);
}

/* KPI / stat-card (dashboard & laporan keuangan) ala referensi .kpi */
[id^="page-keuangan-"] .stat-card {
  background: var(--kw-surface);
  border: 1px solid var(--kw-border);
  border-radius: var(--kw-radius-lg);
  box-shadow: none;
}
[id^="page-keuangan-"] .stat-card:hover { transform: none; box-shadow: none; }
[id^="page-keuangan-"] .stat-card .stat-label { color: var(--kw-text-secondary); font-weight: 600; font-size: 12px; }
[id^="page-keuangan-"] .stat-card .stat-value { color: var(--kw-text); font-size: 26px; font-weight: 700; letter-spacing: 0; }
[id^="page-keuangan-"] .stat-card .stat-accent { display: none; }

/* Widget pekerjaan tertunda */
[id^="page-keuangan-"] .work-widget {
  background: var(--kw-info-bg);
  border: 1px solid var(--kw-border);
  border-left: 3px solid var(--kw-info);
  border-radius: var(--kw-radius-lg);
  box-shadow: none;
}
[id^="page-keuangan-"] .work-widget-title { color: var(--kw-text); }
[id^="page-keuangan-"] .work-widget-desc { color: var(--kw-text-secondary); }

/* Empty state */
[id^="page-keuangan-"] .empty-state { color: var(--kw-text-secondary); }
[id^="page-keuangan-"] .empty-state h4 { color: var(--kw-text); }

/* Form inline (bila ada form langsung di halaman, bukan di modal) */
[id^="page-keuangan-"] .field label { color: var(--kw-text); }
[id^="page-keuangan-"] .field input,
[id^="page-keuangan-"] .field select {
  border: 1px solid var(--kw-border);
  border-radius: var(--kw-radius-sm);
  background: #fff;
  box-shadow: none;
}
[id^="page-keuangan-"] .field input:focus,
[id^="page-keuangan-"] .field select:focus {
  border-color: var(--kw-primary);
  box-shadow: none;
}

/* =====================================================================
   PERPUSTAKAAN / INVENTARIS / LAPORAN (prefix .px-) — komponen bersama
   untuk halaman yang di-port dari referensi bakti-preview.
   ===================================================================== */
.px-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.px-grid .span-2 { grid-column: 1 / -1; }
.px-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
@media (max-width: 760px) { .px-grid, .px-grid3 { grid-template-columns: 1fr; } }
.field textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--ink-100); border-radius: var(--radius-md); font-size: 14px; background: var(--paper); color: var(--ink-900); min-height: 64px; font-family: inherit; resize: vertical; }
.field textarea:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 4px rgba(35,115,244,0.16); }
.px-tabs { display: flex; gap: 4px; border-bottom: 1.5px solid var(--ink-100); margin-bottom: 14px; }
.px-tab { padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--ink-500); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; transition: color 140ms ease; }
.px-tab:hover { color: var(--ink-900); }
.px-tab.active { color: var(--ink-900); border-bottom-color: var(--gold-500); }
.px-card { background: var(--card); border: 1.5px solid var(--ink-100); border-radius: var(--radius-lg); padding: 16px; }
.px-card + .px-card { margin-top: 14px; }
.px-h { font-size: 14px; font-weight: 700; color: var(--ink-900); margin: 0 0 4px; }
.px-sub { font-size: 12px; color: var(--ink-500); }
.px-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .px-cols2 { grid-template-columns: 1fr; } }
.px-list { max-height: 320px; overflow-y: auto; border: 1.5px solid var(--ink-100); border-radius: var(--radius-md); }
.px-check { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--ink-100); font-size: 13px; cursor: pointer; }
.px-check:last-child { border-bottom: none; }
.px-check:hover { background: var(--gold-50); }
.px-check .px-grow { flex: 1; }
.px-b { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--ink-100); color: var(--ink-700); white-space: nowrap; }
.px-b-ok { background: var(--leaf-100); color: var(--leaf-700); }
.px-b-warn { background: var(--gold-100); color: var(--gold-700); }
.px-b-danger { background: var(--danger-100); color: var(--danger-600); }
.px-b-info { background: #e3edfb; color: #1f4f9c; }
.px-link { cursor: pointer; font-weight: 600; color: var(--ink-900); }
.px-link:hover { text-decoration: underline; }
.px-cell-sub { font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }
.px-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 18px; margin-top: 12px; }
.px-kv .k { font-size: 11px; color: var(--ink-500); text-transform: uppercase; letter-spacing: .04em; }
.px-kv .v { font-size: 13.5px; color: var(--ink-900); font-weight: 600; margin-top: 2px; }
.px-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-top: 14px; }
.px-stat { background: var(--paper); border-radius: var(--radius-md); padding: 10px 12px; text-align: center; }
.px-stat .v { font-size: 20px; font-weight: 700; }
.px-stat .l { font-size: 11px; color: var(--ink-500); margin-top: 2px; }
.px-back { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-500); margin-bottom: 12px; }
.px-back:hover { color: var(--ink-900); }
.px-banner { padding: 10px 14px; border-radius: var(--radius-md); background: var(--gold-100); color: var(--gold-700); font-size: 13px; margin-bottom: 14px; }
.px-warn { color: var(--danger-600); font-size: 12.5px; margin-top: 4px; }
.px-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.px-tr-click { cursor: pointer; }
.px-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.px-num { text-align: right; }
.px-cols2 > .px-card { margin-top: 0; }


/* =====================================================================
   LANGIT v3 — redesain total (Okt 2026). Palet dari gambar user:
   #2373F4 #578EF5 #65D0F4 #F2F7A0. Blok ini SENGAJA di paling akhir:
   menimpa gaya lama (hard-shadow/gelap/emas) tanpa mengubah satu pun
   class/struktur yang dipakai logika aplikasi. Kontrak kontras ada di
   .tastemaker/style-lock.md (teks putih di biru tombol 5.16:1, dst).
   ===================================================================== */
body { font-family: var(--font-ui); background: var(--paper); color: var(--ink-800); }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--gold-600); }

@keyframes bkRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bkFadeOnly { from { opacity: 0; } to { opacity: 1; } }
@keyframes bkBandIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }

/* ---------- LOGIN: dua panel, panel kiri = pita warna palet ---------- */
.login-screen {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  place-items: stretch; padding: 0; background: var(--card); animation: none; overflow: hidden;
}
.login-screen::before, .login-screen::after { display: none; }
.login-hero {
  background: var(--brand-fill); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px 0 0 56px; min-height: 100vh; position: relative;
}
.lh-chip {
  align-self: flex-start; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  background: rgba(255,255,255,.16); color: #fff; padding: 6px 12px; border-radius: var(--radius-pill);
  animation: bkRise 520ms var(--ease-out) backwards;
}
.lh-copy { max-width: 520px; padding-right: 56px; margin: 40px 0; }
.lh-copy h2 {
  font-size: 48px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 20px; color: #fff;
  animation: bkRise 600ms var(--ease-out) 80ms backwards;
}
.lh-copy p { font-size: 18px; line-height: 28px; color: #eaf1ff; margin: 0; max-width: 460px; animation: bkRise 600ms var(--ease-out) 160ms backwards; }
.lh-bands { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top-left-radius: var(--radius-xl); overflow: hidden; }
.lh-bands li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 22px 56px 22px 28px; color: var(--ink-900);
  animation: bkBandIn 560ms var(--ease-out) backwards;
}
.lh-bands li b { font-size: 16px; font-weight: 700; }
.lh-bands li span { font-size: 13px; font-weight: 500; color: var(--ink-800); text-align: right; }
.lh-bands .b1 { background: #578ef5; animation-delay: 220ms; }
.lh-bands .b2 { background: #65d0f4; animation-delay: 300ms; }
.lh-bands .b3 { background: #f2f7a0; animation-delay: 380ms; }
.login-pane { display: grid; place-items: center; padding: 32px; background: var(--card); }
.login-card {
  width: 100%; max-width: 380px; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0;
  animation: bkRise 560ms var(--ease-out) 120ms backwards;
}
.login-brand img { border: 1px solid var(--ink-100); border-radius: var(--radius-md); background: #fff; }
.login-card:hover .login-brand img { transform: none; }
.login-brand .brand-title { font-size: 20px; font-weight: 700; color: var(--gold-600); letter-spacing: -0.01em; }
.login-card h1 { font-size: 24px; font-weight: 700; color: var(--ink-900); letter-spacing: -0.02em; border: 0; padding: 0; margin: 0 0 20px; }
.login-foot { color: var(--ink-500); }
@media (max-width: 900px) {
  .login-screen { grid-template-columns: 1fr; }
  .login-hero { min-height: 0; padding: 28px 24px 0; }
  .lh-copy { margin: 20px 0 24px; padding-right: 0; }
  .lh-copy h2 { font-size: 30px; }
  .lh-copy p { font-size: 15px; line-height: 24px; }
  .lh-bands { display: none; }
  .login-pane { padding: 28px 24px 40px; }
}

/* ---------- Form ---------- */
.field label { font-weight: 600; color: var(--ink-700); }
.field input, .field select, .field textarea, .toolbar .search-box input, .select-filter, .page-size-select {
  border: 1px solid #aab9d6; background: #fff; border-radius: var(--radius-md); color: var(--ink-900);
}
.toolbar .search-box input, .select-filter { border-radius: var(--radius-md); background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus, .toolbar .search-box input:focus, .select-filter:focus {
  outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(35,115,244,.22); background: #fff;
}

/* ---------- Tombol ---------- */
.btn { border-radius: var(--radius-md); font-weight: 600; padding: 10px 16px; border: 1px solid transparent;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease; }
.btn-primary, .btn-gold {
  background: var(--brand-fill); color: #fff; border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(18,52,120,.18), 0 4px 12px rgba(35,115,244,.22);
}
.btn-primary:active, .btn-gold:active { transform: scale(0.97); box-shadow: 0 1px 2px rgba(18,52,120,.18) !important; }
.btn-primary:hover, .btn-gold:hover { background: var(--gold-600); filter: none; }
.btn-ghost { background: #fff; color: var(--ink-700); border: 1px solid #aab9d6; }
.btn-ghost:hover { background: var(--gold-50); border-color: var(--gold-400); color: var(--gold-600); }
.btn-danger { background: var(--danger-50); color: var(--danger-600); border: 1px solid var(--danger-100); }
.btn-danger:hover { background: var(--danger-100); border-color: var(--danger-600); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(35,115,244,.4); }
.btn-xs { padding: 4px 10px; font-size: 12px; border-radius: var(--radius-sm); }

/* ---------- App shell: sidebar biru tua datar, aktif = kuning pucat ---------- */
.app-shell { grid-template-columns: 252px 1fr; }
.sidebar { background: #1245ab; border-right: 0; padding: 20px 12px; }
.sidebar-brand { border-bottom: 1px solid rgba(255,255,255,.16); padding: 4px 8px 18px; }
.sidebar-brand img { border: 0; border-radius: var(--radius-md); width: 38px; height: 38px; }
.sidebar-brand .t1 { font-size: 17px; font-weight: 700; color: #fff; }
.sidebar-brand .t2 { color: var(--cyan-500); font-weight: 600; letter-spacing: .08em; }
.nav-group-label { color: #bcd0f7; font-weight: 600; }
.nav-group-label:hover { color: #fff; }
.nav-item { color: #e6eeff; border-radius: var(--radius-md); font-weight: 500; }
.nav-item:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-item.active { background: var(--sun-500); color: var(--ink-900); box-shadow: none; font-weight: 700; }
.nav-item.active .dot { background: var(--gold-500); opacity: 1; transform: scale(1.3); }
.nav-item.soon { color: #a9c2f2; }
.nav-item.nav-subgroup-label, .nav-item.nav-subgroup-label:hover { color: #a9c2f2; }
.nav-item .badge-soon { border-color: rgba(255,255,255,.3); color: #cfe0fb; }
.sidebar-footer { border-top-color: rgba(255,255,255,.16); }
.user-chip:hover { background: rgba(255,255,255,.1); }
.user-avatar { background: var(--cyan-500); color: var(--ink-900); box-shadow: none; }
.user-name { color: #fff; }
.user-role { color: #cfe0fb; }
.logout-btn { border-color: rgba(255,255,255,.35); color: #fff; }
.logout-btn:hover { background: rgba(255,255,255,.14); }

.topbar { height: 64px; background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--ink-100); padding: 0 28px; }
.topbar .crumb-eyebrow { color: var(--ink-500); font-weight: 500; }
.topbar .crumb-title { font-size: 15px; font-weight: 700; color: var(--ink-900); }
.notif-bell:hover { background: var(--gold-50); }
.content { padding: 28px; animation: bkFadeUp 180ms var(--ease-out); }
.page-head h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-900); }
.page-head p { color: var(--ink-500); font-size: 13.5px; }

/* ---------- Kartu & tabel ---------- */
.card { border: 1px solid var(--ink-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.toolbar { border-bottom: 1px solid var(--ink-100); padding: 14px 16px; }
.data-table th { background: var(--gold-50); color: var(--ink-500); font-weight: 600; letter-spacing: .04em; border-bottom: 1px solid var(--ink-100); }
.data-table td { border-bottom: 1px solid var(--ink-50); }
.data-table tbody tr:hover { background: var(--gold-50); }
.table-footer { border-top: 1px solid var(--ink-100); }
.badge { border: 0; font-weight: 600; }
.badge-nonaktif { background: var(--ink-50); color: var(--ink-500); }
.pagination button, .icon-btn { border: 1px solid #c4d1ea; border-radius: var(--radius-sm); }
.pagination button.active { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; }
.pagination button:hover:not(:disabled):not(.active), .icon-btn:hover { background: var(--gold-50); border-color: var(--gold-400); color: var(--gold-600); }
.empty-state h4 { font-weight: 600; }
.mono-tag { background: var(--gold-50); color: var(--gold-700); }

/* ---------- Modal & toast ---------- */
.modal-overlay { background: rgba(12,26,58,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: bkOverlayIn 160ms ease-out; }
.modal { border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); animation: bkModalIn 200ms var(--ease-out); }
@keyframes bkModalIn { from { opacity: 0; transform: scale(0.96) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-head { padding: 20px 24px; }
.modal-head h3 { font-size: 16px; font-weight: 700; }
.modal-body { padding: 24px; }
.modal-foot { padding: 16px 24px; background: var(--gold-50); }
.toast { background: var(--ink-900); border-radius: var(--radius-md); animation: none; transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
@starting-style { .toast { opacity: 0; transform: translateX(16px); } }

/* ---------- Dashboard: statistik berwarna palet ---------- */
.stat-card { border: 1px solid var(--ink-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 18px 20px; position: relative; }
.stat-card .stat-accent { width: 28px; height: 4px; border: 0; background: var(--gold-500); }
.stat-strip .stat-card:nth-child(4n+2) .stat-accent { background: var(--gold-400); }
.stat-strip .stat-card:nth-child(4n+3) .stat-accent { background: var(--cyan-500); }
.stat-strip .stat-card:nth-child(4n+4) .stat-accent { background: #d6dd5e; }
.stat-card .stat-value { font-weight: 700; letter-spacing: -0.02em; }
.stat-strip .stat-card { animation: bkRise 360ms var(--ease-out) backwards; }
.stat-strip .stat-card:nth-child(2) { animation-delay: 40ms; } .stat-strip .stat-card:nth-child(3) { animation-delay: 80ms; }
.stat-strip .stat-card:nth-child(4) { animation-delay: 120ms; } .stat-strip .stat-card:nth-child(5) { animation-delay: 160ms; }
.stat-strip .stat-card:nth-child(6) { animation-delay: 200ms; } .stat-strip .stat-card:nth-child(7) { animation-delay: 240ms; }
.stat-strip .stat-card:nth-child(8) { animation-delay: 280ms; }
.stat-strip.secondary .stat-card { animation: none; }
.work-widget { background: var(--sun-100); border: 1px solid #e3e98a; border-radius: var(--radius-lg); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .stat-card { transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
  .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .stat-strip.secondary .stat-card:hover { transform: none; box-shadow: var(--shadow-xs); }
}

/* ---------- Modul Keuangan: ikut palet Langit ---------- */
[id^="page-keuangan-"] {
  --kw-primary: #1d66e4; --kw-primary-600: #1558d6; --kw-primary-100: #e3edff;
  --kw-secondary: #51607d; --kw-bg: #f3f7ff; --kw-border: #dfe7f5; --kw-text: #0c1a3a; --kw-text-secondary: #51607d;
  --kw-info: #1558d6; --kw-info-bg: #e3edff;
  font-family: var(--font-ui);
}
[id^="page-keuangan-"] .data-table th { background: var(--gold-50); }

/* ---------- Reduced motion: gerakan hilang, fade tetap ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; }
  .content, .stat-strip .stat-card, .lh-chip, .lh-copy h2, .lh-copy p, .lh-bands li, .login-card, .modal, .empty-state {
    animation-name: bkFadeOnly !important;
  }
  .toast { transform: none !important; }
}

/* ---------- Perpustakaan: Tambah Buku (pxb) ---------- */
.pxb-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.pxb-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 14px; }
.pxb-main { min-width: 0; }
.pxb-cover {
  --cv-bg: #1d66e4; --cv-fg: #fff; --cv-sub: rgba(255,255,255,.78);
  position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden;
  background: var(--cv-bg); color: var(--cv-fg);
  box-shadow: 0 10px 28px rgba(18, 69, 171, .22), 0 2px 6px rgba(12, 26, 58, .12);
  transition: background-color 200ms cubic-bezier(0.23,1,0.32,1), color 200ms cubic-bezier(0.23,1,0.32,1);
}
.pxb-cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: rgba(0,0,0,.14); z-index: 2; }
.pxb-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.pxb-cover.has-img .pxb-cover-body { opacity: 0; }
.pxb-cover-body { position: absolute; inset: 0; padding: 22px 18px 18px 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; z-index: 1; }
.pxb-cover-chip { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.22); }
.pxb-cover-title { font-size: 21px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; margin-top: auto; }
.pxb-cover-author { font-size: 13px; font-weight: 600; color: var(--cv-sub); overflow-wrap: anywhere; }
.pxb-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--kw-text-secondary, #51607d); padding: 8px 12px; border: 1px solid #dfe7f5; border-radius: 8px; background: #f6f9ff; }
.pxb-meta b { color: #0c1a3a; font-weight: 700; }
.pxb-stepper-wrap > label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.pxb-stepper { display: grid; grid-template-columns: 44px 1fr 44px; border: 1px solid #cfdaf0; border-radius: 12px; overflow: hidden; background: #fff; }
.pxb-stepper button { border: 0; background: #eef4ff; color: #1558d6; font: inherit; font-size: 20px; font-weight: 700; height: 44px; cursor: pointer; transition: transform 160ms cubic-bezier(0.23,1,0.32,1), background-color 160ms; }
.pxb-stepper button:active { transform: scale(.97); }
.pxb-stepper button:focus-visible { outline: 2px solid #2373f4; outline-offset: -2px; }
.pxb-stepper input { border: 0; text-align: center; font: inherit; font-size: 18px; font-weight: 700; width: 100%; min-width: 0; background: transparent; -moz-appearance: textfield; }
.pxb-stepper input::-webkit-outer-spin-button, .pxb-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pxb-isbn { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 14px; }
.pxb-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.pxb-seg label { position: relative; cursor: pointer; }
.pxb-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pxb-seg span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid #cfdaf0; background: #fff; font-size: 13px; font-weight: 600; color: #0c1a3a; transition: background-color 160ms, color 160ms, border-color 160ms, transform 160ms cubic-bezier(0.23,1,0.32,1); }
.pxb-seg label:active span { transform: scale(.97); }
.pxb-seg input:checked + span { background: #1d66e4; border-color: #1d66e4; color: #fff; }
.pxb-seg input:focus-visible + span { outline: 2px solid #2373f4; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .pxb-seg span:hover { border-color: #578ef5; } .pxb-stepper button:hover { background: #e0ebff; } }
.pxb-import-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pxb-guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 4px 0 16px; }
.pxb-guide-card { background: #f6f9ff; border: 1px solid #dfe7f5; border-radius: 16px; padding: 16px; }
.pxb-guide-card .n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #1d66e4; color: #fff; font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.pxb-guide-card h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.pxb-guide-card p { margin: 0; font-size: 13px; line-height: 1.5; color: #51607d; }
@media (max-width: 760px) {
  .pxb-layout { grid-template-columns: 1fr; }
  .pxb-side { position: static; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .pxb-cover { width: 130px; flex: none; }
  .pxb-cover-title { font-size: 14px; }
  .pxb-side > :not(.pxb-cover) { flex: 1 1 180px; }
  .pxb-guide, .pxb-import-stats { grid-template-columns: 1fr; }
  .pxb-isbn { flex-direction: column; align-items: stretch; }
}

/* =====================================================================
   AGENDA & TUGAS TU, KALENDER, PENGINGAT, CHAT  (agenda.js)
   ===================================================================== */
:root { --ease-out-q: cubic-bezier(0.23, 1, 0.32, 1); }
.chat-btn + .notif-bell { margin-left: 0; }
.muted { color: var(--ink-500); font-size: 13px; }
.ag-head { align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ag-tabs { display: flex; gap: 4px; background: var(--ink-50); padding: 4px; border-radius: var(--radius-md); flex-wrap: wrap; }
.ag-tab { border: 0; background: transparent; padding: 7px 14px; border-radius: 9px; font: 600 13px/1 inherit; color: var(--ink-500); cursor: pointer; transition: background 150ms ease, color 150ms ease, transform 120ms var(--ease-out-q); }
.ag-tab:hover { color: var(--ink-900); }
.ag-tab:active { transform: scale(0.97); }
.ag-tab.on { background: #fff; color: var(--brand-fill); box-shadow: var(--shadow-xs); }
.ag-quick { display: flex; gap: 8px; margin-bottom: 10px; }
.ag-quick input { flex: 1; padding: 12px 14px; border: 1.5px solid var(--ink-100); border-radius: var(--radius-md); font-size: 14.5px; background: #fff; color: var(--ink-900); font-family: inherit; }
.ag-quick input:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 4px rgba(35,115,244,.16); }
.ag-filter { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; font-size: 13px; color: var(--ink-700); }
.ag-sw { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.ag-filter .search-box { position: relative; }
.ag-filter .search-box input { padding: 7px 12px; border: 1.5px solid var(--ink-100); border-radius: var(--radius-md); font-size: 13px; background: #fff; font-family: inherit; }
.ag-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.ag-stat { background: #fff; border: 1px solid var(--ink-100); border-radius: var(--radius-md); padding: 12px 14px; box-shadow: var(--shadow-xs); }
.ag-stat b { display: block; font-size: 22px; color: var(--ink-900); letter-spacing: -.02em; }
.ag-stat span { font-size: 12px; color: var(--ink-500); }
.ag-stat.warn b { color: var(--danger-600); } .ag-stat.ok b { color: var(--leaf-600); }
.tk-grp { background: #fff; border: 1px solid var(--ink-100); border-radius: var(--radius-lg); padding: 6px 6px 8px; margin-bottom: 14px; box-shadow: var(--shadow-xs); }
.tk-grp-h { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-500); padding: 10px 12px 6px; }
.tk-grp-h span { background: var(--ink-50); border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
.tk-grp.bad .tk-grp-h { color: var(--danger-600); }
.tk-sub { font-size: 12px; font-weight: 600; color: var(--ink-500); padding: 8px 12px 2px; }
.tk-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer; transition: background 120ms ease; }
.tk-row:hover { background: var(--gold-50); }
.tk-check { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--ink-300); background: #fff; cursor: pointer; padding: 0; position: relative; transition: background 150ms ease, border-color 150ms ease, transform 120ms var(--ease-out-q); }
.tk-check:hover { border-color: var(--brand-fill); }
.tk-check:active { transform: scale(0.88); }
.tk-check.on { background: var(--leaf-600); border-color: var(--leaf-600); }
.tk-check.on::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tk-prio { width: 4px; align-self: stretch; border-radius: 3px; flex: none; margin: 2px 0; }
.tk-main { flex: 1; min-width: 0; }
.tk-title { font-size: 14px; font-weight: 600; color: var(--ink-900); overflow-wrap: anywhere; }
.tk-row.done .tk-title { text-decoration: line-through; color: var(--ink-300); font-weight: 500; }
.tk-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.tk-chip { font-size: 11.5px; color: var(--ink-500); background: var(--ink-50); border-radius: 6px; padding: 1px 7px; }
.tk-chip.bad { background: var(--danger-100); color: var(--danger-600); font-weight: 600; }
.tk-chip.cat { background: var(--cyan-100); color: #0b6a8c; }
.tk-chip.prog { background: #dbeafe; color: #1d4ed8; }
.tk-av { width: 24px; height: 24px; border-radius: 50%; background: var(--gold-100); color: var(--gold-700); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
/* papan */
.kb-wrap { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 12px; align-items: start; }
.kb-col { background: var(--ink-50); border-radius: var(--radius-lg); padding: 10px; min-height: 160px; border: 2px solid transparent; transition: border-color 150ms ease, background 150ms ease; }
.kb-col.over { border-color: var(--gold-400); background: var(--gold-50); }
.kb-h { font-size: 13px; font-weight: 700; color: var(--ink-700); padding: 4px 6px 10px; display: flex; align-items: center; gap: 6px; }
.kb-n { color: var(--ink-300); font-weight: 600; }
.kb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-300); } .kb-dot.s-Proses { background: var(--gold-500); } .kb-dot.s-Selesai { background: var(--leaf-500); }
.kb-card { background: #fff; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--shadow-sm); cursor: grab; transition: transform 140ms var(--ease-out-q), box-shadow 140ms ease; }
.kb-card:hover { box-shadow: var(--shadow-md, 0 4px 14px rgba(18,52,120,.12)); }
.kb-card:active { transform: scale(0.98); }
.kb-card.drag { opacity: .45; }
.kb-t { font-size: 13.5px; font-weight: 600; color: var(--ink-900); margin-bottom: 4px; overflow-wrap: anywhere; }
.kb-f { display: flex; justify-content: flex-end; margin-top: 6px; }
.tk-prio-pill { font-size: 11px; font-weight: 700; color: var(--c); border: 1px solid var(--c); border-radius: 6px; padding: 0 6px; }
.kb-add { width: 100%; border: 0; background: transparent; color: var(--ink-500); font: 600 12.5px/1 inherit; padding: 8px; border-radius: 8px; cursor: pointer; text-align: left; }
.kb-add:hover { background: rgba(255,255,255,.7); color: var(--brand-fill); }
/* kalender */
.cal-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.cal-bar h3 { margin: 0 6px; font-size: 17px; min-width: 150px; text-align: center; color: var(--ink-900); }
.cal-leg { margin-left: auto; font-size: 12px; color: var(--ink-500); display: flex; align-items: center; gap: 5px; }
.cal-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--ink-100); gap: 1px; border: 1px solid var(--ink-100); border-radius: var(--radius-lg); overflow: hidden; }
.cal-h { background: var(--ink-50); text-align: center; font-size: 11.5px; font-weight: 700; color: var(--ink-500); padding: 8px 0; }
.cal-h.we { color: var(--danger-500); }
.cal-cell { background: #fff; min-height: 98px; padding: 4px 5px; cursor: pointer; transition: background 120ms ease; overflow: hidden; }
.cal-cell:hover { background: var(--gold-50); }
.cal-cell.out { background: #fafbfe; } .cal-cell.out .cal-d { color: var(--ink-300); }
.cal-cell.sel { box-shadow: inset 0 0 0 2px var(--gold-500); }
.cal-d { font-size: 12px; font-weight: 700; color: var(--ink-700); margin-bottom: 3px; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; }
.cal-cell.today .cal-d { background: var(--brand-fill); color: #fff; }
.cal-ev { font-size: 11px; padding: 1px 6px; border-radius: 5px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev.kg { background: #dbeafe; color: #1d4ed8; font-weight: 600; }
.cal-ev.tg { background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--ink-900); border-left: 3px solid var(--c); }
.cal-ev.tg.done { text-decoration: line-through; opacity: .55; }
.cal-more { font-size: 11px; color: var(--ink-500); padding-left: 4px; }
.cal-detail { margin-top: 14px; padding: 14px 16px; }
.cal-detail-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; flex-wrap: wrap; }
.kg-row { font-size: 13px; padding: 6px 12px; background: #eff6ff; border-radius: 8px; margin-bottom: 6px; color: #1e3a8a; }
/* kartu pengingat */
.rm-stack { position: fixed; bottom: 20px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; width: min(340px, calc(100vw - 32px)); pointer-events: none; }
.rm-card { pointer-events: auto; display: flex; gap: 10px; background: #fff; border: 1px solid var(--ink-100); border-left: 4px solid var(--gold-500); border-radius: 12px; padding: 12px; box-shadow: 0 10px 30px rgba(18,52,120,.22); opacity: 0; transform: translateX(16px) scale(.97); transition: opacity 200ms var(--ease-out-q), transform 200ms var(--ease-out-q); cursor: pointer; }
.rm-card.in { opacity: 1; transform: none; }
.rm-ico { font-size: 22px; } .rm-title { font-weight: 700; font-size: 14px; color: var(--ink-900); overflow-wrap: anywhere; } .rm-sub { font-size: 12px; color: var(--ink-500); margin: 2px 0 8px; }
.rm-act { display: flex; gap: 6px; flex-wrap: wrap; }
/* isi lonceng */
.bel-sec { padding-bottom: 8px; border-bottom: 1px solid var(--ink-100); margin-bottom: 4px; }
.bel-h { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); margin: 2px 0 6px; }
.bel-row { display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.bel-row:hover { background: var(--gold-50); }
.bel-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; }
.bel-t { font-size: 13px; font-weight: 600; color: var(--ink-900); } .bel-t small { display: block; font-weight: 500; color: var(--ink-500); font-size: 11.5px; }
.bel-row.telat .bel-t small { color: var(--danger-600); }
/* chat */
.chat-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100vw); z-index: 1500; background: #fff; border-left: 1px solid var(--ink-100); box-shadow: -12px 0 40px rgba(18,52,120,.16); display: flex; flex-direction: column; transform: translateX(104%); transition: transform 240ms var(--ease-out-q); }
.chat-drawer.open { transform: none; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px; border-bottom: 1px solid var(--ink-100); }
.chat-title { flex: 1; font-weight: 700; font-size: 15px; color: var(--ink-900); }
.chat-back, .chat-x { border: 0; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink-500); padding: 2px 8px; border-radius: 8px; transition: background 120ms ease, transform 120ms var(--ease-out-q); }
.chat-back:hover, .chat-x:hover { background: var(--ink-50); } .chat-back:active, .chat-x:active { transform: scale(.92); }
.chat-list { flex: 1; overflow-y: auto; padding: 6px; }
.chat-sep { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-300); padding: 12px 10px 4px; }
.chat-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; padding: 10px; border-radius: 12px; cursor: pointer; font-family: inherit; transition: background 120ms ease; }
.chat-item:hover { background: var(--gold-50); }
.chat-av { width: 38px; height: 38px; border-radius: 50%; background: var(--gold-100); color: var(--gold-700); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.chat-av.grp { background: var(--cyan-100); }
.chat-it { flex: 1; min-width: 0; display: flex; flex-direction: column; } .chat-it b { font-size: 14px; color: var(--ink-900); } .chat-it small { font-size: 12px; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-badge { background: var(--danger-600); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; }
.chat-conv { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 12px 14px; background: var(--paper); display: flex; flex-direction: column; gap: 6px; }
.chat-day { align-self: center; font-size: 11px; color: var(--ink-500); background: #fff; border-radius: 999px; padding: 2px 10px; margin: 8px 0 4px; }
.chat-empty { margin: auto; color: var(--ink-500); font-size: 13px; }
.chat-msg { max-width: 82%; display: flex; flex-direction: column; } .chat-msg.me { align-self: flex-end; align-items: flex-end; } .chat-msg.them { align-self: flex-start; }
.chat-nm { font-size: 11px; font-weight: 700; color: var(--gold-700); margin: 0 6px 1px; }
.chat-bub { padding: 8px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.chat-msg.me .chat-bub { background: var(--brand-fill); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.them .chat-bub { background: #fff; color: var(--ink-900); border-bottom-left-radius: 4px; box-shadow: var(--shadow-xs); }
.chat-tm { font-size: 10.5px; color: var(--ink-300); margin: 2px 6px 0; } .chat-tm a { color: var(--ink-300); margin-left: 6px; text-decoration: none; opacity: 0; transition: opacity 120ms; } .chat-msg:hover .chat-tm a { opacity: 1; } .chat-tm a:hover { color: var(--danger-600); }
.chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--ink-100); align-items: flex-end; background: #fff; }
.chat-form textarea { flex: 1; resize: none; border: 1.5px solid var(--ink-100); border-radius: 12px; padding: 9px 12px; font-family: inherit; font-size: 14px; line-height: 1.35; min-height: 40px; max-height: 110px; background: var(--paper); }
.chat-form textarea:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(35,115,244,.16); background: #fff; }
@media (max-width: 760px) {
  .ag-stats { grid-template-columns: repeat(2, 1fr); } .kb-wrap { grid-template-columns: 1fr; }
  .cal-cell { min-height: 64px; } .cal-ev { font-size: 10px; padding: 0 3px; }
}
@media (prefers-reduced-motion: reduce) { .chat-drawer, .rm-card { transition-duration: 1ms; } }

.chat-clip { border: 0; background: transparent; font-size: 20px; cursor: pointer; padding: 6px; border-radius: 10px; transition: background 120ms ease, transform 120ms var(--ease-out-q); }
.chat-clip:hover { background: var(--ink-50); } .chat-clip:active { transform: scale(.9); }
.chat-file { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12.5px; background: var(--gold-50); border-top: 1px solid var(--ink-100); }
.chat-file b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; } .chat-file small { color: var(--ink-500); }
.chat-file button { margin-left: auto; border: 0; background: transparent; font-size: 18px; cursor: pointer; color: var(--ink-500); }
.chat-fl { display: flex; gap: 8px; align-items: center; text-decoration: none; cursor: pointer; margin-top: 2px; }
.chat-msg.me .chat-fl { color: #fff; } .chat-msg.them .chat-fl { color: var(--ink-900); }
.chat-fl small { display: block; opacity: .75; font-size: 11px; } .chat-fl.gone { cursor: default; opacity: .6; font-style: italic; }

/* komentar & @tag */
.kom { margin-top: 6px; border-top: 1px solid var(--ink-100); padding-top: 12px; }
.kom-h { font-size: 13px; font-weight: 700; color: var(--ink-900); margin-bottom: 8px; } .kom-h span { color: var(--ink-500); font-weight: 600; }
.kom-list { max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.kom-item { display: flex; gap: 8px; } .kom-b { flex: 1; min-width: 0; }
.kom-m { font-size: 12.5px; color: var(--ink-900); } .kom-m small { color: var(--ink-300); margin-left: 4px; } .kom-m a { color: var(--ink-300); font-size: 11px; margin-left: 6px; text-decoration: none; } .kom-m a:hover { color: var(--danger-600); }
.kom-t { font-size: 13.5px; color: var(--ink-700); overflow-wrap: anywhere; line-height: 1.4; }
.mention { background: #ede9fe; color: #6d28d9; font-weight: 600; border-radius: 5px; padding: 0 4px; }
.kom-in { position: relative; display: flex; gap: 8px; align-items: flex-end; }
.kom-in textarea { flex: 1; resize: none; min-height: 44px; }
.kom-sug { position: absolute; left: 0; bottom: 100%; margin-bottom: 4px; width: min(300px, 100%); background: #fff; border: 1px solid var(--ink-100); border-radius: 12px; box-shadow: 0 10px 30px rgba(18,52,120,.2); padding: 4px; z-index: 5; }
.kom-sug button { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 13px; }
.kom-sug button.on, .kom-sug button:hover { background: var(--gold-50); } .kom-sug small { color: var(--ink-500); }
.rm-card.mention { border-left-color: #7c3aed; }
.kom-in textarea { font-family: inherit; font-size: 13.5px; padding: 8px 10px; border: 1.5px solid var(--ink-100); border-radius: 10px; }
.kom-in textarea:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(35,115,244,.16); }

.cal-ev.tg.kgs { --c: #1d66e4; background: #dbeafe; color: #1e3a8a; font-weight: 600; }

/* komentar inline di daftar */
.tk-chip.kbtn { cursor: pointer; opacity: .0; transition: opacity 120ms ease, background 120ms ease; }
.tk-row:hover .tk-chip.kbtn, .tk-chip.kbtn.has { opacity: 1; }
.tk-chip.kbtn:hover { background: var(--gold-100); color: var(--gold-700); }
.tk-chip.kbtn.has { background: #ede9fe; color: #6d28d9; font-weight: 600; }
.tk-last { font-size: 12.5px; color: var(--ink-500); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; max-width: 100%; }
.tk-last b { color: var(--ink-700); }
.tk-thread { margin: 0 12px 8px 46px; padding: 10px 12px; background: var(--paper); border-radius: 12px; border: 1px solid var(--ink-100); }
.tk-thread .kom-list { max-height: 220px; }
.kom-hint { font-size: 11px; color: var(--ink-500); margin: 5px 0 0; line-height: 1.5; }
.kom-rem { display: inline-block; margin-top: 3px; font-size: 11.5px; color: #92400e; background: #fef3c7; border-radius: 6px; padding: 1px 8px; }
.mention.rem { background: #fef3c7; color: #92400e; }
.rm-card.rem { border-left-color: #f59e0b; }
.kom-in textarea { overflow: hidden; }
.kb-card .tk-last { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (hover: none) { .tk-chip.kbtn { opacity: 1; } }

/* pemilih waktu @reminder */
.kom-pick { position: absolute; left: 0; bottom: 100%; margin-bottom: 6px; width: 292px; background: #fff; border: 1px solid var(--ink-100); border-radius: 14px; box-shadow: 0 14px 40px rgba(18,52,120,.26); padding: 10px; z-index: 8; transform-origin: bottom left; animation: kpIn 160ms var(--ease-out-q); }
@keyframes kpIn { from { opacity: 0; transform: scale(.96) translateY(4px); } to { opacity: 1; transform: none; } }
.kp-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 13.5px; color: var(--ink-900); }
.kp-top button { border: 0; background: var(--ink-50); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; transition: background 120ms, transform 120ms var(--ease-out-q); }
.kp-top button:hover { background: var(--gold-100); } .kp-top button:active { transform: scale(.92); }
.kp-quick { display: flex; gap: 6px; margin-bottom: 6px; }
.kp-quick button { flex: 1; border: 1px solid var(--ink-100); background: #fff; border-radius: 8px; padding: 4px 0; font: 600 12px/1 inherit; cursor: pointer; color: var(--ink-700); transition: background 120ms, transform 120ms var(--ease-out-q); }
.kp-quick button:hover { background: var(--gold-50); border-color: var(--gold-400); } .kp-quick button:active { transform: scale(.96); }
.kp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.kp-grid i { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--ink-300); text-align: center; padding: 3px 0; }
.kp-grid button { border: 0; background: transparent; height: 30px; border-radius: 8px; font: 600 12.5px/1 inherit; color: var(--ink-900); cursor: pointer; transition: background 100ms, transform 100ms var(--ease-out-q); }
.kp-grid button:hover:not(:disabled) { background: var(--gold-100); } .kp-grid button:active:not(:disabled) { transform: scale(.92); }
.kp-grid button.out { color: var(--ink-300); font-weight: 500; } .kp-grid button:disabled { opacity: .3; cursor: not-allowed; }
.kp-grid button.now { box-shadow: inset 0 0 0 1.5px var(--gold-400); }
.kp-grid button.on { background: var(--brand-fill); color: #fff; }
.kp-time { display: flex; align-items: center; gap: 6px; margin: 10px 0 8px; font-size: 13px; }
.kp-time select { padding: 5px 6px; border: 1.5px solid var(--ink-100); border-radius: 8px; font: 600 14px/1 inherit; background: var(--paper); }
.kp-time select:focus { outline: none; border-color: var(--gold-500); }
.kp-prev { margin-left: auto; font-size: 12px; color: var(--ink-500); }
.kp-act { display: flex; justify-content: flex-end; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .kom-pick { animation: none; } }

.tk-check:disabled { cursor: not-allowed; opacity: .45; }
.kom-edit { width: 100%; resize: vertical; border: 1.5px solid var(--gold-400); border-radius: 10px; padding: 7px 9px; font: inherit; font-size: 13.5px; }
.kom-edit-act { margin-top: 5px; display: flex; gap: 6px; }
.field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--ink-50); color: var(--ink-700); cursor: not-allowed; opacity: 1; }

/* Terbilang di bawah kolom nominal Rupiah */
.rp-hint { font-size: 12px; line-height: 1.35; color: var(--ink-500); margin-top: 5px; font-style: italic; }

/* ===== TEMA "REGISTRAR" (IBM Plex Sans, abu hangat, satu biru tua) ===== */

/* A — REGISTRAR: arsip tata usaha. IBM Plex Sans, abu hangat, tinta + satu biru tua. */
@font-face { font-family: "Plex"; src: url("/assets/fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "PlexMono"; src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root {
  --font-ui: "Plex", "Segoe UI", system-ui, sans-serif; --font-mono: "PlexMono", Consolas, monospace;
  --ink-900:#16181d; --ink-800:#23262d; --ink-700:#383c46; --ink-500:#5f6471; --ink-300:#9a9ea9; --ink-100:#dcdcd6; --ink-50:#efefea;
  --paper:#f4f4f0; --card:#fff; --wash:#f8f8f5; --line:#dcdcd6;
  --gold-700:#1245ab; --gold-600:#1558d6; --gold-500:#2373f4; --gold-400:#5a74b8; --gold-100:#e6eaf4; --gold-50:#f3f4f8;
  --brand-fill:#1d66e4; --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:10px;
}
.sidebar { background:#fbfbf8; border-right:1px solid var(--line); }
.sidebar-brand { border-bottom:1px solid var(--line); }
.sidebar-brand .t1 { color:var(--ink-900); font-weight:600; } .sidebar-brand .t2 { color:#a07d0a; font-weight:600; }
.nav-group-label { color:var(--ink-500); font-weight:600; font-size:10.5px; letter-spacing:.09em; }
.nav-group-label:hover { color:var(--ink-900); }
.nav-item { color:var(--ink-700); font-weight:450; border-radius:var(--radius-sm); }
.nav-item:hover { background:var(--ink-50); color:var(--ink-900); }
.nav-item.active { background:#fff; color:var(--ink-900); font-weight:600; box-shadow: inset 2px 0 0 #1d66e4, 0 0 0 1px var(--line); }
.nav-item.soon, .nav-item.nav-subgroup-label, .nav-item.nav-subgroup-label:hover { color:var(--ink-300); }
.sidebar-footer { border-top-color:var(--line); } .user-name { color:var(--ink-900); } .user-role { color:var(--ink-500); }
.user-avatar { background:#1d66e4; color:#fff; } .user-chip:hover { background:var(--ink-50); }
.logout-btn { border-color:var(--line); color:var(--ink-700); } .logout-btn:hover { background:var(--ink-50); }
.topbar { background:var(--paper); border-bottom:1px solid var(--line); }
.page-head h2 { font-weight:600; letter-spacing:-0.015em; font-size:22px; }
.field input, .field select, .field textarea, .toolbar .search-box input, .select-filter { border:1px solid #c9c9c1; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:#1d66e4; box-shadow:0 0 0 2px rgba(36,64,142,.18); }
.btn-ghost { border:1px solid #c9c9c1; color:var(--ink-800); } .btn-ghost:hover { background:var(--ink-50); border-color:#9a9ea9; color:var(--ink-900); }
.btn-primary:hover, .btn-gold:hover { background:#1b3274; }
.data-table th { background:transparent; color:var(--ink-500); font-size:11px; letter-spacing:.07em; text-transform:uppercase; border-bottom:1px solid var(--ink-900); }
.data-table td { border-bottom:1px solid var(--ink-50); } .data-table tbody tr:hover { background:var(--wash); }
.stat-card { background:#fff; border:1px solid var(--line); } .stat-card .stat-value { font-family:var(--font-mono); font-weight:500; letter-spacing:-0.02em; }
.mono-tag { background:var(--ink-50); color:var(--ink-800); font-family:var(--font-mono); }
.pagination button.active { background:#1d66e4; border-color:#1d66e4; }
.modal { border-radius:10px; border:1px solid var(--line); } .modal-foot { background:var(--wash); }
.modal-overlay { background:rgba(22,24,29,.45); backdrop-filter:none; }
[id^="page-keuangan-"] .data-table th { background:transparent; }

html, body { font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
.stat-card .stat-accent { display: none; }
.stat-card, .card { box-shadow: none; }
.btn-primary, .btn-gold { box-shadow: none; }
.btn-primary:active, .btn-gold:active { box-shadow: none !important; }
.stat-card:hover { transform: none !important; box-shadow: none !important; }
.work-widget { background: var(--wash); border: 1px solid var(--line); }
.nav-item .dot { display: none; }

/* ---------- Ikon menu (SVG garis, satu warna mengikuti teks) ---------- */
.nav-item .dot { display: inline-flex; width: 16px; height: 16px; background: none; opacity: 1; border-radius: 0; transform: none; flex-shrink: 0; align-items: center; justify-content: center; }
.nav-item .ni { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .72; }
.nav-item.active .ni, .nav-item:hover .ni { opacity: 1; }
.nav-item.active .dot { transform: none; background: none; }
.nav-item { gap: 9px; }
/* Tombol di halaman Keuangan ikut warna utama (sebelumnya biru terang sendiri) */
[id^="page-keuangan-"] { --kw-primary:#1d66e4; --kw-primary-600:#1b3274; --kw-primary-100:#e6eaf4; --kw-bg:#f4f4f0; --kw-border:#dcdcd6; --kw-text:#16181d; --kw-text-secondary:#5f6471; --kw-info:#1d66e4; --kw-info-bg:#e6eaf4; }
[id^="page-keuangan-"] .btn-primary, [id^="page-keuangan-"] [class*="btn-primary"] { background:#1d66e4; }
/* Label + nilai ringkasan tidak boleh menempel */
.kv-item { display:flex; flex-direction:column; gap:2px; }
.kv-label { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-500); }
.kv-value { font-weight:600; font-variant-numeric:tabular-nums; }

/* Titik status (pengganti emoji bulat merah/kuning/hijau) */
.st-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:1px; }
.st-ok { background:#2a8057; } .st-mid { background:#c8962b; } .st-bad { background:#b3261e; }
.badge-sebagian { background:#f6efd9; color:#6b4f0a; }

/* Halaman masuk: tiga pita warna-warni diganti satu bahasa (garis tipis di atas biru tua) */
.lh-bands { border-top-left-radius: 0; }
.lh-bands .b1, .lh-bands .b2, .lh-bands .b3 { background: transparent; border-top: 1px solid rgba(255,255,255,.22); color: #fff; }
.lh-bands li b { color: #fff; font-weight: 600; }
.lh-bands li span { color: #c5d0ea; }
.badge:has(.st-dot)::before { display: none; }

/* ---------- Tab Master Data (menu Master Data tunggal) ---------- */
.master-tabs { margin: -4px 0 20px; border-bottom: 1px solid var(--line); }
.master-tabs.hidden { display: none; }
.mt-kat { display: flex; gap: 22px; }
.mt-kat-btn { background: none; border: 0; padding: 8px 0 10px; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-500); cursor: pointer; position: relative; transition: color 120ms ease; }
.mt-kat-btn:hover { color: var(--ink-900); }
.mt-kat-btn.on { color: var(--ink-900); font-weight: 600; }
.mt-kat-btn.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #1d66e4; }
.mt-page { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 12px; }
.mt-page-btn { background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12.5px; color: var(--ink-700); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, transform 120ms var(--ease-out); }
.mt-page-btn:hover { background: var(--ink-50); border-color: #b9b9b0; }
.mt-page-btn:active { transform: scale(.97); }
.mt-page-btn.on { background: #1d66e4; border-color: #1d66e4; color: #fff; }

/* ===== Halaman tugas (Agenda) ===== */
body.ag-page-open { overflow: hidden; }
.ag-page { position: fixed; inset: 0; z-index: 40; background: var(--paper); display: flex; flex-direction: column; animation: bkOverlayIn 140ms ease-out; }
.agp-bar { display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.agp-crumb { color: var(--ink-500); font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agp-crumb b { color: var(--ink-900); font-weight: 600; }
.agp-saved { font-size: 12px; color: var(--ink-500); font-family: var(--font-mono, monospace); }
.agp-saved.bad { color: #b3261e; }
.agp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.agp-doc { overflow-y: auto; padding: 36px clamp(16px, 5vw, 64px) 80px; max-width: 880px; width: 100%; justify-self: center; }
.agp-side { overflow-y: auto; background: #fff; border-left: 1px solid var(--line); padding: 20px; }
.agp-side .kom-list { max-height: none; }
.agp-title { width: 100%; border: 0; background: transparent; font: 600 28px/1.25 var(--font-ui, inherit); color: var(--ink-900); padding: 4px 0; outline: none; }
.agp-title::placeholder { color: var(--ink-300); }
.agp-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 16px; margin: 14px 0 22px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.agp-props label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--ink-500); }
.agp-props input, .agp-props select { font: inherit; font-size: 13.5px; color: var(--ink-900); border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 4px 6px; margin-left: -6px; }
.agp-props input:hover, .agp-props select:hover { border-color: var(--line); background: #fff; }
.agp-props input:focus, .agp-props select:focus { outline: none; border-color: var(--accent, #1d66e4); background: #fff; }
.agp-blk { display: flex; align-items: flex-start; gap: 6px; position: relative; padding: 1px 0; }
.agp-blk textarea { flex: 1; border: 0; background: transparent; resize: none; overflow: hidden; font: 400 15px/1.55 var(--font-ui, inherit); color: var(--ink-900); padding: 3px 4px; outline: none; min-height: 28px; }
.agp-blk.t-h textarea { font-size: 20px; font-weight: 600; line-height: 1.35; padding-top: 10px; }
.agp-blk.done textarea { color: var(--ink-300); text-decoration: line-through; }
.agp-grip, .agp-x { opacity: 0; border: 0; background: transparent; cursor: pointer; color: var(--ink-300); font-size: 13px; padding: 4px; border-radius: 4px; line-height: 1; margin-top: 5px; transition: opacity 120ms; }
.agp-x { font-size: 18px; margin-top: 3px; }
.agp-blk:hover .agp-grip, .agp-blk:hover .agp-x, .agp-grip:focus-visible, .agp-x:focus-visible { opacity: 1; }
.agp-grip:hover, .agp-x:hover { background: var(--line); color: var(--ink-900); }
.agp-cb { width: 17px; height: 17px; margin: 8px 2px 0; flex: none; border: 1.5px solid var(--ink-300); border-radius: 4px; background: #fff; cursor: pointer; padding: 0; position: relative; }
.agp-cb.on { background: var(--accent, #1d66e4); border-color: var(--accent, #1d66e4); }
.agp-cb.on::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.agp-bul { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-700, #333); flex: none; margin: 14px 8px 0 6px; }
.agp-prog { font-size: 12px; color: var(--ink-500); margin: 4px 0 0 28px; }
.agp-prog:empty { display: none; }
.agp-add { display: flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--ink-500); font-size: 12px; }
.agp-meta { margin-top: 28px; font-size: 12px; }
.agp-menu { position: fixed; z-index: 60; width: 220px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(22,24,29,.14); padding: 4px; }
.agp-menu button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; border: 0; background: transparent; padding: 7px 10px; border-radius: 6px; cursor: pointer; font: inherit; text-align: left; }
.agp-menu button:hover { background: var(--paper); }
.agp-menu small { color: var(--ink-500); font-size: 11.5px; }
@media (max-width: 860px) { .agp-body { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow-y: auto; } .agp-doc, .agp-side { overflow: visible; } .agp-side { border-left: 0; border-top: 1px solid var(--line); } }

/* Branding: BAKTI by Bunda Kandung */
.sidebar-brand .t2 { text-transform: none; letter-spacing: .01em; font-size: 11.5px; }
.brand-by { font-weight: 400; font-size: .62em; color: var(--ink-500); letter-spacing: .01em; margin-left: 2px; }


/* ===== Palet "Langit" kembali (biru lama), dipadu font & ikon baru ===== */
:root {
  --ink-900:#0c1a3a; --ink-800:#17284d; --ink-700:#2b3b60; --ink-500:#51607d; --ink-300:#8e9bb8; --ink-100:#dfe7f5; --ink-50:#eef3fc;
  --paper:#f3f7ff; --card:#fff; --wash:#f8faff; --line:#dfe7f5;
  --gold-700:#1245ab; --gold-600:#1558d6; --gold-500:#2373f4; --gold-400:#578ef5; --gold-100:#e3edff; --gold-50:#f1f6ff;
  --brand-fill:#1d66e4; --accent:#2373f4;
  --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px;
}
.sidebar { background:#1245ab; border-right:0; }
.sidebar-brand { border-bottom:1px solid rgba(255,255,255,.16); }
.sidebar-brand .t1 { color:#fff; font-weight:700; }
.sidebar-brand .t2 { color:#65d0f4; font-weight:600; text-transform:none; letter-spacing:.01em; }
.nav-group-label { color:#bcd0f7; font-weight:600; border-left:0; padding-left:0; margin-left:0; }
.nav-group-label::before { color:#bcd0f7; }
.nav-group-label:hover { color:#fff; }
.nav-item { color:#e6eeff; }
.nav-item:hover { background:rgba(255,255,255,.12); color:#fff; }
.nav-item .ni { color:currentColor; opacity:.8; }
.nav-item.active { background:#f2f7a0; color:#0c1a3a; font-weight:700; box-shadow:none; }
.nav-item.active .ni { opacity:1; }
.sidebar-footer { border-top-color:rgba(255,255,255,.16); }
.user-avatar { background:#65d0f4; color:#0c1a3a; }
.user-name { color:#fff; } .user-role { color:#cfe0fb; }
.logout-btn, #btnUbahPw { border-color:rgba(255,255,255,.35); color:#fff; background:transparent; }
.logout-btn:hover, #btnUbahPw:hover { background:rgba(255,255,255,.12); }
/* kartu ringkasan: aksen biru langit, bukan warna-warni */
.stat-card { background:#fff; border:1px solid var(--ink-100); box-shadow:inset 0 3px 0 #2373f4; }
.stat-card:nth-child(4n+2) { box-shadow:inset 0 3px 0 #578ef5; }
.stat-card:nth-child(4n+3) { box-shadow:inset 0 3px 0 #65d0f4; }
.stat-card:nth-child(4n) { box-shadow:inset 0 3px 0 #1245ab; }
.stat-card .stat-value { color:#0c1a3a; }
.btn-primary, .btn-gold { background:#1d66e4; box-shadow:0 1px 2px rgba(18,52,120,.18), 0 4px 12px rgba(35,115,244,.22); border:1px solid transparent; }
.btn-primary:hover, .btn-gold:hover { background:#1558d6; }
.btn-ghost { border-color:#aab9d6; }
.btn-ghost:hover { background:#f1f6ff; border-color:#578ef5; color:#1558d6; }
table thead th { background:#f1f6ff; color:#2b3b60; }
table tbody tr:hover { background:#f1f6ff; }
.work-widget { background:#fbfcd9; border-color:#e3e98a; }
/* login: panel biru + tiga pita palet */
.login-hero { background:#1d66e4; }
.lh-chip { background:rgba(255,255,255,.18); }
.lh-bands .b1 { background:#578ef5; border-top:0; } .lh-bands .b2 { background:#65d0f4; border-top:0; } .lh-bands .b3 { background:#f2f7a0; border-top:0; }
.lh-bands li b { color:#0c1a3a; font-weight:700; } .lh-bands li span { color:#17284d; }
.login-card .btn-gold, .login-submit { background:#1d66e4; }
.login-brand .brand-title { color:#1558d6; }
.brand-by { color:#51607d; }
/* tab Master Data & halaman tugas ikut biru */
.mt-kat-btn.on::after { background:#2373f4; }
.mt-page-btn.on { background:#1d66e4; border-color:#1d66e4; color:#fff; }
.agp-props input:focus, .agp-props select:focus { border-color:#2373f4; }
.agp-cb.on { background:#2373f4; border-color:#2373f4; }
.modal-overlay { background:rgba(12,26,58,.5); }

/* ===== Portal Guru: switch mode, Wali Kelas bertab, Jadwal Hari Ini ===== */
.mode-switch { display:grid; grid-template-columns:1fr 1fr; gap:2px; margin:0 0 12px; padding:3px; background:rgba(255,255,255,.12); border-radius:8px; }
.mode-switch.hidden { display:none; }
.mode-switch button { border:0; background:transparent; color:#d5e2fb; font:600 12px/1 inherit; font-family:inherit; padding:8px 4px; border-radius:6px; cursor:pointer; transition:background 140ms ease-out, color 140ms ease-out; }
.mode-switch button:hover { color:#fff; }
.mode-switch button.on { background:#f2f7a0; color:#0c1a3a; }
.mode-switch button:focus-visible { outline:2px solid #fff; outline-offset:1px; }
.pg-tabs { display:flex; gap:4px; border-bottom:1px solid var(--ink-100); margin:0 0 16px; flex-wrap:wrap; }
.pg-tab { border:0; background:none; font:600 13px/1 inherit; font-family:inherit; color:var(--ink-500); padding:10px 14px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.pg-tab:hover { color:var(--ink-900); }
.pg-tab.on { color:var(--gold-700); border-bottom-color:var(--gold-600); }
.pg-tab:focus-visible { outline:2px solid var(--gold-500); outline-offset:-2px; }
.pg-sum { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin:0 0 14px; }
.pg-sum > div { background:var(--gold-50); border:1px solid var(--ink-100); border-radius:8px; padding:10px 12px; }
.pg-sum b { display:block; font-size:19px; color:var(--ink-900); }
.pg-sum span { font-size:11.5px; color:var(--ink-500); }
.pg-chip { display:inline-block; padding:2px 8px; border-radius:99px; font-size:11.5px; font-weight:600; background:var(--ink-50); color:var(--ink-700); }
.pg-chip.ok { background:var(--leaf-100); color:var(--leaf-700); }
.pg-chip.warn { background:#fdf0cf; color:#7a5200; }
.pg-chip.bad { background:var(--danger-100); color:var(--danger-600); }
.pg-now { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-bottom:16px; }
.pg-now .card { padding:16px; }
.pg-now .lbl { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-500); }
.pg-now .big { font-size:20px; font-weight:700; color:var(--ink-900); margin:6px 0 2px; }
.pg-now .card.live { background:var(--brand-fill); border-color:var(--brand-fill); }
.pg-now .card.live .lbl, .pg-now .card.live .big, .pg-now .card.live .sub { color:#fff; }
.pg-now .sub { font-size:12.5px; color:var(--ink-500); }
.pg-abs-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:8px 12px; margin:3px 0; border-radius:8px; border-bottom:none; transition:background-color .15s ease; }
/* Warna tipis per baris (selang-seling) supaya mata tidak tertukar antar siswa */
.pg-abs-row:nth-of-type(odd)  { background:linear-gradient(90deg,#e6effd 0%,rgba(230,239,253,.55) 55%,rgba(230,239,253,.12) 100%); box-shadow:inset 3px 0 0 #7fa7ee; }
.pg-abs-row:nth-of-type(even) { background:linear-gradient(90deg,#f4f8ff 0%,rgba(244,248,255,.6) 55%,rgba(244,248,255,.1) 100%); box-shadow:inset 3px 0 0 #bcd2f7; }
.pg-abs-row:hover { background:linear-gradient(90deg,#d4e3fc 0%,rgba(212,227,252,.6) 60%,rgba(212,227,252,.2) 100%); }
.pg-abs-opts { display:flex; gap:4px; flex-wrap:wrap; }
.pg-abs-opts label { cursor:pointer; }
.pg-abs-opts input { position:absolute; opacity:0; pointer-events:none; }
.pg-abs-opts span { display:inline-block; padding:6px 11px; border:1px solid var(--ink-100); border-radius:6px; font-size:12px; font-weight:600; color:var(--ink-700); background:#fff; }
.pg-abs-opts input:checked + span { background:var(--gold-600); border-color:var(--gold-600); color:#fff; }
.pg-abs-opts input:focus-visible + span { outline:2px solid var(--gold-500); outline-offset:1px; }
@media (max-width:640px){ .pg-abs-row { grid-template-columns:1fr; padding:8px 10px; } }
.t24 { display:inline-flex; align-items:center; gap:6px; }
.t24 select { width:auto; min-width:78px; }
.t24-sep { font-weight:700; color:var(--ink-500); }

/* ===== Tampilan HP / tablet kecil (<= 760px): menu geser + konten selebar layar ===== */
.menu-btn, .nav-backdrop { display: none; }
@media (max-width: 760px) {
  .app-shell { display: block; }
  .main { min-height: 100vh; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -6px; border: 0; background: transparent; color: var(--ink-900); border-radius: 8px; cursor: pointer; flex: 0 0 auto; }
  .menu-btn:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
  .topbar { padding: 0 14px; height: 56px; gap: 6px; }
  .topbar > div:first-of-type { flex: 1; min-width: 0; }
  .topbar .crumb-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .content { padding: 16px; }
  .sidebar { display: flex !important; position: fixed; top: 0; bottom: 0; left: 0; z-index: 80; width: min(84vw, 300px); height: 100dvh; overflow-y: auto; transform: translateX(-102%); visibility: hidden; transition: transform 220ms cubic-bezier(.23,1,.32,1), visibility 0s linear 220ms; box-shadow: none; }
  body.nav-open .sidebar { transform: none; visibility: visible; transition: transform 220ms cubic-bezier(.23,1,.32,1), visibility 0s; box-shadow: 0 0 40px rgba(12,26,58,.35); }
  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(12,26,58,.45); opacity: 0; pointer-events: none; transition: opacity 200ms ease-out; }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  .data-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .page-head { flex-wrap: wrap; gap: 10px; }
  .modal { width: calc(100vw - 20px) !important; max-width: none !important; max-height: 92dvh; }
  .toolbar { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .sidebar, .nav-backdrop { transition-duration: 1ms !important; } }
.ag-page.ro .agp-grip, .ag-page.ro .agp-x { display: none; }
.ag-page.ro .agp-cb { pointer-events: none; }
.ag-sw select { margin-left: 6px; max-width: 220px; }
.ag-page.ro .agp-add, .ag-page.ro [data-x="del"] { display: none; }

/* Peringatan bentrok jadwal guru (Admin/Superadmin) */
.bj-card { border: 1px solid var(--danger-500); background: var(--danger-50); border-radius: var(--radius-md); margin-bottom: 16px; }
.bj-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; }
.bj-head strong { color: var(--danger-600); font-size: 14px; }
.bj-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-700); }
.bj-head .bj-act { margin-left: auto; display: flex; gap: 8px; }
.bj-body { padding: 0 16px 14px; overflow-x: auto; }
.bj-body table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; }
.bj-body th, .bj-body td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--danger-100); vertical-align: top; }
.bj-body th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); }
.bj-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; background: var(--danger-100); color: var(--danger-600); white-space: nowrap; }
.bj-ok { padding: 10px 14px; border-radius: var(--radius-md); background: var(--gold-50); color: var(--ink-700); font-size: 12.5px; margin-bottom: 14px; }

/* Chat: kotak cari kontak */
.chat-search { position: sticky; top: 0; z-index: 1; padding: 8px 8px 6px; background: var(--surface, #fff); }
.chat-search input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--ink-200, #d9d9d9); border-radius: 10px; font: inherit; font-size: 13px; }
.chat-search input:focus { outline: 2px solid var(--gold-500, #c9a227); outline-offset: 1px; }

/* Tombol mata pada kolom password */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; box-sizing: border-box; padding-right: 42px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 8px; cursor: pointer; color: var(--ink-500, #666); transition: background 120ms ease, transform 120ms ease; }
.pw-eye:hover { background: var(--gold-50, #f6f0dc); }
.pw-eye:active { transform: translateY(-50%) scale(.95); }
.pw-eye:focus-visible { outline: 2px solid var(--gold-500, #c9a227); }
.pw-eye svg { width: 18px; height: 18px; }

/* ===== Pengumuman (admin & siswa) ===== */
.pgm-redup { color: var(--ink-500); font-size: 12.5px; }
.pgm-galat { color: var(--danger-600); font-size: 13px; margin: 8px 0 0; }
.pgm-modal .pgm-body { overflow-y: auto; }
.pgm-tabs { display: flex; gap: 4px; margin: 0 0 12px; border-bottom: 1px solid var(--ink-100); flex-wrap: wrap; }
.pgm-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 14px; font: inherit; font-size: 13.5px; color: var(--ink-500); cursor: pointer; transition: color 150ms ease-out, border-color 150ms ease-out; }
.pgm-tab:hover { color: var(--ink-900); }
.pgm-tab.on { color: var(--ink-900); border-bottom-color: var(--ink-900); font-weight: 600; }
.pgm-tabelwrap { overflow-x: auto; }
.pgm-judul { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ink-900); text-align: left; cursor: pointer; }
.pgm-judul:hover { text-decoration: underline; }
.pgm-lencana { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.pgm-lencana.g { background: #e3edfa; color: #1d4f91; }
.pgm-lencana.p { background: #f3e6f7; color: #6b2a80; }
.pgm-tahan { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 11px; background: #fde3e1; color: #a12d24; }
.pgm-baca { color: var(--leaf-700); font-size: 12.5px; }
.pgm-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-500); align-items: center; }
.pgm-kertas { border: 1px solid var(--ink-100); border-radius: 10px; padding: 14px 16px; background: #fff; }
.pgm-kertas h4 { margin: 0 0 8px; font-size: 16px; color: var(--ink-900); }
.pgm-isi { font-size: 14px; line-height: 1.6; color: var(--ink-700); overflow-wrap: anywhere; }
.pgm-foto { width: 72px; height: 72px; border-radius: 50%; background: var(--ink-100); color: var(--ink-300); display: grid; place-items: center; margin-bottom: 10px; }
.pgm-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.pgm-bar input[type=search], .pgm-bar select { padding: 7px 10px; border: 1px solid var(--ink-300); border-radius: 6px; font: inherit; font-size: 13px; background: #fff; }
.pgm-bar input[type=search] { flex: 1; min-width: 180px; }
.pgm-hitung { font-size: 12.5px; color: var(--ink-700); font-weight: 600; margin-left: auto; }
.pgm-daftar { max-height: 340px; overflow: auto; border: 1px solid var(--ink-100); border-radius: 8px; }
.pgm-baris { display: flex; gap: 10px; align-items: center; padding: 7px 12px; border-bottom: 1px solid var(--ink-100); font-size: 13px; cursor: pointer; }
.pgm-baris:hover { background: var(--ink-50); }
.pgm-baris .pgm-nama { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pgm-kls { color: var(--ink-500); font-size: 12px; min-width: 38px; text-align: right; }
.pgm-tingkat { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.pgm-cek { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 6px 0; cursor: pointer; }
.pgm-pilih-jenis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pgm-kartu { text-align: left; border: 1.5px solid var(--ink-300); border-radius: 10px; background: #fff; padding: 16px; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color 150ms ease-out, transform 160ms ease-out; }
.pgm-kartu:hover { border-color: var(--ink-900); }
.pgm-kartu:active { transform: scale(0.98); }
.pgm-kartu b { font-size: 15px; color: var(--ink-900); }
.pgm-kartu span { font-size: 12.5px; color: var(--ink-500); }
.pgm-area { width: 100%; min-height: 140px; padding: 9px 11px; border: 1.5px solid var(--ink-300); border-radius: 8px; font: inherit; font-size: 14px; resize: vertical; box-sizing: border-box; }
.pgm-modal input[type=datetime-local], .pgm-modal #pgmJudul { width: 100%; box-sizing: border-box; }
.pgm-foot { flex-wrap: wrap; }
@media (max-width: 640px) {
  .pgm-pilih-jenis { grid-template-columns: 1fr; }
  .pgm-modal { max-height: 100dvh; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .pgm-kartu, .pgm-tab { transition: none; } }
.pgm-badge { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: #d33a2c; color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 1.5; }
.pgm-badge.hidden { display: none; }
.pgm-kartu-p { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--ink-100); border-radius: 12px; padding: 14px 16px; margin: 0 0 10px; font: inherit; cursor: pointer; transition: border-color 150ms ease-out, transform 160ms ease-out; }
.pgm-kartu-p:hover { border-color: var(--ink-300); }
.pgm-kartu-p:active { transform: scale(0.985); }
.pgm-kartu-p.baru { border-left: 4px solid #d33a2c; }
.pgm-kartu-p .pgm-k-atas { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.pgm-kartu-p b { color: var(--ink-900); font-size: 15px; overflow-wrap: anywhere; }
.pgm-kartu-p .pgm-k-ringkas { color: var(--ink-500); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.pgm-kartu-p .pgm-k-waktu { color: var(--ink-500); font-size: 12px; margin-top: 6px; }
.pgm-tanda-baru { background: #d33a2c; color: #fff; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; letter-spacing: .02em; }
.pgm-baca-detail { max-width: 720px; }
.pgm-baca-detail .pgm-kertas { padding: 18px 20px; }
.pgm-baca-detail h3 { margin: 0 0 6px; font-size: 20px; color: var(--ink-900); overflow-wrap: anywhere; }
.pgm-foto-besar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 0 14px; background: var(--ink-100); }
.pgm-foto-besar.default { display: grid; place-items: center; color: var(--ink-300); }

/* Sidebar (desktop): menempel di layar dengan scroll SENDIRI, jadi saat halaman putih
   kembali ke atas (pindah menu), posisi scroll sidebar biru tidak ikut berubah. */
@media (min-width: 761px) {
  .sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; align-self: start; overflow-y: auto; overscroll-behavior: contain; }
}

/* ---------- Pengumuman: bantuan kode data siswa (formulir TU) ---------- */
.pgm-kode { margin-top: 8px; }
.pgm-kode-daftar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pgm-chip { border: 1px solid var(--ink-300); background: #fff; color: var(--ink-700); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12px; cursor: pointer; transition: transform 120ms ease-out, background-color 120ms ease-out, border-color 120ms ease-out; }
.pgm-chip:hover { background: #eef3fd; border-color: #1245ab; color: #1245ab; }
.pgm-chip:active { transform: scale(0.96); }
.pgm-kartu-data { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 14px 0 0; padding: 12px 14px; background: var(--ink-50); border-radius: 8px; }
.pgm-kartu-data > div { min-width: 0; }
.pgm-kartu-data dt { font-size: 11px; color: var(--ink-500); text-transform: uppercase; letter-spacing: .04em; }
.pgm-kartu-data dd { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-900); overflow-wrap: anywhere; }

/* ---------- Pengumuman: tampilan siswa ---------- */
.pgs-kepala { margin: 0 0 16px; }
.pgs-kepala h2 { margin: 0; }
.pgs-sub { margin: 4px 0 0; color: var(--ink-500); font-size: 13.5px; }
.pgs-tab { display: inline-flex; gap: 4px; padding: 4px; background: var(--ink-100); border-radius: 10px; margin: 0 0 14px; }
.pgs-tab button { border: 0; background: transparent; border-radius: 7px; padding: 7px 14px; font: inherit; font-size: 13px; color: var(--ink-700); cursor: pointer; transition: background-color 150ms ease-out, color 150ms ease-out; }
.pgs-tab button span { margin-left: 4px; font-size: 11.5px; color: var(--ink-500); }
.pgs-tab button.on { background: #fff; color: #1245ab; font-weight: 600; box-shadow: 0 1px 2px rgba(12,26,58,.12); }
.pgs-tab button.on span { color: #1245ab; }
.pgs-daftar { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.pgs-kartu { display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left; background: #fff; border: 1px solid var(--ink-100); border-radius: 14px; padding: 14px 16px; font: inherit; cursor: pointer; transition: transform 140ms ease-out, border-color 140ms ease-out, box-shadow 140ms ease-out; }
.pgs-kartu:hover { border-color: #b9ccef; box-shadow: 0 4px 14px rgba(18,69,171,.08); }
.pgs-kartu:active { transform: scale(0.985); }
.pgs-kartu:focus-visible { outline: 2px solid #1245ab; outline-offset: 2px; }
.pgs-ikon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--ink-100); color: var(--ink-500); }
.pgs-kartu.baru { border-color: #cfdcf6; background: linear-gradient(0deg, #fff, #fff), #fff; }
.pgs-kartu.baru .pgs-ikon { background: #1245ab; color: #fff; }
.pgs-kartu.tahan .pgs-ikon { background: #fdebd0; color: #9a5b00; }
.pgs-badan { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.pgs-baris1 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pgs-judul { color: var(--ink-900); font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.pgs-kartu:not(.baru) .pgs-judul { font-weight: 600; color: var(--ink-700); }
.pgs-ringkas { color: var(--ink-500); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pgs-info { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.pgs-jenis { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.pgs-jenis.p { background: #e5ecfb; color: #1245ab; }
.pgs-jenis.g { background: var(--ink-100); color: var(--ink-700); }
.pgs-kosong { text-align: center; padding: 40px 16px; color: var(--ink-500); }
.pgs-kosong h4 { margin: 10px 0 4px; color: var(--ink-900); font-size: 16px; }
.pgs-kosong p { margin: 0; font-size: 13.5px; }
.pgs-kosong-ikon { width: 56px; height: 56px; border-radius: 16px; background: var(--ink-100); color: var(--ink-500); display: grid; place-items: center; margin: 0 auto; }
.pgs-rangka { height: 78px; max-width: 760px; border-radius: 14px; background: linear-gradient(90deg, var(--ink-100) 25%, var(--ink-50) 50%, var(--ink-100) 75%); background-size: 200% 100%; animation: pgsKilau 1.2s linear infinite; margin-bottom: 10px; }
.pgs-rangka.tinggi { height: 300px; }
@keyframes pgsKilau { to { background-position: -200% 0; } }
.pgs-baca { max-width: 760px; }
.pgs-kembali { border: 0; background: none; color: #1245ab; font: inherit; font-size: 13.5px; font-weight: 600; padding: 6px 2px; margin: 0 0 8px; cursor: pointer; }
.pgs-kembali:hover { text-decoration: underline; }
.pgs-surat { background: #fff; border: 1px solid var(--ink-100); border-radius: 16px; overflow: hidden; box-shadow: 0 6px 24px rgba(12,26,58,.06); }
.pgs-kop { display: flex; gap: 12px; align-items: center; padding: 14px 22px; background: #1245ab; color: #fff; }
.pgs-kop img { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: #fff; padding: 3px; }
.pgs-kop b { display: block; font-size: 15px; }
.pgs-kop span { font-size: 12px; opacity: .8; }
.pgs-surat-isi { padding: 24px 26px 28px; }
.pgs-surat-isi h3 { margin: 0 0 6px; font-size: 22px; line-height: 1.3; color: var(--ink-900); overflow-wrap: anywhere; }
.pgs-waktu { margin: 0 0 18px; font-size: 12.5px; color: var(--ink-500); }
.pgs-teks { font-size: 15px; line-height: 1.75; color: var(--ink-700); overflow-wrap: anywhere; max-width: 62ch; }
.pgs-identitas { margin-top: 24px; border: 1px solid var(--ink-100); border-radius: 12px; padding: 14px 16px 16px; background: var(--ink-50); }
.pgs-identitas h5 { margin: 0 0 10px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #1245ab; }
.pgs-identitas dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 0; }
.pgs-identitas dl > div { min-width: 0; }
.pgs-identitas dl > div.lebar { grid-column: 1 / -1; }
.pgs-identitas dt { font-size: 11.5px; color: var(--ink-500); }
.pgs-identitas dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 600; color: var(--ink-900); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .pgs-surat-isi { padding: 18px 16px 22px; }
  .pgs-surat-isi h3 { font-size: 19px; }
  .pgs-identitas dl, .pgm-kartu-data { grid-template-columns: 1fr; }
  .pgs-kop { padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) { .pgs-rangka { animation: none; } .pgs-kartu, .pgm-chip, .pgs-tab button { transition: none; } }

/* ===== Agenda: detail tugas terkunci (mode baca) + tag kelas ===== */
.agp-view { display: none; }
.ag-page.locked .agp-view { display: block; }
.ag-page.locked .agp-edit { display: none; }
.agp-judul { margin: 0 0 14px; font: 700 clamp(22px, 5vw, 30px)/1.25 var(--font-ui, inherit); color: var(--ink-900); text-wrap: balance; overflow-wrap: anywhere; }
.agp-fakta { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 20px; margin: 0 0 20px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.agp-fakta > div { min-width: 0; }
.agp-fakta dt { font-size: 11.5px; color: var(--ink-500); margin-bottom: 4px; }
.agp-fakta dd { margin: 0; font-size: 14px; color: var(--ink-900); display: flex; align-items: center; gap: 7px; min-width: 0; overflow-wrap: anywhere; }
.agp-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--ink-50); color: var(--ink-700); }
.agp-pill.st-Proses { background: #dbeafe; color: #1e40af; }
.agp-pill.st-Selesai { background: #dcfce7; color: #166534; }
.agp-prio { width: 9px; height: 9px; border-radius: 50%; background: var(--p, #e0a100); flex: none; }
.agp-r-h { margin: 18px 0 4px; font: 600 19px/1.35 var(--font-ui, inherit); }
.agp-r-p { margin: 0 0 6px; font-size: 15px; line-height: 1.6; color: var(--ink-900); overflow-wrap: anywhere; }
.agp-r-c, .agp-r-u { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 6px; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.agp-r-cb { width: 18px; height: 18px; flex: none; margin-top: 3px; border: 1.5px solid var(--ink-300); border-radius: 5px; background: #fff; position: relative; }
.agp-r-c.done { color: var(--ink-300); text-decoration: line-through; }
.agp-r-c.done .agp-r-cb { background: var(--accent, #1d66e4); border-color: var(--accent, #1d66e4); }
.agp-r-c.done .agp-r-cb::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.agp-r-u .agp-bul { margin: 10px 0 0 6px; }
.agp-kosong { padding: 14px 0; }
.agp-baca { margin-top: 4px; }
.agp-kelas { margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; background: #f3efff; border: 1px solid #ddd3fb; }
.agp-kelas-h { font-size: 12px; font-weight: 700; color: #5b21b6; margin-bottom: 6px; letter-spacing: .02em; }
.agp-kelas-c { display: flex; flex-wrap: wrap; gap: 6px; }
.agp-kelas p { margin: 8px 0 0; font-size: 12px; }
.agp-kelas .agp-warn { color: #b45309; font-weight: 600; }
.mention.kls { background: #ede9fe; color: #5b21b6; }
.tk-chip.kls { background: #ede9fe; color: #5b21b6; }
.agp-tip { margin: 16px 0 0; padding: 10px 12px; font-size: 12px; line-height: 1.55; color: var(--ink-700); background: var(--ink-50); border-radius: 10px; }
#agpKelasEdit { margin-top: 12px; }
.agp-pop { position: fixed; bottom: auto; margin: 0; z-index: 70; max-height: 300px; overflow-y: auto; }
.kom-pick.agp-pop { overflow: visible; max-height: none; }
@media (max-width: 860px) {
  .agp-bar { padding: 8px 12px; gap: 8px; }
  .agp-crumb { display: none; }
  .agp-saved { margin-left: auto; }
  .agp-bar .btn { min-height: 40px; padding-left: 16px; padding-right: 16px; }
  .agp-doc { padding: 20px 16px 48px; }
  .agp-fakta { grid-template-columns: 1fr 1fr; }
  .agp-props { grid-template-columns: 1fr 1fr; gap: 12px; }
  .agp-props select, .agp-props input { min-height: 40px; font-size: 15px; }
  .agp-grip, .agp-x { opacity: 1; padding: 8px; }
}

/* ===== Jadwal siswa (kalender berwarna) + kartu dashboard ===== */
.js-wrap { max-width: 1180px; }
.js-rangka { height: 120px; border-radius: 14px; background: linear-gradient(90deg, var(--ink-100), #f4f7fd, var(--ink-100)); background-size: 200% 100%; animation: jsShim 1.2s linear infinite; }
@keyframes jsShim { to { background-position: -200% 0; } }
.js-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.js-bar .pgs-tab { margin: 0; }
.js-nav { display: flex; align-items: center; gap: 8px; min-width: 0; }
.js-judul { font-size: 16px; color: var(--ink-900); min-width: 0; }
.js-ib { width: 36px; height: 36px; border: 1px solid var(--ink-100); background: #fff; border-radius: 10px; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink-700); transition: background-color 120ms ease-out, transform 120ms ease-out; }
.js-ib:hover { background: var(--gold-50); } .js-ib:active { transform: scale(.94); }
.js-ib:focus-visible, .js-hari:focus-visible, .js-bsel:focus-visible, .js-mini-t:focus-visible, .js-tugas-h:focus-visible { outline: 2px solid #1245ab; outline-offset: 2px; }

/* kartu pelajaran */
.js-les { --bg: #e0ecff; --bar: #2563eb; --ink: #1e3a8a; display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px 9px 10px; border-radius: 12px; background: var(--bg); color: var(--ink); border-left: 4px solid var(--bar); position: relative; }
.js-les.lewat { opacity: .62; }
.js-les.sekarang { box-shadow: 0 0 0 2px var(--bar), 0 6px 18px rgba(18,52,120,.16); }
.js-jam { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; line-height: 1.2; flex: none; min-width: 42px; }
.js-jam b { font-size: 13px; } .js-jam small { font-size: 11.5px; opacity: .8; }
.js-les-b { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.js-les-b b { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.js-les-b small { font-size: 12px; opacity: .85; overflow-wrap: anywhere; }
.js-live { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11.5px; font-weight: 700; }
.js-live i, .js-pulse { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; animation: jsPulse 1.6s ease-out infinite; }
@keyframes jsPulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.js-prog { display: block; height: 5px; border-radius: 99px; background: rgba(0,0,0,.1); margin-top: 6px; overflow: hidden; }
.js-prog span { display: block; height: 100%; background: var(--bar); border-radius: 99px; transition: width 400ms ease-out; }
.js-grup { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.js-grup-h { font-size: 12px; font-weight: 700; color: var(--ink-500); letter-spacing: .03em; margin: 4px 0 0; }

/* tugas dari guru */
.js-flag { width: 10px; height: 12px; flex: none; background: #7c3aed; clip-path: polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%); display: inline-block; }
.js-tugas { background: #fff; border: 1.5px dashed #b49cf5; border-radius: 12px; overflow: hidden; }
.js-tugas-h { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; padding: 10px 12px; font: inherit; cursor: pointer; }
.js-tugas-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.js-tugas-t b { font-size: 14px; color: var(--ink-900); overflow-wrap: anywhere; }
.js-tugas-t small { font-size: 12px; color: var(--ink-500); }
.js-tag { flex: none; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: #ede9fe; color: #5b21b6; }
.js-tugas-b { display: none; padding: 0 14px 12px 32px; font-size: 14px; line-height: 1.6; color: var(--ink-800); }
.js-tugas.open .js-tugas-b { display: block; }
.js-isi h5 { margin: 10px 0 2px; font-size: 14.5px; }
.js-isi p { margin: 0 0 4px; overflow-wrap: anywhere; }
.js-c, .js-u { display: flex; gap: 9px; align-items: flex-start; }
.js-c > span { width: 15px; height: 15px; margin-top: 4px; border: 1.5px solid var(--ink-300); border-radius: 4px; flex: none; }
.js-c.done p { text-decoration: line-through; color: var(--ink-300); }
.js-u i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-700); margin-top: 10px; flex: none; }
.js-kls { background: #ede9fe; color: #5b21b6; font-weight: 600; border-radius: 5px; padding: 0 5px; font-size: 12.5px; }
.js-mini-t { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; border: 1.5px dashed #b49cf5; background: #fff; border-radius: 9px; padding: 6px 8px; font: inherit; font-size: 12.5px; color: #4c1d95; cursor: pointer; overflow-wrap: anywhere; }
.js-mini-t b { font-weight: 600; } .js-mini-t small { margin-left: auto; color: var(--ink-500); white-space: nowrap; }
.js-mini-t:hover { background: #f5f0ff; }
.js-mini-t .js-mp { font-style: normal; font-size: 11px; font-weight: 600; background: #ede7ff; color: #5b21b6; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }

/* minggu — lebar */
.js-minggu-lebar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.js-kol { background: #fff; border: 1px solid var(--ink-100); border-radius: 14px; display: flex; flex-direction: column; min-width: 0; }
.js-kol.today { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb; }
.js-kol-h { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px 8px; border-bottom: 1px solid var(--ink-100); }
.js-kol-h span { font-size: 12px; font-weight: 700; color: var(--ink-500); text-transform: uppercase; letter-spacing: .04em; }
.js-kol-h b { font-size: 20px; color: var(--ink-900); }
.js-kol.today .js-kol-h { background: #e8f0ff; border-radius: 13px 13px 0 0; } .js-kol.today .js-kol-h b { color: #1d4ed8; }
.js-kol-b { display: flex; flex-direction: column; gap: 7px; padding: 8px; }
.js-kol .js-les { flex-direction: column; gap: 2px; }
.js-kol .js-jam { flex-direction: row; gap: 5px; align-items: baseline; }
.js-kol-kosong { margin: 6px 4px; font-size: 12px; color: var(--ink-300); }
.js-minggu-sempit { display: none; }

/* bulan */
.js-bulan { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.js-bgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; background: #fff; border: 1px solid var(--ink-100); border-radius: 14px; padding: 10px; }
.js-bh { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ink-500); text-align: center; padding: 4px 0 6px; }
.js-bsel { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 70px; padding: 6px 7px; border: 1px solid transparent; background: var(--paper); border-radius: 10px; cursor: pointer; font: inherit; transition: background-color 120ms ease-out, border-color 120ms ease-out; text-align: left; }
.js-bsel b { font-size: 13px; color: var(--ink-900); }
.js-bsel.out { background: transparent; } .js-bsel.out b { color: var(--ink-300); }
.js-bsel:hover { border-color: #b9ccef; }
.js-bsel.today b { background: #2563eb; color: #fff; border-radius: 99px; padding: 1px 7px; }
.js-bsel.on { border-color: #2563eb; background: #e8f0ff; }
.js-dots { display: flex; flex-wrap: wrap; gap: 3px; } .js-dots i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.js-bt { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #5b21b6; }
.js-hari-judul { margin: 0 0 10px; font-size: 15px; color: var(--ink-900); }
.js-hari-isi { min-width: 0; }
.js-kosong { text-align: center; padding: 26px 14px; border: 1.5px dashed var(--ink-100); border-radius: 14px; color: var(--ink-500); background: #fff; }
.js-kosong h4 { margin: 0 0 4px; color: var(--ink-700); font-size: 14px; } .js-kosong p { margin: 0; font-size: 13px; }
.js-kosong.besar { margin-bottom: 14px; }
.js-legenda { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 16px; }
.js-legenda span { --bg: #e0ecff; --bar: #2563eb; --ink: #1e3a8a; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 99px; background: var(--bg); color: var(--ink); font-size: 12px; font-weight: 600; }
.js-legenda i { width: 8px; height: 8px; border-radius: 50%; background: var(--bar); }

/* dashboard */
.js-dash { margin: 0 0 18px; }
.js-d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.js-d-kartu { --bg: #e0ecff; --bar: #2563eb; --ink: #1e3a8a; display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border-radius: 16px; background: var(--bg); color: var(--ink); border-left: 5px solid var(--bar); min-width: 0; }
.js-d-kartu.sedang { box-shadow: 0 8px 24px rgba(18,52,120,.14); }
.js-d-kartu.kosong { background: #fff; border: 1.5px dashed var(--ink-100); border-left: 1.5px dashed var(--ink-100); color: var(--ink-500); }
.js-d-h { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.js-d-kartu b { font-size: clamp(18px, 4.6vw, 24px); line-height: 1.25; overflow-wrap: anywhere; }
.js-d-kartu small { font-size: 13px; opacity: .9; } .js-d-kartu em { font-style: normal; font-size: 13px; font-weight: 700; margin-top: 4px; }
.js-d-strip, .js-d-tugas { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.js-d-strip .js-d-h, .js-d-tugas .js-d-h { color: var(--ink-500); }
.js-chips { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; }
.js-chip { --bg: #e0ecff; --bar: #2563eb; --ink: #1e3a8a; flex: none; display: inline-flex; flex-direction: column; padding: 7px 11px; border-radius: 11px; background: var(--bg); color: var(--ink); border-bottom: 3px solid var(--bar); font-size: 12.5px; font-weight: 600; max-width: 170px; }
.js-chip b { font-size: 11px; font-weight: 700; opacity: .8; font-variant-numeric: tabular-nums; }
.js-chip.lewat { opacity: .5; } .js-chip.sekarang { box-shadow: 0 0 0 2px var(--bar); }
.js-d-link { margin-top: 12px; }

@media (max-width: 900px) {
  .js-bulan { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .js-minggu-lebar { display: none; }
  .js-minggu-sempit { display: block; }
  .js-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 14px; }
  .js-hari { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px; min-height: 58px; border: 1px solid var(--ink-100); background: #fff; border-radius: 12px; font: inherit; cursor: pointer; }
  .js-hari small { font-size: 11px; color: var(--ink-500); font-weight: 700; } .js-hari b { font-size: 17px; color: var(--ink-900); }
  .js-hari i { width: 6px; height: 6px; border-radius: 50%; background: transparent; } .js-hari i.n { background: #94a3b8; } .js-hari i.g { background: #7c3aed; }
  .js-hari.today b { color: #1d4ed8; }
  .js-hari.on { background: #2563eb; border-color: #2563eb; } .js-hari.on small, .js-hari.on b { color: #fff; } .js-hari.on i.n { background: #fff; } .js-hari.on i.g { background: #fde68a; }
  .js-d-grid { grid-template-columns: 1fr; }
  .js-bsel { min-height: 54px; padding: 4px 5px; } .js-dots i { width: 6px; height: 6px; }
  .js-bgrid { padding: 6px; gap: 3px; }
  .js-les { padding: 11px 12px 11px 10px; }
  .js-tugas-h { padding: 12px; min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .js-live i, .js-pulse, .js-rangka { animation: none; } .js-prog span { transition: none; } }
.js-detail-lebar { margin-top: 14px; max-width: 760px; }
@media (max-width: 760px) { .js-detail-lebar { display: none; } }

/* =====================================================================
   E-Jurnal, Pantauan, Laporan Siang, RPP (sesi 12 Okt 2026)
   ===================================================================== */
.jr-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 16px; margin-bottom:14px; }
.jr-lbl { font-size:12.5px; font-weight:600; color:var(--ink-500); }
.jr-date { padding:8px 10px; border:1.5px solid var(--ink-100); border-radius:8px; font:inherit; background:var(--card); color:var(--ink-900); }
.jr-date:focus { outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(35,115,244,.16); }
.jr-chk { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-700); }
.jr-sesi { display:flex; align-items:center; gap:16px; padding:14px 16px; margin-bottom:10px; }
.jr-jam { min-width:96px; font-weight:700; color:var(--ink-900); font-variant-numeric:tabular-nums; }
.jr-jam small { display:block; font-weight:500; color:var(--ink-500); font-size:11.5px; }
.jr-main { flex:1; min-width:0; }
.jr-judul { font-size:14.5px; color:var(--ink-900); }
.jr-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.jr-req { margin-top:5px; font-size:12.5px; color:var(--ink-500); }
.jr-aksi { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.jr-sub { margin:0 0 10px; font-size:13px; color:var(--ink-500); }
.jr-riw { padding:12px 16px; margin-bottom:10px; }
.jr-riw > summary { cursor:pointer; font-size:14px; }
.jr-isi p { margin:8px 0 0; font-size:13.5px; color:var(--ink-800); }
.jr-isi p span { display:block; font-size:11.5px; font-weight:600; color:var(--ink-500); text-transform:uppercase; letter-spacing:.04em; }
.jr-log { margin:12px 0 0; padding-left:18px; font-size:12.5px; color:var(--ink-500); }
.jr-sum { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; }
.jr-sum-tot { font-size:12.5px; color:var(--ink-500); }
.lp-preview { padding:20px 22px; }
.lp-head { margin-bottom:6px; }
.lp-brand { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-500); }
.lp-head h2 { margin:2px 0 0; font-size:14px; color:var(--ink-700); }
.lp-head h1 { margin:2px 0 6px; font-size:22px; color:var(--ink-900); }
.lp-sub { font-size:13px; color:var(--ink-700); }
.lp-bag { margin-top:18px; }
.lp-bag h3 { margin:0 0 4px; font-size:14.5px; color:var(--ink-900); padding-bottom:4px; border-bottom:1px solid var(--ink-100); }
.lp-st { font-size:11px; font-weight:600; color:#7a5200; background:#fdf0cf; padding:2px 8px; border-radius:99px; margin-left:6px; vertical-align:middle; }
.lp-cat { margin:6px 0 8px; font-size:12.5px; color:var(--ink-500); }
.lp-tbl { border-collapse:collapse; width:100%; font-size:13px; }
.lp-tbl th, .lp-tbl td { border:1px solid var(--ink-100); padding:6px 9px; text-align:left; vertical-align:top; }
.lp-tbl th { background:var(--ink-50); color:var(--ink-700); font-weight:600; }
.lp-foot { margin-top:20px; padding-top:8px; border-top:1px solid var(--ink-100); font-size:11.5px; color:var(--ink-500); }
.rp-kelas-box { display:flex; flex-wrap:wrap; gap:8px 14px; padding:8px 10px; border:1.5px solid var(--ink-100); border-radius:8px; background:var(--wash); }
.rp-kls { display:flex; align-items:center; gap:5px; font-size:13px; }
.rp-galat { margin:6px 0 0; padding-left:18px; max-height:30vh; overflow:auto; }
.rp-elemen { padding:14px 16px; margin-top:12px; }
.rp-eh { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:10px; }
.rp-tw { overflow-x:auto; }
.rp-tbl td { vertical-align:top; padding:6px; }
.rp-tbl input, .rp-tbl textarea, .rp-eh textarea, .rp-eh input { width:100%; box-sizing:border-box; padding:7px 8px; border:1.5px solid var(--ink-100); border-radius:7px; font:inherit; font-size:13px; background:var(--card); color:var(--ink-900); }
.rp-tbl textarea { min-width:240px; }
.rp-jp, .rp-total { margin-top:8px; font-size:13px; color:var(--ink-700); }
.rp-total { text-align:right; padding:6px 4px; }
@media (max-width: 720px) {
  .jr-sesi { flex-direction:column; align-items:stretch; gap:10px; }
  .jr-aksi { justify-content:flex-start; }
  .jr-aksi .btn { flex:1 1 auto; }
  .lp-preview { padding:14px; }
  .lp-tbl { display:block; overflow-x:auto; }
}

/* ===== Request Surat (siswa) & Permintaan Surat (TU) ===== */
.rq-kepala h2 { margin: 0 0 4px; font-size: 20px; }
.rq-sub { margin: 0 0 16px; color: var(--ink-500); font-size: 13.5px; }
.rq-form { padding: 18px; margin-bottom: 22px; max-width: 760px; }
.rq-jenis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-bottom: 14px; }
.rq-opsi { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--ink-100); border-radius: 12px; cursor: pointer; transition: border-color 150ms ease-out, background-color 150ms ease-out; }
.rq-opsi:has(input:checked) { border-color: #2373f4; background: #eef4ff; }
.rq-opsi:has(input:focus-visible) { outline: 2px solid #2373f4; outline-offset: 2px; }
.rq-opsi input { margin-top: 3px; }
.rq-opsi b { display: block; font-size: 14px; }
.rq-opsi small { color: var(--ink-500); font-size: 12px; line-height: 1.35; display: block; margin-top: 2px; }
.rq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rq-grid .rq-lebar { grid-column: 1 / -1; }
.rq-grid .hidden { display: none; }
.rq-galat { color: #b42318; font-size: 13px; margin: 8px 0 0; min-height: 0; }
.rq-galat:empty { display: none; }
.rq-aksi { margin-top: 14px; }
.rq-judul2 { margin: 0 0 10px; font-size: 15px; }
.rq-kosong { padding: 22px; text-align: center; color: var(--ink-500); font-size: 13.5px; }
.rq-daftar { display: grid; gap: 10px; max-width: 760px; }
.rq-kartu { border: 1px solid var(--ink-100); border-radius: 12px; padding: 12px 14px; background: #fff; }
.rq-baris1 { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.rq-kep { margin: 6px 0 2px; font-size: 14px; }
.rq-meta { color: var(--ink-500); font-size: 12.5px; margin: 2px 0; }
.rq-ok { margin: 8px 0 0; font-size: 13px; color: #14532d; background: #e8f7ee; padding: 7px 10px; border-radius: 8px; }
.rq-tolak { margin: 8px 0 0; font-size: 13px; color: #7a1d12; background: #fdecea; padding: 7px 10px; border-radius: 8px; }
.rq-batal { margin-top: 8px; }
.rq-st { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.rq-st i { font-style: normal; font-weight: 800; }
.rq-menunggu { background: #fff4d6; color: #7a4b00; border-color: #f1d98a; }
.rq-disetujui { background: #e8f7ee; color: #14532d; border-color: #b5e2c4; }
.rq-ditolak { background: #fdecea; color: #7a1d12; border-color: #f4bdb6; }
.rq-dibatalkan { background: var(--ink-100); color: var(--ink-700); border-color: var(--ink-300); }
.rq-tabel small { color: var(--ink-500); }
.rq-aksi-sel { white-space: nowrap; }
@media (max-width: 560px) { .rq-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rq-opsi { transition: none; } }

/* ----- Request Surat: tahap, kode unik, pelacakan ----- */
.rq-tabel .btn.sm, .rq-aksi-sel .btn.sm { padding: 5px 12px; font-size: 12px; }
.rq-aksi-sel { display: table-cell; }
.rq-dicetak { background: #e6efff; color: #123a8c; border-color: #b9cdf5; }
.rq-siap-diambil { background: #e8f7ee; color: #14532d; border-color: #8fd1a6; }
.rq-diserahkan { background: #dff3e8; color: #0f4a28; border-color: #8fd1a6; }
.rq-info { margin-top: 4px; padding: 12px 14px; border-radius: 10px; background: #eef4ff; border: 1px solid #c5d7fa; color: #12306f; font-size: 13.5px; line-height: 1.5; }
.rq-info.hidden, #rqSka.hidden { display: none; }
.rq-kode { display: inline-flex; align-items: center; gap: 10px; margin: 8px 0 4px; padding: 6px 12px; border: 1px dashed #9db5e6; border-radius: 10px; background: #f6f9ff; font-size: 12px; color: var(--ink-500); }
.rq-kode-nilai { font-family: var(--font-mono, ui-monospace, Consolas, monospace); font-size: 18px; letter-spacing: .16em; color: #12306f; user-select: all; }
.rq-lacak { list-style: none; margin: 12px 0 4px; padding: 0; display: flex; gap: 0; }
.rq-lacak li { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; position: relative; font-size: 11.5px; color: var(--ink-500); }
.rq-lacak li::before { content: ""; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px; background: var(--ink-100); z-index: 0; }
.rq-lacak li:first-child::before { display: none; }
.rq-lacak li.lalu::before, .rq-lacak li.kini::before { background: #2373f4; }
.rq-dot { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #fff; border: 2px solid var(--ink-200, #cfd8e8); color: var(--ink-500); }
.rq-lacak li.lalu .rq-dot { background: #2373f4; border-color: #2373f4; color: #fff; }
.rq-lacak li.kini .rq-dot { border-color: #2373f4; color: #1245ab; box-shadow: 0 0 0 4px rgba(35,115,244,.16); }
.rq-lacak li.kini .rq-lbl { color: #12306f; font-weight: 700; }
.rq-ket { margin: 8px 0 0; font-size: 13px; color: var(--ink-700); }
.rq-ket.siap { background: #e8f7ee; color: #14532d; padding: 8px 11px; border-radius: 8px; }
.rq-hasil { display: grid; gap: 4px; margin: -4px 0 10px; max-height: 190px; overflow: auto; }
.rq-hasil-i { text-align: left; border: 1px solid var(--ink-100); background: #fff; border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer; transition: background-color 120ms ease-out; }
.rq-hasil-i:hover, .rq-hasil-i:focus-visible { background: #eef4ff; outline: none; }
.rq-hasil-i small { color: var(--ink-500); margin-left: 6px; }
.rq-chip-baris { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.rq-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: #eef4ff; border: 1px solid #c5d7fa; font-size: 12.5px; }
.rq-chip small { color: var(--ink-500); }
.rq-chip button { border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; color: #1245ab; border-radius: 50%; }
@media (max-width: 560px) { .rq-lacak { font-size: 10.5px; } .rq-lacak li { font-size: 10.5px; } }
.rq-bahaya { color: #b42318; border-color: #f0b8b1; }
.rq-bahaya:hover { background: #fdecea; }

/* Tombol Hapus Permanen (Superadmin/Admin) harus terlihat aktif — merah, bukan abu-abu pucat. */
.icon-btn.danger[data-delete] { color: var(--danger-600); background: var(--danger-50); border-color: var(--danger-100); }
.icon-btn.danger[data-delete]:hover { background: var(--danger-600); color: #fff; border-color: var(--danger-600); }

/* Judul kolom yang bisa diurutkan (klik, seperti Excel) */
.data-table th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.data-table th.th-sort:hover { color: var(--ink-900, #111); }
.data-table th.th-sort:focus-visible { outline: 2px solid var(--brand-500, #1d4ed8); outline-offset: -2px; }
.data-table th .th-ind { font-size: 10px; opacity: .35; margin-left: 2px; }
.data-table th.th-sort-on { color: var(--ink-900, #111); }
.data-table th.th-sort-on .th-ind { opacity: 1; }

/* Master Data mode LIHAT SAJA (Keuangan/Piket/Akademik/Kesiswaan): tombol ubah disembunyikan.
   Penegakan sebenarnya ada di server (Api.* menolak selain Admin/Superadmin). */
body.master-lihat [data-action="add"],
body.master-lihat [data-action="download-template"],
body.master-lihat [data-action="import-excel"],
body.master-lihat .icon-btn[data-edit],
body.master-lihat .icon-btn[data-deactivate],
body.master-lihat .icon-btn[data-delete],
body.master-lihat .icon-btn[data-extra]:not([title="Detail"]),
body.master-lihat [data-selesai],
body.master-lihat .row-select,
body.master-lihat [data-role="select-all-header"],
body.master-lihat [data-role="bulk-toolbar"],
body.master-lihat #btnAddUnit, body.master-lihat #btnAddOrtu, body.master-lihat #btnAddRombel,
body.master-lihat #btnTemplateOrtu, body.master-lihat #btnImportOrtu,
body.master-lihat #btnTemplateRombel, body.master-lihat #btnImportRombel,
body.master-lihat #btnAddRefItem, body.master-lihat [data-deactivate-ref] { display: none !important; }

/* ===== Kalender Akademik & Format Surat ===== */
.kal-bar{flex-wrap:wrap;gap:8px;align-items:center}
.kal-nav{display:flex;align-items:center;gap:8px}
.kal-nav strong{min-width:150px;text-align:center}
.kal-nav-off #kalPrev,.kal-nav-off #kalNext,.kal-nav-off #kalHariIni{visibility:hidden}
.kal-seg{display:inline-flex;gap:4px}
.kal-seg .kal-on{background:#1d66e4;color:#fff;border-color:#1d66e4}
.kal-legend{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.kal-chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600}
.kal-c1{background:#fde2e2;color:#8a1c1c}.kal-c2{background:#fff0c7;color:#6b4a00}.kal-c3{background:#dbe8ff;color:#12408f}
.kal-c4{background:#e4e0fa;color:#3d2c8a}.kal-c5{background:#d5f2e0;color:#14572f}.kal-c6{background:#e8eaee;color:#3a4150}
.kal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid #d9dde5;border-radius:10px;overflow:hidden;background:#fff}
.kal-dow{padding:6px;text-align:center;font-size:12px;font-weight:700;background:#f3f5f9;color:#3a4150;border-bottom:1px solid #d9dde5}
.kal-cell{min-height:92px;padding:4px;border-right:1px solid #eceff4;border-bottom:1px solid #eceff4;display:flex;flex-direction:column;gap:2px;min-width:0}
.kal-cell:nth-child(7n){border-right:0}
.kal-kosong{background:#fafbfd}
.kal-min .kal-n{color:#b42323}
.kal-n{font-size:12px;font-weight:700;color:#3a4150}
.kal-hari-ini{background:#f0f6ff;box-shadow:inset 0 0 0 2px #1d66e4}
.kal-ev{border:0;border-radius:4px;padding:2px 5px;font-size:11px;font-weight:600;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.kal-lagi,.kal-meta,.kal-unit{font-size:11px;color:#5b6475}
@media (max-width:640px){.kal-cell{min-height:64px}.kal-ev{font-size:10px}}
.fs-ikon{font-size:18px}

/* ===== AKAMSI BK (Akal Imitasi Bunda Kandung) ===== */
.am{--am-garis:#e3e8f1;--am-kertas:#f6f8fc;--am-biru:#1d66e4;--am-ease:cubic-bezier(.23,1,.32,1);--am-morph:cubic-bezier(.77,0,.175,1);max-inline-size:880px;min-inline-size:0}
.am-kepala{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-block-end:18px}
.am-tanda{position:relative;flex:none;inline-size:40px;block-size:40px;border-radius:12px;background:var(--ink-900);display:grid;place-items:center;transition:border-radius 320ms var(--am-morph),background-color 240ms var(--am-ease)}
.am-tanda::before{content:"";inline-size:14px;block-size:14px;border-radius:4px;background:#fff;transition:border-radius 320ms var(--am-morph),transform 320ms var(--am-morph)}
.am-tanda::after{content:"";position:absolute;inset-inline-end:7px;inset-block-start:7px;inline-size:6px;block-size:6px;border-radius:50%;background:#f2b705}
.am.am-sibuk .am-tanda{border-radius:50%;background:var(--am-biru)}
.am.am-sibuk .am-tanda::before{border-radius:50%;transform:scale(.7)}
.am-judul{flex:1 1 220px;min-inline-size:0}
.am-judul h2{margin:0;font-size:20px;letter-spacing:-.01em;color:var(--ink-900);line-height:1.2}
.am-judul p{margin:2px 0 0;font-size:12.5px;color:var(--ink-500)}
.am-meter{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:12px;color:var(--ink-500);font-variant-numeric:tabular-nums}
.am-meter-bar{inline-size:96px;block-size:4px;border-radius:2px;background:var(--am-garis);overflow:hidden}
.am-meter-bar i{display:block;inline-size:100%;block-size:100%;background:var(--ink-900);transform-origin:left;transform:scaleX(var(--p,1));transition:transform 360ms var(--am-ease)}
.am-tabs{position:relative;display:flex;gap:22px;border-block-end:1px solid var(--am-garis);margin-block-end:22px}
.am-tab{position:relative;border:0;background:transparent;color:var(--ink-500);font:inherit;font-weight:600;font-size:14px;padding:8px 0 12px;cursor:pointer;transition:color 140ms ease}
.am-tab:hover,.am-tab.am-on{color:var(--ink-900)}
.am-tab:focus-visible,.am-baris:focus-visible,.am-sumber a:focus-visible,.am-tabel-gulir:focus-visible{outline:2px solid var(--am-biru);outline-offset:3px;border-radius:4px}
.am-garis-aktif{position:absolute;inset-inline-start:0;inset-block-end:-1px;inline-size:100px;block-size:2px;background:var(--am-biru);transform-origin:left;transform:translateX(var(--x,0)) scaleX(var(--w,.5));transition:transform 280ms var(--am-morph)}
.am-intro p{margin:0 0 14px;color:var(--ink-500);font-size:13px;line-height:1.6;max-inline-size:700px}
.am-wrap{display:flex;flex-direction:column;gap:0;min-inline-size:0}
.am-info{font-size:12.5px;color:var(--ink-500);min-block-size:0}
.am-info:empty{display:none}
.am-thread{display:flex;flex-direction:column;gap:30px;min-block-size:120px}
.am-awal{display:flex;flex-direction:column;gap:22px;padding-block:6px 4px}
.am-awal h3{margin:0;font-size:26px;line-height:1.2;letter-spacing:-.02em;color:var(--ink-900);font-weight:700;max-inline-size:520px}
.am-awal>p{margin:-8px 0 0;color:var(--ink-500);font-size:14px;line-height:1.6;max-inline-size:560px}
.am-kelompok{display:flex;flex-direction:column}
.am-kelompok-nama{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500);padding-block-end:8px;border-block-end:1px solid var(--ink-900)}
.am-baris{display:grid;grid-template-columns:28px 1fr 20px;align-items:center;gap:10px;inline-size:100%;text-align:start;border:0;border-block-end:1px solid var(--am-garis);background:transparent;font:inherit;font-size:14px;color:var(--ink-900);padding:11px 2px;cursor:pointer;transition:background-color 140ms ease,padding 220ms var(--am-ease)}
.am-baris b{font-weight:600;font-size:11.5px;color:var(--ink-500);font-variant-numeric:tabular-nums}
.am-baris svg{inline-size:16px;block-size:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-500);transition:transform 220ms var(--am-ease),color 140ms ease}
.am-baris:active{background:var(--am-kertas)}
@media (hover:hover) and (pointer:fine){.am-baris:hover{background:var(--am-kertas);padding-inline-start:10px}.am-baris:hover svg{transform:translateX(3px);color:var(--am-biru)}}
.am-giliran{display:flex;flex-direction:column;gap:12px;animation:am-masuk 240ms var(--am-ease) both}
.am-tanya{margin:0;font-size:16px;font-weight:650;line-height:1.45;color:var(--ink-900);overflow-wrap:anywhere;padding-block-start:14px;border-block-start:1px solid var(--ink-900)}
.am-jawab{position:relative;padding-inline-start:16px;min-inline-size:0}
.am-jawab::before{content:"";position:absolute;inset-inline-start:0;inset-block:2px;inline-size:2px;border-radius:1px;background:var(--am-biru);transform-origin:top;animation:am-garis-turun 420ms var(--am-ease) both}
.am-teks{margin:0;font-size:14.5px;line-height:1.7;color:var(--ink-900);white-space:pre-wrap;overflow-wrap:anywhere}
.am-jawab.am-galat::before{background:var(--danger-600)}
.am-galat .am-teks{color:var(--danger-600)}
.am-jawab.am-muat::before{animation:am-garis-denyut 1.1s ease-in-out infinite}
.am-muat .am-teks{color:var(--ink-500)}
.am-muat .am-teks::after{content:"";display:inline-block;inline-size:.9em;block-size:.9em;margin-inline-start:6px;vertical-align:-.1em;border-radius:3px;background:var(--am-biru);animation:am-morph-bentuk 1.2s var(--am-morph) infinite}
.am-sumber{margin-block-start:14px;padding-block-start:10px;border-block-start:1px dashed var(--am-garis)}
.am-sumber-label{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#17703d;margin-block-end:6px}
.am-sumber-label::before{content:"";inline-size:8px;block-size:8px;border-radius:2px;background:#17703d}
.am-sumber ol{margin:0;padding:0;list-style:none;display:grid;gap:4px;counter-reset:s}
.am-sumber li{counter-increment:s;display:grid;grid-template-columns:20px 1fr;gap:6px;font-size:13px;line-height:1.45}
.am-sumber li::before{content:counter(s);font-size:11.5px;font-weight:700;color:var(--ink-500);font-variant-numeric:tabular-nums;padding-block-start:1px}
.am-sumber a{color:var(--am-biru);text-decoration:none;overflow-wrap:anywhere}
.am-sumber a:hover{text-decoration:underline}
.am-sumber small{display:block;color:var(--ink-500);font-size:11.5px}
.am-tabel{margin-block-start:16px;border:1px solid var(--am-garis);border-radius:10px;overflow:hidden;min-inline-size:0;background:#fff}
.am-tabel-kepala{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 14px;background:var(--am-kertas);border-block-end:1px solid var(--am-garis)}
.am-tabel-kepala strong{font-size:13.5px;color:var(--ink-900)}
.am-jml{margin-inline-start:10px;font-size:12px;color:var(--ink-500);font-variant-numeric:tabular-nums}
.am-tabel-gulir{max-block-size:380px;overflow:auto;background:linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) left center/40px 100% no-repeat local,linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) right center/40px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(12,26,58,.16),rgba(12,26,58,0)) left center/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(12,26,58,.16),rgba(12,26,58,0)) right center/12px 100% no-repeat scroll}
.am-tabel table{inline-size:100%;border-collapse:collapse;font-size:13px}
.am-tabel th{position:sticky;inset-block-start:0;background:#fff;text-align:start;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-500);padding:8px 14px;border-block-end:1px solid var(--am-garis);white-space:nowrap}
.am-tabel td{padding:9px 14px;border-block-end:1px solid var(--ink-50);color:var(--ink-900);vertical-align:top}
.am-tabel tbody tr:last-child td{border-block-end:0}
.am-kanan{text-align:end!important;font-variant-numeric:tabular-nums;white-space:nowrap}
.am-def{margin:0;padding:10px 14px;font-size:12px;line-height:1.55;color:var(--ink-500);border-block-start:1px solid var(--ink-50)}
.am-tabel-kosong{margin:0;padding:14px;font-size:13px;color:var(--ink-500)}
.am-dok{position:sticky;inset-block-end:12px;margin-block-start:26px;z-index:2}
.am-komposer{display:flex;align-items:flex-end;gap:8px;padding:8px 8px 8px 16px;background:#fff;border:1.5px solid var(--ink-900);border-radius:16px;box-shadow:0 10px 30px -12px rgba(12,26,58,.28);transition:border-radius 280ms var(--am-morph),box-shadow 200ms ease,border-color 140ms ease}
.am-komposer:focus-within{border-color:var(--am-biru);box-shadow:0 10px 30px -12px rgba(29,102,228,.4)}
.am-komposer textarea{flex:1;min-inline-size:0;resize:none;border:0;outline:0;font:inherit;font-size:14.5px;line-height:1.5;color:var(--ink-900);background:transparent;block-size:28px;max-block-size:120px;padding:5px 0}
.am-kirim{flex:none;inline-size:38px;block-size:38px;border:0;border-radius:11px;background:var(--ink-900);color:#fff;display:grid;place-items:center;cursor:pointer;transition:border-radius 280ms var(--am-morph),background-color 160ms ease,transform 140ms var(--am-ease)}
.am-kirim svg{inline-size:18px;block-size:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.am-kirim:active{transform:scale(.94)}
.am-kirim:disabled{background:var(--ink-100);color:var(--ink-500);cursor:default}
.am.am-sibuk .am-kirim{border-radius:50%;background:var(--am-biru);color:#fff}
.am-kaki{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-block-start:10px}
.am-baru{border:0;background:transparent;color:var(--ink-500);font:inherit;font-size:12.5px;padding:4px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.am-baru:hover{color:var(--ink-900)}
.am-catatan{margin:0;font-size:11.5px;line-height:1.55;color:var(--ink-500);max-inline-size:640px}
.am-sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.am-aksi{display:flex;gap:6px;flex-wrap:wrap}
.am-pane{animation:am-pane 260ms var(--am-ease) both}
.am .card{border-radius:12px;border-color:var(--am-garis);box-shadow:none}
@keyframes am-masuk{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes am-pane{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes am-garis-turun{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes am-garis-denyut{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes am-morph-bentuk{0%,100%{border-radius:3px;transform:rotate(0)}50%{border-radius:50%;transform:rotate(90deg) scale(.8)}}
@media (prefers-reduced-motion:reduce){.am *,.am *::before,.am *::after{animation:none!important;transition-duration:1ms!important}}
@media (max-width:640px){.am-awal h3{font-size:22px}.am-dok{inset-block-end:8px}.am-meter{align-items:flex-start;flex-basis:100%;flex-direction:row;align-items:center}.am-aksi .btn{flex:1 1 auto}.am-tabs{gap:18px}}

/* AKAMSI BK: pertanyaan surat satu per satu */
.am .am-form{padding:18px 20px;margin-block-end:16px;border-inline-start:3px solid var(--am-biru)}
.am-form-atas{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-block-end:10px}
.am-form-label{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.am-form-hitung{font-size:12px;color:var(--ink-500);font-variant-numeric:tabular-nums}
.am-form-segmen{display:flex;gap:4px;margin-block-end:16px}
.am-form-segmen i{flex:1;block-size:3px;border-radius:2px;background:var(--am-garis);position:relative;overflow:hidden}
.am-form-segmen i::after{content:"";position:absolute;inset:0;background:var(--am-biru);transform-origin:left;transform:scaleX(0);transition:transform 280ms var(--am-morph)}
.am-form-segmen i.am-selesai::after,.am-form-segmen i.am-kini::after{transform:scaleX(1)}
.am-form-segmen i.am-kini::after{background:var(--ink-900)}
.am-form-isi{display:flex;flex-direction:column;gap:10px}
.am-form-isi.am-maju{animation:am-langkah-maju 220ms var(--am-ease) both}
.am-form-isi.am-mundur{animation:am-langkah-mundur 220ms var(--am-ease) both}
.am-form-tanya{font-size:17px;font-weight:650;line-height:1.45;color:var(--ink-900)}
.am-form-input{inline-size:100%;padding:11px 12px;border:1.5px solid var(--am-garis);border-radius:10px;font:inherit;font-size:15px;color:var(--ink-900);background:#fff;transition:border-color 140ms ease}
.am-form-input:focus{outline:0;border-color:var(--am-biru)}
.am-form-input.am-salah{border-color:var(--danger-600);animation:am-geser 300ms var(--am-ease)}
.am-form-baca{min-block-size:18px;font-size:13px;font-weight:600;color:var(--ink-700)}
.am-form-aksi{display:flex;align-items:center;gap:8px;margin-block-start:18px;flex-wrap:wrap}
.am-form-ruang{flex:1}
@keyframes am-langkah-maju{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes am-langkah-mundur{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes am-geser{0%,100%{transform:none}30%{transform:translateX(-5px)}60%{transform:translateX(4px)}}

/* ===== Chip permintaan surat (topbar, Admin/TU/Kesiswaan) ===== */
.rq-chip { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; padding: 6px 10px 6px 8px; border: 1px solid #f3c9c4; background: #fff4f2; color: #8f2217; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; opacity: 0; transform: translateY(-4px) scale(0.96); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), background 150ms ease, border-color 150ms ease; }
.rq-chip.hidden { display: none; }
.rq-chip.on { opacity: 1; transform: none; }
.rq-chip ~ .notif-bell { margin-left: 0; }
.rq-chip:active { transform: scale(0.97); }
.rq-chip:focus-visible { outline: 2px solid #1d66e4; outline-offset: 2px; }
.rq-chip-ikon { position: relative; display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; background: #d33a2c; color: #fff; }
.rq-chip-titik { position: absolute; top: -1px; right: -1px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #d33a2c; }
.rq-chip-teks b { font-weight: 800; font-variant-numeric: tabular-nums; }
.rq-chip-panah { font-size: 17px; line-height: 1; opacity: .6; transition: transform 160ms var(--ease-out); }
.rq-chip.baru .rq-chip-ikon { animation: rqDenyut 700ms var(--ease-out) 1; }
@keyframes rqDenyut { 0% { box-shadow: 0 0 0 0 rgba(211,58,44,.45); } 100% { box-shadow: 0 0 0 12px rgba(211,58,44,0); } }
@media (hover: hover) and (pointer: fine) { .rq-chip:hover { background: #ffe9e5; border-color: #ecaea7; } .rq-chip:hover .rq-chip-panah { transform: translateX(2px); } }
@media (max-width: 720px) { .rq-chip-teks span { display: none; } .rq-chip { padding-right: 10px; } .rq-chip-panah { display: none; } }
@media (prefers-reduced-motion: reduce) { .rq-chip { transform: none; transition: opacity 150ms ease; } .rq-chip.baru .rq-chip-ikon { animation: none; } }
.nav-group-label .pgm-badge { margin-left: auto; }

/* ===== Peminjaman masal: tempo + pengingat ===== */
.pmm-tempo-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 10px; }
.pmm-opsi { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--ink-100); border-radius: var(--radius-md); cursor: pointer; transition: border-color 150ms ease, background 150ms ease; }
.pmm-opsi:has(input:checked) { border-color: #1d66e4; background: #f2f7ff; }
.pmm-opsi small { display: block; color: var(--ink-500); font-size: 12px; margin-top: 2px; }
.pmm-tempo-tgl { display: none; margin-top: 10px; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.pmm-tempo-tgl.on { display: flex; animation: pgrMasuk 180ms var(--ease-out); }
.pmm-tempo-tgl .field { margin: 0; }
.pmm-preset { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 2px; }
.pgr-kartu { border: 1px solid #f3d9a6; background: #fffaf0; border-radius: var(--radius-lg); padding: 12px 14px; margin-bottom: 14px; animation: pgrMasuk 220ms var(--ease-out); }
.pgr-judul { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #7a4b00; margin-bottom: 8px; }
.pgr-titik { width: 8px; height: 8px; border-radius: 50%; background: #e08a00; }
.pgr-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 240px; overflow: auto; }
.pgr-baris { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--ink-100); border-radius: 10px; padding: 8px 10px; }
.pgr-baris.terlambat { border-color: #f3c9c4; }
.pgr-hari { flex: none; min-width: 84px; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; text-align: center; background: #fff1d6; color: #7a4b00; }
.pgr-baris.terlambat .pgr-hari { background: #ffe1dd; color: #8f2217; }
.pgr-isi { flex: 1; min-width: 0; font-size: 13px; }
.pgr-isi small { display: block; color: var(--ink-500); font-size: 12px; }
.pgr-bel { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--ink-100); }
.pgr-bel-judul { font-size: 12px; font-weight: 700; color: var(--ink-500); margin-bottom: 6px; }
.pgr-bel-item { display: block; width: 100%; text-align: left; border: 0; background: #fffaf0; border-radius: 8px; padding: 8px 10px; margin-bottom: 4px; font: inherit; font-size: 12.5px; cursor: pointer; transition: transform 120ms var(--ease-out); }
.pgr-bel-item.terlambat { background: #fff4f2; }
.pgr-bel-item:active { transform: scale(0.98); }
.pgr-bel-item small { display: block; color: var(--ink-500); }
@keyframes pgrMasuk { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pgr-kartu, .pmm-tempo-tgl.on { animation: none; } }
.rq-chip-ikon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Ujian (menu Akademik) ===== */
.uj-muat{padding:24px;color:var(--ink-500)}
.uj-meta{color:var(--ink-500);font-size:13px}
.uj-kecil{font-size:12px}
.uj-tip{max-inline-size:760px;margin:12px 0}
.uj-wrap{overflow-x:auto;border:1px solid var(--ink-100);border-radius:var(--radius-md);background:var(--card)}
.uj-tbl{inline-size:100%;border-collapse:collapse;font-size:14px}
.uj-tbl th{padding:10px 12px;text-align:start;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ink-500);background:var(--ink-50);border-block-end:1px solid var(--ink-100);white-space:nowrap}
.uj-tbl td{padding:9px 12px;border-block-end:1px solid var(--ink-50);vertical-align:middle}
.uj-tbl tbody tr:last-child td{border-block-end:0}
.uj-tbl .uj-n{text-align:center}
.uj-klik{cursor:pointer;transition:background 120ms ease}
.uj-klik:hover{background:var(--gold-50)}
.uj-aksi{text-align:end;white-space:nowrap}
.uj-in{inline-size:84px;padding:8px;border:1.5px solid var(--ink-100);border-radius:8px;font:inherit;text-align:center;background:#fff;color:var(--ink-900)}
.uj-in:focus,.uj-sel:focus{outline:none;border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(35,115,244,.16)}
.uj-in:disabled,.uj-sel:disabled{background:var(--ink-50);color:var(--ink-500)}
.uj-sel{inline-size:100%;min-inline-size:210px;padding:8px 10px;border:1.5px solid var(--ink-100);border-radius:8px;font:inherit;background:#fff;color:var(--ink-900)}
.uj-ok{color:#14572f;font-weight:600}
.uj-bad{color:#a12626;font-weight:600}
.uj-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.uj-foot{margin-block-start:16px}
.uj-dua{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
.uj-kunci{background:#e6f6ec;color:#14572f;border-radius:var(--radius-md);padding:10px 14px;margin-block-end:12px;font-size:14px}
.uj-awas{background:#fff4d6;color:#6b4a00;border-radius:var(--radius-md);padding:10px 14px;margin-block:12px;font-size:14px}
.uj-cek{list-style:none;margin:12px 0;padding:0;display:grid;gap:6px;font-size:15px}
.uj-h3{margin:22px 0 8px;font-size:16px}
.uj-det{border:1px solid var(--ink-100);border-radius:var(--radius-md);background:#fff;margin-block-end:8px;padding:2px 14px}
.uj-det summary{cursor:pointer;padding:10px 0;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.uj-kel{padding-block:6px 10px}
.uj-kel-h{font-weight:700;font-size:13px;margin-block-end:4px}
.uj-kel ol{margin:0;padding-inline-start:24px;columns:2;column-gap:28px;font-size:14px}
.uj-tabs{margin-block-end:4px}
.uj-tabs .ag-tab:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:900px){.uj-dua{grid-template-columns:1fr}.uj-kel ol{columns:1}}
@media (prefers-reduced-motion:reduce){.uj-klik{transition:none}}

/* Ujian: jadwal & cetak */
.uj-form2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:10px 0 14px}
.uj-rad{display:flex;align-items:center;gap:8px;font-weight:400;margin:4px 0;font-size:14px;color:var(--ink-700)}
.uj-jad .uj-in-w{width:100%;min-width:118px}
.uj-jad .uj-in-m{width:100%;min-width:150px;text-align:left}
.uj-seg{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--ink-100);border-radius:var(--radius-md);background:#fff;margin-bottom:8px}
.uj-seg select,.uj-seg input[type=text]{padding:8px;border:1.5px solid var(--ink-100);border-radius:8px;font:inherit;background:#fff;color:var(--ink-900)}
.uj-seg .uj-in{inline-size:72px}
.uj-segno{inline-size:24px;block-size:24px;border-radius:50%;background:var(--ink-100);color:var(--ink-700);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.uj-contoh{padding:10px 12px;margin:8px 0;border-radius:var(--radius-md);background:var(--ink-50);font-size:14px;line-height:1.7}
.uj-cek-baris{margin:6px 0 14px;font-size:14px;line-height:1.7}

/* Ujian: pilihan radio/centang rapat dengan labelnya */
.field label.uj-rad{display:flex;align-items:center;gap:8px;font-weight:400;margin:4px 0;cursor:pointer}
.field .uj-rad input{width:auto;padding:0;margin:0;flex:none}
.uj-mini{display:flex;flex-direction:column;gap:2px;font-size:12px}
.uj-mini span{font-weight:500;color:var(--text-muted,#667)}
.uj-mini input.uj-in{width:90px}
.uj-mini.uj-lebar{min-width:260px;flex:1}
.uj-seg-bantu{margin:4px 0 0 30px}
.uj-seg{display:block}
.uj-seg-baris{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.uj-seg .uj-segno{align-self:center}
/* Ekstrakurikuler */
.ek-tgl{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;margin:4px 0 12px}
.ek-tgl input[type=date]{max-width:210px}
.ek-st{display:inline-flex;border:1.5px solid var(--ink-100);border-radius:10px;overflow:hidden}
.ek-st button{border:0;background:#fff;padding:8px 14px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink-700);min-height:38px}
.ek-st button+button{border-left:1.5px solid var(--ink-100)}
.ek-st button.on{background:#e6f4ea;color:#14532d;font-weight:600}
.ek-st button.on.t{background:#fdecea;color:#7f1d1d}
.ek-st button:disabled{cursor:default;opacity:.85}
.ek-tambah{border:1px solid var(--ink-100);border-radius:var(--radius-md);padding:12px 14px;margin-bottom:16px;background:#fff}

/* Ekskul: pendaftaran siswa & pengaturan */
.uj-kotak{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--ink-100,#e3e8f2);border-radius:12px;flex-wrap:wrap}
.ek-pil{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--ink-100,#e3e8f2);border-radius:12px;margin-bottom:8px;cursor:pointer;background:#fff}
.ek-pil.on{background:#f1f7ff;border-color:#9bbcf0}
.ek-pil input{margin-top:3px;width:18px;height:18px}
.uj-ok{color:#1b6b46;font-weight:600}