/* Beer POS — Unified Design System v12 | App Shell & Components
   Changelog v12 (App Shell & Components):
   - Add App Shell CSS (.app, .app-header, .app-main, .app-bottom-nav)
   - Add Page and Section components (.page, .section)
   - Add BEM component styles (product-card, customer-card, total-bar)
   - All components use CSS variables for theming
*/

/* DESIGN TOKENS — canonical source of truth */
@import url('/css/tokens.css');
@import url('/core/theme.css');

/* =====================   BASE STYLES — Binance Finance Clean === */
*, *::before, *::after {
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    color var(--transition-normal);
}

html { overflow-x: clip; height: 100%; }

body {
  background: var(--bg);
  color: var(--text-primary);
  margin: 0;
  overflow-y: auto;
  overflow-x: clip;
  max-width: 100vw;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.5;
  /* Smooth theme transition — triggered by dark-mode.js apply() */
  transition: background 0.2s ease, color 0.2s ease;
}

/* Standard app body — header + bottom nav
   Padding is handled by page-level wrappers (page-content / app-body).
   body--app itself has NO top padding — avoids double-spacing. */
.body--app {
  min-height: 100dvh;
  padding-bottom: calc(var(--bottomnav-height) + var(--safe-area-bottom));
  display: flex;
  flex-direction: column;
}

/* Main content area */
.main-content {
  padding-top: calc(var(--header-height) + var(--safe-area-top));
  padding-bottom: calc(var(--bottomnav-height) + var(--safe-area-bottom));
  padding-left: 16px;
  padding-right: 16px;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}

/* Content wrapper — padding-top accounts for fixed header height.
   Single source of truth for all page content positioning. */
.page-content {
  padding-top: calc(var(--header-height) + var(--safe-area-top));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  /* bottom padding handled by .app-main (ONE source of truth) */
}

/* Page enter animation */
.page-enter {
  animation: page-fade-in 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Remove old pt-14 hardcode */
body .pt-14, .pt-14 {
  padding-top: calc(var(--header-height) + var(--safe-area-top)) !important;
}

/* =========================   TOPBAR — Fixed, glass blur Binance style === */
.topbar {
  height: calc(var(--header-height) + var(--safe-area-top));
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--bg-secondary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  /* safe-area handled via height — no padding-top to avoid double-offset */
  z-index: var(--z-header);
  border-bottom: 1px solid var(--border);
}

.topbar .logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1 1 auto;
}

.topbar .logo-icon { font-size: 20px; flex-shrink: 0; line-height: 1; }
.topbar .logo-text { font-weight: 600; font-size: 16px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.2px; }

.topbar .actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  align-items: center;
}

.topbar .actions a,
.topbar .actions button {
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  font-size: 18px;
  transition: background var(--transition-normal), color var(--transition-normal);
}

.topbar .actions a:hover,
.topbar .actions button:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-main); }

.topbar .actions button:active,
.topbar .actions a:active { transform: scale(0.92); }

/* =========================   APP HEADER — Sticky header === */
.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--header-height) + var(--safe-area-top));
  background: var(--bg-secondary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: var(--z-header);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  /* safe-area handled via height — no padding-top to avoid double-offset */
  border-bottom: 1px solid var(--border);
}

/* =========================   BOTTOM NAVIGATION — Glass blur Binance === */
.bottomnav {
  height: calc(var(--bottomnav-height) + var(--safe-area-bottom));
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-secondary);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: center;
  font-size: 10px;
  max-width: 500px;
  margin: 0 auto;
  z-index: var(--z-bottomnav);
  padding-bottom: var(--safe-area-bottom);
  will-change: transform;
  transform: translateZ(0);
}

.bottomnav a,
.bottomnav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-normal), transform var(--transition-fast);
  padding: var(--space-2) var(--space-1);
  min-height: 44px;
}

.bottomnav a .icon,
.bottomnav .nav-item-icon { font-size: 22px; line-height: 1; }
.bottomnav a img,
.bottomnav .nav-item img { width: 22px; height: 22px; }
.bottomnav a .label,
.bottomnav .nav-item-label { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }

.bottomnav a.active,
.bottomnav .nav-item.active {
  color: var(--primary);
  font-weight: 600;
}

/* =========================   TEXT UTILITIES   ========================= */
.text-main      { color: var(--text-main) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted    { color: var(--text-muted) !important; }
.text-primary  { color: var(--primary); }
.text-success  { color: var(--green); }
.text-danger   { color: var(--red); }
.text-warning  { color: var(--warning); }
.text-info     { color: var(--info); }
.text-money    { color: var(--success) !important; font-weight: 800; letter-spacing: -0.5px; }
.text-profit   { color: var(--green) !important; font-weight: 800; letter-spacing: -0.5px; }
.text-loss     { color: var(--red) !important; font-weight: 800; letter-spacing: -0.5px; }
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.font-bold     { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium   { font-weight: 500; }
.font-normal   { font-weight: 400; }
.text-xs  { font-size: 12px; }
.text-sm  { font-size: 13px; }
.text-md  { font-size: 14px; }
.text-lg  { font-size: 16px; }
.text-xl  { font-size: 18px; }
.text-2xl { font-size: 20px; }
.text-3xl { font-size: 24px; }
.lh-tight   { line-height: 1.2; }
.lh-normal  { line-height: 1.5; }
.lh-relaxed { line-height: 1.6; }
.uppercase  { text-transform: uppercase; letter-spacing: 0.05em; }
.tracking-wide { letter-spacing: 0.04em; }

/* =========================   CARD — Binance Finance Card === */
.card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
  border: 1px solid var(--border);
  min-width: 0;
  overflow-wrap: anywhere;
}

.card:hover {
  background: var(--card-hover);
}

.card:active {
  opacity: 0.85;
}

.card.card-sm { padding: var(--space-2) var(--space-2); }
.card.card-lg { padding: var(--space-3); }
.card.card-xl { padding: 18px; }
.card.active {
  background: var(--primary-dim) !important;
  box-shadow:
    0 0 0 1px rgba(252, 213, 53, 0.3),
    var(--shadow-sm) !important;
}

/* Card with accent top border */
.card--accent-green { border-top: 3px solid var(--green); }
.card--accent-red   { border-top: 3px solid var(--red); }
.card--accent-primary { border-top: 3px solid var(--primary); }

/* Card list item variant */
.card--list-item {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
  border: 1px solid var(--border);
  cursor: pointer;
  margin-bottom: var(--space-2);
}
.card--list-item:hover { background: var(--card-hover); }
.card--list-item:active { opacity: 0.85; }

/* =========================   ORDER BOOK ROW STYLE — Binance Trading === */
.ob-row {
  display: flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--border);
  min-height: 36px;
  transition: background var(--transition-fast);
}
.ob-row:last-child { border-bottom: none; }
.ob-row:hover { background: var(--bg-hover); }

/* Active states */
.ob-row.ob-active-buy  { background: var(--success-dim); }
.ob-row.ob-active-sell { background: var(--danger-dim); }
.ob-row.ob-active { background: rgba(252, 213, 53, 0.10); }

/* Price + amount columns */
.ob-col { flex: 1; min-width: 0; }
.ob-col-price { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ob-col-qty   { text-align: center; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.ob-col-total { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--green); }

/* Money dominant */
.ob-money {
  font-size: 1.05em;
  font-weight: 800;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

/* Quantity buttons in order book rows */
.ob-qty-btn {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-primary);
}
.ob-qty-btn:hover { background: var(--primary-dim); color: var(--primary); }
.ob-qty-val { display: inline-block; width: 20px; text-align: center; font-size: 12px; font-weight: 700; }

/* =========================   FULL HEIGHT MODAL — Fixed header, scroll body === */
.fh-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  pointer-events: auto;
}
.fh-modal.hidden { display: none; }

.fh-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-secondary);
}
.fh-modal-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.fh-modal-close { font-size: 20px; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.fh-modal-close:hover { color: var(--red); background: var(--red-dim); }

.fh-modal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-3);
}

/* =========================   SALES SPLIT LAYOUT === */
.sales-layout {
  display: flex;
  gap: var(--space-3);
  height: calc(100dvh - var(--header-height) - var(--bottomnav-height) - 120px);
}
.sales-products { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2); }
.sales-cart {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
}
.ob-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.ob-actions { display: flex; flex-direction: column; gap: var(--space-2); }

/* Mobile: stack */
@media (max-width: 640px) {
  .sales-layout { flex-direction: column; height: auto; }
  .sales-products { max-height: 45vh; }
  .sales-cart { width: 100%; }
}

/* =========================   DENSITY TOKENS === */
/* Density overrides for .inv-item — used on body via data-density */
[data-density="compact"] .inv-item { padding: var(--space-2) var(--space-2); }
[data-density="comfortable"] .inv-item { padding: var(--space-4) var(--space-4); }

/* =========================   LIST-STYLE TABLES === */
.tbl { width: 100%; border-collapse: collapse; }
.tbl-row {
  display: flex;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  gap: var(--space-2);
}
.tbl-row:last-child { border-bottom: none; }
.tbl-cell { flex: 1; min-width: 0; font-size: 13px; }
.tbl-cell-money { flex: 0 0 auto; font-weight: 800; color: var(--green); text-align: right; }

/* =========================   BUTTON SYSTEM — Binance Finance === */
/* Primary CTA — Binance Yellow */
.btn, .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  width: 100%;
  min-height: 48px;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  text-decoration: none;
  font-family: inherit;
  background: var(--primary);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-primary);
  transition: background var(--transition-normal), transform var(--transition-fast), box-shadow var(--transition-normal);
  letter-spacing: -0.1px;
}

.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 6px 20px rgba(240, 185, 11, 0.35);
}

.btn-primary:active {
  background: var(--primary-hover);
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(240, 185, 11, 0.2);
}

/* Secondary */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  width: 100%;
  min-height: 44px;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  text-decoration: none;
  font-family: inherit;
  background: var(--card-soft);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
  transition: background var(--transition-normal), transform var(--transition-fast), box-shadow var(--transition-normal);
}

.btn-secondary:hover {
  background: var(--card-hover);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:active {
  background: var(--card-soft);
  transform: scale(0.96);
  box-shadow: var(--shadow-xs);
}

/* Danger */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  width: 100%;
  min-height: 44px;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  text-decoration: none;
  font-family: inherit;
  background: var(--red);
  color: var(--fallback-text-on-dark);
  box-shadow: var(--shadow-danger);
  transition: background var(--transition-normal), transform var(--transition-fast), box-shadow var(--transition-normal);
}

.btn-danger:hover {
  background: var(--red-hover);
  box-shadow: 0 6px 20px rgba(246, 70, 93, 0.4);
}

.btn-danger:active {
  background: var(--red-hover);
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(246, 70, 93, 0.25);
}

/* Warning */
.btn-warning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  width: 100%;
  min-height: 44px;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  text-decoration: none;
  font-family: inherit;
  background: var(--warning);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-primary);
  transition: filter var(--transition-normal), transform var(--transition-fast), box-shadow var(--transition-normal);
}

.btn-warning:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(240,185,11,0.4);
}

.btn-warning:active { filter: brightness(0.92); transform: scale(0.96); }

/* Ghost — transparent with border */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
  min-height: 44px;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  text-decoration: none;
  font-family: inherit;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  box-shadow: none;
  transition: background var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal), transform var(--transition-fast);
}

.btn-ghost:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-ghost:active {
  background: var(--bg-active);
  transform: scale(0.96);
}

/* Outline button — ghost with border */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 14px;
  border: 1px solid var(--border);
  cursor: pointer;
  width: 100%;
  min-height: 44px;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  font-family: inherit;
  background: transparent;
  color: var(--text-secondary);
  transition: background var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal), transform var(--transition-fast);
}
.btn-outline:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-primary); }
.btn-outline:active { background: var(--bg-active); transform: scale(0.96); }

/* Success */
.btn-success { background: var(--green); color: var(--fallback-text-on-dark); box-shadow: var(--shadow-success); }
.btn-success:hover { filter: brightness(1.1); box-shadow: 0 6px 20px rgba(14,203,129,0.4); }
.btn-success:active { filter: brightness(0.92); transform: scale(0.96); }

/* Info */
.btn-info { background: var(--info); color: var(--fallback-text-on-dark); box-shadow: var(--shadow-info); }
.btn-info:hover { filter: brightness(1.1); box-shadow: 0 6px 16px rgba(59,130,246,0.35); }
.btn-info:active { filter: brightness(0.92); transform: scale(0.96); }

/* =========================   BUTTON DISABLED STATE === */
.btn:disabled {
  background: var(--card-soft) !important;
  color: var(--text-muted) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: none !important;
}


/* Size variants */
button, .btn { transition: transform 0.1s ease; }
button:active, a:active { transform: scale(0.97); }

.btn-sm {
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  width: auto;
  min-height: 36px;
}

.btn-lg {
  height: 52px;
  padding: 14px 20px;
  font-size: 16px;
  min-height: 52px;
}

/* =========================   CUSTOMER DROPDOWN   ========================= */
.customer-dd-item {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.customer-dd-item:last-child { border-bottom: none; }
.customer-dd-item:hover { background: var(--bg-hover); }
.customer-dd-item.active { background: var(--primary-dim); color: var(--primary); font-weight: 600; }
.customer-dd-item span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =========================   RESPONSIVE TABLE   ========================= */
@media (max-width: 480px) {
  .keg-col-note,
  td.keg-col-note { display: none !important; }
}

/* FAB — Floating Action Button */
.fab {
  width: 52px !important;
  height: 52px !important;
  border-radius: var(--radius-full) !important;
  font-size: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 0 !important;
  background: var(--primary) !important;
  color: var(--text-on-dark) !important;
}

/* Money display — coin value styling */
.money .value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: var(--green);
}

.money .unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  align-self: baseline;
}

/* Màu tiền — color variants */
.money-success .value,
.money.text-money .value { color: var(--green); font-weight: 800; letter-spacing: -0.5px; vertical-align: baseline; }
.money-profit .value { color: var(--green); font-weight: 800; letter-spacing: -0.5px; vertical-align: baseline; }
.money-danger .value,
.money.danger .value { color: var(--red); font-weight: 800; letter-spacing: -0.5px; vertical-align: baseline; }
.money-neutral .value { color: var(--text-secondary); }
.money-muted .value { color: var(--text-muted); }
.money-primary .value { color: var(--primary); }

/* Sticky action bar */
.sticky-action {
  position: fixed;
  bottom: calc(var(--bottomnav-height) + var(--safe-area-bottom));
  left: 0; right: 0;
  background: var(--card);
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
  z-index: 59;
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* Typography hierarchy */
.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-main);
}

.stat-value.highlight {
  font-size: 24px;
  font-weight: 800;
}

/* .money .value / .unit — định nghĩa chính ở block MONEY DISPLAY phía trên */

/* =========================   ORDER ITEM / HISTORY CARD   ========================= */
.order-item {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
  border: 1px solid var(--border);
  transition: background var(--transition-fast);
  cursor: pointer;
}

.order-item:hover { background: var(--card-hover); }
.order-item:active { opacity: 0.85; }

.order-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; gap: 8px; }
.order-title  { font-weight: 600; font-size: 14px; color: var(--text-main); }
.order-meta   { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.order-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 8px; }
.order-actions { display: flex; gap: 4px; margin-top: 8px; }
.order-actions .btn { flex: 1; height: 32px; font-size: 12px; min-height: 32px; }

/* =========================   CUSTOMER LIST CARD (khách hàng)   ========================= */
#customersList .order-item {
  cursor: default;
  padding: var(--card-padding);
}

.customer-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 2px;
}

.customer-card-info {
  flex: 1;
  min-width: 0;
}

.customer-card-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.customer-card-info .order-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.customer-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--card);
}

.customer-status-dot--success { background: var(--green); }
.customer-status-dot--warning { background: var(--primary); }
.customer-status-dot--danger  { background: var(--red); }
.customer-status-dot--muted   { background: var(--text-muted); }

.customer-card-phone {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.customer-card-volume {
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  margin-top: 4px;
}

.customer-card-keg-panel {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.customer-keg-box {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  min-width: 96px;
  padding: var(--space-3) var(--space-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.customer-keg-box-icon {
  font-size: 18px;
  line-height: 1;
}

.customer-keg-box-num {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
  letter-spacing: -0.02em;
}

.customer-keg-box-unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.customer-fridge-mini {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.25;
}

.customer-fridge-mini span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.customer-card-actions.order-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.customer-card-actions.order-actions .btn {
  height: 40px;
  font-size: 12px;
  border-radius: var(--radius-lg);
  padding-left: 4px;
  padding-right: 4px;
}

.customer-card-deposit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.customer-card-deposit-row .deposit-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.customer-card-deposit-row .deposit-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--info);
}

.customer-card-last {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* =========================   BADGE SYSTEM   ========================= */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-success  { background: rgba(34,197,94,0.15);  color: var(--green); }
.badge-warning  { background: rgba(249,115,22,0.15);  color: var(--warning); }
.badge-danger   { background: rgba(220,38,38,0.15);  color: var(--red); }
.badge-info     { background: rgba(59,130,246,0.15);  color: var(--info); }
.badge-primary  { background: rgba(245,158,11,0.15);  color: var(--primary); }
.badge-secondary { background: rgba(100,116,139,0.15); color: var(--text-secondary); }

/* =========================   FORM ELEMENTS — Binance Finance Style === */
input, select {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal);
  font-family: inherit;
  font-size: 16px;
  background: var(--card);
  color: var(--text-main);
  height: 44px;
}

input:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-dim), 0 0 12px rgba(252,213,53,0.15);
  outline: none;
}

input::placeholder { color: var(--text-muted); }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* =========================   PRODUCT CARD   ========================= */
.product-card {
  border-radius: var(--radius-lg);
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.product-card:active { transform: scale(0.96); background: rgba(34,197,94,0.05); }

/* Kho hàng — lưới sản phẩm: tự điền cột, tránh hàng trống lệch */
.product-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}

.product-grid__full {
  grid-column: 1 / -1;
}

.product-card.product-card--interactive {
  display: flex;
  flex-direction: column;
  min-height: 128px;
  text-align: left;
  align-items: stretch;
}

@media (hover: hover) {
  .product-card.product-card--interactive:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: rgba(245, 158, 11, 0.45);
  }
}

.product-card__name {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-main);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__meta {
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--text-secondary);
  margin-top: 0.35rem;
}

.product-card__footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.product-card__qty-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.product-card__qty {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.1;
}

.stock-badge {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 6px 12px;
  font-weight: 600;
  display: inline-block;
}

.product-card__edit-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--primary-hover);
  background: rgba(245, 158, 11, 0.12);
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  flex-shrink: 0;
  cursor: pointer;
}

.product-card__edit-icon {
  font-size: 0.75rem;
  line-height: 1;
}

/* =========================   STAT CARD   ========================= */
.stat-card {
  background: rgba(252, 213, 53, 0.12);
  color: var(--text-main);
  border-radius: 12px;
  padding: 18px;
  border: 1px solid rgba(252, 213, 53, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.stat-card .value { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
.stat-card .label { font-size: 13px; opacity: 0.7; }
.stat-card.success { background: var(--success-dim); border-color: rgba(14, 203, 129, 0.15); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.stat-card.danger  { background: var(--danger-dim); border-color: rgba(246, 70, 93, 0.15); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.stat-card.info    { background: var(--info-dim); border-color: rgba(59, 122, 254, 0.15); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.stat-card.warning { background: var(--warning-dim); border-color: rgba(240, 185, 11, 0.15); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }

/* =========================   SPINNER & LOADING   ========================= */
.spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 20px auto;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* =========================   EMPTY STATE   ========================= */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-secondary);
  background: var(--card-soft);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}
.empty-state-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 12px;
  opacity: 0.6;
}
.empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: var(--space-2);
}
.empty-state-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.empty-state-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  background: var(--primary);
  color: var(--text-on-dark);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: filter 0.2s, transform 0.15s;
}
.empty-state-cta:active { transform: scale(0.97); filter: brightness(0.92); }

.report-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: 13px;
}

/* =========================   LIST ITEMS   ========================= */
.list-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: var(--card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, background 0.15s ease;
}

.list-item:active { transform: scale(0.98); background: var(--bg-hover); }

/* =========================   MODAL SYSTEM — Bottom-sheet mobile-first === */
/* Overlay backdrop */
.modal-overlay-v2,
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: modal-fade-in 0.2s ease;
}

.modal-overlay-v2.center,
.modal-backdrop.center {
  align-items: center;
}

.modal-overlay-v2.hidden,
.modal-backdrop.hidden {
  display: none;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0.6; }
  to   { transform: translateY(0);    opacity: 1;   }
}

/* Bottom sheet container */
.modal-sheet-v2 {
  background: var(--card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%;
  max-width: 500px;
  padding: 14px;
  padding-bottom: calc(14px + var(--safe-area-bottom));
  box-shadow: var(--shadow-xl);
  animation: modal-slide-up 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.modal-sheet-v2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.modal-sheet-v2-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-sheet-v2-close {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-normal), color var(--transition-normal);
}

.modal-sheet-v2-close:hover { background: var(--card-active); color: var(--text-main); }
.modal-sheet-v2-close:active { opacity: 0.8; }

.modal-sheet-v2-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.modal-sheet-v2-footer {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.modal-sheet-v2-footer .btn { flex: 1; }

@keyframes modal-slide-up {
  from { transform: translateY(100%); opacity: 0.7; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Dropdown panel */
.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-dropdown);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
  min-width: 100%;
  margin-top: 4px;
}

.dropdown-panel.hidden { display: none; }

/* Modal card — centered */
.modal-card {
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: 20px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-xl);
  animation: modal-fade-in 0.2s ease;
}

/* Modal sheet — bottom sheet */
.modal-sheet {
  background: var(--card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 20px;
  padding-bottom: calc(20px + var(--safe-area-bottom));
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  box-shadow: var(--shadow-xl);
  animation: modal-slide-up 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Modal header / footer */
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
}

/* Generic modal */
.modal {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 20px;
  width: 90%;
  max-width: 400px;
  max-height: 90vh;
  overflow-y: auto;
}

/* =========================   TAB BUTTONS   ========================= */
.tab-btn {
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.2s, color 0.2s;
}

.tab-btn.active {
  background: var(--info);
  color: white;
}

.tab-btn:not(.active) {
  background: var(--card);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.tab-btn:not(.active):hover { background: var(--bg-hover); }

/* Tabs (legacy) */
.tabs {
  display: flex;
  gap: 4px;
  background: var(--bg);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.tab {
  flex: 1;
  padding: 8px 16px;
  text-align: center;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: .2s;
  background: transparent;
  border: none;
}

.tab.active {
  background: var(--card);
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* =========================   TABLE   ========================= */
.table { width: 100%; border-collapse: collapse; }

.table th,
.table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.table th {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 12px;
  text-transform: uppercase;
}

/* =========================   REPORT TABLE   ========================= */
.report-table {
  width: 100%;
  border-collapse: collapse;
}

.report-table th {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

.report-table td {
  color: var(--text-main);
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  padding: 12px;
  text-align: left;
}

.report-table tr:hover td {
  background: var(--bg-hover);
}

[data-theme="dark"] .report-table th {
  color: var(--text-secondary);
}

[data-theme="dark"] .report-table td {
  color: var(--text-main);
}

[data-theme="dark"] .report-table tr:hover td {
  background: var(--bg-hover);
}

/* =========================   HEADER BAR   ========================= */
.header-bar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 58;
}

/* =========================   RADIO / CHECKBOX CARD   ========================= */
.radio-card {
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: .2s;
}

.radio-card:hover { border-color: var(--primary); }
.radio-card.selected { border-color: var(--primary); background: var(--green-dim); }

/* =========================   STATUS INDICATOR   ========================= */
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot.amber  { background: var(--primary); }
.status-dot.green  { background: var(--green); }
.status-dot.yellow { background: var(--primary); }
.status-dot.red    { background: var(--red); }
.status-dot.gray   { background: var(--text-muted); }

/* =========================   PAGE ANIMATION   ========================= */
.page-enter { animation: page-enter 0.2s ease-out; }

@keyframes page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

main {
  padding: 16px;
  padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--bottomnav-height) + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  max-width: min(500px, 100%);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* =========================   UTILITY CLASSES   ========================= */
.bg-card     { background: var(--card) !important; }
.bg-primary  { background: var(--primary) !important; }
.bg-success  { background: var(--green) !important; }
.bg-danger   { background: var(--red) !important; }
.bg-warning  { background: var(--warning) !important; }
.bg-info     { background: var(--info) !important; }
.bg-muted    { background: var(--bg) !important; }

.border-primary   { border-color: var(--primary) !important; }
.border-success    { border-color: var(--green) !important; }
.border-danger    { border-color: var(--red) !important; }
.border-warning   { border-color: var(--warning) !important; }
.border-info      { border-color: var(--info) !important; }
.border-muted     { border-color: var(--border) !important; }

.rounded     { border-radius: var(--radius-sm); }
.rounded-md  { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-xl  { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.flex          { display: flex; }
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-1        { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }

.grid    { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }

.w-full { width: 100%; }
.h-full { height: 100%; }
.min-w-0 { min-width: 0; }

.p-0 { padding: 0; }
.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }

.m-0  { margin: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

.border      { border: 1px solid var(--border); }
.border-t    { border-top: 1px solid var(--border); }
.border-b    { border-bottom: 1px solid var(--border); }

.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }
.top-0    { top: 0; }
.bottom-0 { bottom: 0; }
.left-0   { left: 0; }
.right-0  { right: 0; }
.z-10  { z-index: 10; }
.z-50  { z-index: 50; }
.z-modal { z-index: var(--z-modal); }

.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

.cursor-pointer { cursor: pointer; }
.select-none    { user-select: none; }
.pointer-events-none { pointer-events: none; }
.transition    { transition: all 0.2s ease; }
.whitespace-nowrap { white-space: nowrap; }

/* =========================   QUICK-ACTION GRID (Grab-style)   ========================= */
.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background var(--transition-normal), transform var(--transition-normal), border-color var(--transition-normal);
  position: relative;
  overflow: hidden;
  min-height: 44px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.quick-action-btn::before { display: none; }

.quick-action-btn:active {
  transform: scale(0.96);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.quick-action-btn .icon  { font-size: 22px; margin-bottom: 6px; }
.quick-action-btn .label { font-size: 12px; font-weight: 600; color: var(--text-main); }
.quick-action-btn.fuel   { background: var(--warning-dim); border-color: rgba(240, 185, 11, 0.2); }
.quick-action-btn.food   { background: var(--success-dim); border-color: rgba(14, 203, 129, 0.15); }
.quick-action-btn.repair { background: var(--info-dim); border-color: rgba(59, 122, 254, 0.15); }
.quick-action-btn.other  { background: rgba(107, 114, 128, 0.1); border-color: rgba(107, 114, 128, 0.15); }

/* Quick Add Modal (Bottom Sheet) */
.quick-add-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.quick-add-sheet {
  background: var(--card);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 500px;
  padding: 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0));
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
}

.quick-add-sheet .handle {
  width: 40px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 20px;
}

.quick-add-sheet .amount-input {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  border: none;
  background: var(--bg);
  border-radius: 16px;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  color: var(--text-main);
}

.quick-add-sheet .amount-input:focus {
  outline: none;
  background: rgba(34,197,94,0.05);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.2);
}

.quick-add-sheet .quick-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.quick-add-sheet .quick-amount {
  background: var(--bg);
  border: none;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
}

.quick-add-sheet .quick-amount:active {
  transform: scale(0.95);
  background: var(--bg-hover);
}

.quick-add-sheet .save-btn {
  background: var(--green);
  color: var(--text-on-dark);
  border: none;
  padding: 16px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  width: 100%;
  margin-top: 16px;
  cursor: pointer;
  box-shadow: var(--shadow-success);
  transition: background var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
}

.quick-add-sheet .save-btn:active { transform: scale(0.98); box-shadow: var(--shadow-xs); }

/* Expense Summary Card */
.expense-summary {
  background: rgba(246, 70, 93, 0.1);
  border: 1px solid rgba(246, 70, 93, 0.2);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  margin-bottom: 16px;
}

.expense-summary .total-label { font-size: 14px; opacity: 0.7; color: var(--text-secondary); }
.expense-summary .total-amount { font-size: 32px; font-weight: 800; letter-spacing: -0.5px; color: var(--red); }

.expense-summary .breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.expense-summary .breakdown-item {
  text-align: center;
  background: rgba(255,255,255,0.15);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-md);
}

.expense-summary .breakdown-item .icon  { font-size: 20px; }
.expense-summary .breakdown-item .value { font-size: 14px; font-weight: 700; }
.expense-summary .breakdown-item .label { font-size: 11px; opacity: 0.8; }

/* Expense Item */
.expense-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: var(--card);
  border-radius: 16px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.2s;
  cursor: pointer;
}

.expense-item:active {
  transform: scale(0.98);
  background: var(--bg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.expense-item .icon-wrapper {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-right: 14px;
}

.expense-item .icon-wrapper.fuel   { background: rgba(249,115,22,0.1); }
.expense-item .icon-wrapper.food   { background: rgba(34,197,94,0.1); }
.expense-item .icon-wrapper.repair { background: rgba(59,130,246,0.1); }
.expense-item .icon-wrapper.other  { background: var(--bg); }

.expense-item .content    { flex: 1; }
.expense-item .title      { font-weight: 600; font-size: 15px; }
.expense-item .subtitle   { font-size: 13px; color: var(--text-secondary); }
.expense-item .amount     { font-weight: 700; font-size: 16px; color: var(--red); }

/* =========================   BINANCE UTILITY CLASSES — Fintech Design System === */

/* Binance-style Input variants */
.bn-input {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
  background: var(--card);
  color: var(--text-main);
  height: 42px;
  transition: border-color var(--transition-normal);
}

.bn-input:focus {
  border-color: var(--primary);
  outline: none;
}

.bn-input::placeholder { color: var(--text-muted); }
.bn-input--lg { height: 44px; font-size: 16px; padding: 8px 12px; border-radius: var(--radius-lg); }
.bn-input--center { text-align: center; font-weight: 600; font-size: 18px; }
.bn-input--green { border-color: var(--green); }
.bn-input--green:focus { border-color: var(--green); }
.bn-input--blue { border-color: var(--info); }
.bn-input--blue:focus { border-color: var(--info); }
.bn-input--red { border-color: var(--red); }
.bn-input--red:focus { border-color: var(--red); }

/* Binance-style Select */
.bn-select {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
  background: var(--card);
  color: var(--text-main);
  height: 42px;
  cursor: pointer;
}

.bn-select:focus {
  border-color: var(--primary);
  outline: none;
}

.bn-select--sm { height: 34px; font-size: 12px; padding: var(--space-1) var(--space-2); }

/* Binance Icon Button */
.bn-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 18px;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bn-icon-btn:hover { background: var(--bg-hover); color: var(--text-main); }
.bn-icon-btn:active { opacity: 0.8; }

/* Binance Button sizes */
.bn-btn-lg { min-height: 44px; font-size: 15px; padding: var(--space-3) var(--space-4); }
.bn-btn-icon { width: 38px; height: 44px; font-size: 18px; padding: 0; }

/* Binance Chip / Pill filter buttons */
.bn-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
}

.bn-chip:hover { background: var(--bg-hover); color: var(--text-secondary); }

.bn-chip--active {
  background: var(--primary-dim);
  border-color: var(--primary);
  color: var(--primary);
}

.bn-chip--active:hover { background: var(--primary-dim); color: var(--primary); }

/* Binance Modal variants */
.bn-modal--tall { max-height: 92vh; }

/* Binance Card with gradient accent */
.bn-card--green-gradient {
  background: rgba(14, 203, 129, 0.08);
  border: 1px solid rgba(14, 203, 129, 0.15);
  border-radius: 12px;
  padding: 12px;
}

.bn-card--blue-gradient {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

/* Binance Page Header */
.bn-page-header {
  background: rgba(30, 35, 41, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
}

/* Binance Summary Card (hero stats) */
.bn-stat-hero {
  border-radius: var(--radius-xl);
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
  box-shadow: var(--shadow-md);
}

.bn-stat-hero--green { background: var(--success-dim); border-color: rgba(14, 203, 129, 0.2); }
.bn-stat-hero--red   { background: var(--danger-dim);  border-color: rgba(246, 70, 93, 0.2); }
.bn-stat-hero--yellow { background: rgba(252, 213, 53, 0.12); border-color: rgba(252, 213, 53, 0.2); }

.bn-stat-hero .bn-stat-label { font-size: 13px; font-weight: 600; opacity: 0.9; margin-bottom: 4px; }
.bn-stat-hero .bn-stat-value { font-size: 32px; font-weight: 800; letter-spacing: -0.5px; }

/* Binance Loading skeleton */
.bn-skeleton {
  background: linear-gradient(90deg, var(--card) 25%, var(--bg-hover) 50%, var(--card) 75%);
  background-size: 200% 100%;
  animation: bn-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes bn-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Binance FAB (Floating Action Button) */
.bn-fab {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--text-on-dark);
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: filter var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 40;
}

.bn-fab:hover { filter: brightness(1.1); box-shadow: 0 8px 32px rgba(252,213,53,0.4); }
.bn-fab:active { transform: scale(0.92); filter: brightness(0.95); }

/* Field Label */
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Binance Progress Bar */
.bn-progress {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--border);
  overflow: hidden;
}

.bn-progress-bar {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.bn-progress-bar--green { background: var(--green); }
.bn-progress-bar--red { background: var(--red); }
.bn-progress-bar--yellow { background: var(--primary); }

/* Binance Divider */
.bn-divider {
  height: 1px;
  background: var(--border);
  margin: 12px 0;
}

/* Binance Alert */
.bn-alert {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 13px;
  margin-bottom: 12px;
}

.bn-alert--success { background: var(--green-dim); border: 1px solid rgba(14,203,129,0.2); color: var(--green); }
.bn-alert--danger { background: var(--red-dim); border: 1px solid rgba(246,70,93,0.2); color: var(--red); }
.bn-alert--warning { background: var(--primary-dim); border: 1px solid rgba(252,213,53,0.2); color: var(--primary); }
.bn-alert--info { background: var(--info-dim); border: 1px solid rgba(59,130,246,0.2); color: var(--info); }

/* Binance Tooltip */
.bn-tooltip {
  position: relative;
}

.bn-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
  z-index: 100;
}

.bn-tooltip:hover::after { opacity: 1; }

/* Binance Badge variants */
.bn-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
}

.bn-badge--success { background: var(--green-dim); color: var(--green); }
.bn-badge--danger { background: var(--red-dim); color: var(--red); }
.bn-badge--warning { background: var(--primary-dim); color: var(--primary); }
.bn-badge--info { background: var(--info-dim); color: var(--info); }
.bn-badge--neutral { background: var(--bg-hover); color: var(--text-muted); }

/* Binance Table */
.bn-table {
  width: 100%;
  border-collapse: collapse;
}

.bn-table th {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.bn-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-main);
}

.bn-table tr:last-child td { border-bottom: none; }
.bn-table tbody tr:hover { background: var(--bg-hover); }

/* Binance Notification Dot */
.bn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.bn-dot--green { background: var(--green); box-shadow: 0 0 6px var(--green); }
.bn-dot--red { background: var(--red); box-shadow: 0 0 6px var(--red); }
.bn-dot--yellow { background: var(--primary); box-shadow: 0 0 6px var(--primary); }
.bn-dot--gray { background: var(--text-muted); }

/* Binance Swipe hint */
.bn-swipe-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 0;
}

/* Global button:active — Binance scale feel */
button:active, .btn:active { transition: transform 0.1s ease; }

/* =========================================   END BINANCE UTILITY CLASSES   ========================================= */

/* =========================   DARK MODE OVERRIDES (for light theme only) === */
/* These override dark defaults when [data-theme="light"] is applied */
/* Dark is now the default — these are minimal light-mode fixes */
[data-theme="light"] body { background: var(--bg); }
[data-theme="light"] .topbar,
[data-theme="light"] .app-header {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .bottomnav {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: none;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .bottomnav a,
[data-theme="light"] .bottomnav .nav-item {
  color: var(--text-secondary);
}
[data-theme="light"] .bottomnav a.active,
[data-theme="light"] .bottomnav .nav-item.active {
  color: var(--primary);
}
[data-theme="light"] .card {
  background: var(--card);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .card:hover {
  background: var(--card-hover);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 8px 24px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .card:active {
  transform: scale(0.98);
}
[data-theme="light"] .modal-sheet-v2,
[data-theme="light"] .modal-card,
[data-theme="light"] .modal-sheet { background: var(--card); }
[data-theme="light"] .quick-add-sheet { background: var(--card); }
[data-theme="light"] .dashboard-quick-bar-inner { background: rgba(17,24,39,0.92); }

/* Light mode typography */
[data-theme="light"] .text-main     { color: var(--text-primary); }
[data-theme="light"] .text-secondary { color: var(--text-secondary); }
[data-theme="light"] .text-muted    { color: var(--text-muted); }
[data-theme="light"] .text-white    { color: var(--text-on-light); }

/* Light mode backgrounds */
[data-theme="light"] .bg-white      { background: var(--bg-primary); }
[data-theme="light"] .bg-gray-50    { background: var(--bg-secondary); }
[data-theme="light"] .bg-card       { background: var(--bg-card); }
[data-theme="light"] .bg-muted      { background: var(--bg-card-soft); }

/* Light mode: topbar glass */
[data-theme="light"] .topbar,
[data-theme="light"] .app-header {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* Light mode input */
[data-theme="light"] input,
[data-theme="light"] select {
  background: var(--bg-primary);
  border-color: var(--border-default);
}

/* Light mode shadows */
[data-theme="light"] .shadow-sm { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
[data-theme="light"] .shadow-md { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
[data-theme="light"] .shadow-lg { box-shadow: 0 8px 32px rgba(0,0,0,0.10); }

/* Light mode: customer-keg-box */
[data-theme="light"] .customer-keg-box {
  background: var(--bg-secondary);
  border-color: var(--border);
}

/* Light mode: FAB */
[data-theme="light"] .fab {
  background: var(--primary) !important;
  color: var(--text-on-dark) !important;
}

/* Light mode: skeletons */
[data-theme="light"] .skeleton-header-fixed { background: rgba(255,255,255,0.92); }
[data-theme="light"] .skeleton-nav-fixed { background: rgba(255,255,255,0.92); }
[data-theme="light"] .skeleton-icon,
[data-theme="light"] .skeleton-text { background: var(--card-soft); animation: shimmer 1.5s infinite; }

/* Light: text utility overrides */
[data-theme="light"] .text-gray-300,
[data-theme="light"] .text-gray-400,
[data-theme="light"] .text-gray-500,
[data-theme="light"] .text-gray-600 { color: var(--text-secondary) !important; }
[data-theme="light"] .text-gray-700 { color: var(--text-primary) !important; }
[data-theme="light"] .text-gray-800 { color: var(--text-primary) !important; }
[data-theme="light"] .text-white    { color: var(--text-on-light) !important; }
[data-theme="light"] .text-slate-500,
[data-theme="light"] .text-slate-600 { color: var(--text-secondary) !important; }
[data-theme="light"] .text-slate-700 { color: var(--text-primary) !important; }
[data-theme="light"] .text-slate-800 { color: var(--text-primary) !important; }
[data-theme="light"] .text-green-500,
[data-theme="light"] .text-green-600,
[data-theme="light"] .text-green-700,
[data-theme="light"] .text-emerald-500,
[data-theme="light"] .text-emerald-600,
[data-theme="light"] .text-emerald-700 { color: var(--accent-green) !important; }
[data-theme="light"] .text-blue-500,
[data-theme="light"] .text-blue-600 { color: var(--accent-info) !important; }
[data-theme="light"] .text-blue-700  { color: var(--accent-info) !important; }
[data-theme="light"] .text-amber-500,
[data-theme="light"] .text-amber-600,
[data-theme="light"] .text-amber-700,
[data-theme="light"] .text-amber-800,
[data-theme="light"] .text-yellow-400,
[data-theme="light"] .text-yellow-500,
[data-theme="light"] .text-yellow-600,
[data-theme="light"] .text-yellow-700,
[data-theme="light"] .text-yellow-800 { color: var(--accent-warning) !important; }
[data-theme="light"] .text-orange-500,
[data-theme="light"] .text-orange-600,
[data-theme="light"] .text-orange-700 { color: var(--accent-warning) !important; }
[data-theme="light"] .text-red-400,
[data-theme="light"] .text-red-500,
[data-theme="light"] .text-red-600,
[data-theme="light"] .text-red-700 { color: var(--accent-red) !important; }
[data-theme="light"] .text-purple-500,
[data-theme="light"] .text-purple-600 { color: var(--purple) !important; }
[data-theme="light"] .text-indigo-500,
[data-theme="light"] .text-indigo-600 { color: var(--info) !important; }

/* Light: background utility overrides */
[data-theme="light"] .bg-white      { background: var(--bg-primary) !important; }
[data-theme="light"] .bg-gray-50    { background: var(--bg-secondary) !important; }
[data-theme="light"] .bg-gray-100   { background: var(--bg-card-soft) !important; }
[data-theme="light"] .bg-gray-200   { background: var(--border-default) !important; }
[data-theme="light"] .bg-gray-300   { background: var(--border-strong) !important; }
[data-theme="light"] .bg-gray-500   { background: var(--text-muted) !important; }
[data-theme="light"] .bg-green-50,
[data-theme="light"] .bg-emerald-50 { background: rgba(14, 203, 129, 0.12) !important; }
[data-theme="light"] .bg-green-100,
[data-theme="light"] .bg-emerald-100 { background: rgba(14, 203, 129, 0.15) !important; }
[data-theme="light"] .bg-green-500,
[data-theme="light"] .bg-green-600,
[data-theme="light"] .bg-emerald-500,
[data-theme="light"] .bg-emerald-600 { background: var(--accent-green) !important; }
[data-theme="light"] .bg-blue-50    { background: rgba(59, 122, 254, 0.12) !important; }
[data-theme="light"] .bg-blue-100   { background: rgba(59, 122, 254, 0.15) !important; }
[data-theme="light"] .bg-blue-500   { background: var(--accent-info) !important; }
[data-theme="light"] .bg-blue-600   { background: var(--accent-info) !important; }
[data-theme="light"] .bg-amber-50,
[data-theme="light"] .bg-amber-100  { background: rgba(240, 185, 11, 0.12) !important; }
[data-theme="light"] .bg-amber-500,
[data-theme="light"] .bg-amber-600  { background: var(--accent-warning) !important; }
[data-theme="light"] .bg-red-50     { background: rgba(246, 70, 93, 0.12) !important; }
[data-theme="light"] .bg-red-100    { background: rgba(246, 70, 93, 0.15) !important; }
[data-theme="light"] .bg-red-500,
[data-theme="light"] .bg-red-600    { background: var(--accent-red) !important; }
[data-theme="light"] .bg-yellow-50  { background: rgba(252, 213, 53, 0.12) !important; }
[data-theme="light"] .bg-yellow-100 { background: rgba(252, 213, 53, 0.15) !important; }
[data-theme="light"] .bg-purple-50  { background: rgba(124, 58, 237, 0.12) !important; }
[data-theme="light"] .bg-purple-100 { background: rgba(124, 58, 237, 0.15) !important; }
[data-theme="light"] .bg-purple-500 { background: var(--purple) !important; }
[data-theme="light"] .bg-purple-600 { background: var(--purple) !important; }
[data-theme="light"] .bg-indigo-50  { background: rgba(99, 102, 241, 0.12) !important; }
[data-theme="light"] .bg-indigo-100 { background: rgba(99, 102, 241, 0.15) !important; }
[data-theme="light"] .bg-indigo-500 { background: var(--info) !important; }
[data-theme="light"] .bg-indigo-600 { background: var(--info) !important; }

/* Light: border overrides */
[data-theme="light"] .border-gray-100,
[data-theme="light"] .border-gray-200,
[data-theme="light"] .border-white { border-color: var(--border-default) !important; }
[data-theme="light"] .border-gray-300,
[data-theme="light"] .border-gray-400 { border-color: var(--border-strong) !important; }
[data-theme="light"] .border-amber-100,
[data-theme="light"] .border-amber-200 { border-color: rgba(240, 185, 11, 0.3) !important; }
[data-theme="light"] .border-blue-200,
[data-theme="light"] .border-blue-300 { border-color: rgba(59, 122, 254, 0.3) !important; }
[data-theme="light"] .border-green-100,
[data-theme="light"] .border-green-200 { border-color: rgba(14, 203, 129, 0.3) !important; }
[data-theme="light"] .border-red-200 { border-color: rgba(246, 70, 93, 0.3) !important; }
[data-theme="light"] .border-purple-200 { border-color: rgba(124, 58, 237, 0.3) !important; }
[data-theme="light"] .border-orange-200 { border-color: rgba(234, 88, 12, 0.3) !important; }

/* Light: hover states */
[data-theme="light"] .hover\:bg-gray-50:hover  { background: var(--bg-secondary) !important; }
[data-theme="light"] .hover\:bg-gray-100:hover { background: var(--bg-card-soft) !important; }
[data-theme="light"] .hover\:bg-gray-200:hover { background: var(--border-default) !important; }
[data-theme="light"] .hover\:bg-amber-50:hover  { background: rgba(240, 185, 11, 0.12) !important; }
[data-theme="light"] .hover\:bg-amber-100:hover { background: rgba(240, 185, 11, 0.15) !important; }
[data-theme="light"] .hover\:bg-green-100:hover { background: rgba(14, 203, 129, 0.15) !important; }
[data-theme="light"] .hover\:bg-green-700:hover { background: var(--accent-green) !important; }
[data-theme="light"] .hover\:bg-orange-600:hover { background: var(--accent-warning) !important; }
[data-theme="light"] .hover\:bg-blue-50:hover   { background: rgba(59, 122, 254, 0.12) !important; }
[data-theme="light"] .hover\:bg-blue-600:hover  { background: var(--accent-info) !important; }
[data-theme="light"] .hover\:bg-blue-700:hover  { background: var(--accent-info) !important; }
[data-theme="light"] .hover\:bg-red-50:hover    { background: rgba(246, 70, 93, 0.12) !important; }
[data-theme="light"] .hover\:bg-red-100:hover   { background: rgba(246, 70, 93, 0.15) !important; }
[data-theme="light"] .hover\:bg-red-700:hover   { background: var(--accent-red) !important; }
[data-theme="light"] .hover\:bg-purple-600:hover { background: var(--purple) !important; }
[data-theme="light"] .hover\:text-gray-600:hover { color: var(--text-primary) !important; }
[data-theme="light"] .hover\:text-gray-700:hover { color: var(--text-primary) !important; }
[data-theme="light"] .hover\:text-success:hover  { color: var(--accent-green) !important; }
[data-theme="light"] .hover\:text-primary:hover  { color: var(--accent-warning) !important; }
[data-theme="light"] .hover\:text-green-600:hover { color: var(--accent-green) !important; }
[data-theme="light"] .hover\:text-orange-800:hover { color: var(--accent-warning) !important; }
[data-theme="light"] .hover\:text-red-600:hover   { color: var(--accent-red) !important; }
[data-theme="light"] .hover\:text-blue-600:hover { color: var(--accent-info) !important; }
[data-theme="light"] .hover\:text-blue-700:hover { color: var(--accent-info) !important; }
[data-theme="light"] .hover\:text-info:hover     { color: var(--accent-info) !important; }
[data-theme="light"] .hover\:text-warning:hover  { color: var(--accent-warning) !important; }
[data-theme="light"] .hover\:text-danger:hover   { color: var(--accent-red) !important; }

/* Dark: topbar & bottomnav (glass style) */
[data-theme="dark"] .topbar {
  background: rgba(11, 14, 17, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

:root.dark .bottomnav a { color: var(--text-muted); }
:root.dark .bottomnav a.active { color: var(--primary); }
:root[data-theme="dark"] .bottomnav a { color: var(--text-muted); }
:root[data-theme="dark"] .bottomnav a.active { color: var(--primary); }

[data-theme="dark"] .topbar .logo-text { color: var(--text-main); }
[data-theme="dark"] .topbar .actions a,
[data-theme="dark"] .topbar .actions button { color: var(--text-muted); }
[data-theme="dark"] .topbar .actions a:hover,
[data-theme="dark"] .topbar .actions button:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-main); }

/* Dark: card — uses CSS variable tokens so automatic */
:root.dark .card,
:root[data-theme="dark"] .card {
  background: var(--card);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
:root.dark .card:hover,
:root[data-theme="dark"] .card:hover {
  background: var(--card-hover);
  box-shadow: var(--shadow-md);
}
:root.dark .card:active,
:root[data-theme="dark"] .card:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-xs);
}
:root.dark .card.active,
:root[data-theme="dark"] .card.active {
  background: var(--primary-dim) !important;
  border-color: var(--primary) !important;
}

[data-theme="dark"] .order-item {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

[data-theme="dark"] .order-item:hover {
  background: var(--bg-hover);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

[data-theme="dark"] .customer-keg-box {
  background: rgba(255,255,255,0.04);
  border-color: var(--border);
}

[data-theme="dark"] .customer-keg-box-num {
  color: var(--primary);
}

/* Dark: buttons — use Binance base styles, no override needed */
[data-theme="dark"] .btn-ghost:hover { background: var(--bg-hover); color: var(--text-main); }

/* Dark: badge */
[data-theme="dark"] .badge-success   { background: var(--green-dim); color: var(--green); }
[data-theme="dark"] .badge-warning   { background: rgba(249,115,22,0.15); color: var(--primary); }
[data-theme="dark"] .badge-danger    { background: var(--red-dim); color: var(--red); }
[data-theme="dark"] .badge-info      { background: rgba(59,130,246,0.15); color: var(--info); }
[data-theme="dark"] .badge-primary   { background: var(--primary-dim); color: var(--primary); }

/* Dark: forms */
[data-theme="dark"] input,
[data-theme="dark"] select {
  background: var(--card);
  border-color: var(--border);
  color: var(--text-main);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-dim);
}

[data-theme="dark"] input::placeholder { color: var(--text-muted) !important; }

[data-theme="dark"] .product-card {
  background: var(--card);
  border-color: var(--border);
}

[data-theme="dark"] .product-card:active {
  background: var(--card);
  border-color: var(--primary);
}

@media (hover: hover) {
  [data-theme="dark"] .product-card.product-card--interactive:hover {
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
    border-color: rgba(251, 191, 36, 0.4);
  }
}

[data-theme="dark"] .product-card__meta {
  color: var(--text-secondary);
}

[data-theme="dark"] .product-card__edit-pill {
  background: rgba(251, 191, 36, 0.14);
  color: var(--primary);
}

/* Dark: modal */
[data-theme="dark"] .modal           { background: var(--card); }
[data-theme="dark"] .modal-backdrop   { background: rgba(0,0,0,0.7); }
[data-theme="dark"] .modal-card,
[data-theme="dark"] .modal-sheet      { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer      { border-color: var(--border); }
[data-theme="dark"] .quick-add-sheet  { background: var(--card); }
[data-theme="dark"] .quick-add-sheet .amount-input { background: var(--bg); color: var(--text-main); }
[data-theme="dark"] .quick-add-sheet .handle       { background: var(--border); }
[data-theme="dark"] .quick-add-sheet .quick-amount { background: var(--bg); color: var(--text-main); }
[data-theme="dark"] .quick-add-sheet .quick-amount:active { background: var(--bg-hover); }

/* Dark: list & table */
[data-theme="dark"] .list-item {
  background: var(--card);
  border-color: var(--border);
}

[data-theme="dark"] .list-item:active { background: var(--bg-hover); }

[data-theme="dark"] .table th,
[data-theme="dark"] .table td { border-bottom-color: var(--border); }

[data-theme="dark"] .table th { color: var(--text-muted); }

[data-theme="dark"] .header-bar {
  background: var(--card);
  border-bottom-color: var(--border);
}

[data-theme="dark"] .empty-state {
  border-color: var(--border);
  background: var(--card);
  color: var(--text-secondary);
}

/* Dark: tabs */
[data-theme="dark"] .tab         { color: var(--text-muted); }
[data-theme="dark"] .tab.active  { background: var(--bg-hover); color: var(--primary); }
[data-theme="dark"] .tabs        { background: var(--card); }

/* Dark: expense items */
[data-theme="dark"] .expense-item {
  background: var(--card);
  border-color: var(--border);
}

[data-theme="dark"] .expense-item:active { background: var(--bg-hover); }

[data-theme="dark"] .expense-item .icon-wrapper.fuel   { background: rgba(249,115,22,0.15); }
[data-theme="dark"] .expense-item .icon-wrapper.food   { background: rgba(34,197,94,0.15); }
[data-theme="dark"] .expense-item .icon-wrapper.repair  { background: rgba(59,130,246,0.15); }
[data-theme="dark"] .expense-item .icon-wrapper.other  { background: var(--bg); }
[data-theme="dark"] .expense-item .subtitle { color: var(--text-secondary); }

/* Dark: semantic utilities */
[data-theme="dark"] .bg-primary   { background: var(--primary) !important; color: white !important; }
[data-theme="dark"] .bg-success   { background: var(--green) !important; color: white !important; }
[data-theme="dark"] .bg-danger    { background: var(--red) !important; color: white !important; }
[data-theme="dark"] .bg-warning   { background: var(--warning) !important; color: white !important; }
[data-theme="dark"] .bg-info      { background: var(--info) !important; color: white !important; }
[data-theme="dark"] .bg-secondary { background: var(--text-secondary) !important; color: var(--text-on-dark) !important; }
[data-theme="dark"] .bg-card      { background: var(--card) !important; }
[data-theme="dark"] .bg-muted     { background: var(--bg) !important; }
/* Dark: opacity bg */
[data-theme="dark"] .bg-success-20   { background: rgba(34,197,94,0.20) !important; }
[data-theme="dark"] .bg-warning-20  { background: rgba(249,115,22,0.20) !important; }
[data-theme="dark"] .bg-info-20     { background: rgba(37,99,235,0.20) !important; }
[data-theme="dark"] .bg-danger-20   { background: rgba(220,38,38,0.20) !important; }
[data-theme="dark"] .bg-secondary-20{ background: rgba(100,116,139,0.20) !important; }
[data-theme="dark"] .bg-primary-20  { background: rgba(245,158,11,0.20) !important; }

[data-theme="dark"] .text-primary   { color: var(--primary) !important; }
[data-theme="dark"] .text-success   { color: var(--green) !important; }
[data-theme="dark"] .text-danger    { color: var(--red) !important; }
[data-theme="dark"] .text-warning   { color: var(--primary-hover) !important; }
[data-theme="dark"] .text-info      { color: var(--info) !important; }
[data-theme="dark"] .text-secondary { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-muted     { color: var(--text-muted) !important; }
[data-theme="dark"] .text-main      { color: var(--text-main) !important; }
[data-theme="dark"] .text-white     { color: var(--text-main) !important; }

/* Dark: subtle tints */
[data-theme="dark"] .gradient-info { background: rgba(59, 122, 254, 0.1); border-color: rgba(59, 122, 254, 0.2); }

/* Dark: spinner */
[data-theme="dark"] .spinner { border-color: var(--border); border-top-color: var(--primary); }

/* Dark: status dots */
[data-theme="dark"] .status-dot.green  { background: var(--green); }
[data-theme="dark"] .status-dot.yellow { background: var(--primary); }
[data-theme="dark"] .status-dot.amber  { background: var(--primary); }
[data-theme="dark"] .status-dot.red    { background: var(--red); }
[data-theme="dark"] .status-dot.gray   { background: var(--text-muted); }

/* Dark: shadows */
[data-theme="dark"] .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
[data-theme="dark"] .shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
[data-theme="dark"] .shadow-lg { box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
[data-theme="dark"] .shadow-xl { box-shadow: 0 20px 60px rgba(0,0,0,0.5); }

/* Dark: misc */
[data-theme="dark"] canvas { filter: brightness(0.9); }
[data-theme="dark"] .animate-pulse > div { background: var(--bg-hover) !important; }
[data-theme="dark"] .skeleton { background: linear-gradient(90deg, var(--card) 25%, var(--bg-hover) 50%, var(--card) 75%); background-size: 200% 100%; }
[data-theme="dark"] .radio-card.selected { background: rgba(34,197,94,0.1); }
[data-theme="dark"] .divide-gray-100 > * + * { border-color: var(--border) !important; }
[data-theme="dark"] .divide-gray-200 > * + * { border-color: var(--border) !important; }

/* =========================   MOBILE UX   ========================= */
/* Touch targets: min 44px */
button, a, [role="button"], input[type="checkbox"], input[type="radio"], select, label[for] {
  min-height: 44px;
  min-width: 44px;
}

/* Fast tap: remove 300ms delay */
a, button {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

/* Haptic feedback */
.js-haptic {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.js-haptic:active { transform: scale(0.97); }

/* Auto-select on focus: use JS to call select() on focus events */

/* Tel/decimal inputs: numeric keyboard */
/* inputmode 属性应直接在 HTML 元素上设置 inputmode="numeric" / inputmode="decimal" */

/* Focus ring: accessible */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Auto-clear on invalid */
input:invalid:not(:placeholder-shown) { border-color: var(--red) !important; }

/* Page enter animation */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-enter { animation: page-enter 0.2s ease-out; }

/* Staggered list */
@keyframes list-item-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.list-item-in { animation: list-item-in 0.15s ease-out forwards; }

/* Scrollbar: hide on mobile */
::-webkit-scrollbar { display: none; }
* { -ms-overflow-style: none; scrollbar-width: none; }

/* Safe area padding */
.safe-area-top    { padding-top:    env(safe-area-inset-top,    0px); }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
.safe-area-left   { padding-left:   env(safe-area-inset-left,   0px); }
.safe-area-right  { padding-right:  env(safe-area-inset-right,  0px); }

/* Offline banner */
.offline-banner {
  position: fixed;
  top: calc(var(--header-height) + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--warning);
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  z-index: 61;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}

.offline-banner.visible { opacity: 1; }

/* Toast */
.toast-container {
  position: fixed;
  bottom: calc(var(--bottomnav-height) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.toast {
  background: var(--card);
  color: var(--text-main);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  max-width: min(360px, calc(100vw - 32px));
  text-align: center;
  animation: toast-in 0.25s ease-out forwards;
}

@keyframes toast-in {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes toast-out {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(100%); opacity: 0; }
}

.toast.toast-out { animation: toast-out 0.2s ease-in forwards; }

/* =========================   CLOUD MODAL (sync.js)   ========================= */
.cloud-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.cloud-modal.active { display: flex; }

.cloud-card {
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: 24px;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}

.cloud-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.cloud-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
}

.cloud-card-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  color: var(--text-secondary);
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.cloud-card-close:hover { background: var(--bg-hover); }

.cloud-status-box {
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 16px;
  font-size: 14px;
}

.cloud-status-label { font-weight: 600; color: var(--text-main); margin-bottom: 4px; }
.cloud-status-text  { color: var(--text-secondary); font-size: 13px; }

.cloud-option-btn {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  background: var(--card);
  color: var(--text-main);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  margin-bottom: 10px;
  min-height: 44px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.cloud-option-btn:hover {
  background: var(--bg-hover);
  border-color: var(--info);
  color: var(--info);
}

.cloud-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  box-sizing: border-box;
  background: var(--card);
  color: var(--text-main);
}

.cloud-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
  outline: none;
}

.cloud-manual-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
}

.cloud-manual-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
}

.cloud-pending {
  margin-top: 16px;
  padding: var(--space-2);
  background: rgba(245,158,11,0.1);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--primary);
  display: none;
}

.cloud-pending.visible { display: block; }

/* =========================   ANIMATIONS   ========================= */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

.animate-pulse-slow { animation: pulse 2s infinite; }

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.animate-pulse { animation: skeleton-pulse 1.5s ease-in-out infinite; }

/* Skeleton shimmer blocks — theme-aware replacement for hardcoded #e2e8f0 */
.skeleton-shimmer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  opacity: 0.5;
}
.skeleton-shimmer-bar {
  border-radius: 4px;
  animation: shimmer 1.5s infinite;
  background: var(--card-soft);
}
.skeleton-shimmer-bar.tall { width: 20px; height: 20px; }
.skeleton-shimmer-bar.wide { width: 24px; height: 11px; border-radius: 2px; }

/* Responsive */
@media (max-width: 500px) {
  .bottomnav { max-width: 100%; }
  main { padding: 12px; }
}

/* =========================   DASHBOARD SALE ROWS   ========================= */
.dsh-sale-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  min-width: 0;
  gap: 8px;
}
.dsh-sale-row:last-child { border-bottom: none; }

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

.dsh-customer-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dsh-sale-date {
  font-size: 12px;
  color: var(--text-secondary);
}

.dsh-sale-money {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  align-items: baseline;
  gap: 4px;
  justify-content: flex-end;
}

.dsh-money-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--green);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.dsh-money-unit {
  font-size: 12px;
  font-weight: 400;
  color: var(--green);
  opacity: 0.7;
  align-self: flex-end;
  margin-bottom: 1px;
}

.dsh-shortfall {
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* =========================   DASHBOARD OPTIMIZED   ========================= */
/* Dashboard section title — subtle muted style, no amber color */
.dashboard-page .section-title {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.625rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .dashboard-page .section-title {
  color: var(--text-muted);
  border-bottom-color: var(--border);
}

/* KPI card: Binance dark style */
.dashboard-page .card.card--kpi-green,
.dashboard-page .card.card--kpi-emerald {
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  border-radius: 16px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
  transition: box-shadow 0.15s ease;
}

.dashboard-page .card.card--kpi-green:active,
.dashboard-page .card.card--kpi-emerald:active {
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.dashboard-page .card.card--kpi-red {
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  border-radius: 16px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
}

.dashboard-page .card.card--kpi-amber {
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  border-radius: 16px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
}

/* KPI label — flat card style */
.dashboard-page .card--kpi-green .kpi-label,
.dashboard-page .card--kpi-emerald .kpi-label,
.dashboard-page .card--kpi-red .kpi-label,
.dashboard-page .card--kpi-amber .kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.dashboard-page .card--kpi-green .kpi-label-icon,
.dashboard-page .card--kpi-emerald .kpi-label-icon,
.dashboard-page .card--kpi-red .kpi-label-icon,
.dashboard-page .card--kpi-amber .kpi-label-icon {
  font-size: 0.9rem;
  line-height: 1;
}

.dashboard-page .card--kpi-green .kpi-label-icon { color: var(--green); }
.dashboard-page .card--kpi-emerald .kpi-label-icon { color: var(--green); }
.dashboard-page .card--kpi-red .kpi-label-icon { color: var(--red); }
.dashboard-page .card--kpi-amber .kpi-label-icon { color: var(--primary); }

/* Dark KPI flat cards */
[data-theme="dark"] .dashboard-page .card.card--kpi-green,
[data-theme="dark"] .dashboard-page .card.card--kpi-emerald,
[data-theme="dark"] .dashboard-page .card.card--kpi-red,
[data-theme="dark"] .dashboard-page .card.card--kpi-amber {
  border-color: var(--border);
  background: var(--card);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

[data-theme="dark"] .dashboard-page .card--kpi-green .kpi-label,
[data-theme="dark"] .dashboard-page .card--kpi-emerald .kpi-label,
[data-theme="dark"] .dashboard-page .card--kpi-red .kpi-label,
[data-theme="dark"] .dashboard-page .card--kpi-amber .kpi-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .dashboard-page .card--kpi-green .kpi-label-icon { color: var(--green); }
[data-theme="dark"] .dashboard-page .card--kpi-emerald .kpi-label-icon { color: var(--green); }
[data-theme="dark"] .dashboard-page .card--kpi-red .kpi-label-icon { color: var(--red); }
[data-theme="dark"] .dashboard-page .card--kpi-amber .kpi-label-icon { color: var(--primary); }

/* Fixed bottom quick-action bar (Grab-style) */
.dashboard-quick-bar {
  position: fixed;
  bottom: calc(var(--bottomnav-height) + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  z-index: 58;
  padding: 0 12px;
}

.dashboard-quick-bar-inner {
  background: rgba(17,24,39,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  padding: 8px;
  display: flex;
  gap: var(--space-2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.05) inset;
  max-width: 480px;
  margin: 0 auto;
}

.dashboard-quick-bar-inner a,
.dashboard-quick-bar-inner button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-lg);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  min-height: 44px;
  color: var(--text-main);
  background: rgba(255,255,255,0.06);
  letter-spacing: 0.01em;
}

.dashboard-quick-bar-inner a:active,
.dashboard-quick-bar-inner button:active {
  transform: scale(0.95);
}

.dashboard-quick-bar-inner .qb-primary {
  background: var(--primary);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-primary);
}

.dashboard-quick-bar-inner .qb-primary:active {
  filter: brightness(0.92);
  box-shadow: var(--shadow-xs);
}

.dashboard-quick-bar-inner .qb-icon { font-size: 16px; line-height: 1; }

/* Dark quick bar */
[data-theme="dark"] .dashboard-quick-bar-inner {
  background: rgba(15,23,42,0.92);
  border-color: rgba(255,255,255,0.08);
}

/* =========================   STAT CARDS (kegs, customer-detail, stock...)   ========================= */
/* Dùng .card.stat-card--{color} cho KPI cards ngoài dashboard */

/* Stat card variants — flat slate-800 clean design */
.card.stat-card--green,
.card.stat-card--success,
.card.stat-card--emerald,
.card.stat-card--profit,
.card.stat-card--red,
.card.stat-card--danger,
.card.stat-card--blue,
.card.stat-card--info,
.card.stat-card--amber,
.card.stat-card--warning {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
}

/* Stat card: label + icon + value */
.card.stat-card--green .sc-label,
.card.stat-card--emerald .sc-label,
.card.stat-card--red .sc-label,
.card.stat-card--blue .sc-label,
.card.stat-card--amber .sc-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.card.stat-card--green .sc-icon,
.card.stat-card--emerald .sc-icon { color: var(--green); }
.card.stat-card--red .sc-icon { color: var(--red); }
.card.stat-card--blue .sc-icon { color: var(--info); }
.card.stat-card--emerald .sc-icon { color: var(--green); }
.card.stat-card--amber .sc-icon { color: var(--primary); }

.card.stat-card--green .sc-value,
.card.stat-card--emerald .sc-value { font-size: 18px; font-weight: 800; color: var(--green); line-height: 1.1; letter-spacing: -0.02em; }
.card.stat-card--red .sc-value { font-size: 18px; font-weight: 800; color: var(--red); line-height: 1.1; letter-spacing: -0.02em; }
.card.stat-card--blue .sc-value { font-size: 18px; font-weight: 800; color: var(--info); line-height: 1.1; letter-spacing: -0.02em; }
.card.stat-card--amber .sc-value { font-size: 18px; font-weight: 800; color: var(--primary); line-height: 1.1; letter-spacing: -0.02em; }

.card.stat-card--green .sc-sub,
.card.stat-card--emerald .sc-sub,
.card.stat-card--red .sc-sub,
.card.stat-card--blue .sc-sub,
.card.stat-card--amber .sc-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Dark stat cards */
[data-theme="dark"] .card.stat-card--green,
[data-theme="dark"] .card.stat-card--success,
[data-theme="dark"] .card.stat-card--emerald,
[data-theme="dark"] .card.stat-card--profit,
[data-theme="dark"] .card.stat-card--red,
[data-theme="dark"] .card.stat-card--danger,
[data-theme="dark"] .card.stat-card--blue,
[data-theme="dark"] .card.stat-card--info,
[data-theme="dark"] .card.stat-card--amber,
[data-theme="dark"] .card.stat-card--warning {
  border-color: var(--border);
  background: var(--card);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

[data-theme="dark"] .card.stat-card--green .sc-label,
[data-theme="dark"] .card.stat-card--emerald .sc-label,
[data-theme="dark"] .card.stat-card--red .sc-label,
[data-theme="dark"] .card.stat-card--blue .sc-label,
[data-theme="dark"] .card.stat-card--amber .sc-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .card.stat-card--green .sc-icon,
[data-theme="dark"] .card.stat-card--emerald .sc-icon { color: var(--green); }
[data-theme="dark"] .card.stat-card--red .sc-icon { color: var(--red); }
[data-theme="dark"] .card.stat-card--blue .sc-icon { color: var(--info); }
[data-theme="dark"] .card.stat-card--amber .sc-icon { color: var(--primary); }

[data-theme="dark"] .card.stat-card--green .sc-value,
[data-theme="dark"] .card.stat-card--emerald .sc-value { color: var(--green); }
[data-theme="dark"] .card.stat-card--red .sc-value { color: var(--red); }
[data-theme="dark"] .card.stat-card--blue .sc-value { color: var(--info); }
[data-theme="dark"] .card.stat-card--amber .sc-value { color: var(--primary); }

[data-theme="dark"] .card.stat-card--green .sc-sub,
[data-theme="dark"] .card.stat-card--emerald .sc-sub,
[data-theme="dark"] .card.stat-card--red .sc-sub,
[data-theme="dark"] .card.stat-card--blue .sc-sub,
[data-theme="dark"] .card.stat-card--amber .sc-sub {
  color: var(--text-muted);
}

/* =========================   ACTION BUTTONS (kegs quick actions)   ========================= */
.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 8px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  min-height: 44px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.action-btn:active {
  transform: scale(0.95);
  box-shadow: var(--shadow-xs);
}

.action-btn .ab-icon { font-size: 24px; line-height: 1; }
.action-btn .ab-label { font-size: 12px; font-weight: 600; }

.action-btn.ab-green  { border-color: rgba(14,203,129,0.4); background: rgba(14,203,129,0.08); }
.action-btn.ab-green .ab-label { color: var(--green); }

.action-btn.ab-blue   { border-color: rgba(59,130,246,0.35); background: rgba(59,130,246,0.08); }
.action-btn.ab-blue .ab-label { color: var(--info); }

.action-btn.ab-purple { border-color: rgba(139,92,246,0.35); background: rgba(139,92,246,0.08); }
:root.dark .action-btn.ab-purple .ab-label,
:root[data-theme="dark"] .action-btn.ab-purple .ab-label { color: var(--purple-light); }
:root.light .action-btn.ab-purple .ab-label,
:root[data-theme="light"] .action-btn.ab-purple .ab-label { color: var(--purple); }
.action-btn.ab-purple .ab-label { color: var(--purple); }

.action-btn.ab-amber { border-color: rgba(252,213,53,0.35); background: rgba(252,213,53,0.08); }
.action-btn.ab-amber .ab-label { color: var(--primary-hover); }

.action-btn.ab-default { border-color: var(--border); background: var(--card); }
.action-btn.ab-default .ab-label { color: var(--text-secondary); }

/* Dark action buttons */
:root.dark .action-btn,
:root[data-theme="dark"] .action-btn { background: var(--card); border-color: var(--border); }
:root.dark .action-btn.ab-green,
:root[data-theme="dark"] .action-btn.ab-green  { border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.1); }
:root.dark .action-btn.ab-green .ab-label,
:root[data-theme="dark"] .action-btn.ab-green .ab-label { color: var(--green); }
:root.dark .action-btn.ab-blue,
:root[data-theme="dark"] .action-btn.ab-blue   { border-color: rgba(59,130,246,0.4); background: rgba(59,130,246,0.1); }
:root.dark .action-btn.ab-blue .ab-label,
:root[data-theme="dark"] .action-btn.ab-blue .ab-label { color: var(--info); }
:root.dark .action-btn.ab-purple,
:root[data-theme="dark"] .action-btn.ab-purple { border-color: rgba(139,92,246,0.4); background: rgba(139,92,246,0.1); }
:root.dark .action-btn.ab-amber,
:root[data-theme="dark"] .action-btn.ab-amber { border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.1); }
:root.dark .action-btn.ab-amber .ab-label,
:root[data-theme="dark"] .action-btn.ab-amber .ab-label { color: var(--primary); }

/* =========================   SECTION TITLE (reused across pages)   ========================= */
.section-title {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.625rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .section-title {
  color: var(--text-muted);
  border-bottom-color: var(--border);
}

/* =========================   PREMIUM CARD SYSTEM v2   ========================= */
/* Money Display — unified across all pages */
.money-display {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.money-display .md-value {
  font-weight: 800;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.money-display .md-unit {
  font-size: 0.7em;
  font-weight: 500;
  opacity: 0.75;
}

/* Money size variants */
.money-display.md-hero .md-value { font-size: 2rem; }
.money-display.md-xl   .md-value { font-size: 1.5rem; }
.money-display.md-lg   .md-value { font-size: 1.25rem; }
.money-display.md-base .md-value { font-size: 1rem; }
.money-display.md-sm   .md-value { font-size: 0.875rem; }

/* Money color variants */
.money-display.md-success  .md-value { color: var(--green); }
.money-display.md-danger   .md-value { color: var(--red); }
.money-display.md-warning  .md-value { color: var(--primary-hover); }
.money-display.md-info     .md-value { color: var(--info); }
.money-display.md-muted    .md-value { color: var(--text-muted); }

/* Dark money */
[data-theme="dark"] .money-display.md-success  .md-value { color: var(--green); }
[data-theme="dark"] .money-display.md-danger   .md-value { color: var(--red); }
[data-theme="dark"] .money-display.md-warning  .md-value { color: var(--primary); }
[data-theme="dark"] .money-display.md-info     .md-value { color: var(--info); }

/* Summary Gradient Cards — replaces inline gradient styles */
.card.card--summary-green  { background: rgba(14, 203, 129, 0.08); border: 1px solid rgba(14, 203, 129, 0.2); border-radius: var(--radius-lg); }
.card.card--summary-red    { background: rgba(246, 70, 93, 0.08);  border: 1px solid rgba(246, 70, 93, 0.2);  border-radius: var(--radius-lg); }
.card.card--summary-blue   { background: rgba(59, 122, 254, 0.08); border: 1px solid rgba(59, 122, 254, 0.2); border-radius: var(--radius-lg); }
.card.card--summary-purple { background: rgba(139, 92, 246, 0.08); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: var(--radius-lg); }
.card.card--summary-teal   { background: rgba(13, 148, 136, 0.08); border: 1px solid rgba(13, 148, 136, 0.2); border-radius: var(--radius-lg); }

.card.card--summary-green  .sum-label,
.card.card--summary-red    .sum-label,
.card.card--summary-blue   .sum-label,
.card.card--summary-purple .sum-label,
.card.card--summary-teal   .sum-label { font-size: 0.75rem; opacity: 0.7; color: var(--text-secondary); }

.card.card--summary-green  .sum-value,
.card.card--summary-red    .sum-value,
.card.card--summary-blue   .sum-value,
.card.card--summary-purple .sum-value,
.card.card--summary-teal   .sum-value { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.5px; }

/* Dark summary cards — subtle tint, no shadow */
:root.dark .card.card--summary-green,
:root[data-theme="dark"] .card.card--summary-green  { background: var(--green-dim);  border-color: var(--green); }
:root.dark .card.card--summary-red,
:root[data-theme="dark"] .card.card--summary-red    { background: var(--red-dim);    border-color: var(--red); }
:root.dark .card.card--summary-blue,
:root[data-theme="dark"] .card.card--summary-blue   { background: var(--info-dim);   border-color: var(--info); }
:root.dark .card.card--summary-purple,
:root[data-theme="dark"] .card.card--summary-purple { background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.4); }
:root.dark .card.card--summary-teal,
:root[data-theme="dark"] .card.card--summary-teal   { background: rgba(13, 148, 136, 0.12); border-color: rgba(13, 148, 136, 0.4); }
:root.dark .card.card--summary-green  .sum-value,
:root[data-theme="dark"] .card.card--summary-green  .sum-value { color: var(--green); }
:root.dark .card.card--summary-red    .sum-value,
:root[data-theme="dark"] .card.card--summary-red    .sum-value { color: var(--red); }
:root.dark .card.card--summary-blue   .sum-value,
:root[data-theme="dark"] .card.card--summary-blue   .sum-value { color: var(--info); }
:root.dark .card.card--summary-purple .sum-value,
:root[data-theme="dark"] .card.card--summary-purple .sum-value { color: var(--purple-light); }
:root.light .card.card--summary-purple .sum-value,
:root[data-theme="light"] .card.card--summary-purple .sum-value { color: var(--purple); }
:root.dark .card.card--summary-teal   .sum-value,
:root[data-theme="dark"] .card.card--summary-teal   .sum-value { color: var(--teal-light); }
:root.light .card.card--summary-teal .sum-value,
:root[data-theme="light"] .card.card--summary-teal .sum-value { color: var(--teal); }

/* List Item Cards — hover-friendly, consistent spacing */
.card.card--list-item {
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
  border: 1px solid var(--border);
  background: var(--card);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal), background var(--transition-normal);
  cursor: default;
}
.card.card--list-item:hover {
  background: var(--card-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
:root.dark .card.card--list-item,
:root[data-theme="dark"] .card.card--list-item {
  border-color: var(--border);
}
:root.dark .card.card--list-item:hover,
:root[data-theme="dark"] .card.card--list-item:hover {
  background: var(--card-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Stat card hover scale — all stat-card variants */
.card.stat-card--green:hover,
.card.stat-card--blue:hover,
.card.stat-card--amber:hover,
.card.stat-card--emerald:hover,
.card.stat-card--profit:hover,
.card.stat-card--success:hover,
.card.stat-card--red:hover,
.card.stat-card--danger:hover,
.card.stat-card--info:hover {
  opacity: 0.9;
}

/* Badge Pills — consistent badge styling */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
}
.badge-pill.bp-success  { background: var(--green-dim);  color: var(--green); }
.badge-pill.bp-danger   { background: var(--red-dim);    color: var(--red); }
.badge-pill.bp-warning  { background: var(--primary-dim); color: var(--primary-hover); }
.badge-pill.bp-info     { background: rgba(59,130,246,0.15); color: var(--info); }
.badge-pill.bp-muted    { background: rgba(107,114,128,0.15); color: var(--text-muted); }
[data-theme="dark"] .badge-pill.bp-success  { background: var(--green-dim); color: var(--green); }
[data-theme="dark"] .badge-pill.bp-danger   { background: var(--red-dim); color: var(--red); }
[data-theme="dark"] .badge-pill.bp-warning  { background: var(--primary-dim); color: var(--primary); }
[data-theme="dark"] .badge-pill.bp-info     { background: rgba(59,130,246,0.15); color: var(--info); }

/* Revenue mini cards (dashboard) — compact list style */
.card.card--revenue-mini {
  border-radius: 10px;
  padding: var(--space-2) var(--space-3);
  background: var(--card);
  border: 1px solid var(--border);
  transition: box-shadow 0.15s;
}
.card.card--revenue-mini:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Alert card variants — flat, minimal */
.card.card--alert-danger {
  border-left: 4px solid var(--red);
  background: var(--red-dim);
  border-radius: 16px;
  padding: 14px 16px;
}
.card.card--alert-warning {
  border-left: 4px solid var(--primary);
  background: var(--primary-dim);
  border-radius: 16px;
  padding: 14px 16px;
}

/* Under-target alert list items — flat design */
.card.card--alert-warning .dsh-sale-row {
  border-bottom: 1px solid var(--border);
  padding: 11px 0;
}
.card.card--alert-warning .dsh-sale-row:last-child {
  border-bottom: none;
}
.card.card--alert-warning .dsh-sale-date,
.card.card--alert-warning .dsh-shortfall {
  color: var(--text-muted);
}

[data-theme="dark"] .card.card--alert-danger {
  border-left-color: var(--red);
  background: var(--red-dim);
}
[data-theme="dark"] .card.card--alert-warning {
  border-left-color: var(--primary);
  background: var(--primary-dim);
}
[data-theme="dark"] .card.card--alert-warning .dsh-sale-row {
  border-bottom-color: var(--border);
}

/* ── HEADER SYSTEM (consolidated) ── */
.header-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.header-logo-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

.header-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.header-title-text {
  font-weight: 600;
  font-size: 16px;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.2px;
}

.header-version-text {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: -1px;
}

.header-actions {
  display: flex;
  gap: 8px;
  font-size: 18px;
  flex-shrink: 0;
  align-items: center;
  flex-wrap: nowrap;
}

.online-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--bg);
  color: var(--text-muted);
  font-weight: 500;
  margin-right: 2px;
}

.sync-status {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  margin-right: 2px;
}

.theme-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle-btn:hover { background: var(--bg-hover); }
.theme-toggle-btn:active { transform: scale(0.92); }
.theme-toggle-btn svg { color: var(--text-secondary); transition: color 0.2s; }
[data-theme="dark"] .theme-toggle-btn svg { color: var(--text-secondary); }

.header-home-btn {
  color: var(--primary);
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
  font-size: 18px;
}

.header-home-btn:hover { background: var(--primary-dim); }

/* ── BOTTOM NAVIGATION ── */
/* nav-item extras (base .bottomnav and .nav-item rules are in base section) */
.nav-item-icon { font-size: 22px; line-height: 1; }
.nav-item-label { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }

.nav-item:hover:not(.active) {
  color: var(--text-secondary);
}

/* ============================================================
   OPTIMISTIC UI INDICATORS
   Visual feedback for pending/syncing state
   ============================================================ */

/* Card-level pending: semi-transparent overlay while server confirms */
.optimistic-pending,
.optimistic-pending .card {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Pulsing ring to indicate background sync */
@keyframes optimistic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 122, 254, 0.4); }
  50%       { box-shadow: 0 0 0 4px rgba(59, 122, 254, 0); }
}
.optimistic-pending.optimistic-pulse {
  animation: optimistic-pulse 1.2s ease-in-out infinite;
}

/* Purchase table (Report) */
.purchase-table-wrap {
  overflow-x: auto;
  padding: 0 16px 8px;
}

.purchase-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.purchase-mini-table th {
  text-align: left;
  padding: var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.purchase-mini-table td {
  padding: var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
  white-space: nowrap;
  font-size: 12px;
}

.purchase-mini-table tr:last-child td {
  border-bottom: none;
}

.purchase-mini-table .text-note {
  color: var(--text-muted);
  font-size: 11px;
}

/* Inline loading spinner for buttons */
@keyframes optimistic-spin {
  to { transform: rotate(360deg); }
}
.btn-optimistic-loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: optimistic-spin 0.6s linear infinite;
  margin-right: 6px;
  vertical-align: -2px;
}

/* ============================================================
   DESIGN SYSTEM — Binance Style v2
   Production SaaS: Binance density, mobile-first, WCAG AA
   ============================================================ */

/* ── SPACING SYSTEM (8pt grid) ── */
.gap-1  { gap: 4px; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.gap-6  { gap: 24px; }

.p-1  { padding: 4px; }
.p-2  { padding: 8px; }
.p-3  { padding: 12px; }
.p-4  { padding: 16px; }
.p-6  { padding: 24px; }

.px-2  { padding-left: 8px; padding-right: 8px; }
.px-3  { padding-left: 12px; padding-right: 12px; }
.px-4  { padding-left: 16px; padding-right: 16px; }
.px-6  { padding-left: 24px; padding-right: 24px; }

.py-2  { padding-top: 8px; padding-bottom: 8px; }
.py-3  { padding-top: 12px; padding-bottom: 12px; }
.py-4  { padding-top: 16px; padding-bottom: 16px; }

.m-0   { margin: 0; }
.mb-1  { margin-bottom: 4px; }
.mb-2  { margin-bottom: 8px; }
.mb-3  { margin-bottom: 12px; }
.mb-4  { margin-bottom: 16px; }
.mb-6  { margin-bottom: 24px; }
.mt-1  { margin-top: 4px; }
.mt-2  { margin-top: 8px; }
.mt-3  { margin-top: 12px; }
.mt-4  { margin-top: 16px; }
.mt-6  { margin-top: 24px; }

.space-y-2 > * + * { margin-top: 8px; }
.space-y-3 > * + * { margin-top: 12px; }
.space-y-4 > * + * { margin-top: 16px; }

/* ── TYPOGRAPHY SCALE (Binance standard) ── */
.font-10 { font-size: 10px !important; }
.font-11 { font-size: 11px !important; }
.font-12 { font-size: 12px !important; }
.font-13 { font-size: 13px !important; }
.font-14 { font-size: 14px !important; }
.font-15 { font-size: 15px !important; }
.font-16 { font-size: 16px !important; }
.font-18 { font-size: 18px !important; }
.font-20 { font-size: 20px !important; }
.font-22 { font-size: 22px !important; }
.font-24 { font-size: 24px !important; }
.font-28 { font-size: 28px !important; }
.font-32 { font-size: 32px !important; }

.lh-tight   { line-height: 1.2 !important; }
.lh-normal  { line-height: 1.4 !important; }
.lh-relaxed { line-height: 1.6 !important; }

.tracking-tight  { letter-spacing: -0.02em !important; }
.tracking-normal { letter-spacing: 0 !important; }
.tracking-wide   { letter-spacing: 0.02em !important; }
.tracking-wider  { letter-spacing: 0.05em !important; }

.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }

/* Tabular numbers — always use for financial data */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ── SECTION TITLE SYSTEM ── */
.section {
  margin-bottom: 16px;
}

.section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.section-title .section-title-icon {
  font-size: 14px;
}

[data-theme="dark"] .section-title {
  color: var(--text-secondary);
  border-bottom-color: var(--border);
}

/* Section card wrapper */
.section-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 8px;
}

.section-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.section-card-header:active {
  background: var(--bg-hover);
}

.section-card-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.section-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.section-card-icon.icon-green  { background: var(--green-dim); }
.section-card-icon.icon-red    { background: var(--red-dim); }
.section-card-icon.icon-blue   { background: rgba(59,130,246,0.12); }
.section-card-icon.icon-gold   { background: var(--primary-dim); }
.section-card-icon.icon-purple  { background: rgba(139,92,246,0.12); }

.section-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.section-card-badge {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 700;
  background: var(--green-dim);
  color: var(--green);
  margin-left: 6px;
}

.section-card-title-wrap {
  display: flex;
  flex-direction: column;
}

.section-card-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.section-card-arrow {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.section-card-header.collapsed .section-card-arrow {
  transform: rotate(-90deg);
}

.section-card-body {
  overflow: hidden;
  max-height: 2000px;
  transition: max-height 0.25s ease;
}

.section-card-body.collapsed {
  max-height: 0;
}

/* ── APP HEADER (fixed, sticky — used by report, expenses, etc.) ── */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* safe-area handled via height only — NO padding-top to avoid double-offset */
  height: calc(var(--header-height) + var(--safe-area-top));
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  z-index: 200;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  box-sizing: border-box;
}

[data-theme="dark"] .app-header {
  background: rgba(30,35,41,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1;
}

.app-header-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--primary-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.app-header-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-header-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.app-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}

.app-header-kpi {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
  line-height: 1;
  letter-spacing: -0.4px;
}

.app-header-growth {
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
}

.app-header-growth.up   { color: var(--green); }
.app-header-growth.down { color: var(--red); }
.app-header-growth.neutral { color: var(--text-muted); }

/* ── Filter Bar Buttons ── */
.app-filter-btn {
  position: relative;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.01em;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.app-filter-btn:active {
  transform: scale(0.95);
  opacity: 0.85;
}

.app-filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(239, 68, 34, 0.35);
}

.app-filter-btn.active .filter-dot {
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 4px rgba(255,255,255,0.6);
}

/* Dot indicator for quick filters */
.filter-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-disabled);
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.app-filter-btn.active .filter-dot {
  background: rgba(255,255,255,0.9);
}

/* Custom button — distinct icon style */
.app-filter-btn--custom {
  background: var(--bg-tertiary);
  border-style: dashed;
  gap: 4px;
}

.app-filter-btn--custom.active {
  background: var(--primary);
  border-color: var(--primary);
  border-style: solid;
}

.filter-icon {
  font-size: 11px;
  line-height: 1;
}

/* Range label below filter bar */
.app-filter-range-label.visible { display: block; }

.app-filter-range-label::before {
  content: '📅';
  margin-right: 5px;
  font-size: 10px;
}

/* Date Range Modal — Binance-style bottom sheet */
.drp-handle {
  width: 36px;
  height: 4px;
  background: var(--border-strong);
  border-radius: 2px;
  margin: 8px auto 0;
  flex-shrink: 0;
}

.date-range-modal-sheet {
  position: fixed;
  bottom: calc(var(--bottomnav-height) + var(--safe-area-bottom) + 8px);
  left: 0;
  right: 0;
  max-width: 500px;
  margin: 0 auto;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 85dvh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.date-range-modal-sheet .modal-sheet-v2-header {
  flex-shrink: 0;
  padding: 12px 16px 10px;
}

.date-range-modal-sheet .modal-sheet-v2-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px 12px;
  min-height: 0;
}

.date-range-modal-sheet .modal-sheet-v2-footer {
  flex-shrink: 0;
  padding: 8px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 10px;
  background: var(--card);
  border-top: 1px solid var(--border);
}

.date-range-modal-sheet .modal-sheet-v2-footer .btn {
  flex: 1;
  padding: 13px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
}

/* ── Preset Buttons ── */
.drp-presets {
  display: grid;
  /* Mobile: 3 equal columns, no wrap */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.drp-preset-btn {
  padding: 10px var(--space-2);
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  line-height: 1.3;
  /* Touch target ≥ 44px */
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.drp-preset-btn:active {
  transform: scale(0.96);
  background: var(--accent-dim);
}

.drp-preset-btn.active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--accent-dim);
  font-weight: 700;
}

.drp-preset-btn:hover:not(.active) {
  border-color: var(--primary);
  color: var(--text-primary);
  background: var(--bg-hover);
}

/* ── Divider ── */
.drp-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: var(--text-disabled);
}

.drp-divider::before,
.drp-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.drp-divider span {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-disabled);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* ── Date Inputs Row ── */
.drp-inputs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.drp-input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.drp-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.drp-date-input {
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  font-weight: 600;
  min-height: 44px;
  color-scheme: light dark;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  /* Make date input text larger on mobile for readability */
  -webkit-appearance: none;
  appearance: none;
}

.drp-date-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.drp-date-input:active {
  border-color: var(--primary);
}

/* Separator arrow */
.drp-separator {
  color: var(--text-disabled);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  padding-top: 18px;
  flex-shrink: 0;
  line-height: 1;
  pointer-events: none;
  align-self: flex-start;
}

/* ── KPI CARD SYSTEM (Report + Dashboard) ── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px;
  transition: background var(--transition-fast);
}

.kpi-card:active { opacity: 0.85; }

[data-theme="dark"] .kpi-card {
  background: var(--card);
  border-color: var(--border);
}

.kpi-card.highlight {
  border-color: var(--primary);
  background: var(--primary-dim);
}

.kpi-card-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}

.kpi-card-value {
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
  line-height: 1.05;
  letter-spacing: -0.6px;
}

.kpi-card-value.gold   { color: var(--primary); }
.kpi-card-value.green  { color: var(--green); }
.kpi-card-value.red    { color: var(--red); }
.kpi-card-value.blue   { color: var(--info); }

/* ── CHART SECTION ── */
.chart-section {
  padding: 0 12px 10px;
}

.chart-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px;
}

[data-theme="dark"] .chart-card {
  background: var(--card);
  border-color: var(--border);
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.chart-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}

.chart-legend {
  display: flex;
  gap: var(--space-3);
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 500;
}

.chart-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chart-legend-dot.revenue { background: var(--primary); }
.chart-legend-dot.profit  { background: var(--green); }

.chart-container {
  position: relative;
  height: 140px;
}

/* ── TOP LIST (Report) ── */
.top-list {
  padding: 4px 12px 6px;
}

.top-item {
  display: flex;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}

.top-item:last-child { border-bottom: none; }

.top-item-rank {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  background: var(--card-soft);
  color: var(--text-secondary);
}

.top-item-rank.rank-gold   { background: rgba(252,213,53,0.2); color: var(--primary-hover); }
.top-item-rank.rank-silver { background: rgba(180,180,180,0.2); color: var(--text-muted); }
.top-item-rank.rank-bronze { background: rgba(205,127,50,0.2); color: var(--warning); }

.top-item-info {
  flex: 1;
  min-width: 0;
}

.top-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.1px;
}

.top-item-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.top-item-value {
  text-align: right;
  flex-shrink: 0;
}

.top-item-profit {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.top-item-profit.green { color: var(--green); }
.top-item-profit.red   { color: var(--red); }

.see-more-btn {
  padding: 8px 16px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: transparent;
  border: none;
  width: 100%;
  letter-spacing: 0.01em;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── PURCHASE SUMMARY (Report) ── */
.purchase-summary-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg);
}

[data-theme="dark"] .purchase-summary-row {
  background: var(--bg);
}

.purchase-stat-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px;
  text-align: center;
}

[data-theme="dark"] .purchase-stat-box {
  background: var(--card);
  border-color: var(--border);
}

.purchase-stat-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

.purchase-stat-value {
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--red);
  line-height: 1;
  letter-spacing: -0.4px;
}

/* ── SKELETON LOADING ── */
.skeleton-block {
  background: linear-gradient(90deg, var(--card-soft) 25%, var(--border) 50%, var(--card-soft) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Filter bar — sticky under header, glass blur background */
.app-filter-bar {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--bg-base);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: var(--space-3) var(--space-3) calc(var(--space-3) + 4px);
  display: flex;
  gap: 6px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0;
  width: 100%;
}
.text-10 { font-size: 10px !important; }
.text-11 { font-size: 11px !important; }
.text-12 { font-size: 12px !important; }
.text-13 { font-size: 13px !important; }
.text-14 { font-size: 14px !important; }
.text-15 { font-size: 15px !important; }
.text-16 { font-size: 16px !important; }
.text-18 { font-size: 18px !important; }
.text-20 { font-size: 20px !important; }
.text-22 { font-size: 22px !important; }
.text-24 { font-size: 24px !important; }
.text-28 { font-size: 28px !important; }
.text-32 { font-size: 32px !important; }
.text-36 { font-size: 36px !important; }
.text-40 { font-size: 40px !important; }
.text-48 { font-size: 48px !important; }
.text-52 { font-size: 52px !important; }

/* Font weight utilities */
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-size: 800; }

/* ── TOUCH & INTERACTION ── */
.touch-manipulation { touch-action: manipulation; }
.tap-highlight-transparent { -webkit-tap-highlight-color: transparent; }

/* ── GRID UTILITIES ── */
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── FORM INPUTS (refined Binance style) ── */
.field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.field-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.field-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(252,213,53,0.15);
}

.field-wrap .field-input {
  flex: 1;
  min-width: 0;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent;
}

.field-wrap .field-suffix {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  background: var(--bg);
  border-left: 1px solid var(--border);
  flex-shrink: 0;
}

/* Stepper component */
.stepper {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.stepper:focus-within {
  border-color: var(--info);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.stepper-btn {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  background: var(--bg);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  color: var(--text-main);
}

.stepper-btn.minus {
  border-right: 1px solid var(--border);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.stepper-btn.plus {
  border-left: 1px solid var(--border);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.stepper-btn:active {
  transform: scale(0.92);
  background: var(--bg-hover);
}

.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-input { -moz-appearance: textfield; appearance: textfield; }
.stepper-input:focus { outline: none; }

/* ── MODAL SHEET (mobile-first bottom sheet) ── */
.modal-sheet-v2 {
  background: var(--card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 92dvh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  overscroll-behavior: contain;
}

.modal-sheet-v2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 1;
}

.modal-sheet-v2-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}

.modal-sheet-v2-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--text-muted);
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.modal-sheet-v2-close:active { background: var(--bg-hover); }

.modal-sheet-v2-body {
  padding: 16px;
}

.modal-sheet-v2-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--space-3);
  position: sticky;
  bottom: 0;
  background: var(--card);
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
}

/* Modal overlay */
.modal-overlay-v2 {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  animation: modal-fade-in 0.2s ease;
}

.modal-overlay-v2.hidden { display: none; }
.modal-overlay-v2.center {
  justify-content: center;
  align-items: center;
}

/* ── DEVICE GRID (2-col) ── */
.device-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  width: 100%;
}

/* ── OPTION CARD ── */
.option-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 12px 14px;
  overflow: hidden;
  box-sizing: border-box;
}

.option-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  width: 100%;
  max-width: 100%;
  cursor: pointer;
  margin: 0;
}

.option-checkbox {
  width: 22px;
  height: 22px;
  margin: 1px 0 0 0;
  cursor: pointer;
  accent-color: var(--info);
  flex-shrink: 0;
}

.option-title {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--text-main);
}

.option-desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ── TOAST NOTIFICATION ── */
.toast {
  position: fixed;
  bottom: calc(var(--bottomnav-height) + 16px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  max-width: min(420px, calc(100vw - 32px));
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast.success { border-color: var(--green); background: var(--green-dim); color: var(--green); }
.toast.error   { border-color: var(--red);   background: var(--red-dim);   color: var(--red); }
.toast.info    { border-color: var(--info); background: rgba(59,130,246,0.12); color: var(--info); }
.toast.warning { border-color: var(--primary); background: var(--primary-dim); color: var(--primary-hover); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(16px); }
}

.toast.show { animation: toast-in 0.25s ease forwards; }
.toast.hide { animation: toast-out 0.2s ease forwards; }

/* ── FAB (Floating Action Button) ── */
.fab {
  position: fixed;
  bottom: calc(var(--bottomnav-height) + 16px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: var(--primary);
  color: var(--text-on-dark);
  border: none;
  box-shadow: var(--shadow-lg);
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  z-index: 40;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.fab:hover { transform: scale(1.05); }
.fab:active { transform: scale(0.95); }

/* ── QUICK ACTION BAR (Dashboard) ── */
.quick-bar {
  position: fixed;
  bottom: calc(var(--bottomnav-height) + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 8px 16px;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
  z-index: 40;
  max-width: 500px;
  margin: 0 auto;
}

.quick-bar-inner {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.quick-bar-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 48px;
  padding: 8px 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.quick-bar-btn:active { transform: scale(0.96); background: var(--bg-hover); }

.quick-bar-btn .qb-icon { font-size: 20px; line-height: 1; }
.quick-bar-btn .qb-label { line-height: 1; }

.quick-bar-btn.primary {
  background: var(--primary);
  color: var(--text-on-dark);
  border-color: var(--primary);
}

/* ═══════════════════════════════════════════════════════
   INVOICE — AUTO SCALE, NO SCROLL, FIT ALL SCREENS
   ═══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   INVOICE MODAL — POS PROFESSIONAL UI
   Grid 3-block layout, NO scale, NO distortion
   ══════════════════════════════════════════════════════ */

/* 1. OVERLAY */
/* ── INVOICE MODAL — Binance Dark Pro ─────────────────────────────── */
/* ══════════════════════════════════════════
   INVOICE MODAL — CARD STYLE
══════════════════════════════════════════ */

/* 1. ROOT OVERLAY */
#invoiceModal {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ID beats .hidden — keep invoice hidden until opened */
#invoiceModal.hidden {
  display: none !important;
}

/* ── INVOICE MODAL — FLAT POS, NO SCROLL ── */

/* Overlay */
.inv-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

#invoiceModal.hidden { display: none !important; }

/* Modal root — auto-size to fit content within viewport */
.inv-pos {
  position: relative;
  z-index: 100;
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border-radius: 16px;
  margin: auto;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;

  /* Auto-fit height: use intrinsic height but cap at viewport */
  height: auto;
  max-height: 90vh;
  /* If content exceeds, allow page scroll (no internal scroll) */
}

/* ── MOBILE: Full screen invoice ── */
@media (max-width: 480px) {
  .inv-pos {
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    max-width: 100%;
  }
  
  .inv-overlay {
    align-items: flex-end;
  }
  
  .inv-pos-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  
  .inv-pos-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .inv-pos.ultra-compact .invoice-total-value { font-size: 22px; }
  .inv-pos.ultra-compact .qr { width: 100px; }
}

/* Header — fixed */
.inv-pos-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 8px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.inv-pos-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  flex: 1;
}

.inv-pos-order {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.inv-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--border);
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

.inv-close:hover { background: var(--red); color: #fff; }

/* Body: allow content to grow naturally, push actions to bottom */
.inv-pos-body {
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  min-height: 0; /* Critical for flex child scroll */
}

.inv-pos-inner {
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

/* Actions — fixed bottom */
.inv-pos-actions {
  display: flex;
  gap: clamp(6px, 2vw, 10px);
  padding: clamp(6px, 2vw, 10px) clamp(12px, 4vw, 16px) clamp(6px, 2vw, 10px);
  flex-shrink: 0;
  border-top: 1px solid var(--border);
}

.inv-btn {
  flex: 1;
  height: clamp(38px, 10vw, 44px);
  border-radius: 10px;
  border: none;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.inv-btn-ghost    { background: var(--border);      color: var(--text-muted); }

/* Total — top of modal, BIG & PROMINENT */
.invoice-total {
  text-align: center;
  padding: clamp(8px, 2.5vw, 14px) clamp(12px, 4vw, 16px) clamp(4px, 1.5vw, 8px);
  flex-shrink: 0;
}

.invoice-total-label {
  font-size: clamp(9px, 2.5vw, 11px);
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  margin-bottom: 2px;
}

.invoice-total-value {
  font-size: clamp(32px, 9vw, 52px);
  font-weight: 700;
  color: var(--success);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* Info */
.invoice-info {
  padding: 0 clamp(12px, 4vw, 16px) clamp(4px, 1.5vw, 8px);
  flex-shrink: 0;
  display: block !important;
}

.invoice-info-date {
  font-size: clamp(11px, 3vw, 13px);
  color: var(--text-muted);
}

.invoice-info-customer {
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 600;
  color: var(--primary);
}

/* Divider */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
  flex-shrink: 0;
}

/* Spacer — minimal gap between product list and bottle/QR */
.inv-spacer {
  flex: 0 0 auto;
  min-height: clamp(4px, 2vw, 10px);
}

/* Product list — auto-expand to show all items, no internal scroll */
.invoice-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(2px, 0.8vw, 5px);
  overflow: visible;
  flex: 0 0 auto;
  min-height: 0;
  padding: 0 clamp(12px, 4vw, 16px);
}

/* Normal item */
.invoice-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(4px, 1.5vw, 7px) 0;
  font-size: clamp(13px, 3.5vw, 15px);
  color: var(--text-primary);
  flex-shrink: 0;
}

.invoice-item small {
  display: block;
  font-size: clamp(10px, 2.8vw, 12px);
  color: var(--text-secondary);
}

.invoice-item-left { flex: 1; min-width: 0; }

.invoice-item-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(13px, 3.5vw, 15px);
}

.invoice-item-total {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  margin-left: 10px;
  font-size: clamp(13px, 3.5vw, 15px);
}

/* ── COMPACT MODE (>3 items) ── */
.inv-pos.compact .invoice-item { padding: clamp(3px, 1vw, 5px) 0; font-size: clamp(12px, 3.2vw, 14px); }
.inv-pos.compact .invoice-item-name { font-size: clamp(12px, 3.2vw, 14px); }
.inv-pos.compact .invoice-item-total { font-size: clamp(12px, 3.2vw, 14px); }
.inv-pos.compact .invoice-item small { font-size: clamp(9px, 2.5vw, 10px); }
.inv-pos.compact .invoice-total-value { font-size: clamp(28px, 7vw, 40px); }
.inv-pos.compact .invoice-total { padding: clamp(6px, 2vw, 10px) clamp(12px, 4vw, 16px) clamp(4px, 1.2vw, 6px); }
.inv-pos.compact .qr { width: clamp(140px, 38vw, 180px); }

/* ── ULTRA-COMPACT MODE (>6 items) — shrink but keep ALL info visible */
.inv-pos.ultra-compact .invoice-item {
  padding: clamp(2px, 0.8vw, 4px) 0;
  font-size: clamp(11px, 3vw, 13px);
}
.inv-pos.ultra-compact .invoice-item-name {
  font-size: clamp(11px, 3vw, 13px);
}
.inv-pos.ultra-compact .invoice-item-total {
  font-size: clamp(11px, 3vw, 13px);
}
/* Keep small visible — only shrink its size */
.inv-pos.ultra-compact .invoice-item small {
  font-size: clamp(9px, 2.5vw, 10px);
  display: block;
}
.inv-pos.ultra-compact .invoice-total-value {
  font-size: clamp(24px, 6vw, 32px);
}
.inv-pos.ultra-compact .invoice-total {
  padding: clamp(4px, 1.5vw, 7px) clamp(12px, 4vw, 16px) clamp(2px, 0.8vw, 4px);
}
.inv-pos.ultra-compact .qr {
  width: clamp(110px, 30vw, 140px);
}
.inv-pos.ultra-compact .qr-note {
  font-size: clamp(11px, 3vw, 12px);
}
.inv-pos.ultra-compact .invoice-info {
  padding-bottom: clamp(3px, 1vw, 5px);
}

/* Bottle section */
.bottle {
  padding: clamp(4px, 1.5vw, 8px) clamp(12px, 4vw, 16px);
  flex-shrink: 0;
}

.bottle-row {
  display: flex;
  justify-content: space-between;
  padding: clamp(2px, 0.8vw, 4px) 0;
  font-size: clamp(13px, 3.5vw, 15px);
}

.green  { color: var(--success); font-weight: 700; }
.red    { color: var(--danger);  font-weight: 700; }
.yellow { color: var(--accent);  font-weight: 700; }

/* QR section */
.qr-section {
  text-align: center;
  padding: clamp(4px, 1.5vw, 8px) clamp(12px, 4vw, 16px) clamp(6px, 2vw, 10px);
  flex-shrink: 0;
}

.qr {
  width: min(200px, 52vw);
  margin: clamp(4px, 1.5vw, 8px) auto;
  border-radius: 12px;
  background: #fff;
  object-fit: contain;
  display: block;
}

.qr-note {
  color: var(--text-secondary);
  font-size: clamp(12px, 3.2vw, 14px);
}

/* Actions — fixed bottom */
.inv-pos-actions {
  display: flex;
  gap: 8px;
  padding: 8px 14px 10px;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
}

.inv-btn {
  flex: 1;
  height: 40px;
  border-radius: 10px;
  border: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.inv-btn-ghost    { background: var(--border);      color: var(--text-muted); }
.inv-btn-ghost:hover { background: var(--border-strong); color: var(--text-primary); }
.inv-btn-primary  { background: var(--primary);     color: var(--btn-primary-color); }
.inv-btn-primary:hover { background: var(--primary-hover); }
.inv-btn-danger   { background: var(--red);         color: #fff; }
.inv-btn-danger:hover { background: var(--red-hover); }
.inv-btn-kegs     { background: var(--primary-dim); color: var(--primary); border: 1px solid rgba(252,213,53,0.3); }

   dark/light overrides for old classes */




/* ── LOGIN PAGE ── */
.login-container {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--bg);
}

[data-theme="light"] .login-container {
  background: var(--bg);
}

.login-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px 24px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-xl);
}

:root.dark .login-card,
:root[data-theme="dark"] .login-card {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
}

.login-logo {
  width: 64px;
  height: 64px;
  background: var(--primary);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin: 0 auto 20px;
}

.login-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-main);
  text-align: center;
  margin-bottom: var(--space-2);
}

.login-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 24px;
}

.login-error {
  background: var(--red-dim);
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  display: none;
}

.login-error.show { display: block; }

/* ── DARK MODE GLOBALS ── */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--card);
  color: var(--text-main);
  border-color: var(--border);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] select::placeholder { color: var(--text-muted); }

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(252,213,53,0.15);
}

[data-theme="dark"] .white-card,
[data-theme="dark"] .white-block {
  background: var(--card);
  color: var(--text-main);
}

[data-theme="dark"] .spinner {
  border-color: var(--border);
  border-top-color: var(--primary);
}

[data-theme="dark"] .topbar {
  background: rgba(11, 14, 17, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ── RESPONSIVE ADJUSTMENTS ── */
@media (max-width: 360px) {
  .kpi-grid { gap: var(--space-2); padding: 8px 12px 10px; }
  .kpi-card { padding: 10px; }
  .kpi-card-value { font-size: 16px; }
  .app-filter-bar { padding: 10px 12px 12px; }
  .app-filter-btn { padding: 6px 11px; font-size: 11px; min-height: 34px; }
  .top-list { padding: 6px 12px 8px; }
}

/* ── SKELETON LOADING ── */
.page-skeleton {
  padding: 16px;
}

.skeleton-header-fixed {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(56px + env(safe-area-inset-top, 0px));
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  padding-top: env(safe-area-inset-top, 0px);
  z-index: 50;
}

.skeleton-nav-fixed {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-top: 3px solid var(--primary);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  z-index: 50;
  max-width: 500px;
  margin: 0 auto;
}

[data-theme="dark"] .skeleton-header-fixed {
  background: rgba(30,35,41,0.97);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}

[data-theme="dark"] .skeleton-nav-fixed {
  background: rgba(30,35,41,0.97);
  backdrop-filter: blur(12px);
  border-top-color: var(--primary);
}

/* ── MISC UTILITIES ── */
.w-full   { width: 100%; }
.max-w-sm { max-width: 400px; }
.max-w-md { max-width: 500px; }
.min-w-0  { min-width: 0; }
.flex-1   { flex: 1; }
.shrink-0 { flex-shrink: 0; }
.overflow-hidden { overflow: hidden; }
.overflow-auto    { overflow: auto; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap   { white-space: nowrap; }
.hidden   { display: none; }
.visible  { display: block; }
.flex     { display: flex; }
.grid     { display: grid; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.flex-col-reverse { flex-direction: column-reverse; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }
.z-40     { z-index: 40; }
.z-50     { z-index: 50; }
.z-100    { z-index: 100; }
.z-200    { z-index: 200; }
.z-10000  { z-index: 10000; }
.border-b { border-bottom: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.border-l { border-left: 1px solid var(--border); }
.border-r { border-right: 1px solid var(--border); }
.border   { border: 1px solid var(--border); }
.rounded   { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.pointer-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.select-none { user-select: none; }
.whitespace-nowrap { white-space: nowrap; }
.max-h-64 { max-height: 256px; }
.max-h-96 { max-height: 384px; }
.max-h-\[90vh\] { max-height: 90vh; }
.max-h-\[92dvh\] { max-height: 92dvh; }
.min-h-0 { min-height: 0; }
.h-auto { height: auto; }
.aspect-square { aspect-ratio: 1; }
.overscroll-contain { overscroll-behavior: contain; }

/* Animation utilities */
.animate-fade {
  animation: fade-in 0.3s ease-in;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-scale {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Page transition */
.page-enter {
  animation: page-enter 0.2s ease-out;
}

@keyframes page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Sale page section wrapper ── */
.sale-section {
  margin-bottom: 16px;
}

.sale-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding: 0 4px;
}

.sale-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 4px;
}

.sale-section-header .sale-section-label {
  margin-bottom: 0;
  padding: 0;
}

.sale-history-filter select {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-primary);
  font-size: 16px;
  outline: none;
  cursor: pointer;
}

.sale-history-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 0 4px;
}

.sale-history-pagination .pag-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-primary);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.sale-history-pagination .pag-btn:hover:not([disabled]) {
  background: var(--bg-hover);
}

.sale-history-pagination .pag-btn[disabled] {
  opacity: 0.35;
  cursor: default;
}

.sale-history-pagination .pag-info {
  font-size: 13px;
  color: var(--text-muted);
  min-width: 50px;
  text-align: center;
}

/* Sale search input */
.sale-search-input {
  width: 100%;
  height: 44px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 16px;
  color: var(--text-primary);
  outline: none;
  box-sizing: border-box;
}

/* Sale edit auxiliary sheet */
.sale-edit-aux {
  background: var(--bg-card-soft);
  border-radius: 10px;
  padding: 12px;
  margin: 0 4px;
  border: 1px solid rgba(252, 213, 53, 0.3);
}

.sale-edit-aux__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sale-edit-aux__text {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-yellow);
}

/* Sale checkout actions */
.sale-checkout-actions {
  display: flex;
  gap: 8px;
}

/* ── Customer search ── */
.sale-customer-dropdown {
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.sale-customer-badge {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--primary-dim);
  border: 1px solid rgba(252,213,53,0.3);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}

/* ── Product Card ── */
#productList {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sale-product-card {
  background: var(--card);
  border-radius: 12px;
  padding: 14px;
  border: 1px solid var(--border);
}

.sale-product-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}

.sale-product-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  flex: 1;
  padding-right: 12px;
}

.sale-product-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 8px;
  text-align: right;
  min-width: 80px;
  max-width: 130px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  box-sizing: border-box;
  font-family: inherit;
}

/* 价格输入框聚焦状态 - 默认价格 */
.sale-product-price:focus {
  border-color: rgba(252, 213, 53, 0.5);
  background: rgba(252, 213, 53, 0.05);
}

/* 价格已修改状态 */
.sale-product-price.sale-price-edited {
  color: var(--green);
  border-color: rgba(14, 203, 129, 0.5);
  background: rgba(14, 203, 129, 0.08);
}

/* 价格输入框聚焦状态 - 已修改价格 */
.sale-product-price.sale-price-edited:focus {
  border-color: var(--green);
  background: rgba(14, 203, 129, 0.12);
  box-shadow: 0 0 0 2px rgba(14, 203, 129, 0.15);
}

/* 隐藏number input的spinner箭头 */
.sale-product-price::-webkit-outer-spin-button,
.sale-product-price::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sale-product-price[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.sale-product-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.sale-product-meta.low-stock { color: var(--red); }

/* Quantity input */
.sale-qty-input {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--primary);
  background: transparent;
  text-align: center;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  outline: none;
  box-sizing: border-box;
  padding: 0 12px;
  transition: border-color 0.12s;
}
.sale-qty-input:focus { border-color: var(--primary-hover); box-shadow: 0 0 0 2px rgba(252,213,53,0.15); }
.sale-qty-input::placeholder { color: var(--text-muted); font-weight: 400; font-size: 13px; }

/* ── Footer: total + checkout button ── */
.sale-footer {
  position: sticky;
  bottom: calc(var(--bottomnav-height) + 12px);
  left: 0;
  right: 0;
  background: var(--card);
  border-radius: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 10;
  margin: 0 4px;
}

.sale-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.sale-total-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.sale-total-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.sale-btn-checkout {
  width: 100%;
  height: 48px;
  border-radius: 10px;
  border: none;
  background: var(--primary);
  color: var(--btn-primary-color);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.sale-btn-checkout:hover { background: var(--primary-hover); }
.sale-btn-checkout:active { transform: scale(0.98); }
.sale-btn-checkout:disabled { background: var(--card-soft); color: var(--text-muted); cursor: not-allowed; }

/* ── Customer dropdown items ── */
.customer-dd-item {
  padding: 12px 14px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
  min-height: 44px;
}
.customer-dd-item:last-child { border-bottom: none; }
.customer-dd-item:hover { background: var(--bg-hover); }
.customer-dd-item.active { background: var(--primary-dim); color: var(--primary); font-weight: 600; }
.customer-dd-item span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Checkout Modal ── */
.pos-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: modal-fade-in 0.2s ease;
}
.pos-modal-overlay.hidden { display: none; }

.pos-modal-sheet {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.pos-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.pos-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.pos-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  border-radius: 6px;
  transition: color 0.12s;
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pos-modal-close:hover { color: var(--text-primary); }

.pos-modal-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

/* Modal items list */
.pos-modal-customer {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.pos-modal-header-info {
  margin-bottom: 12px;
}

.pos-modal-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.pos-modal-kegs {
  font-size: 12px;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 12px;
  padding: 8px;
  background: var(--primary-dim);
  border-radius: 8px;
  border: 1px solid rgba(252, 213, 53, 0.2);
}

.pos-modal-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.pos-modal-item:last-of-type { border-bottom: none; }

.pos-modal-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 8px;
}

.pos-modal-item-qty {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  margin-right: 12px;
}

.pos-modal-item-total {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 80px;
  text-align: right;
}

/* Modal summary */
.pos-modal-summary {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pos-modal-summary-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pos-modal-summary-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.pos-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.pos-modal-btn-cancel {
  flex: 1;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.pos-modal-btn-cancel:hover { background: var(--bg-hover); color: var(--text-primary); }

.pos-modal-btn-confirm {
  flex: 2;
  height: 48px;
  border-radius: 10px;
  border: none;
  background: var(--primary);
  color: var(--btn-primary-color);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.pos-modal-btn-confirm:hover { background: var(--primary-hover); }
.pos-modal-btn-confirm:active { transform: scale(0.98); }
.pos-modal-btn-confirm:disabled { background: var(--card-soft); color: var(--text-muted); cursor: not-allowed; }

/* Empty modal state */
.pos-modal-empty {
  text-align: center;
  padding: 24px 0;
  color: var(--text-muted);
  font-size: 14px;
}

/* ── Sale History ── */
#saleHistoryList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sale-history-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  transition: border-color 0.12s, box-shadow 0.12s;
  cursor: pointer;
}
.sale-history-item:hover { border-color: var(--border-strong); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.sale-history-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.sale-history-customer {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.sale-history-total {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.sale-history-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.sale-history-items {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sale-history-kegs {
  font-size: 12px;
  color: var(--primary);
  margin-top: 4px;
  font-weight: 600;
}

.sale-history-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.sale-history-actions button {
  flex: 1;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.sale-history-actions button:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); }
.sale-history-actions button:active { transform: scale(0.97); }
.sale-history-actions button.action-view:hover { border-color: var(--info); color: var(--info); }
.sale-history-actions button.action-return:hover { border-color: var(--warning); color: var(--warning); }
.sale-history-actions button.action-edit:hover { border-color: var(--green); color: var(--green); }
.sale-history-actions button.action-delete:hover { border-color: var(--red); color: var(--red); }

.sale-history-empty {
  text-align: center;
  padding: 16px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ── Checkout Box ── */
.sale-checkout-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
  position: sticky;
  bottom: calc(var(--bottomnav-height) + 8px);
  z-index: 10;
}

.sale-checkout-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.sale-checkout-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

.sale-checkout-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

body.modal-open {
  overflow: hidden;
}

/* Sale app: flex column */
#saleAppContent {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Override body--app padding for sale page */
body.body--app #app {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex;
  flex-direction: column;
}

/* ================================================================
   APP SHELL — Standard layout wrapper for all pages
   ================================================================ */

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.app-main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  /* ONE source of truth: bottom padding = bottomnav height + safe-area */
  padding-bottom: calc(var(--bottomnav-height) + var(--safe-area-bottom));
}

/* .app-body: fills space between fixed header and fixed bottom nav */
body.body--app .app-body {
  position: absolute;
  top: calc(var(--header-height) + var(--safe-area-top));
  left: 0;
  right: 0;
  bottom: calc(var(--bottomnav-height) + var(--safe-area-bottom));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 500px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

/* ================================================================
   PAGE — Standard page wrapper
   ================================================================ */

.page {
  padding: var(--space-4, 16px);
  min-height: 100%;
}

.page__header {
  margin-bottom: var(--space-4, 16px);
}

.page__title {
  font-size: var(--text-xl, 18px);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-2, 8px) 0;
}

.page__subtitle {
  font-size: var(--text-sm, 13px);
  color: var(--text-muted);
  margin: 0;
}


/* ================================================================
   SECTION — Standard content section
   ================================================================ */

.section {
  margin-bottom: var(--space-4, 16px);
}

.section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3, 12px);
}

.section__title {
  font-size: var(--text-xs, 12px);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

.section__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}


/* Section variants */
.section--compact {
  margin-bottom: var(--space-3, 12px);
}

.section--bordered {
  padding: var(--space-4, 16px);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 12px);
}

/* ================================================================
   EMPTY STATE — No content placeholder
   ================================================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6, 32px) var(--space-4, 16px);
  text-align: center;
}

.empty-state__icon {
  font-size: 48px;
  margin-bottom: var(--space-3, 12px);
  opacity: 0.5;
}

.empty-state__title {
  font-size: var(--text-lg, 16px);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2, 8px);
}

.empty-state__description {
  font-size: var(--text-sm, 13px);
  color: var(--text-muted);
  margin-bottom: var(--space-4, 16px);
}


/* ================================================================
   LIST — Standard list container
   ================================================================ */

.list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

.list__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-5, 24px);
  text-align: center;
}

.list__empty-icon {
  font-size: 32px;
  margin-bottom: var(--space-2, 8px);
  opacity: 0.4;
}

.list__empty-text {
  font-size: var(--text-sm, 13px);
  color: var(--text-muted);
}

/* ================================================================
   STATS ROW — Statistics display
   ================================================================ */

.stats-row {
  display: flex;
  gap: var(--space-3, 12px);
  overflow-x: auto;
  padding-bottom: var(--space-2, 8px);
}

.stat-item {
  flex: 1;
  min-width: 100px;
  padding: var(--space-3, 12px);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 8px);
  text-align: center;
}

.stat-item__value {
  font-size: var(--text-xl, 18px);
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.stat-item__label {
  font-size: var(--text-xs, 12px);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ================================================================
   PRODUCT CARD — BEM component
   ================================================================ */

.product-card {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 8px);
  transition: border-color 0.2s ease;
}

.product-card:hover {
  border-color: var(--border-strong);
}

.product-card__info {
  flex: 1;
  min-width: 0;
}

.product-card__name {
  font-size: var(--text-base, 14px);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card__meta {
  display: flex;
  gap: var(--space-3, 12px);
  font-size: var(--text-xs, 12px);
}

.product-card__stock {
  color: var(--text-muted);
}

.product-card__price {
  color: var(--accent-yellow);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ================================================================
   CUSTOMER CARD — BEM component
   ================================================================ */

.customer-card {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 8px);
  transition: border-color 0.2s ease;
  cursor: pointer;
}

.customer-card:hover {
  border-color: var(--border-strong);
}

.customer-card__avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card-soft);
  border-radius: 50%;
  font-size: 20px;
  flex-shrink: 0;
}

.customer-card__info {
  flex: 1;
  min-width: 0;
}

.customer-card__name {
  font-size: var(--text-base, 14px);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: var(--text-xs, 12px);
}

.customer-card__phone {
  color: var(--text-muted);
}

.customer-card__badge {
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
  font-size: 10px;
  font-weight: 700;
}

.customer-card__badge--vip {
  background: var(--accent-yellow);
  color: var(--text-on-dark);
}

.customer-card__badge--debt {
  background: rgba(246, 70, 93, 0.15);
  color: var(--accent-red);
}

.customer-card__stats {
  display: flex;
  gap: var(--space-3, 12px);
  flex-shrink: 0;
}

.customer-card__stat {
  text-align: center;
}

.customer-card__stat-value {
  display: block;
  font-size: var(--text-sm, 13px);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.customer-card__stat-label {
  font-size: 10px;
  color: var(--text-muted);
}

/* ================================================================
   TOTAL BAR — BEM component
   ================================================================ */

.total-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 12px);
}

.total-bar--sticky {
  position: sticky;
  bottom: calc(var(--bottomnav-height, 64px) + 8px);
  z-index: var(--z-sticky, 500);
}

.total-bar__info {
  display: flex;
  flex-direction: column;
}

.total-bar__label {
  font-size: var(--text-xs, 12px);
  color: var(--text-muted);
}

.total-bar__value {
  font-size: var(--text-xl, 18px);
  font-weight: 800;
  color: var(--accent-yellow);
  font-variant-numeric: tabular-nums;
}


/* Mini total bar */
.total-mini {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.total-mini__label {
  font-size: var(--text-sm, 13px);
  color: var(--text-muted);
}

.total-mini__value {
  font-size: var(--text-sm, 13px);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Log card — reset card hover so inside rows don't trigger background flash */
.log-card {
  overflow: hidden;
}
.log-card:hover {
  background: var(--card) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Log row items */
.log-row {
  border-bottom: 1px solid var(--border);
}
.log-row:last-child {
  border-bottom: none;
}
.log-row:hover {
  background: rgba(34, 197, 94, 0.05);
}