/* =====================================================
   RENTALKU — Design Tokens
   Konsep: "panel bengkel/garasi digital" — navy gelap + aksen
   amber (rambu keselamatan) + angka bergaya odometer.
   ===================================================== */
:root{
  --navy:        #12192B;
  --navy-2:      #1B2440;
  --navy-3:      #232F52;
  --bg:          #F1F3F8;
  --card:        #FFFFFF;
  --accent:      #F5A524;   /* amber - aksi utama */
  --accent-dark: #C97F0F;
  --teal:        #17A883;   /* tersedia / sukses */
  --danger:      #E5484D;
  --info:        #3E8EDE;
  --text:        #171E2E;
  --text-mute:   #6B7280;
  --border:      #E4E8F0;
  --radius:      14px;
  --radius-sm:   9px;
  --shadow:      0 2px 10px rgba(18,25,43,0.06);
  --shadow-lg:   0 12px 32px rgba(18,25,43,0.14);
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0; overflow-x:hidden; max-width:100%; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  width:100%;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); letter-spacing:-0.02em;}
a{color:inherit; text-decoration:none;}
.mono{font-family:var(--font-mono);}

/* ---------- Layout shell ----------
   app-shell dikunci tingginya = tinggi layar (100vh) dan overflow:hidden,
   supaya sidebar (di dalamnya) tidak pernah ikut ter-scroll.
   Yang scroll hanya .main (lewat .content di dalamnya). */
.app-shell{display:flex; height:100vh; overflow:hidden;}
.sidebar{
  width:250px; flex-shrink:0;
  background:linear-gradient(180deg,var(--navy) 0%, #0D1220 100%);
  color:#EAECF3; display:flex; flex-direction:column;
  height:100vh; overflow-y:auto; z-index:40;
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px;
  padding:22px 20px; border-bottom:1px solid rgba(255,255,255,0.08);
}
.sidebar-brand .mark{
  width:34px;height:34px;border-radius:9px;
  background:var(--accent); display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display); font-weight:700; color:#1B1200; font-size:16px;
}
.sidebar-brand .name{font-family:var(--font-display); font-weight:700; font-size:16.5px; line-height:1.1;}
.sidebar-brand .sub{font-size:11px; color:#8993AB; letter-spacing:.04em;}

.nav-group{padding:14px 12px;}
.nav-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:#6A7492; padding:10px 12px 6px;}
.nav-link{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:10px; color:#C4CADC;
  font-size:14px; font-weight:500; margin-bottom:2px; transition:.15s;
}
.nav-link svg{width:18px;height:18px; flex-shrink:0; opacity:.85;}
.nav-link:hover{background:rgba(255,255,255,0.06); color:#fff;}
.nav-link.active{background:var(--accent); color:#1B1200; font-weight:600;}
.nav-link.active svg{opacity:1;}
.nav-badge{
  margin-left:auto; background:var(--danger); color:#fff; font-size:11px; font-weight:700;
  line-height:1; padding:3px 6px; border-radius:20px; min-width:18px; text-align:center;
  flex-shrink:0;
}
.nav-link.active .nav-badge{background:#fff; color:var(--danger);}

/* ---------- Menu dropdown/collapsible (modul baru) ---------- */
.nav-collapse{margin-bottom:2px;}
.nav-collapse-summary{cursor:pointer; list-style:none; user-select:none;}
.nav-collapse-summary::-webkit-details-marker{display:none;}
.nav-collapse-summary svg:last-child{margin-left:auto; transition:transform .15s; flex-shrink:0; width:15px; height:15px;}
.nav-collapse[open] > .nav-collapse-summary svg:last-child{transform:rotate(180deg);}
.nav-collapse-body{padding-left:14px; margin-top:2px;}
.nav-collapse-body .nav-link{font-size:13.5px; padding:8px 12px;}

/* ---------- Banner ajakan aktifkan push notification ---------- */
.push-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:200;
  max-width:520px; margin:0 auto;
  background:var(--navy); color:#EAECF3; border-radius:14px; padding:14px 16px;
  box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:13.5px;
}
.push-banner span{flex:1; min-width:200px;}
.push-banner-btns{display:flex; gap:8px; flex-shrink:0;}
@media(max-width:480px){
  .push-banner{flex-direction:column; align-items:stretch; text-align:center;}
  .push-banner-btns{justify-content:center;}
}

.sidebar-foot{
  margin-top:auto; padding:16px 18px; border-top:1px solid rgba(255,255,255,0.08);
  font-size:12.5px; color:#8993AB;
}
.role-pill{
  display:inline-block; font-size:10.5px; padding:2px 8px; border-radius:20px;
  background:rgba(245,165,36,0.18); color:var(--accent); font-weight:600; letter-spacing:.03em;
}

.main{flex:1; min-width:0; display:flex; flex-direction:column; height:100vh; overflow-y:auto; overflow-x:hidden;}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 26px; background:var(--card); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:30;
}
.topbar h1{font-size:19px; margin:0;}
.topbar .desc{font-size:12.5px; color:var(--text-mute); margin-top:2px;}
.content{padding:24px 26px 60px; max-width:1400px; width:100%; margin:0 auto; box-sizing:border-box;}

/* ---------- Cards / grid ---------- */
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); max-width:100%;}
.card-pad{padding:20px 22px;}
.grid{display:grid; gap:16px; min-width:0;}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));} .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

/* ---------- Odometer stat ---------- */
.stat-card{padding:18px 20px; position:relative; overflow:hidden;}
.stat-card .icon{
  width:38px;height:38px;border-radius:10px; display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.stat-card .label{font-size:12.5px; color:var(--text-mute); font-weight:500;}
.stat-card .odometer{
  font-family:var(--font-mono); font-size:28px; font-weight:700; letter-spacing:0.01em;
  background:var(--navy); color:#F1D9A8; display:inline-block; padding:4px 10px; border-radius:7px; margin-top:6px;
}
.stat-card .trend{font-size:11.5px; margin-top:8px; color:var(--text-mute);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:10px; font-size:14px; font-weight:600;
  border:1px solid transparent; cursor:pointer; transition:.15s; font-family:var(--font-body);
}
.btn-primary{background:var(--accent); color:#1B1200;}
.btn-primary:hover{background:var(--accent-dark); color:#fff;}
.btn-dark{background:var(--navy); color:#fff;}
.btn-dark:hover{background:#0D1220;}
.btn-outline{background:transparent; border-color:var(--border); color:var(--text);}
.btn-outline:hover{border-color:var(--navy);}
.btn-danger{background:#FCE9E9; color:var(--danger);}
.btn-danger:hover{background:var(--danger); color:#fff;}
.btn-success{background:#E4F7F0; color:var(--teal);}
.btn-success:hover{background:var(--teal); color:#fff;}
.btn-sm{padding:6px 11px; font-size:12.5px; border-radius:8px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* ---------- Forms ---------- */
label{font-size:13px; font-weight:600; color:var(--text); display:block; margin-bottom:6px;}
.field{margin-bottom:16px;}
input[type=text],input[type=number],input[type=password],input[type=date],
input[type=datetime-local],input[type=tel],input[type=file],select,textarea{
  width:100%; padding:10px 13px; border:1.5px solid var(--border); border-radius:10px;
  font-size:14px; font-family:var(--font-body); background:#fff; color:var(--text);
  transition:.15s;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(245,165,36,0.15);}
textarea{resize:vertical; min-height:80px;}
.hint{font-size:11.5px; color:var(--text-mute); margin-top:4px;}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border);}
table{width:100%; border-collapse:collapse; background:#fff; font-size:13.5px;}
thead th{
  text-align:left; padding:12px 16px; background:#F7F8FB; color:var(--text-mute);
  font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
tbody td{padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#FAFBFD;}

/* ---------- Badges ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; font-size:11.5px; font-weight:600;}
.badge-success{background:#E4F7F0; color:var(--teal);}
.badge-warning{background:#FEF1DC; color:var(--accent-dark);}
.badge-danger{background:#FCE9E9; color:var(--danger);}
.badge-info{background:#E7F1FC; color:var(--info);}
.badge-secondary{background:#EEF0F5; color:var(--text-mute);}

/* ---------- Login page ---------- */
.login-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 20% 20%, #1B2440 0%, #0B0F1C 70%);
  padding:20px;
}
.login-card{
  width:100%; max-width:380px; background:#fff; border-radius:18px; padding:36px 32px;
  box-shadow:var(--shadow-lg);
}
.login-mark{
  width:52px;height:52px;border-radius:14px; background:var(--accent);
  display:flex;align-items:center;justify-content:center; font-family:var(--font-display);
  font-weight:700; font-size:22px; color:#1B1200; margin:0 auto 18px;
}
.login-card h1{text-align:center; font-size:20px; margin:0 0 4px;}
.login-card p.sub{text-align:center; color:var(--text-mute); font-size:13px; margin:0 0 26px;}

/* ---------- Alerts / flash ---------- */
.alert{padding:12px 16px; border-radius:10px; font-size:13.5px; margin-bottom:16px; display:flex; gap:10px; align-items:flex-start;}
.alert-success{background:#E4F7F0; color:#0D7A5A;}
.alert-error{background:#FCE9E9; color:#B02A2E;}
.alert-info{background:#E7F1FC; color:#1B5FA8;}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(15,19,32,0.55); display:none;
  align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-overlay.open{display:flex;}
.modal-box{background:#fff; border-radius:16px; width:100%; max-width:560px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg);}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border);}
.modal-head h3{margin:0; font-size:16.5px;}
.modal-close{cursor:pointer; font-size:20px; color:var(--text-mute); line-height:1; background:none; border:none;}
.modal-body{padding:20px 22px;}

/* ---------- Vehicle card (grid pilih kendaraan) ---------- */
.vcard{
  border:1.5px solid var(--border); border-radius:var(--radius); padding:14px; cursor:pointer; transition:.15s; background:#fff;
}
.vcard:hover{border-color:var(--accent);}
.vcard.selected{border-color:var(--accent); background:#FFFAF0; box-shadow:0 0 0 3px rgba(245,165,36,0.15);}
.vimg{width:100%; height:110px; border-radius:9px; background:var(--bg); display:flex;align-items:center;justify-content:center; margin-bottom:10px; overflow:hidden;}
.vimg img{width:100%;height:100%;object-fit:contain;display:block;padding:8px;}
.vcard .vname{font-weight:700; font-size:14px;}
.vcard .vplat{font-family:var(--font-mono); font-size:12px; color:var(--text-mute);}
.vcard .vtarif{margin-top:8px; font-weight:700; color:var(--accent-dark); font-size:14px;}

/* ---------- Utility ---------- */
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-2{gap:8px;} .gap-3{gap:12px;} .gap-4{gap:16px;}
.mt-1{margin-top:4px;} .mt-2{margin-top:8px;} .mt-3{margin-top:12px;} .mt-4{margin-top:16px;} .mt-6{margin-top:24px;}
.mb-1{margin-bottom:4px;} .mb-2{margin-bottom:8px;} .mb-3{margin-bottom:12px;} .mb-4{margin-bottom:16px;}
.text-mute{color:var(--text-mute);} .text-sm{font-size:12.5px;} .text-xs{font-size:11px;}
.font-bold{font-weight:700;} .w-full{width:100%;}
.empty-state{text-align:center; padding:50px 20px; color:var(--text-mute);}
.empty-state svg{opacity:.4; margin-bottom:12px;}

/* ---------- Tombol tampilkan/sembunyikan menu (selalu ada, semua ukuran layar) ---------- */
.sidebar-toggle-btn{
  display:flex; background:var(--navy); color:#fff; border:none;
  width:38px; height:38px; border-radius:9px;
  align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.sidebar-toggle-btn:hover{background:#0D1220;}

/* ---------- Desktop/tablet lebar (>960px): collapse di tempat, konten ikut melebar ---------- */
@media(min-width:961px){
  .sidebar{transition:width .18s ease, min-width .18s ease, padding .18s ease, opacity .18s ease;}
  html.sidebar-collapsed-init .sidebar{
    width:0; min-width:0; padding:0; opacity:0; overflow:hidden; border:none; pointer-events:none;
  }
}

/* ---------- Mobile / tablet sempit (kasir) ---------- */
@media(max-width:960px){
  .sidebar{position:fixed; left:-260px; transition:.2s; box-shadow:var(--shadow-lg); z-index:40;}
  .sidebar.open{left:0;}
  .sidebar-backdrop{display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:39;}
  .sidebar-backdrop.open{display:block;}
  .content{padding:16px;}
  .topbar{padding:14px 16px;}
}

/* Print (invoice) */
@media print{
  .no-print{display:none !important;}
  body{background:#fff;}
  .content{padding:0;}
}

/* =====================================================
   TAMPILAN ALA-APLIKASI UNTUK KASIR (HP & TABLET, <=960px)
   Bottom navbar (ganti hamburger) + grid menu ikon di halaman
   utama tiap modul. Desktop/laptop & akun admin tidak berubah.
   ===================================================== */
.app-bottom-nav{display:none;}
.app-menu-grid{display:none;}

@media(max-width:960px){
  body.is-kasir .hide-mobile-kasir{display:none;}

  body.is-kasir .app-bottom-nav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:#fff; border-top:1px solid var(--border);
    box-shadow:0 -4px 16px rgba(18,25,43,0.08);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  body.is-kasir .app-bottom-nav-item{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:6px 2px; border:none; background:none; cursor:pointer;
    color:var(--text-mute); font-family:var(--font-body); font-size:10.5px; font-weight:600;
  }
  body.is-kasir .app-bottom-nav-item svg{width:21px; height:21px;}
  body.is-kasir .app-bottom-nav-item.active{color:var(--accent-dark);}
  body.is-kasir .app-bottom-nav-item span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:74px;}

  /* Beri jarak supaya konten paling bawah tidak ketutup bottom navbar */
  body.is-kasir .content{padding-bottom:88px;}

  body.is-kasir .app-menu-grid{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px 6px;
    background:#fff; padding:18px 14px 20px; border-bottom:1px solid var(--border);
  }
  body.is-kasir .app-menu-item{
    display:flex; flex-direction:column; align-items:center; gap:7px;
    text-align:center; color:var(--text);
  }
  body.is-kasir .app-menu-icon{
    position:relative; width:50px; height:50px; border-radius:16px;
    background:linear-gradient(160deg,var(--navy-2),var(--navy)); color:var(--accent);
    display:flex; align-items:center; justify-content:center;
  }
  body.is-kasir .app-menu-item:active .app-menu-icon{opacity:.8;}
  body.is-kasir .app-menu-label{font-size:11px; font-weight:600; line-height:1.25;}
  body.is-kasir .app-menu-badge{
    position:absolute; top:-4px; right:-4px; background:var(--danger); color:#fff;
    font-size:10px; font-weight:700; line-height:1; padding:3px 5px; border-radius:20px;
    min-width:16px; text-align:center; border:2px solid #fff;
  }

  /* Sidebar dipakai sebagai drawer "Akun" untuk kasir (dibuka dari tab Akun
     di bottom navbar): tampilkan judul yang lebih pas untuk konteks itu. */
  body.is-kasir .sidebar-brand .sub{content:'';}
}

@media(max-width:380px){
  body.is-kasir .app-menu-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* ---- Kartu statistik: 2 kolom & lebih ringkas di HP (bukan 1 kolom memanjang) ---- */
@media(max-width:960px){
  body.is-kasir .grid-4, body.is-kasir .grid-3, body.is-kasir .grid-2{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important;
  }
  /* Pastikan kartu di dalam grid boleh menyusut (jangan dorong lebar ke luar
     layar gara-gara ada teks panjang di dalamnya seperti nama produk). */
  body.is-kasir .grid-4 > *, body.is-kasir .grid-3 > *, body.is-kasir .grid-2 > *{min-width:0;}
  body.is-kasir .stat-card{padding:13px 14px;}
  body.is-kasir .stat-card .icon{width:30px; height:30px; margin-bottom:8px;}
  body.is-kasir .stat-card .label{font-size:11px; line-height:1.3;}
  body.is-kasir .stat-card .odometer{font-size:16px; padding:3px 7px; margin-top:5px; letter-spacing:0;}
  body.is-kasir .stat-card .trend{font-size:10.5px;}
}

/* ---- Form filter: 2 kolom ringkas ala-aplikasi, bukan input web memanjang ---- */
@media(max-width:960px){
  body.is-kasir .filter-grid{display:grid !important; grid-template-columns:1fr 1fr; gap:8px;}
  body.is-kasir .filter-grid > *{width:100% !important; margin:0 !important; min-width:0 !important; flex:none !important;}
  body.is-kasir .filter-grid > .filter-full{grid-column:1 / -1;}
  body.is-kasir .filter-grid input,
  body.is-kasir .filter-grid select{font-size:13px; padding:9px 10px;}
}

/* ---- Tabel riwayat/data -> daftar kartu di HP (tidak perlu geser kanan-kiri) ----
   PENTING: .table-wrap hanya disembunyikan pada halaman yang SUDAH dikasih
   kartu pengganti (ditandai class "has-mobile-list" pada card pembungkusnya).
   Kalau langsung menyasar semua .table-wrap, halaman lain yang belum dikasih
   tampilan kartu (mis. Master Tarif BRILink) datanya jadi hilang sama sekali
   di HP -- itu bug yang sempat kejadian, sekarang sudah dibatasi. */
@media(max-width:960px){
  body.is-kasir .content,
  body.is-kasir .card,
  body.is-kasir .grid,
  body.is-kasir .produk-pos-item,
  body.is-kasir .kategori-tab-scroller{
    max-width:100% !important;
    overflow-x:hidden;
  }
  body.is-kasir .kategori-tab-row{overflow-x:auto !important;}
}

.mobile-row-list{display:none;}
@media(max-width:960px){
  /* Batas 960px dipakai di sini (bukan 640px) supaya SAMA PERSIS dengan batas
     yang dipakai menu bawah/bottom-nav & sidebar mobile -- yang sudah
     terbukti terdeteksi dengan benar di HP. Kalau beda batas, bisa terjadi
     menu bawah muncul (aktif di 960px) tapi tabel tidak ikut disembunyikan
     (kalau baru aktif di 640px dan lebar HP di antara 641-960px).
     Dua cara deteksi dipakai bersamaan (bukan cuma salah satu) supaya lebih
     tahan terhadap kemungkinan file yang belum lengkap ter-update:
     1) class manual "has-mobile-list" pada pembungkusnya, ATAU
     2) deteksi otomatis: kalau di dalam .card yang sama ada .mobile-row-list,
        tabel di sebelahnya otomatis disembunyikan (tidak perlu class manual). */
  body.is-kasir .has-mobile-list .table-wrap{display:none;}
  body.is-kasir .card:has(.mobile-row-list) .table-wrap{display:none;}
  body.is-kasir .mobile-row-list{display:flex; flex-direction:column; gap:10px;}
}
.mrow-card{background:#fff; border:1px solid var(--border); border-left:4px solid var(--border); border-radius:var(--radius); padding:14px;}
.mrow-card.b-success{border-left-color:var(--teal, #1FA97C);}
.mrow-card.b-danger{border-left-color:var(--danger, #E4572E);}
.mrow-card.b-warning{border-left-color:var(--accent-dark, #C99A3E);}
.mrow-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:3px;}
.mrow-title{font-weight:700; font-size:13.5px; line-height:1.35;}
.mrow-tag{font-size:11px; font-weight:700; color:var(--accent-dark); text-transform:uppercase; letter-spacing:.02em; display:block; margin-bottom:2px;}
.mrow-sub{font-size:12px; color:var(--text-mute); margin-bottom:8px;}
.mrow-meta{font-size:11px; color:var(--text-mute); margin-bottom:2px;}
.mrow-amount{font-family:var(--font-mono); font-weight:700; font-size:15px; margin:8px 0 10px;}
.mrow-empty{text-align:center; color:var(--text-mute); padding:26px 0; font-size:13px; background:#fff; border:1px solid var(--border); border-radius:var(--radius);}
/* Info ringkas 2 kolom di dalam kartu (label kecil di atas, nilai tebal di bawah) -- gaya "Sync Date / Device OS" */
.mrow-grid{display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; margin:9px 0 11px; padding-top:9px; border-top:1px solid var(--border);}
.mrow-grid .k{font-size:10px; color:var(--text-mute); text-transform:uppercase; letter-spacing:.03em; margin-bottom:2px;}
.mrow-grid .v{font-size:13px; font-weight:600; line-height:1.3;}
.mrow-actions{display:flex; gap:8px; margin-top:2px;}
.mrow-actions .btn{flex:1;}

/* ---- Kartu produk POS Konter Pulsa (gaya e-commerce, chip kategori + harga menonjol) ---- */
.produk-pos-item{
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px;
  cursor:pointer; transition:border-color .15s, box-shadow .15s; position:relative;
}
.produk-pos-item:hover, .produk-pos-item:active{border-color:var(--accent-dark); box-shadow:0 2px 10px rgba(201,154,62,0.16);}
.produk-pos-chip{
  display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--accent-dark); background:#FBF1DC; padding:3px 8px; border-radius:20px; margin-bottom:8px;
}
.produk-pos-nama{font-weight:700; font-size:13.5px; line-height:1.3; margin-bottom:2px;}
.produk-pos-nominal{font-size:11.5px; color:var(--text-mute); margin-bottom:8px;}
.produk-pos-harga{
  font-family:var(--font-mono); font-weight:700; font-size:15px; color:var(--navy);
  padding-top:8px; border-top:1px dashed var(--border);
}
.kategori-tab-row{display:flex; gap:8px; overflow-x:auto; width:100%; max-width:100%; min-width:0; flex:1; touch-action:pan-x; padding-bottom:4px; -webkit-overflow-scrolling:touch;}
.kategori-tab-row::-webkit-scrollbar{display:none;}
.kategori-tab-scroller{display:flex; align-items:center; gap:4px; margin-bottom:14px; max-width:100%; min-width:0;}
.kategori-tab-arrow{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; border:1px solid var(--border);
  background:#fff; color:var(--text-mute); font-size:18px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.kategori-tab-arrow:active{background:var(--bg);}
.kategori-tab{
  flex-shrink:0; border:1px solid var(--border); background:#fff; color:var(--text-mute);
  font-weight:600; font-size:12.5px; padding:8px 16px; border-radius:20px; cursor:pointer; white-space:nowrap;
}
.kategori-tab.active{background:var(--navy); border-color:var(--navy); color:var(--accent);}

/* ---- Form Catat Pengeluaran BRILink: disembunyikan di belakang tombol "+"
   khusus tampilan mobile kasir (desktop/admin tetap tampil biasa apa adanya) ---- */
.btn-buka-form-pengeluaran-mobile{display:none;}
@media(max-width:960px){
  body.is-kasir .btn-buka-form-pengeluaran-mobile{display:flex; margin-bottom:14px;}
  body.is-kasir .pengeluaran-form-wrap{display:none;}
  body.is-kasir .pengeluaran-form-wrap.pengeluaran-form-terbuka{display:block;}
}

/* ---- Tampilan Struk (ala struk kasir asli, bukan invoice biasa) ---- */
.struk-wrap{max-width:340px; margin:24px auto; padding:0 16px;}
.struk-card{
  background:#fff; box-shadow:var(--shadow-lg); font-family:var(--font-mono);
  font-size:12.5px; line-height:1.65; color:#111; padding:22px 18px 28px; position:relative;
}
.struk-card::after{
  content:""; position:absolute; left:0; right:0; bottom:-9px; height:18px;
  background-image:linear-gradient(-45deg, #EFF1F5 8px, transparent 0), linear-gradient(45deg, #EFF1F5 8px, transparent 0);
  background-size:16px 16px; background-position:left bottom; background-repeat:repeat-x;
}
.struk-center{text-align:center;}
.struk-brand{font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:.02em;}
.struk-tag{font-size:10.5px; color:#666; text-transform:uppercase; letter-spacing:.06em;}
.struk-sep{border-top:1px dashed #999; margin:10px 0;}
.struk-row{display:flex; justify-content:space-between; gap:10px;}
.struk-total{font-weight:700; font-size:14.5px; border-top:1px dashed #111; margin-top:8px; padding-top:8px;}
.struk-badge{display:inline-block; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:20px; margin-top:4px;}
@media print{
  .struk-wrap{margin:0; max-width:100%;}
  .struk-card{box-shadow:none; max-width:340px; margin:0 auto;}
  .struk-card::after{display:none;}
}

/* ---- Layout POS/Kasir BRILink: saldo sumber dana & form transaksi ---- */
.saldo-sumberdana-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.pos-two-col-layout{grid-template-columns:1.3fr 1fr;}
@media(max-width:900px){
  .saldo-sumberdana-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:960px){
  body.is-kasir .saldo-sumberdana-grid{grid-template-columns:1fr !important; gap:10px !important;}
  body.is-kasir .pos-two-col-layout{grid-template-columns:1fr !important; gap:16px !important;}
}

/* ---------- Photo input (kamera / galeri + preview) ---------- */
.photo-input{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.photo-preview{width:72px; height:72px; border-radius:10px; background:var(--bg); border:1px dashed var(--border); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; color:var(--text-mute); cursor:pointer; transition:.15s;}
.photo-preview:hover{border-color:var(--accent);}
.photo-preview img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-btns{display:flex; gap:8px; flex-wrap:wrap;}
.photo-file-hidden{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}

/* ---------- Vehicle picker (peminjaman) ----------
   Satu baris yang bisa digeser (slide) horizontal di semua perangkat —
   tidak pernah menumpuk ke bawah. Lebar kartu menyesuaikan device:
   desktop/tablet lebih banyak kartu kelihatan sekaligus, HP kecil 1 kartu per geser. */
.vehicle-search{margin-bottom:12px;}
.vehicle-scroll-wrap{position:relative; max-width:100%;}
.vehicle-scroll{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
  overflow-x:scroll; /* selalu tampilkan jalur slide, bukan cuma saat hover */
  overflow-y:hidden;
  padding:2px 2px 14px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch; /* swipe jari di HP/tablet */
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  touch-action:pan-x; /* geser 2 jari di trackpad laptop juga jalan lewat scroll native */
  cursor:grab;
  /* Firefox: warnai jalur & gagang slide */
  scrollbar-width:auto;
  scrollbar-color: var(--accent) var(--bg);
}
.vehicle-scroll:active{cursor:grabbing;}
/* Chrome / Edge / Safari: jalur slide manual yang jelas terlihat & bisa ditarik pakai mouse */
.vehicle-scroll::-webkit-scrollbar{height:10px;}
.vehicle-scroll::-webkit-scrollbar-track{background:var(--bg); border-radius:10px;}
.vehicle-scroll::-webkit-scrollbar-thumb{background:var(--accent); border-radius:10px; border:2px solid var(--bg); background-clip:padding-box;}
.vehicle-scroll::-webkit-scrollbar-thumb:hover{background:var(--accent-dark);}
.vehicle-scroll .vcard{
  flex:0 0 170px;
  width:170px;
  max-width:170px;
  scroll-snap-align:start;
}
.vehicle-scroll .vimg{height:90px;}
.vcard-compact .vimg{height:90px;}
.vehicle-toggle-view{font-size:12px; color:var(--accent-dark); cursor:pointer; text-decoration:underline; background:none; border:none; padding:0;}
@media(max-width:480px){
  .vehicle-scroll .vcard{flex-basis:82%; width:82%; max-width:none; scroll-snap-align:center;}
}


/* ---------- Monitoring & status pills ---------- */
.stat-cards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px;}
@media(max-width:800px){.stat-cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
.stat-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:16px;}
.stat-card .num{font-size:24px; font-weight:700; font-family:var(--font-mono);}
.stat-card .lbl{font-size:12px; color:var(--text-mute); margin-top:2px;}

/* ---------- Denda master list ---------- */
.denda-row{display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border);}
.denda-row:last-child{border-bottom:none;}