/* ============================================================
   Kasir POS — design system for "Toko CCTV"
   Matches the deep royal-blue theme from the reference screenshot.
   ============================================================ */

:root {
  /* Brand */
  --navy-900: #101a4d;
  --navy-800: #17246b;
  --navy-700: #1c2b7e;
  --navy-600: #233a94;
  --blue-500: #2f57c9;
  --blue-400: #4a76e0;

  /* Accent */
  --green-600: #2f9e6f;
  --green-100: #e5f5ee;
  --blue-100: #e8effb;

  /* Neutrals */
  --ink: #1a1f3a;
  --ink-2: #545b7a;
  --ink-3: #8a90a8;
  --line: #e6e8f1;
  --line-2: #d9dcEB;
  --bg: #f1f3f9;
  --white: #ffffff;

  /* Status */
  --red-600: #d74444;
  --red-100: #fbeaea;
  --amber-600: #bd7a12;
  --amber-100: #fdf3e0;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 8px 24px rgba(20, 30, 70, 0.06);
  --shadow-sm: 0 2px 8px rgba(20, 30, 70, 0.05);
  --navy-grad: linear-gradient(135deg, #1e3a8a 0%, #2549a0 55%, #2d5ab8 100%);
  --navy-flat: #1e3a8a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: 15px; }

/* ----- Layout shell ----- */
.shell { max-width: 720px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  background: var(--navy-flat);
  color: #fff;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: sticky; top: 0; z-index: 40;
  border-radius: 0;
  box-shadow: 0 4px 14px rgba(30, 58, 138, 0.22);
}
.topbar .menu-btn { background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; padding: 4px; line-height: 1; }
.topbar .title { font-size: 18px; font-weight: 700; letter-spacing: 0.2px; }
.topbar .back-btn { background: none; border: 0; color: #fff; font-size: 24px; cursor: pointer; padding: 4px; line-height: 1; }

/* ----- Store switcher (Pilih Toko) ----- */
.store-switch { margin-left: auto; position: relative; }
.store-btn {
  display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22); color: #fff; padding: 6px 10px;
  border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 14px;
  transition: background 0.15s;
}
.store-btn:hover { background: rgba(255,255,255,0.24); }
.store-btn .st-ico { display: flex; }
.store-btn .st-ico svg { width: 15px; height: 15px; }
.store-btn .st-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-btn .st-caret { display: flex; align-items: center; }
.store-btn .st-caret svg { width: 14px; height: 14px; }
/* Panel Pilih Toko: DARK MODE, penuh lebar di bawah topbar (meniru popup
   dropdown bulan native: bg #1F2937, divider tipis, radio biru di kanan).
   Posisi left/width/top di-set oleh placeStoreMenu() di layout.php supaya
   lebarnya pas mengikuti lebar topbar; nilai di bawah hanya cadangan. */
.store-menu {
  position: fixed; left: 10px; right: auto; top: 66px; width: auto;
  background: #1F2937; border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  padding: 2px 0 4px; z-index: 60; display: none;
  max-height: calc(100vh - 110px); overflow-y: auto;
}
.store-menu.open { display: block; }
.store-menu-title {
  font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase; letter-spacing: 0.6px; padding: 13px 16px 9px;
}
.store-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 15px 16px; cursor: pointer; font-size: 16px; font-weight: 500;
  color: #fff; transition: background 0.15s;
}
.store-opt:first-of-type { border-top: 0; }
.store-opt:hover, .store-opt:active { background: rgba(255, 255, 255, 0.06); }
.store-opt.active { background: rgba(37, 99, 235, 0.18); }
.store-opt-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Radio: lingkaran kosong; biru terisi + titik putih saat toko aktif terpilih */
.store-radio {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  display: flex; align-items: center; justify-content: center;
}
.store-opt.active .store-radio { border-color: #2563EB; background: #2563EB; }
.store-opt.active .store-radio::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff;
}

/* Statis kanan header saat store dropdown disembunyikan (mis. halaman Gudang) */
.store-static {
  margin-left: auto; color: #fff; font-weight: 700; font-size: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%;
}

.main { padding: 18px 16px 40px; flex: 1; }

/* ----- Drawer nav ----- */
.drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.drawer.open { visibility: visible; }
.drawer .overlay { position: absolute; inset: 0; background: rgba(16, 26, 77, 0.45); opacity: 0; transition: opacity 0.2s; }
.drawer.open .overlay { opacity: 1; }
.drawer .panel {
  position: absolute; left: 0; top: 0; bottom: 0; width: 270px; max-width: 82vw;
  background: #fff; transform: translateX(-100%); transition: transform 0.25s ease;
  display: flex; flex-direction: column; box-shadow: 4px 0 24px rgba(0,0,0,0.15);
}
.drawer.open .panel { transform: translateX(0); }
.drawer .panel-head { background: var(--navy-grad); color: #fff; padding: 22px 20px; display: flex; align-items: center; gap: 14px; }
.drawer .panel-head .panel-logo { width: 46px; height: 46px; border-radius: 11px; flex: none; box-shadow: 0 6px 14px rgba(8, 12, 40, 0.4); }
.drawer .panel-head .store { font-size: 17px; font-weight: 700; }
.drawer .panel-head .sub { font-size: 12.5px; opacity: 0.8; margin-top: 3px; }
/* Baris ke-3 header sidebar: email akun yang sedang login (lebih kecil + abu-abu) */
.drawer .panel-head > div { min-width: 0; }
.drawer .panel-head .em { font-size: 11px; color: #c3c8dd; opacity: 0.9; margin-top: 2px; line-height: 1.35; word-break: break-word; overflow-wrap: anywhere; }
.drawer .panel-body { padding: 10px 12px; overflow-y: auto; flex: 1; }
.drawer nav a {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  font-weight: 600; color: var(--ink); font-size: 14.5px; margin-bottom: 2px;
}
.drawer nav a:hover, .drawer nav a.active { background: var(--blue-100); color: var(--navy-700); }
.drawer nav a svg { width: 20px; height: 20px; flex: none; }

/* ----- Cards ----- */
.card {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; border: 1px solid var(--line);
}
.card.flat { box-shadow: var(--shadow-sm); }

.section-title { font-size: 14px; font-weight: 700; color: var(--ink-2); margin: 22px 0 10px; letter-spacing: 0.3px; }

/* ----- Stat cards (dashboard) ----- */
.stat-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.stat-grid.two { grid-template-columns: 1fr 1fr; }
.stat-card { border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.stat-card.hero { background: var(--navy-grad); color: #fff; box-shadow: 0 10px 26px rgba(20, 30, 70, 0.28); border: none; }
.stat-card.hero .label { color: rgba(255,255,255,0.85); }
.stat-card.hero .sub { color: rgba(255,255,255,0.6); }
.stat-card.green { background: rgba(16, 185, 129, 0.10); border-color: rgba(16, 185, 129, 0.25); }
.stat-card.green .label { color: #065f46; font-weight: 600; }
.stat-card.green .sub { color: #047857; }
.stat-card.green .value { color: #065f46; }
.stat-card.blue { background: rgba(59, 130, 246, 0.10); border-color: rgba(59, 130, 246, 0.25); }
.stat-card.blue .label { color: #1e40af; }
.stat-card.blue .sub { color: #1d4ed8; }
.stat-card.blue .value { color: #1e40af; }
.stat-card .head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.stat-card .ico { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.9); }
.stat-card.green .ico { background: #fff; color: #065f46; }
.stat-card.blue .ico { background: #fff; color: #1e40af; }
.stat-card .label { font-size: 13px; font-weight: 700; }
.stat-card .value { font-size: 24px; font-weight: 800; margin: 4px 0 2px; }
.stat-card .sub { font-size: 12px; font-weight: 600; }

/* ----- Icon menu grid ----- */
.menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 12px; }
.menu-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.menu-item .tile {
  width: 62px; height: 62px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  color: var(--navy-700); transition: transform 0.12s;
}
.menu-item:active .tile { transform: scale(0.94); }
.menu-item .tile svg { width: 30px; height: 30px; }
.menu-item .tile.green { color: var(--green-600); }
.menu-item .tile.blue { color: var(--blue-500); }
.menu-item .tile.red { color: var(--red-600); }
.menu-item .tile.amber { color: var(--amber-600); }
.menu-item span { font-size: 12.5px; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.25; }
.menu-item span.badge { position: relative; }

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 12px; padding: 12px 18px; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: filter 0.12s, transform 0.1s; line-height: 1;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: linear-gradient(135deg, #233a94, #2f57c9); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-green { background: linear-gradient(135deg, #2f9e6f, #38b57f); color: #fff; }
.btn-danger { background: #fbeaea; color: var(--red-600); }
.btn-ghost { background: #fff; color: var(--ink-2); border: 1px solid var(--line-2); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 12px; font-size: 13.5px; border-radius: 10px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-lg { padding: 14px 20px; font-size: 16px; }

/* ----- Forms ----- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 13px; border: 1.5px solid var(--line-2); border-radius: 12px;
  background: #fff; color: var(--ink); font-weight: 500;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 3px rgba(74,118,224,0.12); }
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }

/* ----- Search & toolbar ----- */
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.search {
  flex: 1; display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--line-2);
  border-radius: 12px; padding: 0 12px; height: 44px;
}
.search input { border: none; outline: none; flex: 1; font-weight: 500; padding: 0; background: transparent; }
.search svg { color: var(--ink-3); width: 18px; height: 18px; flex: none; }
/* Search bar rounded-full khas halaman Gudang */
.wc-search {
  display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--line-2);
  border-radius: 999px; padding: 0 16px; height: 46px; margin-bottom: 16px;
}
.wc-search input { border: none; outline: none; flex: 1; font-weight: 500; padding: 0; background: transparent; font-size: 15px; }
.wc-search svg { color: var(--ink-3); width: 20px; height: 20px; flex: none; }
.icon-btn { width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--line-2); color: var(--navy-700); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.icon-btn svg { width: 20px; height: 20px; }

/* ----- Lists & rows ----- */
.list { display: flex; flex-direction: column; gap: 10px; }
.row-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px;
  display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-sm);
}
.row-card .grow { flex: 1; min-width: 0; }
.row-card .t { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-card .s { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.row-card .r { text-align: right; font-weight: 700; white-space: nowrap; }
.row-card .r .sub2 { font-size: 12px; color: var(--ink-3); font-weight: 500; margin-top: 2px; }
.avatar { width: 42px; height: 42px; border-radius: 12px; background: var(--blue-100); color: var(--blue-500); display: flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.avatar svg { width: 22px; height: 22px; }
.badge-pill { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.badge-green { background: var(--green-100); color: var(--green-600); }
.badge-amber { background: var(--amber-100); color: var(--amber-600); }
.badge-red { background: var(--red-100); color: var(--red-600); }
.badge-blue { background: var(--blue-100); color: var(--blue-500); }
.badge-gray { background: #eef0f6; color: var(--ink-2); }

/* ----- Tables ----- */
.table-wrap { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; padding: 12px 14px; background: var(--blue-100); color: var(--navy-700); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
td { padding: 12px 14px; border-top: 1px solid var(--line); color: var(--ink); }
td.num, th.num { text-align: right; }
tr.rowlink { cursor: pointer; }
tr.rowlink:hover { background: #f7f8fc; }
.t-right { text-align: right; }

/* ----- Chips / categories ----- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line-2); font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.chip.active { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }

/* ----- Empty state ----- */
.empty { text-align: center; padding: 40px 20px; color: var(--ink-3); }
.empty svg { width: 56px; height: 56px; margin-bottom: 12px; opacity: 0.5; }
.empty .t { font-weight: 700; color: var(--ink-2); }
.empty .s { font-size: 13.5px; margin-top: 4px; }

/* ----- Modal (bottom sheet) ----- */
.sheet-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(16,26,77,0.45); visibility: hidden; }
.sheet-overlay.open { visibility: visible; }
.sheet-overlay > div { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 22px 22px 0 0; transform: translateY(100%); transition: transform 0.25s ease; max-height: 92vh; display: flex; flex-direction: column; }
.sheet-overlay.open > div { transform: translateY(0); }
.sheet-head { padding: 16px 18px 8px; display: flex; align-items: center; justify-content: space-between; }
.sheet-head h3 { font-size: 17px; }
.sheet-head .x { background: none; border: 0; font-size: 24px; color: var(--ink-3); cursor: pointer; line-height: 1; }
.sheet-body { padding: 8px 18px 24px; overflow-y: auto; }

/* ----- Toast ----- */
.toast-wrap { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; width: max-content; max-width: 92vw; }
.toast { background: var(--navy-900); color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,0.25); animation: toastin 0.25s ease; }
.toast.err { background: var(--red-600); }
.toast.green { background: var(--green-600); }
@keyframes toastin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ----- FAB ----- */
.fab {
  position: fixed; bottom: 20px; right: 20px; z-index: 60; width: 56px; height: 56px; border-radius: 50%;
  background: var(--navy-grad); color: #fff; border: none; box-shadow: 0 10px 26px rgba(20,30,70,0.4);
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 26px;
}
.fab svg { width: 26px; height: 26px; }

/* ----- POS specific ----- */
.pos-layout { display: grid; grid-template-columns: 1fr 300px; gap: 14px; align-items: start; }
.pos-cart { background: #fff; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm); padding: 14px; position: sticky; top: 76px; }
.pos-cart .cart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pos-cart .cart-head h3 { font-size: 15px; }
.cart-list { max-height: 360px; overflow-y: auto; margin-bottom: 10px; }
.cart-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.cart-item .ci-name { flex: 1; font-weight: 600; font-size: 13.5px; min-width: 0; }
.cart-item .ci-name .sub2 { color: var(--ink-3); font-size: 12px; font-weight: 500; }
.qty { display: flex; align-items: center; gap: 6px; }
.qty button { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; font-weight: 700; color: var(--ink-2); }
.qty .q { min-width: 24px; text-align: center; font-weight: 700; }
.cart-total { display: flex; justify-content: space-between; font-size: 14px; padding: 8px 0; font-weight: 600; color: var(--ink-2); }
.cart-total.grand { font-size: 18px; font-weight: 800; color: var(--ink); border-top: 1.5px solid var(--line-2); margin-top: 4px; padding-top: 12px; }
.cart-total.grand .val { color: var(--blue-500); }

/* product tile inside POS */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ptile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-sm); transition: transform 0.1s; }
.ptile:active { transform: scale(0.97); }
.ptile .cat { font-size: 11px; color: var(--blue-500); font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.ptile .nm { font-weight: 700; font-size: 14px; line-height: 1.3; }
.ptile .price { color: var(--navy-700); font-weight: 800; font-size: 15px; }
.ptile .stok { font-size: 12px; color: var(--ink-3); }
.ptile .stok.low { color: var(--amber-600); }
.ptile .stok.out { color: var(--red-600); }

/* ----- Summary / detail ----- */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.detail-grid .di { background: #f7f8fc; border-radius: 10px; padding: 12px; }
.detail-grid .di .l { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.detail-grid .di .v { font-weight: 700; margin-top: 3px; font-size: 15px; }

/* ----- Segmentation ----- */
.seg { display: flex; background: #fff; border: 1px solid var(--line-2); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button { flex: 1; border: none; background: transparent; padding: 9px; font-weight: 600; color: var(--ink-2); border-radius: 9px; cursor: pointer; font-size: 13.5px; }
.seg button.active { background: var(--navy-700); color: #fff; }

.spacer { height: 24px; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
/* print receipt */
.receipt { font-family: 'Courier New', monospace; font-size: 13px; }
.receipt .line { border-top: 1px dashed #000; margin: 6px 0; }
.receipt td, .receipt th { padding: 3px 0; border: none; font-family: 'Courier New', monospace; font-size: 13px; }

@media (max-width: 720px) {
  .pos-layout { grid-template-columns: 1fr; }
  .pos-cart { position: static; order: 2; }
  .menu-grid { grid-template-columns: repeat(4, 1fr); }
  .stat-grid.two { grid-template-columns: 1fr 1fr; }
  .main { padding: 16px 14px 40px; }
}
@media (min-width: 721px) {
  .shell { max-width: 1040px; }
  .topbar .menu-btn { display: none; }
  .drawer { position: static; visibility: visible; }
  .drawer .overlay { display: none; }
  .drawer .panel { transform: none; position: static; width: auto; max-width: none; box-shadow: none; border-right: 1px solid var(--line); }
  .drawer .panel-head { display: none; }
  .drawer nav a.active { background: var(--navy-700); color: #fff; }
  .drawer nav a.active svg { color: #fff; }
  .shell-body { display: grid; grid-template-columns: 250px 1fr; }
}

/* ============================================================
   Halaman Produk (card list + foto)
   ============================================================ */

/* Topbar solid biru dongker — khusus halaman yang set $topbar_solid */
.topbar.solid { background: var(--navy-flat); box-shadow: 0 4px 14px rgba(30, 58, 138, 0.22); }

/* Daftar card produk (vertikal) — layout flex-row 2 kolom: foto | info (nama/kategori/harga/stok) */
.prod-list { display: flex; flex-direction: column; }
.pcard {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fff; border-radius: 12px;
  padding: 12px; margin-bottom: 8px; box-shadow: var(--shadow-sm);
  cursor: pointer; transition: transform 0.1s, box-shadow 0.15s;
}
.pcard:active { transform: scale(0.985); }
/* Stok habis → seluruh card berlatar merah transparan */
.pcard.out { background: rgba(239, 68, 68, 0.12); }

/* Kolom 1 — foto produk (64px, radius 8px, tidak menyusut) */
.pthumb {
  position: relative; width: 64px; height: 64px; border-radius: 8px;
  flex-shrink: 0; overflow: hidden; background: linear-gradient(135deg, #e9edf9, #dfe5f5);
}
.pthumb .ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--navy-700); z-index: 0;
}
.pthumb .ph svg { width: 30px; height: 30px; opacity: 0.5; }
.pthumb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}
/* Overlay kecil "foto sedang diunggah": foto dikirim menyusul di latar belakang
   setelah produk tersimpan (lihat uploadFotoLatar() di pages/produk.php), jadi
   ditandai di sini supaya tidak terlihat seperti sudah final. */
.pthumb .up {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(12, 18, 42, 0.42);
  display: flex; align-items: center; justify-content: center;
}
.pthumb .up::after {
  content: ''; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff;
  animation: pthumbSpin 0.8s linear infinite;
}
@keyframes pthumbSpin { to { transform: rotate(360deg); } }

/* Kolom 2 — info produk: nama / kode · kategori / harga / grosir / stok.
   Mengisi sisa lebar card (harga tidak lagi punya kolom sendiri) sehingga nama produk
   dapat lebar maksimal dan tidak tertutup nominal harga. */
.pinfo { flex: 1 1 0; min-width: 0; }
/* Nama produk: TANPA line-clamp / ellipsis — tampil penuh (wrap bebas ke bawah), card ikut tinggi */
.pinfo .nm {
  font-size: 15px; line-height: 1.4; font-weight: 600; color: #10131f;
  white-space: normal; overflow: visible; max-height: none;
  word-break: break-word;
}
.pinfo .sub {
  font-size: 12px; color: #6b7280; font-weight: 500; margin-top: 3px;
  white-space: normal; word-break: break-word;
}
.pinfo .stokline {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 14px; line-height: 1.25; font-weight: 700;
  max-width: 100%; white-space: normal; word-break: break-word;
}
.stokline .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.stokline.good { color: var(--green-600); }
.stokline.good .dot { background: var(--green-600); }
/* Stok menipis (1–4): HANYA warna teks kuning gelap (tanpa background/badge),
   ukuran +2px dari baris stok normal supaya langsung terlihat. */
.stokline.low {
  color: #CA8A04; font-size: 16px; font-weight: 800;
}
.stokline.low .dot { background: #CA8A04; }
.stokline.out { color: var(--red-600); }
.stokline.out .dot { background: var(--red-600); }

/* Harga jual — di bawah kategori, DI ATAS stok (urutan: nama → kategori → harga → stok) */
.pinfo .prline {
  margin-top: 3px; font-size: 16px; line-height: 1.35; font-weight: 700;
  color: var(--navy-700); white-space: nowrap;
}
/* Info harga grosir (opsional) — menempel di bawah harga jual, tetap rata kiri */
.pinfo .grcap {
  font-size: 11px; line-height: 1.35; color: #6b7280; font-weight: 500;
  margin-top: 2px; white-space: normal; word-break: break-word;
}

/* Photo picker di bottom-sheet produk */
.photo-picker { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 2px 0 16px; }
.photo-preview {
  position: relative; width: 112px; height: 112px; border-radius: 22px;
  border: 2px dashed var(--line-2); background: #f5f6fb;
  overflow: hidden; cursor: pointer; display: block;
}
.photo-preview .ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); z-index: 0;
}
.photo-preview .ph svg { width: 36px; height: 36px; }
.photo-preview img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}
/* X kecil hapus foto — pojok kanan atas kotak gambar (hanya saat ada foto) */
.foto-x {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  width: 24px; height: 24px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(10, 15, 38, 0.6); color: #fff;
  display: flex; align-items: center; justify-content: center; padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.foto-x svg { width: 12px; height: 12px; }
.foto-x:active { transform: scale(0.9); }
.photo-hint { font-size: 11.5px; color: var(--ink-3); margin-top: -6px; text-align: center; }

/* Chooser foto (kamera / galeri) di atas sheet produk */
.sheet-overlay.raise { z-index: 260; }
.foto-opts { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.foto-opt {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: 16px;
  background: #fff; color: var(--ink); cursor: pointer; text-align: left;
  transition: border-color 0.12s, background 0.12s;
}
.foto-opt:active { background: #f5f6fb; border-color: var(--blue-400); }
.foto-opt .ico {
  flex: none; width: 44px; height: 44px; border-radius: 14px; display: flex;
  align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, #1e3a8a, #2d5ab8);
}
.foto-opt .ico svg { width: 21px; height: 21px; }
.foto-opt .ft { display: flex; flex-direction: column; gap: 2px; }
.foto-opt .ft .t { font-size: 15px; font-weight: 700; }
.foto-opt .ft .s { font-size: 12px; font-weight: 500; color: var(--ink-3); line-height: 1.35; }


/* ============================================================
   Halaman Kasir — tampilan POS modern
   (scan barcode, grid 2 kolom, bottom-sheet keranjang)
   ============================================================ */

.kasir-wrap { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }

/* --- Bar scan barcode (paling atas) --- */
.scanbar {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid var(--line-2); border-radius: 16px;
  padding: 5px 12px 5px 6px; box-shadow: var(--shadow-sm); height: 54px;
}
.scanbar .scan-ico {
  flex: none; width: 42px; height: 42px; border-radius: 12px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #1e3a8a, #2d5ab8); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(35, 58, 148, 0.35);
}
.scanbar .scan-ico:active { transform: scale(0.94); }
.scanbar .scan-ico svg { width: 21px; height: 21px; }
.scanbar input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: 15.5px; font-weight: 600; color: var(--ink); letter-spacing: 0.1px;
}
.scanbar input::placeholder { color: var(--ink-3); font-weight: 500; }

/* --- Baris cari produk (full lebar) --- */
.kasir-wrap .row2 { display: flex; gap: 8px; align-items: center; }
.kasir-wrap .row2 .search { flex: 1; width: 100%; height: 48px; border-radius: 14px; }

/* --- Grid produk 2 kolom --- */
.pgrid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ptile2 {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform 0.1s, box-shadow 0.15s; display: flex; flex-direction: column;
}
.ptile2:active { transform: scale(0.97); }
.ptile2.out { opacity: 0.78; }
.ptile2 .ph { position: relative; aspect-ratio: 1.12 / 1; background: linear-gradient(135deg, #eef1fa, #e2e7f6); display: flex; align-items: center; justify-content: center; }
.ptile2 .ph .ph-ico { color: #b9c2e2; display: flex; }
.ptile2 .ph .ph-ico svg { width: 44px; height: 44px; }
.ptile2 .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Produk habis: gambar asli produk TETAP tampil, diberi blur abu-abu transparan (jelas beda dgn produk tersedia) */
.ptile2.out .ph img { filter: grayscale(100%) blur(2px); opacity: 0.5; }
/* Overlay abu-abu transparan di atas gambar produk kosong */
.ptile2.out .ph::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: rgba(110, 118, 144, 0.4); pointer-events: none;
}
/* Produk habis tanpa foto: sembunyikan ikon placeholder box (jangan terkesan mengganti gambar) */
.ptile2.out .ph .ph-ico { display: none; }
/* Tombol "+" di pojok gambar DIHAPUS — seluruh card sekarang bisa di-tap utk menambah ke keranjang. */
/* Label "STOK HABIS" — badge merah transparan padat, teks putih tebal, di tengah gambar */
.ptile2.out .ph .stokhabis {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; white-space: nowrap; text-align: center; font-size: 13px; font-weight: 900; letter-spacing: 0.6px;
  background: rgba(255, 0, 0, 0.7); color: #fff; padding: 5px 12px; border-radius: 8px;
  pointer-events: none;
}
.ptile2 .meta { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; }
.ptile2 .nm {
  font-size: 13px; font-weight: 400; color: #0d0f1c; line-height: 1.35;
  min-width: 0; word-break: break-word; white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.ptile2 .price { font-size: 15px; font-weight: 800; color: var(--navy-700); line-height: 1.3; }
.stline { font-size: 11px; font-weight: 700; line-height: 1.3; }
.stline.ok { color: var(--green-600); }
.stline.warn { color: var(--amber-600); }
.stline.low { color: var(--red-600); }

/* --- Bottom sheet keranjang (muncul hanya jika ada item) --- */
.cartdock {
  margin-top: 6px; background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 14px 40px rgba(16, 26, 77, 0.22); overflow: hidden;
  position: sticky; bottom: 0; z-index: 60; width: 100%;
  display: flex; flex-direction: column;
}
.cartdock[hidden] { display: none; }
.cartdock.bump { animation: dockbump 0.28s ease; }
@keyframes dockbump {
  0% { transform: translateY(6px); } 45% { transform: translateY(-3px); } 100% { transform: translateY(0); }
}
.cd-head {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 11px 14px;
}
.cd-ico { position: relative; width: 40px; height: 40px; border-radius: 13px; flex: none;
  background: linear-gradient(135deg, #1e3a8a, #2d5ab8); color: #fff;
  display: flex; align-items: center; justify-content: center; }
.cd-ico svg { width: 20px; height: 20px; }
.cd-ico .cd-n {
  position: absolute; top: -6px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: #d74444; color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(215, 68, 68, 0.45);
}
.cd-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.cd-txt .cd-lbl { font-size: 15px; font-weight: 800; color: var(--ink); }
.cd-txt .cd-sub { font-size: 12px; color: var(--ink-3); font-weight: 600; margin-top: 2px; }
.cd-total { font-size: 16px; font-weight: 800; color: var(--navy-700); white-space: nowrap; }
.cd-chev { display: flex; color: var(--ink-3); }
.cd-chev svg { width: 19px; height: 19px; }

/* daftar item bisa dilipat/dibuka */
.cd-listwrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s ease; }
.cd-listwrap.open { grid-template-rows: 1fr; }
.cd-listwrap > div { overflow: hidden; min-height: 0; }
.cd-list { max-height: 38vh; overflow-y: auto; border-top: 1px solid var(--line); padding: 2px 14px; }

/* baris item keranjang */
.ci { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.ci:last-child { border-bottom: 0; }
.ci-th { position: relative; width: 44px; height: 44px; border-radius: 12px; flex: none; overflow: hidden; background: linear-gradient(135deg, #eef1fa, #e2e7f6); display: flex; align-items: center; justify-content: center; }
.ci-th .ph-ico.sm { color: #b9c2e2; display: flex; }
.ci-th .ph-ico.sm svg { width: 20px; height: 20px; }
.ci-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ci-info { flex: 1; min-width: 0; }
.ci-nm { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ci-un { font-size: 11.5px; color: var(--ink-3); font-weight: 500; margin-top: 2px; }
.ci-ctl { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ci-ln { font-size: 13.5px; font-weight: 800; color: var(--navy-700); white-space: nowrap; }
.ci-step { display: flex; align-items: center; gap: 4px; }
.ci-step .st {
  width: 27px; height: 27px; border-radius: 9px; border: 1px solid var(--line-2); background: #fff;
  font-size: 16px; font-weight: 700; color: var(--ink-2); cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.ci-step .st:active { background: #eef1fa; }
.ci-step .st svg { width: 13px; height: 13px; }
.ci-step .st.del { border-color: #f2d4d4; color: var(--red-600); }
.ci-step .q { min-width: 24px; text-align: center; font-size: 14px; font-weight: 800; color: var(--ink); }

/* footer keranjang */
.cd-foot { padding: 10px 14px 14px; border-top: 1px solid var(--line); background: #fbfcfe; }
.cd-grand { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 2px 10px; }
.cd-grand span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.cd-grand b { font-size: 21px; font-weight: 800; color: var(--ink); }
.cd-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.btn-pay {
  background: linear-gradient(135deg, #1b357c, #1e3a8a); color: #fff;
}
.btn-pay:hover { filter: brightness(1.15); }
.btn-save { background: #fff; color: var(--navy-700); border: 1.5px solid #b9c4e8; }
.btn-save svg { width: 17px; height: 17px; }
.btn-save-dark { background: linear-gradient(135deg, #1c2b7e, #2f57c9); color: #fff; }
.cd-actions .btn { min-height: 48px; }
.cd-actions .btn svg { width: 18px; height: 18px; }

/* --- Ringkasan di sheet pembayaran / simpan --- */
.co-sum { background: #f4f6fc; border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.co-sum-line { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--ink-2); }
.co-sum-line b { color: var(--ink); font-size: 15px; }
.co-sum-line.sub b { font-size: 13px; font-weight: 600; }
.co-sum-line .lunas { color: var(--green-600); font-size: 14px; }
.co-sum-line .kurang { color: var(--red-600); font-size: 13.5px; }
.quick-pay {
  margin-top: 8px; background: var(--blue-100); border: 0; color: var(--navy-700);
  font-weight: 700; font-size: 12.5px; padding: 7px 12px; border-radius: 10px; cursor: pointer;
}
.quick-pay:active { filter: brightness(0.96); }

/* --- Catatan sheet simpan pesanan --- */
.save-note {
  background: var(--amber-100); border: 1px solid #f2dfb4; color: #7a5a10;
  border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.5; margin-bottom: 14px;
}
.save-note b { color: #5c4207; }

/* --- Overlay scan kamera --- */
.scan-overlay { position: fixed; inset: 0; z-index: 400; background: #060913; visibility: hidden; opacity: 0; transition: opacity 0.18s ease; }
.scan-overlay.open { visibility: visible; opacity: 1; }
.scan-overlay video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-ui { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; }
.scan-toprow { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 18px 18px; }
.scan-round {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(6px); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.scan-round svg { width: 21px; height: 21px; }
.scan-round.on { color: #ffd24a; }
.scan-zone { position: relative; width: min(76vw, 300px); height: min(76vw, 300px); margin-top: 34px; }
.scan-zone .c { position: absolute; width: 42px; height: 42px; border: 4px solid #fff; border-radius: 12px; }
.scan-zone .c.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 16px 0 0 0; }
.scan-zone .c.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 16px 0 0; }
.scan-zone .c.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 16px; }
.scan-zone .c.br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 16px 0; }
.scan-beam {
  position: absolute; left: 8%; right: 8%; height: 2px; top: 12%;
  background: linear-gradient(90deg, transparent, #4fd1ff, #4fd1ff, transparent);
  box-shadow: 0 0 14px 2px rgba(79, 209, 255, 0.65);
  animation: beam 2s ease-in-out infinite alternate;
}
@keyframes beam { from { top: 12%; } to { top: 86%; } }
.scan-hint { text-align: center; color: #e6ecff; font-size: 14.5px; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); max-width: 320px; line-height: 1.5; }
.scan-manual {
  background: rgba(255, 255, 255, 0.16); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px); border-radius: 999px; padding: 12px 22px;
}
.scan-manual svg { width: 16px; height: 16px; }
.scan-unsup { text-align: center; color: #fff; max-width: 320px; padding: 18px; background: rgba(255, 255, 255, 0.1); border-radius: 16px; }
.scan-unsup .t { font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.scan-unsup .s { font-size: 13px; opacity: 0.85; line-height: 1.5; }

/* layar sangat sempit: perkecil kartu produk */
@media (max-width: 360px) {
  .pgrid2 { gap: 9px; }
  .ptile2 .meta { padding: 7px 8px 9px; }
  .ptile2 .nm { font-size: 12px; }
  .ptile2 .price { font-size: 14px; }
  .ptile2 .stline { font-size: 10.5px; }
  .ci-th { width: 38px; height: 38px; }
  .cd-head { padding: 10px 11px; }
  .cd-foot { padding: 9px 11px 12px; }
  .cd-list { padding: 2px 11px; }
}

/* ============================================================
   Modal Pembayaran (POS) — popup tengah layar + backdrop blur
   ============================================================ */
.pay-overlay {
  position: fixed; inset: 0; z-index: 280;
  background: rgba(10, 15, 38, 0.55);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  visibility: hidden; opacity: 0; transition: opacity 0.2s ease;
}
.pay-overlay.open { visibility: visible; opacity: 1; }
.pay-card {
  width: 100%; max-width: 400px; max-height: 90vh; overflow-y: auto;
  background: #fff; border-radius: 22px; padding: 18px 18px 16px;
  box-shadow: 0 30px 80px rgba(6, 10, 30, 0.45);
  transform: translateY(16px) scale(0.96); transition: transform 0.22s ease;
}
.pay-overlay.open .pay-card { transform: translateY(0) scale(1); }
.pay-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pay-head h3 { font-size: 18px; font-weight: 800; color: var(--ink); }
.pay-x {
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: #eef0f6; color: var(--ink-2); display: flex; align-items: center; justify-content: center;
}
.pay-x:active { background: #e2e5ef; }
.pay-x svg { width: 15px; height: 15px; }

/* Total belanja — besar di tengah atas */
.pay-total {
  text-align: center; color: #fff; border-radius: 18px; padding: 18px 14px 15px;
  background: linear-gradient(135deg, #1b357c, #1e3a8a 55%, #2f57c9);
  box-shadow: 0 10px 24px rgba(23, 36, 107, 0.35); margin-bottom: 14px;
}
.pay-total .l { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; opacity: 0.85; }
.pay-total .v { font-size: 32px; font-weight: 800; letter-spacing: 0.3px; margin: 3px 0 1px; line-height: 1.15; }
.pay-total .s { font-size: 12px; font-weight: 600; opacity: 0.75; }

/* Blok formulir modal */
.pay-block { margin-bottom: 14px; }
.pay-block > label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.pay-block select {
  width: 100%; padding: 11px 12px; border: 1.5px solid var(--line-2); border-radius: 12px;
  background: #fff; color: var(--ink); font-weight: 600; font-size: 14.5px;
}
.pay-block select:focus { outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 3px rgba(74, 118, 224, 0.12); }
.pay-block input[type=number] {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: 14px;
  font-size: 22px; font-weight: 800; color: var(--ink); text-align: right; letter-spacing: 0.4px;
  background: #fbfcff;
}
.pay-block input[type=number]:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(74, 118, 224, 0.14); }

/* Pilihan metode pembayaran */
.pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pay-methods .pm {
  border: 1.5px solid var(--line-2); background: #fff; border-radius: 14px; padding: 11px 6px 9px;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px;
  color: var(--ink-2); transition: all 0.12s;
}
.pay-methods .pm:active { transform: scale(0.97); }
.pay-methods .pm .pm-ico {
  width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: #eef1fa; color: var(--navy-700);
}
.pay-methods .pm .pm-ico svg { width: 20px; height: 20px; }
.pay-methods .pm .pm-t { font-size: 12.5px; font-weight: 800; }
.pay-methods .pm.active {
  background: linear-gradient(135deg, #1b357c, #1e3a8a); border-color: transparent; color: #fff;
  box-shadow: 0 8px 18px rgba(23, 36, 107, 0.32);
}
.pay-methods .pm.active .pm-ico { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* Nominal cepat */
.pay-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.pay-quick .qp {
  border: 1.5px solid var(--line-2); background: #fff; color: var(--ink-2);
  border-radius: 999px; padding: 9px 15px; font-size: 13px; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: all 0.12s;
}
.pay-quick .qp:active { transform: scale(0.96); background: #f0f2fa; }
.pay-quick .qp svg { width: 14px; height: 14px; }
.pay-quick .qp.exact {
  background: var(--blue-100); border-color: transparent; color: var(--navy-700);
}

/* Kembalian */
.pay-change {
  display: flex; align-items: center; justify-content: space-between;
  background: #f6f8fd; border-radius: 14px; padding: 12px 14px; margin-bottom: 4px;
}
.pay-change span { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.pay-change b { font-size: 20px; font-weight: 800; }
.pay-change b.ok { color: var(--green-600); }
.pay-change b.lack { color: var(--red-600); font-size: 16px; }

/* Layar sangat kecil */
@media (max-width: 380px) {
  .pay-card { padding: 15px 13px 13px; }
  .pay-total .v { font-size: 27px; }
  .pay-methods { gap: 6px; }
  .pay-methods .pm { padding: 9px 4px 8px; }
  .pay-quick .qp { padding: 8px 12px; font-size: 12.5px; }
}

/* ============================================================
   Modal "Transaksi Berhasil" (setelah Konfirmasi Pembayaran)
   ============================================================ */
.succ-card { padding: 16px 16px 14px; }
.succ-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.succ-title { font-size: 17px; font-weight: 800; color: var(--green-600); }
.succ-scroll { overflow-y: auto; max-height: 56vh; padding: 2px 2px 0; }
.succ-shop { font-size: 22px; font-weight: 800; text-align: center; color: #111827; margin: 6px 0 2px; word-break: break-word; }
.succ-sub { font-size: 13px; color: #6b7280; text-align: center; line-height: 1.55; }
.succ-div { border-top: 1.5px dashed #d4d7e6; margin: 13px 0; }
.succ-item { margin-bottom: 12px; }
.succ-item:last-of-type { margin-bottom: 0; }
.succ-line { display: flex; align-items: baseline; gap: 6px; }
.succ-nm { font-size: 14px; font-weight: 600; color: #111827; line-height: 1.35; word-break: break-word; overflow-wrap: anywhere; }
.succ-dots { flex: 1; min-width: 14px; border-bottom: 1.5px dotted #cfd3e3; transform: translateY(-3px); }
.succ-line b { font-size: 14px; font-weight: 800; color: #111827; white-space: nowrap; }
.succ-qty { font-size: 12.5px; color: #6b7280; margin-top: 2px; }
.succ-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.succ-total span { font-size: 17px; font-weight: 800; color: #111827; }
.succ-total b { font-size: 22px; font-weight: 800; color: #111827; line-height: 1.25; }
.succ-meta { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13.5px; gap: 10px; }
.succ-meta span { color: #6b7280; }
.succ-meta b { font-weight: 700; color: #111827; white-space: nowrap; }
.succ-thanks { text-align: center; font-size: 12.5px; color: #9ca3af; margin-top: 14px; }
.succ-actions { display: flex; gap: 12px; margin-top: 14px; justify-content: center; }
.succ-btn {
  flex: 0 0 auto; width: 72px; display: flex; align-items: center; justify-content: center; padding: 0;
  height: 48px; border-radius: 12px; font-size: 13px; font-weight: 800; cursor: pointer;
  transition: transform 0.1s; -webkit-tap-highlight-color: transparent;
}
.succ-btn svg { width: 22px; height: 22px; flex: none; }
.succ-btn.blue { background: linear-gradient(135deg, #1b357c, #1e3a8a 55%, #2f57c9); color: #fff; border: 0; box-shadow: 0 6px 16px rgba(23, 36, 107, 0.3); }
.succ-btn.outline { background: #fff; color: var(--navy-700); border: 1.5px solid var(--navy-600); }
.succ-btn:active { transform: scale(0.96); }
@media (max-width: 380px) {
  .succ-actions { gap: 10px; }
  .succ-btn { width: 64px; height: 46px; }
  .succ-btn svg { width: 20px; height: 20px; }
  .succ-shop { font-size: 19px; }
  .succ-total b { font-size: 19px; }
}

/* ============================================================
   Field Barcode produk (halaman Produk)
   ============================================================ */
.lblreq { color: var(--red-600); }
.bcode-row { position: relative; }
.bcode-row input { padding-right: 52px; }
.bscan-btn {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 11px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #1e3a8a, #2d5ab8); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(35, 58, 148, 0.3);
}
.bscan-btn:active { transform: translateY(-50%) scale(0.92); }
.bscan-btn svg { width: 20px; height: 20px; }

/* ============================================================
   Stat-card compact — Dasbor (Keuntungan & Transaksi)
   ============================================================ */
.stat-card.stat-sm { padding: 11px 12px 10px; }
.stat-card.stat-sm .head { gap: 6px; margin-bottom: 1px; }
.stat-card.stat-sm .ico { width: 19px; height: 19px; border-radius: 6px; }
.stat-card.stat-sm .ico svg { width: 19px; height: 19px; }
.stat-card.stat-sm .label { font-size: 12px; }
.stat-card.stat-sm .value { font-size: 16px; margin: 1px 0 0; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-card.stat-sm .sub { font-size: 10px; line-height: 1.3; margin-top: 0; }
/* Hijau tua utk teks label & nominal Card Keuntungan (override warna dasar stat-card.green) */
.stat-card.green.stat-sm .label,
.stat-card.green.stat-sm .value { color: #065f46; }

/* ============================================================
   Omzet (Dasbor) — ikon dompet outline tipis tanpa lingkaran
   Tinggi card dipangkas 1 Okt 2026 (permintaan user): padding
   22px → 16px 20px, jarak head → nominal dirapatkan → 124px.
   Padding inline di dashboard.php SUDAH DIHAPUS (dulu padding:22px).
   ============================================================ */
.stat-card.hero.omzet-hero { padding: 16px 20px 15px; }
.stat-card.hero.omzet-hero .head { margin-bottom: 6px; }
.stat-card.hero.omzet-hero .value { margin: 2px 0 1px; }
.stat-card.hero.omzet-hero .ico { background: transparent; border-radius: 0; }
.stat-card.hero.omzet-hero .ico svg { color: #fff; stroke: #fff; }

/* ============================================================
   Riwayat Penjualan — header summary, filter periode/tanggal,
   list transaksi baru (box tanggal kuning 64px)
   ============================================================ */

/* --- 1. Header summary: 2 kartu putih berdampingan --- */
.psum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.psum-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; box-shadow: var(--shadow-sm); min-width: 0;
}
.ps-m + .ps-m { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--line); }
.ps-l { font-size: 11px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.2px; line-height: 1.35; }
.ps-v {
  font-size: 17px; font-weight: 800; color: #111827; margin-top: 2px;
  letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ps-v.grn { color: #10b981; }

/* --- 2. Filter periode + tanggal (select border, bg putih) --- */
.flt-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px; }
.flt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.flt > label { font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: 0.3px; }
.flt select, .flt input[type=date] {
  width: 100%; min-width: 0; height: 46px; padding: 0 12px;
  background: #fff; border: 1.5px solid var(--line-2); border-radius: 12px;
  font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.flt select:focus, .flt input[type=date]:focus {
  outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 3px rgba(74, 118, 224, 0.12);
}
.flt-cap { font-size: 12px; font-weight: 600; color: var(--ink-3); margin: 10px 2px 2px; }

/* --- 3. Item transaksi: box tanggal | info | total --- */
.tl-item {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 12px; box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform 0.1s, background 0.12s;
}
.tl-item:active { transform: scale(0.99); background: #fbfcff; }
.tl-date {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px;
  background: #facc15; color: #111827; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.tl-date .d { font-size: 24px; font-weight: 700; line-height: 1; }
.tl-date .my { font-size: 14px; font-weight: 600; letter-spacing: 0.3px; line-height: 1; margin-top: 3px; text-transform: uppercase; }
.tl-date .t { font-size: 14px; font-weight: 500; line-height: 1; margin-top: 3px; }
.tl-info { flex: 1; min-width: 0; }
.tl-inv { font-size: 12px; font-weight: 600; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-cnt { font-size: 16px; font-weight: 800; color: #111827; line-height: 1.25; margin-top: 1px; }
.tl-met { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-top: 1px; }
.tl-cash { font-size: 12px; font-weight: 500; color: #6b7280; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-total { flex-shrink: 0; text-align: right; font-size: 16px; font-weight: 800; color: #111827; white-space: nowrap; }

/* Layar sangat sempit: perkecil box tanggal & nominal summary */
@media (max-width: 360px) {
  .psum-grid { gap: 10px; }
  .psum-card { padding: 12px; }
  .ps-v { font-size: 15px; }
  .tl-date { width: 56px; height: 60px; border-radius: 9px; }
  .tl-date .d { font-size: 20px; }
  .tl-date .t { font-size: 13px; }
  .tl-cnt { font-size: 15px; }
  .tl-total { font-size: 15px; }
}

/* ============================================================
   Gudang — WarehouseProductCard (list kartu) + StockAdjustmentModal
   ============================================================ */
.wlist { display: flex; flex-direction: column; }
.wcard {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-sm); margin-bottom: 12px; cursor: pointer;
  transition: transform 0.1s, background 0.12s;
}
.wcard:active { transform: scale(0.99); background: #fbfcff; }
/* Stok habis → seluruh card berlatar merah transparan */
.wcard.out { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.28); }
.wcard.out:active { background: rgba(239, 68, 68, 0.18); }
.wthumb {
  width: 56px; height: 56px; border-radius: 8px; overflow: hidden;
  position: relative; flex: none; background: #eef0f6;
  display: flex; align-items: center; justify-content: center; color: var(--ink-3);
}
.wthumb .ph svg { width: 24px; height: 24px; opacity: 0.55; }
.wthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.winfo { flex: 1; min-width: 0; padding-right: 2px; }
.winfo .nm {
  font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--ink);
  word-break: break-word; overflow-wrap: anywhere;
}
.winfo .wl { font-size: 14px; color: #b8bcc9; margin-top: 3px; line-height: 1.4; }
.wstock {
  width: 60px; height: 60px; border-radius: 12px; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.wstock .v { font-weight: 800; font-size: 22px; line-height: 1; }
.wstock .l { font-size: 10px; font-weight: 700; letter-spacing: 0.8px; margin-top: 3px; }
.wstock.red  { background: #fee2e2; color: #dc2626; } /* stok HABIS (0): badge merah muda, angka/label merah */
.wstock.warn { background: rgba(250, 204, 21, 0.14); color: #a16207; } /* 0 < stok < 5: badge kuning TRANSPARAN (tipis), angka/label kuning tua */
.wstock.ok   { background: #dcfce7; color: #16a34a; } /* stok >= 5: badge hijau muda, angka/label hijau */

/* --- StockAdjustmentModal (bottom sheet) --- */
.wadj-head {
  display: flex; align-items: center; gap: 12px; background: #f4f6fc;
  border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 16px;
}
.wadj-thumb {
  width: 48px; height: 48px; border-radius: 10px; overflow: hidden; position: relative; flex: none;
  background: #fff; display: flex; align-items: center; justify-content: center; color: var(--ink-3);
  border: 1px solid var(--line);
}
.wadj-thumb .ph svg { width: 22px; height: 22px; opacity: 0.55; }
.wadj-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wadj-meta { flex: 1; min-width: 0; }
.wadj-meta .t { font-weight: 700; font-size: 15.5px; line-height: 1.35; word-break: break-word; overflow-wrap: anywhere; }
.wadj-meta .s { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.wadj-meta .s b { color: var(--navy-700); }
.wadj-prev {
  display: flex; align-items: center; gap: 10px; background: #fbfcfe;
  border: 1.5px dashed var(--line-2); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px;
}
.wadj-net { font-weight: 800; font-size: 17px; white-space: nowrap; }
.wadj-net.up { color: var(--green-600); }
.wadj-net.dn { color: var(--red-600); }
.wadj-to { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.wadj-reset {
  width: 30px; height: 30px; border-radius: 9px; border: 0; flex: none; cursor: pointer;
  background: var(--red-100); color: var(--red-600);
  display: flex; align-items: center; justify-content: center;
}
.wadj-reset svg { width: 15px; height: 15px; }
.wadj-row { margin-bottom: 16px; }
.wadj-row > label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.wadj-inputs { display: flex; gap: 10px; }
.wadj-inputs input {
  flex: 1; min-width: 0; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: 12px;
  background: #fff; color: var(--ink); font-weight: 600; font-size: 16px;
}
.wadj-inputs input:focus { outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 3px rgba(74, 118, 224, 0.12); }
.wadj-btn {
  width: 50px; height: 50px; border-radius: 14px; border: 0; color: #fff; flex: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(20, 30, 70, 0.14); transition: transform 0.1s;
}
.wadj-btn:active { transform: scale(0.94); }
.wadj-btn svg { width: 22px; height: 22px; }
.wadj-btn.up { background: linear-gradient(135deg, #2f9e6f, #38b57f); }
.wadj-btn.dn { background: linear-gradient(135deg, #d74444, #e05555); }
.wadj-row + .field { margin-top: 2px; }

/* ============================================================
   Laporan — periode Bulanan + tab Tahunan
   ============================================================ */
/* Utility (mirip Tailwind): 1 kolom penuh / 2 kolom berdampingan + jarak antar kartu */
.grid-cols-1 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gap-3 { gap: 12px; }

/* Tab Bulanan/Tahunan (pakai .seg) */
.lr-tabs { margin-bottom: 14px; }

/* Dropdown pilih periode */
.lr-pick { display: flex; flex-direction: column; gap: 6px; max-width: 320px; margin-bottom: 18px; }
.lr-pick label { font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: 0.3px; }
.lr-pick select {
  width: 100%; height: 46px; padding: 0 12px; background: #fff;
  border: 1.5px solid var(--line-2); border-radius: 12px;
  font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.lr-pick select:focus { outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 3px rgba(74, 118, 224, 0.12); }

/* Ringkasan laporan — baris 1: Omset full width; baris 2: Keuntungan Bersih + Transaksi */
.lr-cards { display: flex; flex-direction: column; gap: 12px; }

/* Card 1 — Omset: full width, bg #1E3A8A (biru dongker) */
.lr-hero {
  display: flex; flex-direction: column; min-width: 0;
  background: #1e3a8a; border-radius: 16px; padding: 20px; color: #fff;
  box-shadow: var(--shadow-sm);
}
.lr-hero .lr-head {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  margin-bottom: 8px;
}
.lr-hero .lr-ico {
  flex: none; display: flex; align-items: center; justify-content: center;
}
.lr-hero .lr-ico svg { width: 20px; height: 20px; }
.lr-hero .lr-cap {
  font-size: 14px; font-weight: 500; color: #fff;
  line-height: 1.3; min-width: 0; overflow-wrap: break-word;
}
.lr-hero .lr-valrow { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.lr-hero .lr-cur { font-size: 18px; font-weight: 500; color: #fff; }
.lr-hero .lr-num {
  font-size: 24px; font-weight: 700; color: #fff; line-height: 1.25;
  letter-spacing: -0.3px; overflow-wrap: anywhere;
}

/* Card 2 & 3 — tile putih: bg putih, border #E5E7EB, rounded-xl, padding 16px */
.lr-tile {
  display: flex; flex-direction: column; min-width: 0;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px;
}
.lr-tile .lr-head {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  margin-bottom: 8px;
}
.lr-tile .lr-ico {
  flex: none; display: flex; align-items: center; justify-content: center;
}
.lr-tile .lr-ico svg { width: 16px; height: 16px; }
.lr-tile .lr-cap {
  font-size: 14px; font-weight: 400; color: #6b7280; line-height: 1.35;
  overflow-wrap: break-word; min-width: 0;
}
.lr-tile .lr-valrow { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.lr-tile .lr-cur { font-size: 18px; font-weight: 500; }
.lr-tile .lr-num { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.3px; overflow-wrap: anywhere; }
.lr-tile.profit .lr-ico { color: #16a34a; }
.lr-tile.profit .lr-cur, .lr-tile.profit .lr-num { color: #16a34a; }
.lr-tile.trx .lr-ico { color: #6b7280; }
.lr-tile.trx .lr-num { color: #111827; }

/* Grafik batang tren (batang = hari/bulan yang punya penjualan) */
.lr-chart-card { padding: 18px 12px 14px; }
.lr-chart { display: flex; align-items: flex-end; gap: 6px; height: 158px; }
.lr-col {
  flex: 1; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 6px;
}
.lr-bar {
  width: 100%; max-width: 42px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #233a94, #2f57c9);
}
.lr-day { font-size: 10.5px; font-weight: 700; color: var(--ink-3); line-height: 1; }

/* List produk terlaris */
.lr-list { padding-top: 6px; padding-bottom: 6px; }
.lr-prod {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.lr-prod:last-child { border-bottom: 0; }
.lr-rank {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: #eef0f6; color: var(--ink-2);
  font-size: 11.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.lr-prod:first-child .lr-rank { background: var(--navy-700); color: #fff; }
.lr-pname {
  flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; color: var(--ink);
  word-break: break-word; overflow-wrap: anywhere; line-height: 1.35;
}
.lr-pmeta { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.lr-pmeta b { font-size: 13px; color: #111827; white-space: nowrap; }
.lr-pmeta span { font-size: 11.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }

/* Produk terlaris: judul + chip LIVE + tombol "Lihat semua".
   Chip LIVE menandakan daftar ini dibaca langsung dari transaksi & ikut
   berubah sendiri tanpa reload (lihat lrLiveTick() di laporan.php). */
.lr-head-row { display: flex; align-items: center; gap: 10px; }
.lr-head-row .section-title { margin: 22px 0 10px; flex: 1; min-width: 0; }
.lr-live {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.4px;
  color: #15803d; background: rgba(16, 185, 129, 0.13);
  border: 1px solid rgba(16, 185, 129, 0.28);
  padding: 3px 8px; border-radius: 999px;
}
.lr-live .lr-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #16a34a;
  animation: lrPulse 2s ease-in-out infinite;
}
@keyframes lrPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.lr-live.upd { animation: lrFlash 1.1s ease-out; }
@keyframes lrFlash {
  0%   { background: #16a34a; color: #fff; border-color: #16a34a; }
  100% { background: rgba(16, 185, 129, 0.13); color: #15803d; border-color: rgba(16, 185, 129, 0.28); }
}

/* Pencarian nama produk di dalam section Produk Terlaris (Laporan).
   Rounded-full, gaya sama dengan search bar halaman Gudang. */
.lr-search {
  display: flex; align-items: center; gap: 8px; background: #fff;
  border: 1.5px solid var(--line-2); border-radius: 999px;
  padding: 0 16px; height: 46px; margin: 0 0 10px;
}
.lr-search input { border: none; outline: none; flex: 1; font-weight: 500; padding: 0; background: transparent; font-size: 15px; }
.lr-search svg { color: var(--ink-3); width: 20px; height: 20px; flex: none; }
/* Info jumlah hasil — hanya tampil saat pencarian aktif (di-toggle `hidden`). */
.lr-count { font-size: 12.5px; color: #6b7280; margin: 0 2px 8px; }
.lr-count[hidden] { display: none; }

.lr-more {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 4px; padding: 11px;
  background: var(--blue-50, #eef4ff); color: #2563eb;
  border: 1.5px dashed #93b4f5; border-radius: 12px;
  font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.lr-more svg { width: 18px; height: 18px; }
.lr-more:active { background: #e2ecff; }
/* Satu baris Produk Terlaris yang baru masuk → kilat hijau singkat. */
.lr-prod.changed { animation: lrRowIn 1.4s ease-out; }
@keyframes lrRowIn {
  0%   { background: rgba(16, 185, 129, 0.18); }
  100% { background: transparent; }
}

/* Layar sangat sempit: kartu ringkas tetap muat */
@media (max-width: 370px) {
  .lr-hero { padding: 16px; }
  .lr-hero .lr-num { font-size: 21px; }
  .lr-tile { padding: 12px; }
  .lr-tile .lr-cap { font-size: 13px; }
  .lr-tile .lr-num { font-size: 18px; }
  .lr-prod { gap: 9px; }
  .lr-pname { font-size: 13.5px; }
}

/* ----- Halaman Karyawan: hak akses menu (checkbox) & chips ringkas ----- */
.perm-line { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.perm-chip {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--blue-100); color: var(--blue-500); white-space: nowrap;
}
.perm-chip.none { background: #eef0f6; color: var(--ink-3); font-weight: 600; }

.perm-sec { margin: 2px 0 16px; }
.perm-sec-title { font-size: 14px; font-weight: 700; color: var(--ink-2); margin-bottom: 3px; }
.perm-sec-sub { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; line-height: 1.45; }
.perm-row {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px; margin-bottom: 8px;
  background: #f6f7fc; border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer; user-select: none;
}
.perm-row:active { background: #eef0f6; }
.perm-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.perm-row .perm-box {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  border: 1.5px solid var(--line-2); background: #fff; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.perm-row .perm-box svg { width: 13px; height: 13px; display: none; }
.perm-row input:checked + .perm-box { background: var(--navy-700); border-color: var(--navy-700); }
.perm-row input:checked + .perm-box svg { display: block; }
.perm-row .perm-lbl { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }

/* Halaman Produk: mode read-only utk Karyawan (kartu tidak bisa diklik) */
.pcard.readonly { cursor: default; }
.pcard.readonly:active { transform: none; box-shadow: var(--shadow-sm); }

/* ============================================================
   Riwayat Tambah Stok (halaman stok) — pill + search + bulan + list
   ============================================================ */
.stk-title { font-size: 20px; font-weight: 800; color: var(--ink); margin: 4px 0 12px; }
.stk-pills { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
.stk-pills::-webkit-scrollbar { display: none; }
.stk-pill {
  padding: 8px 16px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line-2);
  font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; cursor: pointer;
}
.stk-pill.active { background: #1e3a8a; border-color: #1e3a8a; color: #fff; box-shadow: 0 4px 12px rgba(30,58,138,.28); } /* blue-900 */
.stk-tools { display: flex; gap: 10px; margin-bottom: 12px; }
.stk-search {
  flex: 1; display: flex; align-items: center; gap: 8px; background: #fff;
  border: 1.5px solid var(--line-2); border-radius: 999px; padding: 0 14px; height: 44px; min-width: 0;
}
.stk-search input { border: none; outline: none; flex: 1; font-weight: 500; padding: 0; background: transparent; font-size: 14px; min-width: 0; }
.stk-search svg { color: var(--ink-3); width: 18px; height: 18px; flex: none; }
.stk-tools select {
  max-width: 178px; padding: 0 30px 0 13px; border: 1.5px solid var(--line-2); border-radius: 999px;
  background: #fff; color: var(--ink); font-weight: 600; font-size: 13px; height: 44px; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a90a8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.stk-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 2px 12px; flex-wrap: wrap; }
.stk-meta .per { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.stk-meta .per b { color: var(--ink-2); }
.stk-meta .tot { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.stk-meta .tot b { color: var(--navy-700); font-size: 13px; }
.stk-list { display: flex; flex-direction: column; gap: 10px; }
.stk-item {
  display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 13px 14px; box-shadow: var(--shadow-sm);
}
.stk-ico {
  flex: none; width: 42px; height: 42px; border-radius: 13px;
  background: var(--green-100); color: var(--green-600);
  display: flex; align-items: center; justify-content: center;
}
.stk-ico svg { width: 20px; height: 20px; }
.stk-info { flex: 1; min-width: 0; }
.stk-nm { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.35; word-break: break-word; overflow-wrap: anywhere; }
.stk-dt { font-size: 12px; color: var(--ink-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk-qty {
  flex: none; font-size: 13px; font-weight: 800; color: var(--green-600);
  background: var(--green-100); border-radius: 999px; padding: 6px 12px; white-space: nowrap;
}
@media (max-width: 380px) {
  .stk-tools { flex-direction: column; }
  .stk-tools select { max-width: none; width: 100%; }
}
/* Status printer Bluetooth di modal Transaksi Berhasil */
.succ-bt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding: 8px 12px; background: #f6f8fd; border-radius: 10px;
}
.succ-bt span { font-size: 12px; color: var(--ink-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.succ-bt a { font-size: 12px; font-weight: 700; color: var(--navy-600); text-decoration: none; flex: none; }
.succ-bt a:hover { text-decoration: underline; }

/* ============================================================
   Manajemen Toko (toko.php) — action icon buttons + dashed add
   ============================================================ */
.toko-act-row { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.toko-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; flex: none; cursor: pointer;
  background: #fff; border: 1px solid #d1d5db; border-radius: 8px; color: #4b5563;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
}
.toko-act svg { width: 16px; height: 16px; display: block; }
.toko-act:active { transform: scale(0.94); }
.toko-act:hover { background: #f3f4f6; }
.toko-act:disabled { opacity: 0.45; cursor: not-allowed; }
.toko-act-del { border-color: #fca5a5; color: #ef4444; }
.toko-act-del:hover { background: #fef2f2; border-color: #f87171; }
.toko-act-row .toko-act-pakai { flex: none; }
.toko-act-row .toko-act-pakai svg { width: 15px; height: 15px; }

/* Tombol "Tambah Toko Baru" — outline putus-putus tipis (bukan filled) */
.store-add-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px; margin-top: 2px;
  background: #eff6ff; border: 2px dashed #60a5fa; border-radius: 12px;
  color: #2563eb; font-weight: 600; font-size: 15px; cursor: pointer; line-height: 1.3;
  transition: background 0.12s, border-color 0.12s;
}
.store-add-btn svg { width: 20px; height: 20px; flex: none; }
.store-add-btn:active { transform: scale(0.99); }
.store-add-btn:hover { background: #dbeafe; border-color: #3b82f6; }

/* ============================================================
   Manajemen Toko — layout 2 kolom + nama toko tidak terpotong
   (overrides .row-card .t yang global nowrap/ellipsis)
   ============================================================ */
.toko-row { align-items: center; }

/* Kolom kiri: icon + info, flex-1 min-w-0 supaya bisa melebar */
.toko-main { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.toko-avatar { flex: 0 0 auto; }
#tokoList .toko-info { flex: 1 1 auto; min-width: 0; padding-right: 8px; }

/* Nama toko: WAJIB wrap, tanpa truncate/ellipsis (spec user) */
#tokoList .toko-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
  line-height: 1.45;
}
#tokoList .toko-badge { display: inline-block; margin-left: 6px; vertical-align: middle; }

/* Baris telepon/alamat: boleh 1 baris + ellipsis bila panjang */
#tokoList .toko-sub {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}

/* Kolom kanan: group tombol fix, tidak ikut menyempit */
.toko-row .toko-act-row { flex: 0 0 auto; margin-left: 0; }

/* ============================================================
   Manajemen Pengguna (owner-only) — tabel langganan + kartu WhatsApp
   ============================================================ */
.us-wa {
  display: flex; gap: 12px; align-items: flex-start; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px;
  box-shadow: var(--shadow-sm); margin-bottom: 14px;
}
.us-wa-ico {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: var(--green-100); color: var(--green-600);
  display: flex; align-items: center; justify-content: center;
}
.us-wa-ico svg { width: 20px; height: 20px; }
.us-wa-body { flex: 1; min-width: 0; }
.us-wa-t { font-size: 14px; font-weight: 700; color: var(--ink); }
.us-wa-s { font-size: 12px; color: var(--ink-3); margin: 3px 0 10px; line-height: 1.5; }
.us-wa-form { display: flex; gap: 8px; }
.us-wa-form input {
  flex: 1; min-width: 0; padding: 10px 12px; border: 1.5px solid var(--line-2);
  border-radius: 10px; font-weight: 600;
}
.us-wa-form input:focus { outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 3px rgba(74,118,224,0.12); }
.us-wa-form .btn { flex: none; }
.us-sum { font-size: 13px; color: var(--ink-2); margin: 0 0 10px; }
/* Tabel 6 kolom → bisa digeser horizontal di HP (jangan dipaksa muat layar) */
.us-tablewrap { overflow-x: auto; }
.us-table { min-width: 720px; }
/* Kolom Email: 2 baris — nama pengguna (tebal) + email — dan TIDAK boleh
   terpotong jadi banyak baris. min-width 180px + word-break: break-all (spec user):
   email panjang tetap muat 1 baris, bukan turun jadi 5 baris. */
.us-table th.us-em, .us-table td.us-em { min-width: 180px; }
.us-table td.us-em { font-weight: 400; color: var(--ink-2); }
.us-em-nama {
  display: block; font-size: 14px; font-weight: 700; color: var(--ink);
  line-height: 1.35; margin-bottom: 2px; word-break: break-word;
}
.us-em-mail {
  display: block; font-size: 12px; font-weight: 400; color: #6b7280;
  line-height: 1.35; word-break: break-all;
}
.us-table td.us-toko { color: var(--ink-2); overflow-wrap: anywhere; }
.us-due { white-space: nowrap; font-weight: 600; }
.us-due.off { color: var(--red-600); }
/* 2 info kecil di bawah badge Status: "Terakhir aktif" & "Transaksi bulan ini".
   Dimuat dari tabel stores (lihat store_touch_active() di lib/helpers.php).
   nowrap: kolom Status memang sempit, tanpa ini teksnya pecah jadi 3 baris. */
.us-act { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.us-ai { font-size: 11px; line-height: 1.45; color: var(--ink-3); white-space: nowrap; }
.us-ai .us-ai-k { font-weight: 600; color: var(--ink-2); }
.us-ai.off, .us-ai.off .us-ai-k { color: var(--red-600); }
.us-acts { display: flex; flex-direction: column; gap: 6px; }
.us-acts .us-act { white-space: nowrap; }
/* Kolom "Tgl Bergabung": "17 Sep 2026, 17:57 WIB" — satu baris, tidak boleh pecah
   (format tanggal + jam memang pendek; nowrap menjaga tinggi baris tetap 1). */
.us-table th.us-join, .us-table td.us-join { min-width: 150px; }
.us-table td.us-join { white-space: nowrap; font-size: 12.5px; color: var(--ink-2); }

/* ============================================================
   Notifikasi Stok Habis — lonceng di header + bottom-sheet
   Dipakai halaman yang set $stock_notif = true (kini: Dasbor).
   Badge merah = jumlah produk dengan stok 0 di outlet aktif.
   ============================================================ */
.notif-btn {
  position: relative; flex: none; margin-left: 10px;
  width: 38px; height: 38px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff; cursor: pointer; transition: background 0.15s;
}
.notif-btn:hover { background: rgba(255, 255, 255, 0.26); }
.notif-btn:active { transform: scale(0.94); }
.notif-btn svg { width: 20px; height: 20px; }
/* Nama toko / dropdown "Pilih Toko" sudah memakai margin-left:auto sendiri */
.store-switch + .notif-btn, .store-static + .notif-btn { margin-left: 2px; }

.notif-badge {
  position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #e11d48; color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
}
.notif-badge[hidden] { display: none; } /* WAJIB: [hidden] tidak berlaku bila display diset sendiri */
.notif-badge.upd { animation: notifPulse 0.9s ease-out; }
@keyframes notifPulse {
  0%   { transform: scale(1.45); box-shadow: 0 0 0 8px rgba(225, 29, 72, 0.35); }
  100% { transform: scale(1);    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30); }
}

.notif-outlet {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--navy-700);
  background: var(--blue-100); border: 1px solid rgba(47, 87, 201, 0.18);
  padding: 9px 12px; border-radius: 12px; margin-bottom: 12px;
}
.notif-outlet svg { width: 16px; height: 16px; flex: none; }
.notif-outlet span { min-width: 0; overflow-wrap: anywhere; }

.notif-list { display: flex; flex-direction: column; gap: 8px; }
.notif-item {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 11px 12px; box-shadow: var(--shadow-sm);
}
.notif-item .ni-ico {
  flex: none; width: 36px; height: 36px; border-radius: 11px;
  background: var(--red-100); color: var(--red-600);
  display: flex; align-items: center; justify-content: center;
}
.notif-item .ni-ico svg { width: 18px; height: 18px; }
.notif-item .ni-txt { flex: 1; min-width: 0; }
.notif-item .ni-nm { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.notif-item .ni-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.notif-item .ni-badge {
  flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase;
  color: var(--red-600); background: var(--red-100); padding: 5px 9px; border-radius: 999px; white-space: nowrap;
}

.notif-empty { text-align: center; padding: 22px 16px 26px; }
.notif-empty .ne-ico {
  width: 58px; height: 58px; border-radius: 999px; margin: 0 auto 12px;
  background: var(--green-100); color: var(--green-600);
  display: flex; align-items: center; justify-content: center;
}
.notif-empty .ne-ico svg { width: 28px; height: 28px; }
.notif-empty .ne-t { font-size: 16px; font-weight: 700; color: var(--ink); }
.notif-empty .ne-s { font-size: 13px; color: var(--ink-3); margin-top: 5px; line-height: 1.5; }

.notif-foot { padding: 12px 18px 18px; border-top: 1px solid var(--line); background: #fff; }
.notif-foot svg { width: 18px; height: 18px; }

/* Ringkasan jumlah produk (halaman Produk) — teks biasa, tanpa box/card.
   Diletakkan di atas daftar produk (di bawah bar search). */
.prod-total {
  font-size: 12.5px; font-weight: 500; color: #6B7280;
  letter-spacing: 0.1px; line-height: 1.4;
  margin: 0 0 10px;
}

/* Penanda harga grosir aktif di baris keranjang (halaman Kasir).
   Muncul otomatis saat qty mencapai Min. Pembelian Grosir. */
.ci-un .ci-gr {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
  text-transform: uppercase; color: #15803d; background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.28); border-radius: 999px;
  padding: 0 6px; margin-right: 4px; vertical-align: 1px;
}

/* ---------- Pusat Bantuan (halaman help.php) — admin/owner only ---------- */
.hp-head {
  display: flex; align-items: center; gap: 14px;
  background: var(--navy-grad); color: #fff;
  border-radius: 16px; padding: 18px; box-shadow: 0 10px 26px rgba(20, 30, 70, 0.20);
}
.hp-head .hp-ico {
  flex: none; width: 48px; height: 48px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  display: flex; align-items: center; justify-content: center;
}
.hp-head .hp-ico svg { width: 26px; height: 26px; }
.hp-head .hp-title { font-size: 19px; font-weight: 800; margin: 0; letter-spacing: 0.2px; }
.hp-head .hp-sub { font-size: 12.5px; line-height: 1.5; margin: 4px 0 0; color: rgba(255, 255, 255, 0.85); }

.hp-faq { display: flex; flex-direction: column; gap: 10px; }
.hp-item {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.hp-item.open { border-color: rgba(47, 87, 201, 0.35); }
.hp-q {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: transparent; border: 0; padding: 14px 14px;
  text-align: left; cursor: pointer; font-family: inherit;
}
.hp-q .hp-q-t { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.hp-q .hp-q-i {
  flex: none; width: 26px; height: 26px; border-radius: 999px;
  background: var(--blue-100); color: var(--navy-600);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.22s ease;
}
.hp-q .hp-q-i svg { width: 16px; height: 16px; }
.hp-item.open .hp-q .hp-q-i { transform: rotate(180deg); }
.hp-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.hp-a-in {
  padding: 0 14px 15px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2);
  border-top: 1px solid var(--line); padding-top: 12px;
}
.hp-a-in b { color: var(--ink); }

.hp-contact .hp-note {
  font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
  margin: 0 0 14px;
}
.hp-contact .hp-btn { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.hp-contact .hp-btn svg { width: 18px; height: 18px; }

/* ============================================================
   CATAT HUTANG (halaman pages/hutang.php) — buku catatan hutang/piutang.
   FITUR TERPISAH dari kasir: halaman ini hanya memakai tabel catatan_hutang
   (tidak menyentuh orders/omzet). Semua kelas di-prefix `ht-` supaya tidak
   bertabrakan dengan kelas halaman lain.
   ============================================================ */
.ht-sec {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 18px 2px 10px;
}
.ht-sec > span:first-child { font-size: 14px; font-weight: 800; color: var(--ink); }
.ht-sec .n { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }

.ht-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); padding: 13px 14px;
}
.ht-card.lunas { background: #f8faf9; border-color: #e0ebe5; }

.ht-top { display: flex; align-items: flex-start; gap: 11px; }
.ht-ico {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  background: var(--amber-100); color: var(--amber-600);
  display: flex; align-items: center; justify-content: center;
}
.ht-ico.piutang { background: var(--blue-100); color: var(--blue-500); }
.ht-ico svg { width: 19px; height: 19px; }
.ht-card.lunas .ht-ico { background: #eef0f6; color: var(--ink-3); }

.ht-info { flex: 1; min-width: 0; }
.ht-nm { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.35; word-break: break-word; overflow-wrap: anywhere; }
.ht-sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.ht-tag { font-weight: 700; }
.ht-tag.hutang { color: var(--amber-600); }
.ht-tag.piutang { color: var(--blue-500); }

.ht-right { flex: none; text-align: right; }
.ht-amt { font-size: 15.5px; font-weight: 800; color: var(--navy-700); white-space: nowrap; }
.ht-card.lunas .ht-amt { color: var(--ink-3); text-decoration: line-through; }
.ht-right .badge-pill { display: inline-block; margin-top: 5px; }

.ht-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 9px; font-size: 12px; color: var(--ink-3); }
.ht-jt { display: inline-flex; align-items: center; gap: 5px; }
.ht-jt svg { width: 13px; height: 13px; }
.ht-jt.due { color: var(--red-600); font-weight: 700; }
.ht-jt.due-soon { color: var(--amber-600); font-weight: 700; }

.ht-note {
  margin-top: 8px; padding: 8px 10px; background: #f7f8fc; border-radius: 10px;
  font-size: 13px; color: var(--ink-2); word-break: break-word; overflow-wrap: anywhere;
}

/* Sisa (muncul hanya bila catatan sudah dibayar sebagian) */
.ht-sisa { font-size: 11px; font-weight: 700; color: var(--green-600); margin-top: 4px; }

/* Kartu catatan = TAUTAN ke halaman Detail (tombol aksi ada di halaman Detail) */
a.ht-card { display: block; cursor: pointer; transition: transform 0.1s; }
a.ht-card:active { transform: scale(0.99); }

.ht-hint { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

@media (max-width: 400px) {
  .ht-ico { width: 34px; height: 34px; }
}

/* ============================================================
   CATAT HUTANG — LANGKAH PILIH BUKU (pages/hutang.php)
   Halaman terpisah dari daftar catatan: menekan menu "Catat Hutang" mendarat
   di daftar buku ini dulu; tiap buku punya catatan & totalnya sendiri.
   ============================================================ */
.bk-sec {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 18px 2px 10px;
}
.bk-sec > span:first-child { font-size: 14px; font-weight: 800; color: var(--ink); }
.bk-sec .n { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }

.bk-row {
  display: flex; align-items: stretch; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); padding: 10px 12px;
}
.bk-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 11px; }
.bk-ico {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  background: var(--amber-100); color: var(--amber-600);
  display: flex; align-items: center; justify-content: center;
}
.bk-ico svg { width: 20px; height: 20px; }
.bk-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.bk-nm {
  font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.35;
  word-break: break-word; overflow-wrap: anywhere;
}
.bk-sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; line-height: 1.4; }
.bk-badge {
  align-self: flex-start; margin-top: 6px;
  font-size: 11px; font-weight: 700; color: var(--amber-600);
  background: var(--amber-100); border-radius: 999px; padding: 3px 9px;
}
.bk-go { flex: none; color: var(--ink-3); display: flex; align-items: center; }
.bk-go svg { width: 18px; height: 18px; }

.bk-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.bk-act {
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
}
.bk-act svg { width: 16px; height: 16px; }
.bk-act.del { border-color: rgba(215, 68, 68, 0.35); color: var(--red-600); }
.bk-act:active { transform: scale(0.95); }

/* Penanda buku yang sedang dibuka (pages/hutang_buku.php) */
.ht-bookbar {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); padding: 10px 13px; margin-bottom: 14px;
}
.ht-bookbar .hb-ico {
  flex: none; width: 36px; height: 36px; border-radius: 11px;
  background: var(--amber-100); color: var(--amber-600);
  display: flex; align-items: center; justify-content: center;
}
.ht-bookbar .hb-ico svg { width: 18px; height: 18px; }
.ht-bookbar .hb-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ht-bookbar .hb-lb { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.ht-bookbar .hb-nm {
  font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3;
  word-break: break-word; overflow-wrap: anywhere;
}
.ht-bookbar .hb-go {
  flex: none; display: inline-flex; align-items: center; gap: 2px;
  font-size: 12.5px; font-weight: 700; color: var(--navy-600);
}
.ht-bookbar .hb-go svg { width: 16px; height: 16px; }

/* Info buku di dalam bottom-sheet catatan */
.ht-bkinfo {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  background: var(--amber-100); border-radius: 10px; padding: 9px 12px;
  font-size: 12.5px; color: var(--amber-600); font-weight: 600;
}
.ht-bkinfo svg { width: 16px; height: 16px; flex: none; }
.ht-bkinfo b { color: #8a5608; }

@media (max-width: 360px) {
  .bk-act { width: 30px; height: 30px; }
  .bk-ico { width: 36px; height: 36px; }
}

/* ============================================================
   DETAIL HUTANG (pages/hutang_detail.php) — sisa, cicilan, riwayat.
   Semua kelas di-prefix `hd-`. Halaman ini yang memegang tombol aksi
   (Terima Pembayaran / Tambah Hutang / menu titik-3), sedangkan daftar
   catatan sengaja dibersihkan dari tombol apa pun.
   ============================================================ */
.hd-bookbar {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); padding: 10px 13px; margin-bottom: 14px;
}
.hd-bookbar .hb-ico {
  flex: none; width: 36px; height: 36px; border-radius: 11px;
  background: var(--amber-100); color: var(--amber-600);
  display: flex; align-items: center; justify-content: center;
}
.hd-bookbar .hb-ico svg { width: 18px; height: 18px; }
.hd-bookbar .hb-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hd-bookbar .hb-lb { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.hd-bookbar .hb-nm { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.hd-bookbar .hb-go { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 700; color: var(--navy-600); }
.hd-bookbar .hb-go svg { width: 16px; height: 16px; }

/* --- Header: nama, total awal, sisa, status (+ menu titik-3) --- */
.hd-head {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 16px 16px 14px;
}
.hd-top { display: flex; align-items: flex-start; gap: 10px; }
.hd-info { flex: 1 1 auto; min-width: 0; }
.hd-lb { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.4px; }
.hd-nm {
  font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1.3; margin-top: 2px;
  word-break: break-word; overflow-wrap: anywhere;
}
.hd-sub { font-size: 12px; color: var(--ink-3); margin-top: 4px; }

.hd-kebab-wrap { position: relative; flex: none; }
.hd-kebab {
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
}
.hd-kebab svg { width: 18px; height: 18px; }
.hd-menu {
  position: absolute; top: 42px; right: 0; z-index: 30; min-width: 196px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(20, 30, 70, 0.18); padding: 6px;
  display: none; flex-direction: column;
}
.hd-menu.open { display: flex; }
.hd-mi {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer;
  border: none; background: none; border-radius: 9px; padding: 10px 11px;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.hd-mi svg { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
.hd-mi:hover { background: #f4f6fb; }
.hd-mi.del { color: var(--red-600); }
.hd-mi.del svg { color: var(--red-600); }

.hd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 15px; }
.hd-cell { background: #f7f8fc; border-radius: 12px; padding: 11px 12px; }
.hd-cl { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.hd-cv { display: block; font-size: 17px; font-weight: 800; color: var(--ink); margin-top: 3px; white-space: nowrap; }
.hd-cv.sisa { color: var(--red-600); }
.hd-cv.sisa.lunas { color: var(--green-600); }

.hd-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hd-paid { font-size: 11.5px; font-weight: 600; color: var(--green-600); }
.hd-due { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 12px; color: var(--ink-3); }
.hd-due svg { width: 13px; height: 13px; }
.hd-due.due { color: var(--red-600); font-weight: 700; }
.hd-due.due-soon { color: var(--amber-600); font-weight: 700; }
.hd-head .ht-note { margin-top: 10px; }

/* --- 2 tombol utama --- */
.hd-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 18px; }
.hd-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  border: none; border-radius: 14px; padding: 15px 10px; cursor: pointer;
  color: #fff; font-size: 13px; font-weight: 800; line-height: 1.25; text-align: center;
  transition: transform 0.1s, filter 0.12s;
}
.hd-btn svg { width: 22px; height: 22px; }
.hd-btn.pay { background: linear-gradient(135deg, #2f9e6f, #38b57f); box-shadow: 0 8px 20px rgba(47,158,111,0.28); }
.hd-btn.add { background: linear-gradient(135deg, #ea7317, #fb923c); box-shadow: 0 8px 20px rgba(234,115,23,0.28); }
.hd-btn:active { transform: scale(0.98); }
.hd-btn:hover { filter: brightness(1.06); }
.hd-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; box-shadow: none; }

/* --- Riwayat pembayaran (timeline) --- */
.hd-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 2px 10px; }
.hd-sec > span:first-child { font-size: 14px; font-weight: 800; color: var(--ink); }
.hd-sec .n { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }

.hd-tl { display: flex; flex-direction: column; gap: 10px; }
.hd-row {
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); padding: 12px 13px 12px 15px;
}
.hd-row::before { /* garis timeline */
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 10px 0 0 10px; background: var(--line-2);
}
.hd-row.bayar::before { background: var(--green-600); }
.hd-row.tambah::before { background: #ea7317; }
.hd-row.awal::before { background: var(--navy-600); }
.hd-dot { display: none; }
.hd-r-main { flex: 1 1 auto; min-width: 0; }
.hd-r-t { font-size: 13px; font-weight: 700; color: var(--ink); }
.hd-r-k { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.hd-r-note {
  display: block; margin-top: 3px; color: var(--ink-2); font-weight: 600;
  word-break: break-word; overflow-wrap: anywhere;
}
.hd-r-right { flex: none; text-align: right; }
.hd-r-amt { font-size: 14.5px; font-weight: 800; white-space: nowrap; }
.hd-row.bayar .hd-r-amt { color: var(--green-600); }
.hd-row.tambah .hd-r-amt { color: #ea7317; }
.hd-row.awal .hd-r-amt { color: var(--navy-700); }
.hd-r-s { font-size: 11px; font-weight: 700; color: var(--ink-3); margin-top: 3px; white-space: nowrap; }
.hd-r-del {
  flex: none; width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-3);
  display: flex; align-items: center; justify-content: center;
}
.hd-r-del svg { width: 14px; height: 14px; }
.hd-r-del:active { transform: scale(0.94); }
.hd-r-del:hover { color: var(--red-600); border-color: rgba(215,68,68,0.35); }

/* --- Sheet pembayaran / tambah hutang --- */
.btn-orange { background: linear-gradient(135deg, #ea7317, #fb923c); color: #fff; }
.btn-orange:hover { filter: brightness(1.08); }
.hd-minfo {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  background: var(--blue-100); border-radius: 10px; padding: 9px 12px;
  font-size: 12.5px; color: var(--navy-700); font-weight: 600;
}
.hd-minfo svg { width: 16px; height: 16px; flex: none; }
.hd-prev {
  background: #f7f8fc; border-radius: 12px; padding: 12px 13px; margin: 4px 0 14px;
  font-size: 13.5px; font-weight: 700; color: var(--ink-2); text-align: center;
}
.hd-prev.ok { background: var(--green-100); color: var(--green-600); }
.hd-prev.or { background: #fdf3e0; color: #a35b06; }

@media (max-width: 360px) {
  .hd-acts { grid-template-columns: 1fr; }
  .hd-nm { font-size: 18px; }
  .hd-cv { font-size: 15.5px; }
}

/* ============================================================
   Banner slider outlet — Dasbor (di bawah card Keuntungan &
   Transaksi). Auto-slide 3 detik loop searah, swipe manual, tanpa dot.
   ============================================================ */
.promo-wrap { margin-top: 18px; }
.promo-slider {
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(20, 30, 70, 0.14);
}
.promo-slider::-webkit-scrollbar { display: none; }
.promo-slider { scrollbar-width: none; -ms-overflow-style: none; }

.promo-slide {
  position: relative; flex: 0 0 100%; width: 100%;
  scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px 13px 16px; min-height: 94px; overflow: hidden;
}
/* Ornamen lembut: lingkaran besar + sorotan sudut, tanpa mengurangi keterbacaan teks */
.promo-slide::before {
  content: ""; position: absolute; right: -46px; top: -56px;
  width: 168px; height: 168px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18); pointer-events: none;
}
.promo-slide::after {
  content: ""; position: absolute; right: 34px; bottom: -70px;
  width: 132px; height: 132px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); pointer-events: none;
}
.promo-body { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }
.promo-title {
  font-size: 18px; font-weight: 800; line-height: 1.2;
  letter-spacing: -0.2px; overflow-wrap: break-word;
}
.promo-sub {
  margin-top: 4px; font-size: 12.5px; font-weight: 600; line-height: 1.35;
  overflow-wrap: break-word;
}
.promo-ico {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.promo-ico svg { width: 23px; height: 23px; }

/* Banner 1 — Merah */
.promo-red { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 55%, #991b1b 100%); }
.promo-red .promo-title { color: #fff; }
.promo-red .promo-sub { color: rgba(255, 255, 255, 0.96); }
.promo-red .promo-ico { background: rgba(255, 255, 255, 0.22); color: #fff; }
/* Banner 2 — Kuning */
.promo-yellow { background: linear-gradient(135deg, #ffd85a 0%, #fbbf24 55%, #f5a623 100%); }
.promo-yellow .promo-title { color: #3d2a00; }
.promo-yellow .promo-sub { color: rgba(61, 42, 0, 0.78); }
.promo-yellow .promo-ico { background: rgba(255, 255, 255, 0.6); color: #8a5200; }
/* Banner 3 — Hijau */
.promo-green { background: linear-gradient(135deg, #6ee7b7 0%, #34d399 55%, #10b981 100%); }
.promo-green .promo-title { color: #033b29; }
.promo-green .promo-sub { color: rgba(3, 59, 41, 0.9); }
.promo-green .promo-ico { background: rgba(255, 255, 255, 0.55); color: #047857; }

@media (max-width: 360px) {
  .promo-slide { padding: 12px 13px 12px 14px; min-height: 88px; gap: 10px; }
  .promo-title { font-size: 17px; }
  .promo-sub { font-size: 12px; margin-top: 3px; }
  .promo-ico { width: 38px; height: 38px; border-radius: 11px; }
  .promo-ico svg { width: 21px; height: 21px; }
}