/* ============================================================
   Ghudang — token desain.
   Satu-satunya sumber warna, ritme, dan primitif visual.
   Komponen TIDAK boleh menulis hex mentah; ambil dari sini.
   Lihat docs/superpowers/specs/2026-08-08-redesain-ui-mobile-first-design.md
   ============================================================ */

:root {
  /* ---- Permukaan ---- */
  --g-bg: #F1F5F9;
  --g-surface: #FFFFFF;
  --g-sidebar: #0F172A;
  --g-border: #E2E8F0;
  --g-ink: #0F172A;
  --g-ink-muted: #64748B;

  /* ---- Aksi: SATU warna aksi, titik. ---- */
  --g-primary: #0284C7;
  --g-primary-hover: #0369A1;
  --g-primary-ink: #FFFFFF;

  /* ---- Semantik: dipakai untuk ARTI, bukan hiasan ---- */
  --g-success: #059669;
  --g-warning: #B45309;  /* amber-700. Sengaja bukan amber-600, yang cuma
                            ~3.1:1 di atas putih — gagal 4.5:1 untuk teks. */
  --g-danger: #DC2626;

  /* ---- Ritme 4/8px ---- */
  --g-r: 8px;
  --g-s1: 4px;
  --g-s2: 8px;
  --g-s3: 12px;
  --g-s4: 16px;
  --g-s5: 24px;
  --g-s6: 32px;
  --g-s7: 48px;

  /* ---- Tabler mengambil ini ---- */
  --tblr-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tblr-primary: #0284C7;

  /* Lebar sidebar. Variabel ini MILIK KITA, bukan milik Tabler — lihat blok
     penjelasan di bawah. Satu-satunya sumber angka untuk lebar sidebar dan
     margin konten sekaligus. */
  --g-sidebar-w: 248px;
}

body {
  background: var(--g-bg);
  color: var(--g-ink);
  font-family: var(--tblr-font-sans-serif);
}

/* Akar penyebab luber horizontal: flex item bawaannya min-width:auto, jadi
   tidak bisa menyusut di bawah lebar isinya. Ini perbaikannya di akar —
   bukan overflow:hidden, yang cuma menyembunyikan gejalanya. */
.page-wrapper { min-width: 0; }

/* ============================================================
   Lebar sidebar: SEPASANG angka, satu sumber.

   Tabler 1.4.0 (versi yang dikunci di dashboard.html) menuliskan lebar
   sidebar sebagai dua angka literal `15rem` di dua aturan terpisah, keduanya
   di dalam @media (min-width:992px):

     .navbar-vertical.navbar-expand-lg              { width: 15rem }
     .navbar-expand-lg.navbar-vertical ~ .navbar,
     .navbar-expand-lg.navbar-vertical ~ .page-wrapper { margin-left: 15rem }

   TIDAK ADA custom property untuk ini — sudah dicari langsung di berkas CDN
   yang benar-benar dilayani, dan `--tblr-*sidebar*` tidak ada satu pun. Jadi
   variabel di bawah milik kita, bukan hasil menimpa variabel vendor.

   Percobaan pertama gagal karena menimpa satu sisi saja: mengubah lebar tanpa
   margin menghasilkan konten tertimpa, mengubah margin tanpa lebar
   menghasilkan pita mati. Kuncinya bukan spesifisitas melainkan MEMASANGKAN
   keduanya — kedua aturan di bawah menyalin selektor Tabler persis dan
   membaca angka yang sama, jadi mustahil bergeser sendiri-sendiri.
   ghudang.css dimuat SETELAH tabler.min.css, jadi spesifisitas yang sama
   sudah cukup untuk menang; tidak perlu !important.
   ============================================================ */
@media (min-width: 992px) {
  .navbar-vertical.navbar-expand-lg {
    width: var(--g-sidebar-w);
  }
  .navbar-expand-lg.navbar-vertical ~ .navbar,
  .navbar-expand-lg.navbar-vertical ~ .page-wrapper {
    margin-left: var(--g-sidebar-w);
  }
}

/* ---- Rel ikon: 992–1199px ----
   Di laptop sempit, 248px label memakan seperempat lebar layar untuk teks
   yang sudah dihafal operator. Rel menyusutkannya jadi ikon saja. Cukup
   mengubah SATU angka: kedua aturan di atas mengikutinya sendiri, dan
   itulah gunanya memasangkan mereka lewat variabel. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  :root { --g-sidebar-w: 72px; }

  /* Yang hilang hanyalah teks. Logo dan avatar tetap tinggal — rel tanpa
     jangkar visual di atas dan bawah terasa seperti halaman yang rusak,
     bukan seperti navigasi yang diringkas. */
  .saas-sidebar .saas-nav-heading,
  .saas-sidebar .saas-brand-text,
  .saas-sidebar .saas-user-text {
    display: none;
  }

  /* Label nav TIDAK boleh `display: none` — itu mencabutnya dari pohon
     aksesibilitas juga, sehingga delapan tautan navigasi kehilangan nama
     sama sekali bagi pembaca layar. Disembunyikan secara visual saja. */
  .saas-sidebar .saas-nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* ...lalu muncul kembali sebagai label melayang saat disorot atau
     difokus keyboard. Fokus ikut dilayani karena rel ikon tanpa jalan
     keyboard hanya memindahkan masalahnya. */
  .saas-nav-link { position: relative; }
  .saas-nav-link:hover .saas-nav-label,
  .saas-nav-link:focus-visible .saas-nav-label {
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    border-radius: var(--g-r);
    background: var(--g-sidebar);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .35);
    z-index: 1040;
    pointer-events: none;
  }
  /* Pemilih organisasi memakai utility `d-flex`, yang sudah !important —
     `display: none` biasa kalah dan kotaknya tetap tampil sebagai bingkai
     berisi satu chevron. */
  .saas-sidebar .saas-tenant-picker {
    display: none !important;
  }
  .saas-sidebar .tenant-switcher > .d-flex,
  .saas-sidebar .user-profile > .d-flex {
    justify-content: center;
  }
  /* `me-2` adalah utility Bootstrap yang sudah !important, jadi satu-satunya
     cara melepasnya juga !important. Tanpa ini logo dan avatar duduk
     melenceng ke kiri di rel selebar 72px. */
  .saas-sidebar .saas-brand-logo,
  .saas-sidebar .user-profile .avatar {
    margin-right: 0 !important;
  }
  /* Ikon jadi satu-satunya isi, jadi dipusatkan dan margin kanannya dilepas —
     tanpa ini ikonnya duduk melenceng ke kiri di rel selebar 72px. */
  .saas-nav-link {
    justify-content: center;
    padding: 10px 0;
  }
  .saas-nav-link .ti {
    margin-right: 0;
  }
  /* Tabler memberi sidebar `overflow-y: scroll`, dan wadah bergulir MENGGUNTING
     label melayang di atas — kalau salah satu sumbu `auto`, sumbu lainnya ikut
     menggunting; tidak ada kombinasi yang membolehkan luapan ke samping sambil
     tetap bergulir ke bawah. Karena isi rel hanya 8 ikon (diukur ±530px, muat
     di layar 992px terpendek yang wajar), gulir ditukar dengan label yang
     benar-benar terlihat. Kalau item nav bertambah banyak, ini yang pertama
     harus ditinjau ulang. */
  .saas-sidebar.saas-sidebar { overflow: visible; }
}

/* ============================================================
   Data: angka, kode, SN, nomor dokumen.
   tabular-nums membuat tiap digit sama lebar, jadi kolom tidak
   bergoyang dan mata bisa membandingkan tanpa membaca.
   ============================================================ */
.g-code,
.g-num {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: .875em;
  letter-spacing: -.01em;
}
.g-num { text-align: right; }

/* ============================================================
   Bahasa status. Tujuh kelas, satu arti masing-masing.
   Titik ::before disengaja: statusnya tetap terbedakan saat
   dicetak hitam-putih dan oleh mata yang buta warna. Warna
   tidak pernah jadi satu-satunya pembawa arti.
   ============================================================ */
.g-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.g-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.g-status--gudang    { background: #F1F5F9; color: #334155; }
.g-status--transit   { background: #E0F2FE; color: #075985; }
.g-status--hutang    { background: #FEF3C7; color: #92400E; }
.g-status--terpasang { background: #D1FAE5; color: #065F46; }
.g-status--rusak     { background: #FEE2E2; color: #991B1B; }
.g-status--rma       { background: #FCE7F3; color: #9D174D; }
.g-status--batal     { background: #F1F5F9; color: #64748B; }
.g-status--batal::before { background: #94A3B8; }

/* ============================================================
   Label netral: kategori, peran, izin, pencacah, lokasi rak.
   Sengaja BUKAN .g-status — status punya kosakatanya sendiri, dan
   mencampur keduanya adalah persis cara 7 status berubah jadi 17
   varian warna. Bentuknya pun dibedakan: status berpil (999px),
   label bersudut (6px), jadi mata bisa membedakannya tanpa membaca.
   ============================================================ */
.g-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  background: #F1F5F9;
  color: #334155;
}
/* Pencacah di atas ikon: angka saja, jadi paddingnya lebih rapat. */
.g-count { padding: 1px 6px; font-size: 11px; }

.g-tag--info    { background: #E0F2FE; color: #075985; }
.g-tag--success { background: #D1FAE5; color: #065F46; }
.g-tag--warning { background: #FEF3C7; color: #92400E; }
.g-tag--danger  { background: #FEE2E2; color: #991B1B; }

/* ============================================================
   Target sentuh. Minimal 44x44px di mana pun, termasuk desktop —
   tidak ada alasan tombol ikon jadi lebih kecil dari jempol.
   ============================================================ */
.g-tap {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Tabler mengirim tombol setinggi 40px dan tombol kecil 28px — cukup untuk
   mouse, terlalu kecil untuk jempol. Aturannya dipasang di kelas dasarnya,
   bukan pada tiap tombol satu per satu, supaya kontrol yang lahir dari
   innerHTML di dashboard.js ikut kebagian tanpa harus diingat penulisnya.
   .form-check-input sengaja tidak ikut: kotak centang 44px terlihat rusak,
   dan labelnya sendiri sudah jadi target sentuh yang lapang. */
.btn,
.btn-close,
.form-control,
.form-select {
  min-height: 44px;
}
.btn-icon,
.btn-close {
  min-width: 44px;
}
/* Nomor dokumen tampil sebagai tombol-tautan di dalam sel tabel. Tingginya
   ikut 44px seperti tombol lain, tapi teksnya harus tetap rata tengah
   terhadap teks kolom sebelahnya — tanpa ini barisnya jadi jangkung dan
   nomornya menggantung di atas. */
.btn-link.align-baseline {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* ============================================================
   Aksesibilitas
   ============================================================ */
*:focus-visible {
  outline: 2px solid var(--g-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Kerangka aplikasi — dipindahkan dari blok <style> di dalam
   dashboard.html. Harus di sini, bukan di sana: ghudang.css dimuat
   lebih dulu, jadi apa pun yang tertinggal inline akan mengalahkan
   aturan responsif di bawah tanpa terlihat kenapa.
   ============================================================ */
.saas-sidebar {
  background-color: var(--g-sidebar);
  color: #f8fafc;
  transition: transform .2s ease;
}
.saas-nav-link {
  color: #94a3b8;
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  text-decoration: none;
  font-weight: 500;
  margin-bottom: 4px;
  min-height: 44px;            /* target sentuh */
  transition: background .18s ease, color .18s ease;
}
.saas-nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.saas-nav-link.active { color: #fff; background: var(--g-primary); font-weight: 600; }
.saas-nav-link .ti { font-size: 1.25rem; margin-right: 12px; flex: none; }

/* ---- Off-canvas: sidebar keluar dari alur, dibuka hamburger ---- */
@media (max-width: 991.98px) {
  .saas-sidebar.saas-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    z-index: 1045;
    width: var(--g-sidebar-w);
    min-width: var(--g-sidebar-w);
    flex: 0 0 var(--g-sidebar-w);
    transform: translateX(-100%);
    overflow-y: auto;
  }
  .saas-sidebar.saas-sidebar.is-open { transform: translateX(0); }
  .saas-sidebar .saas-nav-label,
  .saas-sidebar .tenant-switcher,
  .saas-sidebar .saas-brand-text,
  .saas-sidebar .saas-user-text { display: revert; }
  .saas-nav-link { justify-content: flex-start; padding: 10px 14px; }
  .saas-nav-link .ti { margin-right: 12px; }
  .saas-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 1040; }
}
@media (min-width: 992px) { #sidebarToggle { display: none; } }

/* ============================================================
   Layar teknisi di HP: Tas Saya + navigasi bawah.
   Keduanya mati secara bawaan dan hanya hidup untuk
   body.is-teknisi di bawah 768px. Tanpa penyembunyian ini,
   seorang ADMIN di desktop mendapat dua tampilan handover
   sekaligus dan sebuah bilah nav yang bukan miliknya.
   ============================================================ */
#tasSayaPanel { display: none; }
#techBottomNav { display: none; }

@media (max-width: 767.98px) {
  body.is-teknisi #tasSayaPanel { display: block; }
  body.is-teknisi #techBottomNav { display: grid; }
  body.is-teknisi #handoverDesktopPanel { display: none; }

  /* Tab Riwayat: tukar panel, bukan halaman baru. Tabelnya sudah terisi
     data teknisi ini sendiri sejak endpoint hutang dikunci identitas. */
  body.is-teknisi.is-riwayat #tasSayaPanel { display: none; }
  body.is-teknisi.is-riwayat #handoverDesktopPanel { display: block; }

  /* Isi halaman tidak boleh tertutup bilah nav yang menempel. */
  body.is-teknisi .page-body { padding-bottom: 76px; }
}

.tech-bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  grid-template-columns: repeat(4, 1fr);
  background: var(--g-surface);
  border-top: 1px solid var(--g-border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tech-nav-item {
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  color: var(--g-ink-muted);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
}
.tech-nav-item .ti { font-size: 1.35rem; }
.tech-nav-item.is-active { color: var(--g-primary); }

/* Kartu isi tas. Satu barang satu kartu — di layar 375px tabel tujuh kolom
   tidak terbaca, dan menggeser tabel ke samping bukan membaca. */
.tas-card {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r);
  padding: var(--g-s3);
  margin-bottom: var(--g-s2);
}
.tas-card__nama { font-weight: 600; line-height: 1.3; }
.tas-card__meta { display: flex; flex-wrap: wrap; gap: var(--g-s2); align-items: center; margin-top: var(--g-s1); }
.tas-card__aksi { display: flex; gap: var(--g-s2); margin-top: var(--g-s3); }
.tas-card__aksi .btn { flex: 1; min-height: 44px; }

.haspel-drum-visualizer {
  background: linear-gradient(135deg, #1e293b 0%, var(--g-sidebar) 100%);
  color: #f8fafc;
  border-radius: var(--g-r);
  padding: 1.5rem;
}
.barcode-viewport {
  border: 2px dashed var(--g-primary);
  background: rgba(2, 132, 199, .05);
  border-radius: var(--g-r);
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.barcode-scanner-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--g-danger);
  box-shadow: 0 0 8px var(--g-danger);
  animation: scan 2s infinite linear;
}
@keyframes scan { 0% { top: 0; } 50% { top: 100%; } 100% { top: 0; } }

/* Blok @media print lama dihapus bersama modal pratinjau slip (12 Agustus 2026).
   Aturannya menyembunyikan `body *` lalu memunculkan kembali #printableSlipArea;
   begitu elemen itu tiada, yang tersisa hanyalah "sembunyikan segalanya" — Ctrl+P
   di dashboard mencetak halaman kosong. Slip termal & surat jalan sekarang punya
   dokumen cetaknya sendiri dari server, lengkap dengan @page dan lebar 80mm-nya,
   jadi dashboard tidak perlu aturan cetak sama sekali. */