/* ============================================================
   FoodHub — Global UI (glassmorphism, dark/light, mobile-first)
   Works alongside Bootstrap 5.
   ============================================================ */
:root {
  --fh-primary: #e85d26;
  --fh-primary-2: #ff8a4c;
  --fh-accent: #16a34a;
  --fh-bg: #f4f6fb;
  --fh-surface: rgba(255, 255, 255, 0.75);
  --fh-border: rgba(15, 23, 42, 0.08);
  --fh-text: #1e293b;
  --fh-muted: #64748b;
  --fh-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
  --fh-radius: 18px;
}
[data-theme="dark"] {
  --fh-bg: #0f172a;
  --fh-surface: rgba(30, 41, 59, 0.72);
  --fh-border: rgba(255, 255, 255, 0.08);
  --fh-text: #e2e8f0;
  --fh-muted: #94a3b8;
  --fh-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

html, body {
  background: var(--fh-bg);
  color: var(--fh-text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}
body { padding-bottom: env(safe-area-inset-bottom); }
[data-theme="dark"] body { color-scheme: dark; }

/* Decorative gradient backdrop */
.fh-backdrop {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
}
.fh-backdrop::before, .fh-backdrop::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: .35;
}
.fh-backdrop::before { width: 420px; height: 420px; background: var(--fh-primary); top: -120px; right: -80px; }
.fh-backdrop::after  { width: 380px; height: 380px; background: #6366f1; bottom: -140px; left: -100px; }

/* Glass cards */
.glass {
  background: var(--fh-surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius);
  box-shadow: var(--fh-shadow);
}
.card.glass { overflow: hidden; }

/* Buttons */
.btn-fh {
  background: linear-gradient(135deg, var(--fh-primary), var(--fh-primary-2));
  color: #fff; border: 0; border-radius: 12px; font-weight: 600;
  padding: .6rem 1.4rem; transition: transform .15s ease, box-shadow .15s;
}
.btn-fh:hover { color:#fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(232,93,38,.35); }
.btn-fh:disabled { opacity:.6; }

/* Sidebar layout (staff portals) */
.fh-layout { display: flex; min-height: 100vh; }
.fh-sidebar {
  width: 240px; flex-shrink: 0; padding: 1rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.fh-sidebar .nav-link {
  color: var(--fh-muted); border-radius: 12px; padding: .55rem .9rem; margin-bottom: .15rem;
  display:flex; align-items:center; gap:.6rem; font-weight:500;
}
.fh-sidebar .nav-link.active, .fh-sidebar .nav-link:hover {
  color: var(--fh-primary); background: rgba(232,93,38,.1);
}
.fh-main { flex-grow: 1; padding: 1.25rem; min-width: 0; }

@media (max-width: 991px) {
  .fh-sidebar { position: fixed; z-index: 1045; left: -260px; transition: left .25s; background: var(--fh-bg); }
  .fh-sidebar.open { left: 0; box-shadow: var(--fh-shadow); }
}

/* Stat cards */
.stat-card { padding: 1.1rem 1.25rem; }
.stat-card .stat-icon {
  width: 46px; height: 46px; border-radius: 14px; display:flex; align-items:center; justify-content:center;
  font-size: 1.3rem; background: rgba(232,93,38,.12); color: var(--fh-primary);
}
.stat-card h3 { font-size: 1.55rem; font-weight: 700; margin: .35rem 0 0; }
.stat-card small { color: var(--fh-muted); }

/* Tables */
.table { color: var(--fh-text); }
.table > :not(caption) > * > * { background: transparent; color: inherit; border-color: var(--fh-border); }
.table thead th { color: var(--fh-muted); font-size:.8rem; text-transform: uppercase; letter-spacing:.04em; }

/* Badges for order statuses */
.badge-status { border-radius: 30px; padding: .4em .85em; font-weight: 600; font-size: .75rem; }
.st-pending { background:#fef3c7; color:#92400e; } .st-accepted { background:#dbeafe; color:#1e40af; }
.st-preparing { background:#ffedd5; color:#c2410c; } .st-packed { background:#e0e7ff; color:#3730a3; }
.st-out_for_delivery { background:#cffafe; color:#155e75; } .st-delivered { background:#dcfce7; color:#166534; }
.st-cancelled { background:#fee2e2; color:#991b1b; } .st-refund { background:#f3e8ff; color:#6b21a8; }
.st-paused { background:#f1f5f9; color:#475569; } .st-active { background:#dcfce7; color:#166534; }
.st-pending_payment,.st-unpaid { background:#fef3c7; color:#92400e; } .st-paid,.st-approved { background:#dcfce7; color:#166534; }
.st-rejected { background:#fee2e2; color:#991b1b; } .st-expired { background:#f1f5f9; color:#475569; }

/* Login screens */
.login-wrap { min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 1rem; }
.login-card { width: 100%; max-width: 420px; padding: 2rem; }
.login-card .brand { font-size: 1.6rem; font-weight: 800; }
.login-card .brand span { color: var(--fh-primary); }

/* Forms */
.form-control, .form-select {
  background: rgba(255,255,255,.6); border: 1px solid var(--fh-border);
  border-radius: 12px; padding: .65rem .9rem; color: var(--fh-text);
}
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: rgba(15,23,42,.5); }
.form-control:focus { border-color: var(--fh-primary); box-shadow: 0 0 0 .2rem rgba(232,93,38,.15); background: rgba(255,255,255,.8); color: var(--fh-text); }
[data-theme="dark"] .form-control:focus { background: rgba(15,23,42,.7); }

/* OTP boxes */
.otp-input { width: 48px; height: 56px; text-align:center; font-size:1.4rem; font-weight:700; }

/* Kitchen big display */
.kitchen-token {
  font-size: 2.4rem; font-weight: 800; line-height: 1;
  color: var(--fh-primary);
}
.kitchen-card { border-left: 6px solid var(--fh-primary); }
.kitchen-card.priority { border-left-color: #dc2626; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(220,38,38,.15); } }

/* POS */
.pos-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:.75rem; }
.pos-item { cursor:pointer; text-align:center; padding:.75rem .5rem; transition: transform .12s; user-select:none; }
.pos-item:hover { transform: scale(1.04); }
.pos-item img { width:100%; height:78px; object-fit:cover; border-radius:12px; }
.pos-cart { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y:auto; }

/* Customer bottom nav (mobile app feel) */
.fh-bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040;
  display: flex; justify-content: space-around; padding: .4rem 0 calc(.4rem + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
}
.fh-bottomnav a { color: var(--fh-muted); text-align:center; font-size:.7rem; text-decoration:none; flex:1; }
.fh-bottomnav a i { display:block; font-size:1.25rem; margin-bottom:2px; }
.fh-bottomnav a.active { color: var(--fh-primary); }
body.has-bottomnav { padding-bottom: 84px; }

/* Meal chips */
.meal-chip { border-radius: 30px; padding:.35em .9em; font-size:.75rem; font-weight:600; background:rgba(99,102,241,.12); color:#4f46e5; }

/* Veg/non-veg dot */
.veg-dot, .nonveg-dot { width:14px; height:14px; border:2px solid; display:inline-block; border-radius:3px; position:relative; }
.veg-dot { border-color:#16a34a; } .nonveg-dot { border-color:#dc2626; }
.veg-dot::after, .nonveg-dot::after { content:""; position:absolute; inset:2px; border-radius:50%; }
.veg-dot::after { background:#16a34a; } .nonveg-dot::after { background:#dc2626; }

/* Animations */
.fade-up { animation: fadeUp .4s ease both; }
@keyframes fadeUp { from { opacity:0; transform: translateY(12px);} to { opacity:1; transform:none;} }

/* Print (invoices, kitchen slips) */
@media print {
  .no-print, .fh-sidebar, .fh-bottomnav { display: none !important; }
  .fh-main { padding: 0; }
  body { background: #fff; }
  .glass { box-shadow:none; border:1px solid #ddd; background:#fff; }
}

/* Utility */
.text-muted-fh { color: var(--fh-muted) !important; }
.cursor-pointer { cursor: pointer; }
.avatar { width:38px; height:38px; border-radius:50%; object-fit:cover; }