/* Monokrom: penekanan lewat inversi tinta/kertas, bukan warna. Satu-satunya warna (--galat) hanya untuk error dan tenggat lewat.
   Font memakai huruf sistem: CSP (public/_headers) hanya mengizinkan font dari situs sendiri. */
:root {
  --kertas: #fff; --lapis: #f4f4f4; --lapis-2: #ebebeb; --garis: #e2e2e2; --garis-kuat: #c9c9c9;
  --redup: #6e6e6e; --tinta: #1a1a1a; --galat: #b3261e;
  --r: 6px; --r-besar: 10px;
  --font: "Geist", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kertas: #151515; --lapis: #1e1e1e; --lapis-2: #282828; --garis: #303030; --garis-kuat: #474747;
    --redup: #9c9c9c; --tinta: #ececec; --galat: #f2b8b5; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --kertas: #151515; --lapis: #1e1e1e; --lapis-2: #282828; --garis: #303030; --garis-kuat: #474747;
  --redup: #9c9c9c; --tinta: #ececec; --galat: #f2b8b5; color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 14px/1.45 var(--font); color: var(--tinta); background: var(--kertas); }
h1, h2, h3 { letter-spacing: -.01em; font-weight: 600; line-height: 1.2; }
h2 { font-size: 1.5rem; margin: 0; }
h3 { font-size: 1rem; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ikon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
symbol .isi { fill: currentColor; stroke: none; }
.redup { color: var(--redup); }
.galat { color: var(--galat); }
.angka { font-variant-numeric: tabular-nums; }

/* --- Tombol: sekunder (garis) bawaan, .primer terisi tinta, .hantu tanpa garis --- */
button {
  font: inherit; font-size: .9286rem; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  height: 32px; padding: 0 .75rem; border-radius: var(--r); border: 1px solid var(--garis-kuat); background: var(--kertas); color: var(--tinta);
  white-space: nowrap;
}
button:hover { background: var(--lapis); }
button.primer { background: var(--tinta); border-color: var(--tinta); color: var(--kertas); }
button.primer:hover { opacity: .88; background: var(--tinta); }
button.hantu { border-color: transparent; background: transparent; }
button.hantu:hover { background: var(--lapis-2); }
button.kecil { height: 26px; padding: 0 .55rem; font-size: .8571rem; }
button.ikon-saja { width: 28px; height: 28px; padding: 0; justify-content: center; }
button:disabled { opacity: .5; cursor: wait; }

/* --- Isian --- */
input, select, textarea {
  font: inherit; color: var(--tinta); background: var(--kertas); border: 1px solid var(--garis-kuat); border-radius: var(--r);
  min-height: 32px; padding: .3rem .6rem; width: 100%;
}
textarea { resize: vertical; min-height: 5rem; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: var(--redup); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
input:disabled, select:disabled { background: var(--lapis); color: var(--redup); }
input[type="date"] { font-variant-numeric: tabular-nums; }

/* --- Login --- */
.login { max-width: 22rem; margin: 14vh auto; padding: 0 16px; }
.login h1 { font-size: 2.25rem; margin: 0; }
.login > .redup { margin: .25rem 0 1.5rem; }
.login label { display: block; margin-bottom: .3rem; font-weight: 500; }
.login input { margin-bottom: .75rem; }
.login .primer { width: 100%; justify-content: center; height: 36px; }
.akun { display: grid; gap: .4rem; }
.akun button { height: auto; padding: .6rem .75rem; justify-content: space-between; text-align: left; }
.akun small { color: var(--redup); font-weight: 400; }
p.galat { min-height: 1.4rem; margin: .5rem 0; }

/* --- Hero pembuka --- */
.hero { position: fixed; inset: 0; z-index: 30; background: #151515; color: #ececec; display: grid; place-content: center; text-align: center; padding: 16px; transition: opacity .6s; }
.hero h1 { font-size: clamp(3rem, 12vw, 6rem); margin: 0; letter-spacing: -.03em; }
.hero .sub { font-size: 1.25rem; margin: 0 0 2rem; color: #9c9c9c; }
.hero blockquote { margin: 0; max-width: 28rem; }
.hero.pudar { opacity: 0; pointer-events: none; }

/* --- Kerangka app --- */
.app { display: grid; grid-template-columns: 13rem 1fr; min-height: 100vh; }
nav { position: sticky; top: 0; height: 100vh; background: var(--lapis); border-right: 1px solid var(--garis); display: flex; flex-direction: column; gap: 2px; padding: .9rem .6rem; }
nav .merek { font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; padding: 0 .6rem .9rem; }
nav a { display: flex; align-items: center; gap: .6rem; height: 34px; padding: 0 .6rem; border-radius: var(--r); text-decoration: none; color: var(--redup); font-weight: 500; }
nav a:hover { background: var(--lapis-2); color: var(--tinta); }
nav a[aria-current="page"] { background: var(--kertas); color: var(--tinta); box-shadow: 0 0 0 1px var(--garis); }
.pengguna { margin-top: auto; display: grid; gap: 2px; border-top: 1px solid var(--garis); padding-top: .75rem; }
.siapa { display: grid; padding: 0 .6rem .5rem; }
.siapa span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.siapa small { color: var(--redup); }
.pengguna button { justify-content: flex-start; color: var(--redup); padding: 0 .6rem; }
.pengguna button:hover { color: var(--tinta); }
#isi { padding: 1.5rem 2rem 3rem; min-width: 0; max-width: 76rem; }

/* --- Kepala halaman --- */
.judul-halaman { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; min-height: 32px; }
.judul-halaman > span { display: inline-flex; gap: .25rem; }
.sub-judul { margin: -.6rem 0 1rem; color: var(--redup); }

.tab { display: inline-flex; gap: 2px; padding: 2px; background: var(--lapis); border-radius: calc(var(--r) + 2px); margin-bottom: 1rem; }
.tab button { border: 0; background: transparent; color: var(--redup); height: 28px; }
.tab button[aria-selected="true"] { background: var(--kertas); color: var(--tinta); box-shadow: 0 0 0 1px var(--garis); }

/* --- Ringkasan status: tingkat isian = status (garis putus → garis penuh → terisi) --- */
.ringkas { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.ringkas button { height: auto; padding: .45rem .75rem; flex-direction: column; align-items: flex-start; gap: 0; min-width: 7.5rem; border-radius: var(--r-besar); }
.ringkas b { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ringkas small { font-weight: 500; font-size: .8571rem; }
.ringkas [data-st="backlog"] { border-style: dashed; }
.ringkas [data-st="legit"] { background: var(--tinta); color: var(--kertas); border-color: var(--tinta); }
.ringkas [data-st="legit"]:hover { opacity: .88; }
.ringkas [aria-pressed="true"] { box-shadow: 0 0 0 2px var(--kertas), 0 0 0 4px var(--tinta); }
.ringkas .semua { justify-content: center; align-items: center; min-width: 0; border-color: transparent; color: var(--redup); }

.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 .45rem; border-radius: 999px; font-size: .7857rem; font-weight: 600; border: 1px solid var(--tinta); white-space: nowrap; }
.badge-backlog { border-style: dashed; border-color: var(--redup); color: var(--redup); }
.badge-legit { background: var(--tinta); color: var(--kertas); }
.badge-garis { border-color: var(--garis-kuat); color: var(--redup); font-weight: 500; }

/* --- Saring --- */
.saring { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.saring label { display: inline-flex; align-items: center; gap: .4rem; color: var(--redup); font-size: .8571rem; }
.saring select { width: auto; min-height: 30px; padding: .2rem 1.6rem .2rem .5rem; font-size: .9286rem; }
.cari { position: relative; flex: 1 1 14rem; max-width: 22rem; }
.cari .ikon { position: absolute; left: .55rem; top: 50%; translate: 0 -50%; color: var(--redup); pointer-events: none; }
.cari input { padding-left: 2rem; min-height: 30px; }

/* --- Tabel padat --- */
.tabel { overflow-x: auto; border: 1px solid var(--garis); border-radius: var(--r-besar); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--garis); vertical-align: middle; }
th { position: sticky; top: 0; background: var(--lapis); font-size: .8571rem; font-weight: 500; color: var(--redup); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--lapis) 60%, transparent); }
th.kanan, td.kanan { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td small, .meta { color: var(--redup); font-size: .8571rem; }
td.judul { min-width: 14rem; }
td.judul b { font-weight: 500; display: block; }
td.judul small { display: block; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
td.orang, td.waktu { white-space: nowrap; }
td.orang small { display: block; }
td.tgl { white-space: nowrap; font-variant-numeric: tabular-nums; }
td.tgl small { display: block; }
.lewat, .lewat small { color: var(--galat); }
td.aksi { white-space: nowrap; text-align: right; width: 1%; }
td.aksi > div { display: inline-flex; gap: .25rem; align-items: center; }
td.tabel-kosong { text-align: center; color: var(--redup); padding: 2rem; }
.mencolok { font-weight: 600; text-decoration: underline; text-decoration-style: wavy; text-underline-offset: 3px; }
.tabel a { overflow-wrap: anywhere; }

/* --- Menu ⋯ --- */
.menu { position: fixed; z-index: 20; min-width: 11rem; padding: 4px; background: var(--kertas); border: 1px solid var(--garis-kuat); border-radius: var(--r-besar); box-shadow: 0 8px 24px rgba(0, 0, 0, .14); display: grid; }
.menu button { border: 0; background: transparent; justify-content: flex-start; height: 30px; font-weight: 400; }
.menu button:hover, .menu button:focus-visible { background: var(--lapis); outline: none; }

/* --- Strip total (Budget) dan panel --- */
.total { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 1rem; border: 1px solid var(--garis); border-radius: var(--r-besar); }
.total div { padding: .6rem 1rem; flex: 1 1 9rem; display: grid; }
.total div + div { border-left: 1px solid var(--garis); }
.total small { color: var(--redup); }
.total b { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.kartu-daftar { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; margin-bottom: 2rem; }
.kartu { border: 1px solid var(--garis); border-radius: var(--r-besar); padding: .85rem 1rem; overflow-wrap: anywhere; display: grid; gap: .35rem; align-content: start; }
.kartu.saya { border-color: var(--tinta); }
.kartu h3 { margin: 0; display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.kartu p { margin: 0; }
.kartu button { justify-self: start; margin-top: .25rem; }
.panel { display: grid; grid-template-columns: max-content 1fr; gap: 0; margin: 0; border: 1px solid var(--garis); border-radius: var(--r-besar); max-width: 44rem; }
.panel dt, .panel dd { padding: .6rem 1rem; border-bottom: 1px solid var(--garis); margin: 0; }
.panel dt { color: var(--redup); }
.panel dt:last-of-type, .panel dd:last-of-type { border-bottom: 0; }
h3 small { font-weight: 400; color: var(--redup); }

.bagian { border: 1px solid var(--garis); border-radius: var(--r-besar); padding: .85rem 1rem; margin-bottom: .75rem; }
.bagian .judul-halaman { margin: 0; }
.bagian h3 { margin: 0; }
.isi-teks { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: .5rem; line-height: 1.6; max-width: 72ch; }

.kerangka { height: 2.5rem; margin: 0 0 1px; background: linear-gradient(90deg, var(--lapis), var(--lapis-2), var(--lapis)); background-size: 200% 100%; animation: kilau 1.2s infinite; }
.kerangka-grup { border-radius: var(--r-besar); overflow: hidden; display: grid; gap: 1px; }
.kerangka { margin: 0; }
@keyframes kilau { to { background-position: -200% 0; } }

/* --- Dialog --- */
dialog { border: 1px solid var(--garis-kuat); border-radius: var(--r-besar); padding: 1.25rem; width: min(32rem, calc(100% - 32px)); max-height: 90vh; overflow-y: auto; color: var(--tinta); background: var(--kertas); box-shadow: 0 16px 48px rgba(0, 0, 0, .2); }
dialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog h3 { margin: 0 0 1rem; font-size: 1.15rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.form-grid > .penuh { grid-column: 1 / -1; }
dialog label, .medan { display: grid; gap: .3rem; font-weight: 500; font-size: .9286rem; align-content: start; }
.medan > span:first-child { font-weight: 500; }
.bantuan { font-weight: 400; font-size: .8571rem; color: var(--redup); min-height: 1.2em; }
.bantuan:empty { display: none; }
.dua { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.satuan { position: relative; display: block; }
.satuan.kiri input { padding-left: 2.3rem; padding-right: .6rem; font-variant-numeric: tabular-nums; }
.satuan.kiri span { left: .6rem; right: auto; }
.satuan input { padding-right: 2.6rem; }
.satuan span { position: absolute; right: .6rem; top: 50%; translate: 0 -50%; color: var(--redup); pointer-events: none; font-weight: 400; }
.chip { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip button { height: 24px; padding: 0 .5rem; font-size: .8214rem; font-weight: 500; border-radius: 999px; color: var(--redup); }
.chip button:hover { color: var(--tinta); }
.chip button[aria-pressed="true"] { background: var(--tinta); color: var(--kertas); border-color: var(--tinta); }
dialog .aksi { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; }
dialog p.galat { margin: .75rem 0 0; min-height: 0; }
dialog p.galat:empty { display: none; }
.konfirmasi { width: min(26rem, calc(100% - 32px)); }
.konfirmasi p { margin: 0; color: var(--redup); }
.tunggu { width: auto; text-align: center; padding: 1rem 1.5rem; }
.tunggu p { margin: 0; }
.riwayat { list-style: none; padding: 0; margin: 0; }
.riwayat li { padding: .6rem 0; border-bottom: 1px solid var(--garis); overflow-wrap: anywhere; display: grid; gap: .15rem; }
.riwayat li:last-child { border-bottom: 0; }
.riwayat b { font-weight: 600; }

/* --- Toast --- */
.toast { position: fixed; z-index: 40; left: 50%; bottom: 1.5rem; translate: -50% 0; background: var(--tinta); color: var(--kertas); padding: .55rem 1rem; border-radius: var(--r-besar); font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); animation: muncul .2s ease-out; max-width: calc(100% - 32px); }
.toast.gagal { background: var(--galat); color: var(--kertas); }
@keyframes muncul { from { opacity: 0; translate: -50% .5rem; } }

@media (prefers-reduced-motion: reduce) {
  .kerangka, .toast { animation: none; }
  .hero { transition: none; }
}

/* --- HP: menu jadi bar bawah, tabel task jadi baris bertumpuk --- */
@media (max-width: 700px) {
  .app { grid-template-columns: 1fr; }
  nav { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; z-index: 15; flex-direction: row; justify-content: space-around; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--garis); }
  nav .merek, .pengguna .siapa { display: none; }
  nav a { flex-direction: column; height: auto; gap: 2px; padding: .35rem .25rem; font-size: .7143rem; flex: 1; justify-content: center; }
  nav a[aria-current="page"] { box-shadow: none; }
  .pengguna { position: fixed; top: 0; right: 0; margin: 0; border: 0; padding: .6rem 16px 0 0; display: flex; }
  .pengguna button span { display: none; }
  .pengguna button { width: 32px; padding: 0; justify-content: center; }
  #isi { padding: 1rem 16px 6rem; }
  .judul-halaman { padding-right: 4.5rem; }
  .judul-halaman > button span { display: none; }
  .judul-halaman > button { width: 36px; padding: 0; justify-content: center; }
  .saring label { flex: 1 1 9rem; }
  .saring select { flex: 1; width: 100%; }
  h2 { font-size: 1.3rem; }
  .ringkas button { min-width: 0; flex: 1; }
  .cari { flex-basis: 100%; max-width: none; }
  .form-grid { grid-template-columns: 1fr; }
  .panel { grid-template-columns: 1fr; }
  .panel dt { border-bottom: 0; padding-bottom: 0; }
  .total div + div { border-left: 0; border-top: 1px solid var(--garis); }
  .toast { bottom: 5rem; }
}

/* Tabel task jadi baris bertumpuk bila ruang konten sempit (bukan hanya di HP: juga jendela sedang). */
#isi { container-type: inline-size; }
@container (max-width: 760px) {
  .tabel.tumpuk { border: 0; overflow: visible; }
  .tumpuk table, .tumpuk tbody, .tumpuk tr { display: block; }
  .tumpuk thead { display: none; }
  .tumpuk tr { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; padding: .75rem 0; border-bottom: 1px solid var(--garis); }
  .tumpuk td { display: block; padding: 0; border: 0; background: none !important; }
  .tumpuk td.judul, .tumpuk td.tabel-kosong { flex-basis: 100%; min-width: 0; }
  .tumpuk td[data-l]::before { content: attr(data-l) " "; color: var(--redup); font-size: .8571rem; }
  .tumpuk td.aksi { width: auto; margin-left: auto; }
  .tumpuk td.kanan br { display: none; }
  .tumpuk td.kanan small { margin-left: .3rem; }
  .tumpuk td.tgl small { display: inline; margin-left: .3rem; }
  .tumpuk td.kanan { text-align: left; }
  .tumpuk td.orang small { display: inline; margin-left: .3rem; }
  .tumpuk td.orang small::before { content: "("; } .tumpuk td.orang small::after { content: ")"; }
}