/* Token desain */
:root {
  --warna-latar: #f4f5f7;
  --warna-permukaan: #fff;
  --warna-permukaan-2: #eef0f3;
  --warna-teks: #1a1d21;
  --warna-teks-redup: #5b6470;
  --warna-garis: #d9dce1;
  --warna-garis-kuat: #8a919a;
  --warna-aksen: #0b5cad;
  --warna-aksen-teks: #fff;
  --warna-sekunder: #5b6470;
  --warna-bahaya: #b3261e;
  --warna-bahaya-latar: #fdecea;
  --warna-fokus: #0b5cad;
  --spasi-1: 4px;
  --spasi-2: 8px;
  --spasi-3: 12px;
  --spasi-4: 16px;
  --spasi-5: 24px;
  --radius-1: 6px;
  --radius-2: 10px;
  --bayangan-1: 0 1px 2px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .06);
  --font-dasar: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-kecil: .875rem;
  --font-normal: 1rem;
  --font-judul-kartu: 1.0625rem;
  --font-judul: 1.25rem;
  --durasi-cepat: 150ms;
  --durasi-lambat: 1.4s;
  --lebar-navigasi: 200px;
}

:root[data-theme="dark"] {
  --warna-latar: #0f1317;
  --warna-permukaan: #181e25;
  --warna-permukaan-2: #232b34;
  --warna-teks: #e8ebef;
  --warna-teks-redup: #a3acb7;
  --warna-garis: #2e3742;
  --warna-garis-kuat: #6b7685;
  --warna-aksen: #5aa7f0;
  --warna-aksen-teks: #07121f;
  --warna-sekunder: #3b4654;
  --warna-bahaya: #ff8a80;
  --warna-bahaya-latar: #3a1816;
  --warna-fokus: #8cc4ff;
  --bayangan-1: 0 1px 2px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-dasar);
  font-size: var(--font-normal);
  line-height: 1.5;
  background: var(--warna-latar);
  color: var(--warna-teks);
  transition: background var(--durasi-cepat), color var(--durasi-cepat);
}
a { color: var(--warna-aksen); }

/* Header */
.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spasi-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--spasi-3) var(--spasi-4);
  background: var(--warna-permukaan);
  border-bottom: 1px solid var(--warna-garis);
}
.bar h1 { font-size: var(--font-judul); margin: 0; }
.bar-aksi { display: flex; flex-wrap: wrap; gap: var(--spasi-3); align-items: center; }
.switch { min-height: 44px; display: inline-flex; align-items: center; }
.btn-tema { margin-top: 0; }

/* Tata letak: navigasi + grid kartu */
.tata-letak { display: block; }
.navigasi {
  background: var(--warna-permukaan);
  border-bottom: 1px solid var(--warna-garis);
  overflow-x: auto;
}
.navigasi ul { list-style: none; margin: 0; padding: 0 var(--spasi-2); display: flex; gap: var(--spasi-1); }
.navigasi a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--spasi-3);
  white-space: nowrap;
  text-decoration: none;
  color: var(--warna-teks);
  border-radius: var(--radius-1);
}
.navigasi a:hover { background: var(--warna-permukaan-2); }
main, .grid-kartu {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spasi-4);
  padding: var(--spasi-4);
  max-width: 1400px;
  margin: 0 auto;
  align-items: start;
}
.grid-kartu > * { min-width: 0; }
.kartu-slot:empty { display: none; }

/* Kartu: judul, isi, aksi */
.card {
  background: var(--warna-permukaan);
  border: 1px solid var(--warna-garis);
  border-radius: var(--radius-2);
  box-shadow: var(--bayangan-1);
  padding: var(--spasi-4);
  overflow-x: auto;
}
.card h2, .kartu-judul {
  margin: 0 0 var(--spasi-3);
  font-size: var(--font-judul-kartu);
  font-weight: 650;
}
.kartu-isi > :first-child { margin-top: 0; }
.kartu-aksi { display: flex; flex-wrap: wrap; gap: var(--spasi-2); margin-top: var(--spasi-3); }
.card table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.gulir-x { overflow-x: auto; max-width: 100%; }
#trend-section[hidden] { display: none; }

/* Status kartu: memuat, kosong, galat */
.memuat {
  display: block;
  min-height: 1.5em;
  margin: 0 0 var(--spasi-2);
  border-radius: var(--radius-1);
  color: transparent;
  background: linear-gradient(90deg, var(--warna-permukaan-2) 25%, var(--warna-garis) 50%, var(--warna-permukaan-2) 75%);
  background-size: 200% 100%;
  animation: kilau var(--durasi-lambat) linear infinite;
}
@keyframes kilau { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.kosong {
  margin: 0;
  padding: var(--spasi-4);
  text-align: center;
  color: var(--warna-teks-redup);
  background: var(--warna-permukaan-2);
  border: 1px dashed var(--warna-garis-kuat);
  border-radius: var(--radius-1);
}
.galat {
  margin: 0 0 var(--spasi-2);
  color: var(--warna-bahaya);
}
.galat:empty { display: none; }
.galat:not(:empty) {
  padding: var(--spasi-2) var(--spasi-3);
  background: var(--warna-bahaya-latar);
  border: 1px solid var(--warna-bahaya);
  border-radius: var(--radius-1);
}

/* Form dan tombol */
#auth { margin-top: 0; }
.field { display: flex; flex-direction: column; gap: var(--spasi-1); margin-bottom: var(--spasi-3); }
.field input, .field select, .field textarea {
  min-height: 44px;
  padding: var(--spasi-2);
  font-size: var(--font-normal);
  width: 100%;
  border: 1px solid var(--warna-garis-kuat);
  border-radius: var(--radius-1);
  background: var(--warna-permukaan);
  color: var(--warna-teks);
}
.field textarea { font-family: inherit; min-height: 0; }
.field input[type="checkbox"] { width: 24px; min-height: 24px; align-self: flex-start; }
.field input[type="range"] { min-height: 44px; }
.btn {
  min-height: 44px;
  padding: var(--spasi-2) var(--spasi-4);
  font-size: var(--font-normal);
  border: 0;
  border-radius: var(--radius-1);
  background: var(--warna-aksen);
  color: var(--warna-aksen-teks);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: filter var(--durasi-cepat);
}
.btn:hover { filter: brightness(1.1); }
.btn-google { margin-top: var(--spasi-3); background: var(--warna-permukaan); color: var(--warna-teks); border: 1px solid var(--warna-garis-kuat); }
.btn-sekunder { background: var(--warna-sekunder); color: #fff; margin-top: var(--spasi-3); }
.btn-bahaya { background: var(--warna-bahaya); color: var(--warna-latar); }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-kecil { font-size: var(--font-kecil); padding: var(--spasi-1) var(--spasi-3); }
.dialog-checkout { flex: 1 1 100%; display: flex; flex-direction: column; gap: var(--spasi-2); }
.dialog-checkout input[type="range"] { width: 100%; }
.dialog-checkout .btn-sekunder { margin-top: 0; }

/* Isi kartu */
.sesi, .perkiraan, .diam, .umur-bucket, .umur-tertua { list-style: none; margin: 0; padding: 0; }
.sesi-item { display: flex; flex-wrap: wrap; gap: var(--spasi-2); align-items: center; justify-content: space-between; padding: var(--spasi-3) 0; border-bottom: 1px solid var(--warna-garis); }
.sesi-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; flex: 1 1 200px; }
.panel { margin-top: var(--spasi-3); }
.panel h3 { margin: 0 0 var(--spasi-2); font-size: var(--font-normal); }
.panel h4 { margin: 0; font-size: var(--font-normal); overflow-wrap: anywhere; min-width: 0; flex: 1 1 160px; }
.panel progress { width: 100%; height: 12px; accent-color: var(--warna-aksen); }
.tanda-stuck { color: var(--warna-bahaya); }
.laporan-hasil, .indikator, .kelola-indikator, .kendala-detail, .komentar { margin-top: var(--spasi-3); }
.indikator h4, .komentar h3, .kendala-detail h3, .form-kelola h3, .form-kelola h4, .aktif h3, .riwayat h3 { margin: 0 0 var(--spasi-2); font-size: var(--font-normal); overflow-wrap: anywhere; }
.kendala-detail p, .riset h3, .hasil-poin h3, .pohon li { overflow-wrap: anywhere; }
.aktif, .riwayat { margin-top: var(--spasi-4); }
.project { border-top: 1px solid var(--warna-garis); padding: var(--spasi-3) 0; }
.project-kepala { display: flex; flex-wrap: wrap; gap: var(--spasi-2); align-items: center; justify-content: space-between; }
.project-kepala h3 { margin: 0; font-size: var(--font-normal); overflow-wrap: anywhere; min-width: 0; flex: 1 1 160px; }
.deskripsi { color: var(--warna-teks-redup); overflow-wrap: anywhere; }
.pohon { list-style: none; margin: var(--spasi-2) 0 0; padding: 0 0 0 var(--spasi-4); }
.card > .daftar-project .project > .pohon { padding-left: 0; }
.modul-baris { display: flex; flex-wrap: wrap; gap: var(--spasi-2); align-items: center; justify-content: space-between; min-height: 44px; }
.modul-kiri { display: flex; align-items: center; gap: var(--spasi-1); min-width: 0; flex: 1 1 140px; }
.modul-nama { overflow-wrap: anywhere; min-width: 0; }
.lipat { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--warna-teks); font-size: var(--font-normal); cursor: pointer; }
.lipat-kosong { display: inline-block; min-width: 44px; }
.form-kelola { margin-top: var(--spasi-3); padding-top: var(--spasi-3); border-top: 1px dashed var(--warna-garis); }
.tanda { color: var(--warna-aksen); font-weight: 600; }
.isi-riset { white-space: pre-wrap; overflow-wrap: anywhere; }
.grafik-tren { max-width: 100%; height: auto; }
.perkiraan-baris, .diam-baris { display: flex; flex-wrap: wrap; gap: var(--spasi-1) var(--spasi-3); align-items: center; padding: var(--spasi-3) 0; border-top: 1px solid var(--warna-garis); overflow-wrap: anywhere; }
.perkiraan-nama, .diam-nama { font-weight: 600; flex: 1 1 100%; min-width: 0; }
.perkiraan-progres, .perkiraan-kecepatan, .perkiraan-eta { color: var(--warna-teks); }
.perkiraan-status, .diam-lama { color: var(--warna-teks-redup); }
.umur-total { margin: 0 0 var(--spasi-2); font-weight: 600; }
.umur-bucket-baris { display: flex; flex-wrap: wrap; gap: var(--spasi-1) var(--spasi-3); align-items: center; padding: var(--spasi-2) 0; border-top: 1px solid var(--warna-garis); }
.umur-label { flex: 1 1 120px; min-width: 0; overflow-wrap: anywhere; }
.umur-jumlah { font-weight: 600; }
.umur-batang { flex: 1 1 100%; max-width: 100%; border-radius: var(--spasi-1); background: var(--warna-aksen); }
.umur-judul { margin: var(--spasi-3) 0 var(--spasi-2); font-size: var(--font-normal); }
.umur-tertua-baris { padding: var(--spasi-2) 0; border-top: 1px solid var(--warna-garis); overflow-wrap: anywhere; }

/* Aksesibilitas */
:focus-visible {
  outline: 3px solid var(--warna-fokus);
  outline-offset: 2px;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--warna-fokus);
  outline-offset: 2px;
}

/* Responsif: >= 640px dua kolom, >= 1024px sidebar */
@media (min-width: 640px) {
  main, .grid-kartu { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--spasi-5); gap: var(--spasi-5); }
  .grid-kartu > #pantauan, .grid-kartu > #auth, .grid-kartu > #project, .grid-kartu > #admin { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .tata-letak { display: grid; grid-template-columns: var(--lebar-navigasi) minmax(0, 1fr); align-items: start; }
  .navigasi {
    position: sticky;
    top: 65px;
    border-bottom: 0;
    border-right: 1px solid var(--warna-garis);
    min-height: calc(100vh - 65px);
    padding: var(--spasi-3) 0;
    overflow-x: visible;
  }
  .navigasi ul { flex-direction: column; padding: 0 var(--spasi-2); }
}
@media (max-width: 639px) {
  .bar h1 { font-size: var(--font-judul-kartu); }
  .card { padding: var(--spasi-3); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}