/* ============================================================
   POSBeng — Master Stylesheet v2.0
   Responsive · Clean · Premium Dark UI
   ============================================================ */

/* ── Google Font Import (via HTML <link>) is already loaded ── */

/* ── CSS Custom Properties / Design Tokens ──────────────────── */
:root {
  --brand-orange: #f97316;
  --brand-amber:  #f59e0b;
  --brand-cyan:   #22d3ee;
  --brand-emerald:#10b981;

  --surface-0: #020617;   /* slate-950 — darkest bg */
  --surface-1: #0f172a;   /* slate-900 — card bg    */
  --surface-2: #1e293b;   /* slate-800 — border/div */
  --surface-3: #334155;   /* slate-700 — input/btn  */

  --text-primary:   #f1f5f9;   /* slate-100 */
  --text-secondary: #94a3b8;   /* slate-400 */
  --text-muted:     #475569;   /* slate-600 */

  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 24px;

  --shadow-card: 0 4px 24px -4px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 24px rgba(249,115,22,0.15);

  --transition: 150ms cubic-bezier(0.4,0,0.2,1);

  /* Fluid font sizes using clamp() — scale with viewport */
  --fs-2xs: clamp(9px,  1.8vw, 10px);
  --fs-xs:  clamp(10px, 2vw,   12px);
  --fs-sm:  clamp(12px, 2.4vw, 13px);
  --fs-base:clamp(13px, 2.6vw, 14px);
  --fs-md:  clamp(14px, 2.8vw, 16px);
  --fs-lg:  clamp(16px, 3.2vw, 20px);
  --fs-xl:  clamp(18px, 4vw,   24px);
  --fs-2xl: clamp(22px, 5vw,   30px);

  /* Fluid spacing */
  --sp-1: clamp(2px,  0.4vw, 4px);
  --sp-2: clamp(4px,  0.8vw, 8px);
  --sp-3: clamp(6px,  1.2vw, 12px);
  --sp-4: clamp(10px, 2vw,   16px);
  --sp-5: clamp(14px, 2.8vw, 20px);
  --sp-6: clamp(18px, 3.5vw, 24px);

  /* Icon fluid size */
  --icon-xs: clamp(12px, 2.2vw, 14px);
  --icon-sm: clamp(14px, 2.8vw, 16px);
  --icon-md: clamp(16px, 3.2vw, 20px);
  --icon-lg: clamp(20px, 4vw,   24px);
}

/* ── Base Reset ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: var(--fs-base);
  background-color: var(--surface-0);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Custom Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface-2);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(249,115,22,0.5); }

/* ── Typography Utilities ────────────────────────────────────── */
.fs-2xs  { font-size: var(--fs-2xs); }
.fs-xs   { font-size: var(--fs-xs);  }
.fs-sm   { font-size: var(--fs-sm);  }
.fs-base { font-size: var(--fs-base);}
.fs-md   { font-size: var(--fs-md);  }
.fs-lg   { font-size: var(--fs-lg);  }
.fs-xl   { font-size: var(--fs-xl);  }
.fs-2xl  { font-size: var(--fs-2xl); }

/* ── Component: Glassmorphism Card ──────────────────────────── */
.glass-card {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: var(--shadow-card);
}

/* ── Component: Cards ────────────────────────────────────────── */
.card {
  background: var(--surface-1);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.card:hover {
  border-color: rgba(249,115,22,0.2);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

/* ── Component: Buttons ──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: var(--radius-md);
  padding: 0.45em 0.9em;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  user-select: none;
  line-height: 1;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-amber));
  color: #0f172a;
  box-shadow: 0 4px 16px rgba(249,115,22,0.25);
}
.btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 24px rgba(249,115,22,0.4);
}

.btn-secondary {
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--surface-3);
}
.btn-secondary:hover { background: var(--surface-3); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--surface-2);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text-primary); }

.btn-danger {
  background: rgba(239,68,68,0.12);
  color: #f87171;
  border: 1px solid rgba(239,68,68,0.25);
}
.btn-danger:hover { background: rgba(239,68,68,0.22); }

.btn-sm { font-size: var(--fs-2xs); padding: 0.35em 0.7em; border-radius: var(--radius-sm); }
.btn-lg { font-size: var(--fs-sm);  padding: 0.65em 1.3em; border-radius: var(--radius-lg); }
.btn-icon { padding: 0.4em; border-radius: var(--radius-md); aspect-ratio: 1; }

/* ── Component: Inputs ───────────────────────────────────────── */
.input {
  width: 100%;
  background: var(--surface-0);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius-md);
  padding: 0.5em 0.85em;
  font-size: var(--fs-xs);
  color: var(--text-primary);
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.input::placeholder { color: var(--text-muted); }
.input:focus {
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}
.input:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 2px; }

/* ── Component: Badges / Chips ───────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.badge-orange  { background: rgba(249,115,22,0.15); color: #fb923c; border: 1px solid rgba(249,115,22,0.25); }
.badge-green   { background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.25); }
.badge-red     { background: rgba(239,68,68,0.15);  color: #f87171; border: 1px solid rgba(239,68,68,0.25); }
.badge-cyan    { background: rgba(34,211,238,0.15); color: #22d3ee; border: 1px solid rgba(34,211,238,0.25); }
.badge-amber   { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.25); }
.badge-slate   { background: var(--surface-2); color: var(--text-secondary); }

/* ── Component: Table ────────────────────────────────────────── */
.data-table {
  width: 100%;
  text-align: left;
  font-size: var(--fs-xs);
  border-collapse: collapse;
}
.data-table thead {
  background: var(--surface-0);
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.data-table thead th {
  padding: clamp(8px, 1.5vw, 14px) clamp(10px, 2vw, 16px);
  white-space: nowrap;
  border-bottom: 1px solid var(--surface-2);
}
.data-table tbody tr {
  border-bottom: 1px solid rgba(30,41,59,0.6);
  transition: background var(--transition);
}
.data-table tbody tr:hover { background: rgba(30,41,59,0.5); }
.data-table tbody td {
  padding: clamp(8px, 1.5vw, 14px) clamp(10px, 2vw, 16px);
  vertical-align: middle;
}
.data-table tfoot td {
  padding: clamp(8px, 1.5vw, 12px) clamp(10px, 2vw, 16px);
  font-weight: 800;
  border-top: 2px solid var(--surface-3);
  background: var(--surface-0);
}

/* ── Component: Section Header ───────────────────────────────── */
.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--surface-1);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
}

@media (min-width: 640px) {
  .section-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.section-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--text-primary);
}

.section-subtitle {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: var(--sp-1);
}

/* ── Component: Stat Card ────────────────────────────────────── */
.stat-card {
  background: var(--surface-1);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius-xl);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: var(--shadow-card);
  transition: all var(--transition);
}
.stat-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card), 0 0 20px rgba(249,115,22,0.08);
}
.stat-card .stat-label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.stat-card .stat-value {
  font-size: var(--fs-xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-card .stat-sub {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

/* ── Component: Navigation Bar ───────────────────────────────── */
#main-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(9, 14, 28, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(30,41,59,0.8);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

/* Nav button base + active state */
.nav-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4em 0.85em;
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-secondary);
  border: 1px solid transparent;
  transition: all var(--transition);
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
}
.nav-btn:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
.nav-btn.active {
  background: rgba(249,115,22,0.12);
  color: #fb923c;
  border-color: rgba(249,115,22,0.3);
  box-shadow: 0 0 12px rgba(249,115,22,0.1);
}

/* ── Component: Mobile Bottom Navigation ────────────────────── */
@media (max-width: 767px) {
  #nav-menu { display: none !important; }
  #mobile-nav { display: flex !important; }
  #main-header .max-w-7xl { padding: 0 clamp(12px, 3vw, 20px); }
}

#mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(9, 14, 28, 0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--surface-2);
  padding: clamp(6px, 1.5vw, 10px) clamp(8px, 2vw, 16px);
  padding-bottom: env(safe-area-inset-bottom, 6px);
  gap: 0;
  justify-content: space-around;
  align-items: stretch;
}

.mobile-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition);
  flex: 1;
  max-width: 70px;
  background: transparent;
  border: none;
}
.mobile-nav-btn span.nav-label {
  font-size: clamp(8px, 1.8vw, 10px);
  font-weight: 700;
  color: var(--text-muted);
  transition: color var(--transition);
}
.mobile-nav-btn svg { color: var(--text-muted); transition: color var(--transition); }
.mobile-nav-btn.active svg, .mobile-nav-btn.active span { color: var(--brand-orange); }
.mobile-nav-btn:hover svg, .mobile-nav-btn:hover span { color: var(--text-primary); }

/* Main content bottom padding for mobile nav */
@media (max-width: 767px) {
  #app-content {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  #main-footer { display: none !important; }
}

/* ── Component: Pill Tabs / Period Buttons ───────────────────── */
.tab-group {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface-0);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius-lg);
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-group::-webkit-scrollbar { display: none; }

.tab-btn {
  flex-shrink: 0;
  padding: 0.35em 0.8em;
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  background: transparent;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--text-primary); background: var(--surface-2); }
.tab-btn.active {
  background: var(--brand-orange);
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(249,115,22,0.3);
}
.tab-btn.active-cyan { background: var(--brand-cyan); color: #0f172a; }

/* ── Component: Toast Notification ──────────────────────────── */
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  font-size: var(--fs-xs);
  font-weight: 600;
  max-width: min(380px, calc(100vw - 32px));
  pointer-events: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  border: 1px solid;
  animation: toast-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95); }
}

/* ── Component: Modals ───────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(2,6,23,0.85);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 24px);
  animation: overlay-in 0.2s ease;
}

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

.modal-panel {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-2xl);
  width: 100%;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 48px);
  animation: modal-in 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5);
  border-bottom: 1px solid var(--surface-2);
  flex-shrink: 0;
}

.modal-body {
  overflow-y: auto;
  flex: 1;
  padding: var(--sp-5);
}

.modal-footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--surface-2);
  flex-shrink: 0;
}

/* ── Component: Status Bar (Online/Offline) ──────────────────── */
#connection-status-bar {
  font-size: var(--fs-2xs);
  font-weight: 700;
  padding: 4px clamp(12px, 2.5vw, 20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.3s;
}

/* ── Animations ──────────────────────────────────────────────── */
.scanner-focus-ring {
  animation: pulse-ring 2.5s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes pulse-ring {
  0%,100% { box-shadow: 0 0 0 0 rgba(249,115,22,0.3); }
  50%      { box-shadow: 0 0 0 5px rgba(249,115,22,0.08); }
}

.animate-fade-in {
  animation: fade-in 0.3s ease;
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-scale-in {
  animation: scale-in 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Utility: Scrollable container ──────────────────────────── */
.scroll-area {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-2) transparent;
}

/* ── Print Styles ────────────────────────────────────────────── */
@media print {
  /* Setup clean margin for paper printing */
  @page {
    margin: 5mm;
  }

  /* Hide non-printable UI scaffolding */
  #connection-status-bar,
  #main-header,
  #main-footer,
  #mobile-nav,
  #toast-container,
  .no-print {
    display: none !important;
  }

  /* ── 1. Thermal Receipt Print Mode (When receipt modal is open) ── */
  body.printing-receipt {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  body.printing-receipt > *:not(#receipt-modal-container) {
    display: none !important;
  }

  body.printing-receipt #receipt-modal-container {
    position: static !important;
    display: block !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
  }

  body.printing-receipt #receipt-modal-container > div,
  body.printing-receipt #receipt-modal-container > div > div {
    position: static !important;
    display: block !important;
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.printing-receipt .no-print {
    display: none !important;
  }

  body.printing-receipt #receipt-printable-area {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    width: 80mm !important;
    max-width: 80mm !important;
    background: #ffffff !important;
    color: #000000 !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    visibility: visible !important;
    box-shadow: none !important;
    border: none !important;
  }

  body.printing-receipt #receipt-printable-area *,
  body.printing-receipt #receipt-printable-area div,
  body.printing-receipt #receipt-printable-area span,
  body.printing-receipt #receipt-printable-area p,
  body.printing-receipt #receipt-printable-area h2,
  body.printing-receipt #receipt-printable-area h3 {
    color: #000000 !important;
    background: transparent !important;
    border-color: #000000 !important;
    visibility: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body.printing-receipt #receipt-printable-area .flex {
    display: flex !important;
  }

  body.printing-receipt #receipt-printable-area .justify-between {
    justify-content: space-between !important;
  }

  body.printing-receipt #receipt-printable-area .text-center {
    text-align: center !important;
  }

  /* ── 2. Report / Document Print Mode (Landscape Paper) ── */
  body:not(.printing-receipt):not(:has(#receipt-printable-area)) {
    background: #ffffff !important;
    color: #0f172a !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body:not(.printing-receipt):not(:has(#receipt-printable-area)) #app-content {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Force multi-column layouts to fit cleanly across landscape page */
  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .grid-cols-2.lg\:grid-cols-5 {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .grid-cols-1.lg\:grid-cols-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* Card boxes with elegant print styling, rounded borders and subtle background tints */
  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .bg-slate-900,
  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .bg-slate-950,
  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .bg-slate-800,
  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .bg-\[\#020617\] {
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 12px !important;
  }

  /* Card Text Colors with vibrant print-safe accents */
  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .text-white,
  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .text-slate-100,
  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .text-slate-200,
  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .text-slate-300 {
    color: #0f172a !important;
  }

  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .text-slate-400,
  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .text-slate-500 {
    color: #475569 !important;
  }

  /* Vibrant Accent Colors for Summary & Table Values */
  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .text-amber-400,
  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .text-amber-300 {
    color: #d97706 !important; /* Rich Amber/Gold */
    font-weight: 800 !important;
  }

  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .text-orange-400 {
    color: #ea580c !important; /* Rich Vibrant Orange */
    font-weight: 800 !important;
  }

  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .text-emerald-400,
  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .text-emerald-300 {
    color: #059669 !important; /* Deep Vibrant Emerald Green */
    font-weight: 800 !important;
  }

  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .text-cyan-400 {
    color: #0284c7 !important; /* Deep Cyan / Sky Blue */
    font-weight: 800 !important;
  }

  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .text-rose-400 {
    color: #e11d48 !important; /* Rose Red */
    font-weight: 800 !important;
  }

  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .border-slate-800,
  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .border-slate-700,
  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .border-slate-600 {
    border-color: #cbd5e1 !important;
  }

  /* Main Table Styling for Paper Print */
  body:not(.printing-receipt):not(:has(#receipt-printable-area)) table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 4px !important;
  }

  body:not(.printing-receipt):not(:has(#receipt-printable-area)) th {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    border: 1px solid #cbd5e1 !important;
    padding: 8px 10px !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
  }

  body:not(.printing-receipt):not(:has(#receipt-printable-area)) td {
    border: 1px solid #e2e8f0 !important;
    padding: 6px 10px !important;
    color: #1e293b !important;
    font-size: 11px !important;
  }

  body:not(.printing-receipt):not(:has(#receipt-printable-area)) tbody tr:nth-child(even) {
    background-color: #f8fafc !important;
  }

  body:not(.printing-receipt):not(:has(#receipt-printable-area)) tbody tr:nth-child(odd) {
    background-color: #ffffff !important;
  }

  body:not(.printing-receipt):not(:has(#receipt-printable-area)) tfoot {
    background-color: #f1f5f9 !important;
    border-top: 2px solid #0f172a !important;
  }

  body:not(.printing-receipt):not(:has(#receipt-printable-area)) tfoot td {
    font-weight: 800 !important;
    border-color: #cbd5e1 !important;
    font-size: 11px !important;
  }

  /* Charts height in landscape print */
  body:not(.printing-receipt):not(:has(#receipt-printable-area)) .h-56 {
    height: 180px !important;
  }

  body:not(.printing-receipt):not(:has(#receipt-printable-area)) canvas {
    max-width: 100% !important;
    max-height: 180px !important;
  }

  /* Prevent awkward page splits inside cards and table rows */
  tr, .bg-slate-900, .bg-slate-950 {
    page-break-inside: avoid;
  }
}

/* Receipt preview */
.thermal-receipt-preview {
  width: 320px;
  max-width: 100%;
  background: #fff;
  color: #111;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.35;
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}

/* ── Responsive: Main content padding ────────────────────────── */
#app-content {
  padding: clamp(12px, 2.5vw, 24px) clamp(12px, 3vw, 24px);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* ── Responsive: Header ──────────────────────────────────────── */
#main-header .brand-title {
  font-size: clamp(16px, 3vw, 22px);
}
#main-header .brand-subtitle {
  font-size: clamp(8px, 1.5vw, 10px);
}

/* ── Responsive Table: Horizontal scroll on small screens ───── */
.table-responsive {
  overflow-x: auto;
  border-radius: var(--radius-xl);
  -webkit-overflow-scrolling: touch;
}

/* ── Utility classes ─────────────────────────────────────────── */
.text-orange  { color: var(--brand-orange); }
.text-amber   { color: var(--brand-amber); }
.text-cyan    { color: var(--brand-cyan); }
.text-emerald { color: var(--brand-emerald); }
.text-muted   { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

.font-mono-nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Highlight row on hover (tables) ────────────────────────── */
.hover-row:hover { background: rgba(30,41,59,0.6) !important; cursor: pointer; }

/* ── Skeleton loading ────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface-1) 25%, var(--surface-2) 50%, var(--surface-1) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.5s infinite;
  border-radius: var(--radius-md);
}
@keyframes skeleton-wave {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Divider ─────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--surface-2);
  margin: var(--sp-3) 0;
}

/* ── Focus visible (accessibility) ──────────────────────────── */
:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Input with icon helper ─────────────────────────────────── */
.input-group {
  position: relative;
}
.input-group .input { padding-left: 2.25em; }
.input-group .input-icon {
  position: absolute;
  left: 0.7em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* ── Product card hover ──────────────────────────────────────── */
.product-card {
  background: var(--surface-1);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius-xl);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition);
  cursor: pointer;
}
.product-card:hover {
  border-color: rgba(249,115,22,0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(249,115,22,0.1);
}

/* ── Brand logo gradient ─────────────────────────────────────── */
.brand-gradient {
  background: linear-gradient(135deg, #f97316, #f59e0b, #fde68a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Glow effects ────────────────────────────────────────────── */
.glow-orange { box-shadow: 0 0 20px rgba(249,115,22,0.2); }
.glow-emerald { box-shadow: 0 0 20px rgba(16,185,129,0.2); }
.glow-cyan { box-shadow: 0 0 20px rgba(34,211,238,0.2); }

/* ── Page transition ─────────────────────────────────────────── */
#app-content > div {
  animation: page-in 0.2s ease;
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Connection status colors ───────────────────────────────── */
.status-online  { background: #065f46; }
.status-offline { background: #7f1d1d; }

/* ── Responsive grid helpers ────────────────────────────────── */
.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  gap: var(--sp-3);
}

/* ── Horizontal overflow scroll (nav, tabs) ─────────────────── */
.overflow-x-scroll-hidden {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.overflow-x-scroll-hidden::-webkit-scrollbar { display: none; }