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

.page-wrap { --content-pad-x: 20px; 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; }

/* ---------- 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); }

/* ---------- 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-media { aspect-ratio: 4/3; max-height: 46vh; width: 100%; 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: 700; 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: 700; 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 { --content-pad-x: 14px; padding: 16px 14px 40px; }
  .checkout-grid, .split-layout { gap: 14px; }
}