/* ─────────────────────────────────────────────────────────────────────────
   Command Centre — mobile "daylight" overrides (2026-10-07, v2.842)

   Applies ONLY when js/app.js's _activateMobileMode() has added
   body.mobile-mode (phones). Desktop is untouched. Removing this file's
   <link> in index.html reverts the whole change.

   Why: phone mode is used outdoors in direct sun. The runtime-injected
   mobile CSS (#mobile-css in _activateMobileMode) set many sizes to 8–11px
   and used mid-grey text (#666 / #8e8e93), well under the 7:1 contrast and
   44–48px tap-target guidance (Apple HIG / Material 3, see UX review).

   Specificity: selectors start with `html body.mobile-mode` so they outrank
   the injected `.mobile-mode …` / `#id …` rules regardless of load order.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Tokens: darker neutrals, one typeface ── */
html body.mobile-mode {
  --gray: #3a3a42;            /* was #666 — 11:1 on white instead of 5.7:1 */
  --accent: #0b0b0f;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #0b0b0f;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  font-variant-numeric: tabular-nums;
}

/* ── Headings & cards ── */
html body.mobile-mode h1, html body.mobile-mode h2, html body.mobile-mode h3, html body.mobile-mode h4,
html body.mobile-mode .card-header h3 {
  font-family: var(--font-body) !important;
  color: #0b0b0f !important;
  letter-spacing: -0.01em;
}
html body.mobile-mode .card-header h3 { font-size: 18px !important; font-weight: 700 !important; }
html body.mobile-mode .card { border: 1.5px solid #c9ccd3 !important; }

/* ── Metric tiles ── */
html body.mobile-mode .metric-value { font-family: var(--font-body) !important; font-size: 24px !important; font-weight: 800 !important; color: #0b0b0f !important; }
html body.mobile-mode .metric-label { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; color: #3a3a42 !important; }
html body.mobile-mode .metric-sub,
html body.mobile-mode .metric-trend { font-size: 13px !important; color: #3a3a42 !important; }

/* ── Tables: readable, scroll inside their wrapper ── */
html body.mobile-mode .data-table { font-size: 14px !important; }
html body.mobile-mode .data-table th { font-size: 12px !important; color: #3a3a42 !important; }
html body.mobile-mode #txn-tender-by-store .data-table { font-size: 13px !important; }
html body.mobile-mode .table-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

/* ── Bar charts: never wider than the card; extra days scroll inside it ── */
html body.mobile-mode .chart-placeholder { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; }
html body.mobile-mode .chart-bars { overflow: visible !important; }
html body.mobile-mode .chart-bar-group { font-size: 12px !important; min-width: 36px !important; flex: 1 0 36px !important; }
html body.mobile-mode .chart-bar-group::after { font-size: 12px !important; color: #3a3a42 !important; font-weight: 600 !important; }
html body.mobile-mode .chart-bar-total { font-size: 12px !important; font-weight: 700 !important; color: #0b0b0f !important; }
html body.mobile-mode .chart-legend { font-size: 13px !important; gap: 6px 12px !important; padding: 4px 0 8px !important; flex-wrap: wrap !important; }
html body.mobile-mode .chart-legend-item { font-size: 13px !important; color: #0b0b0f !important; }
html body.mobile-mode #sp-target-chart svg text { font-size: 12px !important; }
html body.mobile-mode .target-legend, html body.mobile-mode .target-legend span { font-size: 13px !important; }

/* ── Hourly heatmaps: bigger cells, swipe sideways inside the card ── */
html body.mobile-mode .sp-heatmap-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
html body.mobile-mode #sp-heatmap .sp-heatmap-table,
html body.mobile-mode #cart-ops-heatmap .sp-heatmap-table { font-size: 12px !important; min-width: 560px !important; }
html body.mobile-mode #sp-heatmap .sp-heatmap-cell,
html body.mobile-mode #cart-ops-heatmap .sp-heatmap-cell { font-size: 12px !important; padding: 6px 4px !important; min-width: 30px !important; }
html body.mobile-mode #sp-heatmap .sp-heatmap-day,
html body.mobile-mode #cart-ops-heatmap .sp-heatmap-day { font-size: 13px !important; font-weight: 600 !important; }
html body.mobile-mode #sp-heatmap .sp-heatmap-period,
html body.mobile-mode #cart-ops-heatmap .sp-heatmap-period { font-size: 11px !important; color: #3a3a42 !important; }
/* Cart Ops "Sales by Hour" header: title + cart filter wrap instead of overflowing */
html body.mobile-mode #page-cart-ops .card-header { flex-wrap: wrap !important; gap: 8px !important; }
html body.mobile-mode #cart-ops-heatmap-store { font-size: 15px !important; min-height: 44px !important; max-width: 100% !important; }

/* ── Buttons & filters: ≥44px targets, readable labels ── */
html body.mobile-mode .date-filter-bar button,
html body.mobile-mode .date-filter-bar .btn-sm { min-height: 40px !important; font-size: 14px !important; padding: 8px 12px !important; border-radius: 10px !important; font-weight: 600 !important; }
html body.mobile-mode .btn-sm { min-height: 40px !important; font-size: 14px !important; padding: 8px 14px !important; border-radius: 10px !important; }
html body.mobile-mode .btn-primary, html body.mobile-mode .btn-secondary { min-height: 48px !important; font-size: 16px !important; font-weight: 700 !important; }
html body.mobile-mode .btn-secondary { border: 2px solid #0b0b0f !important; color: #0b0b0f !important; }

/* ── POS (inside CC mobile) ── */
html body.mobile-mode #pos-topbar select { font-size: 15px !important; padding: 8px !important; min-height: 44px !important; }
html body.mobile-mode .pos-menu-item > div:last-child > div:first-child { font-size: 13px !important; font-weight: 600 !important; }
html body.mobile-mode .pos-menu-item > div:last-child > div:last-child { font-size: 12px !important; color: #3a3a42 !important; }
html body.mobile-mode #pos-menu-items h4 { font-size: 13px !important; color: #3a3a42 !important; }
html body.mobile-mode #pos-order-items { font-size: 14px !important; }
html body.mobile-mode #pos-total { font-size: 24px !important; font-weight: 800 !important; }
html body.mobile-mode .pos-tender-btn { font-size: 14px !important; min-height: 48px !important; font-weight: 600 !important; }
html body.mobile-mode #pos-customer-search { font-size: 16px !important; min-height: 44px !important; }

/* ── Stocktake modal ── */
html body.mobile-mode #closing-inv-modal-overlay .data-table { font-size: 13px !important; }
html body.mobile-mode #closing-inv-modal-overlay .data-table input { font-size: 16px !important; min-height: 40px !important; width: 64px !important; }
html body.mobile-mode #closing-inv-modal-overlay .data-table select { font-size: 14px !important; min-height: 36px !important; }
html body.mobile-mode #closing-inv-modal-overlay .modal-body p { font-size: 14px !important; }

/* ── Top ribbon: 44px controls, white icons on the dark bar ── */
html body.mobile-mode #mobile-store-select { font-size: 15px !important; min-height: 44px !important; padding: 8px 12px !important; border-color: #4a4a52 !important; }
html body.mobile-mode #mobile-refresh-btn { color: #ffffff !important; min-height: 44px !important; min-width: 44px !important; border-color: #4a4a52 !important; }
/* Log out sits apart from Refresh so a hurried tap can't hit the wrong one (Fitts) */
html body.mobile-mode #mobile-logout-btn { color: #ffffff !important; min-height: 44px !important; min-width: 44px !important; margin-left: 10px !important; border: 1px solid #4a4a52 !important; border-radius: 8px !important; }

/* ── Bottom tab bar: dark, readable labels ── */
html body.mobile-mode #mobile-tab-bar { background: #ffffff !important; border-top: 1.5px solid #c9ccd3 !important; }
html body.mobile-mode #mobile-tab-bar button { font-size: 12px !important; font-weight: 600 !important; color: #3a3a42 !important; min-height: 52px !important; }
html body.mobile-mode #mobile-tab-bar button.active { color: #0b0b0f !important; font-weight: 700 !important; }

/* ── Feedback/chat button: clear of the tab bar and content ── */
html body.mobile-mode #feedback-fab { bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important; right: 14px !important; width: 48px !important; height: 48px !important; }