/* =========================================================
   iBorneo-POS — Tampilan
   Palet dan proporsi mengikuti PanenTrack supaya dua aplikasi ini
   terasa satu keluarga, dengan aksen biru untuk membedakan konteks.
   ========================================================= */

:root{
  --bg:#F2EEE2; --card:#FFFFFF; --topbar:#1B2A38; --topbar-soft:#27394A;
  --accent:#1F6FB2; --accent-dark:#175A93; --accent-soft:#E3EFF9;
  --text:#1F2730; --text-muted:#6E7883; --border:#E2DDD0;
  --green-soft:#E1F2E4; --green-text:#2F6B45;
  --red-soft:#FBEAE8; --red-text:#B5432E;
  --amber-soft:#FBF0DC; --amber-text:#9A6B15;
  --font-display:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-display); -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
.app{ max-width:1360px; margin:0 auto; padding-bottom:60px; }

/* --- Topbar --- */
.topbar{
  background:var(--topbar); color:#fff; padding:16px 26px; border-radius:0 0 20px 20px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ width:38px; height:38px; border-radius:10px; background:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.brand-mark svg{ width:19px; height:19px; }
/* Nama aplikasi sengaja tidak setebal 800 dan tidak dirapatkan. "iBorneo-POS"
   punya huruf besar berdampingan (B, POS) dan satu tanda hubung; pada bobot
   800 dengan letter-spacing negatif, ketiganya saling menempel dan namanya
   terbaca sebagai satu gumpalan. Bobot 600 dengan jarak sedikit dilebarkan
   membuat tiap hurufnya berdiri sendiri tanpa kehilangan ketegasan di atas
   latar topbar yang gelap. */
.brand-text h1{ margin:0; font-size:16.5px; font-weight:600; letter-spacing:0.025em; }
.brand-text p{ margin:1px 0 0; font-size:11.5px; color:#9FAEBC; }
.tabs{ display:flex; gap:6px; background:var(--topbar-soft); padding:4px; border-radius:11px; flex-wrap:wrap; }
.tab-btn{ background:transparent; color:#B4C2CE; font-weight:700; font-size:12.5px; padding:8px 14px; border-radius:8px; text-decoration:none; }
.tab-btn.active{ background:var(--accent); color:#fff; }
.akun{ display:flex; align-items:center; gap:10px; }
.akun-nama{ text-decoration:none; text-align:right; line-height:1.25; }
.akun-nama b{ display:block; font-size:12.5px; color:#fff; }
.akun-nama span{ font-size:11px; color:#9FAEBC; }
.btn-keluar{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:9px; background:var(--topbar-soft); color:#C7D3DE; text-decoration:none; }
.btn-keluar:hover{ background:var(--accent); color:#fff; }

.subnav{ display:flex; gap:6px; padding:14px 26px 0; flex-wrap:wrap; }
.subnav-btn{ font-size:12px; font-weight:700; padding:7px 12px; border-radius:8px; text-decoration:none; color:var(--text-muted); border:1px solid transparent; }
.subnav-btn:hover{ background:#fff; border-color:var(--border); }
.subnav-btn.active{ background:#fff; border-color:var(--border); color:var(--accent-dark); }

.content{ padding:16px 26px 0; }

/* --- Panel --- */
.panel{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px; margin-bottom:18px; }
.panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.panel-head h2{ margin:0; font-size:15px; font-weight:800; }
.panel-head p{ margin:2px 0 0; font-size:12px; color:var(--text-muted); }
.panel-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* --- Tombol --- */
.btn{ border:none; border-radius:9px; padding:9px 14px; font-family:var(--font-display); font-weight:600; font-size:12.5px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-dark); }
.btn-ghost{ background:var(--bg); color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover{ background:#EAE4D3; }
.btn-danger{ background:var(--red-soft); color:var(--red-text); }
.btn-danger:hover{ background:#F6D9D6; }
.btn-sm{ padding:6px 10px; font-size:11.5px; }

/* --- Form --- */
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field label{ font-size:11.5px; font-weight:700; color:var(--text-muted); }
.field .hint{ font-size:11px; color:var(--text-muted); font-weight:400; }
.text-input,.num-input,.select-input,.date-input,textarea.text-input{
  border:1px solid var(--border); border-radius:8px; padding:9px 10px;
  font-family:var(--font-mono); font-size:12.5px; background:#fff; color:var(--text); width:100%;
}
.text-input:focus,.num-input:focus,.select-input:focus,.date-input:focus{ outline:2px solid var(--accent-soft); border-color:var(--accent); }
.field-wide{ grid-column:1/-1; }
.check{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; }
.form-actions{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }

/* Input scan: sengaja besar dan mencolok supaya kasir/petugas gudang
   langsung tahu di mana harus menembak barcode. */
.scan-box{ display:flex; gap:10px; align-items:center; background:var(--accent-soft); border:1px solid #C5DCF0; border-radius:12px; padding:12px 14px; margin-bottom:16px; }
.scan-box .scan-input{ flex:1; border:1px solid #A9C9E6; border-radius:9px; padding:12px 12px; font-family:var(--font-mono); font-size:16px; font-weight:700; letter-spacing:.06em; }
.scan-box .scan-label{ font-size:11.5px; font-weight:800; color:var(--accent-dark); text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }

/* --- Tabel --- */
.table-scroll{ overflow-x:auto; }
table.data-table{ border-collapse:separate; border-spacing:0; width:100%; min-width:620px; font-size:12.5px; }
table.data-table th{ text-align:right; font-size:10.5px; color:var(--text-muted); font-weight:800; text-transform:uppercase; letter-spacing:.04em; background:#FAF8F1; padding:9px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
table.data-table th:first-child,table.data-table th.left{ text-align:left; }
table.data-table td{ padding:9px 10px; border-bottom:1px solid var(--border); font-family:var(--font-mono); text-align:right; white-space:nowrap; }
table.data-table td:first-child,table.data-table td.left{ text-align:left; font-family:var(--font-display); }
table.data-table td.wrap{ white-space:normal; }
table.data-table tbody tr:hover td{ background:#FBF9F3; }
table.data-table tfoot td{ font-weight:800; border-top:2px solid var(--text); background:#FAF8F1; }
.kosong{ text-align:center; padding:34px 10px; color:var(--text-muted); font-size:13px; }

/* --- Badge --- */
.badge{ display:inline-block; padding:3px 8px; border-radius:20px; font-size:10.5px; font-weight:800; font-family:var(--font-display); letter-spacing:.02em; }
.badge-hijau{ background:var(--green-soft); color:var(--green-text); }
.badge-merah{ background:var(--red-soft); color:var(--red-text); }
.badge-kuning{ background:var(--amber-soft); color:var(--amber-text); }
.badge-netral{ background:#EEEAE0; color:var(--text-muted); }
.badge-biru{ background:var(--accent-soft); color:var(--accent-dark); }

/* --- Alert --- */
.alert-success{ background:var(--green-soft); color:var(--green-text); border:1px solid #BFE3C7; border-radius:10px; padding:10px 14px; font-size:12.5px; margin-bottom:16px; font-weight:600; }
.alert-danger{ background:var(--red-soft); color:var(--red-text); border:1px solid #F0C9C2; border-radius:10px; padding:10px 14px; font-size:12.5px; margin-bottom:16px; font-weight:600; }
.alert-info{ background:var(--accent-soft); color:var(--accent-dark); border:1px solid #C5DCF0; border-radius:10px; padding:10px 14px; font-size:12.5px; margin-bottom:16px; font-weight:600; }

/* --- Kartu statistik --- */
/* auto-fit, bukan 4 kolom mati: jumlah kartu berbeda per peran — kasir
   tidak melihat kartu penjualan, supervisor melihatnya. */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin-bottom:18px; }
@media (max-width:860px){ .stat-grid{ grid-template-columns:1fr 1fr; } }
.stat-card{ border:1px solid var(--border); border-radius:12px; padding:14px; background:var(--card); }
.stat-value{ font-family:var(--font-mono); font-weight:700; font-size:19px; }
.stat-label{ font-size:11px; color:var(--text-muted); margin-top:3px; }

/* --- Halaman login --- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:30px; width:100%; max-width:380px; }
/* Disamakan dengan wordmark di topbar — lihat catatan di .brand-text h1. */
.login-card h1{ margin:0 0 4px; font-size:20px; font-weight:600; letter-spacing:0.025em; }
.login-card p.sub{ margin:0 0 20px; font-size:12.5px; color:var(--text-muted); }

/* --- Label barcode untuk dicetak --- */
.label-sheet{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; }
.label-item{ border:1px dashed #C9C3B4; border-radius:8px; padding:8px; text-align:center; background:#fff; break-inside:avoid; }
.label-item .nm{ font-size:11px; font-weight:700; margin-bottom:2px; line-height:1.2; }
.label-item .hg{ font-size:13px; font-weight:800; font-family:var(--font-mono); margin-top:2px; }
.label-item svg{ max-width:100%; height:auto; }

/* =========================================================
   Kasir (POS)
   ========================================================= */

/* Keranjang di kiri, uang di kanan. Panel bayar dibuat lengket supaya
   total dan kembalian tetap terlihat walau keranjangnya panjang. */
.pos-layout{ display:grid; grid-template-columns:1fr 340px; gap:18px; align-items:start; }
@media (max-width:1040px){ .pos-layout{ grid-template-columns:1fr; } }
.pos-bayar{ position:sticky; top:14px; }

.otorisasi-panel{ border-color:#F0C9C2; background:var(--red-soft); }
.otorisasi-panel .panel-head h2{ color:var(--red-text); }

/* Baris yang barusan masuk disorot sebentar. Kasir menembak barcode tanpa
   melihat layar; sorotan ini yang memberi tahu scan-nya benar-benar masuk. */
.baris-baru td{ background:var(--accent-soft) !important; }

.qty-form{ display:inline-flex; gap:5px; align-items:center; }
.qty-input{ width:78px; text-align:right; padding:6px 8px; }
.satuan-kecil{ display:block; font-size:10.5px; color:var(--text-muted); margin-top:2px; }

.ringkas-baris{ display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; padding:5px 0; color:var(--text-muted); }
.ringkas-baris b{ font-family:var(--font-mono); color:var(--text); font-size:13px; }
.total-besar{ display:flex; justify-content:space-between; align-items:baseline; margin:8px 0 4px; padding-top:10px; border-top:2px solid var(--text); }
.total-besar span{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.total-besar b{ font-family:var(--font-mono); font-size:26px; font-weight:800; letter-spacing:-0.02em; }

.form-diskon{ margin:14px 0; padding:12px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.tombol-uang{ display:flex; gap:5px; margin-top:7px; flex-wrap:wrap; }
.kembalian{ margin-top:9px; font-family:var(--font-mono); font-size:14px; font-weight:700; color:var(--green-text); }
.kembalian.kurang{ color:var(--red-text); }
.btn-bayar{ width:100%; justify-content:center; margin-top:14px; padding:14px; font-size:14px; font-weight:800; }
.btn-bayar:disabled{ background:#C9D4DE; cursor:not-allowed; }
.shift-info{ margin-top:14px; font-size:11px; color:var(--text-muted); line-height:1.5; text-align:center; }

/* =========================================================
   Struk 58 mm

   Lebarnya dipatok dalam milimeter, bukan piksel: printer thermal
   memotong apa pun yang lewat dari lebar kertasnya, dan potongannya
   selalu di sisi kanan — persis di kolom harga.
   ========================================================= */
.struk-body{ background:var(--bg); padding:20px; }
.struk-alat{ display:flex; gap:8px; justify-content:center; margin-bottom:16px; }
.struk{
  width:58mm; margin:0 auto; background:#fff; padding:5mm 4mm;
  font-family:var(--font-mono); font-size:11px; line-height:1.45; color:#000;
}
.struk-kepala{ text-align:center; font-size:11px; line-height:1.4; }
.struk-kepala b{ font-size:13px; letter-spacing:.04em; }
.struk-garis{ border-top:1px dashed #000; margin:6px 0; }
.struk-meta{ display:flex; justify-content:space-between; gap:8px; }
.struk-item{ margin:3px 0; }
.struk-item .nm{ word-break:break-word; }
.struk-item .qt{ display:flex; justify-content:space-between; gap:8px; }
.struk-total{ font-size:14px; font-weight:800; margin:4px 0; }
.struk-batal{ text-align:center; font-weight:800; margin:6px 0; letter-spacing:.04em; }
.struk-kaki{ text-align:center; font-size:10px; line-height:1.4; margin-top:4px; }

@media print{
  .topbar,.subnav,.panel-actions,.no-print{ display:none !important; }
  body{ background:#fff; }
  .app{ max-width:none; padding:0; }
  .content{ padding:0; }
  .panel{ border:none; padding:0; margin:0; }
  .label-item{ border:1px dashed #bbb; }
  .struk-body{ padding:0; background:#fff; }
  .struk{ width:auto; padding:0; }
  @page{ margin:3mm; }
}