/* ── CWPOS Design System ───────────────────────────────────────────────────── */
:root {
  --primary:    #0066ff;
  --primary-dk: #0052cc;
  --success:    #00b894;
  --danger:     #e84393;
  --warning:    #f39c12;
  --info:       #0984e3;
  --purple:     #8b5cf6;
  --bg:         #f0f2f7;
  --surface:    #ffffff;
  --surface2:   #f8f9fc;
  --border:     #e2e8f0;
  --border-dk:  #c8d0dc;
  --text:       #1a202c;
  --text-muted: #6b7a99;
  --sidebar:    #0f1f35;
  --sidebar-w:  220px;
  --sidebar-w-collapsed: 64px;
  --radius:     10px;
  --radius-sm:  7px;
  --shadow:     0 2px 8px rgba(0,0,0,.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,.12);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px;line-height:1.5;color:var(--text);background:var(--bg);
  min-height:100vh;display:flex;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
button,input,select,textarea{font-family:inherit;font-size:inherit;}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar{width:var(--sidebar-w);height:100vh;background:var(--sidebar);
  display:flex;flex-direction:column;flex-shrink:0;position:fixed;top:0;left:0;z-index:50;
  overflow-y:auto;}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:18px 16px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);}
.logo-icon{width:34px;height:34px;border-radius:8px;background:var(--primary);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.logo-name{font-size:.95rem;font-weight:700;color:#fff;display:block;letter-spacing:.01em;}
.logo-sub{font-size:.7rem;color:rgba(255,255,255,.4);display:block;}
.sidebar-user{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;gap:9px;}
.user-avatar{width:30px;height:30px;border-radius:50%;background:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  color:#fff;flex-shrink:0;}
.user-name{font-size:.8rem;font-weight:600;color:#fff;line-height:1.2;}
.user-role{font-size:.7rem;color:rgba(255,255,255,.45);text-transform:capitalize;}
.sidebar-nav{flex:1;padding:8px 0;overflow-y:auto;}
.nav-group-label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:rgba(255,255,255,.3);padding:10px 16px 4px;}
.nav-link{display:flex;align-items:center;gap:9px;padding:8px 16px;
  font-size:.82rem;font-weight:400;color:rgba(255,255,255,.6);
  transition:background .15s,color .15s;border-radius:0;}
.nav-link i{width:18px;text-align:center;flex-shrink:0;font-size:14px;}
.nav-link:hover{background:rgba(255,255,255,.07);color:#fff;}
.nav-link.active{background:rgba(0,102,255,.25);color:#fff;font-weight:600;}
.nav-link.active i{color:var(--primary);}
.sidebar-footer{padding:14px 16px;border-top:1px solid rgba(255,255,255,.07);}
.sidebar-footer a{font-size:.75rem;color:rgba(255,255,255,.35);display:flex;align-items:center;gap:6px;}
.sidebar-footer a:hover{color:rgba(255,255,255,.7);}

/* ── Main layout ─────────────────────────────────────────────────────────── */
.main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-width:0;min-height:100vh;}
.topbar{height:52px;background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 24px;
  position:sticky;top:0;z-index:40;gap:12px;}
.topbar-title{font-size:1rem;font-weight:700;color:var(--text);}
.topbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto;}
.content{padding:22px 24px;flex:1;}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);}
.card-header{display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px;border-bottom:1px solid var(--border);}
.card-title{font-size:.9rem;font-weight:700;}
.card-body{padding:18px;}
.card-footer{padding:12px 18px;border-top:1px solid var(--border);background:var(--surface2);
  border-radius:0 0 var(--radius) var(--radius);}

/* ── KPI cards ───────────────────────────────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;}
.kpi-grid-5{grid-template-columns:repeat(5,1fr);}


.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);min-width:0;}
.kpi-label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-muted);margin-bottom:8px;}
.kpi-val{font-size:1.7rem;font-weight:800;color:var(--text);line-height:1;margin-bottom:4px;}
.kpi-val.kpi-money{font-size:1.3rem;white-space:nowrap;letter-spacing:-.01em;}
.kpi-sub{font-size:.75rem;color:var(--text-muted);}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-sm);
  font-size:.83rem;font-weight:500;cursor:pointer;border:1px solid transparent;
  transition:filter .15s,transform .1s;line-height:1.4;}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);}
.btn-primary:hover{filter:brightness(1.08)}
.btn-success{background:var(--success);color:#fff;border-color:var(--success);}
.btn-success:hover{filter:brightness(1.08)}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger);}
.btn-danger:hover{filter:brightness(1.08)}
.btn-warning{background:var(--warning);color:#fff;border-color:var(--warning);}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary);}
.btn-outline:hover{background:var(--primary);color:#fff;}
.btn-ghost{background:transparent;color:var(--text-muted);border-color:var(--border);}
.btn-ghost:hover{background:var(--bg);color:var(--text);}
.btn-sm{padding:4px 10px;font-size:.77rem;}
.btn-lg{padding:11px 22px;font-size:.95rem;}
.btn-icon{padding:7px;width:32px;height:32px;justify-content:center;}
.btn-full{width:100%;justify-content:center;}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-group{margin-bottom:16px;}
.form-label{display:block;font-size:.8rem;font-weight:600;color:var(--text);margin-bottom:5px;}
.form-input{width:100%;padding:8px 11px;border:1px solid var(--border-dk);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);font-size:.88rem;
  transition:border-color .15s,box-shadow .15s;}
.form-input:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(0,102,255,.12);}
.form-input[readonly]{background:var(--surface2);cursor:default;}
.form-hint{display:block;font-size:.73rem;color:var(--text-muted);margin-top:4px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

.form-check{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.85rem;}
.form-check input{width:15px;height:15px;cursor:pointer;}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
thead th{padding:9px 13px;background:var(--surface2);font-size:.73rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);
  border-bottom:1px solid var(--border);text-align:left;white-space:nowrap;}
tbody td{padding:10px 13px;border-bottom:1px solid var(--border);font-size:.85rem;
  vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface2);}
.text-right{text-align:right}
.text-center{text-align:center}
.mono{font-family:'SF Mono',Monaco,monospace;font-size:.82rem;}

/* ── Alerts / flash ──────────────────────────────────────────────────────── */
.alert{padding:10px 14px;border-radius:var(--radius-sm);font-size:.85rem;
  margin-bottom:16px;border:1px solid transparent;}
.alert-success{background:rgba(0,184,148,.09);border-color:rgba(0,184,148,.3);color:#006651;}
.alert-danger {background:rgba(232,67,147,.08);border-color:rgba(232,67,147,.3);color:#9b0049;}
.alert-warning{background:rgba(243,156,18,.09);border-color:rgba(243,156,18,.3);color:#7d5200;}
.alert-info   {background:rgba(9,132,227,.08);border-color:rgba(9,132,227,.25);color:#044f8c;}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px;
  font-size:.7rem;font-weight:600;white-space:nowrap;}
.badge-green {background:rgba(0,184,148,.12);color:#00916a;}
.badge-red   {background:rgba(232,67,147,.1); color:#c51b72;}
.badge-yellow{background:rgba(243,156,18,.12);color:#8a5c00;}
.badge-blue  {background:rgba(9,132,227,.1);  color:#054a86;}
.badge-grey  {background:rgba(107,122,153,.1);color:var(--text-muted);}

/* ── POS Terminal ────────────────────────────────────────────────────────── */
.pos-layout{display:grid;grid-template-columns:1fr 340px;gap:0;height:calc(100vh - 52px);overflow:hidden;}


/* Product panel */
.pos-products{display:flex;flex-direction:column;overflow:hidden;background:var(--bg);border-right:1px solid var(--border);}
.pos-search-bar{padding:14px 16px;background:var(--surface);border-bottom:1px solid var(--border);}
.pos-search-row{display:flex;gap:8px;margin-bottom:10px;}
.pos-search-input{flex:1;padding:8px 12px;border:1px solid var(--border-dk);border-radius:var(--radius-sm);
  font-size:.88rem;background:var(--surface);}
.pos-search-input:focus{outline:none;border-color:var(--primary);}
.cat-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tab{padding:5px 12px;border-radius:99px;font-size:.75rem;font-weight:600;cursor:pointer;
  white-space:nowrap;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);
  transition:all .15s;}
.cat-tab:hover{border-color:var(--primary);color:var(--primary);}
.cat-tab.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px;padding:14px;overflow-y:auto;flex:1;align-content:start;}
.product-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:12px 10px;cursor:pointer;text-align:center;transition:all .15s;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  box-shadow:var(--shadow);}
.product-card *{pointer-events:none;}
.product-card:hover{border-color:var(--primary);box-shadow:0 0 0 2px rgba(0,102,255,.15);}
.product-card:active{transform:scale(.97)}
.product-card.out-of-stock{opacity:.45;cursor:not-allowed;}
.product-card.out-of-stock:hover{border-color:var(--border);box-shadow:var(--shadow);}
.product-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:20px;flex-shrink:0;}
.product-name{font-size:.78rem;font-weight:600;line-height:1.3;color:var(--text);}
.product-price{font-size:.82rem;font-weight:700;color:var(--primary);}
.product-stock{font-size:.66rem;color:var(--text-muted);}

/* Cart panel */
.pos-cart{display:flex;flex-direction:column;background:var(--surface);overflow:hidden;}
.cart-header{padding:14px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;}
.cart-header h2{font-size:.95rem;font-weight:700;}
.cart-items{flex:1;overflow-y:auto;padding:0;}
.cart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;color:var(--text-muted);gap:10px;font-size:.85rem;}
.cart-item{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 14px;
  border-bottom:1px solid var(--border);align-items:center;}
.cart-item-name{font-size:.83rem;font-weight:600;margin-bottom:2px;}
.cart-item-price{font-size:.75rem;color:var(--text-muted);}
.cart-qty{display:flex;align-items:center;gap:6px;}
.qty-btn{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);
  background:var(--bg);cursor:pointer;font-size:.9rem;display:flex;align-items:center;
  justify-content:center;font-weight:700;color:var(--text);transition:all .1s;}
.qty-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff;}
.qty-val{min-width:28px;text-align:center;font-size:.88rem;font-weight:700;}
.qty-input{width:40px;min-width:40px;text-align:center;font-size:.88rem;font-weight:700;
  color:var(--text);background:var(--card-bg);border:1px solid var(--border);
  border-radius:6px;padding:4px 2px;height:26px;-moz-appearance:textfield;transition:border-color .1s;}
.qty-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-light);}
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.cart-item-total{font-size:.88rem;font-weight:700;text-align:right;white-space:nowrap;}
.cart-item-del{color:var(--danger);cursor:pointer;font-size:14px;padding:2px;
  opacity:.6;transition:opacity .15s;}
.cart-item-del:hover{opacity:1;}

/* Cart footer */
.cart-footer{border-top:1px solid var(--border);padding:14px;overflow-y:auto;flex-shrink:0;}
.cart-discount{display:flex;gap:6px;margin-bottom:10px;}
.cart-discount .form-input{flex:1;padding:6px 9px;font-size:.82rem;}
.cart-totals{margin-bottom:12px;}
.cart-tot-row{display:flex;justify-content:space-between;font-size:.83rem;
  color:var(--text-muted);padding:3px 0;}
.cart-tot-total{display:flex;justify-content:space-between;font-size:1.1rem;font-weight:800;
  color:var(--text);padding:8px 0 0;border-top:1px solid var(--border);margin-top:5px;}
.cart-pay-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px;}
.pay-method-btn{padding:8px 4px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg);cursor:pointer;text-align:center;font-size:.75rem;font-weight:600;
  color:var(--text-muted);transition:all .15s;}
.pay-method-btn.active{border-color:var(--primary);background:rgba(0,102,255,.08);color:var(--primary);}
.pay-method-btn:hover:not(.active){border-color:var(--border-dk);color:var(--text);}
.charge-btn{width:100%;padding:13px;border-radius:var(--radius);font-size:1rem;font-weight:700;
  background:var(--primary);color:#fff;border:none;cursor:pointer;
  transition:filter .15s;display:flex;align-items:center;justify-content:center;gap:8px;}
.charge-btn:hover{filter:brightness(1.08)}
.charge-btn:disabled{opacity:.4;cursor:not-allowed;}

/* ── Numpad modal ────────────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:16px;}
.modal{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-md);
  width:100%;max-width:420px;
  display:flex;flex-direction:column;
  max-height:min(calc(100vh - 32px), calc(100dvh - 32px));}
.modal-header{display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0;}
.modal-title{font-size:1rem;font-weight:700;}
.modal-close{cursor:pointer;color:var(--text-muted);font-size:18px;line-height:1;
  padding:2px 6px;border-radius:4px;}
.modal-close:hover{background:var(--bg);}
.modal-body{padding:14px;overflow-y:auto;flex:1;min-height:0;}
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.numpad-btn{padding:14px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg);cursor:pointer;font-size:1.1rem;font-weight:600;
  text-align:center;transition:all .1s;color:var(--text);}
.numpad-btn:hover{background:var(--border);border-color:var(--primary);}
.numpad-btn.zero{grid-column:span 2;}
.numpad-btn.action{background:var(--primary);color:#fff;border-color:var(--primary);}
.numpad-btn.clear{background:rgba(232,67,147,.08);color:var(--danger);border-color:var(--danger);}
.tendered-display{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:12px 16px;font-size:1.6rem;font-weight:800;text-align:right;
  letter-spacing:.02em;margin-bottom:14px;min-height:58px;color:var(--text);}
.change-display{background:rgba(0,184,148,.08);border:1px solid rgba(0,184,148,.3);
  border-radius:var(--radius-sm);padding:10px 14px;display:flex;
  justify-content:space-between;align-items:center;margin-top:10px;}
.change-label{font-size:.8rem;color:var(--text-muted);}
.change-val{font-size:1.2rem;font-weight:800;color:var(--success);}

/* ── Receipt ─────────────────────────────────────────────────────────────── */
.receipt-wrap{max-width:420px;margin:0 auto;}
.receipt-card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}

/* ── Search / filter bar ─────────────────────────────────────────────────── */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center;}
.filter-bar .form-input{max-width:220px;}
.filter-bar select.form-input{max-width:160px;}

/* ── Pagination / count ──────────────────────────────────────────────────── */
.table-footer{display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-top:1px solid var(--border);font-size:.78rem;color:var(--text-muted);}

/* ── Empty states ────────────────────────────────────────────────────────── */
.empty-state{text-align:center;padding:48px 24px;color:var(--text-muted);}
.empty-state i{font-size:40px;margin-bottom:14px;opacity:.35;}
.empty-state h3{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:6px;}
.empty-state p{font-size:.85rem;}

/* ── Bar chart (simple CSS) ──────────────────────────────────────────────── */
.bar-chart{display:flex;align-items:flex-end;gap:4px;height:100px;padding:0 2px;width:100%;}
.bar-item{flex:1;min-width:8px;display:flex;flex-direction:column;align-items:center;gap:4px;}
.bar{width:100%;background:var(--primary);border-radius:4px 4px 0 0;min-height:2px;
  transition:height .3s;opacity:.85;}
.bar:hover{opacity:1;}
.bar-label{font-size:.65rem;color:var(--text-muted);white-space:nowrap;}

/* ── Auth pages ──────────────────────────────────────────────────────────── */
body.auth-page{display:flex;align-items:center;justify-content:center;
  min-height:100vh;background:var(--sidebar);}
.auth-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-md);
  width:100%;max-width:380px;padding:36px;}
.auth-logo{text-align:center;margin-bottom:28px;}
.auth-logo .logo-icon{width:52px;height:52px;border-radius:14px;font-size:24px;
  background:var(--primary);display:flex;align-items:center;justify-content:center;
  margin:0 auto 12px;}
.auth-logo h1{font-size:1.4rem;font-weight:800;}
.auth-logo p{font-size:.82rem;color:var(--text-muted);margin-top:4px;}

/* ── Install pages ───────────────────────────────────────────────────────── */
body.install-page{display:flex;align-items:center;justify-content:center;
  min-height:100vh;background:var(--sidebar);padding:20px;}
.install-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-md);
  width:100%;max-width:520px;overflow:hidden;}
.install-header{background:var(--primary);padding:28px;text-align:center;color:#fff;}
.install-header h1{font-size:1.5rem;font-weight:800;margin-bottom:6px;}
.install-header p{font-size:.85rem;opacity:.8;}
.install-body{padding:28px;}
.step-grid{display:grid;gap:14px;}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-thumb{background:var(--border-dk);border-radius:3px;}
::-webkit-scrollbar-track{background:transparent;}


/* ── Sidebar base transition ────────────────────────────────────────────── */
.sidebar {
    transition: transform 0.25s ease, width 0.2s ease;
}
.main {
    transition: margin-left 0.25s ease;
}

/* Collapsed-rail hover tooltip — a single shared fixed element (escapes the
   sidebar's overflow clipping). Positioned by JS. */
.sidebar-tooltip {
  position: fixed;
  background: var(--sidebar, #1e293b);
  color: #fff;
  padding: 6px 11px;
  border-radius: 6px;
  font-size: .8rem;
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transition: opacity .12s ease;
}
.sidebar-tooltip.show { opacity: 1; }

/* ── Desktop collapsed sidebar (icons only) ──────────────────────────────
   Toggled via body.sidebar-collapsed. Shrinks the sidebar to an icon rail
   and pulls the main content over to reclaim the space. Only applies on wide
   screens; below 1080px the off-canvas behavior takes over instead.
   ────────────────────────────────────────────────────────────────────── */
@media (min-width: 1081px) {
  body.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
  body.sidebar-collapsed .main    { margin-left: var(--sidebar-w-collapsed); }

  /* Hide text labels, group headings, and user details — keep icons */
  body.sidebar-collapsed .sidebar .nav-link span,
  body.sidebar-collapsed .nav-group-label,
  body.sidebar-collapsed .sidebar-user .sidebar-user-meta,
  body.sidebar-collapsed .sidebar-logo .sidebar-logo-text {
    display: none;
  }

  /* Center every nav icon in the narrow rail and make it comfortably tappable */
  body.sidebar-collapsed .sidebar .nav-link {
    justify-content: center;
    padding: 11px 0;
    margin: 2px 8px;
    border-radius: 8px;
    position: relative;
  }
  body.sidebar-collapsed .sidebar .nav-link i {
    margin: 0;
    font-size: 1.15rem;   /* larger, clearer icons */
    width: auto;
    text-align: center;
  }

  /* Logo + user avatar centered, icons sized up */
  body.sidebar-collapsed .sidebar-logo {
    justify-content: center;
    padding-left: 0; padding-right: 0;
  }
  /* In the narrow rail, hide the logo mark and let the toggle button be the
     single centered control (it expands the sidebar again on click). */
  body.sidebar-collapsed .sidebar-logo .logo-icon { display: none; }
  body.sidebar-collapsed #sidebar-collapse-btn {
    margin-left: 0 !important;
    font-size: 1rem !important;
  }
  body.sidebar-collapsed .sidebar-logo i,
  body.sidebar-collapsed .sidebar-logo .sidebar-logo-icon { font-size: 1.4rem; }
  body.sidebar-collapsed .sidebar-user {
    justify-content: center;
    padding-left: 0; padding-right: 0;
  }

  /* ── Footer: text is inline in the <a>, not in spans, so collapse it via
     font-size:0 and restore the icon size. Also hide the version number. ── */
  body.sidebar-collapsed .sidebar-footer {
    padding-left: 0; padding-right: 0; text-align: center;
  }
  body.sidebar-collapsed .sidebar-footer a {
    justify-content: center;
    gap: 0 !important;
    font-size: 0 !important;        /* hides the text node */
    padding: 10px 0 !important;
  }
  body.sidebar-collapsed .sidebar-footer a i {
    font-size: 1.15rem !important;  /* restore icon to a visible size */
    margin: 0;
  }
  body.sidebar-collapsed .sidebar-footer > div {
    display: none;                  /* hide the "CWPOS v1.0.0" version line */
  }

  /* (Collapsed-rail tooltips are rendered via JS as a position:fixed element —
     a CSS ::after here would be clipped by .sidebar-nav's overflow-y:auto.) */

  /* Collapse toggle button rotates its chevron */
  body.sidebar-collapsed #sidebar-collapse-btn i { transform: rotate(180deg); }
}

/* ── Terminal mode: sidebar hidden, full-width main ─────────────────────── */
body.terminal-mode .sidebar {
    transform: translateX(-100%);
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    z-index: 300;
    box-shadow: none;
}
body.terminal-mode .main {
    margin-left: 0;
}
body.terminal-mode #sidebar-toggle {
    display: inline-flex !important;
}
body.terminal-mode.sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.35);
}
body.terminal-mode.sidebar-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 299;
}
body.terminal-mode .pos-layout {
    height: calc(100vh - 52px);
}

/* ── Mobile: breakpoint 1080px ───────────────────────────────────────────
   Below 1080px the sidebar hides off-screen. The main fills full width.
   A hamburger button in the topbar slides the sidebar back in.
   The sidebar overlays content (position:fixed) when open, with a backdrop.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {

  /* Sidebar slides off-screen, floats over content when open */
  .sidebar {
    position: fixed !important;
    top: 0; left: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 300;
    transform: translateX(-100%);
  }

  /* Main: no left margin — sidebar is out of flow */
  .main {
    margin-left: 0 !important;
  }

  /* Show hamburger on all pages */
  #sidebar-toggle {
    display: inline-flex !important;
  }

  /* Sidebar slides in when body.sidebar-open */
  body.sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.4);
  }

  /* Backdrop covers main content when sidebar is open */
  body.sidebar-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 299;
    pointer-events: auto;
  }

  /* Content area: full width, tighter padding */
  .content { padding: 14px 14px; }
  .topbar  { padding: 0 14px; }

  /* Cards */
  .card-body   { padding: 14px; }
  .card-header { padding: 12px 14px; }
  .card-footer { padding: 10px 14px; }

  /* Tables scroll horizontally — no min-width forcing overflow */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 0; }

  /* Modals: full width, fit screen */
  .modal {
    width: 96vw !important;
    max-height: min(calc(100vh - 16px), calc(100dvh - 16px)) !important;
    overflow: hidden !important;
  }
  .modal-overlay { padding: 8px !important; }
  .modal-body { padding: 10px !important; gap: 6px !important; }
  .modal-header { padding: 8px 12px !important; }
  .modal-title { font-size: .9rem !important; }
  .tendered-display { padding: 6px 10px !important; font-size: 1.1rem !important; margin-bottom: 4px !important; min-height: auto !important; }
  .numpad { gap: 4px !important; }
  .numpad-btn { padding: 9px 4px !important; font-size: .85rem !important; }
  #quick-amounts { margin-top: 5px !important; gap: 4px !important; }
  #quick-amounts .btn { padding: 4px 7px !important; font-size: .70rem !important; }
  .change-display { padding: 5px 10px !important; margin-top: 5px !important; }
  .change-val { font-size: .95rem !important; }
  #complete-btn { margin-top: 6px !important; padding: 9px !important; font-size: .88rem !important; flex-shrink: 0; }

  /* Form rows stack */
  .form-row { grid-template-columns: 1fr !important; }

  /* KPI grid: 2 cols */
  .kpi-grid { grid-template-columns: repeat(2,1fr) !important; }

  /* POS layout: vertical stack on portrait */
  .pos-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .pos-products { max-height: 55vh; }
  .pos-cart     { border-top: 1px solid var(--border); max-height: 65vh; }

  /* Settings/install step grid */
  .step-grid { grid-template-columns: 1fr !important; }

  /* Users layout */
  .users-layout { grid-template-columns: 1fr !important; }

  /* Safe area for iPhone notch / home bar */
  .topbar { padding-top: env(safe-area-inset-top, 0); }
  body { padding-bottom: env(safe-area-inset-bottom, 0); }
}

@media (max-width: 600px) {
  .kpi-grid { grid-template-columns: 1fr !important; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important; }
  .topbar-title { font-size: .88rem; }
  .content { padding: 10px; }
  /* Stack dashboard two-col on small phones */
  .dash-two-col { grid-template-columns: 1fr !important; }
  /* No table min-width on phones */
  table { min-width: 0 !important; font-size: .78rem; }
  th, td { padding: 6px 8px !important; }
}

/* ── Tablet / iPad landscape: 768px – 1080px ─────────────────────────────
   Keep POS two-column side-by-side on tablets. Narrow the cart column and
   tighten spacing so both panels fit comfortably on a 768–1024px viewport.
   ────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1080px) {

  /* Restore two-column POS layout on landscape tablets */
  .pos-layout {
    grid-template-columns: 1fr 260px !important;
    height: calc(100vh - 52px) !important;
    height: calc(100dvh - 52px) !important;
    overflow: hidden !important;
  }

  /* Products panel: restore scroll, cancel mobile max-height */
  .pos-products {
    max-height: none !important;
    overflow-y: auto;
  }

  /* Cart panel: restore scroll, cancel mobile max-height */
  .pos-cart {
    max-height: none !important;
    border-top: none !important;
    border-left: 1px solid var(--border);
    overflow-y: auto;
  }

  /* Product cards: slightly smaller on tablet */
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)) !important;
    gap: 8px !important;
  }
  .product-card { padding: 10px 8px !important; }
  .product-card .product-name { font-size: .78rem !important; }
  .product-card .product-price { font-size: .82rem !important; }

  /* Numpad: tighter buttons on narrower cart column */
  .numpad { gap: 6px !important; }
  .numpad-btn { padding: 10px 6px !important; font-size: .88rem !important; }

  /* Modal: fit screen height */
  .modal-overlay { padding: 8px !important; }
  .modal { max-height: min(calc(100vh - 16px), calc(100dvh - 16px)) !important; overflow: hidden !important; }
  .modal-body { padding: 10px !important; gap: 6px !important; }
  .modal-header { padding: 8px 12px !important; }
  .modal-title { font-size: .9rem !important; }
  .tendered-display { padding: 6px 10px !important; font-size: 1.1rem !important; margin-bottom: 4px !important; min-height: auto !important; }
  .numpad { gap: 4px !important; }
  .numpad-btn { padding: 9px 4px !important; font-size: .85rem !important; }
  #quick-amounts { margin-top: 5px !important; gap: 4px !important; }
  #quick-amounts .btn { padding: 4px 7px !important; font-size: .70rem !important; }
  .change-display { padding: 5px 10px !important; margin-top: 5px !important; }
  .change-val { font-size: .95rem !important; }
  #complete-btn { margin-top: 6px !important; padding: 9px !important; font-size: .88rem !important; flex-shrink: 0; }

  /* Cart internals: tighter padding */
  .cart-header  { padding: 10px 12px !important; }
  .cart-footer  { padding: 10px 12px !important; }
  .cart-item    { padding: 8px 10px !important; font-size: .82rem !important; }
  .cart-tot-row { font-size: .82rem !important; }
  .cart-tot-total { font-size: 1rem !important; padding: 8px 10px !important; }

  /* Payment method buttons: smaller on narrow cart column */
  .cart-pay-methods { gap: 4px !important; margin-bottom: 7px !important; }
  .pay-method-btn { padding: 5px 2px !important; font-size: .68rem !important; }
  .pay-method-btn i { font-size: .75rem !important; display: block; margin-bottom: 2px; }

  /* Charge button */
  .charge-btn { font-size: .88rem !important; padding: 10px !important; }

  /* KPI grid stays 2-col on tablet */
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── iPad portrait: 768px exactly ────────────────────────────────────────
   Portrait iPad is 768px wide — restore stacked layout since it's too
   narrow for side-by-side POS comfortably.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pos-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .pos-products { max-height: 52vh; }
  .pos-cart {
    border-top: 1px solid var(--border) !important;
    border-left: none !important;
    max-height: 60vh;
  }
  /* Larger touch targets for product cards on portrait tablet */
  .product-card { min-height: 80px; }
  .numpad-btn { min-height: 52px !important; }
  /* Wide tables scroll within their overflow-x wrapper rather than squishing
     to unreadable widths. The wrapper (guarded to max-width:100% below) keeps
     the scroll contained to the card instead of the whole page. */
  .table-wrap, .card > div[style*="overflow-x"] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* ── Mobile layout guardrails ───────────────────────────────────────────────
   Stops any single wide element (tables, flex rows, fixed-width cards) from
   forcing the whole page wider than the screen — the cause of content being
   squeezed into a narrow column with dead space beside it. */
@media (max-width: 1080px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  .main { max-width: 100vw; overflow-x: hidden; }
  .content { max-width: 100%; overflow-x: hidden; }

  /* Every card stays within the viewport and never sets its own wider min */
  .card { max-width: 100%; min-width: 0 !important; }

  /* Wide tables scroll INSIDE their own card, not the page. Any table with a
     min-width gets wrapped behavior via its scroll parent. */
  .card table,
  .content table { max-width: 100%; }
  .card > div[style*="overflow-x"],
  .content div[style*="overflow-x"] { max-width: 100%; }

  /* Flex rows wrap instead of overflowing */
  .card-header { flex-wrap: wrap; }
}

@media (max-width: 600px) {
  /* On phones, even 2-up metric grids go single-column so cards aren't cramped */
  .dash-owner-metrics { grid-template-columns: 1fr !important; }
  /* Tab strips (Revenue ranges, etc.) scroll horizontally on their own */
  .content [style*="overflow-x:auto"] { -webkit-overflow-scrolling: touch; }
}


/* ── Bar Tabs Panel (inside pos-cart, top of right column) ──────────────── */
.bar-tabs-panel {
  border-bottom: 2px solid var(--primary);
  background: var(--surface);
  flex-shrink: 0;
}
.bar-tabs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  cursor: pointer;
  user-select: none;
  font-size: .84rem;
  font-weight: 600;
}
.bar-tabs-header:hover { background: var(--sidebar-hover); }
.bar-tabs-body {
  padding: 8px 12px 10px;
  border-top: 1px solid var(--border);
}
.bar-new-tab-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.bar-new-tab-row .form-input {
  font-size: .82rem;
  padding: 6px 10px;
}
/* Dropdown: overflow-visible chain must go all the way up */
.bar-tabs-panel,
.bar-tabs-body,
.bar-new-tab-row,
.bar-new-tab-row > div {
  overflow: visible !important;
}
.bar-cust-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  z-index: 600;
  max-height: 180px;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.bar-cust-row {
  padding: 8px 12px;
  font-size: .82rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.bar-cust-row:last-child { border-bottom: none; }
.bar-cust-row:hover { background: var(--sidebar-hover); }

/* Inside the New Tab modal, the search dropdown flows in-line (not absolute) so
   it pushes the "Open Tab" button down instead of overlapping it. */
#new-tab-modal .bar-cust-dropdown {
  position: static;
  top: auto;
  margin-top: 6px;
  max-height: 200px;
}
.bar-tabs-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 180px;
  overflow-y: auto;
}
.bar-tab-card {
  display: flex;
  align-items: stretch;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--warning, #d97706);  /* unmissable open-tab accent */
  border-radius: var(--radius-sm);
  transition: border-color .15s;
}
.bar-tab-card.active {
  border-color: var(--primary);
  border-left: 4px solid var(--primary);
  background: var(--primary-light);
}
.bar-tab-card-info {
  flex: 1;
  padding: 6px 10px;
  cursor: pointer;
  min-width: 0;
}
.bar-tab-card-info:hover { background: var(--sidebar-hover); }
.bar-tab-name  { font-size: .8rem;  font-weight: 600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-tab-total { font-size: .72rem; color: var(--text-muted); margin-top: 1px; }
.bar-tab-card-actions {
  display: flex;
  align-items: center;
  padding: 0 6px;
  border-left: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── Small phone POS: < 480px ────────────────────────────────────────────────
   Auto-scales the terminal to fit comfortably on small-screen devices.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Tighten root font so all rem values scale down proportionally */
  body.terminal-mode { font-size: 13px; }

  /* Product grid: 2 tight columns */
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .product-card {
    padding: 7px 5px !important;
    border-radius: 6px !important;
  }
  .product-card .product-name  { font-size: .70rem !important; }
  .product-card .product-price { font-size: .72rem !important; }
  .product-card .product-stock { font-size: .62rem !important; }
  .product-card img            { height: 44px !important; }

  /* Cart: compact rows */
  .cart-header { padding: 8px 10px !important; font-size: .82rem !important; }
  .cart-item   { padding: 6px 8px  !important; font-size: .78rem !important; }
  .cart-tot-row   { font-size: .78rem !important; }
  .cart-tot-total { font-size: .92rem !important; padding: 7px 10px !important; }
  .cart-footer    { padding: 8px 10px !important; gap: 6px !important; }

  /* Numpad: smaller buttons */
  .numpad     { gap: 4px !important; }
  .numpad-btn { padding: 9px 4px !important; font-size: .80rem !important; border-radius: 5px !important; }

  /* Action buttons */
  .btn { padding: 7px 10px !important; font-size: .80rem !important; }

  /* Payment modal: full width and smaller text */
  .modal { width: 98vw !important; padding: 14px !important; }
  .modal h3 { font-size: 1rem !important; }

  /* Topbar: tighter */
  .topbar { padding: 0 8px !important; min-height: 42px !important; }
  .topbar-title { font-size: .80rem !important; }

  /* Success modal */
  #success-modal .modal { padding: 18px 14px !important; }
}

/* ── Payment modal 2-column layout ─────────────────────────────────────────── */
.payment-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 0;
}
.payment-left {
  padding: 14px;
  border-right: 1px solid var(--border);
}
.payment-right {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  min-width: 0;
}
/* Mobile: stack to single column */
@media (max-width: 540px) {
  .payment-grid {
    grid-template-columns: 1fr;
  }
  .payment-left {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

/* ── Dashboard responsive grids (replace inline grid-template-columns) ────── */
.dash-split  { display:grid; grid-template-columns:3fr 2fr; gap:16px; align-items:start; margin-bottom:16px; }
.dash-2col   { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.dash-4col   { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.dash-health { display:grid; grid-template-columns:minmax(160px,200px) 1fr; gap:24px; align-items:center; }

@media (max-width: 768px) {
  .dash-split,
  .dash-2col   { grid-template-columns:1fr; }
  .dash-4col   { grid-template-columns:repeat(2,1fr); }
  .dash-health { grid-template-columns:1fr; gap:16px; justify-items:center; text-align:center; }
}
@media (max-width: 480px) {
  .dash-4col   { grid-template-columns:1fr; }
}

/* ── Recent transactions: compact on small screens ───────────────────────── */
#recent-txn-table .txn-date { white-space:nowrap; line-height:1.25; }
#recent-txn-table .txn-time { font-size:.72rem; color:var(--text-muted); }
@media (max-width: 600px) {
  /* Hide Cashier (3rd) and Method (4th) columns to stop edge overflow */
  #recent-txn-table th:nth-child(3), #recent-txn-table td:nth-child(3),
  #recent-txn-table th:nth-child(4), #recent-txn-table td:nth-child(4) { display:none; }
  #recent-txn-table table { min-width:0; width:100%; }
  #recent-txn-table .btn-sm { padding:5px 8px; }
}

/* Sidebar groups (Integrations / Add-ons) now render as flat, always-expanded
   sections using .nav-group-label like every other section. The accordion
   (collapse/toggle/chevron/pinned) was removed — the sidebar stays expanded and
   scrollable, and the icon-rail collapse (body.sidebar-collapsed) is unaffected. */