/* RestaurantPOS — Stylesheet */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body { overscroll-behavior: none; }

/* Scrollbar hide */
.scrollbar-hide::-webkit-scrollbar { display:none; }
.scrollbar-hide { -ms-overflow-style:none; scrollbar-width:none; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.hidden { display: none !important; }
.modal-box {
  background: #1A1D27; border: 1px solid #2A2D3E;
  border-radius: 1.5rem; padding: 1.5rem; max-height: 90dvh; overflow-y: auto;
}

/* Menu item card */
.menu-item-card {
  background: #1A1D27; border: 1px solid #2A2D3E;
  border-radius: 1rem; overflow: hidden; cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
  display: flex; flex-direction: column;
  -webkit-tap-highlight-color: transparent;
}
.menu-item-card:active { transform: scale(0.96); border-color: #6C63FF; }
.menu-item-card.sold-out { opacity: 0.4; pointer-events: none; }

.menu-item-img { width:100%; height:90px; object-fit:cover; background:#12151E; display:flex; align-items:center; justify-content:center; font-size:2rem; }
.menu-item-body { padding: 0.5rem; flex:1; display:flex; flex-direction:column; }
.menu-item-name { font-size: 0.75rem; font-weight: 600; color: #E8E9F0; line-height:1.2; margin-bottom:0.25rem; }
.menu-item-price { font-size: 0.8rem; font-weight: 700; color: #6C63FF; margin-top:auto; }
.menu-item-sold-out { font-size:0.6rem; color:#F44336; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }

/* Category tab */
.cat-tab {
  flex-shrink: 0; padding: 0.4rem 0.875rem; border-radius: 9999px;
  border: 1px solid #2A2D3E; font-size: 0.75rem; font-weight: 500;
  color: #6B7280; cursor: pointer; white-space: nowrap; transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.cat-tab.active { background: #6C63FF; border-color: #6C63FF; color: white; }
.cat-tab:active { transform: scale(0.95); }

/* Order line item */
.order-line {
  background: #12151E; border: 1px solid #2A2D3E;
  border-radius: 0.75rem; padding: 0.625rem 0.75rem;
}
.order-line-name { font-size: 0.8rem; font-weight: 600; color: #E8E9F0; }
.order-line-mod  { font-size: 0.65rem; color: #6B7280; margin-top: 0.15rem; }
.qty-btn {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid #2A2D3E;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: #E8E9F0; cursor: pointer; transition: all 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.qty-btn:active { background: #6C63FF; border-color: #6C63FF; transform: scale(0.9); }

/* Pay buttons */
.pay-btn { transition: all 0.1s; -webkit-tap-highlight-color: transparent; }
.pay-btn:active { transform: scale(0.95); }

/* Queue / KDS */
.ticket-card {
  background: #1A1D27; border: 1px solid #2A2D3E;
  border-radius: 1rem; overflow: hidden;
}
.ticket-card.status-new     { border-top: 3px solid #6C63FF; }
.ticket-card.status-in-progress { border-top: 3px solid #FFB300; }
.ticket-card.status-ready   { border-top: 3px solid #00D97E; }
.ticket-card.online-order   { border-left: 3px solid #00D97E; }

/* Status badges */
.badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.2rem 0.6rem; border-radius: 9999px;
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}
.badge-new       { background: rgba(108,99,255,0.15); color: #6C63FF; }
.badge-progress  { background: rgba(255,179,0,0.15);  color: #FFB300; }
.badge-ready     { background: rgba(0,217,126,0.15);  color: #00D97E; }
.badge-done      { background: rgba(107,114,128,0.15);color: #6B7280; }
.badge-online    { background: rgba(0,217,126,0.15);  color: #00D97E; }
.badge-phone     { background: rgba(255,179,0,0.15);  color: #FFB300; }
.badge-paid      { background: rgba(0,217,126,0.15);  color: #00D97E; }

/* Admin sidebar */
.admin-nav-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; border-radius: 0.75rem; cursor: pointer;
  font-size: 0.875rem; font-weight: 500; color: #6B7280; transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.admin-nav-item.active, .admin-nav-item:hover { background: rgba(108,99,255,0.1); color: #E8E9F0; }
.admin-nav-item.active { border-left: 3px solid #6C63FF; }

/* Stat card */
.stat-card { background: #1A1D27; border: 1px solid #2A2D3E; border-radius: 1rem; padding: 1.25rem; }

/* Toggle switch */
.toggle { position:relative; display:inline-block; width:44px; height:24px; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; inset:0; background:#2A2D3E; border-radius:24px; transition:0.3s; }
.toggle-slider:before { position:absolute; content:""; height:18px; width:18px; left:3px; bottom:3px; background:white; border-radius:50%; transition:0.3s; }
input:checked + .toggle-slider { background:#6C63FF; }
input:checked + .toggle-slider:before { transform:translateX(20px); }

/* Animations */
@keyframes slideInRight { from { transform: translateX(100%); opacity:0; } to { transform: translateX(0); opacity:1; } }
@keyframes pulse-ring { 0% { transform:scale(1); opacity:1; } 100% { transform:scale(1.5); opacity:0; } }
.slide-in { animation: slideInRight 0.2s ease-out; }
.pulse-ring::before { content:''; position:absolute; inset:0; border-radius:inherit; animation: pulse-ring 1.5s ease-out infinite; border: 2px solid #6C63FF; }

/* Print styles */
@media print {
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block !important; font-family: 'Courier New', monospace; font-size: 12px; }
}