:root {
  /* Warm cream base + IQOS turquoise accent */
  --bg: #f4f7f8;
  --bg-warm: #eef6f5;
  --surface: #ffffff;
  --surface2: #e8f7f5;
  --border: #d4e8e5;
  --border-soft: #e5efee;
  --text: #1a2e2c;
  --muted: #5a7a76;
  --accent: #00d1c1;
  --accent-dim: #00b3a5;
  --accent-dark: #008f84;
  --accent-soft: rgba(0, 209, 193, 0.14);
  --danger: #e25555;
  --danger-soft: rgba(226, 85, 85, 0.12);
  --ok: #1aad6f;
  --ok-soft: rgba(26, 173, 111, 0.12);
  --warn: #d4920a;
  --warn-soft: rgba(212, 146, 10, 0.14);
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 2px 12px rgba(26, 46, 44, 0.06);
  --shadow-md: 0 6px 24px rgba(26, 46, 44, 0.08);
  --font: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --tap: 48px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 280px);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-dark); text-decoration: none; font-weight: 600; }
a:hover { color: var(--accent-dim); text-decoration: underline; }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
  padding: .85rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  box-shadow: 0 1px 0 rgba(0, 209, 193, 0.08);
}
.brand {
  display: flex; align-items: center; gap: .65rem;
  font-weight: 750; letter-spacing: -0.01em; color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
  min-width: 0;
}
.brand > div:last-child {
  white-space: nowrap;
}
.brand:hover { text-decoration: none; color: var(--text); }
.brand-mark {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(145deg, #00d1c1, #00a89c);
  display: grid; place-items: center; color: #fff;
  font-size: .8rem; font-weight: 800;
  box-shadow: 0 4px 12px rgba(0, 209, 193, 0.35);
  flex-shrink: 0;
}
.brand-sub { display: block; font-size: .7rem; font-weight: 500; color: var(--muted); margin-top: -2px; }

/* Bottom / top nav — large tap targets */
.nav-links { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.nav-links a {
  color: var(--muted);
  padding: .55rem .85rem;
  min-height: 40px;
  border-radius: 999px;
  font-size: .85rem; font-weight: 600;
  text-decoration: none;
  display: inline-flex; align-items: center;
  transition: background .15s, color .15s;
}
.nav-links a:hover { background: var(--accent-soft); color: var(--accent-dark); text-decoration: none; }
.nav-links a.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 209, 193, 0.35);
}

/* Bottom nav for mobile */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: #fff;
  border-top: 1px solid var(--border-soft);
  padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(26, 46, 44, 0.06);
  justify-content: space-around;
}
.bottom-nav a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15rem;
  min-height: var(--tap);
  padding: .35rem .25rem;
  border-radius: 12px;
  color: var(--muted);
  font-size: .68rem; font-weight: 650;
  text-decoration: none;
}
.bottom-nav a .ico { font-size: 1.25rem; line-height: 1; }
.bottom-nav a.active { color: var(--accent-dark); background: var(--accent-soft); }
.bottom-nav a:hover { text-decoration: none; color: var(--accent-dark); }

@media (max-width: 720px) {
  .topbar .nav-links { display: none; }
  .bottom-nav { display: flex; }
  .container { padding-bottom: 5.5rem !important; }
}

.container { max-width: 960px; margin: 0 auto; padding: 1.15rem 1rem 3.5rem; }
h1 {
  font-size: 1.55rem; margin-bottom: .2rem;
  font-weight: 750; letter-spacing: -0.02em; color: var(--text);
}
h2 { font-size: 1.1rem; margin: 1.25rem 0 .75rem; font-weight: 700; }
.subtitle { color: var(--muted); font-size: .95rem; margin-bottom: 1.35rem; line-height: 1.45; }
.page-hero {
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.15rem;
  background: linear-gradient(135deg, #00d1c1 0%, #00a89c 100%);
  border-radius: var(--radius);
  color: #fff;
  box-shadow: 0 8px 28px rgba(0, 209, 193, 0.28);
}
.page-hero h1 { color: #fff; margin: 0; }
.page-hero .subtitle { color: rgba(255,255,255,.9); margin: .35rem 0 0; }

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: .85rem;
  margin-bottom: 1.35rem;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.1rem 1rem;
  box-shadow: var(--shadow);
}
.stat .label {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .02em;
}
.stat .value { font-size: 1.4rem; font-weight: 750; margin-top: .3rem; color: var(--text); }
.stat .hint { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.stat.danger { border-color: #f5c4c4; background: #fff8f8; }
.stat.danger .value { color: var(--danger); }
.stat.ok { border-color: #b8e8d0; background: #f4fcf8; }
.stat.ok .value { color: var(--ok); }
.stat.warn { border-color: #f0d9a0; background: #fffbf0; }
.stat.warn .value { color: var(--warn); }
.stat.accent { border-color: #a8ebe4; background: #f2fcfb; }
.stat.accent .value { color: var(--accent-dark); }

/* Soft cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.15rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.card-title {
  font-weight: 700;
  margin-bottom: .9rem;
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  font-size: 1.02rem;
  color: var(--text);
}

/* Forms — large tap targets */
.form-row { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.form-row label { font-size: .88rem; color: var(--text); font-weight: 650; }
.form-row .hint { font-size: .8rem; color: var(--muted); font-weight: 500; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

input, select, textarea {
  background: #fafcfc;
  border: 1.5px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  min-height: var(--tap);
  font-size: 1rem;
  width: 100%;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a7a76' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px var(--accent-soft);
}
textarea { min-height: 88px; resize: vertical; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: var(--accent); color: #fff; border: none;
  border-radius: 999px;
  padding: .85rem 1.35rem;
  min-height: var(--tap);
  font-weight: 700; font-size: .95rem; cursor: pointer;
  font-family: inherit;
  transition: transform .1s, background .15s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(0, 209, 193, 0.32);
}
.btn:hover { background: var(--accent-dim); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn-ghost {
  background: #fff; color: var(--accent-dark);
  border: 1.5px solid var(--border);
  box-shadow: none;
}
.btn-ghost:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn-danger { background: var(--danger); box-shadow: 0 4px 14px rgba(226, 85, 85, 0.25); }
.btn-sm { padding: .55rem .95rem; min-height: 40px; font-size: .85rem; }
.btn-block { width: 100%; }

/* Tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -.25rem; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .85rem .6rem; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
th {
  color: var(--muted); font-weight: 700; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .04em;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg-warm); }

.badge {
  display: inline-block; padding: .3rem .65rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-muted { background: #eef1f1; color: var(--muted); }
.badge-info { background: var(--accent-soft); color: var(--accent-dark); }

.tabs { display: flex; gap: .45rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.tab {
  padding: .7rem 1.1rem;
  min-height: 44px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: #fff; color: var(--muted);
  cursor: pointer; font-size: .9rem; font-weight: 650;
  font-family: inherit;
  transition: all .15s;
}
.tab:hover { border-color: var(--accent); color: var(--accent-dark); }
.tab.active {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
  box-shadow: 0 3px 10px rgba(0, 209, 193, 0.3);
}

.empty {
  color: var(--muted);
  text-align: center;
  padding: 2.25rem 1.25rem;
  font-size: .95rem;
  background: var(--bg-warm);
  border-radius: var(--radius-sm);
  border: 1.5px dashed var(--border);
}
.empty .empty-ico { font-size: 2rem; margin-bottom: .5rem; display: block; }
.empty strong { display: block; color: var(--text); margin-bottom: .25rem; font-size: 1.05rem; }

.toast {
  position: fixed; bottom: 5.5rem; left: 50%; transform: translateX(-50%);
  background: #1a2e2c; color: #fff;
  padding: .9rem 1.35rem; border-radius: 999px; z-index: 100;
  font-size: .92rem; font-weight: 600;
  box-shadow: var(--shadow-md); max-width: 90vw;
}
.toast.ok { background: var(--ok); }
.toast.err { background: var(--danger); }
@media (min-width: 721px) { .toast { bottom: 1.5rem; } }

/* Storefront */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: .85rem;
}
.product-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex; flex-direction: column; gap: .45rem;
  box-shadow: var(--shadow);
  transition: box-shadow .15s, border-color .15s;
}
.product-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.product-card .cat {
  font-size: .68rem; color: var(--accent-dark);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 750;
}
.product-card .name { font-weight: 700; font-size: .95rem; flex: 1; line-height: 1.3; }
.product-card .price { color: var(--muted); font-size: .9rem; font-weight: 600; }

.age-banner {
  background: var(--danger-soft);
  border: 1.5px solid #f0b8b8;
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1.1rem;
  font-size: .9rem;
  color: #8a3030;
}
.age-banner strong { color: var(--danger); }

.cart-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--border-soft);
  padding: .9rem 1rem calc(.9rem + env(safe-area-inset-bottom));
  display: flex; justify-content: space-between; align-items: center;
  gap: .75rem; z-index: 40;
  box-shadow: 0 -6px 24px rgba(26, 46, 44, 0.08);
}
.store-page .cart-bar { bottom: 0; }
@media (max-width: 720px) {
  .store-page .bottom-nav { display: none; }
}

.modal-bg {
  position: fixed; inset: 0; background: rgba(26, 46, 44, 0.45); z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
.modal {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  width: 100%; max-width: 520px;
  max-height: 92vh; overflow-y: auto;
  padding: 1.35rem 1.25rem calc(1.35rem + env(safe-area-inset-bottom));
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-md);
}
@media (min-width: 600px) {
  .modal-bg { align-items: center; padding: 1rem; }
  .modal { border-radius: 20px; }
}

.hidden { display: none !important; }
.flex { display: flex; gap: .6rem; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.mt-1 { margin-top: .65rem; }
.mb-1 { margin-bottom: .65rem; }
.text-muted { color: var(--muted); }
.text-sm { font-size: .88rem; }

.qty-ctrl { display: flex; align-items: center; gap: .45rem; margin-top: .25rem; }
.qty-ctrl button {
  width: var(--tap); height: var(--tap);
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: #fff; color: var(--accent-dark);
  font-size: 1.35rem; font-weight: 600; cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s, border-color .15s;
}
.qty-ctrl button:hover { background: var(--accent-soft); border-color: var(--accent); }
.qty-ctrl span {
  min-width: 1.5rem; text-align: center;
  font-weight: 750; font-size: 1.05rem;
}

.disclaimer {
  font-size: .78rem; color: var(--muted);
  margin-top: 1.75rem; padding-top: 1.1rem;
  border-top: 1px solid var(--border-soft);
  line-height: 1.5;
}

.quick-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.quick-actions .btn { flex: 1 1 140px; }

.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }

.product-card .thumb {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 12px; background: var(--bg-warm);
  display: block; margin-bottom: .15rem;
}
.product-card .thumb-fallback {
  width: 100%; aspect-ratio: 1; border-radius: 12px;
  background: linear-gradient(145deg, #00d1c1, #008f84);
  display: grid; place-items: center; color: #fff;
  font-weight: 800; font-size: .85rem; margin-bottom: .15rem;
}

/* ========== POS cabang (layout touch-friendly, brand turquoise) ========== */
.pos-page {
  background: #f3f6f6;
}
.pos-page .container { max-width: none; }
.pos-page .bottom-nav { z-index: 45; }

.pos-chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding: .65rem 1rem;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 57px;
  z-index: 40;
}
.pos-chrome-left, .pos-chrome-right {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
}
.pos-outlet strong { display: block; font-size: 1rem; line-height: 1.2; }
.pos-outlet-sub { font-size: .75rem; color: var(--muted); }
.pos-online {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #e8f8ef; color: #1aad6f;
  font-size: .78rem; font-weight: 700;
  padding: .35rem .7rem; border-radius: 999px;
}
.pos-online .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #1aad6f; box-shadow: 0 0 0 3px rgba(26,173,111,.2);
}
.pos-open {
  display: inline-flex; align-items: center;
  background: #1aad6f; color: #fff;
  font-size: .78rem; font-weight: 700;
  padding: .4rem .85rem; border-radius: 999px;
}
.pos-branch-label { font-size: .78rem; font-weight: 650; color: var(--muted); }
.pos-branch-select {
  min-height: 40px; padding: .45rem .9rem; width: auto; min-width: 200px;
  font-size: .88rem; background: #fff;
}
.pos-mode-tabs { display: flex; gap: .35rem; }
.pos-mode {
  border: 1.5px solid var(--border);
  background: #fff; color: var(--muted);
  border-radius: 999px; padding: .45rem .9rem;
  min-height: 40px; font-weight: 650; font-size: .85rem;
  cursor: pointer; font-family: inherit;
}
.pos-mode.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,209,193,.3);
}

.pos-layout {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 380px);
  grid-template-areas:
    "catalog cart";
  gap: 0;
  min-height: calc(100vh - 140px);
  align-items: stretch;
}
.pos-catalog { grid-area: catalog; }
.pos-cart { grid-area: cart; }
.pos-catalog {
  padding: .85rem 1rem 2rem;
  overflow: auto;
}
.pos-catalog-toolbar {
  display: flex; flex-direction: column; gap: .65rem;
  margin-bottom: .85rem;
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(180deg, #f3f6f6 70%, transparent);
  padding-bottom: .35rem;
}
.pos-cats {
  display: flex; gap: .4rem; overflow-x: auto;
  padding-bottom: .15rem; -webkit-overflow-scrolling: touch;
}
.pos-chip {
  flex: 0 0 auto;
  border: 1.5px solid var(--border);
  background: #fff; color: var(--muted);
  border-radius: 999px; padding: .5rem 1rem;
  font-size: .85rem; font-weight: 650; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.pos-chip.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.pos-search-wrap {
  display: flex; gap: .4rem; align-items: stretch;
}
.pos-search-wrap input {
  flex: 1; min-height: 44px; padding: .65rem 1rem;
  border-radius: 999px; background: #fff;
}
.pos-search-btn {
  width: 48px; border: none; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 1.1rem;
  font-weight: 700; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,209,193,.3);
}

.pos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .75rem;
}
.pos-grid-empty { grid-column: 1 / -1; }
.pos-card {
  position: relative;
  display: flex; flex-direction: column; gap: .35rem;
  text-align: left;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: .65rem;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s, transform .1s;
  color: var(--text);
}
.pos-card:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.pos-card:active:not(:disabled) { transform: scale(.98); }
.pos-card.out { opacity: .45; cursor: not-allowed; }
.pos-card-img {
  width: 100%; aspect-ratio: 1; object-fit: contain;
  border-radius: 10px; background: var(--bg-warm);
  display: block;
}
.pos-card-name {
  font-weight: 700; font-size: .86rem; line-height: 1.25;
  min-height: 2.2em;
}
.pos-card-price { font-weight: 750; color: var(--text); font-size: .92rem; }
.pos-card-stock {
  align-self: flex-end;
  font-size: .7rem; font-weight: 650; color: var(--muted);
  background: #eef2f2; padding: .2rem .5rem; border-radius: 999px;
}
.pos-fav {
  position: absolute; top: .55rem; left: .55rem; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.92);
  color: #c5d0cf; font-size: .95rem; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.pos-fav.on { color: #e6a800; }

/* Cart sidebar */
.pos-cart {
  display: flex; flex-direction: column;
  background: #fff;
  border-left: 1px solid var(--border-soft);
  position: sticky; top: 113px; /* below chrome only; pelanggan scrolls inside */
  height: calc(100vh - 113px);
  max-height: calc(100vh - 113px);
  min-height: 0;
  overflow: hidden; /* clip; scroll lives in .pos-cart-main + pay-sheet */
}
.pos-cart-main {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}
.pos-cart-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: .9rem 1rem .5rem;
  border-bottom: 1px solid var(--border-soft);
}
.pos-cart-title { font-weight: 750; font-size: 1.05rem; }
.pos-cart-count { font-size: .8rem; color: var(--muted); }
.pos-shortcut {
  font-size: .7rem; color: var(--muted);
  background: #f0f4f4; padding: .25rem .55rem; border-radius: 8px;
}

.pos-customer {
  padding: .55rem .85rem .5rem;
  position: relative; /* dropdown anchor; NOT sticky/fixed */
  top: auto;
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
  box-shadow: none;
  flex: 0 0 auto;
}
.pos-customer-head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-bottom: .35rem; flex-wrap: wrap;
}
.pos-customer-head .pos-customer-label { margin-bottom: 0; }
.pos-customer-label {
  display: block;
  font-size: .75rem;
  font-weight: 750;
  color: var(--accent-dark);
  letter-spacing: .02em;
  margin-bottom: .35rem;
}
.pos-customer-search {
  display: flex; align-items: center; gap: .4rem;
  border: 1.5px solid var(--accent);
  border-radius: 12px; padding: 0 .65rem; background: #f7fffe;
  min-height: 42px;
  width: 100%;
  max-width: none;
}
.pos-customer-search input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  border: none !important;
  background: transparent !important;
  min-height: 42px;
  padding: .4rem 0;
  box-shadow: none !important;
  font-size: 1rem;
}
.pos-customer-search input:focus { box-shadow: none !important; border: none !important; }
.pos-customer-ico { opacity: .85; flex: 0 0 auto; font-size: 1.05rem; }
.pos-customer-clear {
  border: none; background: transparent; font-size: 1.25rem;
  color: var(--muted); cursor: pointer; line-height: 1;
  flex: 0 0 auto; min-width: 32px; min-height: 32px;
}
.pos-customer-results {
  position: absolute; left: .85rem; right: .85rem; top: calc(100% - .15rem);
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-md);
  z-index: 40; max-height: min(40vh, 260px); overflow: auto;
  max-width: none;
}
.pos-cust-opt {
  display: flex; flex-direction: column; gap: .1rem;
  width: 100%; text-align: left; padding: .7rem .85rem;
  border: none; background: #fff; cursor: pointer; font-family: inherit;
  border-bottom: 1px solid var(--border-soft);
}
.pos-cust-opt:hover { background: var(--accent-soft); }
.pos-cust-opt span { font-size: .78rem; color: var(--muted); }
.pos-cust-new { background: #f7fffe; }
.pos-cust-empty { padding: .85rem; font-size: .85rem; color: var(--muted); }
.pos-customer-selected {
  margin-top: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  background: var(--accent-soft); border-radius: 10px; padding: .55rem .7rem;
  font-size: .88rem;
}

.pos-cart-body {
  flex: 0 0 auto;
  overflow: visible;
  padding: .5rem 1rem .65rem;
  min-height: 0;
}
.pos-empty {
  text-align: center; padding: 1.75rem 1rem; color: var(--muted);
}
.pos-empty-art { font-size: 2.5rem; margin-bottom: .4rem; }
.pos-empty strong { display: block; color: var(--text); margin-bottom: .25rem; }
.pos-empty p { font-size: .85rem; }

.pos-lines { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.pos-line {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: .55rem; align-items: start;
  padding: .55rem; border-radius: 12px; background: #f7fafa;
}
.pos-line-img {
  width: 48px; height: 48px; object-fit: contain;
  border-radius: 8px; background: #fff;
}
.pos-line-name { font-weight: 700; font-size: .86rem; line-height: 1.25; }
.pos-line-price { font-size: .78rem; color: var(--muted); }
.pos-line-qty {
  display: flex; align-items: center; gap: .3rem; margin-top: .3rem;
}
.pos-line-qty button {
  width: 32px; height: 32px; border-radius: 10px;
  border: 1.5px solid var(--border); background: #fff;
  color: var(--accent-dark); font-size: 1.05rem; font-weight: 700;
  cursor: pointer; display: grid; place-items: center;
}
.pos-line-qty span { min-width: 1.25rem; text-align: center; font-weight: 750; }
.pos-line-rm { color: var(--danger) !important; border-color: #f0c0c0 !important; }
.pos-line-total { font-weight: 750; font-size: .88rem; white-space: nowrap; }

.pos-cart-foot {
  border-top: 1px solid var(--border-soft);
  padding: .75rem 1rem 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(62vh, 560px);
  overflow: hidden; /* sheet scrolls inside; bar stays */
}
.pos-totals { margin-bottom: .55rem; }
.pos-total-row {
  display: flex; justify-content: space-between;
  font-size: .9rem; margin-bottom: .45rem;
}
.pos-total-pay {
  display: flex; justify-content: space-between; align-items: center;
  padding: .55rem 0 .35rem; border-top: 1px dashed var(--border);
}
.pos-total-label { font-size: .72rem; font-weight: 750; letter-spacing: .04em; color: var(--muted); }
.pos-total-amount { font-size: 1.35rem; font-weight: 800; color: var(--accent-dark); }
.pos-total-badge {
  width: 40px; height: 40px; border-radius: 50%;
  background: #1a2e2c; color: #fff;
  display: grid; place-items: center; font-weight: 800;
}
.pos-pay-method { margin-bottom: .55rem; }
.pos-pay-method label {
  display: block; font-size: .8rem; font-weight: 650; margin-bottom: .3rem;
}
.pos-pay-method select { min-height: 44px; font-size: .9rem; }
.pos-note-row { margin-bottom: .55rem; }
.pos-note-row input { min-height: 40px; font-size: .88rem; }
.pos-pay {
  border-radius: 14px !important;
  font-size: 1rem !important;
  min-height: 52px !important;
}
.pos-enter {
  margin-left: .35rem; font-size: .72rem; font-weight: 650;
  background: rgba(255,255,255,.22); padding: .15rem .45rem; border-radius: 6px;
}
.pos-cart-actions {
  display: flex; gap: .5rem; margin-top: .55rem;
}
.pos-cart-actions .btn { flex: 1; }

.pos-secondary-inner { max-width: 960px; padding-top: 1rem; }

/* Portrait / very narrow: stack catalog then cart (pelanggan lives in cart) */
@media (max-width: 900px) and (orientation: portrait), (max-width: 640px) {
  .pos-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "catalog"
      "cart";
    min-height: auto;
  }
  .pos-cart {
    position: relative; top: auto;
    height: auto; max-height: none;
    border-left: none;
    border-top: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
  }
  .pos-cart-main {
    flex: 0 1 auto;
    max-height: none;
    overflow: visible;
  }
  .pos-customer {
    position: relative;
    top: auto;
    max-width: none;
  }
  .pos-customer-search { max-width: none; }
  .pos-customer-results { max-width: none; }
  .pos-chrome { top: 57px; }
  .pos-catalog { padding-bottom: 1rem; }
  .pos-page:not(.pos-mode-secondary) .bottom-nav { display: none; }
  .pos-cart-body {
    max-height: min(42vh, 360px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .35rem;
  }
  .pos-cart-foot {
    position: sticky; bottom: 0; z-index: 30;
    box-shadow: 0 -6px 20px rgba(26,46,44,.08);
    padding-bottom: calc(.95rem + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
  }
  .pos-cart-actions {
    display: flex;
    gap: .5rem;
    margin-top: .55rem;
    flex-shrink: 0;
  }
  .pos-cart-actions .btn {
    flex: 1;
    min-height: 44px;
    white-space: nowrap;
  }
}

/* Phone/tablet landscape (and mid widths): side-by-side like desktop POS */
@media (orientation: landscape) and (min-width: 641px), (min-width: 901px) {
  .pos-layout {
    grid-template-columns: 1fr minmax(260px, 360px);
    grid-template-areas:
      "catalog cart";
    min-height: calc(100vh - 120px);
  }
  .pos-cart {
    position: sticky;
    top: 113px;
    height: calc(100vh - 113px);
    max-height: calc(100vh - 113px);
    border-left: 1px solid var(--border-soft);
    border-top: none;
    display: flex;
    flex-direction: column;
  }
  .pos-customer { position: relative; top: auto; }
  .pos-cart-main {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
  }
  .pos-cart-body {
    max-height: none;
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
  }
  .pos-cart-foot {
    position: relative;
    bottom: auto;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
    max-height: min(62vh, 560px);
    overflow: hidden;
    padding: .75rem 1rem 0;
  }
  .pos-pay-sheet {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pos-pay-bar {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    background: #fff;
  }
  .pos-page:not(.pos-mode-secondary) .bottom-nav { display: none; }
  .pos-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .pos-chrome { padding: .4rem .75rem; top: 48px; }
  .pos-customer { position: relative; top: auto; padding: .4rem .65rem .4rem; }
  .pos-cart { top: 88px; height: calc(100vh - 88px); max-height: calc(100vh - 88px); }
  .pos-customer-search { min-height: 36px; }
  .pos-customer-search input { min-height: 32px; }
}

@media (max-width: 720px) {
  .pos-chrome { top: 57px; }
  .pos-branch-select { min-width: 140px; flex: 1; }
  .pos-cart-foot .pos-pay { margin-bottom: .15rem; }
  .pos-shortcut { display: none; }
  .pos-customer { position: relative; top: auto; }
}


/* AR ageing */
.ar-chip {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: 999px;
  padding: .45rem .85rem;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 40px;
}
.ar-chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.ar-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.ar-chip-meta {
  font-weight: 500;
  opacity: .85;
  font-size: .72rem;
}
.ar-chip.active .ar-chip-meta { opacity: .95; }
.ar-row-overdue td { background: rgba(226, 85, 85, 0.04); }
.ar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.ar-summary-card .stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
a.stat:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }


/* Login */
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: linear-gradient(160deg, #e8f7f5 0%, #f4f7f8 50%, #dff5f2 100%);
}
.login-wrap { width: 100%; max-width: 420px; }
.login-card { padding: 1.5rem 1.35rem 1.75rem; }
.login-brand {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.25rem;
}
.topbar-right { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: flex-end; }
.nav-user {
  display: flex; align-items: center; gap: .45rem;
  padding: .25rem .35rem .25rem .65rem;
  background: var(--accent-soft);
  border-radius: 999px;
  font-size: .8rem;
}
.nav-user-name { font-weight: 700; color: var(--text); }
.nav-user-role {
  color: var(--accent-dark); font-weight: 600;
  background: #fff; border-radius: 999px; padding: .1rem .45rem;
  font-size: .7rem;
}
.btn-sm { padding: .35rem .7rem; min-height: 32px; font-size: .8rem; }
.input-sm {
  padding: .4rem .55rem; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; width: 100%;
}
.text-danger { color: var(--danger); }
[hidden], .hidden[hidden] { display: none !important; }


/* Product photo management (owner /products.html) */
.prod-photo-cell { min-width: 7.5rem; }
.prod-photo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
}
.prod-thumb {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 10px;
  background: #f3f6f6;
  border: 1px solid var(--border-soft);
}
.prod-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.prod-upload-btn {
  cursor: pointer;
  margin: 0;
}
.prod-upload-btn input { display: none; }
@media (max-width: 720px) {
  .products-table .prod-photo {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
  }
}

.prod-inactive td { opacity: .55; }
.prod-inactive .prod-thumb { filter: grayscale(.4); }
.prod-thumb-placeholder { opacity: .85; }
.prod-thumb-placeholder::after { content: ''; }


/* ========== Menu Utama (Kasair-style slide-out, IQOS turquoise) ========== */
body.mu-open { overflow: hidden; }

.mu-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: 999px;
  padding: .45rem .85rem;
  min-height: 40px;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.mu-open-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.mu-burger {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 16px;
}
.mu-burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.mu-open-label { line-height: 1; }

.bottom-nav .mu-open-btn,
.mu-open-bottom {
  flex: 1;
  flex-direction: column;
  gap: .15rem;
  min-height: var(--tap);
  padding: .35rem .25rem;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 650;
  box-shadow: none;
}
.bottom-nav .mu-open-btn:hover,
.mu-open-bottom:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: none;
}
.bottom-nav .mu-open-btn .ico { font-size: 1.25rem; line-height: 1; }

.mu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10, 24, 28, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .22s ease;
}
.mu-backdrop.is-open { opacity: 1; }
.mu-backdrop[hidden] { display: none !important; }

.mu-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  width: min(420px, 92vw);
  max-width: 100%;
  background: #0f1c1e;
  color: #e8f4f2;
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.35);
  transform: translateX(-104%);
  transition: transform .24s cubic-bezier(.2, .8, .2, 1);
  display: flex;
  flex-direction: column;
}
.mu-panel.is-open { transform: translateX(0); }
.mu-panel[hidden] { display: none !important; }
.mu-panel.is-open[hidden] { display: flex !important; }

.mu-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
}

.mu-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}
.mu-brand {
  display: flex;
  align-items: center;
  gap: .7rem;
}
.mu-brand .brand-mark {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
.mu-title {
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.2;
}
.mu-subtitle {
  font-size: .78rem;
  color: #8aa8a4;
  margin-top: .15rem;
  font-weight: 500;
}
.mu-close {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.mu-close:hover {
  background: rgba(0, 209, 193, 0.18);
  border-color: #00d1c1;
  color: #00d1c1;
}

.mu-search-wrap { margin-bottom: 1rem; }
.mu-search-label {
  display: block;
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7f9e9a;
  margin-bottom: .4rem;
}
.mu-search-box {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: .55rem .75rem;
  transition: border-color .15s, box-shadow .15s;
}
.mu-search-box:focus-within {
  border-color: #00d1c1;
  box-shadow: 0 0 0 3px rgba(0, 209, 193, 0.22);
}
.mu-search-ico { font-size: .95rem; opacity: .85; }
.mu-search {
  flex: 1;
  border: none;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: .92rem;
  outline: none;
  min-width: 0;
}
.mu-search::placeholder { color: #6f8f8b; }
.mu-search-kbd {
  font-family: inherit;
  font-size: .72rem;
  font-weight: 700;
  color: #8aa8a4;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: .15rem .4rem;
  line-height: 1.2;
}
.mu-search-hint {
  font-size: .72rem;
  color: #6f8f8b;
  margin-top: .4rem;
}

.mu-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: .15rem;
  min-height: 0;
}
.mu-section { margin-bottom: 1.15rem; }
.mu-section-head {
  margin-bottom: .55rem;
}
.mu-section-head h3 {
  margin: 0;
  font-size: .95rem;
  font-weight: 750;
  color: #fff;
  letter-spacing: -0.01em;
}
.mu-section-head p {
  margin: .1rem 0 0;
  font-size: .75rem;
  color: #7f9e9a;
  font-weight: 500;
}

.mu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}
.mu-tile {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .7rem .65rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #e8f4f2;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .12s;
  min-height: 64px;
}
.mu-tile:hover {
  background: rgba(0, 209, 193, 0.12);
  border-color: rgba(0, 209, 193, 0.35);
  text-decoration: none;
  color: #fff;
}
.mu-tile.is-active {
  background: #00d1c1;
  border-color: #00d1c1;
  color: #042422;
  box-shadow: 0 4px 16px rgba(0, 209, 193, 0.35);
}
.mu-tile.is-active:hover {
  background: #00b3a5;
  border-color: #00b3a5;
  color: #042422;
}
.mu-tile-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  line-height: 1;
}
.mu-tile.is-active .mu-tile-ico {
  background: rgba(4, 36, 34, 0.18);
}
.mu-tile-body {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-width: 0;
}
.mu-tile-title {
  font-size: .84rem;
  font-weight: 750;
  line-height: 1.2;
}
.mu-tile-desc {
  font-size: .68rem;
  font-weight: 500;
  opacity: .75;
  line-height: 1.3;
}
.mu-tile.is-active .mu-tile-desc { opacity: .85; }

.mu-empty {
  text-align: center;
  color: #8aa8a4;
  font-size: .9rem;
  padding: 1.5rem .5rem;
}

.mu-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .85rem;
  margin-top: .35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: .75rem;
  color: #7f9e9a;
}
.mu-footer a {
  color: #00d1c1;
  font-weight: 700;
  white-space: nowrap;
}
.mu-footer a:hover { color: #5eefe4; }

@media (max-width: 420px) {
  .mu-grid { grid-template-columns: 1fr; }
}
@media (min-width: 721px) {
  .mu-open-label { display: inline; }
}

.topbar-left { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1 1 auto; }
.topbar-left .brand { flex-shrink: 0; }

/* ========== Daftar Produk (Kasair-style layout, IQOS turquoise) ========== */
.container-wide { max-width: 1180px; }

.dp-page { padding-top: 1rem; }

.dp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.dp-crumb {
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #00d1c1;
  margin-bottom: .25rem;
}
.dp-head h1 {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.dp-sub {
  margin: .4rem 0 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.45;
  max-width: 42rem;
}
.dp-head-actions {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}
.dp-inactive-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 650;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: .45rem .85rem;
  min-height: 40px;
}
.dp-inactive-toggle input { width: auto; min-height: auto; margin: 0; }

.dp-add-card {
  border-color: #a8ebe4;
  background: #f2fcfb;
  margin-bottom: 1rem;
}

.dp-filter { margin-bottom: 1rem; padding-bottom: .85rem; }
.dp-filter-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: .85rem 1rem;
  align-items: end;
}
@media (max-width: 720px) {
  .dp-filter-grid { grid-template-columns: 1fr; }
}
.dp-filter .form-row { margin-bottom: 0; }
.dp-search-row {
  display: flex;
  gap: .5rem;
  align-items: stretch;
}
.dp-search-row input { flex: 1; min-width: 0; }
.dp-btn-cari {
  border-radius: 12px;
  background: #1a2e2c;
  box-shadow: none;
  white-space: nowrap;
  padding: .75rem 1.15rem;
}
.dp-btn-cari:hover { background: #0f1c1b; }
.dp-filter-meta { margin-top: .65rem; }

.dp-list-card { padding-top: .5rem; }

.dp-table th {
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  background: #fafcfc;
}
.dp-table td { vertical-align: middle; }
.dp-col-name { min-width: 14rem; }
.dp-col-aksi { width: 1%; white-space: nowrap; }

.dp-name-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}
.dp-name-meta { min-width: 0; }
.dp-prod-name {
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}
.dp-prod-sku {
  font-size: .78rem;
  color: var(--muted);
  font-weight: 600;
  margin-top: .15rem;
  font-variant-numeric: tabular-nums;
}
.dp-table .prod-thumb {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 10px;
  object-fit: contain;
  background: #f3f6f6;
  border: 1px solid var(--border-soft);
}

.dp-kat-pill {
  display: inline-block;
  padding: .28rem .7rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  background: rgba(0, 209, 193, 0.12);
  color: #008f84;
  border: 1px solid rgba(0, 209, 193, 0.28);
  white-space: nowrap;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dp-price-input {
  width: 7.25rem;
  min-height: 36px;
  padding: .4rem .55rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}
.dp-margin {
  font-size: .72rem;
  font-weight: 650;
  margin-top: .25rem;
}
.dp-margin-ok { color: var(--muted); }
.dp-margin-neg { color: var(--danger); }

.dp-unit {
  font-weight: 650;
  color: var(--muted);
  text-transform: lowercase;
}

.dp-aksi-row {
  display: inline-flex;
  align-items: center;
  gap: .18rem;
  flex-wrap: wrap;
  max-width: 7rem;
}
.dp-ico-btn {
  min-width: 36px;
  min-height: 36px;
  width: auto;
  height: auto;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  font-size: .78rem;
  font-weight: 750;
  line-height: 1;
  padding: .35rem .55rem;
  transition: background .15s, border-color .15s, transform .1s;
  white-space: nowrap;
}
.dp-ico-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.dp-ico-btn:active { transform: scale(.96); }
.dp-ico-btn:disabled { opacity: .45; cursor: not-allowed; }
.dp-ico-danger { color: #b42318; border-color: #f3c1bc; background: #fff5f4; font-size: .72rem; font-weight: 800; padding: .35rem .5rem; }
.dp-ico-danger:hover { background: #fde8e6; }
.dp-ico-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 209, 193, 0.3);
}
.dp-ico-primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); }
.dp-ico-muted { color: var(--muted); }
.dp-ico-warn:hover { border-color: var(--warn); background: var(--warn-soft); }
.dp-ico-ok:hover { border-color: var(--ok); background: var(--ok-soft); }

@media (max-width: 900px) {
  .dp-table .dp-price-input { width: 6.25rem; }
}
@media (max-width: 720px) {
  .dp-head { flex-direction: column; }
  .dp-head-actions { width: 100%; }
  .dp-head-actions .btn { flex: 1; }
}

/* In-app notification badges (mutasi pending, etc.) */
.nav-notif-badge {
  position: absolute;
  top: .15rem;
  right: .1rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: #e74c3c;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--surface, #fff);
}
.mu-open-btn { position: relative; }
.mu-open-bottom .nav-notif-badge {
  top: .2rem;
  right: calc(50% - 1.6rem);
}
.mu-tile-ico { position: relative; }
.mu-tile-badge {
  position: absolute;
  top: -.35rem;
  right: -.4rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: #e74c3c;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
  box-shadow: 0 0 0 2px var(--surface, #fff);
}
.mu-tile-badge[hidden] { display: none !important; }
.nav-notif-badge[hidden] { display: none !important; }
.dash-alert-mutasi {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius, 12px);
  background: #fff8e8;
  border: 1px solid #f0d4a0;
  text-decoration: none;
  color: inherit;
  margin-bottom: 1rem;
}
.dash-alert-mutasi:hover { border-color: var(--accent, #00d1c1); }
.dash-alert-mutasi .dash-alert-ico {
  font-size: 1.6rem;
  line-height: 1;
}
.dash-alert-mutasi .dash-alert-title {
  font-weight: 700;
  margin: 0 0 .2rem;
}
.dash-alert-mutasi .dash-alert-hint {
  margin: 0;
  font-size: .9rem;
  color: var(--muted, #666);
}
.dash-alert-mutasi .dash-alert-cta {
  margin-top: .45rem;
  font-size: .9rem;
  font-weight: 700;
  color: var(--accent-dark, #008f85);
}


/* QA UX polish — larger taps, clearer steps, less clutter (mobile-first) */
.btn-lg, button.btn-lg, a.btn-lg {
  min-height: 48px;
  padding: .85rem 1.15rem;
  font-size: 1rem;
  border-radius: 14px;
}
.input-lg, input.input-lg, select.input-lg {
  min-height: 48px;
  font-size: 1.05rem;
  padding: .75rem .9rem;
}
.login-card .btn-block { margin-top: .35rem; }
.login-card .form-row label { font-weight: 650; margin-bottom: .35rem; }
.step-chips {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: .5rem 0 1rem;
}
.step-chips .chip {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 650;
}
.step-chips .chip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.page-hero h1 { font-size: 1.35rem; letter-spacing: -0.02em; }
.page-hero .subtitle { font-size: .92rem; color: rgba(255,255,255,.92); margin-top: .25rem; }
@media (max-width: 640px) {
  .btn { min-height: 44px; }
  .form-row input, .form-row select, .form-row textarea {
    font-size: 16px; /* avoid iOS zoom */
  }
  .card { padding: 1rem; }
  .table-wrap { margin: 0 -.25rem; }
}

/* ========== Shared polish 2026-10 — mobile consistency ========== */

/* Tap targets: nav links ≥44px */
.nav-links a {
  min-height: 44px;
  padding: .65rem .95rem;
}
.mu-open-btn {
  min-height: 44px;
}

/* Shared searchable product picker (visits / mutasi / consign) */
.prod-picker { position: relative; }
.prod-picker-btn {
  width: 100%;
  text-align: left;
  padding: .7rem .85rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fafcfc;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: var(--tap);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.prod-picker-btn:hover { border-color: var(--accent); }
.prod-picker-btn:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.prod-picker-btn .ph { color: var(--muted); font-weight: 500; }
.prod-picker-btn .lab { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.prod-picker-btn .chev { color: var(--muted); flex-shrink: 0; font-size: .85rem; }
.prod-picker-panel {
  display: none;
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 4px);
  z-index: 45;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-height: min(300px, 55vh);
  overflow: hidden;
  flex-direction: column;
}
.prod-picker.open .prod-picker-panel { display: flex; }
.prod-picker-search {
  padding: .7rem .85rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-soft) !important;
  border-radius: 0 !important;
  width: 100%;
  font: inherit;
  font-size: 1rem !important;
  min-height: 44px !important;
  background: #fff !important;
  box-shadow: none !important;
}
.prod-picker-search:focus { box-shadow: none !important; }
.prod-picker-list { overflow: auto; -webkit-overflow-scrolling: touch; max-height: 240px; }
.prod-picker-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: .75rem .85rem;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  background: #fff;
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
  color: var(--text);
}
.prod-picker-opt:hover,
.prod-picker-opt:focus { background: var(--accent-soft); outline: none; }
.prod-picker-opt .sku { color: var(--muted); font-size: .85em; font-weight: 500; }
.prod-picker-empty { padding: 1rem .85rem; color: var(--muted); font-size: .9rem; text-align: center; }

/* Filter / form toolbars — 2-col on tablet+ */
.filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem 1rem;
  align-items: end;
  margin-bottom: .85rem;
}
.filter-grid .form-row { margin-bottom: 0; }
.filter-grid .filter-span-2 { grid-column: 1 / -1; }
.filter-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 600px) {
  .filter-grid { grid-template-columns: 1fr; }
}

/* Sticky bottom action bar (above bottom-nav on mobile) */
.sticky-bar {
  position: sticky;
  bottom: 0;
  z-index: 35;
  margin: 1rem -.25rem 0;
  padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-soft);
  box-shadow: 0 -6px 20px rgba(26, 46, 44, 0.07);
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 720px) {
  .sticky-bar { bottom: 3.6rem; margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
}
.sticky-bar .btn { flex: 1 1 140px; }

/* Section title with optional count pill */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: 1.25rem 0 .75rem;
}
.section-head h2 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.section-head .count-pill {
  font-size: .75rem;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent-dark);
  padding: .25rem .6rem;
  border-radius: 999px;
}

/* Mobile-friendly data cards (alternative to wide tables) */
.data-cards { display: flex; flex-direction: column; gap: .65rem; }
.data-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: .9rem 1rem;
  box-shadow: var(--shadow);
}
.data-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .35rem;
}
.data-card-title { font-weight: 700; font-size: .98rem; line-height: 1.3; }
.data-card-meta { font-size: .82rem; color: var(--muted); line-height: 1.4; }
.data-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-top: .65rem;
  flex-wrap: wrap;
}
.data-card-amount { font-weight: 750; font-size: 1.05rem; color: var(--accent-dark); }

/* Hide desktop table on phone when paired with .data-cards */
@media (max-width: 640px) {
  .table-desktop-only { display: none !important; }
  .cards-mobile-only { display: flex !important; }
}
@media (min-width: 641px) {
  .cards-mobile-only { display: none !important; }
  .table-desktop-only { display: block; }
}

/* Quick-action chips on dashboard — clearer grouping */
.qa-group { margin-bottom: 1rem; }
.qa-group-label {
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .45rem;
}
.qa-group .quick-actions { margin: 0; }

/* Action button rows — full-width on phone */
@media (max-width: 640px) {
  .action-row { display: flex; flex-direction: column; gap: .5rem; }
  .action-row .btn { width: 100%; }
  .card-title { flex-wrap: wrap; }
}

/* Clearer empty + tip */
.tip {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.45;
}
.hint-box {
  background: var(--accent-soft);
  border: 1px solid rgba(0, 209, 193, 0.28);
  border-radius: var(--radius-sm);
  padding: .75rem .9rem;
  font-size: .88rem;
  color: var(--accent-dark);
  margin: .65rem 0;
}

/* Ensure table cells don't crush on phone (scroll already on .table-wrap) */
.table-wrap table { min-width: 480px; }
.table-wrap.table-compact table { min-width: 0; }
@media (max-width: 640px) {
  .table-wrap th, .table-wrap td { padding: .7rem .5rem; font-size: .85rem; }
}

/* Page without hero — consistent title spacing */
.page-title-block { margin-bottom: 1.15rem; }
.page-title-block h1 { margin-bottom: .25rem; }
.page-title-block .subtitle { margin-bottom: 0; }


/* Photo lightbox — inline view, no download */
.photo-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
}
.photo-lightbox.open { display: flex; }
.photo-lightbox-backdrop {
  position: absolute; inset: 0; border: 0; padding: 0; margin: 0;
  background: rgba(10, 24, 22, 0.78); cursor: pointer;
}
.photo-lightbox-panel {
  position: relative; z-index: 1; max-width: min(96vw, 920px);
  max-height: 92vh; display: flex; align-items: center; justify-content: center;
}
.photo-lightbox-img {
  display: block; max-width: 96vw; max-height: 88vh;
  border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.35);
  background: #111; object-fit: contain;
}
.photo-lightbox-close {
  position: absolute; top: -0.35rem; right: -0.35rem; z-index: 2;
  width: 2.4rem; height: 2.4rem; border-radius: 999px; border: 0;
  background: #fff; color: #1a2e2c; font-size: 1.5rem; line-height: 1;
  cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.25);
  display: grid; place-items: center;
}
.photo-lightbox-close:hover { background: var(--accent-soft, #e6faf8); }
button.btn-lihat-foto,
a.btn-lihat-foto {
  background: none; border: 0; padding: 0; margin: 0;
  color: var(--accent-dark); font-weight: 700; font: inherit;
  cursor: pointer; text-decoration: none;
}
button.btn-lihat-foto:hover,
a.btn-lihat-foto:hover { color: var(--accent-dim); text-decoration: underline; }
img[data-photo] { cursor: zoom-in; }

.photo-lightbox-msg {
  position: relative; z-index: 1; max-width: min(90vw, 420px);
  margin: 0; padding: 1.25rem 1.4rem; border-radius: 12px;
  background: #fff; color: #1a2e2c; font-weight: 700; text-align: center;
  line-height: 1.45; box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.photo-lightbox-msg[hidden] { display: none !important; }

/* t247u: phone POS — thin fixed pay bar (Bayar always thumb-reachable) */
.pos-cart { align-self: start; } /* sticky in grid needs non-stretched item */
.pos-pay-sheet {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: .35rem;
}
.pos-pay-bar {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  width: 100%;
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #fff;
  padding: .55rem 0 calc(.65rem + env(safe-area-inset-bottom, 0px));
  margin-top: .15rem;
  border-top: 1px solid var(--border-soft);
  box-shadow: 0 -4px 14px rgba(26,46,44,.06);
}
.pos-pay-bar .pos-pay { flex: 1 1 auto; margin: 0; }

@media (max-width: 900px) and (orientation: portrait), (max-width: 640px) {
  /* compact sticky chrome */
  .pos-chrome { position: sticky; top: 57px; z-index: 45; padding: .35rem .6rem; gap: .35rem .5rem; flex-wrap: nowrap; }
  .pos-chrome-left { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
  .pos-outlet { min-width: 0; }
  .pos-outlet strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pos-outlet-sub, .pos-online, .pos-open, .pos-branch-label { display: none; }
  .pos-chrome-right { flex-wrap: nowrap; gap: .35rem; }
  .pos-branch-select { min-width: 0; max-width: 42vw; min-height: 36px; font-size: .82rem; }
  .pos-mode { padding: .3rem .5rem; font-size: .78rem; }
  .pos-customer { position: relative; top: auto; }

  /* Override older sticky-foot rules: thin CTA only, no 62vh panel */
  .pos-cart-foot {
    position: fixed !important;
    left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; flex-direction: column;
    padding: 0 !important;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Expandable details ABOVE the bar (does not bury Bayar) */
  .pos-pay-sheet {
    display: none;
    order: 1;
    position: absolute;
    left: 0; right: 0;
    bottom: 100%;
    max-height: min(48vh, 420px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-top: 1px solid var(--border-soft);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 28px rgba(26,46,44,.16);
    padding: .65rem .75rem .55rem;
  }
  .pos-cart-foot.is-pay-open .pos-pay-sheet { display: block; }
  .pos-pay-sheet .pos-totals { margin-bottom: .35rem; }
  .pos-pay-sheet .pos-total-amount { font-size: 1.15rem; }
  .pos-pay-sheet .pos-pay-method { margin-bottom: .4rem; }
  .pos-pay-sheet .pos-note-row { margin-bottom: .4rem; }
  .pos-pay-sheet .pos-cart-actions { margin-top: .35rem; }
  .pos-pay-sheet .pos-cart-actions .btn { min-height: 38px; }
  .pos-pay-chips { grid-template-columns: repeat(4, 1fr) !important; gap: .3rem !important; }
  .pos-pay-chip { padding: .3rem .2rem !important; min-height: 42px !important; }
  .pos-pay-chip .hint { display: none; }
  .pos-pay-chip .ico { font-size: 1rem !important; }
  .pos-pay-chip .lbl { font-size: .72rem !important; }

  /* Thin always-visible CTA: Total + metode + Bayar (~56–72px + safe-area) */
  .pos-pay-bar {
    order: 2;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    gap: .45rem;
    min-height: 56px;
    max-height: none;
    padding: .4rem .65rem calc(.4rem + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--border-soft);
    box-shadow: 0 -6px 20px rgba(26,46,44,.12);
  }
  .pos-pay-bar-meta {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    max-width: 48%;
    border: none;
    background: transparent;
    padding: .1rem .15rem;
    margin: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: 10px;
  }
  .pos-pay-bar-meta:active { background: #f0fdfb; }
  .pos-pay-bar-total .lbl {
    display: block;
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .04em;
    color: var(--muted);
    line-height: 1.1;
  }
  .pos-pay-bar-total .amt {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--accent-dark);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }
  .pos-pay-bar-method {
    display: block;
    margin-top: .12rem;
    font-size: .7rem;
    font-weight: 700;
    color: #0b9e93;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pos-pay-bar .pos-pay {
    flex: 1 1 52%;
    min-width: 7.5rem;
    min-height: 56px !important;
    max-height: 72px;
    margin: 0 !important;
    border-radius: 14px !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    padding: .55rem .75rem !important;
  }
  .pos-pay-bar .pos-enter { display: none; } /* save space on phone */

  /* Room for thin bar only (not a tall 62vh panel) */
  #mode-pos.pos-layout { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 12px); }
  .pos-mode-secondary .pos-cart-foot,
  .pos-cart-foot:empty { display: none; }
}

/* phone landscape short: keep side cart, Bayar still in foot at column bottom */
@media (orientation: landscape) and (max-height: 500px) {
  .pos-outlet-sub, .pos-online, .pos-open { display: none; }
  .pos-cart { align-self: start; position: sticky; overflow: hidden; }
  .pos-cart-foot {
    padding: .45rem .6rem 0;
    max-height: min(70vh, 420px);
    overflow: hidden;
  }
  .pos-pay-sheet { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .pos-pay-chip .hint { display: none; }
  .pos-pay-chip { padding: .3rem !important; }
  .pos-pay-bar .pos-pay { min-height: 48px !important; }
}

/* Narrow landscape phones still get thin fixed bar for reachability */
@media (max-width: 640px) and (orientation: landscape) {
  .pos-pay-bar .pos-pay { min-height: 52px !important; }
}

/* ========== UI polish 2026-10-26 — cleaner, friendlier (all menus) ========== */

/* Safe-area + sticky topbar breathing room */
.topbar {
  padding-top: calc(.75rem + env(safe-area-inset-top, 0px));
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
}
.container {
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
}
@media (min-width: 960px) {
  .container { max-width: 1040px; padding-top: 1.35rem; }
}

/* Typography hierarchy */
h1 { font-size: clamp(1.35rem, 2.5vw, 1.65rem); }
h2 { font-size: 1.05rem; color: var(--text); }
.subtitle { font-size: .92rem; max-width: 46rem; }
.page-hero {
  padding: 1rem 1.15rem;
  margin-bottom: 1.1rem;
}
.page-hero h1 { font-size: clamp(1.25rem, 2.2vw, 1.45rem); }
/* Accent bar via border-left — NOT ::before (that became a flex item and
   space-between shoved titles like "Pilih partner" to the far right). */
.card-title {
  font-size: 1rem;
  padding-bottom: .15rem;
  padding-left: .65rem;
  border-bottom: 1px solid transparent;
  border-left: 3px solid var(--accent);
  margin-bottom: .85rem;
  align-items: center;
  gap: .45rem;
}

/* Cards / lists — calmer density */
.card {
  padding: 1.1rem 1.15rem;
  margin-bottom: .9rem;
}
.stats { gap: .75rem; margin-bottom: 1.15rem; }
.stat { padding: 1rem .95rem; }
.stat .label { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
.stat .value { font-size: clamp(1.2rem, 2.5vw, 1.4rem); font-variant-numeric: tabular-nums; }

/* Button hierarchy — primary teal, secondary quiet, danger clear */
.btn {
  letter-spacing: .01em;
  box-shadow: 0 3px 12px rgba(0, 209, 193, 0.28);
}
.btn-ghost {
  background: #fff;
  color: var(--text);
  border: 1.5px solid var(--border);
  box-shadow: none;
  font-weight: 650;
}
.btn-ghost:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.btn-danger { color: #fff; }
.btn-sm { min-height: 40px; padding: .5rem .9rem; }
.action-row, .flex.gap-btns, .filter-actions {
  gap: .55rem;
}
.filter-actions { margin-top: .35rem; }
.filter-actions .btn { min-width: 7.5rem; }

/* Forms — clearer labels, consistent fields */
.form-row { gap: .35rem; margin-bottom: .9rem; }
.form-row label {
  font-size: .84rem;
  color: var(--text);
  font-weight: 700;
}
.form-row .hint, .tip { font-size: .82rem; line-height: 1.45; }
input, select, textarea {
  background: #fff;
  border-color: #cfe3e0;
}
input::placeholder, textarea::placeholder { color: #8aa8a4; }

/* Tabs — clearer selected state */
.tabs { gap: .4rem; margin-bottom: 1rem; }
.tab {
  padding: .65rem 1rem;
  font-size: .88rem;
}
.tab.active { font-weight: 750; }

/* Tables — readable on laptop, scroll-friendly on phone */
.table-wrap {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: #fff;
  margin: 0;
  padding: 0;
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrap table { min-width: 520px; }
.table-wrap.table-compact table,
.table-wrap.table-narrow table { min-width: 0; }
.table-wrap th {
  background: #f3faf9;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: .7rem .65rem;
  white-space: nowrap;
}
.table-wrap td { padding: .75rem .65rem; }
.table-wrap tr:hover td { background: #f7fcfb; }
@media (max-width: 640px) {
  .table-wrap {
    margin-left: -.15rem;
    margin-right: -.15rem;
    border-radius: 12px;
  }
  .table-wrap::after {
    content: '';
    pointer-events: none;
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 1.25rem;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.85));
    border-radius: 0 12px 12px 0;
  }
  .table-wrap th, .table-wrap td { padding: .65rem .5rem; font-size: .84rem; }
}

/* Empty states — friendlier */
.empty {
  padding: 2rem 1.15rem;
  background: linear-gradient(180deg, #f7fcfb, #eef6f5);
  border: 1.5px dashed #c5e4df;
  line-height: 1.45;
}
.empty .empty-ico { font-size: 2.15rem; margin-bottom: .55rem; }
.empty strong { font-size: 1.02rem; margin-bottom: .3rem; }

/* Toast — readable above bottom nav */
.toast {
  bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
  padding: .85rem 1.25rem;
  border-radius: 16px;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.35;
  max-width: min(92vw, 420px);
  text-align: center;
  box-shadow: 0 10px 28px rgba(26, 46, 44, 0.22);
  word-break: break-word;
}
.toast.ok { background: #149a64; }
.toast.err { background: #d64545; }
.toast.warn { background: #c48408; }
@media (min-width: 721px) {
  .toast { bottom: 1.75rem; }
}

/* Bottom nav — clearer labels + tap targets */
.bottom-nav {
  padding: .35rem .4rem calc(.35rem + env(safe-area-inset-bottom, 0px));
  gap: .15rem;
}
.bottom-nav a,
.bottom-nav .mu-open-btn {
  min-height: 52px;
  border-radius: 14px;
  font-size: .7rem;
  gap: .2rem;
}
.bottom-nav a .ico,
.bottom-nav .mu-open-btn .ico { font-size: 1.3rem; }
.bottom-nav a.active {
  color: var(--accent-dark);
  background: var(--accent-soft);
  font-weight: 750;
}

/* Top nav links — slightly clearer */
.nav-links { gap: .25rem; }
.nav-links a {
  gap: .35rem;
}
.nav-links a .ico { font-size: 1rem; line-height: 1; }

/* Menu Utama — less clutter, clearer tiles */
.mu-panel { width: min(440px, 94vw); }
.mu-panel-inner {
  padding-top: calc(1rem + env(safe-area-inset-top, 0px));
}
.mu-tile {
  min-height: 68px;
  padding: .75rem .7rem;
  gap: .6rem;
}
.mu-tile-ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 1.1rem;
  background: rgba(0, 209, 193, 0.14);
}
.mu-tile-title { font-size: .88rem; }
.mu-tile-desc {
  font-size: .7rem;
  opacity: .78;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mu-section-head h3 { font-size: 1rem; }
.mu-section-head p { font-size: .72rem; }
.mu-search-hint { display: none; } /* less clutter */
@media (max-width: 380px) {
  .mu-grid { grid-template-columns: 1fr; }
}

/* Dashboard quick actions — tile-like, not a button soup */
.qa-group { margin-bottom: 1.15rem; }
.qa-group:last-child { margin-bottom: 0; }
.qa-group-label {
  font-size: .7rem;
  margin-bottom: .55rem;
  color: #4f736f;
}
.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: .55rem;
}
.quick-actions .btn {
  flex: none;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  border-radius: 14px;
  min-height: 48px;
  padding: .7rem .9rem;
  font-size: .88rem;
  box-shadow: none;
}
.quick-actions .btn.btn-lg {
  min-height: 52px;
  font-size: .95rem;
  box-shadow: 0 4px 14px rgba(0, 209, 193, 0.28);
}
.quick-actions .btn-ghost {
  background: #f7fbfb;
  border-color: var(--border-soft);
}
.quick-actions .btn-ghost:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.qa-tile {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.qa-tile .qa-ico {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
}
.qa-tile .qa-lab {
  min-width: 0;
  line-height: 1.25;
  font-weight: inherit;
}

/* Data cards — clearer foot actions */
.data-card {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
}
.data-card-foot {
  margin-top: .75rem;
  padding-top: .65rem;
  border-top: 1px solid var(--border-soft);
  gap: .45rem;
}
.data-card-foot .btn { min-height: 40px; }

/* Sticky section heads inside long pages */
.section-head {
  position: sticky;
  top: calc(56px + env(safe-area-inset-top, 0px));
  z-index: 20;
  background: rgba(244, 247, 248, 0.92);
  backdrop-filter: blur(8px);
  padding: .45rem 0;
  margin-top: 1rem;
  margin-bottom: .55rem;
}

/* Modal — easier to dismiss / read on phone */
.modal {
  padding-top: 1.25rem;
}
.modal .card-title,
.modal h2 {
  margin-bottom: .85rem;
}

/* Hint / info boxes */
.hint-box {
  padding: .8rem .95rem;
  line-height: 1.45;
}

/* Reduce cramped inline button clusters in cards */
.card .flex {
  flex-wrap: wrap;
  gap: .55rem;
}
.card .flex .btn { flex: 1 1 auto; min-width: min(100%, 9rem); }
@media (min-width: 721px) {
  .card .flex .btn { flex: 0 1 auto; min-width: 0; }
}

/* Laptop comfort: denser tables, airy cards */
@media (min-width: 900px) {
  .card { padding: 1.2rem 1.3rem; }
  .table-wrap th, .table-wrap td { padding: .8rem .75rem; }
  .mu-tile { min-height: 72px; }
}

/* Phone: keep primary actions full-width, avoid tiny cramped chips */
@media (max-width: 640px) {
  .page-hero { border-radius: 14px; padding: .95rem 1rem; }
  .card { border-radius: 14px; padding: .95rem 1rem; }
  .action-row .btn,
  .filter-actions .btn { width: 100%; }
  .filter-actions { flex-direction: column; align-items: stretch; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .15rem; }
  .tab { flex: 0 0 auto; white-space: nowrap; }
  .quick-actions { grid-template-columns: 1fr 1fr; }
  .quick-actions .btn { font-size: .84rem; padding: .65rem .75rem; }
}

/* Preserve POS thin pay bar — do not fight those rules */
.pos-page .toast {
  bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
}

/* ========== Olsera-inspired UX (patterns only, teal brand) 2026-10-26 ========== */

/* POS: clearer category chips + search (Olsera V3 product area) */
.pos-chip {
  min-height: 40px;
  padding: .55rem 1.05rem;
  font-size: .88rem;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(26,46,44,.04);
}
.pos-chip.active {
  box-shadow: 0 3px 10px rgba(0, 209, 193, 0.35);
}
.pos-cats {
  gap: .45rem;
  scrollbar-width: thin;
}
.pos-search-wrap input {
  min-height: 46px;
  font-size: 1rem;
  border: 1.5px solid var(--border);
  box-shadow: 0 1px 4px rgba(26,46,44,.04);
}
.pos-search-wrap input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.pos-card {
  min-height: 0;
  padding: .7rem;
}
.pos-card-name { font-size: .88rem; }
.pos-card-price { color: var(--accent-dark); font-size: .95rem; }

/* POS: Add Customer as prominent as Olsera "Add Customer" */
.pos-cart .pos-customer-head #btnAddCustomer {
  min-height: 34px;
  padding: .3rem .7rem;
  font-size: .78rem;
}
.pos-customer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .45rem;
}
#btnAddCustomer,
.pos-customer-head #btnAddCustomer {
  flex-shrink: 0;
  min-height: 40px;
  padding: .45rem .95rem;
  font-weight: 750;
  font-size: .85rem;
  border-radius: 999px;
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 3px 10px rgba(0, 209, 193, 0.32) !important;
}
#btnAddCustomer:hover {
  background: var(--accent-dim) !important;
  color: #fff !important;
}

/* POS cart totals stack (subtotal → total) clearer */
.pos-totals {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .35rem 0 .15rem;
}
.pos-totals .pos-total-row,
.pos-totals .r-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  font-size: .88rem;
  color: var(--muted);
}
.pos-totals .pos-total-amount,
.pos-total-amount {
  font-size: 1.35rem !important;
  font-weight: 800;
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Home: summary cards + notification badges (Olsera dashboard vibe) */
.stats .stat {
  border-radius: 16px;
  transition: border-color .15s, box-shadow .15s;
}
.stats a.stat:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.dash-alert-mutasi {
  border-radius: 16px;
  border-width: 1.5px;
  box-shadow: var(--shadow);
}
.nav-notif-badge,
.mu-tile-badge,
.badge-count {
  background: var(--danger) !important;
  color: #fff !important;
  font-weight: 800;
}

/* Lists: compact rows + status + primary actions (mutasi / partner / CRM) */
.mutasi-card {
  border-radius: 16px;
  padding: 1rem 1.1rem;
}
.mutasi-card.pending {
  border-color: #f0d4a0;
  background: linear-gradient(180deg, #fffdf8, #fff);
  box-shadow: 0 2px 12px rgba(212, 146, 10, 0.08);
}
.mutasi-card .card-title {
  margin-bottom: .55rem;
}
.mutasi-card .action-row,
.mutasi-card .flex {
  gap: .5rem;
  margin-top: .65rem;
}
.mutasi-card .btn-lg {
  min-height: 48px;
}
.list-row,
.crm-row,
.partner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem .15rem;
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.list-row:last-child,
.crm-row:last-child { border-bottom: none; }
.list-row-main { min-width: 0; flex: 1; }
.list-row-title { font-weight: 750; font-size: .95rem; line-height: 1.25; }
.list-row-meta { font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.list-row-actions {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Forms: labeled + primary CTA full-width on mobile / right-aligned on laptop */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  justify-content: flex-end;
  align-items: center;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border-soft);
}
.form-actions .btn[type="submit"],
.form-actions .btn.primary,
.form-actions .btn:not(.btn-ghost):not(.btn-danger):first-child {
  min-width: 9rem;
}
@media (max-width: 640px) {
  .form-actions { flex-direction: column-reverse; align-items: stretch; }
  .form-actions .btn { width: 100%; }
  .mutasi-card .btn-lg { width: 100%; }
}

/* Simple search bars (Olsera-like) */
.search-bar,
.card input[type="search"],
.form-row input[type="search"] {
  border-radius: 999px;
  min-height: 46px;
  padding-left: 1.1rem;
  background: #fff;
}

/* Nota / invoice print sheet — clean header + totals */
.doc-sheet {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 1.35rem 1.4rem;
  box-shadow: var(--shadow);
  max-width: 720px;
  margin: 0 auto 1.5rem;
}
.doc-sheet .doc-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: .85rem;
  margin-bottom: .85rem;
  border-bottom: 2px solid var(--accent);
}
.doc-sheet .doc-brand {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text);
}
.doc-sheet .doc-brand small {
  display: block;
  font-weight: 600;
  font-size: .78rem;
  color: var(--muted);
  margin-top: .15rem;
}
.doc-sheet table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.doc-sheet th {
  text-align: left;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  padding: .55rem .35rem;
  border-bottom: 1px solid var(--border);
}
.doc-sheet td {
  padding: .55rem .35rem;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
.doc-sheet .doc-totals {
  margin-top: 1rem;
  margin-left: auto;
  max-width: 260px;
}
.doc-sheet .doc-totals .row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .25rem 0;
  font-size: .92rem;
}
.doc-sheet .doc-totals .row.grand {
  margin-top: .35rem;
  padding-top: .55rem;
  border-top: 2px solid var(--text);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--accent-dark);
}
.doc-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
  align-items: center;
}
@media print {
  .doc-sheet {
    border: none;
    box-shadow: none;
    border-radius: 0;
    max-width: none;
    padding: 0;
  }
}

/* Partner / CRM card lists denser + clearer primary CTA */
#listWrap .data-card .btn,
.partner-list .btn {
  min-height: 40px;
}


/* Produk — sticky harga jual/partner + compact icon Aksi (ui-20261026e) */
.products-table.dp-table { border-collapse: separate; border-spacing: 0; }
.products-table .dp-col-hjual,
.products-table .dp-hjual {
  position: sticky;
  right: calc(7.25rem + 7.25rem + 3rem);
  z-index: 2;
  background: #fff;
  min-width: 7.25rem;
  box-shadow: -6px 0 10px -8px rgba(15, 40, 38, 0.12);
}
.products-table .dp-col-partner,
.products-table .dp-partner {
  position: sticky;
  right: calc(7.25rem + 3rem);
  z-index: 2;
  background: #fff;
  min-width: 7.25rem;
}
.products-table .dp-col-unit,
.products-table .dp-unit-sticky {
  position: sticky;
  right: 7.25rem;
  z-index: 2;
  background: #fff;
  min-width: 3rem;
  text-align: center;
}
.products-table .dp-col-aksi,
.products-table .dp-aksi {
  position: sticky;
  right: 0;
  z-index: 3;
  background: #fff;
  box-shadow: -8px 0 12px -8px rgba(15, 40, 38, 0.18);
  min-width: 7.25rem;
  width: 7.25rem;
  max-width: 7.75rem;
  vertical-align: middle;
  padding-left: .3rem;
  padding-right: .3rem;
}
.products-table thead .dp-col-hjual,
.products-table thead .dp-col-partner,
.products-table thead .dp-col-unit {
  z-index: 4;
  background: #f3faf9;
}
.products-table thead .dp-col-aksi {
  z-index: 5;
  background: #f3faf9;
}
.products-table tr:hover .dp-hjual,
.products-table tr:hover .dp-partner,
.products-table tr:hover .dp-unit-sticky,
.products-table tr:hover .dp-aksi { background: #f7fcfb; }
.products-table .dp-aksi-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .18rem;
  align-items: center;
  max-width: 7rem;
}
.products-table .dp-aksi-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  min-height: 28px;
  padding: 0 !important;
  border-radius: 8px;
  font-size: 0;
  line-height: 0;
}
.products-table .dp-aksi-btn svg {
  width: 14px;
  height: 14px;
  display: block;
  pointer-events: none;
}


/* qa1: produk sticky mobile — only harga jual + aksi stick (hindari cutoff) */
@media (max-width: 900px) {
  .products-table .dp-col-partner,
  .products-table .dp-partner,
  .products-table .dp-col-unit,
  .products-table .dp-unit-sticky {
    position: static;
    right: auto;
    box-shadow: none;
    min-width: 0;
  }
  .products-table .dp-col-hjual,
  .products-table .dp-hjual {
    right: 7.25rem;
  }
}

/* pt360u: branch title (IQOS 168 BTC / pos-chrome) scrolls away — not sticky */
.pos-chrome { position: static !important; top: auto !important; }
.pos-cart { top: 57px; height: calc(100vh - 57px); max-height: calc(100vh - 57px); }
@media (max-width: 900px) and (orientation: portrait), (max-width: 640px) {
  .pos-chrome { position: static !important; }
}

/* pt361u/pt362u: harga sejajar satu baris — nama fixed 2 baris, harga pinned bawah */
.pos-grid { align-items: stretch; }
.pos-card { display: flex !important; flex-direction: column; height: 100%; }
.pos-card-img { flex: 0 0 auto; }
.pos-card-name {
  flex: 0 0 auto;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; line-height: 1.25; height: 2.5em; min-height: 2.5em;
}
.pos-card-price { margin-top: auto; line-height: 1.2; white-space: nowrap; }
.pos-card-stock { flex: 0 0 auto; }

/* pt363u 2026-10-27: side cart full height, Keranjang & Total Bayar split 50/50 */
@media (orientation: landscape) and (min-width: 641px), (min-width: 901px) {
  .pos-cart { align-self: stretch; }
  .pos-cart-main {
    flex: 1 1 0 !important; min-height: 0 !important;
    overflow: hidden !important; /* single scroller = cart body */
  }
  .pos-cart-main .pos-customer, .pos-cart-head { flex: 0 0 auto; }
  .pos-cart-body {
    flex: 1 1 0 !important; min-height: 0 !important;
    max-height: none !important; overflow-y: auto !important;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .pos-cart-foot {
    flex: 1 1 0 !important; min-height: 0 !important;
    max-height: none !important; overflow: hidden !important;
  }
  .pos-pay-sheet { flex: 1 1 0 !important; min-height: 0; overflow-y: auto; }
  .pos-pay-bar { flex: 0 0 auto; }
}