/* TB. Putra Jaya — component styles
   Sections:
   1. Base reset
   2. Icon helper
   3. Card
   4. Button
   5. SearchBar
   6. Chip
   7. Stepper
   8. StatusChip
   9. MenuTile
  10. Field
  (Task 8 will append shell / nav CSS below this file)
*/

/* ── 1. Base reset ────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--fg1);
  font: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { min-height: 100vh; }

/* Root wrapper applied by App and every screen */
.pj {
  font: var(--body);
  color: var(--fg1);
  -webkit-font-smoothing: antialiased;
}

/* ── 2. Icon helper ───────────────────────────────────────────────────────── */
/* .ic is set inline in Icon component; mirror sibling for SVG sizing */
.ic { display: inline-flex; line-height: 0; }
.ic svg { width: 1em; height: 1em; stroke-width: 2px; }

/* ── 3. Card ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

/* ── 4. Button ────────────────────────────────────────────────────────────── */
/* Senior-friendly: primary ≥56px, sm ≥52px, ≥12px gap between interactives  */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 56px;
  padding: 0 var(--space-6);
  border: none;
  border-radius: var(--radius-md);
  font: var(--body);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: filter var(--dur-fast), transform var(--dur-fast);
  white-space: nowrap;
  width: 100%;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--primary);
  color: var(--primary-ink);
}
.btn-primary:not(:disabled):hover { background: var(--primary-hover); }
.btn-primary:not(:disabled):active { background: var(--primary-press); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg1);
}
.btn-ghost:not(:disabled):hover { background: var(--surface-2); }

.btn-danger {
  background: var(--danger-500);
  color: #fff;
}
.btn-danger:not(:disabled):hover { filter: brightness(1.08); }

/* Small variant — still ≥52px (tap-target minimum) */
.btn-sm {
  min-height: 52px;
  padding: 0 var(--space-5);
  font-size: 15px;
}

/* ── 5. SearchBar ─────────────────────────────────────────────────────────── */
.searchbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface);
  border: 2px solid var(--red-300);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-4);
  min-height: 52px;
}
.searchbar:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}
.searchbar-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: var(--body);
  color: var(--fg1);
  font-size: 16px;
  min-width: 0;
}
.searchbar-input::placeholder { color: var(--fg3); }

/* Override global .pj input[type] rule (specificity 0,2,1) so the inner
   search input has NO border of its own — the pill container is the only border.
   Both selectors are (0,3,0) and (0,3,1) — both beat (0,2,1). */
.pj .searchbar .searchbar-input,
.pj .searchbar input.searchbar-input {
  border: none;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}
.pj .searchbar .searchbar-input:focus,
.pj .searchbar input.searchbar-input:focus {
  border: none;
  box-shadow: none;
}

/* ── 6. Chip ──────────────────────────────────────────────────────────────── */
/* Min-height ≥52px (senior-friendly tap target); used in horizontal scroll rows */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg2);
  font: var(--body-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.chip:active { transform: scale(.96); }
.chip-on {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: var(--primary);
}

/* ── 7. Stepper ───────────────────────────────────────────────────────────── */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.stepper-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg1);
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
  flex: none;
}
.stepper-btn:active { background: var(--surface-2); transform: scale(.93); }
.stepper-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.stepper-val {
  min-width: 48px;
  text-align: center;
  font: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--fg1);
  font-size: 18px;
}

/* ── 8. StatusChip ────────────────────────────────────────────────────────── */
.status-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font: var(--caption);
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* ── 9. MenuTile ──────────────────────────────────────────────────────────── */
.menu-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 80px;
  padding: var(--space-3) var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  width: 100%;
  font-family: var(--font-sans);
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.menu-tile:active { background: var(--surface-2); transform: scale(.97); }
.menu-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--primary-tint);
}
.menu-tile-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg1);
  text-align: center;
  line-height: 1.3;
}

/* ── 10. Field ────────────────────────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.field-label {
  font: var(--overline);
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--fg3);
  margin-bottom: 2px;
}
.field-control { display: flex; flex-direction: column; }
.field-hint {
  font: var(--body-sm);
  color: var(--fg3);
  margin-top: 2px;
}

/* Common input style for text/number/select used inside Field */
.pj input[type="text"],
.pj input[type="number"],
.pj input[type="search"],
.pj select,
.pj textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--fg1);
  font: var(--body);
  font-size: 16px;
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.pj input[type="text"]:focus,
.pj input[type="number"]:focus,
.pj input[type="search"]:focus,
.pj select:focus,
.pj textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}
.pj textarea { min-height: 80px; padding: var(--space-3) var(--space-4); }

/* Ensure minimum gap between stacked interactive elements */
.btn + .btn,
.field + .field { margin-top: var(--space-3); }

/* ── 11. App wrapper ──────────────────────────────────────────────────────── */
/* Task 8 adds .screen, tabbar, etc. below this comment */
.app {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* ── 12. Sheet (bottom sheet) ─────────────────────────────────────────────── */
.sheet-back {
  position: fixed;
  inset: 0;
  background: rgba(17, 21, 26, .55);
  backdrop-filter: blur(3px);
  z-index: 40;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-mid);
}
.sheet-back.show { opacity: 1; pointer-events: auto; }
.sheet {
  background: var(--surface);
  width: 100%;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  padding: 14px var(--space-6) calc(34px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  max-height: 92%;
  overflow-y: auto;
}
.sheet-back.show .sheet { transform: translateY(0); }
.grab {
  width: 40px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--neutral-200);
  margin: 0 auto 18px;
}
.sheet-title {
  font: var(--h3);
  color: var(--fg1);
  margin-bottom: var(--space-4);
}

/* ── 13. Toast ────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(16px);
  background: var(--neutral-900);
  color: var(--neutral-0);
  padding: 11px 17px;
  border-radius: var(--radius-pill);
  font: var(--caption);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 45;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all var(--dur-mid) var(--ease-out);
  max-width: 90%;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ══════════════════════════════════════════════════════════════════════════════
   14. Shell / Nav — Task 8
   Sections:
   a. Layout containers (mobile / tablet)
   b. Topbar
   c. BackHeader
   d. Mobile scroll area
   e. Bottom nav + FAB
   f. IslandSidebar (floating, two breakpoints)
   g. Desktop content column
   h. Screen content wrapper + stub
   i. MenuGrid
   j. Toast adaptive offset
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── a. Layout containers ──────────────────────────────────────────────────── */
/* Mobile: exact viewport height so the inner flex scroll works cleanly */
.layout-mobile {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Tablet/PC: grows with content; island is fixed, content fills remaining width */
.layout-tablet {
  min-height: 100vh;
}

/* ── b. Topbar (mobile, slim sticky-top) ───────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  flex: none;
}
.topbar-brand {
  font: var(--h4);
  font-weight: 700;
  color: var(--fg1);
  letter-spacing: -0.01em;
}
.topbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--fg2);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.topbar-btn:active { background: var(--surface-2); }

/* ── c. BackHeader ─────────────────────────────────────────────────────────── */
.back-header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-3) 0 var(--space-2);
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  flex: none;
}
.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 52px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--fg1);
  cursor: pointer;
  transition: background var(--dur-fast);
  flex: none;
}
.back-btn:active { background: var(--surface-2); }
.back-title {
  font: var(--h4);
  font-weight: 600;
  color: var(--fg1);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── d. Mobile scroll area ─────────────────────────────────────────────────── */
/* flex:1 fills space between Topbar/BackHeader and bottom nav */
.mobile-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* padding-bottom clears the fixed bottom nav */
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
.mobile-scroll::-webkit-scrollbar { display: none; }

/* ── e. Bottom nav + FAB (mobile ≤767px) ───────────────────────────────────── */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(68px + env(safe-area-inset-bottom, 0px));
  padding: 6px 0 calc(env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  z-index: 30;
}
/* Hidden on tablet/pc — island replaces it */
@media (min-width: 768px) {
  .bottom-nav { display: none; }
}

/* Individual tab */
.bottom-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-height: 52px;
  padding: var(--space-1) var(--space-2);
  border: none;
  background: none;
  color: var(--fg3);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: color var(--dur-fast);
}
.bottom-tab.active { color: var(--primary); }
.bottom-tab-label { line-height: 1.2; }

/* Center FAB (raised above the bar) */
.bottom-fab-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 0 var(--space-3);
  /* pushed up so the circle floats above the bar */
  margin-top: -14px;
}
.bottom-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: var(--primary-ink);
  cursor: pointer;
  box-shadow: var(--glow-red);
  transition: transform var(--dur-fast), background var(--dur-fast);
  flex: none;
}
.bottom-fab:active { transform: scale(.91); background: var(--primary-press); }
.bottom-fab-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
}

/* ── f. IslandSidebar (floating island, tablet/PC ≥768px) ─────────────────── */
/* Hidden on mobile; the island is a fixed floating panel detached from all edges */
.island { display: none; }

@media (min-width: 768px) {
  .island {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 16px;
    top: 16px;
    bottom: 16px;
    width: 76px;               /* icons-only at 768–1023px */
    border-radius: var(--radius-2xl);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    z-index: 30;
    overflow: hidden;
    padding: var(--space-3) var(--space-2);
    gap: var(--space-1);
  }
}
@media (min-width: 1024px) {
  .island {
    width: 240px;              /* icon + label at ≥1024px */
    padding: var(--space-4) var(--space-3);
  }
}

/* Brand mark */
.island-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
  margin-bottom: var(--space-1);
  flex: none;
}
.island-abbr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-ink);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  flex: none;
}
.island-name {
  font: var(--body-sm);
  font-weight: 700;
  color: var(--fg1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CTA "Transaksi Baru" */
.island-cta { padding: 0 2px; margin-bottom: var(--space-1); flex: none; }
.island-new-sale {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 52px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: none;
  background: var(--primary);
  color: var(--primary-ink);
  cursor: pointer;
  font: var(--body-sm);
  font-weight: 700;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.island-new-sale:active { background: var(--primary-press); transform: scale(.97); }

/* Scrollable nav list */
.island-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
}
.island-nav::-webkit-scrollbar { display: none; }

/* Nav item — pill style, active = solid red */
.island-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 52px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--fg2);
  cursor: pointer;
  font: var(--body-sm);
  font-weight: 600;
  text-align: left;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.island-item:hover:not(.active) { background: var(--surface-2); }
.island-item.active {
  background: var(--primary);
  color: var(--primary-ink);
}
.island-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
}

/* Divider + footer */
.island-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-1) 0;
  flex: none;
}
.island-footer { flex: none; }

/* Labels: hidden 768–1023px, visible ≥1024px */
.island-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1023px) {
  .island-label { display: none; }
  .island-name  { display: none; }
  .island-brand { justify-content: center; }
  /* Left-align icon in items is moot when label is gone; center is cleaner */
  .island-item  { justify-content: center; }
  .island-new-sale { justify-content: center; }
}
@media (min-width: 1024px) {
  .island-item  { justify-content: flex-start; }
  .island-new-sale { justify-content: center; }
}

/* ── g. Desktop content column ─────────────────────────────────────────────── */
/* margin-left = island-left (16) + island-width + gap-right (16) */
.desktop-content { display: none; }

@media (min-width: 768px) {
  .desktop-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-left: calc(16px + 76px + 16px); /* = 108px */
    padding: 16px;
  }
}
@media (min-width: 1024px) {
  .desktop-content {
    margin-left: calc(16px + 240px + 16px); /* = 272px */
    /* no max-width — content spans the full width right of the island */
  }
}

/* Desktop inner scroll — fills the full width right of the island */
.desktop-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
.desktop-scroll::-webkit-scrollbar { display: none; }

/* Cap the inner content on large screens — the container/chrome stays full-width,
   the rendered screen content sits in a centered max-width column. */
@media (min-width: 768px) {
  .desktop-scroll > * {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── h. Screen content wrapper + stub ─────────────────────────────────────── */
.screen-content {
  padding: var(--space-4);
}
.stub-screen { max-width: 480px; }

/* ── i. MenuGrid ───────────────────────────────────────────────────────────── */
.menu-grid-header {
  padding: var(--space-2) 0 var(--space-4);
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@media (min-width: 480px) {
  .menu-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── j. Toast adaptive offset ──────────────────────────────────────────────── */
/* Mobile: float above the fixed bottom-nav (override the base 88px value) */
.layout-mobile .toast {
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
/* Tablet/PC: no bottom-nav, anchor near bottom of viewport */
.layout-tablet .toast {
  bottom: 24px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   15. Beranda screen — Task 9
   ══════════════════════════════════════════════════════════════════════════════ */

/* Outer screen wrapper — comfortable padding */
.beranda-screen {
  padding: var(--space-4);
}

/* ── Search hero ─────────────────────────────────────────────────────────── */
.beranda-search-hero {
  margin-bottom: var(--space-5);
}
/* Search is the focal point of Beranda — elevate it: red glow, larger, red icon.
   The border is inherited from the base .searchbar (2px solid --red-300). */
.beranda-search-hero .searchbar {
  min-height: 58px;
  box-shadow: 0 6px 22px rgba(245, 51, 63, 0.16), 0 1px 3px rgba(17, 21, 26, 0.06);
}
.beranda-search-hero .searchbar:focus-within {
  border-color: var(--primary);
  box-shadow: 0 8px 28px rgba(245, 51, 63, 0.30);
}
.beranda-search-hero .searchbar .ic { color: var(--primary); }
.beranda-search-hero .searchbar-input { font-size: 17px; }
.beranda-search-hero .searchbar-input::placeholder { color: var(--neutral-500); }

/* ── Quick-action 2-column grid ──────────────────────────────────────────── */
.beranda-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* QA buttons — secondary shortcuts (search is the hero): compact, flat, muted, icon beside label */
.beranda-qa-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  color: var(--fg2);
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
  width: 100%;
}
.beranda-qa-btn:active { transform: scale(.97); background: var(--surface-2); }
.beranda-qa-btn .ic { color: var(--fg3); }
.beranda-qa-btn.is-primary .ic { color: var(--primary); }

.beranda-qa-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* ── Results list ─────────────────────────────────────────────────────────── */
.beranda-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.beranda-list-heading {
  font: var(--overline);
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--fg3);
  margin-bottom: var(--space-2);
}

/* ── Product row ─────────────────────────────────────────────────────────── */
/* Whole card is a tap target; ≥48px guaranteed by padding+content */
.beranda-product-row {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px var(--space-3);
  cursor: pointer;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background var(--dur-fast), transform var(--dur-fast);
  box-shadow: var(--shadow-xs);
}
.beranda-product-row:active {
  background: var(--surface-2);
  transform: scale(.99);
}
.beranda-product-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Top line: name LEFT, stock+chip RIGHT */
.beranda-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.beranda-row-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg1);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

/* Right side of top row: Menipis chip + stock count */
.beranda-row-stock-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Stock count — mono, right-aligned */
.beranda-row-stock {
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  color: var(--fg2);
  font-size: 13px;
  white-space: nowrap;
}

/* Price row */
.beranda-row-prices {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: nowrap;
  margin-top: 0;
  overflow: hidden;
}

.beranda-price-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg3);
}

.beranda-price-sep {
  width: 1px;
  height: 14px;
  background: var(--border-subtle);
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.beranda-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

.beranda-empty-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg2);
}

.beranda-empty-hint {
  font: var(--body-sm);
  color: var(--fg3);
  max-width: 260px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   16. Jual / Transaksi Baru — Task 10 (cart core)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Outer wrapper — scroll-friendly with bottom padding for paybar */
.jual-screen {
  padding: var(--space-4);
  padding-bottom: calc(320px + env(safe-area-inset-bottom, 0px));
}

/* ── Search & add ─────────────────────────────────────────────────────────── */
.jual-search-wrap {
  position: relative;
  margin-bottom: var(--space-5);
}

/* Results dropdown */
.jual-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 20;
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
.jual-search-results::-webkit-scrollbar { display: none; }

/* Single search result row — ≥52px tap target */
.jual-search-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  cursor: pointer;
  min-height: 56px;
  transition: background var(--dur-fast);
}
.jual-search-row:last-child { border-bottom: none; }
.jual-search-row:active { background: var(--surface-2); }

.jual-search-nama {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg1);
}

.jual-search-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.jual-search-kode {
  font: var(--caption);
  color: var(--fg3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.jual-search-harga {
  font-size: 14px;
  color: var(--fg2);
}

.jual-search-unit {
  font-weight: 400;
  color: var(--fg3);
  font-size: 14px;
}

/* No-match hint */
.jual-search-empty {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font: var(--body-sm);
  color: var(--fg3);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-top: 6px;
}

/* ── Cart lines list ──────────────────────────────────────────────────────── */
.jual-cart {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Cart line card ───────────────────────────────────────────────────────── */
.jual-cart-line {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

/* Row 1: name + remove button */
.jual-line-top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.jual-line-nama {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg1);
  flex: 1;
  line-height: 1.3;
}

/* Remove/X button — ≥44px tap target */
.jual-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 52px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--fg3);
  cursor: pointer;
  flex: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.jual-remove-btn:active { background: var(--danger-50); color: var(--danger-700); }

/* Section label (SATUAN / HARGA / JUMLAH) */
.jual-section-label {
  display: block;
  font: var(--overline);
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--fg3);
  margin-bottom: var(--space-1);
  font-size: 11px;
}

/* Section wrapper */
.jual-line-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Horizontal chip row */
.jual-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Bottom row: stepper + subtotal */
.jual-line-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.jual-stepper-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Subtotal (right-aligned) */
.jual-subtotal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.jual-subtotal-eq {
  font: var(--body-sm);
  color: var(--fg3);
  font-size: 14px;
  white-space: nowrap;
}

/* ── Empty cart state ─────────────────────────────────────────────────────── */
.jual-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-10, 40px) var(--space-4);
  text-align: center;
}

.jual-empty-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg2);
}

.jual-empty-hint {
  font: var(--body-sm);
  color: var(--fg3);
  max-width: 260px;
}

/* ── Sticky footer summary (simple — full pay-bar is Task 12) ─────────────── */
.jual-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px)); /* above bottom-nav on mobile */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  z-index: 25;
}

/* On tablet/PC there's no bottom-nav, so sit at the viewport bottom */
@media (min-width: 768px) {
  .jual-footer {
    bottom: 0;
    left: calc(16px + 76px + 16px);
  }
}
@media (min-width: 1024px) {
  .jual-footer {
    left: calc(16px + 240px + 16px);
  }
}

.jual-footer-count {
  font: var(--body-sm);
  font-weight: 700;
  color: var(--fg2);
}

.jual-footer-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.jual-footer-label {
  font: var(--caption);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg3);
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════════
   17. Jual / Transaksi Baru — Task 11 (customer, diskon/ongkir, delivery)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Customer header ─────────────────────────────────────────────────────── */
.jual-customer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  min-height: 64px;
}

.jual-customer-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.jual-customer-icon {
  font-size: 22px;
  line-height: 1;
  flex: none;
}

.jual-customer-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.jual-customer-nama {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jual-customer-meta {
  font-size: 15px;
  color: var(--fg3);
  font-weight: 500;
}

/* "Ganti" button — ghost style, ≥52px tap target */
.jual-customer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--primary);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  flex: none;
  white-space: nowrap;
  transition: background var(--dur-fast);
}
.jual-customer-btn:active { background: var(--surface-3); }

/* ── Customer pick sheet ──────────────────────────────────────────────────── */
.jual-sheet-search {
  margin-bottom: var(--space-3);
}

.jual-sheet-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
}

/* Single pelanggan row — ≥56px tap target */
.jual-pelanggan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  min-height: 56px;
  font-family: var(--font-sans);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.jual-pelanggan-row:active { background: var(--surface-2); }
.jual-pelanggan-row.selected {
  border-color: var(--primary);
  background: var(--primary-tint);
}

.jual-pelanggan-nama {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg1);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Extras card (diskon, delivery toggle, total breakdown) ───────────────── */
.jual-extras {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-4);
}

/* Kirim toggle row */
.jual-kirim-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) 0 var(--space-3);
}

.jual-kirim-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg1);
}

/* ── Total breakdown ──────────────────────────────────────────────────────── */
.jual-total-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.jual-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.jual-total-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg2);
}

/* Discount amount shown in crimson */
.jual-total-deduct {
  color: var(--danger-700);
  font-weight: 700;
}

/* Hairline divider before the grand total */
.jual-total-divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-1) 0;
}

.jual-total-final {
  padding-top: var(--space-1);
}

.jual-total-label-big {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg1);
  letter-spacing: .04em;
}

/* ══════════════════════════════════════════════════════════════════════════════
   18. PayBar — Task 12 (payment method, cash/tempo fields, save)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Sticky bottom bar: sits above the bottom-nav on mobile, flush-bottom on desktop */
.paybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 2px solid var(--border-subtle);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .12);
  z-index: 25;
  padding: var(--space-3) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Desktop: clear the island sidebar, sit flush at viewport bottom */
@media (min-width: 768px) {
  .paybar {
    bottom: 0;
    left: calc(16px + 76px + 16px);
  }
}
@media (min-width: 1024px) {
  .paybar {
    left: calc(16px + 240px + 16px);
  }
}

/* ── TOTAL summary row ─────────────────────────────────────────────────────── */
.paybar-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.paybar-total-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--fg3);
}

.paybar-total-amount {
  font-size: 22px;
  font-weight: 700;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}

/* ── Payment method chips row ──────────────────────────────────────────────── */
.paybar-method-row {
  display: flex;
  gap: var(--space-2);
}

/* Each method chip expands equally; ≥52px tap target enforced by .chip */
.paybar-method-row .chip {
  flex: 1;
  min-height: 52px;
  font-size: 16px;
  justify-content: center;
}

/* ── Tunai: cash field + kembalian ────────────────────────────────────────── */
.paybar-cash-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Kembalian display row */
.paybar-kembalian-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) 0;
}

.paybar-kembalian-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg2);
}

.paybar-kembalian-amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}

/* RED when cash is insufficient (kembalian < 0) */
.paybar-kembalian-short {
  color: var(--danger-500);
}

/* ── Transfer: simple note ─────────────────────────────────────────────────── */
.paybar-transfer-note {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg2);
  padding: var(--space-2) 0;
  text-align: center;
}

/* ── Tempo: due-date + DP fields ───────────────────────────────────────────── */
.paybar-tempo-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── BAYAR & SIMPAN button ─────────────────────────────────────────────────── */
/* .btn + .btn-danger already provide the base; add height + letter spacing */
.paybar-save-btn {
  min-height: 56px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ══════════════════════════════════════════════════════════════════════════════
   19. Nota / Struk Preview — Task 13
   On-screen: senior-legible receipt (≥14px), large TOTAL, Cetak ≥56px.
   Print: @media print at bottom isolates .nota as ~80mm thermal struk.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Screen wrapper ──────────────────────────────────────────────────────── */
.nota-screen {
  padding: var(--space-4);
  padding-bottom: 100px;
}

/* ── Receipt container (.nota) ───────────────────────────────────────────── */
.nota {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-4);
  max-width: 420px;
  margin: 0 auto var(--space-4);
}

/* ── Header: toko name, address, phone ──────────────────────────────────── */
.nota-header {
  text-align: center;
  margin-bottom: var(--space-3);
}

.nota-toko-nama {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg1);
  letter-spacing: .02em;
  margin-bottom: 4px;
}

.nota-toko-alamat,
.nota-toko-telp {
  font-size: 14px;
  color: var(--fg2);
  line-height: 1.5;
}

/* ── Dividers ────────────────────────────────────────────────────────────── */
.nota-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-3) 0;
}

.nota-divider-dashed {
  border-top-style: dashed;
  border-color: var(--border-subtle);
}

.nota-divider-thin {
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-2) 0;
}

/* ── Meta rows (noNota, tgl, kasir, pelanggan) ───────────────────────────── */
.nota-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.nota-meta-row {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}

.nota-meta-label {
  color: var(--fg3);
  font-size: 13px;
  min-width: 78px;
  flex: none;
}

.nota-meta-val {
  color: var(--fg1);
  font-size: 14px;
  font-weight: 600;
  flex: 1;
}

/* ── Items list ──────────────────────────────────────────────────────────── */
.nota-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.nota-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nota-item-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nota-item-nama {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg1);
  flex: 1;
  line-height: 1.3;
}

.nota-item-tier {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg3);
  background: var(--surface-3);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  flex: none;
}

.nota-item-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.nota-item-eq {
  font-size: 13px;
  color: var(--fg3);
  flex: 1;
  font-variant-numeric: tabular-nums;
}

.nota-item-subtotal {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
  text-align: right;
  flex: none;
}

/* ── Totals block ────────────────────────────────────────────────────────── */
.nota-totals {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nota-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.nota-total-label {
  font-size: 15px;
  color: var(--fg2);
}

.nota-total-val {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}

/* Discount shown in danger red */
.nota-deduct {
  color: var(--danger-700);
}

/* Grand TOTAL row — large mono numerals, senior-legible */
.nota-total-grand {
  padding-top: var(--space-1);
}

.nota-grand-label {
  font-size: 22px;
  font-weight: 700;
  color: var(--fg1);
  letter-spacing: .04em;
}

.nota-grand-val {
  font-size: 28px;
  font-weight: 700;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}

/* ── Payment section ─────────────────────────────────────────────────────── */
.nota-payment {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.nota-payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.nota-payment-label {
  font-size: 14px;
  color: var(--fg2);
  min-width: 90px;
  flex: none;
}

.nota-payment-val {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  justify-content: flex-end;
}

/* ── Delivery line ───────────────────────────────────────────────────────── */
.nota-kirim {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 14px;
}

.nota-kirim-label {
  font-weight: 700;
  color: var(--fg2);
}

.nota-kirim-alamat {
  color: var(--fg1);
  padding-left: 4px;
  line-height: 1.4;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.nota-footer {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--fg2);
  padding: var(--space-2) 0 var(--space-1);
}

/* ── Cetak button + actions (outside .nota — never printed) ─────────────── */
.nota-actions {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.nota-cetak-btn {
  min-height: 56px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ── Not-found defensive state ───────────────────────────────────────────── */
.nota-not-found {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8, 32px) var(--space-4);
  min-height: 60vh;
}

.nota-not-found-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  max-width: 320px;
}

.nota-nf-icon  { font-size: 48px; }

.nota-nf-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg1);
}

.nota-nf-msg {
  font-size: 16px;
  color: var(--fg3);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════════════
   20. Print stylesheet — Task 13
   Hides all app chrome; prints only .nota at ~80mm (thermal receipt width).
   ══════════════════════════════════════════════════════════════════════════════ */

@media print {
  /* 1. Blank the whole document */
  body * { visibility: hidden; }

  /* 2. Reveal only the receipt */
  .nota,
  .nota * { visibility: visible; }

  /* 3. Position receipt at page origin, 80mm wide */
  .nota {
    position: absolute !important;
    left:     0 !important;
    top:      0 !important;
    width:    80mm !important;
    max-width: 80mm !important;
    margin:   0 !important;
    padding:  4mm 3mm !important;
    border:   none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: #fff !important;
    font-size: 11px !important;
  }

  /* 4. Compact header for 80mm thermal */
  .nota-toko-nama   { font-size: 13px !important; font-weight: 700 !important; }
  .nota-toko-alamat,
  .nota-toko-telp   { font-size: 9px !important; }

  /* 5. Compact meta */
  .nota-meta-label  { font-size: 9px  !important; min-width: 52px !important; }
  .nota-meta-val    { font-size: 10px !important; }

  /* 6. Compact items */
  .nota-item-nama     { font-size: 10px !important; }
  .nota-item-eq       { font-size: 9px  !important; }
  .nota-item-subtotal { font-size: 10px !important; }

  /* 7. Compact totals */
  .nota-total-label { font-size: 10px !important; }
  .nota-total-val   { font-size: 10px !important; }
  .nota-grand-label { font-size: 14px !important; }
  .nota-grand-val   { font-size: 16px !important; }

  /* 8. Compact payment */
  .nota-payment-label { font-size: 9px  !important; min-width: 58px !important; }
  .nota-payment-val   { font-size: 10px !important; }

  /* 9. Compact footer */
  .nota-footer { font-size: 11px !important; }

  /* 10. Explicitly hide app chrome (belt-and-suspenders with visibility) */
  .topbar, .back-header, .bottom-nav, .island,
  .paybar, .nota-actions, .toast,
  .desktop-content > .back-header { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   17. Barang — product list — Task 14
   ══════════════════════════════════════════════════════════════════════════════ */

/* Outer screen wrapper */
.barang-screen {
  padding: var(--space-4);
  padding-bottom: var(--space-8);
}

/* ── Header row: title + "+ Barang" button ──────────────────────────────────── */
.barang-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.barang-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg1);
  line-height: 1.2;
  flex: 1;
}

/* "+ Barang" — shrink-wrap, ≥52px height, red primary */
.barang-add-btn {
  min-height: 52px;
  padding: 0 var(--space-5);
  font-size: 16px;
  width: auto;           /* override .btn full-width default */
  flex: none;
}

/* ── Search wrapper ─────────────────────────────────────────────────────────── */
.barang-search-wrap {
  margin-bottom: var(--space-4);
}

/* ── Category chip row — horizontal scroll ──────────────────────────────────── */
.barang-chip-row {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
  /* hide scrollbar but keep scrollability */
  scrollbar-width: none;
}
.barang-chip-row::-webkit-scrollbar { display: none; }

/* ── Product list ───────────────────────────────────────────────────────────── */
.barang-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Product row — whole card is the tap target ─────────────────────────────── */
.barang-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-height: 52px;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.barang-row:active {
  background: var(--surface-2);
  transform: scale(.99);
}
.barang-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Top line: nama LEFT, stock+chip RIGHT */
.barang-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.barang-row-nama {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg1);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

/* Right side of top row: Menipis chip + stock count */
.barang-row-stock-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Stock count — mono, right-aligned */
.barang-row-stock {
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--fg2);
  white-space: nowrap;
}

/* Category caption */
.barang-row-kategori {
  font-size: 14px;
  color: var(--fg3);
  font-weight: 500;
}

/* Price row — mono prices side by side */
.barang-row-prices {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: 2px;
}

.barang-price-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg3);
}

.barang-price-val {
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--fg1);
}

.barang-price-sep {
  width: 1px;
  height: 14px;
  background: var(--border-subtle);
  display: inline-block;
}

/* ── Empty state ────────────────────────────────────────────────────────────── */
.barang-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-4);
  text-align: center;
}

.barang-empty-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg2);
}

.barang-empty-hint {
  font-size: 15px;
  color: var(--fg3);
  max-width: 260px;
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════════════
   21. BarangDetail — Task 15: product detail view
   ══════════════════════════════════════════════════════════════════════════════ */

/* Outer screen wrapper */
.bd-screen {
  padding: var(--space-4);
  padding-bottom: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Not-found defensive state ── */
.bd-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-10, 40px) var(--space-4);
  text-align: center;
}
.bd-nf-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg1);
}
.bd-nf-hint {
  font-size: 15px;
  color: var(--fg3);
}

/* ── Header card: nama / kode / kategori ── */
.bd-header-card {
  margin-bottom: 0;
}
.bd-nama {
  font-size: 22px;
  font-weight: 700;
  color: var(--fg1);
  line-height: 1.25;
  margin-bottom: var(--space-2);
}
.bd-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.bd-kode {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg3);
  background: var(--surface-3);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.bd-kategori-badge {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg2);
}

/* ── Info cards (stok, hpp, units) ── */
.bd-info-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: 0;
}
.bd-info-label {
  font: var(--overline);
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--fg3);
  font-size: 11px;
  font-weight: 700;
}

/* Stok */
.bd-stok-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.bd-stok-val {
  font-size: 40px;
  font-weight: 700;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.bd-stok-low { color: var(--danger-500); }
.bd-stok-unit {
  font-size: 20px;
  font-weight: 600;
  color: var(--fg2);
  align-self: flex-end;
  padding-bottom: 4px;
}
.bd-stok-min {
  font-size: 14px;
  color: var(--fg3);
}

/* HPP */
.bd-hpp-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.bd-hpp-val {
  font-size: 26px;
  font-weight: 700;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}
.bd-hpp-unit {
  font-size: 15px;
  color: var(--fg3);
}

/* Units list */
.bd-units-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.bd-unit-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.bd-unit-row:last-child { border-bottom: none; }
.bd-unit-row-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.bd-unit-nama {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg1);
}
.bd-unit-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--primary);
  background: var(--primary-tint);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.bd-unit-faktor {
  font-size: 14px;
  color: var(--fg3);
  font-variant-numeric: tabular-nums;
}
.bd-unit-prices {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: 2px;
}
.bd-price-lbl {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg3);
}
.bd-price-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}
.bd-price-sep {
  width: 1px;
  height: 14px;
  background: var(--border-subtle);
  display: inline-block;
}

/* ── Actions ── */
.bd-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ══════════════════════════════════════════════════════════════════════════════
   22. BarangEdit — Task 15: senior-friendly multi-unit form
   ══════════════════════════════════════════════════════════════════════════════ */

/* Outer wrapper: needs extra bottom-padding for sticky footer */
.be-screen {
  position: relative;
  min-height: 100%;
}
.be-body {
  padding: var(--space-4);
}

/* ── Section headings ── */
.be-section-head {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg1);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--border-subtle);
}
.be-section-head-units {
  margin-top: var(--space-6);
}

/* Units section description */
.be-units-desc {
  font-size: 15px;
  color: var(--fg3);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

/* ── Read-only stok/hpp block (shown when editing) ── */
.be-readonly-card {
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.be-readonly-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg3);
  margin-bottom: var(--space-1);
}
.be-readonly-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 32px;
}
.be-readonly-label {
  font-size: 15px;
  color: var(--fg2);
  font-weight: 500;
}
.be-readonly-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}
.be-readonly-note {
  font-size: 14px;
  color: var(--fg3);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-2);
  margin-top: var(--space-1);
  line-height: 1.4;
}

/* ── Unit cards ── */
.be-units-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.be-unit-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-xs);
}
/* Base unit: subtle highlight */
.be-unit-card-base {
  border-color: var(--primary);
  border-width: 2px;
}

/* Card header: label + remove button */
.be-unit-card-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.be-unit-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg1);
}
/* Remove (X) button — ≥52px tap target */
.be-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 52px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg3);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
  flex: none;
}
.be-remove-btn:active {
  background: var(--danger-50);
  color: var(--danger-700);
}

/* Faktor-locked display (base unit only) */
.be-faktor-locked {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  min-height: 52px;
}
.be-faktor-lbl {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg3);
  white-space: nowrap;
}
.be-faktor-fixed {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.be-faktor-note {
  font-size: 14px;
  color: var(--fg3);
}

/* ── + Tambah satuan button ── */
.be-add-unit-btn {
  width: 100%;
  margin-bottom: var(--space-4);
}

/* ── Bottom spacer: clears the sticky footer ── */
.be-footer-spacer {
  height: 120px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   21. Pembelian — Task 17 (barang masuk / stock-in)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── PembelianScreen: history list ─────────────────────────────────────────── */
.pembelian-screen {
  padding: var(--space-4);
  padding-bottom: var(--space-8);
}

/* Header: title + "+ Barang Masuk" button */
.pembelian-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.pembelian-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg1);
  flex: 1;
}

/* "+ Barang Masuk" — shrink-wrap, ≥52px, red */
.pembelian-add-btn {
  min-height: 52px;
  padding: 0 var(--space-5);
  font-size: 15px;
  width: auto;
  flex: none;
}

/* History list */
.pembelian-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Single purchase row card */
.pembelian-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pembelian-row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.pembelian-row-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pembelian-row-no {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}

.pembelian-row-tgl {
  font-size: 14px;
  color: var(--fg3);
}

.pembelian-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.pembelian-row-pemasok {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg2);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pembelian-row-items {
  font-size: 14px;
  color: var(--fg3);
  flex: none;
  white-space: nowrap;
}

/* Empty state */
.pembelian-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: 48px var(--space-4);
  text-align: center;
}

.pembelian-empty-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg2);
}

.pembelian-empty-hint {
  font-size: 15px;
  color: var(--fg3);
  max-width: 280px;
  line-height: 1.5;
}

/* ── PembelianBaruScreen: form ──────────────────────────────────────────────── */
.pembelian-baru-screen {
  padding: var(--space-4);
  /* Extra bottom padding to clear the footer buttons */
  padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px));
}

/* Section block */
.pb-section {
  margin-bottom: var(--space-5);
}

.pb-section-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--fg3);
  margin-bottom: var(--space-2);
}

/* ── Pemasok row ────────────────────────────────────────────────────────────── */
.pb-pemasok-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  min-height: 64px;
  box-shadow: var(--shadow-xs);
}

.pb-pemasok-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.pb-pemasok-nama {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-pemasok-telp {
  font-size: 14px;
  color: var(--fg3);
}

.pb-pemasok-placeholder {
  font-size: 16px;
  color: var(--fg3);
}

/* "Pilih" button */
.pb-pilih-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--primary);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  flex: none;
  white-space: nowrap;
  transition: background var(--dur-fast);
}
.pb-pilih-btn:active { background: var(--surface-3); }

/* ── Product search ─────────────────────────────────────────────────────────── */
.pb-search-wrap {
  position: relative;
}

.pb-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 20;
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
.pb-search-results::-webkit-scrollbar { display: none; }

.pb-search-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  cursor: pointer;
  min-height: 56px;
  transition: background var(--dur-fast);
}
.pb-search-row:last-child { border-bottom: none; }
.pb-search-row:active { background: var(--surface-2); }

.pb-search-nama {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg1);
}

.pb-search-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.pb-search-kode {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg3);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.pb-search-hpp {
  font-size: 14px;
  color: var(--fg2);
}

/* No result hint */
.pb-search-empty {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: 15px;
  color: var(--fg3);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-top: 6px;
}

/* ── Item lines ─────────────────────────────────────────────────────────────── */
.pb-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Single line card */
.pb-line {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

/* Row 1: name + remove */
.pb-line-top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.pb-line-nama {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg1);
  flex: 1;
  line-height: 1.3;
}

/* Remove button ≥52px tap target */
.pb-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 52px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--fg3);
  cursor: pointer;
  flex: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.pb-remove-btn:active { background: var(--danger-50); color: var(--danger-700); }

/* Section within line */
.pb-line-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pb-line-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--fg3);
}

/* Chip row */
.pb-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Subtotal row at bottom of each line */
.pb-line-subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-1);
}

.pb-line-subtotal-eq {
  font-size: 14px;
  color: var(--fg3);
  white-space: nowrap;
}

/* ── Total card ─────────────────────────────────────────────────────────────── */
.pb-total-card {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
}

.pb-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.pb-total-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg1);
  letter-spacing: .04em;
}

/* ── Footer: Batal + Simpan ─────────────────────────────────────────────────── */
/* Sticky at bottom of viewport, above bottom-nav on mobile */
.pb-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 2px solid var(--border-subtle);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .10);
  z-index: 25;
  padding: var(--space-3) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .pb-footer {
    bottom: 0;
    left: calc(16px + 76px + 16px);
  }
}
@media (min-width: 1024px) {
  .pb-footer {
    left: calc(16px + 240px + 16px);
  }
}

/* Batal ghost — full-width, ≥52px */
.pb-batal-btn {
  min-height: 52px;
  font-size: 16px;
}

/* Simpan RED — full-width, ≥56px */
.pb-simpan-btn {
  min-height: 56px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ── Pemasok picker sheet contents ──────────────────────────────────────────── */
.pb-sheet-search {
  margin-bottom: var(--space-3);
}

.pb-sheet-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Single pemasok item ≥56px tap target */
.pb-pemasok-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  min-height: 56px;
  font-family: var(--font-sans);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.pb-pemasok-item:active { background: var(--surface-2); }
.pb-pemasok-item.selected {
  border-color: var(--primary);
  background: var(--primary-tint);
}

.pb-pemasok-item-nama {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg1);
}

.pb-pemasok-item-telp {
  font-size: 14px;
  color: var(--fg3);
}

/* Quick-add pemasok area */
.pb-sheet-addnew {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-4);
}

/* Toggle button to reveal inline add form */
.pb-addnew-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--primary);
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.pb-addnew-toggle:active { background: var(--primary-tint); }

/* Inline add-form within sheet */
.pb-addnew-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pb-addnew-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg1);
  margin-bottom: var(--space-3);
}

.pb-addnew-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.pb-addnew-actions .btn {
  flex: 1;
}

/* ── Sticky footer: Simpan + Batal ── */
.be-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 2px solid var(--border-subtle);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .10);
  z-index: 25;
  padding: var(--space-3) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* Desktop: clear the island sidebar, sit at viewport bottom */
@media (min-width: 768px) {
  .be-footer {
    bottom: 0;
    left: calc(16px + 76px + 16px);
  }
}
@media (min-width: 1024px) {
  .be-footer {
    left: calc(16px + 240px + 16px);
  }
}
/* Simpan: RED, ≥56px */
.be-save-btn {
  min-height: 56px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
}
/* Batal: slightly compact secondary */
.be-cancel-btn {
  min-height: 52px;
}

/* ── Mobile overrides (phone only — tablet/desktop untouched) ── */
@media (max-width: 767px) {

  /* ── Shared button rule: lock height for ALL form footers ────────────── */
  /* height + min-height:0 is the only reliable way to pin height when     */
  /* multiple single-class rules fight over min-height values.             */
  .be-footer .btn,
  .pb-footer .btn,
  .pele-footer .btn,
  .peme-footer .btn {
    min-height: 0;
    height: 48px;
    width: auto;
    font-size: 15px;
    padding: 0 var(--space-3);
  }

  /* ── be-footer: Barang Baru / Edit ──────────────────────────────────── */
  .be-footer {
    flex-direction: row;
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }
  .be-footer .be-save-btn   { flex: 2; }
  .be-footer .be-cancel-btn { flex: 1; }
  .be-footer-spacer { height: 80px; }

  /* ── pb-footer: Barang Masuk / Pembelian ─────────────────────────────── */
  .pb-footer {
    flex-direction: row;
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }
  .pb-footer .pb-simpan-btn { flex: 2; }
  .pb-footer .pb-batal-btn  { flex: 1; }

  /* ── pele-footer: Pelanggan Edit ────────────────────────────────────── */
  /* .pele-screen .pele-footer = specificity (0,2,0) beats base .pele-footer
     (0,1,0) which sits at line ~4406, after this media block */
  .pele-screen .pele-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    z-index: 25;
    box-shadow: 0 -4px 20px rgba(0,0,0,.10);
    flex-direction: row;
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }
  .pele-screen .pele-footer .pele-save-btn   { flex: 2; }
  .pele-screen .pele-footer .pele-cancel-btn { flex: 1; }
  .pele-footer-spacer { height: 80px; }

  /* ── peme-footer: Pemasok Edit ──────────────────────────────────────── */
  /* Same fix: (0,2,0) beats base .peme-footer (0,1,0) at line ~4664 */
  .peme-screen .peme-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    z-index: 25;
    box-shadow: 0 -4px 20px rgba(0,0,0,.10);
    flex-direction: row;
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }
  .peme-screen .peme-footer .peme-save-btn   { flex: 2; }
  .peme-screen .peme-footer .peme-cancel-btn { flex: 1; }
  .peme-footer-spacer { height: 80px; }

  /* ── Faktor-locked: stack value above note (no awkward wrap) ─────────── */
  .be-faktor-locked {
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    min-height: auto;
  }
  .be-faktor-fixed {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
  }
  .be-faktor-note { font-size: 12px; }

  /* ── Tighter fields (all three form screens) ────────────────────────── */
  .be-screen .field,
  .pele-screen .field,
  .peme-screen .field { margin-bottom: var(--space-3); }

  .be-screen input[type="text"],
  .be-screen input[type="number"],
  .be-screen select,
  .pele-screen input[type="text"],
  .pele-screen input[type="number"],
  .pele-screen select,
  .pele-screen textarea,
  .peme-screen input[type="text"],
  .peme-screen input[type="number"],
  .peme-screen select,
  .peme-screen textarea { min-height: 44px; font-size: 15px; }

  .be-section-head { font-size: 16px; }

  /* Remove stacked-element gap (handled by footer flex gap instead) */
  .btn + .btn,
  .field + .field { margin-top: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   23. Sesuaikan Stok Sheet — Task 16
   ══════════════════════════════════════════════════════════════════════════════ */

/* Label above the jenis chip row (matches field-label style) */
.stok-adj-field-label {
  font: var(--overline);
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--fg3);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

/* Wrapping row of jenis chips — flex-wrap so 5 chips fit any screen width */
.stok-adj-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Simpan button inside sheet: RED, ≥56px, full-width */
.stok-adj-save-btn {
  width: 100%;
  min-height: 56px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-top: var(--space-2);
}

/* ══════════════════════════════════════════════════════════════════════════════
   24. KartuStokScreen — Task 16: stock movement history
   ══════════════════════════════════════════════════════════════════════════════ */

.ks-screen {
  padding: var(--space-4);
  padding-bottom: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Defensive not-found state ── */
.ks-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-4);
  text-align: center;
}
.ks-nf-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg1);
}

/* ── Header card: current stock ── */
.ks-header-card { margin-bottom: 0; }
.ks-header-label {
  font: var(--overline);
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--fg3);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.ks-header-stok {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.ks-stok-val {
  font-size: 40px;
  font-weight: 700;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ks-stok-unit {
  font-size: 20px;
  font-weight: 600;
  color: var(--fg2);
}
.ks-header-nama {
  font-size: 14px;
  color: var(--fg3);
}

/* ── Empty state ── */
.ks-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-4);
  text-align: center;
}
.ks-empty-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg3);
}

/* ── Movement list card ── */
.ks-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Individual movement row */
.ks-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.ks-row:last-child { border-bottom: none; }

/* Left column: date, jenis badge, optional alasan */
.ks-row-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}
.ks-row-tgl {
  font-size: 14px;
  color: var(--fg3);
  font-weight: 500;
}

/* Jenis badge — color-coded by movement type */
.ks-jenis-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: capitalize;
  width: fit-content;
}
/* Positive / stock-in: green */
.ks-jenis-masuk  { background: var(--success-50);  color: var(--success-700); }
.ks-jenis-tambah { background: var(--success-50);  color: var(--success-700); }
.ks-jenis-retur  { background: var(--success-50);  color: var(--success-700); }
/* Negative stock-out: red */
.ks-jenis-keluar { background: var(--danger-50);   color: var(--danger-700);  }
.ks-jenis-rusak  { background: var(--danger-50);   color: var(--danger-700);  }
/* Negative but non-sale: warning amber */
.ks-jenis-kurang { background: var(--warning-50);  color: var(--warning-700); }
.ks-jenis-hilang { background: var(--warning-50);  color: var(--warning-700); }

/* Optional alasan text */
.ks-row-alasan {
  font-size: 14px;
  color: var(--fg3);
  line-height: 1.4;
}

/* Right column: signed qty + running balance */
.ks-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: none;
}
.ks-qty {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ks-qty-pos { color: var(--success-500); }  /* green for positive */
.ks-qty-neg { color: var(--danger-500);  }  /* red for negative */
.ks-balance {
  font-size: 14px;
  color: var(--fg3);
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Piutang — Task 18 (outstanding receivables)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Outer screen wrapper ─────────────────────────────────────────────────── */
.piutang-screen,
.piutang-detail-screen {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── Summary card ─────────────────────────────────────────────────────────── */
.piutang-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-4);
}

.piutang-summary-label {
  font: var(--overline);
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--fg3);
  margin-bottom: 4px;
}

.piutang-summary-count {
  font-size: 15px;
  color: var(--fg3);
  margin-top: 4px;
}

/* ── Customer list ────────────────────────────────────────────────────────── */
.piutang-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Customer row — tappable card ─────────────────────────────────────────── */
.piutang-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: none;
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  transition: background var(--dur-fast), transform var(--dur-fast);
  font-family: var(--font-sans);
}
.piutang-row:active {
  background: var(--surface-2);
  transform: scale(.99);
}

.piutang-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  min-height: 52px;
}

.piutang-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.piutang-row-nama {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.piutang-row-telp {
  font-size: 14px;
  color: var(--fg3);
}

.piutang-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  flex: none;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.piutang-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8, 32px) var(--space-4);
  text-align: center;
}

.piutang-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg2);
}

.piutang-empty-hint {
  font: var(--body-sm);
  color: var(--fg3);
  max-width: 260px;
}

/* ── Detail: customer header card ─────────────────────────────────────────── */
.piutang-detail-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
}

.piutang-detail-nama {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg1);
  line-height: 1.3;
}

.piutang-detail-telp {
  font-size: 15px;
  color: var(--fg3);
  margin-bottom: var(--space-2);
}

.piutang-detail-saldo-label {
  font: var(--overline);
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--fg3);
  margin-top: var(--space-2);
  margin-bottom: 2px;
}

/* ── Nota list ────────────────────────────────────────────────────────────── */
.piutang-nota-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Per-nota card ────────────────────────────────────────────────────────── */
.piutang-nota-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

/* Nota top row: no + chip */
.piutang-nota-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.piutang-nota-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.piutang-nota-no {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg1);
}

.piutang-nota-tgl {
  font-size: 14px;
  color: var(--fg3);
}

/* Jatuh tempo row */
.piutang-nota-tempo {
  font-size: 15px;
  color: var(--fg2);
}

/* Overdue aging note in red */
.piutang-nota-aging {
  color: var(--danger-700);
  font-weight: 700;
}

/* Outstanding amount row */
.piutang-nota-outs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-1);
  border-top: 1px solid var(--border-subtle);
}

.piutang-nota-outs-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg3);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Bayar button per nota — full width ≥52px (inherits .btn height) */
.piutang-bayar-btn {
  min-height: 52px;
  font-size: 16px;
  font-weight: 700;
}

/* ── Bayar sheet body ─────────────────────────────────────────────────────── */
.piutang-sheet-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
}

.piutang-sheet-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

.piutang-sheet-info-label {
  font: var(--overline);
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--fg3);
  margin-bottom: 2px;
}

/* Bayar confirm button in sheet — RED ≥56px */
.piutang-sheet-bayar-btn {
  min-height: 56px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Error state */
.piutang-detail-error {
  padding: var(--space-6) var(--space-4);
  font-size: 16px;
  color: var(--danger-700);
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════════
   27. Pengiriman — delivery board — Task 19
   Senior-friendly: ≥16px text, alamat prominent, mono amounts, ≥52px tap targets
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Outer screen wrapper ─────────────────────────────────────────────────── */
.pengiriman-screen {
  padding: var(--space-4);
  padding-bottom: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Filter chip row — horizontal scroll ─────────────────────────────────── */
.pengiriman-chip-row {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  scrollbar-width: none;
}
.pengiriman-chip-row::-webkit-scrollbar { display: none; }

/* ── Delivery list — stacked cards ───────────────────────────────────────── */
.pengiriman-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── Delivery card ────────────────────────────────────────────────────────── */
.pengiriman-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

/* Selesai card: slightly muted */
.pengiriman-card-done {
  opacity: 0.80;
}

/* ── Card top: identity + status chip ────────────────────────────────────── */
.pengiriman-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.pengiriman-card-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.pengiriman-customer-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg1);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pengiriman-nota-no {
  font-size: 14px;
  color: var(--fg3);
  font-variant-numeric: tabular-nums;
}

/* ── Alamat block — the most important info for the driver ───────────────── */
.pengiriman-alamat-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--primary);
}

.pengiriman-alamat-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--fg3);
  margin-bottom: 2px;
}

.pengiriman-alamat-text {
  font-size: 17px;
  font-weight: 600;
  color: var(--fg1);
  line-height: 1.45;
  word-break: break-word;
}

/* ── Items summary ────────────────────────────────────────────────────────── */
.pengiriman-items-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pengiriman-items-count {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg1);
}

.pengiriman-items-detail {
  font-size: 14px;
  color: var(--fg3);
  line-height: 1.4;
}

/* ── Ongkir + Total row ───────────────────────────────────────────────────── */
.pengiriman-money-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.pengiriman-money-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}

.pengiriman-money-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg3);
}

.pengiriman-money-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}

.pengiriman-money-divider {
  width: 1px;
  height: 32px;
  background: var(--border-subtle);
  flex: none;
}

/* ── Advance button — RED, ≥52px, full width ─────────────────────────────── */
.pengiriman-advance-btn {
  min-height: 56px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  width: 100%;
  margin-top: var(--space-1);
}

/* ── Done badge — disabled, muted ────────────────────────────────────────── */
.pengiriman-done-btn {
  min-height: 52px;
  font-size: 16px;
  width: 100%;
  margin-top: var(--space-1);
  opacity: 0.6;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.pengiriman-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 48px var(--space-4);
  text-align: center;
}

.pengiriman-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg2);
}

.pengiriman-empty-hint {
  font-size: 15px;
  color: var(--fg3);
  max-width: 280px;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Task 20: Laporan — owner report screen
   ══════════════════════════════════════════════════════════════════════════════ */

/* Outer scroll wrapper */
.laporan-screen {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── Date range picker ─────────────────────────────────────────────────────── */
.laporan-range-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Chip row — horizontal, wraps if needed; chips ≥52px (from .chip rule) */
.laporan-range-chips {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Custom date inputs row */
.laporan-date-inputs {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.laporan-date-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.laporan-date-label {
  font: var(--overline);
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--fg3);
}

/* Senior-friendly date input: matches the general .pj input rules */
.laporan-date-input {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--fg1);
  font: var(--body);
  font-size: 16px;
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.laporan-date-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

/* The "–" separator sits on the same baseline as the inputs */
.laporan-date-sep {
  flex: none;
  font-size: 20px;
  color: var(--fg3);
  padding-bottom: 14px;   /* visual alignment to input midline */
  line-height: 1;
}

/* Active range text shown below pickers */
.laporan-range-label {
  font: var(--body-sm);
  color: var(--fg2);
  font-weight: 600;
  text-align: center;
}

/* ── Section cards ─────────────────────────────────────────────────────────── */
.laporan-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Overline section heading */
.laporan-section-title {
  font: var(--overline);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg3);
  margin-bottom: 2px;
}

/* Sub-label above the headline number */
.laporan-headline-label {
  font: var(--body-sm);
  color: var(--fg2);
  font-weight: 600;
}

/* ── Stats row (key: value) ────────────────────────────────────────────────── */
.laporan-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-1);
}

.laporan-stat-label {
  font: var(--body-sm);
  color: var(--fg2);
  font-size: 15px;
}

.laporan-stat-val {
  font: var(--mono);
  font-size: 17px;
  color: var(--fg1);
}

/* RED emphasis for overdue / alert counts */
.laporan-stat-alert { color: var(--danger-500); }

/* Light divider between headline and metode breakdown */
.laporan-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 2px 0;
}

/* ── Per-metode breakdown ──────────────────────────────────────────────────── */
.laporan-metode-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.laporan-metode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}

.laporan-metode-label {
  font: var(--body-sm);
  color: var(--fg3);
  font-size: 14px;
}

/* ── Small explanatory note ────────────────────────────────────────────────── */
.laporan-note {
  font: var(--caption);
  color: var(--fg3);
  margin-top: 2px;
}

/* ── Barang menipis tappable row ───────────────────────────────────────────── */
.laporan-menipis-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.laporan-menipis-btn:active {
  background: var(--surface-3);
  transform: scale(.98);
}

/* Large mono count — red when > 0 */
.laporan-menipis-count {
  font: var(--num-lg);
  color: var(--fg1);
  min-width: 36px;
  text-align: center;
  flex: none;
}
.laporan-menipis-alert { color: var(--danger-500); }

.laporan-menipis-text {
  flex: 1;
  font: var(--body-sm);
  font-weight: 600;
  font-size: 15px;
  color: var(--fg2);
}

/* ── Empty / zero hint ─────────────────────────────────────────────────────── */
.laporan-empty-hint {
  font: var(--body-sm);
  color: var(--fg3);
  padding: var(--space-4) 0;
  text-align: center;
}

/* ── Produk terlaris list ──────────────────────────────────────────────────── */
.laporan-terlaris-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.laporan-terlaris-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.laporan-terlaris-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.laporan-terlaris-nama {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg1);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Horizontal bar scaled to max revenue */
.laporan-terlaris-bar-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.laporan-terlaris-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--primary);   /* brand red */
  transition: width var(--dur-mid) var(--ease-out);
  min-width: 4px;               /* ensure non-zero bar is always visible */
}

/* ══════════════════════════════════════════════════════════════════════════════
   Task 21: PelangganScreen / PelangganDetail / PelangganEdit
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Shared tipe badge ─────────────────────────────────────────────────────── */
.pel-tipe-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font: var(--caption);
  font-weight: 700;
  white-space: nowrap;
  flex: none;
}
.pel-tipe-umum       { background: var(--surface-3);    color: var(--fg2); }
.pel-tipe-langganan  { background: var(--success-50);   color: var(--success-700); }
.pel-tipe-kontraktor { background: var(--warning-50);   color: var(--warning-700); }

/* ── PelangganScreen — list ────────────────────────────────────────────────── */
.pel-screen {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  gap: var(--space-3);
}

.pel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.pel-title {
  font: var(--h3);
  color: var(--fg1);
  font-weight: 700;
}

.pel-add-btn {
  width: auto;
  min-height: 52px;
  padding: 0 var(--space-5);
}

.pel-search-wrap {
  margin-bottom: var(--space-1);
}

/* ── List rows ─────────────────────────────────────────────────────────────── */
.pel-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pel-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.pel-row:active { background: var(--surface-2); transform: scale(.99); }

.pel-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.pel-row-nama {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg1);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pel-row-telp {
  font: var(--body-sm);
  color: var(--fg3);
  font-size: 14px;
}

.pel-row-utang {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 2px;
}

.pel-row-utang-label {
  font: var(--caption);
  color: var(--danger-500);
  font-weight: 700;
}

.pel-row-utang-val {
  font-size: 14px;
  color: var(--danger-500);
}

/* ── Empty state ───────────────────────────────────────────────────────────── */
.pel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-4);
  text-align: center;
}

.pel-empty-title {
  font: var(--body);
  font-size: 16px;
  color: var(--fg3);
}

/* ── PelangganDetail ───────────────────────────────────────────────────────── */
.peld-screen {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  gap: var(--space-3);
}

.peld-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-4);
  text-align: center;
}

.peld-nf-title {
  font: var(--h4);
  color: var(--fg2);
}

.peld-nf-hint {
  font: var(--body-sm);
  color: var(--fg3);
}

.peld-header-card {
  padding: var(--space-4);
}

.peld-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.peld-nama {
  font: var(--h3);
  color: var(--fg1);
  font-weight: 700;
  flex: 1;
  min-width: 0;
}

/* Info cards (Kontak, Kredit, Transaksi) */
.peld-info-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.peld-info-label {
  font: var(--overline);
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--fg3);
  margin-bottom: 2px;
}

/* Kontak rows */
.peld-kontak-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: 28px;
}

.peld-kontak-val {
  font-size: 16px;
  color: var(--fg1);
  flex: 1;
  line-height: 1.4;
}

/* Kredit rows */
.peld-kredit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-top: 1px solid var(--border-subtle);
}
.peld-kredit-row:first-of-type { border-top: none; }

.peld-kredit-label {
  font: var(--body-sm);
  color: var(--fg2);
  font-size: 15px;
}

.peld-kredit-val {
  font-size: 16px;
  color: var(--fg1);
}

.peld-utang-red { color: var(--danger-500); }

/* Transaksi sales list */
.peld-no-sales {
  font: var(--body-sm);
  color: var(--fg3);
  padding: var(--space-2) 0;
}

.peld-sales-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.peld-sale-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-subtle);
}
.peld-sale-row:first-of-type { border-top: none; }

.peld-sale-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.peld-sale-no {
  font-size: 14px;
  color: var(--fg1);
  font-weight: 600;
}

.peld-sale-tgl {
  font: var(--caption);
  color: var(--fg3);
}

.peld-sale-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: none;
}

.peld-sale-total {
  font-size: 14px;
  color: var(--fg1);
}

/* Actions footer */
.peld-actions {
  margin-top: var(--space-2);
  padding-bottom: var(--space-6);
}

/* ── PelangganEdit — form ──────────────────────────────────────────────────── */
.pele-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  position: relative;
}

.pele-body {
  flex: 1;
  padding: var(--space-4);
}

.pele-footer-spacer {
  height: 140px;
}

/* Sticky footer */
.pele-footer {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
}

.pele-save-btn {
  flex: 2;
  min-height: 56px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
}

.pele-cancel-btn {
  flex: 1;
  min-height: 52px;
}

/* ════════════════════════════════════════════════════════════════════════════
   Task 22 — Pemasok screens (pem- / pemd- / peme-)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── PemasokScreen — list ──────────────────────────────────────────────────── */
.pem-screen {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  gap: var(--space-3);
}

.pem-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.pem-title {
  font: var(--h3);
  color: var(--fg1);
  font-weight: 700;
}

.pem-add-btn {
  width: auto;
  min-height: 52px;
  padding: 0 var(--space-5);
}

.pem-search-wrap {
  margin-bottom: var(--space-1);
}

/* ── List rows ─────────────────────────────────────────────────────────────── */
.pem-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pem-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.pem-row:active { background: var(--surface-2); transform: scale(.99); }

.pem-row-nama {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pem-row-telp {
  font: var(--body-sm);
  color: var(--fg3);
  font-size: 14px;
}

.pem-row-kontak {
  font: var(--caption);
  color: var(--fg3);
  font-size: 14px;
}

/* ── Empty state ───────────────────────────────────────────────────────────── */
.pem-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-4);
  text-align: center;
}

.pem-empty-title {
  font: var(--body);
  font-size: 16px;
  color: var(--fg3);
}

/* ── PemasokDetail ─────────────────────────────────────────────────────────── */
.pemd-screen {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  gap: var(--space-3);
}

.pemd-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-4);
  text-align: center;
}

.pemd-nf-title {
  font: var(--h4);
  color: var(--fg2);
}

.pemd-nf-hint {
  font: var(--body-sm);
  color: var(--fg3);
}

.pemd-header-card {
  padding: var(--space-4);
}

.pemd-nama {
  font: var(--h3);
  color: var(--fg1);
  font-weight: 700;
}

/* Info cards (Kontak, Pembelian) */
.pemd-info-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pemd-info-label {
  font: var(--overline);
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--fg3);
  margin-bottom: 2px;
}

/* Kontak rows */
.pemd-kontak-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: 28px;
}

.pemd-kontak-val {
  font-size: 16px;
  color: var(--fg1);
  flex: 1;
  line-height: 1.4;
}

/* Pembelian list */
.pemd-no-pb {
  font: var(--body-sm);
  color: var(--fg3);
  padding: var(--space-2) 0;
}

.pemd-pb-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pemd-pb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-subtle);
}
.pemd-pb-row:first-of-type { border-top: none; }

.pemd-pb-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.pemd-pb-no {
  font-size: 14px;
  color: var(--fg1);
  font-weight: 600;
}

.pemd-pb-tgl {
  font: var(--caption);
  color: var(--fg3);
}

.pemd-pb-right {
  display: flex;
  align-items: flex-end;
  flex: none;
}

.pemd-pb-total {
  font-size: 14px;
  color: var(--fg1);
}

/* Actions footer */
.pemd-actions {
  margin-top: var(--space-2);
  padding-bottom: var(--space-6);
}

/* ── PemasokEdit — form ────────────────────────────────────────────────────── */
.peme-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  position: relative;
}

.peme-body {
  flex: 1;
  padding: var(--space-4);
}

.peme-footer-spacer {
  height: 140px;
}

/* Sticky footer */
.peme-footer {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
}

.peme-save-btn {
  flex: 2;
  min-height: 56px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
}

.peme-cancel-btn {
  flex: 1;
  min-height: 52px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   34. Pengaturan — Task 23: toko info + kategori/satuan management
   ══════════════════════════════════════════════════════════════════════════════ */

/* Outer screen wrapper */
.peng-screen {
  padding: var(--space-4);
  padding-bottom: var(--space-10, 40px);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Card spacing override — each section card */
.peng-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Card section heading */
.peng-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg1);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--border-subtle);
  margin-bottom: var(--space-1);
}

/* Standard text input inside pengaturan (inherits global .pj input but named for clarity) */
.peng-input {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--fg1);
  font-size: 16px;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.peng-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

/* Textarea for alamat */
.peng-textarea {
  width: 100%;
  min-height: 80px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--fg1);
  font-size: 16px;
  font-family: var(--font-sans);
  outline: none;
  resize: vertical;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.peng-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

/* Simpan button — RED ≥56px, full-width */
.peng-simpan-btn {
  min-height: 56px;
  font-size: 17px;
  font-weight: 700;
  margin-top: var(--space-1);
}

/* Hint note below the Simpan button */
.peng-hint {
  font-size: 14px;
  color: var(--fg3);
  text-align: center;
  line-height: 1.4;
}

/* ── Kategori / Satuan list ─────────────────────────────────────────────────── */
.peng-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Empty state when no items */
.peng-list-empty {
  padding: var(--space-4);
  font-size: 15px;
  color: var(--fg3);
  text-align: center;
}

/* Each list row — name + X button */
.peng-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: 52px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface);
}
.peng-list-row:last-child {
  border-bottom: none;
}

/* Item label */
.peng-list-label {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: var(--fg1);
  line-height: 1.3;
}

/* Remove (X) button — ≥52px tap target (senior-friendly floor) */
.peng-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 52px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--fg3);
  cursor: pointer;
  flex: none;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.peng-remove-btn:hover {
  background: var(--danger-50);
  color: var(--danger-700);
  border-color: var(--danger-200, var(--danger-50));
}
.peng-remove-btn:active {
  background: var(--danger-100, var(--danger-50));
  color: var(--danger-700);
  transform: scale(.93);
}

/* ── Add row: input + Tambah button ────────────────────────────────────────── */
.peng-add-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Input within add row */
.peng-add-input {
  flex: 1;
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--fg1);
  font-size: 16px;
  font-family: var(--font-sans);
  outline: none;
  min-width: 0;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.peng-add-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}
.peng-add-input::placeholder {
  color: var(--fg3);
}

/* "+ Tambah" button — shrink-wrap, ≥52px, RED */
.peng-tambah-btn {
  min-height: 52px;
  padding: 0 var(--space-4);
  font-size: 15px;
  font-weight: 700;
  width: auto;          /* override .btn full-width default */
  flex: none;
  white-space: nowrap;
}

/* ── Tentang card ───────────────────────────────────────────────────────────── */
.peng-card-tentang {
  text-align: center;
  gap: var(--space-2);
}

.peng-tentang-nama {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg1);
  letter-spacing: -0.01em;
}

.peng-tentang-blurb {
  font-size: 15px;
  color: var(--fg3);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Task 23b — PenjualanScreen (Riwayat Penjualan)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Screen wrapper ─────────────────────────────────────────────────────── */
.penj-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  padding-bottom: var(--space-8);
}

/* ── Today's summary card ───────────────────────────────────────────────── */
.penj-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.penj-summary-title {
  font: var(--overline);
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--fg3);
  margin-bottom: 2px;
}

.penj-summary-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.penj-summary-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.penj-summary-label {
  font-size: 14px;
  color: var(--fg3);
  font-weight: 600;
}

.penj-summary-num {
  font-size: 24px;
  font-weight: 700;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}

.penj-summary-divider {
  width: 1px;
  height: 36px;
  background: var(--border-subtle);
  flex: none;
}

/* ── Search ─────────────────────────────────────────────────────────────── */
.penj-search {
  /* Full-width wrapper; SearchBar fills it */
}

/* ── Filter chips ───────────────────────────────────────────────────────── */
.penj-chips {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: 2px;
  /* Hide scrollbar on mobile */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.penj-chips::-webkit-scrollbar { display: none; }

/* ── List ───────────────────────────────────────────────────────────────── */
.penj-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Sale row ───────────────────────────────────────────────────────────── */
/* button reset + card styling; min 52px tap target guaranteed by content  */
.penj-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  min-height: 52px;
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
  font-family: var(--font-sans);
}
.penj-row:active {
  background: var(--surface-2);
  transform: scale(.99);
}
.penj-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Top row: nota no + date + truck */
.penj-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.penj-row-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.penj-row-nota {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg1);
}

.penj-row-tgl {
  font-size: 14px;
  color: var(--fg3);
}

.penj-row-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

.penj-truck {
  display: inline-flex;
  align-items: center;
  padding: 4px;
}

/* Mid row: customer name + metode badge */
.penj-row-mid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.penj-row-customer {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg1);
  flex: 1;
}

/* Metode badge — pill, muted */
.penj-metode-badge {
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--fg2);
  background: var(--surface-3);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  white-space: nowrap;
}

/* Bottom row: total + status chip */
.penj-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.penj-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-4);
  text-align: center;
}

.penj-empty-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg2);
}

.penj-empty-hint {
  font-size: 15px;
  color: var(--fg3);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Jual / Transaksi Baru — mobile compaction (≤767px)
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Outer screen */
  .jual-screen {
    padding: var(--space-2) var(--space-3);
    padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Customer bar ────────────────────────────────────────────────────────── */
  .jual-customer {
    min-height: 36px;
    padding: 4px var(--space-3);
    margin-bottom: var(--space-2);
    border-radius: var(--radius-md);
  }
  .jual-customer-info { gap: var(--space-2); }
  .jual-customer-icon { font-size: 15px; }
  .jual-customer-nama { font-size: 13px; }
  .jual-customer-meta { font-size: 11px; }
  .jual-customer-btn  { min-height: 32px; padding: 0 var(--space-2); font-size: 12px; }

  /* ── Search bar ──────────────────────────────────────────────────────────── */
  .jual-search-wrap { margin-bottom: var(--space-2); }
  .jual-screen .searchbar     { min-height: 38px; padding: 0 var(--space-3); }
  .jual-screen .searchbar-input { font-size: 14px; }

  /* ── Cart list ───────────────────────────────────────────────────────────── */
  .jual-cart { gap: var(--space-2); }

  /* Each card: flex ROW wrap so controls share one horizontal strip
     Row 1: .jual-line-top (pinned full-width)
     Row 2: [unit chips?] [harga chips] [stepper + subtotal fills remainder] */
  .jual-cart-line {
    padding: 6px 10px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
  }

  /* Name row: force full width so controls start on a fresh row */
  .jual-line-top {
    flex: 0 0 100%;
    gap: 4px;
  }
  .jual-line-nama  { font-size: 13px; }
  .jual-remove-btn { min-width: 28px; min-height: 28px; }

  /* Section labels removed — chip style is self-explanatory in context */
  .jual-section-label { display: none; }

  /* Chip sections: inline, no extra gap */
  .jual-line-section { flex: none; }
  .jual-chips-row    { gap: 3px; }

  /* Bottom block (stepper + subtotal): FIXED width so chips can never push it out.
     Left border creates a visual break from chip sections. */
  .jual-line-bottom {
    flex: 0 0 150px;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: nowrap;
    border-left: 1px solid var(--border-subtle);
    padding-left: 6px;
  }
  .jual-stepper-wrap { flex-direction: row; align-items: center; gap: 0; }
  .jual-subtotal     { flex: 1; flex-direction: row; align-items: baseline; justify-content: flex-end; }
  .jual-subtotal-eq  { display: none; }

  /* Cart chips (Satuan + Harga) */
  .jual-screen .chip {
    min-height: 26px;
    padding: 0 6px;
    font-size: 12px;
  }

  /* Stepper */
  .jual-screen .stepper     { gap: 2px; }
  .jual-screen .stepper-btn { width: 26px; height: 26px; }
  .jual-screen .stepper-val { font-size: 13px; min-width: 20px; }

  /* Subtotal: 13px keeps long amounts (Rp 158.000) within the 150px block */
  .jual-cart .num-lg { font: 700 13px/1.2 var(--font-mono); white-space: nowrap; }

  /* ── PayBar: grid — TOTAL + method chips on one row ─────────────────────── */
  .paybar {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "total   methods"
      "extra   extra"
      "btn     btn";
    align-items: center;
    column-gap: var(--space-3);
    row-gap: 5px;
    padding: 7px var(--space-3) 9px;
  }

  .paybar-total-row {
    grid-area: total;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .paybar-total-label  { font-size: 10px; }
  .paybar-total-amount { font-size: 16px; }

  .paybar-method-row { grid-area: methods; flex-wrap: nowrap; gap: 4px; }
  .paybar-method-row .chip {
    min-height: 34px;
    font-size: 13px;
    padding: 0 var(--space-2);
  }

  .paybar-cash-section,
  .paybar-transfer-note,
  .paybar-tempo-section { grid-area: extra; }

  .paybar .field        { margin-bottom: 0; }
  .paybar .field-label  { font-size: 10px; margin-bottom: 1px; }
  .paybar input[type="text"],
  .paybar input[type="date"] { min-height: 36px; font-size: 14px; padding: 0 var(--space-3); }

  .paybar-kembalian-row    { padding: 1px 0; }
  .paybar-kembalian-label  { font-size: 13px; }
  .paybar-kembalian-amount { font-size: 14px; }

  .paybar-save-btn { grid-area: btn; min-height: 42px; font-size: 14px; letter-spacing: .01em; }

  /* ── Extras card (Diskon / Kirim / Total breakdown) ──────────────────────── */
  .jual-extras {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }

  /* Diskon field */
  .jual-extras .field          { margin-bottom: var(--space-2); }
  .jual-extras .field-label    { font-size: 10px; margin-bottom: 1px; }
  .jual-extras input[type="text"] { min-height: 34px; font-size: 14px; padding: 0 var(--space-3); }

  /* Kirim toggle row */
  .jual-kirim-row   { padding: 2px 0 var(--space-2); gap: var(--space-2); }
  .jual-kirim-label { font-size: 13px; }

  /* Total breakdown */
  .jual-total-breakdown { gap: var(--space-1); margin-top: var(--space-1); padding-top: var(--space-2); }
  .jual-total-row       { gap: var(--space-2); }
  .jual-total-label     { font-size: 13px; }
  .jual-total-label-big { font-size: 13px; letter-spacing: .02em; }

  /* TOTAL amount: num-xl (32px) → 17px; Subtotal mono (15px) → 13px */
  .jual-extras .num-xl { font: 700 17px/1.2 var(--font-mono); white-space: nowrap; }
  .jual-extras .mono   { font-size: 13px; }
}