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

:root{
  --primary:#ff5722;
  --primary-dark:#e64a19;
  --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);
}

/* FIX: 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);}

/* ---------- 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;
  /* UI: tactile press feedback */
  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;
}
/* UI: cart row hover highlight */
.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;}

.payment-methods{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0;}
/* UI: pay-btn uses surface color so unselected state has better contrast */
.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;}
.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;}
.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);}

/* ---------- 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;}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .main-layout{grid-template-columns:80px 1fr; grid-template-rows:auto auto;}
  /* UI: slightly more cart height on tablet */
  .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;}
  .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;}
  /* FIX: on mobile, toast at top so it doesn't cover Complete Sale button */
  .toast { bottom: auto; top: 70px; }
}

/* Print styles - only receipt visible when printing */
@media print{
  body *{visibility:hidden;}
  .receipt-content, .receipt-content *{visibility:visible;}
  .receipt-content{position:absolute; left:0; top:0; width:100%;}
}