:root{
  --ink:#0B3255;
  --ink-hover:#123E64;
  --ink-line:#1B4A73;
  --paper:#F4F8FC;
  --paper-dim:#E8F0F8;
  --line:#C7D9E8;
  --accent:#1D6FBE;
  --accent-dark:#155590;
  --accent-light:#6BB3E8;
  --steel:#2C6693;
  --steel-dim:#E1EDF6;
  --green:#3F7A4E;
  --green-dim:#E7F1E8;
  --warn:#B5701C;
  --warn-dim:#FBEFDD;
  --danger:#B0402F;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Topbar — selalu tampil di semua ukuran layar. Hamburger di sini
   TIDAK pernah ikut hilang/collapse, jadi selalu bisa diklik. */
.topbar{
  display:flex; align-items:center; gap:12px;
  height:52px; flex-shrink:0; padding:0 14px;
  background:var(--ink); color:#fff;
  position:sticky; top:0; z-index:70;
  border-bottom:1px solid var(--ink-line);
}
.topbar-title{ font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.3px; color:var(--accent-light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.topbar-title-sub{ color:#B7CEE0; font-weight:400; }

.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.topbar-email{ font-size:12px; color:#B7CEE0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.btn-sm{ padding:5px 12px; font-size:12px; }

.pagination{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.page-indicator{ font-size:12px; color:#6B675E; margin:0 4px; white-space:nowrap; }

.hamburger-btn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; width:38px; height:38px; border-radius:6px; flex-shrink:0;
  background:transparent; border:none; cursor:pointer; padding:0;
}
.hamburger-btn:hover{ background:var(--ink-hover); }
.hamburger-btn span{ display:block; width:18px; height:2px; background:#fff; border-radius:2px; }

/* Wrapper di bawah topbar: sidebar + main berdampingan */
.app-body{ display:flex; flex:1; min-height:0; position:relative; }

/* Sidebar */
.sidebar{
  width:220px; flex-shrink:0; overflow-y:auto; overflow-x:hidden;
  background:var(--ink); color:#E4EEF6;
  padding:20px 0; display:flex; flex-direction:column;
  transition:width .2s ease, padding .2s ease;
}
.sidebar.collapsed{ width:0; padding:0; }
.sidebar.collapsed > *{ opacity:0; pointer-events:none; }

.brand{ padding:0 20px 20px 20px; border-bottom:1px solid var(--ink-line); margin-bottom:12px; }
.brand-mark{ font-family:var(--mono); font-size:11px; letter-spacing:.5px; color:var(--accent-light); margin-bottom:4px; }
.brand-name{ font-size:17px; font-weight:600; line-height:1.3; }
.brand-sub{ font-size:12px; color:#8FADC4; margin-top:2px; }
.nav-item{ padding:12px 20px; font-size:14px; font-weight:500; cursor:pointer; border-left:3px solid transparent; color:#A9C6DC; line-height:1.4; }
.nav-item:hover{ background:var(--ink-hover); }
.nav-item.active{ color:#fff; border-left-color:var(--accent-light); background:var(--ink-hover); }
.sidebar-foot{ margin-top:auto; padding:16px 20px; font-size:11px; color:#7396AF; border-top:1px solid var(--ink-line); }

/* Overlay gelap di belakang sidebar mobile — disembunyikan di desktop */
.sidebar-overlay{ display:none; }

/* Main */
.main{ flex:1; min-width:0; padding:32px 40px; max-width:1280px; overflow-x:hidden; }
.page-title{ font-size:22px; font-weight:700; margin:0 0 4px 0; }
.page-desc{ font-size:14px; color:#6B675E; margin:0 0 24px 0; max-width:680px; }

.panel{ background:#fff; border:1px solid var(--line); border-radius:6px; padding:20px; margin-bottom:20px; }
.panel h3{ margin:0 0 14px 0; font-size:14px; font-weight:600; }

.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field label{ font-size:12px; color:#6B675E; font-weight:500; }
input, select{
  font-family:var(--sans); font-size:13px; padding:8px 10px;
  border:1px solid var(--line); border-radius:4px; background:var(--paper);
  color:var(--ink); min-width:150px;
}
input:focus, select:focus{ outline:2px solid var(--steel); outline-offset:1px; }

button{
  font-family:var(--sans); font-size:13px; font-weight:600; padding:9px 16px;
  border-radius:4px; border:1px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-dark); }
.btn-secondary{ background:var(--steel-dim); color:var(--steel); }
.btn-secondary:hover{ background:#DCE6E9; }
.btn-export{ background:var(--green-dim); color:var(--green); }
.btn-export:hover{ background:#D8ECDB; }
.btn-outline{ background:#fff; border:1px solid var(--line); color:var(--ink); }
.btn-outline:hover{ background:var(--paper-dim); }
.btn-danger{ background:#fff; border:1px solid var(--danger); color:var(--danger); }
button:disabled{ opacity:.45; cursor:not-allowed; }

table{ width:100%; border-collapse:collapse; font-size:13px; }
th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.4px;
  color:#6E88A0; font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
}
td{ padding:9px 10px; border-bottom:1px solid #E5EEF5; border-right:1px solid #E5EEF5; }
th:last-child, td:last-child{ border-right:none; }
tr:hover td{ background:var(--paper-dim); }
.code-tag{ font-family:var(--mono); font-size:12px; background:var(--steel-dim); color:var(--steel); padding:2px 7px; border-radius:3px; }
.code-tag-old{ font-family:var(--mono); font-size:12px; background:#FFF3CD; color:#856404; padding:2px 7px; border-radius:3px; }
.code-tag-bold{ font-family:var(--mono); font-size:12px; background:var(--steel-dim); color:var(--steel); padding:2px 7px; border-radius:3px; font-weight:600; }
.num-cell{ font-family:var(--mono); font-size:12px; }
.diff-zero{ font-family:var(--mono); font-size:12px; color:#6B675E; }
.diff-neg{ font-family:var(--mono); font-size:12px; font-weight:700; color:var(--danger); background:#F7E7E3; padding:2px 7px; border-radius:3px; }
.diff-pos{ font-family:var(--mono); font-size:12px; font-weight:700; color:var(--green); background:var(--green-dim); padding:2px 7px; border-radius:3px; }

.badge-action{ font-size:11px; font-weight:600; padding:2px 8px; border-radius:3px; text-transform:uppercase; letter-spacing:.3px; }
.badge-insert{ background:var(--green-dim); color:var(--green); }
.badge-update{ background:var(--warn-dim); color:var(--warn); }
.badge-delete{ background:#F7E7E3; color:var(--danger); }

.toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:12px; flex-wrap:wrap; }
.search-box{ min-width:240px; }
.count-pill{ font-size:12px; color:#6B675E; }

.empty{ text-align:center; padding:36px 10px; color:#9A968B; font-size:13px; }

.config-banner{
  background:var(--warn-dim); border:1px solid var(--warn); color:#7A5117;
  padding:12px 16px; border-radius:6px; font-size:13px; margin-bottom:20px;
}
.config-banner code{ font-family:var(--mono); background:#fff; padding:1px 5px; border-radius:3px; }

.field-picker{ display:flex; gap:6px; flex-wrap:wrap; }
.field-picker-item{ display:inline-flex; align-items:center; gap:5px; font-size:12px; cursor:pointer; border:1px solid var(--line); border-radius:5px; padding:4px 8px; background:#fff; transition:background .15s; }
.field-picker-item:hover{ background:var(--paper-dim); }

.collapsible-header{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; user-select:none; }
.collapsible-header:hover{ opacity:.8; }
.collapse-icon{ font-size:14px; color:#6B675E; transition:transform .2s; }
.collapsible-body{ max-height:0; overflow:hidden; transition:max-height .3s ease, margin .3s ease; margin-top:0; }
.collapsible-body.open{ max-height:400px; margin-top:14px; }

/* =========================================================
   LABEL CETAK THERMAL
   Kertas fisik: 100mm x 150mm, berisi 2 label (atas & bawah),
   masing-masing label 100mm x 75mm.
   ========================================================= */
#label-sheet{ display:none; }

.label-page{
  width:100mm;
  height:150mm;
  display:flex;
  flex-direction:column;
}
.label-page:not(:last-child){ margin-bottom:20px; }

.label-card{
  width:100mm;
  height:75mm;
  box-sizing:border-box;
  padding:5mm 4mm;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2mm;
  text-align:center;
  border:1px dashed #B7C7D6;
}
.label-card:last-child{ border-bottom:1px dashed #B7C7D6; }
.label-card + .label-card{ border-top:none; }

.label-card > div{
  color:#000;
  width:100%;
  word-wrap:break-word;
  overflow-wrap:break-word;
  white-space:normal;
  line-height:1.35;
}

.label-card .line-primary{ font-weight:800; font-size:30px; }
.label-card .line-primary.mono{ font-family:var(--mono); }
.label-card .line-desc{ font-weight:700; font-size:18px; }
.label-card .line-secondary{ font-weight:400; font-size:12px; }
.label-card .line-secondary.mono{ font-family:var(--mono); }

.mass-edit-toolbar{ display:flex; align-items:center; gap:6px; padding:7px 10px; margin-bottom:10px; background:var(--ink-blue-light); border:1px solid var(--ink-line); border-radius:6px; flex-wrap:wrap; font-size:13px; }
.mass-edit-toolbar select{ padding:4px 6px; border:1px solid var(--ink-line); border-radius:4px; font-size:12px; }
.mass-edit-toolbar input{ padding:4px 6px; border:1px solid var(--ink-line); border-radius:4px; font-size:12px; }
.stok-habis-tag{ display:inline-block; background:#fee2e2; color:#991b1b; font-size:10px; font-weight:600; padding:1px 5px; border-radius:3px; margin-left:4px; }
.tidak-terpakai-tag{ display:inline-block; background:#e5e7eb; color:#374151; font-size:10px; font-weight:600; padding:1px 5px; border-radius:3px; margin-left:4px; }
.mass-edit-preview{ margin-bottom:10px; padding:10px 14px; background:#f8fafc; border:1px solid var(--ink-line); border-radius:6px; max-height:260px; overflow-y:auto; }
.preview-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:13px; }
.preview-close{ color:var(--ink-warm); cursor:pointer; font-size:12px; text-decoration:underline; }
.preview-table{ width:100%; border-collapse:collapse; font-size:12px; }
.preview-table th{ text-align:left; padding:4px 8px; border-bottom:2px solid var(--ink-line); font-weight:600; font-size:11px; color:#6B675E; }
.preview-table td{ padding:4px 8px; border-bottom:1px solid var(--ink-line); }

@media print{
  .topbar, .app-body{ display:none !important; }
  #label-sheet{ display:block; margin:0; }
  .label-page{ margin-bottom:0; page-break-after:always; }
  .label-page:last-child{ page-break-after:auto; }
  .label-card{ border:none; }
  @page{ size:100mm 150mm; margin:0; }
}

.checkbox-cell{ width:30px; }
.tabs-content > section{ display:none; }
.tabs-content > section.active{ display:block; }

.login-panel{ max-width:360px; }
.login-error{ color:var(--danger); font-size:12px; margin-top:10px; min-height:14px; }
#foot-admin{ display:none; }

/* ============ RESPONSIVE (mobile) ============ */
@media (max-width: 768px){
  .sidebar{
    position:fixed; top:52px; left:0; bottom:0;
    width:260px; padding:20px 0;
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:60;
    box-shadow:2px 0 16px rgba(0,0,0,.25);
  }
  /* Di mobile, sidebar disembunyikan/ditampilkan lewat transform (bukan width),
     jadi override aturan .collapsed dari versi desktop supaya tidak bentrok */
  .sidebar.collapsed{ width:260px; padding:20px 0; }
  .sidebar.collapsed > *{ opacity:1; pointer-events:auto; }
  .sidebar.open{ transform:translateX(0); }

  .sidebar-overlay.show{
    display:block; position:fixed; top:52px; left:0; right:0; bottom:0;
    background:rgba(10,20,30,.45); z-index:55;
  }

  .topbar-title{ font-size:12px; }
  .topbar-email{ display:none; }

  .main{ padding:20px 16px; max-width:100%; }

  .page-title{ font-size:19px; }

  .row{ gap:8px; }
  .field, input, select{ min-width:0; width:100%; }
  .row .field{ flex:1 1 140px; }

  .toolbar{ flex-direction:column; align-items:stretch; }
  .search-box{ width:100%; min-width:0; }

  table{ font-size:12px; }
  th, td{ padding:7px 6px; }

  .panel{ padding:14px; }
}

.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.rack-suggest-dropdown{
  position:absolute; left:0; right:0; top:100%;
  z-index:200; max-height:200px; overflow-y:auto;
  display:none; border:1px solid var(--line); border-radius:6px;
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.rack-suggest-item{ padding:6px 10px; cursor:pointer; font-size:13px; }
.rack-suggest-item:hover{ background:var(--paper-dim); }

/* Checkbox group untuk field Area (multi-value) */
.area-checkbox-group{
  display:flex; flex-wrap:wrap; gap:4px 10px;
  padding:6px 8px; border:1px solid var(--line); border-radius:4px;
  background:var(--paper); min-width:180px;
}
.area-checkbox-item{
  display:inline-flex; align-items:center; gap:4px;
  font-size:12px; cursor:pointer; white-space:nowrap; user-select:none;
}
.area-checkbox-item input[type="checkbox"]{ min-width:0; width:auto; padding:0; margin:0; }
#mass-edit-area-group{ padding:4px 8px; min-width:0; }

/* Filter Area multi-select (checklist dropdown) — v22 */
.area-filter{ position:relative; }
.area-filter-btn{ min-width:150px; text-align:left; }
.area-filter-panel{
  position:absolute; left:0; top:100%; margin-top:4px; z-index:200;
  display:none; min-width:190px; background:#fff;
  border:1px solid var(--line); border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.12); padding:6px 0;
}
.area-filter-item{
  display:flex; align-items:center; gap:6px;
  padding:6px 12px; font-size:12px; cursor:pointer;
  white-space:nowrap; user-select:none;
}
.area-filter-item:hover{ background:var(--paper-dim); }
.area-filter-item input{ min-width:0; width:auto; margin:0; }
.area-filter-footer{ border-top:1px solid var(--line); margin-top:4px; padding:6px 12px 2px; }
.area-filter-footer button{
  border:0; background:none; padding:0;
  color:var(--accent); font-size:11px; font-weight:600; cursor:pointer;
}
.area-filter-footer button:hover{ text-decoration:underline; }