/* =====================================================================
   SIMTUGAS — gaya tampilan
   Palet: hijau arsip, kertas hangat, aksen kuning kunyit
   ===================================================================== */

:root {
  --tinta:        #14231D;
  --tinta-lembut: #55605A;
  --samar:        #7C837D;
  --kertas:       #F3F1EA;
  --sheet:        #FFFFFF;
  --garis:        #E2DED2;
  --garis-tegas:  #CBC5B4;
  --rimba:        #0F3125;
  --rimba-muda:   #1B4B39;
  --kunyit:       #B8862B;
  --kunyit-muda:  #F5EDD9;
  --hijau:        #2C6E4B;
  --merah:        #A33A2B;
  --biru:         #2B5C8A;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --r: 4px;
  --sidebar: 254px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--kertas);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--rimba-muda); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; margin: 0; }

:focus-visible { outline: 2px solid var(--kunyit); outline-offset: 2px; }

/* ---------------------------------------------------------------- tata letak */
.kerangka { display: flex; min-height: 100vh; }

.samping {
  width: var(--sidebar);
  flex: 0 0 var(--sidebar);
  background: var(--rimba);
  color: #D9E2DC;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.merek {
  padding: 22px 22px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.merek b {
  display: block;
  font-family: var(--serif);
  font-size: 21px;
  color: #fff;
  letter-spacing: .04em;
}
.merek span { display: block; font-size: 11.5px; color: #8FA79A; margin-top: 3px; }

.nav { padding: 14px 0; overflow-y: auto; flex: 1; }
.nav-grup {
  font-size: 11px;
  color: #7C978A;
  padding: 14px 22px 6px;
  letter-spacing: .06em;
}
.nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 22px;
  color: #CBD8D1;
  font-size: 14px;
  border-left: 3px solid transparent;
}
.nav a:hover { background: rgba(255, 255, 255, .05); color: #fff; text-decoration: none; }
.nav a.aktif {
  background: rgba(184, 134, 43, .13);
  border-left-color: var(--kunyit);
  color: #fff;
  font-weight: 600;
}
.nav .ikon { width: 17px; height: 17px; flex: 0 0 17px; opacity: .85; }

.kaki-samping {
  padding: 14px 22px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: 12px;
  color: #7F9A8C;
}

.utama { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.atas {
  background: var(--sheet);
  border-bottom: 1px solid var(--garis);
  padding: 14px 30px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: sticky;
  top: 0;
  z-index: 30;
}
.atas h1 { font-size: 21px; }
.atas .sub { font-size: 12.5px; color: var(--samar); margin-top: 1px; }
.atas .kanan { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.akun { text-align: right; font-size: 12.5px; line-height: 1.35; }
.akun b { display: block; font-size: 13.5px; }
.akun span { color: var(--samar); }

.isi { padding: 26px 30px 60px; max-width: 1320px; width: 100%; }

/* ---------------------------------------------------------------- lembar */
.lembar {
  background: var(--sheet);
  border: 1px solid var(--garis);
  border-radius: var(--r);
  margin-bottom: 22px;
}
.lembar-kepala {
  padding: 15px 20px;
  border-bottom: 1px solid var(--garis);
  display: flex;
  align-items: center;
  gap: 14px;
}
.lembar-kepala h2 { font-size: 17px; }
.lembar-kepala .sub { font-size: 12.5px; color: var(--samar); }
.lembar-kepala .kanan { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.lembar-isi { padding: 20px; }
.lembar-isi.rapat { padding: 0; }

/* ---------------------------------------------------------------- tombol */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 15px;
  border: 1px solid var(--garis-tegas);
  background: var(--sheet);
  color: var(--tinta);
  border-radius: var(--r);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: #F7F5EF; text-decoration: none; }
.btn svg { width: 15px; height: 15px; }
.btn-utama { background: var(--rimba); border-color: var(--rimba); color: #fff; }
.btn-utama:hover { background: var(--rimba-muda); }
.btn-kunyit { background: var(--kunyit); border-color: var(--kunyit); color: #fff; }
.btn-kunyit:hover { background: #A2761F; }
.btn-bahaya { color: var(--merah); border-color: #E4C9C3; }
.btn-bahaya:hover { background: #FBF0EE; }
.btn-kecil { padding: 5px 10px; font-size: 12.5px; }
.btn-ikon { padding: 6px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.aksi-baris { display: flex; gap: 6px; justify-content: flex-end; }

/* ---------------------------------------------------------------- tabel */
.tabel-bungkus { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
  text-align: left;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--tinta-lembut);
  padding: 11px 14px;
  background: #FAF9F5;
  border-bottom: 2px solid var(--garis-tegas);
  white-space: nowrap;
}
table.data td { padding: 11px 14px; border-bottom: 1px solid var(--garis); vertical-align: top; }
table.data tbody tr:hover { background: #FBFAF6; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.angka, table.data th.angka { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.tengah, table.data th.tengah { text-align: center; }
table.data .utama-sel { font-weight: 600; }
table.data .keterangan { color: var(--samar); font-size: 12.5px; }
table.garis-grup tbody tr.awal-grup td { border-top: 2px solid var(--garis-tegas); }

.kosong { padding: 46px 20px; text-align: center; color: var(--samar); }
.kosong b { display: block; font-family: var(--serif); font-size: 17px; color: var(--tinta); margin-bottom: 5px; }

/* ---------------------------------------------------------------- formulir */
.baris { display: flex; flex-wrap: wrap; gap: 18px; }
.kolom { flex: 1 1 260px; min-width: 0; }
.kolom-2 { flex: 2 1 540px; min-width: 0; }
.kolom-penuh { flex: 1 1 100%; }

.bidang { margin-bottom: 16px; }
.bidang label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.bidang .bantuan { font-size: 12px; color: var(--samar); margin-top: 5px; }
.wajib { color: var(--merah); }

input[type=text], input[type=date], input[type=number], input[type=password],
input[type=search], input[type=month], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 8px 11px;
  border: 1px solid var(--garis-tegas);
  border-radius: var(--r);
  background: #fff;
  color: var(--tinta);
}
textarea { resize: vertical; min-height: 92px; line-height: 1.6; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--rimba-muda);
  box-shadow: 0 0 0 3px rgba(27, 75, 57, .1);
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tinta-lembut) 50%), linear-gradient(135deg, var(--tinta-lembut) 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }

.kaki-form {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 15px 20px;
  border-top: 1px solid var(--garis);
  background: #FAF9F5;
}
.kaki-form .kiri { margin-right: auto; }

/* ---------------------------------------------------------------- lencana */
.lencana {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  border: 1px solid;
}
.lencana-terbit { color: var(--hijau); border-color: #BFDCCB; background: #EDF6F0; }
.lencana-draft  { color: var(--kunyit); border-color: #E6D5AC; background: var(--kunyit-muda); }
.lencana-netral { color: var(--tinta-lembut); border-color: var(--garis-tegas); background: #F6F5F0; }
.lencana-biru   { color: var(--biru); border-color: #C5D6E5; background: #EEF4F9; }

.chip {
  display: inline-block;
  font-size: 12px;
  padding: 2px 9px;
  margin: 0 4px 4px 0;
  background: #F4F2EA;
  border: 1px solid var(--garis);
  border-radius: 20px;
  color: var(--tinta-lembut);
}

/* ---------------------------------------------------------------- statistik */
.papan { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 22px; }
.statistik {
  background: var(--sheet);
  border: 1px solid var(--garis);
  border-left: 3px solid var(--kunyit);
  border-radius: var(--r);
  padding: 16px 18px;
}
.statistik .label { font-size: 12.5px; color: var(--samar); }
.statistik .nilai { font-family: var(--serif); font-size: 30px; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; }
.statistik .catatan { font-size: 12px; color: var(--tinta-lembut); margin-top: 3px; }
.statistik.hijau { border-left-color: var(--hijau); }
.statistik.biru { border-left-color: var(--biru); }
.statistik.rimba { border-left-color: var(--rimba); }

/* ---------------------------------------------------------------- grafik batang */
.batang-daftar { display: flex; flex-direction: column; gap: 11px; }
.batang-item { display: grid; grid-template-columns: 118px 1fr 62px; gap: 12px; align-items: center; font-size: 13px; }
.batang-jalur { background: #F1EFE7; border-radius: 3px; height: 20px; overflow: hidden; }
.batang-isi {
  height: 100%;
  background: linear-gradient(90deg, var(--rimba-muda), #2F7457);
  border-radius: 3px;
  width: 0;
  transition: width .7s cubic-bezier(.2, .8, .3, 1);
}
.batang-item.aksen .batang-isi { background: linear-gradient(90deg, var(--kunyit), #D2A44A); }
.batang-nilai { text-align: right; font-variant-numeric: tabular-nums; color: var(--tinta-lembut); }

/* ---------------------------------------------------------------- petak bulan */
.bulan-petak { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.bulan-kotak {
  display: block;
  padding: 11px 13px 13px;
  border: 1px solid var(--garis);
  border-radius: var(--r);
  color: inherit;
  background: var(--sheet);
  transition: transform .12s;
}
.bulan-kotak:hover { text-decoration: none; transform: translateY(-2px); }
.bulan-kotak .nama { font-size: 12.5px; font-weight: 600; }
.bulan-kotak .angka { font-family: var(--serif); font-size: 23px; line-height: 1.2; margin-top: 2px; font-variant-numeric: tabular-nums; }
.bulan-kotak .ket { font-size: 11.5px; opacity: .85; }
.bulan-kotak.t0 { background: #FAF9F5; border-style: dashed; color: var(--samar); }
.bulan-kotak.t1 { background: #EAF1EC; border-color: #CFDFD5; }
.bulan-kotak.t2 { background: #C3DACB; border-color: #A9C7B7; }
.bulan-kotak.t3 { background: #5E9179; border-color: transparent; color: #fff; }
.bulan-kotak.t4 { background: var(--rimba); border-color: transparent; color: #fff; }
.bulan-kotak.kini { outline: 2px solid var(--kunyit); outline-offset: 1px; }

/* ---------------------------------------------------------------- papan jadwal */
.papan-gulir { overflow-x: auto; }
.papan-isi { min-width: max-content; --lebar-hari: 46px; --lebar-nama: 214px; }

.papan-baris { display: flex; border-bottom: 1px solid var(--garis); }
.papan-baris:last-child { border-bottom: 0; }

.papan-nama {
  position: sticky;
  left: 0;
  z-index: 2;
  flex: 0 0 var(--lebar-nama);
  width: var(--lebar-nama);
  background: var(--sheet);
  border-right: 1px solid var(--garis-tegas);
  padding: 10px 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.papan-avatar {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  display: grid;
  place-items: center;
  letter-spacing: .02em;
}
.papan-nama .teks { min-width: 0; }
.papan-nama .teks b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.papan-nama .teks span { display: block; font-size: 11.5px; color: var(--samar);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.papan-hari { position: relative; display: flex; flex: 1; }
.papan-sel {
  flex: 0 0 var(--lebar-hari);
  width: var(--lebar-hari);
  border-right: 1px solid var(--garis);
}
.papan-sel:last-child { border-right: 0; }
.papan-sel.pekan { background: #FBFAF6; }
.papan-sel.kini { background: #FBF1D8; }
.papan-sel.awal-bulan { border-left: 1px solid var(--garis-tegas); margin-left: -1px; }

.papan-kepala { background: #FAF9F5; border-bottom: 2px solid var(--garis-tegas); }
.papan-kepala .papan-nama { background: #FAF9F5; }
.papan-kepala .papan-sel { text-align: center; padding: 8px 0; line-height: 1.25; }
.papan-kepala .hari { font-size: 11px; color: var(--samar); }
.papan-kepala .tanggal { font-size: 13.5px; font-weight: 600; }
.papan-kepala .kini .hari, .papan-kepala .kini .tanggal { color: #8A6512; }

.papan-bar {
  position: absolute;
  height: 25px;
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 0 10px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
  z-index: 1;
}
.papan-bar:hover { text-decoration: none; filter: brightness(1.08); }
.papan-bar.draf { opacity: .5; }
.papan-bar.bentrok { box-shadow: 0 0 0 2px var(--merah); }
.papan-bar.potong-kiri { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.papan-bar.potong-kanan { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.papan-kaki {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 11px 16px;
  border-top: 1px solid var(--garis);
  background: #FAF9F5;
  font-size: 12.5px;
  color: var(--tinta-lembut);
}
.papan-kaki span { display: flex; align-items: center; gap: 7px; }
.tanda-warna { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 12px; }
.tanda-warna.kuning { background: #FBF1D8; border: 1px solid var(--kunyit); }
.tanda-warna.jalan { background: #0F6E6E; }
.tanda-warna.draf { background: #0F6E6E; opacity: .5; }
.tanda-warna.bentrok { background: transparent; border: 2px solid var(--merah); }

/* ---------------------------------------------------------------- pesan */
.pesan {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 16px;
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--r);
  margin-bottom: 18px;
  font-size: 13.5px;
}
.pesan-sukses { background: #EDF6F0; border-color: #BFDCCB; color: #1F5638; }
.pesan-galat  { background: #FBF0EE; border-color: #E4C9C3; color: #7E2C20; }
.pesan-info   { background: var(--kunyit-muda); border-color: #E6D5AC; color: #6E5115; }
.pesan ul { margin: 6px 0 0; padding-left: 18px; }
.pesan .tutup { margin-left: auto; background: none; border: 0; font-size: 17px; cursor: pointer; color: inherit; opacity: .6; line-height: 1; }

/* ---------------------------------------------------------------- alat & tab */
.alat { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 0; }
.cari { position: relative; flex: 0 1 300px; }
.cari input { padding-left: 33px; }
.cari svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--samar); }

.tab { display: flex; gap: 2px; border-bottom: 1px solid var(--garis); padding: 0 20px; background: var(--sheet); }
.tab a {
  padding: 12px 15px;
  font-size: 13.5px;
  color: var(--tinta-lembut);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab a:hover { color: var(--tinta); text-decoration: none; }
.tab a.aktif { color: var(--rimba); font-weight: 600; border-bottom-color: var(--kunyit); }

/* ---------------------------------------------------------------- pemilih petugas */
.pemilih { border: 1px solid var(--garis-tegas); border-radius: var(--r); overflow: hidden; }
.pemilih-atas { display: flex; gap: 8px; padding: 9px; border-bottom: 1px solid var(--garis); background: #FAF9F5; }
.pemilih-atas input { flex: 1; }
.pemilih-daftar { max-height: 268px; overflow-y: auto; }
.pilih-item {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--garis);
  cursor: pointer;
  align-items: flex-start;
  font-size: 13.5px;
}
.pilih-item:last-child { border-bottom: 0; }
.pilih-item:hover { background: #FAF9F5; }
.pilih-item input { margin-top: 3px; accent-color: var(--rimba-muda); }
.pilih-item .keterangan { display: block; font-size: 12px; color: var(--samar); }
.pilih-item.terpilih { background: #F4F7F4; }
.pemilih-kaki { padding: 7px 12px; border-top: 1px solid var(--garis); font-size: 12.5px; color: var(--samar); background: #FAF9F5; }

/* ---------------------------------------------------------------- rincian */
.rincian { display: grid; grid-template-columns: 168px 1fr; gap: 9px 14px; font-size: 14px; }
.rincian dt { color: var(--samar); font-size: 13px; }
.rincian dd { margin: 0; }

.daftar-nomor { margin: 0; padding-left: 19px; }
.daftar-nomor li { margin-bottom: 4px; }

/* ---------------------------------------------------------------- masuk */
.masuk-layar {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--kertas);
}
.masuk-kiri {
  background: var(--rimba);
  color: #E4EBE7;
  padding: 62px 58px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.masuk-kiri h1 { font-size: 40px; color: #fff; line-height: 1.15; max-width: 12ch; }
.masuk-kiri p { max-width: 46ch; color: #A9BEB4; margin-top: 16px; font-size: 15px; }
.masuk-kiri .tanda { width: 54px; height: 3px; background: var(--kunyit); margin: 26px 0; }
.masuk-kiri ul { list-style: none; padding: 0; margin: 8px 0 0; font-size: 14px; color: #BCCDC4; }
.masuk-kiri li { padding: 5px 0 5px 20px; position: relative; }
.masuk-kiri li::before { content: "—"; position: absolute; left: 0; color: var(--kunyit); }
.masuk-kanan { display: flex; align-items: center; justify-content: center; padding: 40px; }
.masuk-kotak { width: 100%; max-width: 348px; }
.masuk-kotak h2 { font-size: 25px; margin-bottom: 4px; }
.masuk-kotak .sub { color: var(--samar); font-size: 13.5px; margin-bottom: 24px; }
.masuk-kotak .btn { width: 100%; justify-content: center; padding: 11px; }
.masuk-catatan { margin-top: 20px; font-size: 12.5px; color: var(--samar); border-top: 1px solid var(--garis); padding-top: 14px; }

/* ---------------------------------------------------------------- toast */
#toast-wadah { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--rimba);
  color: #fff;
  padding: 11px 16px;
  border-radius: var(--r);
  font-size: 13.5px;
  box-shadow: 0 6px 20px rgba(20, 35, 29, .22);
  animation: naik .25s ease;
}
@keyframes naik { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- responsif */
@media (max-width: 900px) {
  .kerangka { flex-direction: column; }
  .samping { width: 100%; flex: none; height: auto; position: static; }
  .nav { display: flex; flex-wrap: wrap; padding: 8px; }
  .nav-grup { display: none; }
  .nav a { border-left: 0; border-bottom: 2px solid transparent; padding: 8px 12px; }
  .nav a.aktif { border-left: 0; border-bottom-color: var(--kunyit); }
  .kaki-samping { display: none; }
  .isi, .atas { padding-left: 16px; padding-right: 16px; }
  .masuk-layar { grid-template-columns: 1fr; }
  .masuk-kiri { padding: 34px 24px; }
  .masuk-kiri h1 { font-size: 30px; }
  .rincian { grid-template-columns: 1fr; gap: 2px 0; }
  .rincian dd { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .samping, .atas, .alat, .btn, .tab { display: none !important; }
  .isi { padding: 0; }
  .lembar { border: 0; }
}