:root{
  color-scheme:light;
  --bg:#f6f8fb;
  --panel:#ffffff;
  --panel-soft:#f8fafc;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --line-soft:#eef2f7;
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --primary-soft:#dbeafe;
  --accent:#14b8a6;
  --accent-soft:#ccfbf1;
  --danger:#dc2626;
  --danger-soft:#fee2e2;
  --success:#16a34a;
  --success-soft:#dcfce7;
  --warning:#d97706;
  --shadow:0 18px 45px rgba(15,23,42,.08);
  --shadow-soft:0 10px 26px rgba(15,23,42,.06);
  --radius:22px;
}
*{box-sizing:border-box;min-width:0}
html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at top left,rgba(219,234,254,.9),transparent 32rem),linear-gradient(180deg,#f8fafc 0%,#eef5ff 100%);color:var(--text);overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;max-width:100%}
img,svg,canvas{max-width:100%}

/* Tailwind fallback penting untuk XAMPP/offline ringan */
.bg-slate-100{background:var(--bg)}.bg-slate-50{background:#f8fafc}.bg-white{background:#fff}.text-slate-900{color:#0f172a}.text-slate-700{color:#334155}.text-slate-600{color:#475569}.text-slate-500{color:#64748b}.text-red-700{color:#b91c1c}.text-green-700{color:#15803d}.bg-green-50{background:#f0fdf4}.min-h-screen{min-height:100vh}.max-w-7xl{max-width:80rem}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.max-w-\[230px\]{max-width:230px}.mx-auto{margin-left:auto;margin-right:auto}.mt-1{margin-top:.25rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mb-1{margin-bottom:.25rem}.mb-4{margin-bottom:1rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.flex{display:flex}.grid{display:grid}.hidden{display:none!important}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.w-full{width:100%}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.space-y-1>*+*{margin-top:.25rem}.space-y-2>*+*{margin-top:.5rem}.space-y-3>*+*{margin-top:.75rem}.space-y-4>*+*{margin-top:1rem}.space-x-1>*+*{margin-left:.25rem}.border{border:1px solid var(--line)}.border-b{border-bottom:1px solid var(--line)}.border-t{border-top:1px solid var(--line)}.border-slate-100{border-color:#f1f5f9}.border-slate-200{border-color:#e2e8f0}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.shadow-sm{box-shadow:0 1px 2px rgba(15,23,42,.05)}.sticky{position:sticky}.top-0{top:0}.z-20{z-index:20}.font-bold{font-weight:700}.font-black{font-weight:900}.leading-tight{line-height:1.25}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-center{text-align:center}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-auto{overflow:auto}.max-h-60{max-height:15rem}.max-h-96{max-height:24rem}
@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:col-span-2{grid-column:span 2 / span 2}}
@media (min-width:768px){.md\:hidden{display:none!important}.md\:flex{display:flex!important}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:col-span-1{grid-column:span 1 / span 1}.lg\:col-span-2{grid-column:span 2 / span 2}}

.app-shell{position:relative}
.app-header{position:sticky;top:0;z-index:50;background:rgba(248,250,252,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(226,232,240,.9)}
.app-header-inner{width:min(100%,80rem);margin:0 auto;padding:12px clamp(14px,3vw,24px);display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand-wrap{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#14b8a6);color:#fff;font-weight:900;letter-spacing:.02em;box-shadow:0 12px 24px rgba(37,99,235,.22)}
.brand-text{min-width:0}.brand-title{font-weight:900;line-height:1.1;letter-spacing:-.02em}.brand-subtitle{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;margin-top:2px}
.desktop-nav{display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none}.desktop-nav::-webkit-scrollbar{display:none}
.nav-link{display:inline-flex;align-items:center;justify-content:center;padding:9px 12px;border-radius:999px;color:#475569;font-weight:800;font-size:13px;white-space:nowrap;transition:.18s ease;border:1px solid transparent}
.nav-link:hover{background:#fff;color:#0f172a;border-color:#e5edf8;box-shadow:0 8px 18px rgba(15,23,42,.06)}
.nav-link.is-active{background:var(--primary-soft);color:var(--primary);border-color:#bfdbfe}
.mobile-menu-btn{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:15px;background:#fff;align-items:center;justify-content:center;flex-direction:column;gap:5px;box-shadow:0 8px 18px rgba(15,23,42,.05)}
.mobile-menu-btn span{display:block;width:18px;height:2px;border-radius:999px;background:#334155}
.mobile-menu{width:min(100%,80rem);margin:0 auto;padding:0 14px 14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mobile-menu.hidden{display:none!important}
.mobile-link{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:15px;background:#fff;border:1px solid var(--line);font-weight:900;font-size:13px;color:#334155;box-shadow:0 8px 18px rgba(15,23,42,.04)}
.mobile-link.is-active{background:var(--primary-soft);color:var(--primary);border-color:#bfdbfe}.mobile-link.logout{background:var(--danger-soft);color:#991b1b;border-color:#fecaca}
.app-main{width:min(100%,80rem);margin:0 auto;padding:clamp(14px,3vw,24px);padding-bottom:42px}

.card{background:rgba(255,255,255,.92);border:1px solid rgba(226,232,240,.95);border-radius:var(--radius);box-shadow:var(--shadow-soft);overflow:hidden;min-width:0}
.card-header{padding:16px 18px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(180deg,rgba(248,250,252,.9),rgba(255,255,255,.88))}
.card-header h1,.card-header h2,.card-header h3{margin:0;letter-spacing:-.02em}.card-body{padding:18px;min-width:0}.card:hover{box-shadow:var(--shadow)}
.card .card{box-shadow:none;background:#fff}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;padding:10px 14px;font-weight:900;line-height:1;transition:.18s ease;white-space:nowrap;border:1px solid transparent;cursor:pointer;min-height:42px;max-width:100%}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-sm{min-height:36px;padding:8px 12px;font-size:13px}.btn-primary{background:linear-gradient(135deg,var(--primary),#3b82f6);color:#fff;box-shadow:0 10px 22px rgba(37,99,235,.22)}.btn-primary:hover{background:linear-gradient(135deg,var(--primary-dark),var(--primary))}.btn-light{background:#fff;color:#334155;border-color:var(--line);box-shadow:0 8px 18px rgba(15,23,42,.04)}.btn-light:hover{background:#f8fafc}.btn-danger{background:var(--danger-soft);color:#991b1b;border-color:#fecaca}.btn-danger:hover{background:#fecaca}.btn-green{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;box-shadow:0 10px 22px rgba(22,163,74,.18)}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-icon{width:42px;min-width:42px;padding:10px 0;font-size:16px;border-radius:14px}.action-group{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.action-group .btn{width:auto}

.input,.select,textarea.input{width:100%;border:1px solid #d6deea;background:#fff;border-radius:15px;padding:12px 13px;outline:none;transition:.16s ease;min-height:44px;color:#0f172a}.input:focus,.select:focus,textarea.input:focus{border-color:#60a5fa;box-shadow:0 0 0 4px rgba(96,165,250,.18)}.input::placeholder{color:#94a3b8}.label{display:block;font-size:11px;font-weight:900;color:#64748b;margin-bottom:7px;text-transform:uppercase;letter-spacing:.06em}textarea.input{min-height:92px;resize:vertical}

.table-wrap{width:100%;max-width:100%;overflow-x:auto;overflow-y:auto;border:1px solid var(--line);border-radius:18px;background:#fff;-webkit-overflow-scrolling:touch}.table-wrap:focus{outline:2px solid #bfdbfe}table.clean{width:100%;border-collapse:separate;border-spacing:0;background:#fff;min-width:760px}table.clean th,table.clean td{padding:12px 13px;border-bottom:1px solid var(--line-soft);text-align:left;white-space:nowrap;font-size:14px;vertical-align:middle}table.clean th{position:sticky;top:0;z-index:1;background:#f8fafc;color:#475569;font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:900}table.clean tr:hover td{background:#f8fbff}table.clean tr:last-child td{border-bottom:0}

.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:900;letter-spacing:.03em;white-space:nowrap}.badge-green{background:var(--success-soft);color:#166534;border:1px solid #bbf7d0}.badge-gray{background:#f1f5f9;color:#475569;border:1px solid #e2e8f0}
.alert{border-radius:18px;padding:13px 15px;margin-bottom:14px;border:1px solid;font-weight:800;box-shadow:0 10px 22px rgba(15,23,42,.04)}.alert-success{background:#ecfdf5;color:#166534;border-color:#bbf7d0}.alert-error{background:#fff1f2;color:#991b1b;border-color:#fecdd3}
.stat{background:rgba(255,255,255,.92);border:1px solid rgba(226,232,240,.95);border-radius:20px;padding:16px;box-shadow:0 10px 24px rgba(15,23,42,.05);min-width:0;overflow:hidden}.stat-value{font-size:clamp(22px,5vw,30px);line-height:1;font-weight:950;color:#0f172a;letter-spacing:-.04em;overflow-wrap:anywhere}.stat-label{margin-top:7px;color:#64748b;font-size:12px;font-weight:900;letter-spacing:.02em}.stat .text-xl{font-size:clamp(16px,4vw,20px)!important;line-height:1.2}

/* Judul halaman yang sudah ada dibuat lebih modern tanpa perlu ubah semua PHP */
.app-main > .mb-4:first-child{background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(239,246,255,.9));border:1px solid rgba(219,234,254,.95);border-radius:24px;padding:18px 20px;box-shadow:var(--shadow-soft)}
.app-main > .mb-4:first-child h1{letter-spacing:-.035em}.app-main > .mb-4:first-child p{margin-top:3px}

.login-page{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 12% 12%,rgba(20,184,166,.18),transparent 26rem),radial-gradient(circle at 88% 18%,rgba(37,99,235,.20),transparent 28rem),linear-gradient(180deg,#f8fafc,#eef5ff)}.login-card{width:min(100%,430px);position:relative}.login-card:before{content:"";position:absolute;inset:-1px;border-radius:28px;background:linear-gradient(135deg,rgba(37,99,235,.55),rgba(20,184,166,.45),rgba(255,255,255,.1));z-index:-1;filter:blur(.2px)}.login-logo{width:58px;height:58px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#14b8a6);color:#fff;font-weight:950;font-size:20px;box-shadow:0 18px 38px rgba(37,99,235,.25)}

@media (max-width:767px){
  .desktop-nav{display:none}.mobile-menu-btn{display:flex}.app-header-inner{padding:10px 14px}.brand-mark{width:40px;height:40px;border-radius:14px}.brand-subtitle{max-width:180px}.app-main{padding:14px}.card-header{align-items:flex-start;flex-direction:column;padding:15px}.card-body{padding:15px}.grid{gap:12px}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-2,.md\:grid-cols-3,.md\:grid-cols-4,.md\:grid-cols-5,.lg\:grid-cols-2,.lg\:grid-cols-3{grid-template-columns:1fr}.flex{flex-wrap:wrap}.items-end{align-items:stretch}.btn{min-height:44px}.card-header .btn,.card-body>.btn,form .btn{width:100%}.action-group{gap:6px}.action-group .btn{width:auto;min-height:38px;padding:8px 10px;font-size:12px}.action-group .btn-icon{width:38px;min-width:38px;padding:8px 0}.table-wrap{border-radius:16px;margin-inline:-2px;width:calc(100% + 4px)}table.clean{min-width:720px}table.clean th,table.clean td{padding:10px 11px;font-size:13px}.stat{padding:14px;border-radius:18px}.stat-label{font-size:11px}.app-main > .mb-4:first-child{padding:16px;border-radius:20px}.mobile-menu{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
  .brand-subtitle{max-width:138px}.mobile-menu{grid-template-columns:1fr}.grid-cols-2{grid-template-columns:1fr}.app-main{padding:12px}.card-body{padding:14px}.card-header{padding:14px}.stat-value{font-size:24px}.btn{width:100%}.action-group .btn{width:auto}.login-page{padding:14px}
}

/* Stage 3 - QR Label printing */
.label-table-wrap{max-height:520px}.label-table input[type="checkbox"]{width:18px;height:18px;accent-color:var(--primary)}
.print-area{display:none}.qr-label{background:#fff;border:1px solid #d7dee9;border-radius:12px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;break-inside:avoid;page-break-inside:avoid;overflow:hidden}.qr-box{width:96px;height:96px;display:grid;place-items:center;flex:none}.qr-box img,.qr-box canvas{width:96px!important;height:96px!important}.qr-text{min-width:0}.qr-material{font-size:15px;font-weight:950;letter-spacing:-.02em;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qr-name{font-size:11px;font-weight:800;color:#334155;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-transform:uppercase}.qr-loc{margin-top:4px;font-size:10px;font-weight:900;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qr-kind{margin-top:3px;font-size:8px;font-weight:950;color:#94a3b8;letter-spacing:.08em;text-transform:uppercase}.barcode-label{grid-template-columns:1fr;gap:5px;text-align:center}.barcode-label .qr-box{width:100%;height:82px;display:grid;place-items:center;padding:2px}.barcode-label .qr-text{padding:0 3px 3px}.opname-barcode-svg{width:100%;max-width:100%;height:82px;display:block}.barcode-error{font-size:9px;font-weight:900;color:#991b1b;background:#fee2e2;border:1px solid #fecaca;border-radius:8px;padding:4px;line-height:1.15}.barcode-label .qr-name{-webkit-line-clamp:1}.barcode-label .qr-loc{margin-top:2px}
@media print{
  body{background:#fff!important}.app-header,.no-print,.alert{display:none!important}.app-main{width:100%!important;max-width:none!important;padding:0!important;margin:0!important}.print-area{display:grid!important;background:#fff!important}.print-area.a4{grid-template-columns:repeat(3,1fr);gap:8mm;padding:10mm}.print-area.thermal58,.print-area.thermal80{display:block!important;padding:0}.print-area.a4 .qr-label{height:33mm;padding:3mm}.print-area.a4 .barcode-label{height:33mm;padding:2.5mm}.print-area.thermal58 .qr-label{width:58mm;min-height:32mm;border-radius:0;border-left:0;border-right:0;padding:2mm;margin:0;grid-template-columns:24mm 1fr}.print-area.thermal58 .qr-box{width:24mm;height:24mm}.print-area.thermal58 .qr-box img,.print-area.thermal58 .qr-box canvas{width:24mm!important;height:24mm!important}.print-area.thermal80 .qr-label{width:80mm;min-height:36mm;border-radius:0;border-left:0;border-right:0;padding:2.5mm;margin:0;grid-template-columns:28mm 1fr}.print-area.thermal80 .qr-box{width:28mm;height:28mm}.print-area.thermal80 .qr-box img,.print-area.thermal80 .qr-box canvas{width:28mm!important;height:28mm!important}.print-area.thermal58 .qr-material,.print-area.thermal80 .qr-material{font-size:13px}.print-area.thermal58 .qr-name{font-size:9px}.print-area.thermal80 .qr-name{font-size:10px}.print-area.thermal58 .qr-loc,.print-area.thermal80 .qr-loc{font-size:8px}.print-area.thermal58 .barcode-label,.print-area.thermal80 .barcode-label{grid-template-columns:1fr;min-height:31mm}.print-area.thermal58 .barcode-label .qr-box{width:100%;height:20mm}.print-area.thermal80 .barcode-label .qr-box{width:100%;height:22mm}.print-area.thermal58 .opname-barcode-svg{height:20mm}.print-area.thermal80 .opname-barcode-svg{height:22mm}.print-area.thermal58 .qr-kind,.print-area.thermal80 .qr-kind{font-size:7px}
  @page{margin:8mm;size:A4}.print-area.thermal58{@page{size:58mm auto;margin:0}}.print-area.thermal80{@page{size:80mm auto;margin:0}}
}
@media (max-width:767px){.label-table-wrap{max-height:440px}.print-area.a4{grid-template-columns:1fr}.qr-label{grid-template-columns:82px 1fr}.qr-box{width:82px;height:82px}.qr-box img,.qr-box canvas{width:82px!important;height:82px!important}}


/* Stage 4 - Offline IndexedDB */
.offline-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}.offline-status-card{background:rgba(255,255,255,.92);border:1px solid rgba(226,232,240,.95);border-radius:20px;padding:15px;box-shadow:0 10px 24px rgba(15,23,42,.05);min-width:0}.offline-status-card.is-online{border-color:#bbf7d0;background:linear-gradient(180deg,#fff,#f0fdf4)}.offline-status-card.is-offline{border-color:#fecaca;background:linear-gradient(180deg,#fff,#fff1f2)}.offline-status-label{font-size:11px;font-weight:950;color:#64748b;text-transform:uppercase;letter-spacing:.06em}.offline-status-value{font-size:clamp(17px,4vw,23px);font-weight:950;letter-spacing:-.03em;margin-top:5px;color:#0f172a;overflow-wrap:anywhere}.soft-panel{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:16px;padding:12px}.mini-message{border-radius:16px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;font-weight:850;padding:12px 13px}.mini-success{background:#ecfdf5;border-color:#bbf7d0;color:#166534}.mini-error{background:#fff1f2;border-color:#fecdd3;color:#991b1b}.mini-info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}.sync-progress{height:10px;background:#e2e8f0;border-radius:999px;overflow:hidden}.sync-progress-bar{height:100%;width:0;background:linear-gradient(135deg,#2563eb,#14b8a6);transition:width .25s ease}.offline-table-wrap{max-height:440px}#localStockBody td:nth-child(2){max-width:420px;overflow:hidden;text-overflow:ellipsis}
@media (max-width:767px){.offline-status-grid{grid-template-columns:1fr}.offline-table-wrap{max-height:380px}.soft-panel{padding:11px}}

/* Stage 5 - Scan Opname */
.scan-camera-box{position:relative;min-height:260px;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,#0f172a,#1e293b);border:1px solid rgba(226,232,240,.9);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.scan-camera-box video{width:100%;height:100%;min-height:260px;object-fit:cover;background:#0f172a}.scan-frame{position:absolute;width:min(72%,260px);aspect-ratio:1;border:3px solid rgba(20,184,166,.92);border-radius:24px;box-shadow:0 0 0 999px rgba(15,23,42,.34),0 0 28px rgba(20,184,166,.35);pointer-events:none}.scan-frame:before,.scan-frame:after{content:"";position:absolute;width:38px;height:38px;border-color:#fff}.scan-frame:before{left:-3px;top:-3px;border-left:5px solid #fff;border-top:5px solid #fff;border-radius:20px 0 0 0}.scan-frame:after{right:-3px;bottom:-3px;border-right:5px solid #fff;border-bottom:5px solid #fff;border-radius:0 0 20px 0}.item-preview{background:linear-gradient(180deg,#ffffff,#f8fafc);border:1px solid #e2e8f0;border-radius:20px;padding:15px;min-height:82px}.item-title{font-size:clamp(18px,4vw,24px);font-weight:950;letter-spacing:-.03em;line-height:1.15;text-transform:uppercase;color:#0f172a;overflow-wrap:anywhere}.item-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.item-meta span{display:inline-flex;align-items:center;border-radius:999px;background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe;padding:5px 9px;font-size:12px;font-weight:900}.input-actual{font-size:24px;font-weight:950;text-align:center;color:#0f172a}.record-list{display:grid;gap:9px;max-height:520px;overflow:auto;padding-right:2px}.record-card{width:100%;text-align:left;background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:12px;box-shadow:0 8px 18px rgba(15,23,42,.04);transition:.16s ease}.record-card:hover{transform:translateY(-1px);border-color:#bfdbfe;box-shadow:0 12px 24px rgba(37,99,235,.08)}.record-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.record-top b{font-weight:950;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.record-name{font-size:12px;font-weight:850;color:#334155;margin-top:6px;text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.record-meta{font-size:11px;font-weight:800;color:#64748b;margin-top:7px}.badge-blue{background:#dbeafe;color:#1d4ed8}.badge-red{background:#fee2e2;color:#991b1b}
@media (max-width:767px){.scan-camera-box{min-height:220px;border-radius:20px}.scan-camera-box video{min-height:220px}.scan-frame{width:min(78%,220px);border-radius:20px}.record-list{max-height:380px}.input-actual{font-size:22px}}

/* Stage 7 - Laporan */
.report-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;background:rgba(255,255,255,.76);border:1px solid rgba(226,232,240,.95);border-radius:26px;padding:18px;box-shadow:var(--shadow-soft)}
.eyebrow{display:inline-flex;align-items:center;border-radius:999px;background:#e0f2fe;color:#0369a1;border:1px solid #bae6fd;padding:5px 10px;font-size:11px;font-weight:950;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}.progress-line{height:12px;background:#e2e8f0;border-radius:999px;overflow:hidden}.progress-line>div{height:100%;background:linear-gradient(135deg,#2563eb,#14b8a6);border-radius:999px;min-width:0;transition:width .3s ease}.mini-kpi{border:1px solid #e2e8f0;border-radius:18px;background:linear-gradient(180deg,#fff,#f8fafc);padding:12px;min-height:72px}.mini-kpi b{display:block;font-size:clamp(15px,3vw,20px);font-weight:950;letter-spacing:-.03em;color:#0f172a;overflow-wrap:anywhere}.mini-kpi span{display:block;margin-top:4px;font-size:11px;font-weight:900;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.stat-blue{background:linear-gradient(180deg,#eff6ff,#fff);border-color:#bfdbfe}.stat-green{background:linear-gradient(180deg,#ecfdf5,#fff);border-color:#bbf7d0}.stat-amber{background:linear-gradient(180deg,#fffbeb,#fff);border-color:#fde68a}.stat-red{background:linear-gradient(180deg,#fff1f2,#fff);border-color:#fecdd3}
@media (max-width:767px){.report-hero{display:block;padding:15px}.report-hero .flex{margin-top:12px}.report-hero .btn{width:100%}}
@media print{body{background:#fff!important}.app-header,.no-print,.mobile-menu{display:none!important}.app-main{width:100%;padding:0}.card,.report-hero,.stat{box-shadow:none!important;border-color:#d1d5db!important;break-inside:avoid}.table-wrap{overflow:visible!important;border-color:#d1d5db!important}table.clean{min-width:0!important;font-size:10px}table.clean th,table.clean td{padding:6px 7px;font-size:10px;white-space:normal}.record-list{max-height:none;overflow:visible}.record-card{box-shadow:none;break-inside:avoid}}

/* ═══════════════════════════════════════════════════════════
   KISS MOBILE — Stock Opname User Interface
   Tambahkan blok ini di akhir assets/app.css
   ═══════════════════════════════════════════════════════════ */

/* ── Reset wrapper untuk mode mobile KISS ── */
body:has(#kissApp) .app-main {
  padding: 0 !important;
  max-width: 100% !important;
}

/* ── App container ── */
.kiss-app {
  position: fixed;
  inset: 0;
  top: var(--kiss-header-h, 0px);
  background: #0b1120;
  overflow: hidden;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Account for the app-header height */
body:has(#kissApp) .app-header { position: fixed; top: 0; z-index: 100; }
body:has(#kissApp) #kissApp   { top: 60px; }

/* ── Screens ── */
.kiss-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.kiss-screen--active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ═══════════════════
   SCREEN: SCAN
   ═══════════════════ */
#screenScan {
  background: #0b1120;
}
.kiss-scan-area {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #000;
  overflow: hidden;
}
#kissVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kiss-scan-overlay-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: linear-gradient(to bottom, rgba(11,17,32,.85), transparent);
  padding: 14px 14px 32px;
  z-index: 2;
}
.kiss-scan-overlay-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(11,17,32,.9), transparent);
  padding: 32px 14px 14px;
  z-index: 2;
}
.kiss-scan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.kiss-scan-location {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.88);
  font-size: 13px;
  font-weight: 800;
}
.kiss-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #dc2626;
  flex: none;
  transition: background .3s;
}
.kiss-dot--online { background: #22c55e; }
.kiss-scan-counts {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kiss-count-badge {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.1);
}
.kiss-icon-btn {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-size: 16px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.kiss-scan-frame {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -54%);
  width: min(72vw, 270px);
  aspect-ratio: 1;
  z-index: 3;
}
.kiss-scan-corner {
  position: absolute;
  width: 28px; height: 28px;
  border-color: rgba(255,255,255,.9);
  border-style: solid;
}
.kiss-scan-corner.tl { top: -2px; left: -2px;  border-width: 4px 0 0 4px; border-radius: 8px 0 0 0; }
.kiss-scan-corner.tr { top: -2px; right: -2px; border-width: 4px 4px 0 0; border-radius: 0 8px 0 0; }
.kiss-scan-corner.bl { bottom: -2px; left: -2px;  border-width: 0 0 4px 4px; border-radius: 0 0 0 8px; }
.kiss-scan-corner.br { bottom: -2px; right: -2px; border-width: 0 4px 4px 0; border-radius: 0 0 8px 0; }
.kiss-scan-line {
  position: absolute;
  left: 4px; right: 4px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #14b8a6, transparent);
  border-radius: 999px;
  top: 0;
  opacity: 0;
}
.kiss-scan-line--active {
  opacity: 1;
  animation: kissLineScan 1.8s ease-in-out infinite;
}
@keyframes kissLineScan {
  0%   { top: 4px; }
  50%  { top: calc(100% - 6px); }
  100% { top: 4px; }
}
.kiss-scan-msg {
  color: rgba(255,255,255,.8);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  letter-spacing: .01em;
}

/* ── Action bar bawah ── */
.kiss-actions {
  background: #0f1826;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.kiss-btn-scan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  border-radius: 20px;
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .01em;
  border: none;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(37,99,235,.3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.kiss-btn-scan:active { transform: scale(.97); box-shadow: 0 6px 16px rgba(37,99,235,.2); }
.kiss-btn-scan--active {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  box-shadow: 0 14px 32px rgba(220,38,38,.3);
}
.kiss-btn-scan-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center; flex: none;
}
.kiss-btn-scan-icon svg { width: 26px; height: 26px; }
.kiss-secondary-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.kiss-btn-secondary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 54px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.kiss-btn-secondary span { font-size: 18px; }
.kiss-btn-secondary:active,
.kiss-btn-secondary--active { background: rgba(255,255,255,.14); color: #fff; }

/* ═══════════════════════
   SCREEN: SETUP / SHEETS
   ═══════════════════════ */
.kiss-sheet-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px;
  background: #fff;
  border-bottom: 1px solid #e8edf4;
  position: sticky;
  top: 0;
  z-index: 10;
}
.kiss-back-btn {
  min-width: 44px; min-height: 44px;
  background: #f1f5fb;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  color: #334155;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0 10px;
  white-space: nowrap;
}
.kiss-sheet-title {
  font-size: 17px;
  font-weight: 900;
  color: #0f172a;
  margin: 0;
  flex: 1;
}
.kiss-sheet-body {
  flex: 1;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
  background: #f6f8fb;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kiss-field-group { display: flex; flex-direction: column; gap: 6px; }
.kiss-label {
  font-size: 11px;
  font-weight: 900;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.kiss-select,
.kiss-input-text {
  width: 100%;
  min-height: 52px;
  border: 1.5px solid #d6deea;
  background: #fff;
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.kiss-select:focus,
.kiss-input-text:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(96,165,250,.16);
}
.kiss-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2364748b' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
}
.kiss-textarea { min-height: 82px; resize: vertical; }
.kiss-user-info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 800;
  color: #1e40af;
}
.kiss-btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 16px;
  background: #fff;
  border: 1.5px solid #d6deea;
  color: #334155;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
  gap: 8px;
}
.kiss-btn-outline:active { background: #f1f5f9; }
.kiss-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  border: none;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(37,99,235,.25);
  transition: transform .15s, box-shadow .15s;
  text-decoration: none;
  gap: 8px;
}
.kiss-btn-primary:active { transform: scale(.97); box-shadow: 0 6px 14px rgba(37,99,235,.15); }

/* ═══════════════════
   SCREEN: ITEM
   ═══════════════════ */
#screenItem { background: #f6f8fb; }
#screenItem .kiss-sheet-header { background: #fff; }
.kiss-item-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 4px 14px rgba(15,23,42,.05);
}
.kiss-item-name {
  font-size: 16px;
  font-weight: 950;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.kiss-item-meta {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
}
.kiss-stock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px;
}
.kiss-stock-box {
  flex: 1;
  text-align: center;
}
.kiss-stock-box--actual {
  background: #eff6ff;
  border-radius: 12px;
  padding: 8px 6px;
}
.kiss-stock-label {
  font-size: 10px;
  font-weight: 900;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.kiss-stock-value {
  font-size: 20px;
  font-weight: 950;
  color: #0f172a;
  letter-spacing: -.03em;
}
.kiss-stock-sep {
  color: #94a3b8;
  font-size: 18px;
  flex: none;
}

/* ── Numpad ── */
.kiss-numpad-wrap {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15,23,42,.06);
}
.kiss-numpad-display {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
  background: #f8fafc;
  transition: box-shadow .15s;
}
.kiss-numpad-display.kiss-shake {
  animation: kissShake .35s ease;
  border-color: #fca5a5;
  background: #fff1f2;
}
@keyframes kissShake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
#kissNumpadValue {
  font-size: 34px;
  font-weight: 950;
  color: #0f172a;
  letter-spacing: -.04em;
  min-width: 2ch;
  text-align: right;
}
.kiss-numpad-unit {
  font-size: 14px;
  font-weight: 900;
  color: #94a3b8;
  align-self: flex-end;
  margin-bottom: 4px;
}
.kiss-numpad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.kiss-key {
  min-height: 58px;
  border: none;
  border-top: 1px solid #f1f5f9;
  border-right: 1px solid #f1f5f9;
  background: #fff;
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .1s;
  -webkit-tap-highlight-color: transparent;
}
.kiss-key:nth-child(3n) { border-right: none; }
.kiss-key:active { background: #f1f5fb; }
.kiss-key--delete { color: #64748b; font-size: 20px; }
.kiss-key--wide   { font-size: 18px; }

/* ── Diff row ── */
.kiss-diff-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  transition: opacity .2s;
}
.kiss-diff-badge {
  font-size: 13px;
  font-weight: 900;
  border-radius: 999px;
  padding: 4px 12px;
  background: #f1f5f9;
  color: #334155;
}
.kiss-diff--ok    { background: #dcfce7; color: #166534; }
.kiss-diff--plus  { background: #dbeafe; color: #1d4ed8; }
.kiss-diff--minus { background: #fee2e2; color: #991b1b; }
.kiss-diff-amount {
  font-size: 13px;
  font-weight: 900;
  color: #334155;
}
.kiss-btn-save {
  min-height: 60px;
  font-size: 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  box-shadow: 0 14px 30px rgba(22,163,74,.25);
}
.kiss-note-toggle {
  background: none;
  border: none;
  color: #2563eb;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  padding: 6px 0;
  text-align: left;
  width: 100%;
}
.kiss-note-wrap.hidden { display: none; }

/* ═══════════════════
   SCREEN: SAVED
   ═══════════════════ */
#screenSaved { background: #f0fdf4; }
.kiss-saved-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  gap: 12px;
  text-align: center;
}
.kiss-saved-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  font-size: 36px;
  font-weight: 900;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 38px rgba(22,163,74,.28);
  animation: kissPopIn .35s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes kissPopIn {
  from { transform: scale(.5); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.kiss-saved-title {
  font-size: 26px;
  font-weight: 950;
  color: #0f172a;
  letter-spacing: -.03em;
}
.kiss-saved-detail {
  font-size: 14px;
  font-weight: 800;
  color: #475569;
  white-space: pre-line;
  line-height: 1.4;
}
.kiss-saved-status {
  font-size: 14px;
  font-weight: 900;
  border-radius: 999px;
  padding: 6px 18px;
  background: #f1f5f9;
  color: #334155;
}
.kiss-saved--ok    { background: #dcfce7; color: #166534; }
.kiss-saved--plus  { background: #dbeafe; color: #1d4ed8; }
.kiss-saved--minus { background: #fee2e2; color: #991b1b; }
#screenSaved .kiss-btn-primary { min-width: 220px; }

/* ═════════════════════
   SCREEN: NOT FOUND
   ═════════════════════ */
#screenNotFound { background: #fffbeb; }
.kiss-notfound-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  gap: 14px;
  text-align: center;
}
.kiss-notfound-icon {
  width: 74px; height: 74px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d97706, #f59e0b);
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  display: grid;
  place-items: center;
  box-shadow: 0 16px 34px rgba(217,119,6,.25);
}
.kiss-notfound-icon--warn {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  box-shadow: 0 16px 34px rgba(220,38,38,.25);
}
.kiss-notfound-title {
  font-size: 22px;
  font-weight: 950;
  color: #0f172a;
  letter-spacing: -.03em;
}
.kiss-notfound-detail {
  font-size: 13px;
  font-weight: 800;
  color: #64748b;
  white-space: pre-line;
  line-height: 1.5;
  max-width: 300px;
}
#screenNotFound .kiss-btn-primary,
#screenError .kiss-btn-primary { min-width: 200px; }

/* ─ Shared .hidden ─ */
.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   KISS SYNC SCREEN — tambahan untuk screenSync mobile
   ═══════════════════════════════════════════════════════════ */

/* Stats row */
.kiss-sync-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.kiss-sync-stat {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 12px 10px;
  text-align: center;
}
.kiss-sync-stat--synced { border-color: #bbf7d0; background: #f0fdf4; }
.kiss-sync-stat-value {
  font-size: 20px;
  font-weight: 950;
  color: #0f172a;
  letter-spacing: -.03em;
  line-height: 1;
}
.kiss-sync-stat-label {
  font-size: 10px;
  font-weight: 900;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 5px;
}

/* Progress bar */
.kiss-sync-progress-wrap { margin: 0; }
.kiss-sync-progress-track {
  height: 10px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.kiss-sync-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #2563eb, #14b8a6);
  border-radius: 999px;
  transition: width .28s ease;
}

/* Status message */
.kiss-sync-msg {
  border-radius: 14px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}
.kiss-sync-msg--info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.kiss-sync-msg--success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.kiss-sync-msg--warn    { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.kiss-sync-msg--error   { background: #fff1f2; color: #991b1b; border: 1px solid #fecdd3; }

/* List */
.kiss-sync-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
}
.kiss-sync-empty {
  padding: 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: #64748b;
}
.kiss-sync-section-label {
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 900;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}
.kiss-sync-section-label.kiss-sync-section--err {
  background: #fff1f2;
  color: #991b1b;
  border-bottom-color: #fecdd3;
}
.kiss-sync-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
}
.kiss-sync-row:last-child { border-bottom: none; }
.kiss-sync-row--err { background: #fff8f8; }
.kiss-sync-row-main { flex: 1; min-width: 0; }
.kiss-sync-row-mat {
  font-size: 13px;
  font-weight: 900;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kiss-sync-row-name {
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.kiss-sync-row-err {
  font-size: 10px;
  font-weight: 800;
  color: #dc2626;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kiss-sync-row-right {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
}
.kiss-sync-row-qty {
  font-size: 12px;
  font-weight: 900;
  color: #334155;
  white-space: nowrap;
}
.kiss-diff-badge--sm {
  font-size: 10px;
  padding: 3px 8px;
}
.kiss-sync-retry-btn {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #dc2626;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: none;
  transition: background .15s;
}
.kiss-sync-retry-btn:active { background: #fca5a5; }

/* Storage location breakdown untuk Gudang Central (CENT / DSTA / DSTK) */
.item-storage{
  margin-top:.45rem;
  display:inline-flex;
  max-width:100%;
  padding:.35rem .55rem;
  border-radius:.75rem;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  color:#475569;
  font-size:.78rem;
  font-weight:800;
  line-height:1.25;
  white-space:normal;
}
.storage-breakdown-text{
  font-size:.78rem;
  font-weight:800;
  color:#475569;
  white-space:nowrap;
}