/* Office App — ungu #511E84, latar ungu muda #F4EFFA.
   Palet emas sengaja TIDAK dipakai di aplikasi ini.
   Semua warna didefinisikan di :root dan HANYA terang. Blok
   @media (prefers-color-scheme: dark) sengaja DIHAPUS: tampilan harus
   sama di semua HP, tidak ikut pengaturan mode gelap perangkat. */

:root {
  --ungu:        #511E84;
  --ungu-terang: #6d34a8;
  --ungu-gelap:  #3c1563;
  --latar:       #F4EFFA;
  --permukaan:   #ffffff;
  --teks:        #221733;
  --teks-redup:  #6b6078;
  --garis:       #e3d8f0;
  --sb-latar:      #ffffff;
  --sb-teks:       #2f2740;
  --sb-redup:      #8b8199;
  --sb-judul:      #9a92a8;
  --sb-aktif-bg:   #F4EFFA;
  --sb-aktif-teks: #511E84;
  --sb-hover-bg:   #f6f4f9;
  --sb-garis:      #e6e2ec;
  --sb-avatar-bg:  #F4EFFA;
  --sb-avatar-tks: #511E84;
  --galat:       #b3261e;
  --basi-bg:     #fdf3e3;
  --basi-teks:   #8a5a12;
  --basi-garis:  #f0dfc0;

  /* Warna "perhatian" untuk lencana jumlah. Belum ada token bernama ini
     sebelumnya; nilainya diambil dari keluarga amber --basi-* yang sudah
     dipakai penanda "sebagian"/"data belum tersegarkan", supaya satu bahasa
     visual. Sengaja BUKAN merah menyala. */
  --perhatian-bg:   #fdf3e3;
  --perhatian-teks: #8a5a12;
  --perhatian-garis:#e8cf9e;
  --radius: 10px;
  --lebar-sb: 240px;
  --tinggi-bilah: 56px;   /* tinggi bilah atas di HP */

  /* Aplikasi ini SELALU terang, mengabaikan mode gelap perangkat.
     `color-scheme: light` yang membuat kontrol bawaan browser
     (dropdown <select>, <input>, scrollbar, isian otomatis) ikut
     terang — CSS warna saja tidak cukup untuk itu. */
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  color-scheme: light;
  background: var(--latar);
  color: var(--teks);
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }

/* ---------------------------------------------------------- sidebar */
.sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--lebar-sb);
  background: var(--sb-latar);
  color: var(--sb-teks);
  border-right: 1px solid var(--sb-garis);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 40;
}
.sidebar-kepala {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 16px 14px;
}
.logo-kotak {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--ungu);
  display: grid; place-items: center;
  font-weight: 700; color: #fff; flex: none;
}
.logo-kotak.besar { width: 44px; height: 44px; font-size: 20px; background: var(--ungu); }
.logo-teks { font-weight: 650; font-size: 16px; color: var(--sb-teks); letter-spacing: .2px; }

.sidebar-menu { flex: 1; overflow-y: auto; padding: 4px 10px 16px; }

.menu-judul {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .9px;
  color: var(--sb-judul); margin: 16px 8px 6px; font-weight: 600;
}
.menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--sb-teks); text-decoration: none;
  font-size: 13.5px; margin-bottom: 1px;
}
.menu-label { flex: 1; min-width: 0; }
a.menu-item:hover, summary.menu-item:hover { background: var(--sb-hover-bg); }
.menu-item.aktif { background: var(--sb-aktif-bg); color: var(--sb-aktif-teks); font-weight: 600; }
.menu-item.anak { padding-left: 22px; font-size: 13px; }
.menu-item.nanti { color: var(--sb-redup); cursor: default; }
.ikon-luar { font-size: 11px; color: var(--sb-redup); }
.badge {
  font-size: 10px; padding: 1px 6px; border-radius: 999px;
  background: var(--sb-hover-bg); border: 1px solid var(--sb-garis); color: var(--sb-redup);
}

.menu-grup summary { list-style: none; cursor: pointer; }
.menu-grup summary::-webkit-details-marker { display: none; }
.panah { font-size: 10px; color: var(--sb-redup); transition: transform .15s; }
.menu-grup[open] .panah { transform: rotate(180deg); }

.sidebar-kaki {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; border-top: 1px solid var(--sb-garis);
}
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--sb-avatar-bg); color: var(--sb-avatar-tks);
  display: grid; place-items: center; font-weight: 650; font-size: 13px;
}
.kaki-teks { flex: 1; min-width: 0; }
.kaki-nama {
  font-size: 12.5px; color: var(--sb-teks); font-weight: 550;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kaki-role { font-size: 11px; color: var(--sb-redup); }
.kaki-keluar { color: var(--sb-redup); text-decoration: none; font-size: 15px; padding: 4px; }
.kaki-keluar:hover { color: var(--sb-aktif-teks); }

/* -------------------------------------------------------------- isi */
.isi {
  margin-left: var(--lebar-sb);
  padding: 26px 26px 40px;
  padding-top: calc(26px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
}
.halaman-kepala { margin-bottom: 18px; }
.halaman-kepala h1 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.2px; }
.halaman-sub { margin: 4px 0 0; color: var(--teks-redup); font-size: 13px; }

.kartu {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}
.kartu-judul { margin: 0 0 12px; font-size: 14px; font-weight: 650; }
.kartu.kosong { display: grid; place-items: center; min-height: 190px; }
.kosong-teks { color: var(--teks-redup); margin: 0; }

/* ------------------------------------------------------------ tabel */
.tabel-bungkus { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabel th, .tabel td {
  text-align: left; padding: 9px 10px;
  border-bottom: 1px solid var(--garis); white-space: nowrap;
}
.tabel th { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--teks-redup); font-weight: 600; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel .kanan { text-align: right; }
.tabel tr.redup td { opacity: .5; }
.redup-teks { color: var(--teks-redup); font-size: 12px; }

.pil {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--latar); color: var(--ungu); border: 1px solid var(--garis);
}
.pil.admin { background: var(--ungu); color: #fff; border-color: var(--ungu); }

/* ------------------------------------------------------------ form */
.baris-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.baris-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--teks-redup); }
input, select {
  font: inherit; padding: 7px 10px;
  border: 1px solid var(--garis); border-radius: 8px;
  background: var(--permukaan); color: var(--teks); min-width: 180px;
}
input:focus, select:focus { outline: 2px solid var(--ungu); outline-offset: 1px; border-color: var(--ungu); }

.tombol-utama {
  display: inline-block; background: var(--ungu); color: #fff;
  border: 0; border-radius: 8px; padding: 10px 18px;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.tombol-utama:hover { background: var(--ungu-terang); }
.tombol-utama.kecil { padding: 8px 14px; }
.tombol-halus {
  background: transparent; color: var(--ungu);
  border: 1px solid var(--garis); border-radius: 7px;
  padding: 5px 11px; font: inherit; font-size: 12px; cursor: pointer;
}
.tombol-halus:hover { border-color: var(--ungu); background: var(--latar); }

/* ------------------------------------------------- halaman tunggal */
.laman-tunggal { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.kartu-tengah {
  background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: 14px; padding: 34px 30px; max-width: 400px; width: 100%;
  text-align: center;
}
.kartu-tengah h1 { font-size: 20px; margin: 14px 0 6px; }
.kartu-tengah .sub { color: var(--teks-redup); font-size: 13px; margin: 0 0 16px; }
.galat { color: var(--galat); font-size: 13px; margin: 0 0 14px; }

/* ----------------------------------------------------- tombol menu */
/* Tombol menu TIDAK lagi mengambang di atas isi halaman. Dulu ia
   `position: fixed` di pojok kiri-atas, jadi judul halaman ("Ringkasan")
   bisa tertimpa. Sekarang ia tinggal di dalam .bilah-hp — satu baris
   bersama nama aplikasi — dan isi halaman didorong ke bawah setinggi
   bilah itu, sehingga keduanya TIDAK MUNGKIN bertabrakan di lebar mana pun.
   Di desktop (>900px) bilah ini tidak ada sama sekali. */
.bilah-hp {
  display: none;                      /* baru muncul di <= 900px */
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  align-items: center; gap: 12px;
  height: calc(var(--tinggi-bilah) + env(safe-area-inset-top, 0px));
  padding: 0 12px;
  padding-top: env(safe-area-inset-top, 0px);   /* aman dari notch/Dynamic Island */
  background: var(--sb-latar);
  border-bottom: 1px solid var(--sb-garis);
}
.bilah-judul {
  font-size: 15px; font-weight: 650; color: var(--sb-teks);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tombol-menu {
  display: none;                      /* baru muncul di <= 900px */
  flex: none; width: 40px; height: 40px;
  border: 0; border-radius: 9px;
  background: var(--ungu); color: #fff; font-size: 17px; cursor: pointer;
}
.tirai { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 35; }

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .22s ease; }
  .sidebar.terbuka { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.22); }
  .bilah-hp { display: flex; }
  .tombol-menu { display: block; }
  /* Isi halaman mulai DI BAWAH bilah: tinggi bilah + safe-area + jarak nafas. */
  .isi {
    margin-left: 0;
    padding: 20px 16px 36px;
    padding-top: calc(var(--tinggi-bilah) + 18px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px));
  }
  input, select { min-width: 0; width: 100%; }
  .baris-form label { width: 100%; }
}

/* ======================================================= Ringkasan */
.kepala-baris {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.alat-periode { display: flex; gap: 8px; align-items: center; }
.alat-periode select { min-width: 150px; }

.grid-3 {
  display: grid; gap: 16px; margin-bottom: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.judul-bagian {
  font-size: 12px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--teks-redup); margin: 22px 0 12px; font-weight: 600;
}

.kartu-atas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
}
.kartu-atas .kartu-judul { margin: 0; }
.kartu-besar .angka-besar {
  margin: 0 0 14px; font-size: 27px; font-weight: 650;
  letter-spacing: -.5px; color: var(--ungu); line-height: 1.15;
}

.rincian { margin: 0; }
.rincian > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--garis);
}
.rincian > div:last-child { border-bottom: 0; }
.rincian > div.terpisah { border-top: 1px dashed var(--garis); margin-top: 4px; opacity: .78; }
.rincian dt { color: var(--teks-redup); font-size: 12.5px; }
.rincian dd { margin: 0; font-size: 13px; font-weight: 600; text-align: right; }
.nilai { cursor: help; border-bottom: 1px dotted transparent; }
.nilai:hover { border-bottom-color: var(--garis); }

.mini {
  font-size: 10px; padding: 1px 6px; border-radius: 999px; margin-left: 4px;
  background: var(--latar); color: var(--teks-redup);
  border: 1px solid var(--garis); cursor: help; white-space: nowrap;
}
.tanda-basi {
  font-size: 10px; padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  background: var(--basi-bg); color: var(--basi-teks); border: 1px solid var(--basi-garis);
  cursor: help;
}
.tombol-halus.lebar { display: block; width: 100%; margin-top: 14px; text-align: center; text-decoration: none; }

@media (max-width: 1100px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .grid-3 { grid-template-columns: 1fr; }
                             .alat-periode { width: 100%; }
                             .alat-periode select { flex: 1; } }
.kartu-tanda { display: inline-flex; gap: 5px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.tanda-sebagian {
  font-size: 10px; padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  background: var(--basi-bg); color: var(--basi-teks); border: 1px solid var(--basi-garis);
  cursor: help;
}

/* ============================================ lencana "menunggu persetujuan" */
/* Lencana angka di sidebar. Tidak mengubah tinggi baris menu: ia hanya
   menyisip di antara label dan ikon tautan-luar, dan boleh menyusut. */
.lencana {
  flex: none;
  min-width: 20px; padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.5;
  text-align: center;
  background: var(--perhatian-bg);
  color: var(--perhatian-teks);
  border: 1px solid var(--perhatian-garis);
}

/* Blok "Menunggu persetujuan" di halaman Ringkasan. */
.bagian-sub { margin: -6px 0 10px; color: var(--teks-redup); font-size: 12px; }
.kartu-persetujuan { padding: 6px 18px; }
.baris-persetujuan {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--garis);
}
.baris-persetujuan:last-child { border-bottom: 0; }
.baris-persetujuan:hover { color: var(--ungu); }
.bp-jenis  { flex: 1 1 auto; min-width: 0; font-weight: 550;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-jumlah {
  flex: none; min-width: 26px; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; text-align: center;
  background: var(--perhatian-bg); color: var(--perhatian-teks);
  border: 1px solid var(--perhatian-garis);
}
.bp-umur { flex: none; color: var(--teks-redup); font-size: 12.5px; }
.bp-asal { flex: none; color: var(--teks-redup); font-size: 12px; }
.bp-basi {
  font-size: 10px; padding: 1px 6px; border-radius: 999px; white-space: nowrap;
  background: var(--basi-bg); color: var(--basi-teks); border: 1px solid var(--basi-garis);
}

/* HP: umur turun ke baris kedua supaya nama jenis tidak terpotong. */
@media (max-width: 560px) {
  .baris-persetujuan { flex-wrap: wrap; gap: 8px; }
  .bp-jenis { flex: 1 1 100%; white-space: normal; }
  .bp-umur, .bp-asal { font-size: 12px; }
}