/* ====================================================================
   SPPG — KERANGKA

   Dimuat SETELAH app.css dan SEBELUM berkas tema. Isinya hanya struktur:
   bagaimana bilah sisi tersusun, bagaimana ikon berukuran, bagaimana
   bilah atas tersusun. Warna, huruf, dan kerapatan ditentukan oleh berkas
   tema, bukan di sini.

   Berkas inilah SATU-SATUNYA sumber kebenaran untuk tata letak kerangka
   (bilah atas, bilah sisi, dan laci ponsel). Satu kelas keadaan dipakai:

     body.sisi-buka → di ponsel, laci navigasi tergeser masuk

   Bilah sisi di layar besar SELALU terbuka penuh (tidak lagi bisa
   diciutkan), dan lebarnya dibuat cukup untuk memuat label menu terpanjang.
   ================================================================== */

:root {
  --rel-lebar: 320px;     /* lebar bilah sisi di layar besar — cukup untuk label terpanjang */
  --atas-tinggi: 60px;
  --nav-bawah-tinggi: 64px;   /* tinggi bilah navigasi bawah di ponsel */
  --alih: 220ms cubic-bezier(.32, .72, 0, 1);
}

/* ------------------------------------------------------------------ */
/* Rangka                                                              */
/* ------------------------------------------------------------------ */

.rangka {
  grid-template-columns: var(--rel-lebar) minmax(0, 1fr);
  grid-template-areas: "sisi atas" "sisi halaman";
}

@media (prefers-reduced-motion: reduce) {
  .rangka, .sisi, .menu__butir, .nav-bawah__pil { transition: none !important; }
  .dialog { animation: none !important; }
}

/* ------------------------------------------------------------------ */
/* Ikon                                                                */
/* ------------------------------------------------------------------ */

/* Ikon berukuran mengikuti huruf induknya, sehingga satu nama ikon dapat
   dipakai di tombol besar maupun label kecil tanpa penyesuaian. */
.ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -.18em;
}
.ikon svg { width: 100%; height: 100%; display: block; }

/* Bila pustaka ikon gagal dimuat, tempatnya menjadi titik kecil, bukan
   kotak kosong yang menggeser tata letak. */
.ikon--ganti::before {
  content: "";
  width: .38em; height: .38em;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
}

/* ------------------------------------------------------------------ */
/* Bilah atas                                                          */
/* ------------------------------------------------------------------ */

.atas {
  grid-area: atas;
  display: flex;
  align-items: center;
  height: var(--atas-tinggi);
  padding: 0 16px 0 20px;
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Pembungkus isi bilah atas: satu baris mendatar. Judul mengambil ruang
   sisa dan kelompok kanan menempel ke tepi kanan. */
.atas__isi {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

/* Tombol buka laci — hanya muncul di ponsel. */
.atas__menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  transition: background var(--alih), border-color var(--alih);
}

.atas__judul { flex: 1; min-width: 0; }

.atas h1 {
  font-size: 19px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Kelompok kendali di kanan bilah atas ---- */

.atas__kanan {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* Tombol ganti tema: diberi ikon DAN teks "Tema" agar jelas fungsinya,
   bukan sekadar kotak. Memakai variabel tema sehingga menyesuaikan diri
   di ketiga tema. */
.atas__tombol-tema {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 0 12px;
  flex: none;
  border: 1px solid var(--abu-200);
  border-radius: 10px;
  background: var(--kertas);
  color: var(--abu-700);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--alih), color var(--alih), border-color var(--alih);
}
.atas__tombol-tema .ikon { font-size: 17px; color: var(--daun-500); }
.atas__tombol-tema:hover {
  background: var(--daun-100);
  color: var(--daun-700);
  border-color: var(--daun-100);
}
.atas__tombol-tema:hover .ikon { color: var(--daun-700); }

/* Penanda koneksi tidak boleh ikut memanjang atau menyusut. */
.koneksi { flex: none; }

/* Tombol profil ringkas. */
.atas__profil-tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

/* Bulatan inisial di bilah atas dibuat berwarna aksen (bukan mengikuti
   gaya bulatan di bilah sisi yang gelap), agar tetap terlihat di atas
   bilah atas yang terang. Selektor sengaja lebih spesifik agar menang
   atas aturan .pengguna__awal di berkas tema. */
.pengguna__awal--kecil {
  width: 34px; height: 34px;
  font-size: 12px;
}

/* Bulatan yang memuat foto: gambar dipasang sebagai latar yang menutup
   penuh, sehingga foto potret maupun lanskap sama-sama terpotong rapi
   menjadi lingkaran, bukan gepeng. */
.pengguna__awal--foto {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
}
.atas__profil-tombol .pengguna__awal--kecil {
  background: var(--daun-500);
  color: #fff;
}

/* ------------------------------------------------------------------ */
/* Bilah sisi                                                          */
/* ------------------------------------------------------------------ */

.sisi {
  grid-area: sisi;
  display: flex;
  flex-direction: column;
  overflow: hidden;         /* teks yang terpotong tidak boleh menggulir */
  z-index: 30;
}

.sisi__merek {
  display: flex;
  align-items: center;
  height: var(--atas-tinggi);
  padding: 0 14px 0 16px;
  flex: none;
  overflow: hidden;
}

.sisi__tautan {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.sisi__tanda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}

.sisi__nama { display: block; min-width: 0; line-height: 1.2; overflow: hidden; }
.sisi__nama strong { display: block; font-size: 14.5px; letter-spacing: .02em; white-space: nowrap; }
.sisi__nama small { display: block; font-size: 11px; white-space: nowrap; }

.menu {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 12px 14px;
  scrollbar-width: thin;
}

/* Menu rata tanpa pengelompokan. Bila suatu saat pembungkus kelompok
   dipakai lagi, jaraknya tetap wajar. */
.menu__kelompok { margin: 0; }

.menu__butir {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 12px;
  margin-bottom: 3px;
  border-radius: 10px;
  border-left: 0;                 /* menimpa penanda garis di app.css */
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  position: relative;
  transition: background var(--alih), color var(--alih);
}

.menu__ikon { font-size: 19px; flex: none; }

/* Label menu kini selalu tampil penuh (bilah sisi cukup lebar). Bila masih
   ada yang terlalu panjang, dipotong dengan elipsis, dan nama lengkapnya
   tetap muncul sebagai tooltip saat kursor diarahkan (atribut title). */
.menu__teks {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Kaki bilah sisi ---- */

.sisi__kaki { flex: none; padding: 10px; }

.pengguna {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 10px;
  overflow: hidden;
}

.pengguna__awal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  font-size: 12.5px;
  font-weight: 700;
}

.pengguna__teks { min-width: 0; line-height: 1.3; overflow: hidden; }
.pengguna__teks strong {
  display: block; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pengguna__teks small {
  display: block; font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sisi__keluar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}
.sisi__keluar .ikon { font-size: 17px; flex: none; }

/* ------------------------------------------------------------------ */
/* Halaman                                                             */
/* ------------------------------------------------------------------ */

.halaman {
  grid-area: halaman;
  min-width: 0;                   /* tanpa ini tabel lebar memaksa rangka melebar */
  overflow-x: hidden;
  padding: 22px 24px 40px;
}

/* Isi halaman memakai seluruh lebar yang tersedia.

   Sebelumnya SELURUH anak .halaman dibatasi 1180px. Di jendela PWA yang
   sempit batas itu tidak pernah tercapai sehingga tampak pas, tetapi di
   browser layar lebar kartu dan tabel berhenti di 1180px dan menyisakan
   pita kosong di sisi kanan.

   Yang benar-benar perlu dibatasi hanyalah baris teks panjang — mata sulit
   mengikuti baris yang terlalu lebar. Kartu, petak, tabel, dan bilah alat
   dibiarkan memakai ruangnya sendiri. */
.halaman > p,
.halaman > .cacah,
.halaman > h2,
.halaman > h3 { max-width: 90ch; }

/* ------------------------------------------------------------------ */
/* Navigasi bawah (ponsel)                                             */
/* ------------------------------------------------------------------ */

/*
 * Lima slot: Dashboard · KPM · [+ Input] · Riwayat · Lainnya.
 *
 * Hanya STRUKTUR yang ditulis di sini. Warnanya sudah ada di berkas tema
 * (`.nav-bawah`, `.nav-bawah__butir--aktif`, `.nav-bawah__pil`) — aturan
 * itu sudah lama tertulis di sana tetapi belum pernah punya markah.
 * Jadi jangan menaruh warna di berkas ini: tema yang berhak menentukan.
 *
 * Disembunyikan di layar besar. Di sana bilah sisi yang bertugas, dan dua
 * navigasi sekaligus hanya membingungkan.
 */
.nav-bawah { display: none; }

@media (max-width: 860px) {
  .nav-bawah {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 45;
    display: flex;
    align-items: stretch;
    height: calc(var(--nav-bawah-tinggi) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }

  .nav-bawah__butir {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    min-width: 0;
    padding: 6px 2px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Label dipotong, bukan dibiarkan melipat: dua baris membuat tinggi
     antar-slot tidak sama dan barisnya bergoyang saat menu berganti. */
  .nav-bawah__teks {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Kantong ikon. Tema mengisi latarnya saat slot aktif; di keadaan biasa
     ia tembus pandang sehingga tidak ada kotak menggantung. */
  .nav-bawah__pil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 26px;
    border-radius: 13px;
    font-size: 18px;
    transition: background var(--alih), color var(--alih);
  }

  .nav-bawah__butir--aktif { font-weight: 600; }

  /* ---- Tombol + Input ---- */

  /*
   * Slotnya tetap selebar slot lain supaya kelima sasaran sentuh sama besar;
   * yang menonjol hanya bulatannya. `margin-top` negatif mengangkatnya keluar
   * dari bilah, dan cincin sewarna bilah memisahkannya dari garis tepi.
   */
  .nav-bawah__fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-top: -22px;
    border-radius: 50%;
    font-size: 21px;
    background: var(--tinta);
    color: var(--kertas);
    /* Cincin sewarna bilah, bukan garis berwarna: fungsinya memisahkan
       bulatan dari garis tepi bilah yang dilewatinya, bukan menghias. */
    box-shadow: 0 0 0 3px var(--kertas), 0 4px 10px rgba(22, 32, 28, .28);
  }
  .nav-bawah__butir--fab .nav-bawah__teks { margin-top: 2px; }

  /* Pemberitahuan naik ke atas bilah, bukan tertimbun di belakangnya. */
  .kabar-wadah { bottom: calc(var(--nav-bawah-tinggi) + env(safe-area-inset-bottom) + 14px); }

}

/* ------------------------------------------------------------------ */
/* Ponsel — laci navigasi                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 860px) {
  .rangka {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "atas" "halaman";
  }

  .atas { padding: 0 16px 0 18px; }
  .atas h1 { font-size: 17px; }

  /*
   * LACI NAVIGASI PONSEL DIPENSIUNKAN.
   *
   * Tugasnya diambil alih navigasi bawah. Ketiganya disembunyikan, bukan
   * dihapus: markah `#sisi`, `#tiraiSisi`, `#tombolMenu`, kelas keadaan
   * `body.sisi-buka`, dan `pasangKendaliDrawer()` di app.js semuanya
   * DIBIARKAN utuh, sebab bilah sisi yang sama masih dipakai penuh di layar
   * besar. Yang berubah hanya tampilannya di bawah 860px.
   *
   * Menghidupkan lagi laci ponsel: kembalikan aturan `position: fixed` dan
   * `transform` untuk `.sisi`, tampilkan `.atas__menu`, lalu sembunyikan
   * `.nav-bawah`.
   */
  .atas__menu,
  .sisi,
  .tirai-sisi { display: none; }

  /* Ruang bawah dihitung dari tinggi bilah + area aman, supaya baris
     terakhir halaman tidak tersembunyi di baliknya. Ditulis di sini —
     blok TERAKHIR yang menyentuh `.halaman` — karena shorthand `padding`
     akan menimpa `padding-bottom` mana pun yang ditulis lebih dulu. */
  .halaman {
    padding: 16px 14px calc(var(--nav-bawah-tinggi) + env(safe-area-inset-bottom) + 24px);
  }
}

/* Layar sangat sempit: bilah atas tidak boleh mendorong penanda koneksi
   keluar dari layar; teks "Tema" disembunyikan agar hanya ikonnya. */
@media (max-width: 420px) {
  .koneksi { font-size: 0; padding: 0; }
  .koneksi::before { margin: 0; width: 9px; height: 9px; }
  .atas__kanan { gap: 8px; }
  .atas__tombol-tema { padding: 0; width: 38px; justify-content: center; }
  .atas__tombol-tema__teks { display: none; }
}