/* V3: readable recap + filters */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow:0 6px 22px rgba(0,0,0,.06);
  --btn:#111827;
  --danger:#b91c1c;

  --p:#f3f4f6;  /* persediaan */
  --m:#fce7f3;  /* masuk */
  --k:#dbeafe;  /* keluar */
  --s:#dcfce7;  /* sisa */
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--bg);
  color:var(--text);
}
.wrap{max-width:1250px;margin:0 auto;padding:18px}
.topbar{
  background:linear-gradient(120deg,#111827,#374151);
  color:#fff;
}
.headrow{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
h1{margin:0 0 6px 0;font-size:18px}
.muted{color:var(--muted)}
.topbar .muted{color:rgba(255,255,255,.82)}
.small{font-size:12px}
.center{text-align:center}

.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.controls label{max-width:220px}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:16px;
  margin:14px 0;
}
.row{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
h2{margin:0 0 6px 0;font-size:15px}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:10px;
}
label{display:flex;flex-direction:column;gap:6px;font-size:13px}
.inline{display:flex;flex-direction:row;align-items:center;gap:8px}
input, select{
  padding:10px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  outline:none;
  width:100%;
}
input:focus, select:focus{border-color:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.25)}
.span2{grid-column: span 2}
.actions{display:flex;gap:10px;align-items:end}

.btn{
  border:1px solid var(--btn);
  background:var(--btn);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-size:13px;
  white-space:nowrap;
}
.btn.ghost{
  background:transparent;
  color:var(--btn);
}
.btn.danger{
  border-color:var(--danger);
  background:var(--danger);
}
.btn.danger.ghost{
  background:transparent;
  color:var(--danger);
}
.btn.file{position:relative;overflow:hidden}
.btn.file input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* switch */
.switch{gap:10px}
.switch input{width:18px;height:18px}

.tableWrap{overflow:auto;border:1px solid var(--border);border-radius:14px;margin-top:10px}
table{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
th, td{border-bottom:1px solid var(--border);padding:10px;vertical-align:top}
th{position:sticky;top:0;background:#f9fafb;text-align:left;font-weight:800;z-index:1}
.num{text-align:right;font-variant-numeric: tabular-nums}

.w-no{width:56px}
.w-pack{width:170px}
.w-date{width:130px}
.w-type{width:110px}
.w-qty{width:95px}
.w-price{width:120px}
.w-action{width:130px}

.pack{
  border-radius:14px;
  padding:10px;
  border:1px solid var(--border);
}
.pack .qty{
  font-size:20px;
  font-weight:900;
  line-height:1;
}
.pack .price{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}
.p{background:var(--p)}
.m{background:var(--m)}
.k{background:var(--k)}
.s{background:var(--s)}

.badge{
  display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid var(--border)
}
.badge.in{background:#ecfdf5;border-color:#a7f3d0}
.badge.out{background:#eff6ff;border-color:#bfdbfe}
.footnote{margin-top:10px}

@media (max-width: 1100px){
  .grid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .span2{grid-column: span 2}
  .w-pack{width:150px}
  .controls label{max-width:unset}
}
@media print{
  .topbar, .controls, #txForm, #awalForm, .actions, #btnLoadSample, #btnResetAll, #btnExport, #fileImport, #btnPrint, .w-action, #btnClearFilters{display:none !important}
  body{background:#fff}
  .card{box-shadow:none}
  th{position:static}
}