/* =========================================================
   ALANA WATER KASIR — STYLESHEET
   Tema: Depot Air Minum — biru/teal, bersih, seimbang kiri-kanan
   ========================================================= */

:root{
  --blue-900:#052a5c;
  --blue-800:#073897;
  --blue-700:#0b62c7;
  --blue-600:#0699e9;
  --blue-500:#17aef0;
  --blue-400:#10c4f5;
  --blue-300:#7fe0fb;
  --teal-500:#10c4f5;
  --teal-400:#4dd0f7;
  --cyan-50:#eaf8ff;

  --bg:#f4faff;
  --surface:#ffffff;
  --surface-alt:#f6fbfb;
  --border:#dfeef4;
  --border-soft:#edf6f9;

  --text-900:#10233f;
  --text-700:#33456a;
  --text-500:#647394;
  --text-400:#94a3b8;

  --green-900:#054a29;
  --green-800:#076737;
  --green-700:#0b7a3e;
  --green-600:#16a34a;
  --green-500:#22c55e;
  --green-400:#4ade80;
  --green-50:#f0fdf4;
  --brand-gradient:linear-gradient(135deg, var(--green-600) 0%, var(--blue-400) 48%, var(--blue-600) 100%);
  --amber-600:#d97706;
  --amber-50:#fffbeb;
  --red-600:#dc2626;
  --red-50:#fef2f2;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;

  --shadow-sm:0 1px 2px rgba(15,39,51,.06);
  --shadow-md:0 6px 20px rgba(8,51,68,.08);
  --shadow-lg:0 16px 40px rgba(8,51,68,.14);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px;

  --sidebar-w:264px;

  --font-display:'Baloo 2', 'Plus Jakarta Sans', sans-serif;
  --font-body:'Plus Jakarta Sans', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; touch-action:manipulation; }
html,body{ height:100%; }
html{ overflow-x:hidden; -webkit-text-size-adjust:100%; touch-action:manipulation; }
body{
  margin:0;
  overflow-x:hidden;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text-900);
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
}
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; color:var(--text-900); }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#cbd8e0; border-radius:20px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ===================== APP SHELL ===================== */
.app-shell{
  display:flex;
  min-height:100vh;
  align-items:stretch;
}

/* ===================== SIDEBAR ===================== */
.sidebar{
  width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  background:var(--green-500);
  color:#eaf6fb;
  display:flex;
  flex-direction:column;
  padding:var(--space-5) var(--space-4);
  gap:var(--space-5);
  position:sticky;
  top:0;
  height:100vh;
  z-index:40;
}
.brand{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-2) var(--space-2) var(--space-4);
  border-bottom:1px solid rgba(255,255,255,.12);
  overflow:hidden;
}
.brand-mark{
  width:38px;height:38px;min-width:38px;max-width:38px;min-height:38px;max-height:38px;
  border-radius:11px;
  background:#ffffff;
  padding:4px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px; flex:0 0 38px; overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.brand-mark img{ display:block; width:28px; height:28px; max-width:28px; max-height:28px; object-fit:contain; }
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-text strong{ font-family:var(--font-display); font-size:17px; }
.brand-text span{ font-size:11.5px; color:rgba(255,255,255,.85); }

.nav{ display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; }
.nav-item{
  display:flex; align-items:center; gap:var(--space-3);
  border:none; background:transparent; color:rgba(255,255,255,.92);
  padding:11px var(--space-3); border-radius:var(--radius-sm);
  font-size:14px; font-weight:600; text-align:left;
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
.nav-item .nav-ico{ font-size:17px; width:22px; text-align:center; }
.nav-item:hover{ background:var(--blue-600); color:#fff; }
.nav-item.active{
  background:var(--blue-600);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}

.sidebar-backdrop{
  display:none; position:fixed; inset:0; background:rgba(8,20,28,.5); z-index:39;
}

/* ===================== MAIN / TOPBAR ===================== */
.main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-4) var(--space-6);
  background:var(--blue-600);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20;
  gap:var(--space-4);
  flex-wrap:wrap;
}
.topbar-title{ flex:1; min-width:0; }
.topbar-title h1{ font-size:21px; color:#fff; }
.topbar-title p{ font-size:12.5px; color:rgba(255,255,255,.82); margin-top:2px; }
.topbar-right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; flex-wrap:wrap; }
.clock{ font-variant-numeric:tabular-nums; font-weight:700; color:#fff; font-size:14px; background:rgba(255,255,255,.14); padding:7px 12px; border-radius:999px; }
.cashier-pill{
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.9); color:var(--blue-700);
  padding:8px 14px; border-radius:999px; font-weight:700; font-size:13px;
  border:1px solid rgba(255,255,255,.6);
}
.gallon-pill{
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.16); color:#fff;
  padding:7px 14px; border-radius:999px; font-weight:700; font-size:13px;
  border:1px solid rgba(255,255,255,.3);
  white-space:nowrap;
}
.burger{ display:none; border:none; background:rgba(255,255,255,.16); color:#fff; font-size:20px; width:36px; height:36px; border-radius:10px; }

.page-content{
  flex:1;
  padding:var(--space-6);
  max-width:1400px;
  width:100%;
  margin:0 auto;
}

/* ===================== GENERIC CARD / GRID HELPERS ===================== */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.card-pad{ padding:var(--space-5); }

/* ===================== SALES CHART (Dashboard) ===================== */
.sales-chart{
  background:var(--surface);
  border-radius:var(--radius-md, 10px);
  padding-top:6px;
}
.sales-chart-bars{
  display:flex;
  align-items:flex-end;
  gap:8px;
  height:190px;
  overflow-x:auto;
  padding-bottom:2px;
}
.sales-chart-col{
  flex:1;
  min-width:26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  height:100%;
}
.sales-chart-value{
  font-size:9.5px;
  color:var(--text-500);
  white-space:nowrap;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  max-height:44px;
}
.sales-chart-bar{
  width:100%;
  max-width:28px;
  background:var(--blue-500);
  border-radius:4px 4px 0 0;
}
.sales-chart-label{
  font-size:10px;
  color:var(--text-500);
  white-space:nowrap;
}
.section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--space-4); gap:var(--space-3); flex-wrap:wrap;
}
.section-head h2{ font-size:18px; }
.section-head p{ font-size:12.5px; color:var(--text-500); margin-top:2px;}

.stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-4);
  margin-bottom:var(--space-6);
}
@media (max-width:1100px){ .stat-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .stat-grid{ grid-template-columns:1fr;} }

.stat-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:var(--space-4) var(--space-5);
  display:flex; flex-direction:column; gap:6px;
  box-shadow:var(--shadow-sm);
}
.stat-card .st-label{ font-size:12px; color:var(--text-500); font-weight:600; display:flex; justify-content:space-between; align-items:center;}
.stat-card .st-value{ font-size:24px; font-weight:800; font-family:var(--font-display); }
.stat-card .st-sub{ font-size:11.5px; color:var(--text-400); }
.stat-card.blue .st-value{ color:var(--blue-600); }
.stat-card.teal .st-value{ color:var(--teal-500); }
.stat-card.amber .st-value{ color:var(--amber-600); }
.stat-card.red .st-value{ color:var(--red-600); }

.two-col-balanced{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-6);
  align-items:start;
}
@media (max-width:980px){ .two-col-balanced{ grid-template-columns:1fr; } }

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--radius-sm); border:1px solid transparent;
  padding:10px 16px; font-weight:700; font-size:13.5px;
  transition:filter .12s ease, transform .05s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-sm{ padding:7px 12px; font-size:12.5px; }
.btn-primary{ background:var(--brand-gradient); color:#fff; }
.btn-primary:hover{ filter:brightness(1.06); }
.btn-outline{ background:var(--surface); border-color:var(--border); color:var(--text-700); }
.btn-outline:hover{ background:var(--surface-alt); }
.btn-ghost{ background:transparent; color:var(--text-500); border:none; }
.btn-ghost:hover{ background:var(--surface-alt); color:var(--text-900); }
.btn-danger{ background:var(--red-50); color:var(--red-600); border-color:#fbd5d5; }
.btn-danger:hover{ background:#fde3e3; }
.btn-success{ background:var(--green-600); color:#fff; }
.btn-sm{ padding:6px 10px; font-size:12.5px; border-radius:7px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.icon-btn{
  width:34px; height:34px; border-radius:9px; border:1px solid var(--border);
  background:var(--surface); display:inline-flex; align-items:center; justify-content:center;
  color:var(--text-500); font-size:15px;
}
.icon-btn:hover{ background:var(--surface-alt); color:var(--text-900); }

/* ===================== FORMS ===================== */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:var(--space-4); }
.field label{ font-size:12.5px; font-weight:700; color:var(--text-700); }
.field input, .field select, .field textarea{
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 12px; font-size:13.5px; color:var(--text-900);
  background:var(--surface-alt); width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--blue-500); background:#fff;
  box-shadow:0 0 0 3px rgba(2,132,199,.12);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
.hint{ font-size:11.5px; color:var(--text-400); }

/* ===================== UPLOAD FOTO PRODUK ===================== */
.img-upload{ display:flex; align-items:center; gap:14px; margin-bottom:var(--space-4); }
.img-upload-preview{
  width:84px; height:84px; border-radius:var(--radius-md); overflow:hidden; flex:0 0 auto;
  background:var(--cyan-50); border:1.5px dashed var(--blue-300);
  display:flex; align-items:center; justify-content:center; color:var(--blue-500); font-size:26px;
}
.img-upload-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
.img-upload-actions{ display:flex; flex-direction:column; gap:6px; }
.img-upload-actions .hint{ margin:0; }
.table-thumb{
  width:38px; height:38px; border-radius:9px; overflow:hidden; flex:0 0 auto;
  background:var(--cyan-50); display:inline-flex; align-items:center; justify-content:center;
  color:var(--blue-500); vertical-align:middle; margin-right:8px; font-size:16px;
}
.table-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ===================== BADGES ===================== */
.badge{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700; }
.badge-green{ background:var(--green-50); color:var(--green-600); }
.badge-amber{ background:var(--amber-50); color:var(--amber-600); }
.badge-red{ background:var(--red-50); color:var(--red-600); }
.badge-blue{ background:var(--cyan-50); color:var(--blue-700); }
.badge-teal{ background:var(--green-50); color:var(--teal-700,#0f766e); }
.badge-gray{ background:#f1f5f9; color:var(--text-500); }

/* ===================== TABLE ===================== */
.table-wrap{ overflow-x:auto; border-radius:var(--radius-md); border:1px solid var(--border); }
table.data-table{ width:100%; border-collapse:collapse; font-size:13.5px; background:var(--surface); }
table.data-table th{
  text-align:left; padding:12px 14px; background:var(--surface-alt);
  color:var(--text-500); font-size:11.5px; text-transform:uppercase; letter-spacing:.03em;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
table.data-table td{ padding:12px 14px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
table.data-table tr:last-child td{ border-bottom:none; }
table.data-table tr:hover td{ background:var(--surface-alt); }
.td-actions{ display:flex; gap:6px; justify-content:flex-end; }
.empty-row td{ text-align:center; padding:36px; color:var(--text-400); }

/* ===================== TOAST ===================== */
.toast-stack{ position:fixed; top:18px; right:18px; z-index:200; display:flex; flex-direction:column; gap:10px; }
.toast{
  background:var(--text-900); color:#fff; padding:12px 16px; border-radius:10px;
  font-size:13.5px; font-weight:600; box-shadow:var(--shadow-lg);
  min-width:220px; max-width:340px; display:flex; align-items:center; gap:10px;
  animation:toastIn .25s ease;
}
.toast.success{ background:#0f5132; }
.toast.error{ background:#7f1d1d; }
.toast.info{ background:var(--blue-800); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }

/* ===================== MODAL ===================== */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(8,20,28,.55);
  z-index:100; align-items:center; justify-content:center; padding:var(--space-5);
}
.modal-overlay.open{ display:flex; }
.modal-box{
  background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  width:100%; max-width:520px; max-height:88vh; overflow-y:auto; padding:var(--space-6);
}
.modal-box.wide{ max-width:720px; }
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-4); }
.modal-head h3{ font-size:18px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--border-soft); }

/* =========================================================
   KASIR VIEW — layout dua kolom SEIMBANG (produk | keranjang)
   ========================================================= */
.kasir-layout{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(340px,1fr);
  gap:var(--space-6);
  align-items:start;
}
@media (max-width:1080px){
  .kasir-layout{ grid-template-columns:1fr; }
}

.kasir-left{ display:flex; flex-direction:column; gap:var(--space-4); min-width:0; }
.kasir-toolbar{
  display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap;
}
.search-box{
  flex:1; min-width:180px; position:relative;
}
.search-box input{
  width:100%; padding:11px 14px 11px 38px; border-radius:var(--radius-md);
  border:1px solid var(--border); background:var(--surface); font-size:13.5px;
}
.search-box::before{
  content:"🔍"; position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:13px; opacity:.6;
}
.cat-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.cat-tab{
  padding:9px 15px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); font-size:13px; font-weight:700; color:var(--text-500);
}
.cat-tab.active{ background:var(--brand-gradient); color:#fff; border-color:transparent; }

.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(168px,1fr));
  gap:var(--space-4);
}
.product-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:var(--space-4); display:flex; flex-direction:column; gap:8px; text-align:left;
  position:relative; transition:box-shadow .15s ease, transform .08s ease, border-color .15s ease;
}
.product-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--blue-400); }
.product-card .p-ico{
  width:42px; height:42px; border-radius:11px; background:var(--cyan-50); color:var(--blue-600);
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.product-card .p-photo{
  width:100%; aspect-ratio:1.35/1; border-radius:var(--radius-sm); overflow:hidden;
  background:var(--cyan-50); margin-bottom:2px;
}
.product-card .p-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-card .p-name{ font-size:13.5px; font-weight:700; line-height:1.3; min-height:35px; }
.product-card .p-price{ font-size:15px; font-weight:800; color:var(--teal-500); }
.product-card .p-stock{ font-size:11px; color:var(--text-400); }
.product-card .p-stock.low{ color:var(--amber-600); font-weight:700; }
.product-card .p-stock.out{ color:var(--red-600); font-weight:700; }
.product-card:disabled, .product-card.disabled{ opacity:.45; pointer-events:none; }

/* ---- Cart (right column) ---- */
.cart-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  position:sticky; top:calc(64px + var(--space-6));
  max-height:calc(100vh - 64px - var(--space-6)*2);
}
.cart-head{ padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--border-soft); display:flex; justify-content:space-between; align-items:center; }
.cart-head h3{ font-size:15.5px; }
.order-type-toggle{ display:flex; background:var(--surface-alt); border-radius:10px; padding:4px; margin:0 var(--space-5); gap:4px; }
.order-type-toggle button{
  flex:1; border:none; background:transparent; padding:8px; border-radius:8px; font-size:12.5px; font-weight:700; color:var(--text-500);
}
.order-type-toggle button.active{ background:var(--surface); color:var(--blue-700); box-shadow:var(--shadow-sm); }

.cart-items{ flex:1; overflow-y:auto; padding:var(--space-3) var(--space-5); min-height:80px; }
.cart-empty{ text-align:center; color:var(--text-400); padding:var(--space-8) 0; font-size:13px; }
.cart-item{
  display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border-soft);
  flex-wrap:wrap; position:relative; max-width:100%;
}
.cart-item:last-child{ border-bottom:none; }
.ci-info{ flex:1 1 140px; min-width:0; }
.ci-info .ci-name{ font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ci-info .ci-price{ font-size:11.5px; color:var(--text-500); }
.ci-price-row{ display:flex; align-items:center; gap:6px; margin-top:3px; flex-wrap:wrap; }
.ci-price-label{ font-size:10.5px; color:var(--text-400); font-weight:600; }
.ci-price-input{ width:80px; max-width:100%; font-size:11.5px; border:1px solid var(--border); border-radius:6px; padding:3px 6px; color:var(--text-700); }
.ci-price-input:focus{ outline:none; border-color:var(--blue-500); }
.ci-price-reset{ border:none; background:none; color:var(--blue-600); font-size:13px; cursor:pointer; padding:0 2px; }
.ci-qty{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.ci-qty button{ width:24px;height:24px; border-radius:6px; border:1px solid var(--border); background:var(--surface-alt); font-weight:700; color:var(--text-700); flex:0 0 auto; }
.ci-qty-input{ width:38px; text-align:center; font-weight:700; font-size:13px; border:1px solid var(--border); border-radius:6px; padding:2px 0; }
.ci-sub{ font-size:13px; font-weight:800; color:var(--blue-700); min-width:64px; text-align:right; flex:0 0 auto; }
.ci-remove{
  flex:0 0 auto; width:28px; height:28px; padding:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--red-600); background:var(--red-50); border:1px solid transparent;
  cursor:pointer; transition:background .15s, color .15s, transform .1s;
}
.ci-remove:hover{ background:var(--red-600); color:#fff; }
.ci-remove:active{ transform:scale(.92); }
.ci-remove svg{ display:block; pointer-events:none; }

/* HP kecil: baris keranjang dipecah jadi 2 baris (nama+harga di atas, qty+subtotal di bawah)
   supaya tidak pernah melebar sampai memotong/menyembunyikan tombol ✕ (dulu ini terjadi
   karena semua elemen dipaksa satu baris nowrap) */
@media (max-width:520px){
  .ci-info{ flex:1 1 calc(100% - 40px); }
  .ci-remove{ order:1; }
  .ci-qty{ order:2; margin-top:2px; }
  .ci-sub{ order:3; margin-top:2px; margin-left:auto; }
  .ci-price-input{ width:70px; }
}

/* customer autocomplete */
.field-hint{ font-size:11px; font-weight:500; color:var(--text-400); margin-left:6px; }
.cust-suggest{ position:absolute; left:0; right:0; top:100%; z-index:20; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-md,0 6px 20px rgba(0,0,0,.12)); overflow:hidden; }
.cust-suggest:empty{ border:none; box-shadow:none; }
.cust-suggest-item{ padding:8px 12px; cursor:pointer; display:flex; flex-direction:column; gap:2px; border-bottom:1px solid var(--border-soft); }
.cust-suggest-item:last-child{ border-bottom:none; }
.cust-suggest-item:hover{ background:var(--surface-alt); }
.cust-suggest-item strong{ font-size:13px; }
.cust-suggest-item span{ font-size:11.5px; color:var(--text-500); }

.cart-footer{ padding:var(--space-4) var(--space-5) var(--space-5); border-top:1px solid var(--border-soft); background:var(--surface-alt); border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.crow{ display:flex; justify-content:space-between; font-size:13px; color:var(--text-700); margin-bottom:8px; }
.crow.total{ font-size:17px; font-weight:800; color:var(--text-900); border-top:1px dashed var(--border); padding-top:10px; margin-top:6px; }
.crow input{ width:110px; text-align:right; border:1px solid var(--border); border-radius:7px; padding:4px 8px; font-size:12.5px; }

/* ===================== PAYMENT MODAL SPECIFIC ===================== */
.pay-methods{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:var(--space-4); }
.pay-methods button{
  padding:10px 4px; border-radius:10px; border:1px solid var(--border); background:var(--surface);
  font-size:12px; font-weight:700; color:var(--text-500); display:flex; flex-direction:column; gap:4px; align-items:center;
}
.pay-methods button.active{ border-color:var(--blue-500); background:var(--cyan-50); color:var(--blue-700); }
.pay-summary-box{ background:var(--surface-alt); border-radius:var(--radius-sm); padding:var(--space-4); margin:var(--space-4) 0; }
.pay-summary-box .row{ display:flex; justify-content:space-between; font-size:13.5px; padding:4px 0; }
.pay-summary-box .row.big{ font-weight:800; font-size:16px; border-top:1px dashed var(--border); margin-top:6px; padding-top:8px; }
.change-display{ text-align:center; padding:var(--space-4); border-radius:var(--radius-sm); font-weight:800; font-size:20px; }
.change-display.ok{ background:var(--green-50); color:var(--green-600); }
.change-display.warn{ background:var(--red-50); color:var(--red-600); }

.print-choice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.print-choice-grid.cols-3{ grid-template-columns:1fr 1fr 1fr; }
@media (max-width:480px){ .print-choice-grid.cols-3{ grid-template-columns:1fr 1fr; } }
.print-choice-btn{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:18px 8px; border-radius:var(--radius-md);
  border:1.5px solid var(--border); background:var(--surface); font-size:26px; cursor:pointer; transition:.15s;
}
.print-choice-btn:hover{ border-color:var(--blue-500); background:var(--cyan-50); }
.print-choice-btn span{ font-size:13.5px; font-weight:800; color:var(--text-900); }
.print-choice-btn small{ font-size:10.5px; color:var(--text-500); font-weight:500; }

.pay-detail-box{ background:var(--surface-alt); border-radius:var(--radius-sm); padding:var(--space-4); margin-bottom:var(--space-4); }
.pay-detail-box .row{ display:flex; justify-content:space-between; font-size:13.5px; padding:4px 0; }
.pay-detail-box.center{ text-align:center; }
.pay-detail-box.center p{ font-size:12.5px; color:var(--text-500); margin-top:8px; }
.pay-detail-box.warn-box{ background:var(--red-50); color:var(--red-600); font-size:12.5px; font-weight:600; text-align:center; }
.qris-img{ max-width:200px; border-radius:10px; border:1px solid var(--border); }

/* ===================== RECEIPT ===================== */
.receipt{
  font-family:'Courier New', monospace; font-size:12.5px; color:#111;
  background:#fff; padding:var(--space-4); border:1px dashed var(--border); border-radius:var(--radius-sm);
}
.receipt .r-center{ text-align:center; }
.receipt hr{ border:none; border-top:1px dashed #999; margin:8px 0; }
.receipt .r-row{ display:flex; justify-content:space-between; }

/* ===================== EMPTY / LOADING STATES ===================== */
.loading-state, .empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:var(--space-8); color:var(--text-400); gap:8px; text-align:center;
}
.empty-state .es-ico{ font-size:34px; }

/* ===================== CATATAN OPERASIONAL (DASHBOARD) ===================== */
.ops-note-list{
  margin:6px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px;
}
.ops-note-list li{
  position:relative; padding:10px 14px 10px 38px; background:var(--amber-50);
  border:1px solid #fde9c8; border-radius:var(--radius-sm); font-size:13.5px; color:var(--text-700, #333);
}
.ops-note-list li::before{
  content:"💧"; position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:14px;
}

/* ===================== WATER QUALITY BARS ===================== */
.wq-param{ margin-bottom:16px; }
.wq-param-head{ display:flex; justify-content:space-between; align-items:baseline; font-size:13px; font-weight:700; margin-bottom:6px; }
.wq-param-head strong.ok{ color:var(--green-600); }
.wq-param-head strong.warn{ color:var(--amber-600); }
.wq-bar{ height:8px; border-radius:20px; background:var(--border-soft); overflow:hidden; margin-bottom:4px; }
.wq-bar-fill{ height:100%; border-radius:20px; transition:width .4s ease; }
.wq-bar-fill.blue{ background:linear-gradient(90deg,var(--blue-400),var(--blue-600)); }
.wq-bar-fill.purple{ background:linear-gradient(90deg,#c4b5fd,#8b5cf6); }
.wq-bar-fill.green{ background:linear-gradient(90deg,var(--green-400),var(--green-600)); }
.wq-bar-fill.amber{ background:linear-gradient(90deg,#fcd34d,var(--amber-600)); }
.wq-bar-fill.red{ background:linear-gradient(90deg,#fca5a5,var(--red-600)); }

.wq-toggle-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; border-top:1px solid var(--border-soft); font-size:13.5px; font-weight:600; color:var(--text-700);
}
.switch{ position:relative; display:inline-block; width:42px; height:24px; flex:0 0 auto; }
.switch input{ opacity:0; width:0; height:0; }
.switch-slider{
  position:absolute; cursor:pointer; inset:0; background:#cbd5e1; border-radius:999px; transition:.2s;
}
.switch-slider::before{
  content:""; position:absolute; height:18px; width:18px; left:3px; bottom:3px;
  background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.switch input:checked + .switch-slider{ background:var(--green-500); }
.switch input:checked + .switch-slider::before{ transform:translateX(18px); }

/* ===================== FILTER MAINTENANCE CARDS ===================== */
.filter-grid{
  display:flex; gap:var(--space-4); overflow-x:auto; padding-bottom:6px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.filter-card{
  flex:0 0 250px; width:250px; scroll-snap-align:start;
  border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-4);
  background:var(--surface-alt); display:flex; flex-direction:column;
}
.filter-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:6px; }
.filter-card-head strong{ font-size:13.5px; line-height:1.3; }
.filter-card-meta{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-500); margin:6px 0 4px; }

/* ===================== RESPONSIVE SIDEBAR (mobile) ===================== */
@media (max-width:900px){
  .sidebar{
    position:fixed; left:0; top:0; transform:translateX(-100%);
    transition:transform .22s ease; box-shadow:var(--shadow-lg);
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-backdrop.open{ display:block; }
  .burger{ display:inline-flex; align-items:center; justify-content:center; }
  .page-content{ padding:var(--space-4); }
  .topbar{ padding:var(--space-3) var(--space-4); }
  .cart-panel{ position:static; max-height:none; }
}

@media (max-width:640px){
  .topbar{ gap:8px; }
  .topbar-title h1{ font-size:18px; }
  .topbar-title p{ display:none; }
  .cashier-pill span{ max-width:70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; }
  .gallon-pill{ padding:7px 10px; font-size:12px; }
  .filter-grid{ grid-template-columns:1fr; }
  .filter-card{ flex-basis:82vw; width:82vw; }
  .stat-grid{ gap:var(--space-3); }
  .pay-methods{ grid-template-columns:repeat(2,1fr); }
  .card-pad{ padding:var(--space-4); }
  .modal-box{ width:94vw !important; max-height:88vh; }
  .table-wrap table{ font-size:12.5px; }
  .btn{ padding:10px 14px; }

  /* Grid produk: paksa selalu 2 kolom yang pas dengan lebar layar
     (sebelumnya pakai minmax(168px,1fr) yang bisa melebihi lebar HP kecil
     sehingga sebagian kartu/teks terpotong di sisi kanan) */
  .product-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px;
  }
  .product-card{ padding:10px; gap:6px; }
  .product-card .p-photo{ aspect-ratio:1.2/1; }
  .product-card .p-ico{ width:36px; height:36px; font-size:17px; }
  .product-card .p-name{
    font-size:12.5px;
    min-height:31px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .product-card .p-price{ font-size:13.5px; }
  .product-card .p-stock{ font-size:10.5px; }
}

@media (max-width:360px){
  .product-grid{ gap:8px; }
  .product-card{ padding:8px; }
}

@media (max-width:420px){
  .clock{ display:none; }
  .gallon-pill{ padding:6px 9px; }
  .brand-text span{ display:none; }
}

/* ===================== UTILITY ===================== */
.flex{ display:flex; }
.gap-2{ gap:8px; } .gap-3{ gap:12px; } .gap-4{ gap:16px; }
.mt-2{ margin-top:8px;} .mt-4{ margin-top:16px; }
.text-muted{ color:var(--text-500); }
.text-right{ text-align:right; }
.w-full{ width:100%; }
.divider{ height:1px; background:var(--border-soft); margin:var(--space-4) 0; }

/* ===================== CATATAN TERSEMBUNYI (KASIR) ===================== */
.note-toggle-btn{
  background:none; border:1px dashed var(--border); color:var(--text-500);
  font-size:12.5px; padding:8px 10px; border-radius:10px; width:100%;
  text-align:left; margin-bottom:10px; cursor:pointer;
}
.note-toggle-btn:hover{ border-color:var(--blue-400); color:var(--blue-700); }
.note-reveal-box{ margin-bottom:10px; }
.note-reveal-box textarea{ width:100%; min-height:56px; resize:vertical; }

/* ===================== AKSI / CATATAN PELANGGAN ===================== */
.cust-notes-list{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.cust-note-item{
  display:flex; justify-content:space-between; align-items:flex-start; gap:8px;
  background:var(--surface-alt); border:1px solid var(--border-soft); border-radius:10px; padding:8px 10px;
}
.cust-note-item .cn-text{ font-size:13px; color:var(--text-900); }
.cust-note-item .cn-date{ font-size:11px; color:var(--text-400); margin-top:2px; }
.cust-note-badge{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--amber-50); color:var(--amber-600); border-radius:999px;
  font-size:10.5px; font-weight:700; min-width:16px; height:16px; padding:0 4px; margin-left:4px;
}

/* ===================== ALAMAT MAPS & FOTO ===================== */
.addr-map-box{ display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.addr-map-box .btn-sm{ white-space:nowrap; }
.addr-photo-preview{
  width:100%; max-height:160px; border-radius:10px; overflow:hidden; margin-top:8px; background:var(--surface-alt);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--border-soft);
}
.addr-photo-preview img{ width:100%; max-height:160px; object-fit:cover; }
.addr-coord-hint{ font-size:11.5px; color:var(--text-500); margin-top:4px; }

/* ---- Peta mini (gaya Google Maps) dengan pin yang bisa digeser/diketuk untuk akurasi lokasi ---- */
.mini-map{
  width:100%; height:220px; border-radius:12px; overflow:hidden; margin-top:8px;
  border:1px solid var(--border-soft); background:var(--surface-alt); touch-action:none;
}
.mini-map-hint{ font-size:11.5px; color:var(--text-500); margin-top:6px; }

/* ===================== JADWAL PENGANTARAN ===================== */
.jadwal-list{ display:flex; flex-direction:column; gap:10px; }
.jadwal-card{
  border:1px solid var(--border-soft); border-radius:14px; padding:12px 14px;
  background:var(--surface); display:flex; flex-direction:column; gap:6px;
}
.jadwal-card.done{ opacity:.55; }
.jadwal-card .jc-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.jadwal-card .jc-name{ font-weight:700; font-size:14.5px; }
.jadwal-card .jc-meta{ font-size:12.5px; color:var(--text-500); }
.jadwal-card .jc-badge{ font-size:11px; padding:3px 8px; border-radius:999px; font-weight:700; }
.jadwal-card .jc-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }

.mini-map-wrap{ margin-top:2px; }
.mini-map .g-pin{ background:none; border:none; }
.mini-map .leaflet-control-attribution{ font-size:10px; }

.gallon-hint{
  font-size:12px; line-height:1.45; color:var(--text-700); background:#eff6ff;
  border:1px solid #bfdbfe; border-radius:10px; padding:8px 10px; margin:-2px 0 12px;
}
.gallon-hint-warn{ color:#b45309; font-weight:600; }

.kel-badge{
  display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600;
  background:#e0f2fe; color:#075985; white-space:nowrap;
}

/* ---- Invoice Perusahaan ---- */
.company-chip{ margin:6px 0 10px; padding:8px 10px; border-radius:10px; background:var(--cyan-50,#ecf6ff); color:var(--blue-700,#0b4fa8); font-size:12px; line-height:1.4; border:1px dashed var(--blue-700,#0b4fa8); }
.data-table .ta-c{ text-align:center; }
.data-table .ta-r{ text-align:right; }
.data-table tfoot td{ background:#f1f7ff; border-top:2px solid #cfe0f5; }
.tx-dt-input{ width:100%; min-width:170px; padding:6px 8px; border:1px solid #cfe0f5; border-radius:8px; font:inherit; }
.company-chip .company-fields{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.company-chip .company-fields label{ display:flex; flex-direction:column; gap:3px; font-size:11px; font-weight:600; color:var(--blue-700,#0b62c7); }
.company-chip .company-fields input{ padding:6px 8px; border:1px solid #cfe0f5; border-radius:8px; font:inherit; font-size:13px; background:#fff; color:#0f2a4a; }
.company-chip .company-note{ margin-top:6px; font-size:11px; opacity:.85; }

/* ===================== LOGIN ===================== */
body.locked .app-shell{ display:none; }
.login-screen{ display:none; position:fixed; inset:0; z-index:500; align-items:center; justify-content:center; padding:20px;
  background:linear-gradient(160deg,var(--blue-900),var(--blue-700) 60%,var(--blue-500)); }
body.locked .login-screen{ display:flex; }
.login-card{ width:100%; max-width:360px; background:var(--surface); border-radius:18px; padding:28px 24px; text-align:center;
  box-shadow:0 20px 60px rgba(5,42,92,.35); display:flex; flex-direction:column; gap:12px; align-items:center; }
.login-card h2{ margin:4px 0 0; color:var(--text-900); }
.login-card p{ margin:0 0 6px; color:var(--text-500); font-size:13px; }
.login-card input[type=password]{ width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px; font-size:15px; }
.login-card input[type=password]:focus{ outline:none; border-color:var(--blue-600); }
.login-card .btn{ width:100%; padding:12px; }
.login-error{ min-height:18px; color:#d93025; font-size:12.5px; font-weight:600; }