/* SI-REVITAL LITE - gaya aplikasi (palet: Navy #1E3A8A, Emerald #047857, Slate #F1F5F9) */
:root{color-scheme:light;--navy:#1E3A8A;--navy2:#172B66;--em:#047857;--bg:#F1F5F9;--ink:#0F172A;--mute:#64748B;--line:#E2E8F0;--warn:#B45309;--bad:#B91C1C}
html{-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{padding-top:env(safe-area-inset-top,0px);background:var(--bg);color:var(--ink);font-family:'Archivo',system-ui,sans-serif;font-size:16px;line-height:1.45;font-variant-numeric:tabular-nums}
h1,h2,h3{font-stretch:85%;letter-spacing:-.01em}
[hidden]{display:none!important}
.pn{background:#fff;border:1px solid var(--line);border-radius:6px;padding:16px}
.lb{display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:4px}
.hint{display:block;font-size:12px;color:var(--mute);margin-top:4px}
.in{width:100%;min-height:52px;padding:10px 12px;border:1.5px solid #CBD5E1;border-radius:6px;background:#fff;font:inherit;color:var(--ink)}
textarea.in{min-height:84px}
.in:focus,.btn:focus-visible,.nv:focus-visible,.key:focus-visible,.rw:focus-visible{outline:3px solid #93C5FD;outline-offset:1px;border-color:var(--navy)}
.btn{width:100%;min-height:52px;padding:0 16px;border-radius:6px;background:var(--navy);color:#fff;font:inherit;font-weight:700;border:1.5px solid var(--navy)}
.btn:active{background:var(--navy2)}
.btn.alt{background:#fff;color:var(--navy)}
.btn.em{background:var(--em);border-color:var(--em)}
.btn[disabled]{background:#CBD5E1;border-color:#CBD5E1;color:#64748B}
.btn.sm{width:auto;min-height:44px;padding:0 14px}
.rl{border-top:1px solid var(--line)}
.rl:first-child{border-top:0}
.st{font-size:12px;font-weight:700;padding:2px 8px;border-radius:4px;border:1px solid currentColor}
.ok{color:var(--em)}.wn{color:var(--warn)}.bd{color:var(--bad)}.mu{color:var(--mute)}
.ruler{height:14px;background:rgba(255,255,255,.18);position:relative;border-radius:2px;overflow:hidden}
.ruler.dk{background:#E2E8F0}
.ruler i{position:absolute;inset:0 auto 0 0;background:#fff;display:block}
.ruler.dk i{background:var(--navy)}
.ruler::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),rgba(15,23,42,.45) calc(10% - 1px),rgba(15,23,42,.45) 10%)}
.nv{flex:1;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11.5px;font-weight:600;color:var(--mute);border-top:3px solid transparent;background:#fff}
.nv[aria-current=page]{color:var(--navy);border-top-color:var(--navy)}
.nv svg,.rw svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rw{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:0 4px;text-align:left;font-weight:600;border-top:1px solid var(--line);background:none}
.key{min-height:64px;border:1.5px solid #CBD5E1;border-radius:6px;background:#fff;font-size:26px;font-weight:600}
.key:active{background:#E2E8F0}
.dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--navy)}
.dot.f{background:var(--navy)}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{text-align:left;font-weight:700;border-bottom:2px solid var(--ink);padding:6px 4px;vertical-align:bottom}
table.t td{border-bottom:1px solid var(--line);padding:6px 4px;vertical-align:top}
table.t th.r,.r{text-align:right}
table.t th.r,table.t td.r{padding-right:14px}
#print{position:fixed;inset:0;background:#fff;overflow:auto;z-index:60;color:#000}
.doc{max-width:760px;margin:0 auto;padding:20px 24px 60px;font-family:'Archivo',Arial,sans-serif;font-size:13px}
.kop{text-align:center;border-bottom:3px double #000;padding-bottom:8px;margin-bottom:14px}
.ttd{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:36px;text-align:center;font-size:13px}
.ttd div{min-height:110px}
@media print{body>*:not(#print){display:none!important}#print{position:static;overflow:visible}.noprint{display:none!important}.doc{padding:0;max-width:none}}

/* ===== DESKTOP (>= 1024 px): sidebar kiri, konten lebar, grid dua kolom. Ponsel tidak berubah. ===== */
#side,.lgbrand{display:none}
@media (min-width:1024px){
 /* Login terbagi: panel merek + papan PIN */
 #login{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);min-height:100vh}
 .lgbrand{display:flex;flex-direction:column;justify-content:center;gap:20px;padding:64px;background:var(--navy);color:#fff}
 .lgbrand h2{font-size:40px;font-weight:800;line-height:1.05;font-stretch:80%}
 .lgbrand .lgtag{font-size:18px;max-width:440px;opacity:.85}
 .lgbrand ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:12px;max-width:440px}
 .lgbrand li{padding-left:16px;border-left:3px solid #34D399;font-weight:600}
 .lgform{max-width:400px!important;min-height:0!important;margin:auto!important;width:100%;padding:48px 0!important;justify-content:center}
 .lgform .mt-auto{margin-top:32px}
 .key{min-height:60px}

 /* Pengaturan awal sebagai kartu di tengah */
 #setup{max-width:680px!important;min-height:0!important;margin:32px auto!important;padding:40px 40px 48px!important;background:#fff;border:1px solid var(--line);border-radius:8px}

 /* Kerangka aplikasi */
 #main{display:grid;grid-template-columns:264px minmax(0,1fr);grid-template-rows:auto 1fr;max-width:none!important;margin:0!important}
 #side{display:flex;flex-direction:column;grid-column:1;grid-row:1/span 2;position:sticky;top:0;height:100vh;background:var(--navy2);color:#fff;padding:24px 14px 20px;overflow-y:auto}
 .sd-brand{display:flex;flex-direction:column;gap:2px;padding:0 10px 20px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.14)}
 .sd-brand b{font-size:19px;font-weight:800;font-stretch:80%;letter-spacing:-.01em}
 .sd-brand span{font-size:12.5px;opacity:.7}
 .sd-list{display:flex;flex-direction:column;gap:4px}
 .sd{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 12px;border-radius:6px;border-left:3px solid transparent;color:#CBD5E1;font-weight:600;text-align:left;background:none}
 .sd:hover{background:rgba(255,255,255,.08);color:#fff}
 .sd[aria-current=page]{background:rgba(255,255,255,.13);color:#fff;border-left-color:#34D399}
 .sd:focus-visible{outline:3px solid #93C5FD;outline-offset:1px}
 .sd svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .sd-foot{margin-top:auto;padding:16px 10px 0;font-size:11.5px;line-height:1.4;opacity:.55}
 #nav{display:none!important}
 #main>header{grid-column:2;background:#fff!important;color:var(--ink);border-bottom:1px solid var(--line);padding:14px 32px!important}
 #main>header h1{font-size:22px}
 #main>header p{opacity:1;color:var(--mute)}
 #main>header button:last-child{border-color:#CBD5E1;color:var(--navy)}
 #main>header button:last-child:hover{background:var(--bg)}
 #view{grid-column:2;width:100%;max-width:1180px;padding:28px 32px 56px!important}
 #toast{left:calc(50% + 132px)}

 /* Halaman satu kolom: batasi lebar agar baris tetap terbaca */
 #view[data-p=menu],#view[data-p=setting],#view[data-p=mingguan],#view[data-p^=set]:not([data-p=setting]){max-width:760px;margin-right:auto}
 #view[data-p=stok]{max-width:920px}

 /* Beranda: ringkasan di atas, progres RAB dan aktivitas berdampingan */
 .dg{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px 24px;align-items:stretch}
 .dg>*{margin-top:0!important}
 .dg-hero{display:flex;flex-direction:column;justify-content:center}
 .dg-l>h2:first-child,.dg-r>h2:first-child{margin-top:0}
 .dg-l,.dg-r{align-self:start}

 /* Halaman isian: formulir kiri, riwayat kanan */
 #view[data-p=masuk],#view[data-p=keluar],#view[data-p=progres],#view[data-p=absen]{display:grid;grid-template-columns:minmax(380px,460px) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:28px;align-items:start}
 #view[data-p=masuk]>form,#view[data-p=keluar]>form,#view[data-p=progres]>form,#view[data-p=absen]>form{grid-column:1;grid-row:1/span 2}
 #view[data-p=masuk]>h2,#view[data-p=keluar]>h2,#view[data-p=progres]>h2,#view[data-p=absen]>h2{grid-column:2;grid-row:1;margin-top:0}
 #view[data-p=masuk]>section,#view[data-p=keluar]>section,#view[data-p=progres]>section,#view[data-p=absen]>section{grid-column:2;grid-row:2}
 #view[data-p=masuk]>div:only-child,#view[data-p=keluar]>div:only-child,#view[data-p=progres]>div:only-child,#view[data-p=absen]>div:only-child{grid-column:1/-1;max-width:560px}

 /* Kas dan Laporan: pembuka lebar penuh, lalu dua kolom */
 #view[data-p=kas],#view[data-p=laporan]{display:grid;column-gap:28px;row-gap:12px;grid-template-rows:auto auto 1fr;align-items:start}
 #view[data-p=kas]{grid-template-columns:minmax(380px,460px) minmax(0,1fr)}
 #view[data-p=laporan]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 #view[data-p=kas]>:nth-child(1),#view[data-p=laporan]>:nth-child(1){grid-column:1/-1;grid-row:1;margin-bottom:0}
 #view[data-p=kas]>:nth-child(2),#view[data-p=laporan]>:nth-child(2){grid-column:1;grid-row:2}
 #view[data-p=kas]>:nth-child(3),#view[data-p=laporan]>:nth-child(3){grid-column:1;grid-row:3}
 #view[data-p=kas]>:nth-child(4),#view[data-p=laporan]>:nth-child(4){grid-column:2;grid-row:2}
 #view[data-p=kas]>:nth-child(5),#view[data-p=laporan]>:nth-child(5){grid-column:2;grid-row:3}
 #view[data-p=kas]>h2,#view[data-p=laporan]>h2{margin:0}

 /* Cetak tetap seperti semula */
 .doc{max-width:820px}
}
@media (min-width:1440px){#view{max-width:1320px}}
@media print{#side{display:none!important}}