/* style.css - QuickPOS Modern Material-inspired styling
   Mobile-first, touch friendly, minimal animation, dark mode support via [data-theme="dark"]
*/

:root{
  --primary:#45ac81;
  --primary-dark:#349066;
  --bg:#f4f5f7;
  --surface:#ffffff;
  --text:#1a1a1a;
  --text-muted:#6b6b6b;
  --border:#e0e0e0;
  --success:#2e7d32;
  --danger:#c62828;
  --radius:14px;
  --shadow:0 2px 6px rgba(0,0,0,0.08);
}

[data-theme="dark"]{
  --bg:#121212;
  --surface:#1e1e1e;
  --text:#f0f0f0;
  --text-muted:#a0a0a0;
  --border:#333333;
  --shadow:0 2px 6px rgba(0,0,0,0.4);
}

/* Dark mode overrides for elements with hardcoded colors */
[data-theme="dark"] .receipt-content {
  background: #1e1e1e;
  color: #f0f0f0;
}
[data-theme="dark"] .qty-badge {
  background: #444;
  color: #fff;
}
[data-theme="dark"] .topbar {
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .search-box {
  background: #2a2a2a;
  border-color: #444;
}
[data-theme="dark"] .cart-note input,
[data-theme="dark"] .total-line input {
  background: #2a2a2a;
  border-color: #444;
}
[data-theme="dark"] .modal-box input,
[data-theme="dark"] .modal-box select {
  background: #2a2a2a;
  border-color: #444;
  color: var(--text);
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; font-family:'Segoe UI',Roboto,Arial,sans-serif; background:var(--bg); color:var(--text);}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
input{font-family:inherit;}

/* ---------- TOP BAR ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--surface); padding:8px 14px; box-shadow:var(--shadow);
  gap:10px; flex-wrap:wrap; position:sticky; top:0; z-index:50;
}
.topbar-left{display:flex; align-items:center; gap:10px;}
.logo{width:42px; height:42px; border-radius:10px; object-fit:cover;}
.rest-info{display:flex; flex-direction:column; line-height:1.2;}
.rest-name{font-weight:700; font-size:15px;}
.receipt-no{font-size:12px; color:var(--text-muted);}
.topbar-center{flex:1; min-width:180px; max-width:420px;}
.search-box{width:100%; padding:10px 14px; border-radius:20px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:15px;}
.topbar-right{display:flex; align-items:center; gap:8px;}
.clock-date,.clock-time{font-size:13px; color:var(--text-muted); white-space:nowrap;}
.icon-btn{font-size:20px; padding:6px 8px; border-radius:10px;}
.icon-btn:active{background:var(--bg);}

/* Remote menu management: Refresh Menu button (no PIN, visible to all staff) */
.refresh-menu-btn {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.refresh-menu-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.menu-sync-label {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .menu-sync-label { display: none; }
  .refresh-menu-btn { font-size: 11px; padding: 5px 7px; }
}

/* ---------- ONLINE / OFFLINE STATUS PILL ---------- */
/* Enhancement: Visual connection status badge in the topbar. */
.online-status {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  cursor: default;
  letter-spacing: 0.02em;
}
.online-status.online  { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.online-status.offline { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
[data-theme="dark"] .online-status.online  { background: #1b3a1e; color: #81c784; border-color: #388e3c; }
[data-theme="dark"] .online-status.offline { background: #3e1010; color: #ef9a9a; border-color: #c62828; }

/* ---------- MAIN LAYOUT ---------- */
.main-layout{display:grid; grid-template-columns:110px 1fr 340px; gap:10px; padding:10px; height:calc(100vh - 60px);}

/* ---------- CATEGORY BAR ---------- */
.category-bar{display:flex; flex-direction:column; gap:8px; overflow-y:auto;}
.cat-btn{
  background:var(--surface); border-radius:var(--radius); padding:14px 6px; text-align:center;
  font-weight:600; font-size:13px; box-shadow:var(--shadow); min-height:64px;
  display:flex; align-items:center; justify-content:center;
}
.cat-btn.active{background:var(--primary); color:#fff;}

/* ---------- PRODUCT AREA ---------- */
.product-area{overflow-y:auto; padding-right:4px;}
.section-label{font-size:14px; font-weight:700; color:var(--text-muted); margin-bottom:8px; text-transform:uppercase;}
.product-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px;}
.prod-btn{
  position:relative; border-radius:var(--radius); padding:16px 10px; min-height:88px;
  color:#fff; font-weight:700; font-size:15px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
  transition: transform 0.1s, box-shadow 0.1s;
}
.prod-btn:active { transform: scale(0.96); box-shadow: none; }
.prod-btn .price{font-size:13px; font-weight:600; opacity:0.95;}
.prod-btn .qty-badge{
  position:absolute; top:-6px; right:-6px; background:#fff; color:#000; border-radius:50%;
  width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800;
  box-shadow:var(--shadow);
}

/* ---------- CART PANEL ---------- */
.cart-panel{
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  display:flex; flex-direction:column; padding:12px; overflow-y:auto;
}
.cart-header{display:flex; justify-content:space-between; align-items:center; font-weight:700; margin-bottom:8px;}
.text-btn{color:var(--danger); font-size:13px; font-weight:600;}
.cart-list{flex:1; overflow-y:auto; min-height:80px;}
.cart-empty{color:var(--text-muted); font-size:13px; text-align:center; padding:20px 0;}
.cart-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 4px; border-bottom:1px solid var(--border); gap:6px;
  border-radius:6px; transition: background 0.15s;
}
.cart-item:hover { background: var(--bg); }
.cart-item-info{flex:1; min-width:0;}
.cart-item-name{font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cart-item-sub{font-size:12px; color:var(--text-muted);}
.qty-controls{display:flex; align-items:center; gap:6px;}
.qty-btn{width:28px; height:28px; border-radius:8px; background:var(--bg); font-weight:800; font-size:16px;}
.qty-num{min-width:22px; text-align:center; font-weight:700;}
.del-btn{color:var(--danger); font-size:18px; padding:4px 6px;}

.cart-note{margin:8px 0;}
.cart-note input{width:100%; padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:13px;}

.discount-row{display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; align-items:center;}
.disc-label{font-size:12px; color:var(--text-muted); width:100%;}
.disc-btn{background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:6px 10px; font-size:12px; font-weight:700;}
.disc-btn.active{background:var(--primary); color:#fff; border-color:var(--primary);}

.cart-totals{border-top:1px solid var(--border); padding-top:8px; font-size:14px;}
.total-line{display:flex; justify-content:space-between; align-items:center; padding:4px 0;}
.total-line.grand{font-size:18px; font-weight:800; color:var(--primary);}
.total-line.balance{font-weight:700;}
.total-line input{width:110px; padding:6px 8px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text); text-align:right;}

/* ---------- FAST CASH PRESET BUTTONS ---------- */
/* Enhancement: Quick cash amount buttons that appear when Cash payment is selected. */
.cash-presets {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  margin: 4px 0 2px;
}
.cash-preset-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  transition: background 0.1s;
}
.cash-preset-btn:active { background: var(--primary); color: #fff; }

.payment-methods{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0;}
.pay-btn{background:var(--surface); border:2px solid var(--border); border-radius:12px; padding:12px 6px; font-weight:700; font-size:14px; color:var(--text);}
.pay-btn.selected{background:var(--primary); color:#fff; border-color:var(--primary);}

.complete-sale-btn{
  background:var(--success); color:#fff; padding:16px; border-radius:var(--radius);
  font-size:17px; font-weight:800; width:100%;
}
.complete-sale-btn:disabled{background:#9e9e9e; opacity:0.6;}

/* ---------- MODALS ---------- */
.modal{position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:100; padding:14px;}
.modal.hidden{display:none;}
.modal-box{background:var(--surface); border-radius:var(--radius); padding:20px; max-width:480px; width:100%; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow);}
.modal-box h3{margin-bottom:12px;}
.modal-box input, .modal-box select{width:100%; padding:10px; margin:6px 0; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:14px;}
.modal-actions{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}
.btn-primary{background:var(--primary); color:#fff; padding:10px 16px; border-radius:10px; font-weight:700;}
.btn-secondary{background:var(--bg); border:1px solid var(--border); color:var(--text); padding:10px 16px; border-radius:10px; font-weight:700;}
.error-text{color:var(--danger); font-size:13px; margin-top:6px;}

/* ---------- RECEIPT ---------- */
.receipt-box{max-width:380px;}
.receipt-content{font-family:'Courier New',monospace; font-size:13px; line-height:1.5; white-space:pre-wrap; color:#000; background:#fff; padding:10px;}

/* ---------- SETTINGS ---------- */
.settings-box{max-width:560px;}
/* Header row: title on left, session info on right */
.settings-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 4px;
}
.settings-modal-header h3 { margin-bottom: 0; }
/* Session info: subtle green "Logged in until XX:XX" indicator */
.session-info {
  font-size: 12px;
  color: var(--success);
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: 8px;
  padding: 3px 10px;
  font-weight: 600;
  align-self: center;
}
[data-theme="dark"] .session-info { background: #1b3a1e; border-color: #388e3c; color: #81c784; }
.settings-tabs{display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap;}
.tab-btn{background:var(--bg); border-radius:10px; padding:8px 12px; font-size:13px; font-weight:700;}
.tab-btn.active{background:var(--primary); color:#fff;}
/* Lock button: sits in the tab bar but styled distinctly in red */
.lock-btn { background: #ffebee !important; color: var(--danger) !important; border: 1px solid #ef9a9a; margin-left: auto; }
.lock-btn:hover { background: #ffcdd2 !important; }
[data-theme="dark"] .lock-btn { background: #3e1010 !important; border-color: #c62828; color: #ef9a9a !important; }
.tab-content label{display:block; font-size:12px; color:var(--text-muted); margin-top:8px;}
.tab-content.hidden{display:none;}
.add-row{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; align-items:center;}
.add-row input, .add-row select{flex:1; min-width:100px;}
.fav-check{font-size:12px; display:flex; align-items:center; gap:4px;}
.admin-row{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); gap:6px;}
.admin-row .actions button{font-size:12px; margin-left:4px; padding:6px 8px; border-radius:8px; background:var(--bg);}

/* ---------- CLOUD SYNC ROW (Integration tab) ---------- */
.sync-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.sync-row button { flex: 1; min-width: 140px; }

/* ---------- HISTORY ---------- */
.history-box{max-width:560px;}
.history-list{max-height:400px; overflow-y:auto; margin:10px 0;}
.history-row{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px;}
.history-row button{background:var(--bg); border-radius:8px; padding:4px 8px; font-size:12px;}

/* ---------- TOAST ---------- */
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:#323232; color:#fff; padding:12px 20px; border-radius:10px; font-size:14px;
  z-index:200; box-shadow:var(--shadow);
}
.toast.hidden{display:none;}

/* ---------- UTILITY ---------- */
.hidden { display: none !important; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .main-layout{grid-template-columns:80px 1fr; grid-template-rows:auto auto;}
  .cart-panel{grid-column:1/3; max-height:52vh;}
}
@media (max-width:600px){
  .topbar{flex-wrap:wrap;}
  .topbar-center{order:3; width:100%;}
  .clock-date,.clock-time{display:none;}
  .online-status { font-size: 11px; padding: 3px 7px; }
  .main-layout{grid-template-columns:64px 1fr; padding:6px; gap:6px;}
  .cat-btn{font-size:11px; min-height:52px;}
  .prod-btn{min-height:76px; font-size:13px;}
  /* On mobile, toast at top so it doesn't cover Complete Sale button */
  .toast { bottom: auto; top: 70px; }
}

/* ---------- PRINT STYLES ---------- */
/* Enhancement: Thermal print optimization — clean 72mm receipt layout.
   @page removes browser print margins so the receipt fills the paper exactly. */
@media print{
  @page { margin: 0; size: auto; }
  body *{visibility:hidden;}
  .receipt-content, .receipt-content *{visibility:visible;}
  .receipt-content{
    position:absolute; left:0; top:0;
    width: 72mm;      /* standard 80mm thermal roll, 4mm margins each side */
    margin: 0 auto;
    font-size: 11px;  /* slightly smaller for 58mm printers — adjust to 9px if needed */
    line-height: 1.4;
    color: #000 !important;
    background: #fff !important;
  }
}