/* ============================================================
   POS SYSTEM — PREMIUM DEEP BLUE
   Version 4.0 — Offline-safe (no @import)
   Inter font via header.php · JetBrains Mono for numbers
============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --sidebar-w:   260px;
  --topbar-h:    58px;

  /* Core brand — deep sapphire */
  --brand:         #1D4ED8;
  --brand-h:       #1E40AF;
  --brand-light:   #3B82F6;
  --brand-lighter: #60A5FA;
  --brand-pale:    #EFF6FF;
  --brand-pale2:   #DBEAFE;

  /* Accent — violet */
  --accent:        #7C3AED;
  --accent-light:  #A78BFA;

  /* Sidebar — ink navy */
  --sb-bg:    #0C1526;
  --sb-brd:   rgba(255,255,255,.07);
  --sb-text:  #8DA4C3;
  --sb-hover: rgba(255,255,255,.05);

  /* Semantic */
  --success:    #059669;
  --success-bg: #ECFDF5;
  --danger:     #DC2626;
  --danger-bg:  #FEF2F2;
  --warning:    #D97706;
  --warning-bg: #FFFBEB;
  --info:       #0284C7;
  --info-bg:    #F0F9FF;

  /* Surfaces */
  --bg:       #F0F4FA;
  --surface:  #FFFFFF;
  --surface2: #F8FAFC;
  --surface3: #EEF2F7;
  --border:   #E1E8F0;
  --border2:  #C9D6E3;

  /* Text */
  --text:  #0D1B2E;
  --text2: #3D5166;
  --text3: #8DA4BE;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(13,27,46,.06);
  --sh-sm: 0 1px 4px rgba(13,27,46,.08),0 2px 8px rgba(13,27,46,.04);
  --sh:    0 4px 12px rgba(13,27,46,.08),0 1px 3px rgba(13,27,46,.05);
  --sh-lg: 0 12px 32px rgba(13,27,46,.12),0 4px 8px rgba(13,27,46,.06);
  --sh-xl: 0 24px 48px rgba(13,27,46,.18),0 8px 16px rgba(13,27,46,.08);

  /* Radius */
  --r-xs: 3px;
  --r-sm: 6px;
  --r:    8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl:20px;

  --t:     .15s ease;
  --t-med: .22s ease;
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:14px; -webkit-text-size-adjust:100%; }
body {
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.6; display:flex; min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
input,select,textarea,button { font-family:inherit; }
button { cursor:pointer; }
::selection { background:rgba(29,78,216,.18); color:var(--brand); }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:var(--text3); }

/* ══════════════════════════════════════════════════════════════
   SIDEBAR — Ink navy with sapphire accents
══════════════════════════════════════════════════════════════ */
.sidebar {
  width:var(--sidebar-w);
  background:var(--sb-bg);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0;
  z-index:300; overflow-y:auto; overflow-x:hidden;
  transition:transform var(--t-med) cubic-bezier(.4,0,.2,1);
  border-right:1px solid var(--sb-brd);
  flex-shrink:0;
}
.sidebar::-webkit-scrollbar { width:6px; }
.sidebar::-webkit-scrollbar-track { background:rgba(255,255,255,.04); border-radius:3px; }
.sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.22); border-radius:3px; }
.sidebar::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.38); }

.sidebar-brand {
  display:flex; align-items:center; gap:11px;
  padding:18px 16px 16px;
  border-bottom:1px solid var(--sb-brd);
  flex-shrink:0;
}
.brand-icon {
  width:36px; height:36px;
  background:linear-gradient(135deg,#3B82F6,#7C3AED);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:#fff; font-weight:800;
  flex-shrink:0;
  box-shadow:0 4px 14px rgba(59,130,246,.4);
}
.brand-name {
  font-size:13px; font-weight:700; color:#fff;
  display:block; line-height:1.25; letter-spacing:-.015em;
}
.brand-sub {
  font-size:10px; color:var(--sb-text);
  display:block; margin-top:1px;
}

.sidebar-nav { flex:1; padding:10px 0 14px; }
.nav-section { margin-bottom:2px; }
.nav-label {
  font-size:9px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.25);
  padding:14px 16px 4px; display:block;
}
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 13px; margin:1px 8px;
  color:var(--sb-text); font-size:13px; font-weight:400;
  border-radius:var(--r); transition:all var(--t);
  position:relative; user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.nav-item:hover { background:var(--sb-hover); color:#C7DEFF; }
.nav-item.active {
  background:rgba(29,78,216,.3);
  color:#fff; font-weight:500;
}
.nav-item.active::before {
  content:'';
  position:absolute; left:-8px; top:7px; bottom:7px;
  width:3px; background:#60A5FA;
  border-radius:0 3px 3px 0;
}
.nav-icon { font-size:14px; width:18px; text-align:center; flex-shrink:0; }
.ai-pulse { animation:aiPulse 2.5s ease-in-out infinite; }
@keyframes aiPulse {
  0%,100%{opacity:.5}
  50%{opacity:1;filter:drop-shadow(0 0 5px #60A5FA)}
}
.nav-badge {
  margin-left:auto;
  background:#F59E0B; color:#111;
  font-size:10px; font-weight:700;
  padding:1px 7px; border-radius:20px;
  min-width:18px; text-align:center; line-height:1.7;
}
.nav-badge.alert { background:#EF4444; color:#fff; }
.nav-tag {
  margin-left:auto; font-size:9px; font-weight:700;
  color:#60A5FA; border:1px solid rgba(96,165,250,.3);
  padding:1px 6px; border-radius:var(--r-xs);
}

.sidebar-footer {
  padding:10px 12px 14px;
  border-top:1px solid var(--sb-brd);
  flex-shrink:0;
}
.user-card {
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-lg); padding:10px 12px;
}
.user-avatar {
  width:32px; height:32px;
  background:linear-gradient(135deg,#3B82F6,#7C3AED);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:700; flex-shrink:0;
}
.user-info { flex:1; min-width:0; }
.user-name {
  font-size:12px; font-weight:600; color:#fff;
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.logout-btn {
  color:var(--sb-text);
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:var(--r-sm);
  transition:all var(--t); flex-shrink:0;
}
.logout-btn:hover { background:rgba(220,38,38,.15); color:#FCA5A5; }

.sidebar-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(4px);
  z-index:299; display:none;
}
.sidebar-overlay.open { display:block; }

/* ══════════════════════════════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════════════════════════════ */
.main-content {
  margin-left:var(--sidebar-w);
  flex:1; display:flex; flex-direction:column;
  min-height:100vh; min-width:0;
}

.topbar {
  height:var(--topbar-h);
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px;
  padding:0 22px;
  position:sticky; top:0; z-index:200;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 1px 0 var(--border), 0 2px 8px rgba(13,27,46,.04);
}
.menu-toggle {
  display:none; background:none; border:none;
  color:var(--text2); padding:7px; border-radius:var(--r-sm);
  -webkit-tap-highlight-color:transparent; flex-shrink:0;
}
.menu-toggle:hover { background:var(--surface3); }
.topbar-title {
  font-size:14px; font-weight:600; color:var(--text);
  flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar-actions {
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.topbar-time {
  font-family:'JetBrains Mono',monospace;
  font-size:11px; color:var(--text3);
  background:var(--surface3);
  padding:3px 9px; border-radius:var(--r-sm);
  letter-spacing:.02em;
}
.topbar-logout-btn {
  display:flex; align-items:center; gap:5px;
  padding:6px 12px; border-radius:var(--r);
  font-size:12px; font-weight:500; color:var(--text2);
  border:1px solid var(--border); background:transparent;
  transition:all var(--t);
}
.topbar-logout-btn:hover {
  background:var(--danger-bg); color:var(--danger);
  border-color:rgba(220,38,38,.25);
}
.alert-pill {
  background:var(--danger-bg); color:var(--danger);
  border:1px solid rgba(220,38,38,.2);
  font-size:11px; font-weight:600;
  padding:4px 10px; border-radius:20px; white-space:nowrap;
}

.page-body { flex:1; padding:22px 24px 52px; }
.page-title { font-size:22px; font-weight:800; margin-bottom:2px; letter-spacing:-.025em; color:var(--text); }
.page-sub   { font-size:12px; color:var(--text3); margin-bottom:22px; line-height:1.5; }

.page-header-row {
  display:flex; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; gap:12px; margin-bottom:22px;
}

/* ══════════════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════════════ */
.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:20px;
  box-shadow:var(--sh-sm);
  transition:box-shadow var(--t-med);
}
.card:hover { box-shadow:var(--sh); }
.card-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.card-title { font-size:14px; font-weight:600; color:var(--text); }

/* ── Stat Cards ─────────────────────────────────────────────── */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
  gap:14px; margin-bottom:22px;
}
.stat-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:18px 20px 16px 18px;
  display:flex; align-items:flex-start; gap:12px;
  box-shadow:var(--sh-sm);
  transition:all var(--t-med);
  position:relative; overflow:visible;
}
.stat-card::after {
  content:''; position:absolute;
  top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.stat-card:hover { box-shadow:var(--sh); transform:translateY(-2px); }
.stat-card:hover::after { transform:scaleX(1); }

.stat-icon {
  width:44px; height:44px; border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center;
  font-size:19px; flex-shrink:0;
}
.stat-icon.blue   { background:#EFF6FF; }
.stat-icon.green  { background:#ECFDF5; }
.stat-icon.amber  { background:#FFFBEB; }
.stat-icon.red    { background:#FEF2F2; }
.stat-icon.purple { background:#F5F3FF; }
.stat-icon.teal   { background:#F0FDFA; }

.stat-body { flex:1; min-width:0; overflow:visible; }
.stat-value {
  font-size:clamp(12px,2vw,17px);
  font-weight:700; line-height:1.3;
  font-family:'JetBrains Mono',monospace;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  white-space:normal;
  overflow:visible;
  overflow-wrap:anywhere;
  display:block;
  max-width:100%;
}
.stat-label  { font-size:11px; color:var(--text3); margin-top:3px; font-weight:500; }
.stat-change { font-size:10px; margin-top:4px; font-weight:600; line-height:1.4; word-break:break-word; }
.stat-change.up   { color:var(--success); }
.stat-change.down { color:var(--danger); }

/* Expand hint */
.expand-hint {
  position:absolute; bottom:6px; right:10px;
  font-size:9px; color:var(--text3);
  opacity:0; transition:opacity var(--t);
}
.stat-card:hover .expand-hint { opacity:1; }

/* ══════════════════════════════════════════════════════════════
   TABLES — amount alignment fixed
══════════════════════════════════════════════════════════════ */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; font-size:13px; }

thead th {
  background:var(--surface2);
  font-size:10px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--text3);
  padding:11px 14px;
  text-align:left;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
tbody td {
  padding:11px 14px;
  border-bottom:1px solid #EEF4FA;
  color:var(--text2); vertical-align:middle;
}
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:#F8FBFF; }
tfoot td {
  padding:11px 14px; font-weight:700;
  background:var(--surface2);
  border-top:2px solid var(--border);
  color:var(--text);
}

/* ── Amount / Number alignment — THE MAIN FIX ── */
.mono {
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
/* Any td or th with class "num", "amt", "col-amount" → right-aligned monospace */
td.num, td.amt, td.col-amount,
td.mono.num, td.mono.profit, td.mono.loss {
  text-align:right !important;
  font-family:'JetBrains Mono',monospace !important;
  font-size:12px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
th.num, th.amt, th.col-amount { text-align:right !important; }

.text-right  { text-align:right !important; }
.text-center { text-align:center !important; }
.text-left   { text-align:left !important; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center;
  font-size:11px; font-weight:600;
  padding:3px 9px; border-radius:20px;
  white-space:nowrap; letter-spacing:.01em;
}
.badge-success { background:#ECFDF5; color:#065F46; border:1px solid #6EE7B7; }
.badge-danger  { background:#FEF2F2; color:#991B1B; border:1px solid #FCA5A5; }
.badge-warning { background:#FFFBEB; color:#92400E; border:1px solid #FCD34D; }
.badge-info    { background:#EFF6FF; color:#1E40AF; border:1px solid #93C5FD; }
.badge-neutral { background:var(--surface3); color:var(--text3); border:1px solid var(--border); }
.badge-purple  { background:#F5F3FF; color:#4C1D95; border:1px solid #C4B5FD; }

/* ══════════════════════════════════════════════════════════════
   BUTTONS — deep sapphire primary
══════════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:var(--r);
  font-size:13px; font-weight:500;
  border:1px solid transparent;
  transition:all var(--t);
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  user-select:none; text-decoration:none; line-height:1.4;
}
.btn:active:not(:disabled) { transform:scale(.97); }
.btn:disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }

.btn-primary {
  background:var(--brand); color:#fff; font-weight:600;
  border-color:var(--brand);
  box-shadow:0 1px 3px rgba(29,78,216,.3), 0 4px 10px rgba(29,78,216,.15);
}
.btn-primary:hover {
  background:var(--brand-h);
  box-shadow:0 2px 8px rgba(29,78,216,.4), 0 6px 18px rgba(29,78,216,.2);
}
.btn-success {
  background:var(--success); color:#fff; font-weight:600;
  border-color:var(--success);
  box-shadow:0 1px 3px rgba(5,150,105,.25);
}
.btn-success:hover { background:#047857; }
.btn-danger {
  background:var(--danger); color:#fff; border-color:var(--danger);
}
.btn-danger:hover { background:#B91C1C; }
.btn-outline {
  background:transparent; color:var(--text2); border-color:var(--border);
}
.btn-outline:hover {
  background:var(--surface3); border-color:var(--border2); color:var(--text);
}
.btn-ghost {
  background:transparent; color:var(--brand); border:none; padding:6px 10px;
}
.btn-ghost:hover { background:var(--brand-pale); }
.btn-sm  { padding:5px 11px; font-size:12px; border-radius:var(--r-sm); }
.btn-lg  { padding:11px 22px; font-size:14px; }
.btn-xl  { padding:13px 28px; font-size:15px; font-weight:600; }

/* ══════════════════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════════════════ */
.form-group { margin-bottom:16px; }
.form-label {
  display:block; font-size:12px; font-weight:600;
  color:var(--text2); margin-bottom:5px;
}
.form-control {
  width:100%; padding:9px 12px;
  border:1.5px solid var(--border);
  border-radius:var(--r);
  font-size:13px; color:var(--text); background:var(--surface);
  transition:border-color var(--t), box-shadow var(--t);
  outline:none; -webkit-appearance:none; line-height:1.5;
}
.form-control:focus {
  border-color:var(--brand-light);
  box-shadow:0 0 0 3px rgba(59,130,246,.14);
}
.form-control:hover:not(:focus) { border-color:var(--border2); }
.form-control::placeholder { color:var(--text3); }
select.form-control { appearance:auto; -webkit-appearance:auto; }
textarea.form-control { resize:vertical; min-height:80px; }
.form-hint { font-size:11px; color:var(--text3); margin-top:4px; line-height:1.5; }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }

.filter-bar {
  display:flex; align-items:center; gap:8px;
  margin-bottom:16px; flex-wrap:wrap;
}
.search-wrap { position:relative; flex:1; min-width:180px; }
.search-wrap input { padding-left:36px; }
.search-icon {
  position:absolute; left:12px; top:50%;
  transform:translateY(-50%);
  color:var(--text3); font-size:13px; pointer-events:none;
}

.product-img {
  width:40px; height:40px; border-radius:var(--r);
  object-fit:cover; background:var(--surface2);
  border:1px solid var(--border); cursor:pointer; transition:all var(--t);
}
.product-img:hover { transform:scale(1.08); border-color:var(--brand-light); }
.product-img-placeholder {
  width:40px; height:40px; border-radius:var(--r);
  background:var(--surface2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text3); font-size:18px;
}

/* Status colors */
.profit { color:var(--success) !important; font-weight:600; }
.loss   { color:var(--danger)  !important; font-weight:600; }

/* ══════════════════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(12,21,38,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:500;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  padding:16px;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-2xl); padding:24px;
  width:100%; max-width:540px; max-height:90vh; overflow-y:auto;
  box-shadow:var(--sh-xl);
  transform:translateY(18px) scale(.97);
  transition:transform .25s cubic-bezier(.34,1.4,.64,1);
}
.modal-overlay.open .modal { transform:translateY(0) scale(1); }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border);
}
.modal-header h2 { font-size:16px; font-weight:700; letter-spacing:-.015em; }
.modal-close {
  background:none; border:none; font-size:18px; cursor:pointer;
  color:var(--text3); width:32px; height:32px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t); flex-shrink:0;
}
.modal-close:hover { background:var(--surface3); color:var(--text); }

/* Stat modal grid */
.stat-modal-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; margin-top:4px;
}
.stat-modal-item {
  padding:14px 12px; background:var(--surface2);
  border-radius:var(--r-lg); text-align:center;
  border:1px solid var(--border);
}
.stat-modal-val {
  font-size:17px; font-weight:700;
  font-family:'JetBrains Mono',monospace;
  font-variant-numeric:tabular-nums;
  line-height:1.2;
  word-break:break-all;
}
.stat-modal-lbl { font-size:10px; color:var(--text3); margin-top:4px; font-weight:500; }

/* Alert boxes */
.alert-box {
  padding:12px 16px; border-radius:var(--r);
  margin-bottom:14px; font-size:13px;
  border-left:3px solid; line-height:1.5;
}
.alert-box.success { background:var(--success-bg); border-color:var(--success); color:#064E3B; }
.alert-box.error   { background:var(--danger-bg);  border-color:var(--danger);  color:#7F1D1D; }
.alert-box.warning { background:var(--warning-bg); border-color:var(--warning); color:#78350F; }
.alert-box.info    { background:var(--info-bg);    border-color:var(--info);    color:#0C4A6E; }

/* Pagination */
.pagination {
  display:flex; gap:4px; align-items:center;
  flex-wrap:wrap; padding:14px 18px;
}
.page-btn {
  padding:5px 12px; border:1px solid var(--border); border-radius:var(--r-sm);
  font-size:12px; font-weight:500; background:var(--surface); color:var(--text2);
  cursor:pointer; transition:all var(--t); user-select:none;
}
.page-btn:hover  { background:var(--brand-pale); border-color:var(--brand-pale2); color:var(--brand); }
.page-btn.active { background:var(--brand); color:#fff; border-color:var(--brand); }

/* Upload zone */
.upload-zone {
  border:2px dashed var(--border2); border-radius:var(--r-lg);
  padding:24px; text-align:center; cursor:pointer;
  transition:all var(--t); background:var(--surface2);
}
.upload-zone:hover,.upload-zone.drag-over {
  border-color:var(--brand-light); background:var(--brand-pale);
}
.upload-zone input { display:none; }
.upload-preview {
  width:100px; height:100px; border-radius:var(--r-lg);
  object-fit:cover; margin:10px auto 0; display:block;
}

/* ══════════════════════════════════════════════════════════════
   CUSTOMER AVATAR / POS / AI FAB
══════════════════════════════════════════════════════════════ */
.customer-avatar {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,#3B82F6,#7C3AED);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:13px; flex-shrink:0;
}

.pos-layout { display:grid; grid-template-columns:1fr 380px; gap:16px; align-items:start; }
.product-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:14px; cursor:pointer;
  transition:all var(--t); text-align:center;
}
.product-card:hover {
  border-color:var(--brand-light);
  box-shadow:var(--sh), 0 0 0 3px var(--brand-pale);
}
.cart-panel {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl);
  position:sticky; top:calc(var(--topbar-h)+16px);
  box-shadow:var(--sh-sm);
}
.cart-item {
  display:flex; align-items:flex-start; gap:8px; padding:10px;
  border-radius:var(--r); border:1px solid var(--border);
  margin-bottom:6px; background:var(--surface2);
}
.qty-btn {
  width:24px; height:24px; border:1px solid var(--border);
  background:var(--surface); border-radius:var(--r-sm);
  font-size:14px; display:flex; align-items:center; justify-content:center;
  color:var(--text); transition:all var(--t); flex-shrink:0;
}
.qty-btn:hover { background:var(--brand); color:#fff; border-color:var(--brand); }

.ai-fab {
  position:fixed; bottom:20px; right:20px; z-index:400;
  width:50px; height:50px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(29,78,216,.4), 0 2px 6px rgba(0,0,0,.18);
  transition:all .2s cubic-bezier(.34,1.56,.64,1);
  -webkit-tap-highlight-color:transparent;
}
.ai-fab:hover { transform:scale(1.1); box-shadow:0 8px 28px rgba(29,78,216,.5); }
.ai-fab.active { border-radius:14px; }
.ai-fab-icon  { font-size:17px; color:#fff; line-height:1; }
.ai-fab-label { font-size:8px; font-weight:700; color:rgba(255,255,255,.7); }

.ai-quick-panel {
  position:fixed; bottom:80px; right:16px; z-index:399;
  width:320px; max-width:calc(100vw - 32px);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-2xl); box-shadow:var(--sh-lg);
  display:flex; flex-direction:column;
  transform:scale(.9) translateY(20px); transform-origin:bottom right;
  opacity:0; pointer-events:none;
  transition:all .22s cubic-bezier(.34,1.4,.64,1);
  max-height:460px;
}
.ai-quick-panel.open { transform:scale(1) translateY(0); opacity:1; pointer-events:all; }
.ai-qp-header { padding:12px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:600; }
.ai-qp-messages { flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:8px; min-height:80px; max-height:200px; }
.ai-qp-msg { padding:8px 12px; border-radius:12px; font-size:12px; line-height:1.5; }
.ai-qp-msg.ai   { background:var(--surface2); border:1px solid var(--border); color:var(--text); border-top-left-radius:3px; }
.ai-qp-msg.user { background:linear-gradient(135deg,var(--brand),var(--accent)); color:#fff; align-self:flex-end; border-top-right-radius:3px; }
.ai-qp-quick { padding:8px 10px; display:flex; gap:5px; flex-wrap:wrap; border-top:1px solid var(--border); }
.ai-qp-chip { font-size:10px; padding:4px 9px; border-radius:16px; border:1px solid var(--border); background:var(--surface2); color:var(--text2); cursor:pointer; transition:all var(--t); }
.ai-qp-chip:hover { background:var(--brand); color:#fff; border-color:var(--brand); }
.ai-qp-input { padding:8px 10px; display:flex; gap:6px; border-top:1px solid var(--border); }
.ai-qp-input input { flex:1; padding:8px 12px; border:1px solid var(--border); border-radius:20px; font-size:12px; outline:none; background:var(--surface); color:var(--text); }
.ai-qp-input input:focus { border-color:var(--brand-light); }
.ai-qp-send { width:34px; height:34px; border-radius:50%; background:var(--brand); color:#fff; border:none; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ai-qp-send:hover { background:var(--brand-h); }
.ai-qp-full-link { display:block; text-align:center; padding:8px; font-size:11px; color:var(--brand); font-weight:500; border-top:1px solid var(--border); }

/* ══════════════════════════════════════════════════════════════
   UTILITIES
══════════════════════════════════════════════════════════════ */
.flex        { display:flex; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.flex-wrap   { flex-wrap:wrap; }
.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-0{margin-bottom:0!important}
.w-full{width:100%}.hidden{display:none!important}
.divider,.section-divider{border:none;border-top:1px solid var(--border);margin:16px 0}

code {
  font-family:'JetBrains Mono',monospace;
  background:var(--surface3); padding:2px 6px;
  border-radius:var(--r-xs); font-size:12px; color:var(--brand);
}

.loading-spinner {
  width:18px; height:18px; border:2px solid var(--border);
  border-top-color:var(--brand); border-radius:50%;
  animation:spin .6s linear infinite; display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fade-in{animation:fadeInUp .3s ease both}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD RESPONSIVE GRIDS
══════════════════════════════════════════════════════════════ */
.dash-grid-2-1 { display:grid; grid-template-columns:2fr 1fr; gap:18px; }
.dash-grid-3-2 { display:grid; grid-template-columns:3fr 2fr; gap:18px; }

/* ══════════════════════════════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════════════════════════════ */
body.login-page {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #0C1526 0%, #122240 40%, #0C1526 100%);
  overflow:hidden; position:relative; padding:16px;
}
body.login-page::before {
  content:''; position:absolute;
  width:550px; height:550px; border-radius:50%;
  top:-140px; left:-120px;
  background:radial-gradient(circle,rgba(29,78,216,.2),transparent 65%);
  animation:floatOrb 9s ease-in-out infinite;
}
body.login-page::after {
  content:''; position:absolute;
  width:380px; height:380px; border-radius:50%;
  bottom:-90px; right:-70px;
  background:radial-gradient(circle,rgba(124,58,237,.14),transparent 65%);
  animation:floatOrb 12s ease-in-out infinite reverse;
}
@keyframes floatOrb {
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(28px,-36px) scale(1.04)}
  66%{transform:translate(-18px,18px) scale(.97)}
}
.login-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:50px 50px;
  animation:gridDrift 24s linear infinite;
}
@keyframes gridDrift{from{background-position:0 0}to{background-position:50px 50px}}
.login-card {
  width:100%; max-width:400px;
  position:relative; z-index:10;
  background:#fff; border-radius:22px; padding:36px 32px;
  box-shadow:0 32px 72px rgba(0,0,0,.38), 0 8px 20px rgba(0,0,0,.16);
  animation:loginSlide .5s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes loginSlide{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}
.login-logo { text-align:center; margin-bottom:28px; }
.login-logo .brand-icon {
  width:54px; height:54px; font-size:25px;
  margin:0 auto 14px; border-radius:16px;
  animation:logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(29,78,216,.3)}
  50%{box-shadow:0 0 0 14px rgba(29,78,216,0)}
}
.login-logo h1{font-size:21px;font-weight:800;color:var(--text);letter-spacing:-.025em}
.login-logo p{font-size:12px;color:var(--text3);margin-top:4px}
.login-field{position:relative;margin-bottom:14px}
.login-field input{
  width:100%;padding:14px 14px 8px;
  border:1.5px solid var(--border);border-radius:var(--r-lg);
  font-size:14px;color:var(--text);background:var(--surface2);
  outline:none;transition:all var(--t);
}
.login-field input:focus{border-color:var(--brand-light);box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.login-field label{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--text3);pointer-events:none;transition:all var(--t)}
.login-field input:focus~label,
.login-field input:not(:placeholder-shown)~label{top:10px;transform:none;font-size:10px;font-weight:700;color:var(--brand)}
.login-btn{
  width:100%;padding:14px;border:none;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--brand),var(--accent));
  color:#fff;font-size:14px;font-weight:700;
  box-shadow:0 4px 16px rgba(29,78,216,.35);
  transition:all var(--t);
}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(29,78,216,.45)}
.login-btn:active{transform:translateY(0)}
.login-demo{text-align:center;font-size:11px;color:var(--text3);margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.login-demo code{cursor:pointer}
.login-demo code:hover{background:var(--brand-pale);color:var(--brand)}

/* ══════════════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════════════ */
@media print {
  .sidebar,.topbar,.no-print,.ai-fab,.ai-quick-panel,
  .filter-bar,.pagination { display:none !important; }
  .main-content { margin-left:0 !important; }
  .page-body { padding:0; }
  body { background:#fff; color:#000; }
  .card { border:1px solid #ddd; box-shadow:none; }
  thead th { background:#f5f5f5 !important; color:#333 !important; -webkit-print-color-adjust:exact; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — 1024px tablet
══════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  :root { --sidebar-w:240px; }
  .pos-layout { grid-template-columns:1fr; }
  .cart-panel { position:relative; top:0; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .form-row-3 { grid-template-columns:1fr 1fr; }
  .dash-grid-2-1, .dash-grid-3-2 { grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — 768px mobile
══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  :root { --sidebar-w:0px; }
  .sidebar { transform:translateX(-270px); width:270px; box-shadow:var(--sh-xl); }
  .sidebar.open { transform:translateX(0); }
  .main-content { margin-left:0; }
  .menu-toggle { display:flex; }
  .page-body { padding:14px 14px 36px; }
  .page-title { font-size:19px; }
  .topbar { padding:0 14px; gap:6px; }
  .topbar-title { font-size:12px; }
  .topbar-time { display:none; }
  .topbar-logout-btn { padding:5px 8px; }
  .topbar-logout-btn span:last-child { display:none; }
  .alert-pill { font-size:10px; padding:3px 7px; }
  /* POS on mobile: product grid to 2 cols */
  .pos-layout { grid-template-columns:1fr; }
  .cart-panel { position:relative; top:0; }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .stat-card { padding:14px 12px; gap:10px; }
  .stat-value { font-size:clamp(11px,3.5vw,15px); }
  .stat-icon { width:36px; height:36px; font-size:16px; }
  .form-row, .form-row-3 { grid-template-columns:1fr; }
  .filter-bar { flex-wrap:wrap; gap:6px; }
  .filter-bar input,.filter-bar select { min-width:0; flex:1 1 140px; }
  .filter-bar .btn { padding:7px 11px; font-size:12px; }
  .table-wrap { margin:0 -14px; border-radius:0; }
  .card { padding:14px; border-radius:var(--r-lg); }
  .card:hover { transform:none; }
  .modal { padding:20px; border-radius:var(--r-xl); max-height:85vh; }
  .modal-overlay { padding:10px; align-items:flex-end; }
  .stat-modal-grid { grid-template-columns:1fr; }
  .ai-quick-panel { right:10px; bottom:74px; width:calc(100vw - 20px); }
  .ai-fab { bottom:14px; right:14px; width:46px; height:46px; }
  .dash-grid-2-1, .dash-grid-3-2 { grid-template-columns:1fr; }
  table .hide-mobile { display:none !important; }
  /* Page header flex stacks on mobile */
  .page-header-row { flex-direction:column !important; align-items:flex-start !important; gap:10px !important; }
  /* Buttons in action areas wrap */
  .btn-row-wrap { flex-wrap:wrap !important; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — 480px small mobile
══════════════════════════════════════════════════════════════ */
@media(max-width:480px){
  .stats-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .stat-card { padding:12px 10px; gap:8px; }
  .stat-value { font-size:clamp(10px,3vw,13px); }
  .stat-label { font-size:10px; }
  .stat-icon { width:30px; height:30px; font-size:14px; border-radius:var(--r); flex-shrink:0; }
  .expand-hint { display:none; }
  .login-card { padding:26px 20px; border-radius:18px; }
  .page-body { padding:10px 10px 28px; }
  thead th, tbody td, tfoot td { padding:8px 10px; }
  .stat-modal-grid { grid-template-columns:1fr; }
  .modal { padding:16px; }
  /* On tiny screens modals take full width */
  .modal-overlay { padding:0; align-items:flex-end; }
  .modal { border-radius:var(--r-xl) var(--r-xl) 0 0; max-width:100% !important; max-height:90vh; }
  .filter-bar { flex-direction:column; }
  .filter-bar input,.filter-bar select,.filter-bar .btn { width:100% !important; flex:none !important; }
  /* tables scroll without cutting off */
  .table-wrap { margin:0 -10px; }
}