/* ==========================================================
   BITEFLOW POS & CRM — POS Billing Styles
   ========================================================== */

/* ── POS Layout ────────────────────────────────────────── */
.pos-layout{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:var(--space-lg);
  height:calc(100vh - var(--topbar-height) - var(--space-xl) * 2 - 20px);
}
@media(max-width:1200px){
  .pos-layout{
    grid-template-columns:1fr;
    height:auto;
  }
}

.pos-main{
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
  overflow:hidden;
}
.pos-sidebar{
  display:flex;
  flex-direction:column;
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}

/* ── Mode Selection Header ─────────────────────────────── */
.pos-modes{
  display:flex;
  background:var(--bg-tertiary);
  padding:4px;
  border-radius:var(--radius-md);
  gap:2px;
}
.pos-mode-btn{
  flex:1;
  padding:8px;
  text-align:center;
  font-size:0.75rem;
  font-weight:700;
  border-radius:var(--radius-sm);
  color:var(--text-secondary);
  transition:all var(--transition-fast);
}
.pos-mode-btn.active{
  background:var(--accent);
  color:var(--text-inverse);
}

/* ── POS Table Grid ────────────────────────────────────── */
.table-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:var(--space-md);
  overflow-y:auto;
  padding:var(--space-xs);
}
.table-card{
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--space-md);
  text-align:center;
  cursor:pointer;
  transition:all var(--transition-fast);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-xs);
  position:relative;
}
.table-card:hover{
  border-color:var(--accent);
  transform:translateY(-1px);
}
.table-card-number{
  font-family:'Outfit',sans-serif;
  font-size:1.5rem;
  font-weight:800;
  color:var(--text-primary);
}
.table-card-capacity{
  font-size:0.65rem;
  color:var(--text-tertiary);
}
.table-card-status{
  font-size:0.7rem;
  font-weight:700;
  padding:2px 8px;
  border-radius:var(--radius-full);
}
/* Table States */
.table-card.vacant .table-card-status{background:var(--bg-tertiary);color:var(--text-secondary)}
.table-card.dining{border-color:var(--success)}
.table-card.dining .table-card-status{background:var(--success-bg);color:var(--success)}
.table-card.billed{border-color:var(--warning)}
.table-card.billed .table-card-status{background:var(--warning-bg);color:var(--warning)}
.table-card.dirty{border-color:var(--danger)}
.table-card.dirty .table-card-status{background:var(--danger-bg);color:var(--danger)}

.table-card-amount{
  font-size:0.8125rem;
  font-weight:600;
  color:var(--text-primary);
}
.table-card-time{
  font-size:0.65rem;
  color:var(--text-tertiary);
}

/* ── Menu Section ──────────────────────────────────────── */
.menu-browser{
  display:flex;
  flex-direction:column;
  flex:1;
  overflow:hidden;
}
.menu-categories{
  display:flex;
  gap:var(--space-sm);
  overflow-x:auto;
  padding-bottom:var(--space-sm);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.menu-cat-btn{
  padding:6px 16px;
  border-radius:var(--radius-full);
  background:var(--bg-secondary);
  border:1px solid var(--border);
  font-size:0.75rem;
  font-weight:600;
  color:var(--text-secondary);
  white-space:nowrap;
  transition:all var(--transition-fast);
}
.menu-cat-btn:hover{
  border-color:var(--accent);
  color:var(--text-primary);
}
.menu-cat-btn.active{
  background:var(--accent-muted);
  color:var(--accent);
  border-color:var(--accent);
}

.menu-items-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:var(--space-md);
  overflow-y:auto;
  padding:var(--space-sm) var(--space-xs);
  flex:1;
}
.menu-item-card{
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-md);
  cursor:pointer;
  transition:all var(--transition-fast);
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
  position:relative;
}
.menu-item-card:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.menu-item-tag{
  position:absolute;
  top:8px;right:8px;
  font-size:10px;
  font-weight:700;
  padding:1px 5px;
  border-radius:var(--radius-xs);
}
.menu-item-tag.veg{color:#22c55e;background:rgba(34,197,94,0.1)}
.menu-item-tag.nonveg{color:#ef4444;background:rgba(239,68,68,0.1)}

.menu-item-name{
  font-size:0.875rem;
  font-weight:700;
  color:var(--text-primary);
  margin-top:var(--space-xs);
  line-height:1.3;
}
.menu-item-desc{
  font-size:0.7rem;
  color:var(--text-tertiary);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.4;
  height:2.8em;
}
.menu-item-footer{
  display:flex;
  justify-content:between;
  align-items:center;
  margin-top:auto;
  padding-top:var(--space-xs);
}
.menu-item-price{
  font-size:0.875rem;
  font-weight:700;
  color:var(--accent);
}

/* ── Cart Sidebar ──────────────────────────────────────── */
.cart-header{
  padding:var(--space-md) var(--space-lg);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.cart-title{
  font-size:0.875rem;
  font-weight:700;
}
.cart-body{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
}
.cart-items-list{
  display:flex;
  flex-direction:column;
}
.cart-item{
  padding:var(--space-md) var(--space-lg);
  border-bottom:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
}
.cart-item-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--space-sm);
}
.cart-item-name{
  font-size:0.8125rem;
  font-weight:600;
  color:var(--text-primary);
}
.cart-item-price{
  font-size:0.8125rem;
  font-weight:700;
  color:var(--text-primary);
}
.cart-item-modifiers{
  font-size:0.7rem;
  color:var(--text-tertiary);
  padding-left:var(--space-xs);
}
.cart-item-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.cart-item-qty{
  display:flex;
  align-items:center;
  gap:var(--space-xs);
  background:var(--bg-tertiary);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:2px;
}
.cart-qty-btn{
  width:24px;height:24px;
  border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;
  color:var(--text-secondary);
}
.cart-qty-btn:hover{
  background:var(--bg-hover);
  color:var(--text-primary);
}
.cart-qty-val{
  font-size:0.75rem;
  font-weight:700;
  width:20px;
  text-align:center;
}

/* ── Cart Summary & Billing ────────────────────────────── */
.cart-summary{
  background:var(--bg-tertiary);
  border-top:1px solid var(--border);
  padding:var(--space-md) var(--space-lg);
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
}
.summary-row{
  display:flex;
  justify-content:space-between;
  font-size:0.75rem;
  color:var(--text-secondary);
}
.summary-row.total{
  font-size:1rem;
  font-weight:800;
  color:var(--text-primary);
  border-top:1px dashed var(--border);
  padding-top:var(--space-sm);
  margin-top:var(--space-xs);
}

.cart-actions{
  padding:var(--space-md) var(--space-lg);
  border-top:1px solid var(--border);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-sm);
}
.cart-actions .btn-pay{
  grid-column:span 2;
  font-size:0.875rem;
  padding:12px;
}

/* ── Modifiers Modal ───────────────────────────────────── */
.modifier-group{
  margin-bottom:var(--space-lg);
}
.modifier-group-title{
  font-size:0.75rem;
  font-weight:700;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:var(--space-sm);
}
.modifier-options{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-sm);
}
.modifier-btn{
  padding:6px 12px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--bg-tertiary);
  font-size:0.75rem;
  font-weight:600;
  color:var(--text-secondary);
  cursor:pointer;
  transition:all var(--transition-fast);
}
.modifier-btn:hover{
  border-color:var(--accent);
  color:var(--text-primary);
}
.modifier-btn.selected{
  background:var(--accent-muted);
  color:var(--accent);
  border-color:var(--accent);
}

/* ── Active KOT Display ────────────────────────────────── */
.kot-board{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--space-xl);
}
.kot-ticket{
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-md);
}
.kot-ticket.preparing{border-top:3px solid var(--warning)}
.kot-ticket.ready{border-top:3px solid var(--success)}

.kot-ticket-header{
  padding:var(--space-md);
  background:var(--bg-tertiary);
  border-bottom:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.kot-ticket-title{
  font-size:0.875rem;
  font-weight:700;
}
.kot-ticket-time{
  font-size:0.7rem;
  color:var(--text-secondary);
}
.kot-ticket-body{
  padding:var(--space-md);
  flex:1;
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
}
.kot-ticket-item{
  display:flex;
  justify-content:space-between;
  font-size:0.8125rem;
}
.kot-ticket-item-qty{
  font-weight:700;
  color:var(--accent);
  margin-right:var(--space-sm);
}
.kot-ticket-item-modifiers{
  font-size:0.7rem;
  color:var(--text-tertiary);
  padding-left:var(--space-md);
}
.kot-ticket-footer{
  padding:var(--space-md);
  border-top:1px solid var(--border);
  display:flex;
  justify-content:flex-end;
  gap:var(--space-sm);
  background:var(--bg-tertiary);
}