/* ==========================================================================
   POS Lite — Material Design system
   ========================================================================== */
:root{
  /* Material color tokens */
  --md-primary:#4f6bff;
  --md-primary-dark:#3a52e0;
  --md-primary-container:#e8ecff;
  --md-on-primary:#ffffff;
  --md-secondary:#00b894;
  --md-error:#e53935;
  --md-error-container:#fdecea;
  --md-surface:#ffffff;
  --md-surface-alt:#f6f7fb;
  --md-bg:#eef0f6;
  --md-outline:#e2e5ee;
  --md-on-surface:#1c1f27;
  --md-on-surface-variant:#6b7280;

  --primary:var(--md-primary); --primary-dark:var(--md-primary-dark);
  --bg:var(--md-bg); --card:var(--md-surface);
  --text:var(--md-on-surface); --muted:var(--md-on-surface-variant);
  --border:var(--md-outline); --danger:var(--md-error); --success:var(--md-secondary);
  --sidebar-w:224px; --radius:14px; --radius-sm:10px;

  --elev-1:0 1px 2px rgba(16,24,64,.06), 0 1px 3px rgba(16,24,64,.08);
  --elev-2:0 2px 6px rgba(16,24,64,.08), 0 4px 12px rgba(16,24,64,.06);
  --elev-3:0 6px 16px rgba(16,24,64,.12), 0 2px 4px rgba(16,24,64,.08);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Roboto','Segoe UI',Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:500;letter-spacing:.1px;}
a{color:var(--primary);text-decoration:none;}
.material-symbols-rounded{
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  vertical-align:middle;font-size:20px;line-height:1;
}
.layout{display:flex;min-height:100vh;}

/* ---- Sidebar ---- */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;
  background:linear-gradient(180deg,#1a1f36 0%,#12162a 100%);color:#cbd0e6;
  padding-bottom:12px;
}
.sidebar .brand{
  padding:22px 20px 18px;font-weight:700;font-size:17px;color:#fff;
  display:flex;align-items:center;gap:10px;letter-spacing:.2px;
}
.sidebar .brand .material-symbols-rounded{font-size:24px;color:var(--md-primary);}
.sidebar nav{padding:8px 10px;}
.sidebar nav a{
  display:flex;align-items:center;gap:12px;padding:10px 14px;margin:2px 0;
  color:#aeb4d1;font-size:13.5px;border-radius:24px;transition:background .15s,color .15s;
}
.sidebar nav a .material-symbols-rounded{font-size:19px;opacity:.9;}
.sidebar nav a:hover{background:rgba(255,255,255,.06);color:#fff;}
.sidebar nav a.active{background:var(--md-primary);color:#fff;box-shadow:var(--elev-1);}
.sidebar nav a.logout{margin-top:10px;border-top:1px solid rgba(255,255,255,.08);border-radius:0;padding-top:16px;}

/* ---- Main / topbar ---- */
.main{flex:1;min-width:0;}
.topbar{
  background:var(--card);padding:14px 24px;display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5;box-shadow:var(--elev-1);
}
.topbar strong{font-size:16px;font-weight:500;}
.topbar .user{
  font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;
  background:var(--md-surface-alt);padding:6px 12px;border-radius:20px;
}
.content{padding:24px;}

/* ---- Cards / surfaces ---- */
.card{
  background:var(--card);border-radius:var(--radius);border:1px solid var(--border);
  padding:20px;margin-bottom:18px;box-shadow:var(--elev-1);transition:box-shadow .15s;
}
.card h2,.card h3{margin-top:0;color:var(--text);}
.card h3{font-size:15px;font-weight:600;margin-bottom:14px;}

table{width:100%;border-collapse:collapse;font-size:13.5px;}
table th,table td{padding:11px 12px;border-bottom:1px solid var(--border);text-align:left;}
table th{background:var(--md-surface-alt);font-weight:600;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.4px;}
table tr:last-child td{border-bottom:none;}
table tr:hover td{background:rgba(79,107,255,.03);}
.table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border);}
.table-wrap table{border:none;}
.table-wrap th:first-child,.table-wrap td:first-child{padding-left:16px;}

/* ---- Forms ---- */
label{display:block;font-size:12.5px;margin-bottom:5px;color:var(--muted);font-weight:500;}
input[type=text],input[type=number],input[type=password],input[type=search],
input[type=tel],input[type=date],select,textarea{
  width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:14px;background:var(--md-surface-alt);color:var(--text);
  transition:border-color .15s,background .15s;font-family:inherit;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--primary);background:#fff;
  box-shadow:0 0 0 3px rgba(79,107,255,.12);
}
.form-group{margin-bottom:14px;}
.form-row{display:flex;gap:14px;flex-wrap:wrap;}
.form-row > *{flex:1;min-width:120px;}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:24px;
  border:1.5px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;
  font-size:13.5px;font-weight:500;transition:box-shadow .15s,background .15s,transform .05s;
}
.btn:hover{background:var(--md-surface-alt);box-shadow:var(--elev-1);}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:var(--elev-1);}
.btn-primary:hover{background:var(--primary-dark);box-shadow:var(--elev-2);}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff;}
.btn-danger:hover{filter:brightness(.93);}
.btn-sm{padding:6px 12px;font-size:12.5px;}
.btn-block{width:100%;justify-content:center;}

/* ---- Alerts ---- */
.alert{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:13.5px;display:flex;align-items:center;gap:8px;}
.alert-success{background:#e6f7f0;color:#0b6e4f;}
.alert-danger{background:var(--md-error-container);color:#b3261e;}

/* ---- Login / install ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:
  radial-gradient(circle at 20% 20%, #eef1ff 0%, var(--bg) 55%);}
.login-box{background:#fff;padding:36px 32px;border-radius:20px;width:340px;box-shadow:var(--elev-3);border:1px solid var(--border);}
.login-box .lockup{display:flex;flex-direction:column;align-items:center;margin-bottom:18px;}
.login-box .lockup .material-symbols-rounded{
  font-size:38px;color:#fff;background:var(--primary);padding:14px;border-radius:16px;box-shadow:var(--elev-2);
}
.login-box h1{font-size:18px;margin:14px 0 2px;text-align:center;font-weight:600;}
.login-box p.sub{text-align:center;color:var(--muted);font-size:12.5px;margin:0 0 18px;}

/* ---- Badges ---- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.2px;}
.badge-green{background:#e6f7f0;color:#0b6e4f;}
.badge-red{background:var(--md-error-container);color:#b3261e;}
.badge-gray{background:var(--md-surface-alt);color:#4b5563;}

/* ---- Dashboard stat cards ---- */
.stat-card{position:relative;overflow:hidden;}
.stat-card .stat-icon{
  position:absolute;right:14px;top:14px;font-size:34px;opacity:.14;
}
.stat-card .stat-label{color:var(--muted);font-size:12.5px;font-weight:500;}
.stat-card .stat-value{font-size:26px;font-weight:700;margin-top:4px;letter-spacing:-.3px;}

/* ---- POS screen ----
   Single centered column: search bar up top, an optional collapsed
   "Browse Products" section (closed by default — search/scan is the
   primary flow, so nothing forces you to scroll past a product grid
   to reach the cart), then the cart itself, wide and front-and-center.
   Nothing in here has its own inner scrollbar — only the page scrolls,
   so there's never more than one scrollbar on screen at once. */
.pos-center{max-width:1000px;margin:0 auto;}

.pos-search{margin-bottom:14px;position:relative;}
.pos-search .material-symbols-rounded{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);}
.pos-search input{font-size:16px;padding:14px 14px 14px 42px;border-radius:var(--radius);box-shadow:var(--elev-1);}

.pos-browse{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--elev-1);margin-bottom:16px;overflow:hidden;
}
.pos-browse summary{
  cursor:pointer;padding:14px 18px;font-weight:600;font-size:13.5px;color:var(--text);
  list-style:none;display:flex;align-items:center;gap:8px;user-select:none;
}
.pos-browse summary::-webkit-details-marker{display:none;}
.pos-browse summary::before{
  content:'chevron_right';font-family:'Material Symbols Rounded';font-size:20px;color:var(--muted);
  transition:transform .15s;
}
.pos-browse[open] summary::before{transform:rotate(90deg);}
.pos-browse[open] summary{border-bottom:1px solid var(--border);}
.pos-browse-body{padding:16px 18px;}
.pos-filterbar{display:flex;gap:10px;margin-bottom:12px;}
.pos-filterbar select{max-width:260px;}

.product-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;
  align-content:start;
}
.product-grid-placeholder{
  grid-column:1/-1;color:var(--muted);text-align:center;padding:40px 16px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.product-grid-placeholder .material-symbols-rounded{font-size:36px;opacity:.25;}
.product-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;
  cursor:pointer;text-align:center;user-select:none;box-shadow:var(--elev-1);
  transition:box-shadow .12s,transform .08s,border-color .12s;
  position:relative;z-index:1;
}
.product-card:hover{border-color:var(--primary);box-shadow:var(--elev-2);transform:translateY(-1px);}
.product-card:active{transform:scale(.97);}
.product-card .pname{font-size:12.5px;font-weight:600;line-height:1.3;height:32px;overflow:hidden;pointer-events:none;}
.product-card .pprice{color:var(--primary);font-weight:700;font-size:13.5px;margin-top:6px;pointer-events:none;}
.product-card .pstock{font-size:11px;color:var(--muted);margin-top:2px;pointer-events:none;}

.cart-wide{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--elev-2);
}
.cart-header{
  padding:16px 18px;border-bottom:1px solid var(--border);font-weight:600;font-size:15px;
  display:flex;align-items:center;gap:8px;background:var(--md-surface-alt);
  border-radius:var(--radius) var(--radius) 0 0;
}
.cart-items{padding:6px 18px;min-height:120px;}
.cart-row{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px dashed var(--border);}
.cart-row .cname{flex:1;font-size:13px;}
.cart-row .cqty{width:58px;padding:6px 8px;}
.cart-row .cprice{width:76px;text-align:right;font-size:13px;font-weight:600;}
.cart-row .cremove{
  color:var(--danger);cursor:pointer;font-weight:700;padding:2px 6px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:background .12s;
}
.cart-row .cremove:hover{background:var(--md-error-container);}
.cart-summary{padding:14px 18px;border-top:1px solid var(--border);background:var(--md-surface-alt);}
.cart-summary .row{display:flex;justify-content:space-between;padding:4px 0;font-size:13.5px;color:var(--muted);}
.cart-summary .grand{font-size:19px;font-weight:800;border-top:1px solid var(--border);margin-top:8px;padding-top:10px;color:var(--text);}
.cart-footer{padding:16px 18px;border-radius:0 0 var(--radius) var(--radius);}
.cart-footer .btn{border-radius:var(--radius-sm);}

/* ---- Barcode/name quick-search suggestion dropdown (POS + Purchases) ---- */
.search-suggest-wrap{position:relative;}
.search-suggest-list{
  position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-sm);box-shadow:var(--elev-3);max-height:280px;overflow-y:auto;
  z-index:20;margin-top:4px;display:none;
}
.search-suggest-list.open{display:block;}
.search-suggest-item{padding:10px 14px;cursor:pointer;font-size:13.5px;display:flex;justify-content:space-between;gap:10px;}
.search-suggest-item:hover,.search-suggest-item.active{background:var(--md-primary-container);}
.search-suggest-item .ssi-name{font-weight:500;}
.search-suggest-item .ssi-meta{color:var(--muted);font-size:11.5px;white-space:nowrap;}
.search-suggest-empty{padding:14px;color:var(--muted);font-size:13px;text-align:center;}

/* ---- Fullscreen / kiosk mode for the POS screen ----
   Toggled by pos.js. Hides our own sidebar+topbar chrome (in addition to
   the browser's own fullscreen mode hiding tabs/toolbar), so the POS
   screen — search, product grid, and cart — uses the entire monitor. */
body.pos-kiosk .sidebar,
body.pos-kiosk .topbar { display: none !important; }
body.pos-kiosk .content { padding: 14px 20px; }

/* Print invoice */
@media print{ .no-print{display:none !important;} body{background:#fff;} }
.invoice-box{max-width:320px;margin:0 auto;font-family:'Courier New',monospace;font-size:12px;}
.invoice-box table{font-size:11.5px;}
.invoice-box .center{text-align:center;}
.invoice-box hr{border:none;border-top:1px dashed #000;}