/* ============================================================
   CLICKFOOD — dashboard-specific layout rules
   ============================================================ */

.page-wrap { max-width: 1180px; margin: 0 auto; padding: 22px 20px 48px; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }

/* ---------- Business registration wizard step progress ---------- */
.onboarding-progress { display: flex; gap: 6px; }
.onboarding-progress-dot { flex: 1; height: 4px; border-radius: 999px; background: var(--border-color); }
.onboarding-progress-dot.done { background: var(--color-primary); }

/* ---------- Sub-navigation tabs (manager / cashier sections) ---------- */
/* The scrollbar is hidden (below) and there are now enough tabs that
   several sit off-screen with zero visual hint they're reachable by
   scrolling — a real "I can't find the tab that's actually there"
   problem once a dashboard grows past ~5-6 tabs on a phone width. This
   mask fades the row's own edges to transparent at all times,
   regardless of scroll position, signalling "there's more this way"
   the same way native scrollable tab strips do. */
.tab-row {
  display: flex; gap: 6px; overflow-x: auto; margin-bottom: 20px; border-bottom: 1px solid var(--border-color);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 28px), transparent 100%);
}
.tab-row::-webkit-scrollbar { display: none; }
.tab-btn {
  flex-shrink: 0; padding: 10px 16px; background: none; border: none; cursor: pointer; font-weight: 600;
  font-size: 13.5px; color: var(--text-secondary); border-bottom: 2.5px solid transparent; margin-bottom: -1px;
  display: flex; align-items: center; gap: 6px;
}
.tab-btn.active { color: var(--color-primary); border-color: var(--color-primary); }
.tab-btn:hover:not(.active) { color: var(--text-primary); }

/* ---------- Dispatcher: delivery status breakdown ---------- */
.status-breakdown-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.status-breakdown-row:last-child { margin-bottom: 0; }
.status-breakdown-label { width: 130px; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.status-breakdown-track { flex: 1; height: 10px; border-radius: 5px; background: var(--bg-surface-2); overflow: hidden; }
.status-breakdown-fill { height: 100%; border-radius: 5px; transition: width var(--transition-med); }
.status-breakdown-count { width: 32px; text-align: right; font-size: 13px; font-weight: 700; flex-shrink: 0; }

/* ---------- Dispatcher: live delivery map placeholder ---------- */
.map-placeholder {
  aspect-ratio: 16/7; border-radius: var(--radius-lg); background: var(--bg-surface-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--text-secondary); text-align: center; padding: 20px;
}
.map-placeholder [data-lucide] { width: 32px; height: 32px; margin-bottom: 4px; }

/* ---------- Image upload field (manager forms) ---------- */
.image-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.image-upload-preview { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--bg-surface-2); border: 1px solid var(--border-color); }
.image-upload-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-upload-btn { cursor: pointer; }
.image-upload-status { min-width: 60px; }
.image-upload-progress { width: 100%; height: 6px; border-radius: 999px; background: var(--bg-surface-2); overflow: hidden; flex-basis: 100%; }
.image-upload-progress-bar { height: 100%; background: var(--color-primary); width: 0%; transition: width 150ms ease; }

/* ---------- Stats grid (manager analytics) ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.reports-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
@media (max-width: 860px) { .reports-grid { grid-template-columns: 1fr; } }

/* ---------- Two-column layout (list + detail) ---------- */
.split-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .split-layout { grid-template-columns: 1fr; } }
.list-col { display: flex; flex-direction: column; gap: 10px; max-height: 74vh; overflow-y: auto; padding-right: 4px; }

/* ---------- Order row / card (manager & cashier) ---------- */
.order-row-card { padding: 14px 16px; cursor: pointer; }
.order-row-card.selected { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb),0.15); }
.order-row-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.order-row-meta { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

/* ---------- Filter chip bar for order lists ---------- */
.filter-bar { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 16px; }

/* ---------- Food detail modal ---------- */
.food-detail-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.food-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.qty-stepper { display: flex; align-items: center; gap: 14px; background: var(--bg-surface-2); border-radius: var(--radius-pill); padding: 6px 8px; width: fit-content; }
.qty-stepper .qty-val { font-weight: 800; min-width: 24px; text-align: center; }

/* ---------- Checkout ---------- */
.checkout-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .checkout-grid { grid-template-columns: 1fr; } }
.summary-card { position: sticky; top: calc(var(--nav-h) + 16px); }
.zone-option { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border: 1.5px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; margin-bottom: 8px; }
.zone-option.selected { border-color: var(--color-primary); background: rgba(var(--color-primary-rgb),0.06); }
.payment-option { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; margin-bottom: 10px; }
.payment-option.selected { border-color: var(--color-primary); background: rgba(var(--color-primary-rgb),0.06); }
.card-mock { background: linear-gradient(135deg, #232333, #33334a); color: #fff; border-radius: var(--radius-lg); padding: 20px; font-family: 'Courier New', monospace; margin-bottom: 16px; }
.card-mock .cm-number { font-size: 18px; letter-spacing: 2px; margin: 18px 0 14px; }
.card-mock .cm-row { display: flex; justify-content: space-between; font-size: 11px; opacity: 0.8; text-transform: uppercase; }

/* ---------- Confirmation screen ---------- */
.confirm-hero { text-align: center; padding: 30px 16px; }
.confirm-hero .big-check { width: 76px; height: 76px; border-radius: 50%; background: rgba(34,197,94,0.14); color: var(--color-success); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.confirm-hero .big-check svg { width: 40px; height: 40px; }

/* ---------- Order history ---------- */
.history-card { padding: 16px; }
.history-thumb-row { display: flex; gap: -8px; margin: 8px 0; }

/* ---------- Favorites grid reuses grid-menu ---------- */

/* ---------- Profile ---------- */
.profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.profile-avatar-lg { width: 76px; height: 76px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 26px; overflow: hidden; }
.profile-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Kanban ticket extras already in components.css ---------- */
.priority-select { display: flex; gap: 6px; }
.priority-btn { flex: 1; padding: 6px 0; font-size: 11px; font-weight: 700; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-surface); cursor: pointer; }
.priority-btn.active.normal { background: var(--bg-surface-2); border-color: var(--border-strong); }
.priority-btn.active.high { background: rgba(255,193,7,0.25); border-color: var(--color-yellow); }
.priority-btn.active.urgent { background: rgba(239,68,68,0.2); border-color: var(--color-error); color: #b91c1c; }

/* ---------- Delivery dashboard status pills ---------- */
.status-select-row { display: flex; gap: 8px; }
.status-pill-btn { flex: 1; padding: 10px; border-radius: var(--radius-md); border: 1.5px solid var(--border-color); background: var(--bg-surface); cursor: pointer; font-weight: 700; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.status-pill-btn.active { border-color: var(--color-primary); background: rgba(var(--color-primary-rgb),0.08); color: var(--color-primary); }

/* ---------- COD calculator ---------- */
.cod-calc { padding: 18px; }
.cod-result { text-align: center; padding: 16px; border-radius: var(--radius-md); margin-top: 12px; font-size: 15px; font-weight: 700; }
.cod-result.ok { background: rgba(34,197,94,0.12); color: #157a41; }
.cod-result.bad { background: rgba(239,68,68,0.12); color: #b91c1c; }
:root[data-theme="dark"] .cod-result.ok { color: #4ade80; }
:root[data-theme="dark"] .cod-result.bad { color: #f87171; }

/* ---------- Business hours grid ---------- */
.hours-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.day-toggle { padding: 10px 4px; text-align: center; border-radius: var(--radius-sm); border: 1.5px solid var(--border-color); cursor: pointer; font-size: 12px; font-weight: 700; background: var(--bg-surface); }
.day-toggle.open { background: rgba(34,197,94,0.12); border-color: var(--color-success); color: #157a41; }
:root[data-theme="dark"] .day-toggle.open { color: #4ade80; }

@media (max-width: 620px) {
  .page-wrap { padding: 16px 14px 40px; }
  .checkout-grid, .split-layout { gap: 14px; }
}

/* ---- Phase 1: opening hours, status, availability ---- */
.select-sm, .input-sm { height: 36px; padding: 6px 10px; font-size: 14px; }
.select-sm { width: auto; min-width: 104px; padding-right: 28px; }
@media (max-width: 480px) { .status-row { flex-direction: column; align-items: stretch; } .status-row > .flex { justify-content: flex-end; } }
.status-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-color); }
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: 6px 6px 6px 0; vertical-align: middle; }
.hours-table td:first-child { width: 72px; }
.hours-table .input { width: 100%; min-width: 0; }
.day-check-row { display: flex; flex-wrap: wrap; gap: 6px; }
.day-check { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border-color); border-radius: var(--radius-pill); font-size: 13px; cursor: pointer; }
.day-check input { margin: 0; }
.time-window-field:has(input[name="limit_hours"]:not(:checked)) .time-window-body { display: none; }
.time-window-body { margin-top: 8px; }
.avail-list { padding: 0; overflow: hidden; }
.avail-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-color); }
.avail-row:last-child { border-bottom: none; }
.avail-name { min-width: 0; }
.avail-row .btn { min-width: 96px; }

/* ---- Phase 2: reports and refunds ---- */
.report-toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.report-export { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.report-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px 20px; }
.report-kpi-label { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.report-kpi-value { font-size: 22px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.report-kpi-note { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.report-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.report-table th { text-align: left; font-weight: 600; color: var(--text-secondary); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--border-color); }
.report-table td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--border-color); font-variant-numeric: tabular-nums; }
.report-table td:first-child { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-bars { display: flex; flex-direction: column; gap: 6px; }
.report-bars.compact { gap: 4px; }
.report-bar-row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 8px; font-size: 12px; }
.report-bar-label { color: var(--text-secondary); white-space: nowrap; }
.report-bar-track { height: 10px; background: var(--bg-surface-2); border-radius: 3px; overflow: hidden; }
.report-bar-fill { display: block; height: 100%; background: var(--color-primary); border-radius: 3px; }
.report-bar-value { font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; }
.refund-list { padding: 0; overflow: hidden; }
.refund-row { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-color); }
.refund-row:last-child { border-bottom: none; }
.refund-main { min-width: 0; }
.refund-actions { display: flex; gap: 6px; align-items: flex-start; flex-shrink: 0; }
@media (max-width: 560px) { .refund-row { flex-direction: column; } }
.report-cols { display: flex; align-items: flex-end; gap: 2px; height: 140px; margin-bottom: 18px; }
.report-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 0; outline: none; cursor: default; }
.report-col-bar { width: 100%; max-width: 22px; background: var(--color-primary); border-radius: 3px 3px 0 0; }
.report-col:hover .report-col-bar, .report-col:focus .report-col-bar { background: var(--color-primary-dark); }
.report-col-label { position: absolute; bottom: -18px; font-size: 10px; color: var(--text-secondary); white-space: nowrap; }

/* ---- Phase 4: ingredients ---- */
.inv-alert { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-md); background: rgba(255,193,7,0.12); border: 1px solid rgba(255,193,7,0.35); font-size: 13px; }
.inv-alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.recipe-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border-color); font-size: 14px; }
.inv-table { min-width: 680px; }
.inv-table .badge, .inv-table .btn { white-space: nowrap; }
/* ---- Phase 5: two-step login ---- */
.mfa-code { font-size: 22px; letter-spacing: 6px; text-align: center; font-variant-numeric: tabular-nums; }
.mfa-qr { display: flex; justify-content: center; padding: 8px; background: #fff; border-radius: var(--radius-md); margin-bottom: 8px; }
.mfa-secret { font-size: 12px; word-break: break-all; background: var(--bg-surface-2); padding: 2px 6px; border-radius: 4px; }
/* ---- Phase 6a: deal settings ---- */
.deal-settings { border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 10px 12px; margin: 10px 0 4px; }
.deal-settings summary { font-weight: 600; cursor: pointer; }