/* WMS Mofmofriends (10 Okt 2026). Satu lembar gaya untuk dua tema.
   Tema dipasang lewat atribut data-theme di <html>: light | dark. */
:root{
  --bg:#F4F1EC;--side:#FBF9F6;--card:#FFFFFF;--line:#E7E1D8;--line2:#F0EBE4;--ink:#1C1917;--mut:#5F574F;--soft:#F8F5F0;
  --acc:#8C4A24;--accInk:#FFFFFF;--chip:#F1E7DD;--chipInk:#6E3A1C;--bar:#E3D3C3;--track:#EADFD3;--strong:#1C1917;--strongInk:#FFFFFF;
  --navOn:#1C1917;--navOnInk:#FFFFFF;--wBg:#FDF3E7;--wLine:#F3D9BC;--wInk:#9A3412;--okBg:#E3F1EA;--okInk:#1E5A3B;--iBg:#E0EAFB;--iInk:#1E40AF;
  --nBg:#F1EDE7;--nInk:#4A433C;--mid:#C08A5B;--low:#EBD9C6;--scrim:rgba(28,25,23,.38);--shadow:0 18px 48px rgba(28,25,23,.18);
  --font:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#0D1014;--side:#0F1318;--card:#141A21;--line:#253040;--line2:#1B232C;--ink:#E8EDF2;--mut:#9AA6B4;--soft:#10151B;
  --acc:#F2A541;--accInk:#0D1014;--chip:#2A2116;--chipInk:#F2C27E;--bar:#2C3744;--track:#2C3744;--strong:#E8EDF2;--strongInk:#0D1014;
  --navOn:#1B232C;--navOnInk:#F2A541;--wBg:#2A1A10;--wLine:#5A3A26;--wInk:#FFB27A;--okBg:#123329;--okInk:#6FE0C4;--iBg:#14253D;--iInk:#8DBBFF;
  --nBg:#1E2630;--nInk:#B4BECA;--mid:#8A6A3C;--low:#3A4654;--scrim:rgba(5,7,10,.62);--shadow:0 18px 48px rgba(0,0,0,.55);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--font);-webkit-font-smoothing:antialiased}
body.ganti-tema,body.ganti-tema *{transition:background-color .35s ease,color .35s ease,border-color .35s ease}
a{color:var(--acc)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
.num{font-family:var(--mono);font-feature-settings:"tnum" 1}
.lbl{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:8px}

/* ---------- kerangka ---------- */
.app{display:flex;flex-wrap:wrap;min-height:100vh}
.side{flex:1 1 240px;max-width:268px;padding:20px 14px;display:flex;flex-direction:column;gap:2px;background:var(--side);border-right:1px solid var(--line)}
.merek{display:flex;align-items:center;gap:12px;padding:4px 8px 18px}
.logo{width:42px;height:42px;border-radius:12px;background:var(--acc);color:var(--accInk);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;flex:none}
.merek b{display:block;font-size:16px}.merek small{display:block;font-size:13px;color:var(--mut)}
.nv{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border-radius:10px;text-decoration:none;font-weight:600;font-size:15px;color:var(--mut);border:0;background:transparent;width:100%;text-align:left}
.nv:hover{background:var(--line2);color:var(--ink)}
.nv.on{background:var(--navOn);color:var(--navOnInk)}
.nv svg{flex:none}
.sb{display:flex;align-items:center;min-height:40px;padding:0 12px;margin-left:30px;border-radius:8px;text-decoration:none;font-weight:600;font-size:14px;color:var(--mut)}
.sb:hover{color:var(--ink);background:var(--line2)}
.sb.on{background:var(--chip);color:var(--chipInk)}
.side-kaki{margin-top:auto;padding:14px 8px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;font-size:13px;color:var(--mut)}
.main{flex:999 1 560px;min-width:0;padding:18px 32px 56px;display:flex;flex-direction:column;gap:20px;max-width:1240px}
.atas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.cari{flex:0 1 440px;height:46px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--mut);display:flex;align-items:center;gap:10px;padding:0 14px;text-align:left;font-size:15px}
.kbd{font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:6px;padding:2px 6px}
.alat{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ikon{width:46px;height:46px;border:1px solid var(--line);border-radius:12px;background:var(--card);display:flex;align-items:center;justify-content:center;position:relative}
.saklar{height:46px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:14px;font-weight:700;display:flex;align-items:center;gap:10px}
.rel{width:42px;height:24px;border-radius:999px;background:var(--track);display:flex;align-items:center;padding:2px}
.tombol-rel{width:20px;height:20px;border-radius:50%;background:var(--acc);transition:transform .3s cubic-bezier(.5,1.6,.4,1)}
html[data-theme="dark"] .tombol-rel{transform:translateX(18px)}
.kepala{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.kepala small{display:block;font-size:14px;color:var(--mut);font-weight:600}
.kepala h1{margin:4px 0 0;font-size:34px;line-height:1.15;font-weight:800;letter-spacing:-.02em}

/* ---------- komponen ---------- */
.kartu{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.kartu h2{margin:0;font-size:19px;font-weight:800}
.baris{display:flex;align-items:center;justify-content:space-between;gap:12px}
.grid-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.kpi{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink)}
.kpi .angka{font-family:var(--mono);font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.kpi p{margin:0;font-size:14px;color:var(--mut)}
.pil{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap}
.pil.ok{background:var(--okBg);color:var(--okInk)}.pil.w{background:var(--wBg);color:var(--wInk)}.pil.i{background:var(--iBg);color:var(--iInk)}.pil.n{background:var(--nBg);color:var(--nInk)}.pil.c{background:var(--chip);color:var(--chipInk)}.pil.s{background:var(--strong);color:var(--strongInk)}
.btn{height:46px;padding:0 18px;border:0;border-radius:12px;background:var(--acc);color:var(--accInk);font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn.dua{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn.gelap{background:var(--strong);color:var(--strongInk)}
.btn:active,.nv:active,.sb:active,.ikon:active,.saklar:active,.chipbtn:active,.tugas:active{transform:scale(.97)}
.btn,.nv,.ikon,.saklar,.chipbtn,.tugas{transition:transform .12s ease,background-color .2s ease}
.seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px;gap:2px;flex-wrap:wrap}
.seg button{height:38px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--mut);font-size:14px;font-weight:700}
.seg button.on{background:var(--chip);color:var(--chipInk)}
.chipbtn{height:38px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:14px;font-weight:700;color:var(--ink)}
.chipbtn.on{background:var(--strong);color:var(--strongInk);border-color:var(--strong)}
.tabel-box{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:13px;font-weight:600;color:var(--mut);text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px;border-bottom:1px solid var(--line2);font-size:15px;white-space:nowrap}
tr.klik{cursor:pointer}tr.klik:hover td{background:var(--soft)}
.tugas{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;border:1px solid var(--line2);text-decoration:none;color:var(--ink);min-height:52px;background:transparent;width:100%;text-align:left}
.tugas:hover{background:var(--soft)}
.tanda{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex:none}
.tanda.w{background:var(--wBg);color:var(--wInk)}.tanda.i{background:var(--iBg);color:var(--iInk)}.tanda.n{background:var(--nBg);color:var(--nInk)}.tanda.ok{background:var(--okBg);color:var(--okInk)}
.tugas b{display:block;font-size:15px}.tugas span.ket{display:block;font-size:14px;color:var(--mut)}
.wawasan{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:var(--chip);color:var(--chipInk);font-size:15px;line-height:1.55}
.kosong{padding:28px;text-align:center;color:var(--mut)}
.peringatan{padding:14px 16px;border-radius:14px;background:var(--wBg);border:1px solid var(--wLine);color:var(--wInk);font-size:14px}

/* grafik */
.batang-area{display:flex;align-items:flex-end;gap:14px;height:220px;border-bottom:1px solid var(--line);padding:0 6px}
.batang-kol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;min-width:0}
.batang{width:100%;max-width:64px;border-radius:8px 8px 3px 3px;background:var(--bar);transform-origin:bottom;animation:tumbuh .7s cubic-bezier(.2,.8,.2,1) both}
.batang.terakhir{background:var(--acc)}
.label-batang{display:flex;gap:14px;padding:0 6px}.label-batang span{flex:1;text-align:center;font-size:13px;color:var(--mut);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mendatar{height:10px;border-radius:6px;background:var(--line2);overflow:hidden}
.mendatar > span{display:block;height:100%;border-radius:6px;transform-origin:left;animation:lebar .8s cubic-bezier(.2,.8,.2,1) both}
.tumpuk{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px}
.tumpuk span{transform-origin:left;animation:lebar .8s cubic-bezier(.2,.8,.2,1) both}

/* peta gudang */
.zona{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center}
.sel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.sel{height:46px;border-radius:8px;border:0;padding:0 0 4px 6px;display:flex;align-items:flex-end;font-family:var(--mono);font-size:12px;font-weight:600}
.sel.l0{background:transparent;border:1px dashed var(--line);color:var(--mut)}.sel.l1{background:var(--low);color:var(--chipInk)}.sel.l2{background:var(--mid);color:#fff}.sel.l3{background:var(--strong);color:var(--strongInk)}
.sel.on{box-shadow:0 0 0 3px var(--acc)}
.sel.rendah{outline:2px solid var(--wInk);outline-offset:-2px}

/* matriks gerai */
.mx td,.mx th{text-align:center;padding:7px}
.mx td:first-child,.mx th:first-child{text-align:left;padding-left:16px}
.mx .v{display:inline-flex;min-width:44px;height:32px;align-items:center;justify-content:center;border-radius:8px;background:var(--soft);font-family:var(--mono);font-weight:600}
.mx .v.nol{background:transparent;color:var(--mut)}

/* garis waktu paspor */
.jejak{display:grid;grid-template-columns:86px 30px 1fr;gap:12px}
.jejak .tgl{padding-top:12px;text-align:right;font-family:var(--mono);font-size:14px;font-weight:600}
.jejak .tiang{display:flex;flex-direction:column;align-items:center}
.jejak .tiang i{width:2px;background:var(--line);flex:1}
.jejak .tiang i:first-child{flex:0 0 14px}
.jejak .bulat{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex:none}
.jejak .isi{padding:10px 0 18px}

/* palet cari */
.tirai{position:fixed;inset:0;background:var(--scrim);z-index:40;display:flex;justify-content:center;align-items:flex-start;padding:90px 16px 16px;animation:muncul .18s ease both}
.palet{width:min(700px,100%);background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;animation:naik .22s cubic-bezier(.2,.8,.2,1) both}
.palet-input{display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--line)}
.palet-input input{flex:1;height:64px;border:0;background:transparent;font-size:19px;outline:none}
.palet-hasil{max-height:min(60vh,520px);overflow-y:auto;padding:8px}
.palet-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;border:0;background:transparent;width:100%;text-align:left;min-height:50px;color:var(--ink)}
.palet-item.on,.palet-item:hover{background:var(--soft)}
.palet-grup{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);padding:10px 10px 4px}

/* masuk */
.masuk{min-height:100vh;display:flex;flex-wrap:wrap}
.masuk-kiri{flex:1 1 520px;padding:48px;background:var(--strong);color:var(--strongInk);display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:380px}
html[data-theme="dark"] .masuk-kiri{background:var(--card);color:var(--ink)}
.masuk-kanan{flex:1 1 480px;padding:48px 24px;display:flex;align-items:center;justify-content:center;position:relative}
.masuk form{width:100%;max-width:420px;display:flex;flex-direction:column;gap:18px}
.masuk input[type=password]{height:56px;border:1px solid var(--line);border-radius:12px;padding:0 16px;font-size:18px;background:var(--card)}
.centang{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px}
.centang input{width:22px;height:22px;accent-color:var(--acc)}
.galat{color:var(--wInk);font-weight:700;font-size:15px;min-height:22px}

/* toast */
.toast-box{position:fixed;right:20px;bottom:20px;z-index:50;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.toast{padding:14px 18px;border-radius:14px;background:var(--strong);color:var(--strongInk);font-weight:700;box-shadow:var(--shadow);animation:toastMasuk .35s cubic-bezier(.2,1.3,.4,1) both;max-width:360px}
.toast.w{background:var(--wInk);color:#fff}

/* scan */
.scan-box{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:16px;background:var(--strong);color:var(--strongInk)}
.scan-box input{width:100%;min-width:0;height:58px;border:0;border-radius:14px;padding:0 18px;font-size:20px;background:var(--card);color:var(--ink)}
.scan-box{transition:background-color .25s ease}
.scan-box.ok{background:#1F6B45;color:#fff}
.scan-box.tolak{background:#8E2424;color:#fff}
.scan-box.ok input{animation:flashOk .6s ease}
.scan-box.tolak input{animation:geleng .45s ease;box-shadow:0 0 0 3px #E5484D}
.scan-pesan{font-size:15px;font-weight:700;min-height:22px}

/* label QR (cetak) */
.lembar-label{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px dashed var(--line)}
.label-qr{display:flex;align-items:center;gap:16px;padding:14px 16px;border:1px dashed var(--line);background:#fff;color:#1C1917}
.label-qr .kode{font-family:var(--mono);font-size:46px;line-height:1;font-weight:600}
.label-qr .qr{width:118px;height:118px;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--mono);color:#857C72}
.label-qr svg,.label-qr img{width:118px;height:118px;flex:none}
@media print{
  .side,.atas,.kepala .alat,.jangan-cetak{display:none !important}
  .main{padding:0;max-width:none}
  body{background:#fff}
  .lembar-label{border:0}
  .label-qr{break-inside:avoid;height:46mm}
}

.grid-2>*,.grid-3>*,.grid-kpi>*,.main section>*{min-width:0}
.tugas b,.tugas .ket{overflow-wrap:anywhere}
/* ---------- gerak ---------- */
.tenang .muncul,.tenang .batang,.tenang .mendatar span{animation:none !important}
.muncul{animation:naik .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes naik{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes muncul{from{opacity:0}to{opacity:1}}
@keyframes tumbuh{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes lebar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes toastMasuk{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes flashOk{0%{box-shadow:0 0 0 0 rgba(67,198,172,.0)}30%{box-shadow:0 0 0 6px rgba(67,198,172,.65)}100%{box-shadow:0 0 0 0 rgba(67,198,172,0)}}
@keyframes geleng{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@keyframes putar{to{transform:rotate(360deg)}}
.putar{width:34px;height:34px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--acc);animation:putar .9s linear infinite}
.kerangka{background:linear-gradient(90deg,var(--line2) 0,var(--soft) 50%,var(--line2) 100%);background-size:200% 100%;animation:kilau 1.2s linear infinite;border-radius:12px}
@keyframes kilau{to{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ---------- HP ---------- */
@media (max-width:760px){
  .side{max-width:none;flex-basis:100%;border-right:0;border-bottom:1px solid var(--line);padding:12px}
  .side .nav-isi{display:flex;flex-wrap:wrap;gap:4px}
  .side .nv{width:auto;min-height:42px}
  .sb{margin-left:0}
  .side-kaki{display:none}
  .main{padding:14px 16px 48px}
  .atas .cari{flex:1 1 100%}
  .atas .alat{width:100%;justify-content:flex-end}
  .atas .alat .pil,.atas .kbd{display:none}
  .atas .alat{gap:6px}
  .grid-kpi{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid-kpi .kpi{padding:14px}
  .grid-kpi .angka{font-size:26px}
  .label-batang span{font-size:11px;overflow:visible;text-overflow:clip}
  .kepala h1{font-size:28px}
  .grid-2{grid-template-columns:1fr}
  .masuk-kiri{padding:28px;min-height:auto}
  .masuk-kanan{padding:28px 16px}
}