/* Sakala Dashboard — bahasa visual "Steep" (serif analytics on warm paper)
   Reskin KOSMETIK saja: palet, tipografi, spasi, radius, border.
   Struktur & nama kelas tidak berubah — perilaku aplikasi tetap sama.

   Catatan penyimpangan yang disengaja dari DESIGN.md:
   - Skala tipografi display (44/64/90px) diturunkan ke 26–34px. Dashboard operasional
     padat data; ukuran majalah akan memaksa scroll berlebihan pada tabel & papan.
   - Warna status (hijau/amber/merah) dipertahankan meski sistem aslinya 97% akromatik,
     karena aturan aging >24 jam bergantung pada sinyal warna. Nadanya dihangatkan
     agar menyatu: peringatan memakai pasangan resmi peach+sienna. */
:root{
  /* Palet Steep */
  --ink:#17191c;            /* Ink Black — teks utama & aksi terisi */
  --paper:#ffffff;          /* Paper White — permukaan kartu */
  --mist:#f2f2f3;           /* Mist Gray — isian & permukaan bertingkat */
  --fog:#fafafb;            /* Fog White — kanvas halaman */
  --slate:#777b86;          /* Slate — teks pendukung */
  --ash:#979799;            /* Ash — label tersier */
  --smoke:#a3a6af;          /* Smoke — placeholder */
  --peach:#fbe1d1;          /* Blush Peach — satu-satunya aksen kromatik */
  --sienna:#5d2a1a;         /* Sienna — tinta di atas peach */
  --line:#ececec;           /* hairline */
  --line-2:#e2e2e4;

  /* Alias lama agar seluruh markup lama tetap valid */
  --bg:var(--fog);
  --surface:var(--paper);
  --surface-2:var(--mist);
  --mut:var(--slate);
  --mut2:var(--ash);
  --blue:var(--ink);        /* "aksi utama" kini ink black, bukan biru */
  --blue-2:#000;
  --blue-soft:var(--peach); /* tint aktif = peach */
  --grad:var(--ink);

  /* Status — dihangatkan agar menyatu dengan sistem */
  --ok:#3f6b52;    --ok-bg:#eaf0eb;
  --warn:#5d2a1a;  --warn-bg:#fbe1d1;   /* pasangan resmi peach + sienna */
  --bad:#8f2c17;   --bad-bg:#f8e0d8;
  --info:#17191c;  --info-bg:#f2f2f3;

  /* Bentuk & bayangan */
  --r:16px;                 /* input */
  --r-card:20px;            /* kartu */
  --r-pill:9999px;          /* tombol & chip */
  --shadow:0 0 0 1px rgba(4,23,43,.05), 0 4px 24px rgba(0,0,0,.05);
  --shadow-lg:0 0 0 1px rgba(4,23,43,.05), 0 8px 40px rgba(0,0,0,.10);

  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --serif:'Source Serif 4',ui-serif,Georgia,'Times New Roman',serif;
  --mono:'Geist Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);color:var(--ink);font-size:15px;line-height:1.5;background:var(--fog);min-height:100vh;-webkit-font-smoothing:antialiased}
.mono{font-family:var(--mono)}
.hide{display:none!important}

/* ===== LOGIN ===== */
.login-wrap{position:fixed;inset:0;display:flex;padding:24px;background:var(--paper);overflow:auto}
.login{width:420px;max-width:100%;margin:auto;background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:40px 36px;box-shadow:var(--shadow)}
.login{text-align:center}
.login img{margin:0 auto 4px;max-width:100%;height:auto}
.login .sub{font-size:17px;color:var(--slate);margin-bottom:32px;line-height:1.35}
.login .field{text-align:left}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:450;color:var(--ash);margin-bottom:8px;letter-spacing:0;text-transform:none}
input,select,textarea{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;color:var(--ink);font-family:var(--sans);font-size:16px;outline:none;transition:border-color .12s,box-shadow .12s}
input::placeholder,textarea::placeholder{color:var(--smoke)}
input:focus,select:focus,textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(23,25,28,.06)}
.err{color:var(--bad);font-size:15px;margin:4px 0 12px;min-height:20px}

/* ===== TOMBOL — pill ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 24px;border:1px solid var(--ink);border-radius:var(--r-pill);
  font-family:var(--sans);font-weight:450;font-size:16px;cursor:pointer;color:var(--paper);background:var(--ink);transition:opacity .12s,background .12s}
.btn:hover{opacity:.86}
.btn:active{transform:translateY(1px)}
.btn.full{width:100%}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{background:var(--mist);opacity:1}
.btn.mini{height:34px;padding:0 16px;font-size:14px}

/* ===== SHELL ===== */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
aside{background:var(--paper);border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;gap:2px}
.brand-side{display:flex;align-items:center;gap:10px;padding:4px 12px 28px}
.nav{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:var(--r-pill);color:var(--slate);cursor:pointer;font-weight:430;font-size:16px;user-select:none;transition:background .1s,color .1s}
.nav:hover{background:var(--mist);color:var(--ink)}
.nav.on{background:var(--peach);color:var(--sienna);font-weight:480}
.nav .ic{width:19px;height:19px;flex:none;display:flex;align-items:center;justify-content:center;opacity:.9}
.nav .ic svg{width:19px;height:19px}
.nav.on .ic{opacity:1}
.userbox{margin-top:auto;padding:16px;border-radius:var(--r-card);background:var(--mist);border:none}
.userbox .nm{font-weight:480;font-size:15px}
.userbox .rl{font-size:14px;font-weight:400;letter-spacing:0;color:var(--ash);text-transform:capitalize;margin:2px 0 14px}
main{padding:32px 40px 80px;max-width:1200px;min-width:0}
.top{display:flex;align-items:center;gap:16px;margin-bottom:32px}
.top h1{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.18;letter-spacing:-.4px}
.top .date{font-size:15px;font-weight:400;color:var(--ash);text-transform:none}
.bell{margin-left:auto;position:relative;width:44px;height:44px;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer}
.bell:hover{background:var(--mist)}
.bell .n{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:var(--r-pill);background:var(--sienna);color:var(--peach);font-size:12px;font-weight:480;display:flex;align-items:center;justify-content:center;padding:0 6px}

.burger{display:none;width:42px;height:42px;flex:none;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
.burger svg{width:21px;height:21px}
.nav-tirai{display:none}
.userbox-aksi{display:flex;gap:8px;flex-wrap:wrap}
.userbox-aksi .btn{flex:1 1 auto;min-width:max-content}

/* ===== TATA TEKS — cegah tumpang tindih & keluar kotak =====
   Tiga penyebab utama: (a) elemen pill ikut memotong teks jadi dua baris,
   (b) anak flex tidak boleh menyusut sehingga mendorong keluar kotak,
   (c) kata panjang tanpa spasi (link, kode) tidak pernah dipatahkan. */
.btn,.mini2,.chip,.tag,.seg button,.kat-head .chip{white-space:nowrap}
.btn,.mini2,.chip,.tag{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.btn,.mini2{flex-shrink:0}
.row,.chk,.kat-head,.kat-baris,.toolbar,.top,.chk-head,.notif .ni,.riwayat .r,.aksi-row{min-width:0}
.row>*,.chk>*,.kat-head>*,.kat-baris>*,.chk-head>*,.notif .ni>*{min-width:0}
.row .grow,.chk .t,.tcard .nm,.cell-main,.cell-sub,.info-grid .val,.callout,
.modal p,.placeholder p,.notif .ni,.kat-baris .grow,.riwayat .r{overflow-wrap:anywhere}
.userbox .nm{overflow-wrap:anywhere}
.kpi .v{overflow-wrap:anywhere;line-height:1.1}
.evt{max-width:100%}
h2.sec,.modal h2,.top h1{overflow-wrap:anywhere}
/* Tautan/kode panjang di dalam kartu tidak boleh melebarkan kotaknya */
.card code,.modal code{overflow-wrap:anywhere;word-break:break-all}

/* ===== KOMPONEN ===== */
h2.sec{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--ink);letter-spacing:-.2px;margin:40px 0 16px;text-transform:none}
h2.sec:first-child{margin-top:0}
.list{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:none;overflow:hidden}
.row{display:flex;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line);font-size:16px}
.row:last-child{border-bottom:none}
.row .grow{flex:1;min-width:0}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;box-shadow:none}
.notif{position:absolute;right:0;top:56px;width:340px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-lg);z-index:60;overflow:hidden}
.notif .ni{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);font-size:15px;cursor:pointer}
.notif .ni:last-child{border-bottom:none}
.notif .ni:hover{background:var(--fog)}
.notif .ni .nn{min-width:28px;height:24px;border-radius:var(--r-pill);background:var(--peach);color:var(--sienna);font-weight:480;font-size:13px;display:flex;align-items:center;justify-content:center;padding:0 8px}
.notif .kosong2{padding:20px;font-size:15px;color:var(--ash);text-align:center}
.kv{font-size:14px;font-weight:400;color:var(--ash);letter-spacing:0}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 14px;border-radius:var(--r-pill);font-size:13px;font-weight:450}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:var(--bad-bg);color:var(--bad)}
.chip.info{background:var(--mist);color:var(--ink)}
.chip.plain{background:var(--mist);color:var(--slate)}
.placeholder{background:var(--mist);border:none;border-radius:24px;padding:64px 40px;text-align:center;color:var(--slate)}
.placeholder .sp{display:inline-block;font-size:14px;font-weight:450;letter-spacing:0;color:var(--sienna);background:var(--peach);border-radius:var(--r-pill);padding:6px 16px;margin-bottom:20px}
.placeholder h3{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--ink);margin-bottom:8px;letter-spacing:-.23px}

/* Kategori paket (accordion) */
.kat-wrap{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.kat{border-bottom:1px solid var(--line)}
.kat:last-child{border-bottom:none}
.kat-head{display:flex;align-items:center;gap:12px;padding:16px 20px;cursor:pointer;font-size:16px}
.kat-head:hover{background:var(--fog)}
.kat-head b{font-weight:480}
.kat-tanda{width:22px;height:22px;border-radius:var(--r-pill);background:var(--mist);color:var(--slate);display:flex;align-items:center;justify-content:center;font-size:15px;flex:none}
.kat-isi{background:var(--fog);border-top:1px solid var(--line)}
.kat-baris{display:flex;align-items:center;gap:12px;padding:12px 20px 12px 54px;border-bottom:1px solid var(--line);font-size:15px}
.kat-baris:last-child{border-bottom:none}
.kat-baris .grow{flex:1;min-width:0}

/* Input rupiah — prefix Rp menyatu di dalam kotak */
.rp-input{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:var(--r);padding:0 14px;background:var(--paper);transition:border-color .12s,box-shadow .12s}
.rp-input:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(23,25,28,.06)}
.rp-input span{color:var(--ash);font-size:15px;flex:none}
.rp-input input{border:none;box-shadow:none!important;padding:11px 0;width:150px;text-align:right;font-family:var(--mono);font-size:15px;background:transparent}

.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:8px}
.kpi.k-bad{background:var(--bad-bg);border-color:transparent}
.kpi.k-bad .v,.kpi.k-bad .kv,.kpi.k-bad .f{color:var(--bad)}
.kpi.k-warn{background:var(--peach);border-color:transparent}
.kpi.k-warn .v,.kpi.k-warn .kv,.kpi.k-warn .f{color:var(--sienna)}
.bar{height:8px;border-radius:var(--r-pill);background:var(--mist);margin-top:16px;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:var(--r-pill);background:var(--sienna)}

/* ===== TOOLBAR & SEGMENTED ===== */
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.toolbar .sp{flex:1}
.seg{display:inline-flex;background:var(--mist);border:none;border-radius:var(--r-pill);padding:4px;gap:4px}
.seg button{border:none;background:transparent;padding:8px 18px;border-radius:var(--r-pill);font-family:var(--sans);font-size:15px;font-weight:430;color:var(--slate);cursor:pointer}
.seg button.on{background:var(--paper);color:var(--ink);font-weight:480;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.toolbar input[type=text]{width:260px;border-radius:var(--r-pill);padding:11px 18px}
.toolbar select{width:auto;border-radius:var(--r-pill);padding:11px 18px}
.syncinfo{font-size:14px;color:var(--ash)}

/* ===== TABEL ===== */
.tblwrap{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);overflow:auto;box-shadow:none}
table{width:100%;border-collapse:collapse;font-size:16px;min-width:760px}
th{font-size:14px;font-weight:400;letter-spacing:0;color:var(--ash);text-transform:none;text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);background:transparent;white-space:nowrap}
td{padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--fog)}
tr:last-child td{border-bottom:none}
.cell-main{font-weight:450}
.cell-sub{font-size:14px;color:var(--ash)}
.star{cursor:pointer;font-size:16px;opacity:.2}
.star.on{opacity:1;color:var(--sienna)}
.kosong{padding:56px;text-align:center;color:var(--slate);font-size:16px}

/* ===== KALENDER ===== */
.cal{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:none;overflow:hidden}
.cal-head{display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid var(--line)}
.cal-head b{font-family:var(--serif);font-size:22px;font-weight:400}
.cal-nav{width:36px;height:36px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--paper);cursor:pointer;font-size:15px;color:var(--slate)}
.cal-nav:hover{background:var(--mist)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-dow{padding:12px 16px;font-size:14px;font-weight:400;color:var(--ash);text-transform:none;letter-spacing:0;border-bottom:1px solid var(--line);text-align:left}
.cal-cell{min-height:104px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:10px 12px;cursor:pointer;position:relative}
.cal-cell:nth-child(7n){border-right:none}
.cal-cell:hover{background:var(--fog)}
.cal-cell.lain{background:var(--mist);opacity:.5}
.cal-cell .tg{font-size:14px;font-weight:450;color:var(--slate)}
.cal-cell.today .tg{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--r-pill);background:var(--ink);color:var(--paper)}
.evt{display:block;margin-top:6px;font-size:13px;font-weight:430;padding:3px 10px;border-radius:var(--r-pill);background:var(--mist);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evt.batal{background:var(--bad-bg);color:var(--bad);text-decoration:line-through}
.evt.selesai{background:var(--ok-bg);color:var(--ok)}
.evt-more{font-size:13px;color:var(--ash);margin-top:4px;display:block}

/* ===== PAPAN (kanban) ===== */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:20px 24px;box-shadow:none}
.kpi .v{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.15;margin-top:6px;letter-spacing:-.66px}
.kpi .f{font-size:14px;color:var(--ash);margin-top:4px}
.kpi .bar{height:8px;border-radius:var(--r-pill);background:var(--mist);margin-top:16px;overflow:hidden}
.kpi .bar>i{display:block;height:100%;border-radius:var(--r-pill);background:var(--sienna)}
.board{display:grid;gap:16px;align-items:start;grid-auto-columns:minmax(200px,1fr);grid-auto-flow:column;overflow-x:auto;padding-bottom:12px}
.col{background:var(--mist);border:none;border-radius:var(--r-card);padding:12px;min-height:120px;min-width:200px}
.col h3{font-size:14px;font-weight:450;letter-spacing:0;color:var(--slate);text-transform:none;display:flex;align-items:center;gap:8px;margin:4px 8px 12px}
.col h3 .cnt{margin-left:auto;background:var(--paper);border:none;border-radius:var(--r-pill);padding:2px 10px;font-size:13px;color:var(--ash)}
.col .rail{height:3px;border-radius:var(--r-pill);margin:0 8px 12px}
.tcard{background:var(--paper);border:none;border-radius:var(--r);padding:14px 16px;margin-bottom:12px;box-shadow:0 0 0 1px rgba(4,23,43,.04)}
.tcard .nm{font-weight:450;font-size:16px;line-height:1.35}
.tcard .mt{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:center}
.tcard .id{font-family:var(--mono);font-size:12px;color:var(--ash)}
.tag{font-size:12px;font-weight:430;padding:3px 10px;border-radius:var(--r-pill);background:var(--mist);color:var(--slate)}
.tag.late{background:var(--bad-bg);color:var(--bad)}
.tag.push{background:var(--peach);color:var(--sienna)}
.tag.ok{background:var(--ok-bg);color:var(--ok)}
.tcard .ac{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.mini2{font-size:13px;font-weight:450;padding:6px 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--paper);color:var(--slate);cursor:pointer;font-family:var(--sans)}
.mini2:hover{border-color:var(--ink);color:var(--ink)}
.mini2.go{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mini2.warn2{border-color:transparent;background:var(--peach);color:var(--sienna)}
.mini2.bad2{border-color:transparent;background:var(--bad-bg);color:var(--bad)}
.tcard.cdone{opacity:.5}
.strike{text-decoration:line-through;color:var(--ash)}

/* ===== CHECKLIST ===== */
.chk-group{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:none;margin-bottom:20px;overflow:hidden}
.chk-head{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border-bottom:1px solid var(--line);font-weight:480;font-size:16px}
.chk-head .prog{margin-left:auto;font-size:14px;color:var(--ash);font-family:var(--mono)}
.chk{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line)}
.chk:last-child{border-bottom:none}
.box{width:22px;height:22px;border-radius:7px;border:1px solid var(--line-2);background:var(--paper);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--paper);flex:none;cursor:pointer}
.chk.done .box{background:var(--ink);border-color:var(--ink)}
.chk.done .t{color:var(--ash);text-decoration:line-through}
.chk.readonly .box{cursor:default;opacity:.5}
.chk .t{flex:1;font-size:16px}
.chk .co{font-size:12px;font-weight:450;color:var(--sienna);background:var(--peach);border-radius:var(--r-pill);padding:3px 10px}
.chk .bk{font-size:12px;font-weight:450;color:var(--ink);background:var(--mist);border-radius:var(--r-pill);padding:3px 10px}

/* ===== MODAL ===== */
.overlay{position:fixed;inset:0;background:rgba(23,25,28,.35);display:flex;align-items:flex-start;justify-content:center;padding:48px 16px;z-index:50;overflow:auto}
.modal{width:min(660px,100%);background:var(--paper);border-radius:24px;box-shadow:var(--shadow-lg);padding:32px}
.modal h2{font-family:var(--serif);font-size:26px;font-weight:400;letter-spacing:-.23px;display:flex;align-items:center;gap:12px}
.modal .x{margin-left:auto;width:36px;height:36px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--paper);cursor:pointer;color:var(--slate);font-size:15px}
.modal .x:hover{background:var(--mist)}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;margin:24px 0}
.info-grid .lbl{font-size:14px;font-weight:400;color:var(--ash);text-transform:none;letter-spacing:0}
.info-grid .val{font-size:16px;font-weight:450}
.callout{background:var(--peach);border:none;border-radius:var(--r);padding:16px 20px;font-size:15px;color:var(--sienna)}
.aksi-row{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}
.riwayat{border-top:1px solid var(--line);margin-top:20px;padding-top:16px}
.riwayat .r{display:flex;gap:12px;font-size:15px;padding:6px 0;color:var(--slate)}
.riwayat .r b{color:var(--ink);font-weight:450}
.riwayat .r .t{margin-left:auto;color:var(--ash);font-family:var(--mono);font-size:13px}

/* ============================================================
   MOBILE (≤900px) — menu jadi laci geser, konten satu kolom.
   Tidak ada satu pun aturan di sini yang menyentuh tampilan desktop.
   ============================================================ */
@media(max-width:900px){
  html,body{max-width:100%;overflow-x:hidden}
  .app{grid-template-columns:minmax(0,1fr);width:100%;overflow-x:hidden}

  /* Menu jadi laci yang menggeser dari kiri */
  aside{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:84vw;z-index:80;
    transform:translateX(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1);
    border-right:1px solid var(--line);box-shadow:none;overflow-y:auto;padding:20px 14px}
  body.nav-buka aside{transform:none;box-shadow:0 0 60px rgba(0,0,0,.18)}
  .nav-tirai{display:block;position:fixed;inset:0;background:rgba(23,25,28,.4);z-index:75;
    opacity:0;pointer-events:none;transition:opacity .24s}
  body.nav-buka .nav-tirai{opacity:1;pointer-events:auto}
  body.nav-buka{overflow:hidden}
  .nav{padding:13px 16px;font-size:16px}          /* sasaran sentuh ≥44px */
  .brand-side{padding:4px 12px 20px}
  .userbox{margin-top:24px}
  .userbox-aksi{flex-direction:column}
  .userbox-aksi .btn{width:100%;flex:none}

  /* Kepala halaman: hamburger + judul + lonceng dalam satu baris */
  .burger{display:flex}
  main{padding:16px 16px 88px;max-width:100%}
  .top{gap:12px;margin-bottom:20px;flex-wrap:nowrap}
  .top h1{font-size:24px;letter-spacing:-.2px;flex:1;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .top .date{display:none}                        /* tanggal disembunyikan agar judul lega */
  .bell{width:42px;height:42px}
  .notif{width:calc(100vw - 32px);right:-4px}

  /* Satu kolom, jarak lebih rapat */
  .grid-cards{grid-template-columns:1fr 1fr;gap:12px}
  .grid2{grid-template-columns:1fr;gap:24px}
  .kpis{grid-template-columns:1fr;gap:12px}
  h2.sec{font-size:19px;margin:28px 0 12px}
  .card{padding:18px;border-radius:var(--r)}
  .kpi{padding:16px 18px;border-radius:var(--r)}
  .kpi .v{font-size:32px}
  .list,.tblwrap,.cal,.chk-group,.kat-wrap{border-radius:var(--r)}
  .row{padding:14px 16px;font-size:15px;flex-wrap:wrap}
  .row .grow{flex:1 1 100%}

  /* Toolbar: pencarian melebar penuh, filter berbagi baris */
  .toolbar{gap:8px}
  .toolbar input[type=text]{width:100%;order:-1}
  .toolbar select{flex:1;min-width:140px}
  .toolbar .sp{display:none}
  .seg{flex:1;justify-content:center}
  .seg button{flex:1;padding:9px 10px;font-size:14px}
  .syncinfo{flex:1 1 100%;font-size:13px}

  /* Papan: kartu lebih lebar agar terbaca, geser mendatar */
  .board{grid-auto-columns:78vw;gap:12px;padding-bottom:16px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .col{min-width:0;scroll-snap-align:start;padding:12px}

  /* Checklist & baris kategori */
  .chk{padding:14px 16px;flex-wrap:wrap;row-gap:6px}
  .chk .t{flex:1 1 100%;order:2}
  .chk .co,.chk .bk{order:3}
  .box{width:26px;height:26px}                    /* lebih mudah disentuh */
  .kat-head{padding:14px 16px;flex-wrap:wrap;row-gap:6px}
  .kat-head .chip{margin-left:0!important;order:3}
  .kat-head b{flex:1 1 auto}
  .kat-baris{padding:12px 16px;flex-wrap:wrap;gap:8px}
  .kat-baris .grow{flex:1 1 100%;font-weight:450}
  .rp-input input{width:120px}

  /* Modal: hampir penuh layar, mudah dijangkau ibu jari */
  .overlay{padding:0;align-items:flex-end}
  .modal{width:100%!important;max-width:100%!important;max-height:92vh;overflow-y:auto;border-radius:24px 24px 0 0;padding:24px 20px 32px}
  .modal h2{font-size:22px}
  .info-grid{grid-template-columns:1fr;gap:14px}
  .aksi-row .btn{flex:1 1 auto}

  /* Tabel & kalender tetap bisa digeser */
  table{min-width:640px}
  .cal-cell{min-height:74px;padding:6px 7px}
  .cal-dow{padding:8px 7px;font-size:12px}
  .evt{font-size:11px;padding:2px 7px}
}

@media(max-width:420px){
  .grid-cards{grid-template-columns:1fr}
  .board{grid-auto-columns:86vw}
  .top h1{font-size:21px}
}