/* QN Asset v1.0 — gaya dari Mockup v14 yang sudah disetujui */
:root{
  --bg:#eef3f2; --surface:#ffffff; --surface-2:#f5f8f7; --ink:#14201e; --ink-2:#4e5f5c;
  --muted:#7d8c89; --line:#dfe7e5; --brand:#0d6b64; --brand-strong:#094d48; --brand-soft:#e0efed;
  --on-brand:#ffffff; --good:#0ca30c; --good-text:#006300; --warn:#fab219; --warn-text:#7a5200;
  --serious:#ec835a; --critical:#d03b3b; --critical-text:#a02020; --info:#2a78d6; --info-text:#1c5cab;
  --chip-gray:#eceff0; --radius:12px; --shadow:0 1px 3px rgba(20,32,30,.08),0 4px 14px rgba(20,32,30,.06);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    --bg:#0d1413; --surface:#16211f; --surface-2:#1c2927; --ink:#eef5f4; --ink-2:#a9bbb7;
    --muted:#7d8c89; --line:#2a3835; --brand:#3bb3a7; --brand-strong:#57c7bb; --brand-soft:#12312d;
    --on-brand:#062421; --good-text:#3ecf3e; --warn-text:#fab219; --critical-text:#f07575; --info-text:#7db2f0;
    --chip-gray:#243230; --shadow:0 1px 3px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0d1413; --surface:#16211f; --surface-2:#1c2927; --ink:#eef5f4; --ink-2:#a9bbb7;
  --muted:#7d8c89; --line:#2a3835; --brand:#3bb3a7; --brand-strong:#57c7bb; --brand-soft:#12312d;
  --on-brand:#062421; --good-text:#3ecf3e; --warn-text:#fab219; --critical-text:#f07575; --info-text:#7db2f0;
  --chip-gray:#243230; --shadow:0 1px 3px rgba(0,0,0,.4);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#eef3f2; --surface:#ffffff; --surface-2:#f5f8f7; --ink:#14201e; --ink-2:#4e5f5c;
  --muted:#7d8c89; --line:#dfe7e5; --brand:#0d6b64; --brand-strong:#094d48; --brand-soft:#e0efed;
  --on-brand:#ffffff; --good-text:#006300; --warn-text:#7a5200; --critical-text:#a02020; --info-text:#1c5cab;
  --chip-gray:#eceff0; --shadow:0 1px 3px rgba(20,32,30,.08),0 4px 14px rgba(20,32,30,.06);
  color-scheme:light;
}
*{box-sizing:border-box; margin:0}
html{font-size:14.5px}   /* font global sedikit lebih kecil — tampilan lega, tidak sesak */
body{background:var(--bg); color:var(--ink); font-family:system-ui,"Segoe UI",Roboto,sans-serif; line-height:1.5}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--brand); outline-offset:2px; border-radius:6px}
input,select,textarea{font:inherit; color:var(--ink)}
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} }

/* ===== Topbar aplikasi ===== */
.chrome{position:sticky; top:0; z-index:50; background:var(--surface); border-bottom:1px solid var(--line);
  padding:10px 16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.chrome .logo{display:flex; align-items:center; gap:8px; font-weight:700; font-size:1.05rem}
.chrome .logo .mark{width:30px; height:30px; border-radius:8px; background:var(--brand); color:var(--on-brand);
  display:grid; place-items:center; font-size:.85rem; font-weight:800}
.chrome .tag{font-size:.72rem; color:var(--muted); font-weight:500; letter-spacing:.04em; text-transform:uppercase}
.switcher{background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:3px; gap:3px; margin-left:auto}
.switcher button{padding:8px 16px; border-radius:999px; font-weight:600; font-size:.9rem; color:var(--ink-2)}
.switcher button.on{background:var(--brand); color:var(--on-brand)}
.chrome .userbox{display:flex; align-items:center; gap:10px; font-size:.85rem; margin-left:auto}
.chrome .userbox .nm{font-weight:700}
.chrome .userbox .rl{color:var(--muted); font-size:.78rem}

/* ===== Shared ===== */
.badge{display:inline-flex; align-items:center; gap:5px; font-size:.75rem; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap}
.badge.aktif{background:color-mix(in srgb,var(--good) 14%,transparent); color:var(--good-text)}
.badge.rusak{background:color-mix(in srgb,var(--critical) 13%,transparent); color:var(--critical-text)}
.badge.service{background:color-mix(in srgb,var(--warn) 20%,transparent); color:var(--warn-text)}
.badge.stock{background:color-mix(in srgb,var(--info) 13%,transparent); color:var(--info-text)}
.badge.afkir{background:var(--chip-gray); color:var(--muted)}
.badge.menunggu{background:color-mix(in srgb,var(--warn) 20%,transparent); color:var(--warn-text)}
.badge.disetujui{background:color-mix(in srgb,var(--good) 14%,transparent); color:var(--good-text)}
.badge.ditolak{background:color-mix(in srgb,var(--critical) 13%,transparent); color:var(--critical-text)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); opacity:0;
  background:var(--ink); color:var(--bg); padding:12px 20px; border-radius:10px; font-weight:600; font-size:.95rem;
  z-index:99; transition:all .25s; pointer-events:none; max-width:90vw; text-align:center}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ===== Cabang (HP / laptop) ===== */
.stage{display:none; flex-direction:column; align-items:center; gap:12px; padding:20px 12px 60px}
.stage.on{display:flex}
.viewtoggle{display:flex; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:3px; gap:3px}
.viewtoggle button{padding:7px 16px; border-radius:999px; font-weight:600; font-size:.85rem; color:var(--ink-2)}
.viewtoggle button.on{background:var(--brand-soft); color:var(--brand-strong)}
.viewtoggle-note{font-size:.75rem; color:var(--muted)}
.phone.desktop{width:min(1020px,100%); border-width:2px; border-radius:14px; height:min(820px, calc(100vh - 190px))}
.phone.desktop .screen{padding:22px 30px}
.phone.desktop .sumrow{grid-template-columns:repeat(6,1fr)}
.phone.desktop .bigmenu{grid-template-columns:repeat(3,1fr)}
.phone.desktop .login-wrap{max-width:420px; width:100%; margin:0 auto}
.phone.desktop .form, .phone.desktop .bast, .phone.desktop .success-wrap{max-width:640px; width:100%; margin-left:auto; margin-right:auto}
.phone{width:min(400px,100%); height:min(780px, calc(100vh - 130px)); min-height:560px; background:var(--surface);
  border:8px solid #1f2a28; border-radius:34px; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow)}
.phone .screens{flex:1; overflow-y:auto; background:var(--surface-2)}
.screen{display:none; padding:18px 16px 24px; min-height:100%}
.screen.on{display:flex; flex-direction:column}
.screen.on > :not(.login-wrap):not(.success-wrap){flex:none}
.appbar{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.appbar .back{width:44px; height:44px; border-radius:10px; background:var(--surface); border:1px solid var(--line);
  display:grid; place-items:center; font-size:1.15rem; flex:none}
.appbar h2{font-size:1.15rem}
/* Login (layar penuh, dipakai semua peran) */
.loginpage{display:none; min-height:calc(100vh - 60px); place-items:center; padding:20px}
.loginpage.on{display:grid}
.loginpage .card{width:min(420px,100%); padding:28px 24px}
.login-wrap{display:flex; flex-direction:column; justify-content:center; flex:1 1 auto; gap:14px; padding:10px 6px}
.login-logo{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:12px}
.login-logo .mark{width:64px; height:64px; border-radius:18px; background:var(--brand); color:var(--on-brand);
  display:grid; place-items:center; font-size:1.5rem; font-weight:800}
.login-logo h1{font-size:1.5rem}
.login-logo p{color:var(--ink-2); font-size:.9rem; text-align:center}
.field label{display:block; font-weight:600; font-size:.9rem; margin-bottom:6px}
.field input, .field select, .field textarea{width:100%; padding:13px 14px; border:1.5px solid var(--line);
  border-radius:10px; background:var(--surface); font-size:1rem}
.btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:15px;
  border-radius:12px; font-size:1.05rem; font-weight:700}
.btn.primary{background:var(--brand); color:var(--on-brand)}
.btn.primary:hover{background:var(--brand-strong)}
.btn.ghost{background:var(--surface); border:1.5px solid var(--line); color:var(--ink)}
.btn.danger{background:color-mix(in srgb,var(--critical) 12%,transparent); color:var(--critical-text)}
.btn[disabled]{opacity:.55; cursor:wait}
.demo-note{font-size:.8rem; color:var(--muted); text-align:center}
.err-note{font-size:.85rem; color:var(--critical-text); text-align:center; font-weight:600; min-height:1.2em}
.success-wrap{display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1 1 auto; gap:12px; text-align:center; padding:10px}
.success-wrap .big{font-size:3.4rem}
.success-wrap h2{font-size:1.25rem}
.success-wrap p{color:var(--ink-2); font-size:.92rem}
.success-wrap .btn{width:100%}

/* Beranda cabang */
.hello{margin-bottom:14px}
.hello .who{font-size:1.25rem; font-weight:700}
.hello .where{color:var(--ink-2); font-size:.92rem}
.notif-line{display:flex; gap:9px; align-items:flex-start; background:var(--brand-soft); border:1px solid color-mix(in srgb,var(--brand) 30%,transparent);
  border-radius:10px; padding:10px 12px; font-size:.85rem; margin-bottom:14px}
.sumrow{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px}
.sum{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 8px; text-align:center}
.sum .n{font-size:1.35rem; font-weight:800}
.sum .l{font-size:.72rem; color:var(--ink-2); font-weight:600}
.bigmenu{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px}
.bigmenu button{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 10px;
  display:flex; flex-direction:column; align-items:center; gap:8px; font-weight:700; font-size:.92rem; box-shadow:var(--shadow); position:relative}
.bigmenu .dot{display:none; position:absolute; top:10px; right:12px; width:10px; height:10px; border-radius:50%; background:var(--critical)}
.bigmenu button:hover{border-color:var(--brand)}
.bigmenu .ic{font-size:1.9rem}
.sec-title{font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:0 0 8px}

/* Daftar aset cabang */
.search{display:flex; gap:8px; margin-bottom:10px}
.search input{flex:1; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px; background:var(--surface); font-size:1rem}
.chips{display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; margin-bottom:8px}
.chips button{padding:10px 14px; min-height:44px; border-radius:999px; background:var(--surface); border:1px solid var(--line);
  font-size:.9rem; font-weight:600; white-space:nowrap; color:var(--ink-2)}
.chips button.on{background:var(--brand); border-color:var(--brand); color:var(--on-brand)}
.asset-item{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:12px; margin-bottom:8px; width:100%; text-align:left}
.asset-item:hover{border-color:var(--brand)}
.asset-item .ic{width:44px; height:44px; border-radius:10px; background:var(--brand-soft); display:grid; place-items:center; font-size:1.3rem; flex:none}
.asset-item .t{flex:1; min-width:0}
.asset-item .t .a{font-weight:700; font-size:.95rem}
.asset-item .t .b{font-size:.8rem; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.empty{color:var(--muted); text-align:center; padding:24px 0; font-size:.9rem}

/* Detail aset */
.photo-box{min-height:150px; border-radius:12px; background:var(--brand-soft); display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center;
  font-size:2.6rem; margin-bottom:12px; border:1px solid var(--line); padding:8px}
.photo-box img{height:130px; border-radius:8px; object-fit:cover; cursor:pointer; max-width:100%}
.kv{display:grid; grid-template-columns:130px 1fr; gap:6px 10px; font-size:.9rem; padding:14px}
.kv dt{color:var(--ink-2)}
.kv dd{font-weight:600}
.detail-actions{display:grid; gap:8px; margin-top:14px}
.hist{padding:12px 14px; display:grid; gap:10px}
.hist .h-item{display:flex; gap:10px; font-size:.85rem}
.hist .h-item .d{color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}

/* Form */
.form{display:grid; gap:13px}
.upload{border:2px dashed var(--line); border-radius:12px; padding:20px; display:flex; flex-direction:column;
  align-items:center; gap:6px; background:var(--surface); width:100%; font-weight:600; color:var(--ink-2)}
.upload.done{border-color:var(--good); color:var(--good-text); border-style:solid}
.upload-note{display:block; font-size:.75rem; color:var(--muted); margin-top:5px; text-align:center}
.upload-thumbs{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.upload-thumbs img{width:52px; height:52px; border-radius:8px; object-fit:cover; border:1px solid var(--line)}
.req{color:var(--critical-text)}

/* Tanda tangan */
.sig-box{background:#fff; border:1.5px solid var(--line); border-radius:12px; position:relative; touch-action:none}
.sig-box canvas{display:block; width:100%; height:150px; border-radius:12px}
.sig-box .ph{position:absolute; inset:0; display:grid; place-items:center; color:#9aa8a5; font-size:.85rem; pointer-events:none}
.sig-clear{position:absolute; top:6px; right:6px; font-size:.85rem; font-weight:700; color:var(--info-text);
  background:var(--surface-2); border:1px solid var(--line); padding:8px 16px; border-radius:999px}

/* BAST */
.bast{background:#fff; color:#111; border-radius:10px; padding:20px 18px; font-size:.78rem; line-height:1.5; border:1px solid var(--line)}
.bast h3{text-align:center; font-size:.9rem; text-decoration:underline}
.bast .no{text-align:center; margin-bottom:12px}
.bast table{width:100%; border-collapse:collapse; margin:9px 0; font-variant-numeric:tabular-nums}
.bast th,.bast td{border:1px solid #999; padding:4px 6px; text-align:left}
.bast .sigrow{display:flex; justify-content:space-between; margin-top:14px; text-align:center; gap:10px}
.bast .sigrow img{height:44px}
.pengajuan-item{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:8px}
.pengajuan-item .top{display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:4px}
.pengajuan-item .a{font-weight:700; font-size:.92rem}
.pengajuan-item .b{font-size:.8rem; color:var(--ink-2)}

/* ===== HO ===== */
.ho{display:none; max-width:none; margin:0; padding:18px 18px 60px}  /* lebar penuh — sidebar nempel kiri, area kerja maksimal */
.ho.on{display:block}
.ho-shell{display:flex; gap:18px; align-items:flex-start}
.side{width:200px; flex:none; position:sticky; top:72px}
.side .who{padding:14px; border-bottom:1px solid var(--line)}
.side .who .a{font-weight:700; font-size:.95rem}
.side .who .b{font-size:.78rem; color:var(--muted)}
.side nav{padding:8px; display:grid; gap:2px}
.side nav button{display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:9px;
  font-weight:600; font-size:.9rem; color:var(--ink-2); text-align:left; position:relative}
.side nav button:hover{background:var(--surface-2)}
.side nav button.on{background:var(--brand-soft); color:var(--brand-strong)}
.side nav .n{margin-left:auto; background:var(--critical); color:#fff; font-size:.7rem; font-weight:700;
  padding:1px 7px; border-radius:999px}
.main{flex:1; min-width:0; display:grid; gap:16px}
.page{display:none}
/* minmax(0,1fr): tanpa ini, tabel lebar memaksa seluruh halaman melar ke samping */
.page.on{display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
.page-h{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.page-h h2{font-size:1.3rem}
.page-h .sub{color:var(--muted); font-size:.85rem}
.page-h .right{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.btn-sm{padding:9px 14px; border-radius:9px; font-weight:600; font-size:.85rem; display:inline-flex; align-items:center; gap:7px}
.btn-sm.primary{background:var(--brand); color:var(--on-brand)}
.btn-sm.ghost{background:var(--surface); border:1px solid var(--line)}
.btn-sm.good{background:color-mix(in srgb,var(--good) 14%,transparent); color:var(--good-text)}
.btn-sm.bad{background:color-mix(in srgb,var(--critical) 12%,transparent); color:var(--critical-text)}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.kpi{padding:14px 16px}
.kpi .l{font-size:.78rem; font-weight:600; color:var(--ink-2); display:flex; gap:6px; align-items:center}
.kpi .n{font-size:1.7rem; font-weight:800; margin-top:2px}
.kpi .s{font-size:.75rem; color:var(--muted)}
.two-col{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:16px}
@media(max-width:980px){ .two-col{grid-template-columns:minmax(0,1fr)} .side{width:64px} .side .who,.side nav button span.txt{display:none}
  .side nav button{justify-content:center} .side nav .n{position:absolute; top:2px; right:2px; margin:0; transform:none} }
.panel{padding:16px}
.panel h3{font-size:.95rem; margin-bottom:12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.panel h3 .more{margin-left:auto; font-size:.8rem; font-weight:600; color:var(--info-text)}

.hbar{display:grid; gap:9px}
.hbar .row{display:grid; grid-template-columns:88px 1fr 52px; align-items:center; gap:10px; font-size:.83rem}
.hbar .lab{color:var(--ink-2); font-weight:600; text-align:right}
.hbar .track{display:block; height:22px; border-radius:0 4px 4px 0; position:relative; background:transparent}
.hbar .fill{display:block; height:100%; background:var(--brand); border-radius:0 4px 4px 0; min-width:3px; transition:width .4s}
.hbar .row:hover .fill{background:var(--brand-strong)}
.hbar .val{font-weight:700; font-variant-numeric:tabular-nums}
.attn{display:grid; gap:8px}
.attn button, .attn a{display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface-2); font-size:.86rem; font-weight:600; text-align:left; width:100%; color:inherit; text-decoration:none}
.attn button:hover, .attn a:hover{border-color:var(--brand)}
.attn .n{margin-left:auto; font-weight:800; font-size:1.05rem; font-variant-numeric:tabular-nums}
.attn .crit{color:var(--critical-text)} .attn .warnc{color:var(--warn-text)}
.lap-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface-2); font-size:.86rem; font-weight:600}
.lap-item .lap-btns{margin-left:auto; display:flex; gap:6px; flex:none}
.lap-item .lap-btns a{background:var(--surface)}

.tablewrap{overflow-x:auto; max-width:100%}
table.data{width:100%; border-collapse:collapse; font-size:.85rem; min-width:640px}
/* tabel "rapat": lebar mengikuti isi — kolom angka merapat ke kolom nama */
table.data.rapat{width:auto; min-width:0}
table.data.rapat th, table.data.rapat td{padding-left:13px; padding-right:13px}
table.data.rapat td:first-child, table.data.rapat th:first-child{min-width:170px}
table.data th{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); text-align:left;
  padding:9px 10px; border-bottom:1.5px solid var(--line); white-space:nowrap}
table.data td{padding:10px; border-bottom:1px solid var(--line); vertical-align:middle; font-variant-numeric:tabular-nums}
table.data td.num, table.data th.num{text-align:right}
table.data tr:hover td{background:var(--surface-2)}
table.data .strong{font-weight:700}
table.data tr.subtotal td{font-weight:700; background:var(--surface-2)}
table.data tr.grand td{font-weight:800; background:var(--brand-soft)}
table.data tr.clickable{cursor:pointer}
.filters{display:flex; gap:8px; flex-wrap:wrap}
.drill{cursor:pointer}
.drill:hover{color:var(--brand-strong); text-decoration:underline}
th.sortable{cursor:pointer; user-select:none}
th.sortable:hover{color:var(--brand-strong)}
th.sortable .arr{font-size:.6rem}
.filters select, .filters input{padding:9px 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface); font-size:.87rem}
.tabs{display:flex; gap:4px; border-bottom:1.5px solid var(--line); flex-wrap:wrap}
.tabs button{padding:10px 16px; font-weight:600; font-size:.88rem; color:var(--ink-2); border-bottom:3px solid transparent; margin-bottom:-1.5px}
.tabs button.on{color:var(--brand-strong); border-color:var(--brand)}
.feed{display:grid; gap:0}
.feed .f{display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.84rem; align-items:baseline}
.feed .f:last-child{border:none}
.feed .d{color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; font-size:.78rem}

/* pagination */
.pager{display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:10px; font-size:.85rem; color:var(--muted); flex-wrap:wrap}
.pager button{padding:8px 13px; border:1px solid var(--line); border-radius:8px; background:var(--surface); font-weight:600}
.pager button[disabled]{opacity:.4; cursor:default}

/* modal */
.overlay{position:fixed; inset:0; background:rgba(10,20,18,.5); display:none; place-items:center; z-index:80; padding:16px}
.overlay.on{display:grid}
.modal{background:var(--surface); border-radius:14px; max-width:520px; width:100%; max-height:88vh; overflow-y:auto; padding:20px}
.modal.wide{max-width:760px}
.modal h3{font-size:1.05rem; margin-bottom:4px}
.modal .sub{color:var(--muted); font-size:.82rem; margin-bottom:14px}
.modal .kv{padding:0; margin-bottom:12px}
.modal .photos{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px}
.modal .photos figure{margin:0}
.modal .photos .ph{height:78px; border-radius:9px; background:var(--brand-soft); display:grid; place-items:center; font-size:1.5rem; overflow:hidden}
.modal .photos .ph img{width:100%; height:100%; object-fit:cover; cursor:pointer}
.modal .photos figcaption{font-size:.68rem; color:var(--muted); margin-top:3px; text-align:center}
.modal .acts{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
.modal .form{margin-bottom:4px}
.rejbox{display:none; margin:0 0 12px}
.rejbox.on{display:block}
.rejbox textarea{width:100%; padding:11px 12px; border:1.5px solid var(--critical); border-radius:9px; background:var(--surface)}
.cab-chips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.cab-chips span{background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-size:.8rem; font-weight:600}
.foto-full{max-width:92vw; max-height:88vh; border-radius:10px}

/* ===================================================================
   LAYAR KECIL (HP) — buang bingkai "HP di dalam HP" milik mockup:
   aplikasi mengisi layar penuh seperti aplikasi biasa.
   =================================================================== */
@media (max-width:760px){
  html{font-size:15px}

  /* bar atas dirapatkan */
  .chrome{padding:8px 10px; gap:8px}
  .chrome .logo{font-size:.95rem; gap:6px}
  .chrome .logo .mark{width:26px; height:26px; font-size:.75rem}
  .chrome .tag{display:none}
  .switcher{margin-left:auto}
  .switcher button{padding:7px 11px; font-size:.8rem}
  .chrome .userbox{gap:6px; font-size:.78rem; width:100%; margin-left:0; order:9;
    border-top:1px solid var(--line); padding-top:7px}
  .chrome .userbox .rl{display:none}
  .chrome .userbox .btn-sm{padding:7px 10px; font-size:.78rem}

  /* sisi cabang: layar penuh, tanpa bingkai telepon */
  #viewtoggle-wrap{display:none!important}   /* !important: elemen punya style inline */
  .stage{padding:0; gap:0; align-items:stretch}
  .phone, .phone.desktop{width:100%; max-width:none; height:auto; min-height:calc(100vh - 96px);
    border:none; border-radius:0; box-shadow:none; background:var(--surface-2)}
  .phone .screens{overflow-y:visible}
  .screen{padding:14px 13px 28px}
  .phone.desktop .screen{padding:14px 13px 28px}
  .phone.desktop .bigmenu{grid-template-columns:1fr 1fr}
  .phone.desktop .sumrow{grid-template-columns:repeat(3,1fr)}
  .phone.desktop .form, .phone.desktop .bast, .phone.desktop .success-wrap{max-width:none}

  /* sisi HO: menu jadi baris atas yang bisa digeser (ikon saja terlalu samar di HP) */
  .ho{padding:10px 10px 50px}
  .ho-shell{flex-direction:column; gap:10px}
  .side{width:100%; position:sticky; top:52px; z-index:20}
  .side .who{display:none}
  .side nav{display:flex; gap:6px; padding:6px; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .side nav button{width:auto; flex:0 0 auto; flex-direction:column; align-items:center;
    gap:2px; padding:8px 11px; font-size:.7rem; line-height:1.15; text-align:center}
  .side nav button span.txt{display:inline; white-space:nowrap}
  .side nav .n{position:absolute; top:1px; right:3px; margin:0; font-size:.62rem; padding:0 5px}
  .page-h h2{font-size:1.15rem}
  .page-h .sub{display:none}
  .page-h .right{width:100%; margin-left:0}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
  .panel{padding:12px}
  .filters input, .filters select{width:100%; max-width:none!important; flex:1 1 100%}

  /* modal & form nyaman disentuh */
  .modal{padding:16px; max-height:92vh}
  .modal.wide #da-m-grid{grid-template-columns:1fr}
  .modal .acts{gap:6px}
  .modal .acts .btn-sm{flex:1; justify-content:center; padding:11px 12px}
  .field input, .field select, .field textarea{font-size:16px}  /* cegah zoom otomatis iOS */
  .btn-sm{padding:10px 13px}
  .lap-item{flex-direction:column; align-items:flex-start; gap:8px}
  .lap-item .lap-btns{margin-left:0; width:100%}
  .lap-item .lap-btns a{flex:1; justify-content:center}
}

/* HP kecil (≤380px): kartu beranda 2 kolom tetap muat */
@media (max-width:380px){
  .sumrow{grid-template-columns:repeat(3,1fr); gap:6px}
  .sum .n{font-size:1.15rem}
  .bigmenu{gap:8px}
  .bigmenu button{padding:14px 8px; font-size:.85rem}
  .bigmenu .ic{font-size:1.6rem}
}

/* ---- riwayat waktu kiriman (timeline) ---- */
.timeline{display:flex;flex-direction:column;gap:3px;min-width:230px}
.tl-row{display:flex;align-items:baseline;gap:6px;font-size:.8rem;line-height:1.35}
.tl-ik{flex:none;width:1.1em}
.tl-l{flex:none;min-width:66px;font-weight:600;color:var(--ink,#1d2624)}
.tl-w{color:var(--muted);white-space:nowrap}
.tl-k{color:var(--muted);font-style:italic}
.tl-pending{opacity:.45}
.tl-pending .tl-l{font-weight:400}
.tl-now{margin-top:3px;font-size:.76rem;font-weight:600;color:#8a6100;
  background:#fdf6e6;border:1px solid #e8d5a3;border-radius:6px;padding:2px 7px;display:inline-block}

/* ── kotak bernomor (standar owner — mockup disetujui 23 Agu 2026) ── */
.bxno{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  padding:0 6px;border-radius:7px;background:#e3f0ee;color:#0d6b64;font-size:.8rem;
  font-weight:800;margin-right:8px;flex:0 0 auto}
.bxd{color:var(--muted,#5b6f6c);font-size:.78rem;margin:2px 0 10px}
.bxh-luar{margin:16px 0 8px;font-size:.95rem;display:flex;align-items:center}