/* =========================================================
   POS Loki PS — Global Component Styles
   Touch-first: every interactive control is >= 44px.
   ========================================================= */

:root{
  --brand-500:#6366f1; --brand-600:#4f46e5; --brand-700:#4338ca;
  --ok:#10b981; --warn:#f59e0b; --danger:#ef4444; --info:#0ea5e9;
  --radius:14px;
}

*{ -webkit-tap-highlight-color: transparent; }
body{ font-family:Inter,'Segoe UI',system-ui,sans-serif; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:#94a3b8; }

/* ---------- Sidebar (flat navigation) ---------- */
.sidebar.open{ transform:translateX(0); }
/* Semua item navigasi sidebar memenuhi target sentuh minimum 44px. */
.sb-item{ min-height:44px; }

/* ---------- Bottom sheet "Lainnya" (mobile) ---------- */
.nav-sheet{ transform:translateY(105%); transition:transform .26s cubic-bezier(.16,1,.3,1); will-change:transform; }
.nav-sheet--open{ transform:translateY(0); }
.nav-sheet-backdrop{ transition:opacity .2s; }
body.nav-sheet-lock{ overflow:hidden; }

/* ---------- Buttons ---------- */
.btn,.btn-primary,.btn-secondary,.btn-success,.btn-danger,.btn-warning,.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px; padding:.625rem 1.1rem; border-radius:var(--radius);
  font-size:.875rem; font-weight:600; line-height:1.2; cursor:pointer;
  border:1px solid transparent; transition:all .18s ease; white-space:nowrap; text-decoration:none;
}
.btn:active,.btn-primary:active,.btn-secondary:active,.btn-success:active,
.btn-danger:active,.btn-warning:active,.btn-ghost:active{ transform:scale(.97); }
.btn:disabled,.btn-primary:disabled,.btn-secondary:disabled,
.btn-success:disabled,.btn-danger:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

.btn-primary{ background:linear-gradient(135deg,#6366f1,#4338ca); color:#fff; box-shadow:0 6px 18px -6px rgba(79,70,229,.6); }
.btn-primary:hover{ box-shadow:0 10px 24px -6px rgba(79,70,229,.75); }
.btn-secondary{ background:#fff; color:#334155; border-color:#e2e8f0; }
.btn-secondary:hover{ background:#f8fafc; border-color:#cbd5e1; }
.btn-success{ background:linear-gradient(135deg,#10b981,#059669); color:#fff; box-shadow:0 6px 18px -6px rgba(16,185,129,.6); }
.btn-danger{ background:linear-gradient(135deg,#f43f5e,#e11d48); color:#fff; box-shadow:0 6px 18px -6px rgba(244,63,94,.6); }
.btn-warning{ background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; }
.btn-ghost{ background:transparent; color:#475569; }
.btn-ghost:hover{ background:#f1f5f9; }
.btn-sm{ min-height:38px; padding:.4rem .8rem; font-size:.8125rem; border-radius:10px; }
.btn-sm-toolbar{ min-height:44px; padding:.625rem .875rem; font-size:.8125rem; border-radius:var(--radius); }
.btn-block{ width:100%; }

.btn-icon{
  display:grid; place-items:center; height:44px; width:44px; border-radius:12px;
  color:#475569; background:transparent; border:none; cursor:pointer; transition:all .18s;
}
.btn-icon:hover{ background:#f1f5f9; color:#0f172a; }

/* Table action buttons */
.act-group{ display:inline-flex; gap:.375rem; }
.act-btn{
  display:grid; place-items:center; height:38px; width:38px; border-radius:10px;
  border:1px solid #e2e8f0; background:#fff; color:#475569; cursor:pointer; transition:all .18s;
}
.act-btn:hover{ transform:translateY(-1px); box-shadow:0 4px 10px -2px rgba(15,23,42,.15); }
/* Standardized, modern action icons (consistent across all tables) */
.act-view{ color:#2563eb; border-color:#bfdbfe; background:#eff6ff; }   /* 👁️ Lihat - biru */
.act-view:hover{ color:#1d4ed8; border-color:#2563eb; background:#eff6ff; box-shadow:0 4px 10px -2px rgba(37,99,235,.35); }
.act-edit{ color:#d97706; border-color:#fde68a; background:#fffbeb; }   /* ✏️ Edit - amber */
.act-edit:hover{ color:#b45309; border-color:#d97706; background:#fffbeb; box-shadow:0 4px 10px -2px rgba(217,119,6,.35); }
.act-del{ color:#dc2626; border-color:#fecaca; background:#fef2f2; }   /* 🗑️ Hapus - merah */
.act-del:hover{ color:#b91c1c; border-color:#dc2626; background:#fef2f2; box-shadow:0 4px 10px -2px rgba(220,38,38,.35); }
.act-pay{ color:#16a34a; border-color:#bbf7d0; background:#f0fdf4; }   /* 💰 Lunasi - hijau */
.act-pay:hover{ color:#15803d; border-color:#16a34a; background:#f0fdf4; box-shadow:0 4px 10px -2px rgba(22,163,74,.35); }
.act-ok{ color:#25D366; border-color:#b7eccb; background:#eafff2; }    /* WhatsApp - hijau */
.act-ok:hover{ color:#1ebe5b; border-color:#25D366; background:#eafff2; box-shadow:0 4px 10px -2px rgba(37,211,102,.35); }

/* Touch-friendly Transaksi table: roomier rows, larger hit areas */
.rms-table-touch td, .rms-table-touch th{ padding:.7rem .6rem; vertical-align:middle; }
@media (max-width:768px){ .rms-table-touch td, .rms-table-touch th{ padding:.8rem .5rem; } .act-btn{ height:42px; width:42px; } }

/* ---------- Inputs ---------- */
.form-label{ display:block; margin-bottom:.375rem; font-size:.8125rem; font-weight:600; color:#334155; }
.form-input,.form-select,.form-textarea{
  width:100%; min-height:44px; padding:.625rem .875rem;
  border:1px solid #e2e8f0; border-radius:var(--radius); background:#fff;
  font-size:.9375rem; color:#0f172a; transition:border-color .18s, box-shadow .18s; outline:none;
}
.form-textarea{ min-height:88px; resize:vertical; }
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(99,102,241,.15);
}
.form-input::placeholder{ color:#94a3b8; }
.form-input:disabled,.form-select:disabled{ background:#f1f5f9; color:#64748b; cursor:not-allowed; }
.form-hint{ margin-top:.25rem; font-size:.75rem; color:#64748b; }
.form-error{ margin-top:.25rem; font-size:.75rem; color:#e11d48; }

.form-check{
  display:flex; align-items:center; gap:.75rem; min-height:44px; padding:.625rem .875rem;
  border:1px solid #e2e8f0; border-radius:var(--radius); background:#fff; cursor:pointer; transition:all .18s;
}
.form-check:hover{ border-color:#a5b4fc; background:#f8fafc; }
.form-check input[type=checkbox],.form-check input[type=radio]{
  height:22px; width:22px; accent-color:var(--brand-600); cursor:pointer; flex-shrink:0;
}
.form-check.checked{ border-color:var(--brand-500); background:#eef2ff; }

/* ---------- Searchable combobox (custom replacement for native select) ---------- */
.combo{ position:relative; }
.combo-input{ width:100%; min-height:44px; padding:.625rem .875rem; border:1px solid #e2e8f0; border-radius:var(--radius); background:#fff; font-size:.9375rem; color:#0f172a; transition:border-color .18s, box-shadow .18s; outline:none; cursor:text; }
.combo-input:focus{ border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(99,102,241,.15); }
.combo-list{ position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30; max-height:220px; overflow-y:auto; background:#fff; border:1px solid #e2e8f0; border-radius:var(--radius); box-shadow:0 10px 24px -12px rgba(15,23,42,.3); padding:.25rem; }
.combo-list[hidden]{ display:none; }
.combo-opt{ display:flex; align-items:center; gap:.5rem; padding:.5rem .625rem; border-radius:10px; font-size:.875rem; color:#0f172a; cursor:pointer; }
.combo-opt:hover, .combo-opt.active{ background:#eef2ff; }
.combo-opt[data-val="0"]{ color:#64748b; }
.combo-empty{ padding:.5rem .625rem; font-size:.8125rem; color:#94a3b8; }
.combo-multi .combo-input{ cursor:text; }
.combo-tags{ display:flex; flex-wrap:wrap; gap:.375rem; margin-top:.5rem; }
.combo-tag{ display:inline-flex; align-items:center; gap:.25rem; padding:.25rem .5rem; background:#eef2ff; color:#3730a3; border:1px solid #c7d2fe; border-radius:999px; font-size:.8125rem; font-weight:500; }
.combo-tag-x{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border:none; background:transparent; color:#6366f1; font-size:1rem; line-height:1; cursor:pointer; border-radius:999px; }
.combo-tag-x:hover{ background:#c7d2fe; }

/* ---------- Customer autocomplete ---------- */
.customer-combo{ position:relative; }
.cc-list{ position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30; max-height:220px; overflow-y:auto; background:#fff; border:1px solid #e2e8f0; border-radius:var(--radius); box-shadow:0 10px 24px -12px rgba(15,23,42,.3); padding:.25rem; }
.cc-list[hidden]{ display:none; }
.cc-opt{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.5rem .625rem; border-radius:10px; font-size:.875rem; color:#0f172a; cursor:pointer; }
.cc-opt:hover{ background:#eef2ff; }
.cc-name{ font-weight:500; }
.cc-wa{ font-size:.75rem; color:#64748b; }

/* ---------- Jaminan chips ---------- */
.chip{ display:inline-flex; align-items:center; justify-content:center; gap:.35rem; min-height:44px; padding:.5rem .75rem; border:1px solid #e2e8f0; border-radius:12px; background:#fff; font-size:.875rem; font-weight:600; color:#334155; cursor:pointer; transition:all .18s; user-select:none; }
.chip:hover{ border-color:#a5b4fc; background:#f8fafc; }
.chip.active{ border-color:var(--brand-500); background:#eef2ff; color:#4338ca; }
.chip-custom[hidden]{ display:none; }

/* ---------- "Sekarang" quick buttons ---------- */
.now-btn{ display:inline-flex; align-items:center; gap:.35rem; min-height:44px; padding:.4rem .7rem; font-size:.8125rem; font-weight:600; border:1px solid #e2e8f0; border-radius:10px; background:#fff; color:#475569; cursor:pointer; transition:all .18s; }
.now-btn:hover{ border-color:var(--brand-500); color:#4338ca; background:#eef2ff; }

/* ---------- Cards ---------- */
.card{ background:#fff; border:1px solid #e2e8f0; border-radius:18px; box-shadow:0 1px 3px rgba(15,23,42,.05); }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1rem 1.25rem; border-bottom:1px solid #f1f5f9; }
.card-title{ font-size:.9375rem; font-weight:700; color:#0f172a; }
.card-body{ padding:1.25rem; }
.glass{ background:rgba(255,255,255,.92); backdrop-filter:blur(12px); }

.kpi-card{ position:relative; overflow:hidden; border-radius:18px; padding:1.25rem; color:#fff; box-shadow:0 10px 28px -12px rgba(15,23,42,.4); }
.kpi-card::after{ content:''; position:absolute; right:-30px; top:-30px; height:120px; width:120px; border-radius:99px; background:rgba(255,255,255,.12); }
.kpi-indigo{ background:linear-gradient(135deg,#6366f1,#4338ca); }
.kpi-emerald{ background:linear-gradient(135deg,#10b981,#047857); }
.kpi-amber{ background:linear-gradient(135deg,#f59e0b,#b45309); }
.kpi-rose{ background:linear-gradient(135deg,#f43f5e,#be123c); }
.kpi-sky{ background:linear-gradient(135deg,#0ea5e9,#0369a1); }
.kpi-violet{ background:linear-gradient(135deg,#8b5cf6,#6d28d9); }

/* Product card (POS) */
.prod-card{
  display:flex; flex-direction:column; gap:.5rem; padding:1rem; background:#fff;
  border:1px solid #e2e8f0; border-radius:16px; cursor:pointer; transition:all .18s; text-align:left; min-height:130px;
}
.prod-card:hover{ border-color:var(--brand-400,#818cf8); box-shadow:0 8px 22px -10px rgba(79,70,229,.45); transform:translateY(-2px); }
.prod-card:active{ transform:scale(.98); }
.prod-card.in-cart{ border-color:var(--brand-500); background:#eef2ff; }

/* ---------- Badges ---------- */
.badge{ display:inline-flex; align-items:center; gap:.25rem; padding:.25rem .625rem; border-radius:99px; font-size:.6875rem; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
.badge-primary{ background:#eef2ff; color:#4338ca; }
.badge-success{ background:#ecfdf5; color:#047857; }
.badge-warning{ background:#fffbeb; color:#b45309; }
.badge-danger{ background:#fff1f2; color:#be123c; }
.badge-info{ background:#f0f9ff; color:#0369a1; }
.badge-muted{ background:#f1f5f9; color:#475569; }

/* ---------- Tables (global consistent baseline) ---------- */
.rms-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:.8125rem; color:#1e293b; }
.rms-table thead th{
  padding:.7rem 1rem; background:#f8fafc; color:#475569;
  font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid #e2e8f0; white-space:nowrap;
}
.rms-table tbody td{ padding:.8rem 1rem; border-bottom:1px solid #f1f5f9; vertical-align:middle; transition:background-color .15s; }
.rms-table thead th.text-right,.rms-table tbody td.text-right{ text-align:right; }
.rms-table thead th.text-center,.rms-table tbody td.text-center{ text-align:center; }
.rms-table thead th.text-left,.rms-table tbody td.text-left{ text-align:left; }
.rms-table tbody tr:hover{ background:#f8fafc; }
.rms-table tbody tr:last-child td{ border-bottom:none; }
/* Touch-friendly: roomier rows + larger hit areas on small screens (all tables) */
.rms-table-touch td, .rms-table-touch th{ padding:.7rem .6rem; vertical-align:middle; }
@media (max-width:768px){ .rms-table-touch td, .rms-table-touch th{ padding:.8rem .5rem; } .act-btn{ height:42px; width:42px; } }
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.empty-state{ display:flex; flex-direction:column; align-items:center; gap:.75rem; padding:3rem 1rem; text-align:center; color:#94a3b8; }

/* ---------- Toolbar / filter ---------- */
.page-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.toolbar-card{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; padding:.875rem 1rem; background:#fff; border:1px solid #e2e8f0; border-radius:16px; margin-bottom:1rem; }
.rms-search{ position:relative; flex:1 1 240px; min-width:200px; }
.rms-search input{ padding-left:2.5rem; }
.rms-search svg{ position:absolute; left:.875rem; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#94a3b8; pointer-events:none; }

.filter-pills{ display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.25rem; scrollbar-width:none; }
.filter-pills::-webkit-scrollbar{ display:none; }
.filter-pill{
  display:inline-flex; align-items:center; gap:.375rem; min-height:44px; padding:.5rem 1rem;
  border:1px solid #e2e8f0; border-radius:99px; background:#fff; color:#475569;
  font-size:.8125rem; font-weight:600; white-space:nowrap; cursor:pointer; transition:all .18s;
}
.filter-pill:hover{ border-color:#a5b4fc; color:#4338ca; }
.filter-pill.active{ background:linear-gradient(135deg,#6366f1,#4338ca); border-color:transparent; color:#fff; box-shadow:0 6px 16px -6px rgba(79,70,229,.6); }

/* ---------- Pagination ---------- */
.pagination{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1rem 1.25rem; border-top:1px solid #f1f5f9; }
.page-btns{ display:flex; gap:.25rem; flex-wrap:wrap; }
.page-btn{
  display:grid; place-items:center; min-height:40px; min-width:40px; padding:0 .625rem;
  border:1px solid #e2e8f0; border-radius:10px; background:#fff; color:#475569;
  font-size:.8125rem; font-weight:600; cursor:pointer; transition:all .18s; text-decoration:none;
}
.page-btn:hover:not(.disabled){ border-color:#a5b4fc; color:#4338ca; }
.page-btn.active{ background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.page-btn.disabled{ opacity:.4; cursor:not-allowed; }

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(2,6,23,.65); backdrop-filter:blur(6px); padding:0; animation:fadeIn .18s ease;
}
@media (min-width:640px){ .modal-backdrop{ align-items:center; padding:1.5rem; } }
.modal-card{
  width:100%; max-width:640px; max-height:92vh; overflow-y:auto;
  background:#fff; border-radius:22px 22px 0 0; box-shadow:0 24px 60px -12px rgba(2,6,23,.5);
  animation:slideUp .24s cubic-bezier(.16,1,.3,1);
}
@media (min-width:640px){ .modal-card{ border-radius:22px; } }
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem 1.5rem; border-bottom:1px solid #f1f5f9; position:sticky; top:0; background:#fff; z-index:1; border-radius:22px 22px 0 0; }
.modal-title{ font-size:1rem; font-weight:700; color:#0f172a; }
.modal-body{ padding:1.5rem; }
.modal-foot{ display:flex; gap:.75rem; justify-content:flex-end; flex-wrap:wrap; padding:1rem 1.5rem 1.5rem; }
.modal-foot > *{ flex:1 1 auto; }
@media (min-width:640px){ .modal-foot > *{ flex:0 0 auto; } }

@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes slideUp{ from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:translateY(0)} }

/* ---------- Toast ---------- */
.toast{
  display:flex; align-items:flex-start; gap:.75rem; padding:.875rem 1rem;
  border-radius:14px; background:#fff; border:1px solid #e2e8f0;
  box-shadow:0 12px 32px -12px rgba(2,6,23,.35); animation:slideIn .24s cubic-bezier(.16,1,.3,1);
}
@keyframes slideIn{ from{opacity:0; transform:translateX(24px)} to{opacity:1; transform:translateX(0)} }
.toast.hide{ opacity:0; transform:translateX(24px); transition:all .2s; }
.toast-icon{ display:grid; place-items:center; height:32px; width:32px; border-radius:10px; flex-shrink:0; }
.toast-success .toast-icon{ background:#ecfdf5; color:#059669; }
.toast-error   .toast-icon{ background:#fff1f2; color:#e11d48; }
.toast-warning .toast-icon{ background:#fffbeb; color:#d97706; }
.toast-info    .toast-icon{ background:#f0f9ff; color:#0284c7; }
.toast-msg{ flex:1; font-size:.875rem; font-weight:500; color:#1e293b; line-height:1.4; }

/* ---------- Cart ---------- */
.qty-stepper{ display:inline-flex; align-items:center; gap:.25rem; border:1px solid #e2e8f0; border-radius:12px; padding:.125rem; background:#fff; }
.qty-btn{ display:grid; place-items:center; height:38px; width:38px; border-radius:9px; border:none; background:#f1f5f9; color:#334155; cursor:pointer; transition:all .15s; }
.qty-btn:hover{ background:var(--brand-600); color:#fff; }
.qty-val{ min-width:38px; text-align:center; font-size:.9375rem; font-weight:700; color:#0f172a; }

.cart-item{ display:flex; align-items:center; gap:.75rem; padding:.75rem; border:1px solid #e2e8f0; border-radius:14px; background:#fff; }

/* ---------- Misc ---------- */
.divider{ height:1px; background:#f1f5f9; margin:1rem 0; }
.skeleton{ background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:8px; }
@keyframes shimmer{ to{ background-position:-200% 0 } }
.tabular{ font-variant-numeric:tabular-nums; }
@media print{ #sidebar,.bottom-nav,.nav-sheet,.nav-sheet-backdrop,header,.no-print{ display:none !important; } #main{ padding:0 !important; } }

/* ---------- Badge angka menu (sidebar & bottom-nav) ---------- */
.menu-badge{ margin-left:auto; min-width:22px; height:22px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:#f43f5e; color:#fff; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; }
.bnav-badge{ position:absolute; top:-7px; right:-12px; min-width:18px; height:18px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:#f43f5e; color:#fff; font-size:10px; font-weight:800; border:2px solid #fff; font-variant-numeric:tabular-nums; }
.menu-badge.hidden,.bnav-badge.hidden{ display:none; }