:root {
  --bg: #0f172a; --panel: #1e293b; --card: #334155; --text: #f8fafc;
  --text-muted: #94a3b8; --border: #475569; --primary: #10b981;
  --primary-hover: #059669; --accent: #3b82f6; --danger: #ef4444;
  --warning: #f59e0b; --radius: 12px;
}
[data-theme="midnight"] { --bg: #090d16; --panel: #111827; --card: #1f2937; --primary: #6366f1; }
[data-theme="crimson"] { --bg: #18080a; --panel: #2a0f12; --card: #3d171b; --primary: #e11d48; }
[data-theme="cyberpunk"] { --bg: #050505; --panel: #121212; --card: #1a1a1a; --primary: #00ffcc; --text: #00ffcc; }
[data-theme="nordic"] { --bg: #2e3440; --panel: #3b4252; --card: #434c5e; --primary: #88c0d0; }
[data-theme="light"] { --bg: #f1f5f9; --panel: #ffffff; --card: #f8fafc; --text: #0f172a; --text-muted: #64748b; --border: #cbd5e1; --primary: #059669; }

* { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; -webkit-tap-highlight-color: transparent; }
body { background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; padding-bottom: 75px; }

nav { background: var(--panel); border-top: 1px solid var(--border); position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; padding: 8px 4px; z-index: 1000; box-shadow: 0 -4px 12px rgba(0,0,0,0.3); }
.nav-btn { background: transparent; border: none; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.65rem; font-weight: 600; cursor: pointer; flex: 1; padding: 4px; transition: color 0.2s; position: relative; text-decoration: none; }
.nav-btn.active { color: var(--primary); }
.nav-btn svg { width: 20px; height: 20px; fill: currentColor; }
.nav-badge { position: absolute; top: 2px; right: 15%; background: var(--danger); color: #fff; font-size: 0.6rem; padding: 1px 5px; border-radius: 10px; font-weight: 700; display: none; }

header { background: var(--panel); border-bottom: 1px solid var(--border); padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; flex-wrap: wrap; gap: 8px; }
.logo-btn { background: transparent; border: none; cursor: pointer; text-decoration: none; font-size: 1.15rem; font-weight: 800; color: var(--primary); display: flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 8px; transition: background-color 0.2s; }

.stream-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; background: rgba(16, 185, 129, 0.15); color: var(--primary); padding: 3px 6px; border-radius: 20px; border: 1px solid var(--primary); }
.dot { width: 6px; height: 6px; background: var(--primary); border-radius: 50%; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.3; } }

.clean-slug-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(59, 130, 246, 0.12); border: 1px solid var(--accent); color: var(--accent); padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; font-weight: 700; font-family: monospace; letter-spacing: 0.3px; }

main { flex: 1; padding: 16px; max-width: 1200px; margin: 0 auto; width: 100%; }
.panel-view { display: block; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; position: relative; }
.card img { width: 100%; height: 130px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; background: var(--bg); border: 1px solid var(--border); }

#customer-menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 600px) { #customer-menu { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } }
#customer-menu .card { padding: 10px; display: flex; flex-direction: column; }
#customer-menu .card img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }

.sales-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.sales-card { background: var(--card); border-radius: var(--radius); padding: 10px; border-left: 4px solid var(--primary); }
.sales-card.cash { border-color: #10b981; }
.sales-card.bkash { border-color: #e2136e; }
.sales-card.nagad { border-color: #f7921e; }
.sales-card.card-pay { border-color: #3b82f6; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.85rem; }
th { color: var(--primary); font-weight: 700; background: var(--bg); }

.offer-badge { position: absolute; top: 14px; right: 14px; background: var(--danger); color: #fff; font-size: 0.6rem; padding: 2px 6px; border-radius: 12px; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.reorder-tag { background: #3b82f6; color: #ffffff; font-size: 0.65rem; font-weight: 800; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-left: 4px; text-transform: uppercase; }
.reorder-2-tag { background: #f59e0b; color: #000000; font-size: 0.65rem; font-weight: 800; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-left: 4px; text-transform: uppercase; }
.reorder-3-tag { background: #ef4444; color: #ffffff; font-size: 0.65rem; font-weight: 800; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-left: 4px; text-transform: uppercase; }
.general-tag { background: #10b981; color: #ffffff; font-size: 0.65rem; font-weight: 800; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-left: 4px; text-transform: uppercase; }

.filter-btn-group { display: flex; gap: 6px; margin: 10px 0; background: var(--bg); padding: 4px; border-radius: 8px; border: 1px solid var(--border); overflow-x: auto; }
.filter-btn { flex: 1; min-width: 90px; padding: 6px 10px; border: none; background: transparent; color: var(--text-muted); font-size: 0.75rem; font-weight: 700; border-radius: 6px; cursor: pointer; transition: all 0.2s; text-align: center; white-space: nowrap; }
.filter-btn.active { background: var(--panel); color: var(--text); border: 1px solid var(--border); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

.btn { background: var(--primary); color: #fff; border: none; padding: 12px 16px; border-radius: 8px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; transition: opacity 0.2s; margin-top: 8px; font-size: 0.95rem; text-decoration: none; }
.btn:active { opacity: 0.8; }
.btn-danger { background: var(--danger); }
.btn-warning { background: var(--warning); color: #000; }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
input, select, textarea { width: 100%; padding: 12px; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 8px; margin-bottom: 12px; font-size: 1rem; }

.kanban-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-top: 12px; }
.kanban-col { background: var(--panel); border-radius: var(--radius); padding: 10px; border: 1px solid var(--border); }
.kanban-header { font-weight: 700; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 2px solid var(--primary); display: flex; justify-content: space-between; }

.table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.table-card { background: var(--panel); border: 2px solid var(--border); border-radius: var(--radius); padding: 14px; text-align: left; }
.table-card.occupied { border-color: var(--danger); background: rgba(239, 68, 68, 0.1); }

/* Live Order Tracker Stepper Styles */
.tracker-step { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 4px; opacity: 0.45; transition: all 0.3s; }
.tracker-step.active { opacity: 1; border-color: var(--primary); background: rgba(16, 185, 129, 0.15); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2); }
.tracker-step.completed { opacity: 0.9; border-color: var(--accent); }
.tracker-step .step-icon { font-size: 1.2rem; margin-bottom: 2px; }
.tracker-step .step-label { font-size: 0.7rem; font-weight: 700; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); display: none; justify-content: center; align-items: flex-end; z-index: 2000; }
.modal-overlay.active { display: flex; }
.modal { background: var(--panel); border-radius: var(--radius) var(--radius) 0 0; width: 100%; max-width: 600px; padding: 20px; border: 1px solid var(--border); max-height: 85vh; overflow-y: auto; animation: slideUp 0.3s ease; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

#toast { position: fixed; bottom: 85px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; padding: 10px 20px; border-radius: 20px; font-weight: 600; display: none; z-index: 3000; box-shadow: 0 4px 12px rgba(0,0,0,0.3); font-size: 0.85rem; white-space: nowrap; }

#printable-kot, #printable-qrcodes, #printable-security-logs, #printable-attendance, #printable-expense, #printable-inventory, #printable-bazar, #printable-ledger, #printable-inventory-audit, #printable-supplier-ledger { display: none; }

@media print {
  @page { margin: 0; }
  body * { visibility: hidden; }
  .no-print { display: none !important; }

  body.thermal-58mm #printable-bill, body.thermal-58mm #printable-kot { width: 56mm !important; padding: 2mm !important; font-size: 11px !important; }
  body.thermal-80mm #printable-bill, body.thermal-80mm #printable-kot { width: 78mm !important; padding: 4mm !important; font-size: 12px !important; }

  body.print-bill #printable-bill, body.print-bill #printable-bill * { visibility: visible; }
  body.print-bill #printable-bill { position: absolute; left: 0; top: 0; width: 78mm; background: #fff; color: #000; padding: 10px; font-family: monospace; display: block !important; }

  body.print-kot #printable-kot, body.print-kot #printable-kot * { visibility: visible; }
  body.print-kot #printable-kot { position: absolute; left: 0; top: 0; width: 78mm; background: #fff; color: #000; padding: 10px; font-family: monospace; display: block !important; }

  body.print-qrcodes #printable-qrcodes, body.print-qrcodes #printable-qrcodes * { visibility: visible; }
  body.print-qrcodes #printable-qrcodes { position: absolute; left: 0; top: 0; width: 100%; background: #fff; color: #000; padding: 15px; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 15px; }

  body.print-seclog #printable-security-logs, body.print-seclog #printable-security-logs * { visibility: visible; }
  body.print-seclog #printable-security-logs { position: absolute; left: 0; top: 0; width: 100%; background: #fff; color: #000; padding: 20px; font-family: sans-serif; display: block !important; }

  body.print-attendance #printable-attendance, body.print-attendance #printable-attendance * { visibility: visible; }
  body.print-attendance #printable-attendance { position: absolute; left: 0; top: 0; width: 100%; background: #fff; color: #000; padding: 20px; font-family: sans-serif; display: block !important; }
  body.print-expense #printable-expense, body.print-expense #printable-expense * { visibility: visible; }
  body.print-expense #printable-expense { position: absolute; left: 0; top: 0; width: 100%; background: #fff; color: #000; padding: 20px; font-family: sans-serif; display: block !important; }
  body.print-inventory #printable-inventory, body.print-inventory #printable-inventory * { visibility: visible; }
  body.print-inventory #printable-inventory { position: absolute; left: 0; top: 0; width: 100%; background: #fff; color: #000; padding: 20px; font-family: sans-serif; display: block !important; }
  body.print-bazar #printable-bazar, body.print-bazar #printable-bazar * { visibility: visible; }
  body.print-bazar #printable-bazar { position: absolute; left: 0; top: 0; width: 100%; background: #fff; color: #000; padding: 20px; font-family: sans-serif; display: block !important; }
  body.print-ledger #printable-ledger, body.print-ledger #printable-ledger * { visibility: visible; }
  body.print-ledger #printable-ledger { position: absolute; left: 0; top: 0; width: 100%; background: #fff; color: #000; padding: 20px; font-family: sans-serif; display: block !important; }
  body.print-audit #printable-inventory-audit, body.print-audit #printable-inventory-audit * { visibility: visible; }
  body.print-audit #printable-inventory-audit { position: absolute; left: 0; top: 0; width: 100%; background: #fff; color: #000; padding: 20px; font-family: sans-serif; display: block !important; }
  body.print-supplier #printable-supplier-ledger, body.print-supplier #printable-supplier-ledger * { visibility: visible; }
  body.print-supplier #printable-supplier-ledger { position: absolute; left: 0; top: 0; width: 100%; background: #fff; color: #000; padding: 20px; font-family: sans-serif; display: block !important; }
}