/* ==============================================================
   mobile-pages.css - Page-specific responsive overrides (forecast, admin, tutorial, brand footer)
   ============================================================== */

/* ── Forecast ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .fc-block { padding: 18px 16px; }
  .fc-controls { gap: 18px; }
}

@media (max-width: 640px) {
  /* Metric blocks are naturally vertical - just tighten padding */
  .fc-metric { padding: 9px 10px; }
  .fc-metric-current { font-size: 14px; }
  .fc-metric-proj     { font-size: 12px; }

  .fc-scenarios { grid-template-columns: 1fr; }
  .fc-control-group { min-width: 0; width: 100%; }
  .fc-control-wide { min-width: 0; }
  .fc-client-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Dev ribbon ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .dev-script-item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dev-script-actions { width: 100%; }
  .dev-script-actions button { flex: 1; text-align: center; }
}

/* ── Tutorial card ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .tut-card {
    width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    top: auto !important;
  }
}

/* ── Admin filter bar - compact 3-row mobile layout ─────────── */
@media (max-width: 640px) {
  /* Tighten inner padding so content has more room */
  .admin-filter-bar .filter-bar-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 5px;
    padding: 8px 12px;
  }

  /* Hide all labels */
  .admin-filter-bar .filter-group .filter-label {
    display: none;
  }

  /* Row 1: date range full width */
  .admin-filter-bar .filter-group:has(#adminFilterStart) {
    flex: 0 0 100%;
  }
  .admin-filter-bar .filter-group:has(#adminFilterStart) .filter-dates {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
  }
  .admin-filter-bar .filter-group:has(#adminFilterStart) .filter-input {
    flex: 1 1 0;
    min-width: 0;
    font-size: 12px;
    padding: 5px 6px;
    box-sizing: border-box;
    width: 100%;
  }

  /* Row 2: all four dropdowns in one row */
  .admin-filter-bar .filter-group:has(#adminFilterGroupBy),
  .admin-filter-bar .filter-group:has(#adminFilterRegion),
  .admin-filter-bar .filter-group:has(#adminFilterLocation),
  .admin-filter-bar .filter-group:has(#adminFilterTrainer) {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Selects fill their group, minimal padding, small font */
  .admin-filter-bar .filter-group .filter-select {
    width: 100%;
    min-width: 0;
    font-size: 11px;
    padding: 5px 2px 5px 4px;
    box-sizing: border-box;
  }

  /* Row 3: page nav full width */
  .admin-filter-bar .page-nav {
    flex: 0 0 100%;
    width: 100%;
  }
  .admin-filter-bar .page-nav-btn {
    width: 100%;
    justify-content: space-between;
  }
  .admin-filter-bar .page-nav-dropdown {
    width: 100%;
    left: 0;
    right: 0;
  }
}

/* ── Admin KPI grid ────────────────────────────────────────── */
@media (max-width: 900px) {
  .admin-kpi-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
}

@media (max-width: 640px) {
  .admin-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .admin-kpi-card { padding: 12px 14px; }
  .admin-kpi-value { font-size: 18px; }
  .admin-kpi-sub { font-size: 10px; }
}

@media (max-width: 400px) {
  .admin-kpi-grid { grid-template-columns: 1fr; }
}

/* ── Admin tables ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-table { min-width: 560px; }
  .admin-table thead th, .admin-table tbody td { padding: 8px 10px; }
}

/* ── Admin location cards ──────────────────────────────────── */
@media (max-width: 640px) {
  .admin-location-grid { grid-template-columns: 1fr; gap: 12px; }
  .admin-capacity-summary { grid-template-columns: 1fr 1fr; gap: 10px; }
  .admin-heatmap-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-status-badge { font-size: 10px; padding: 1px 6px; }
  .section-subtitle { font-size: 12px; }
}

/* ── Misc ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .empty-state { padding: 48px 16px; }
  .empty-state h3 { font-size: 17px; }
  .page-copyright { padding: 20px 12px 24px; }
  body { -webkit-text-size-adjust: 100%; }
}

/* ── Sticky headers stay below header on mobile ────────────── */
@media (max-width: 640px) {
  .filter-bar { top: var(--header-h); }
}

/* ── Safe area insets (notch / home indicator) ─────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 640px) {
    .modal-overlay { padding-bottom: env(safe-area-inset-bottom); }
  }
}


/* ============================================================
   MOBILE POLISH PASS - header nav, YoY fix, misc
   ============================================================ */

/* ── Page nav lives in the filter bar on all screen sizes ──── */
@media (max-width: 640px) {
  /* Page nav is the last item in the filter bar row - always visible */
  #pageNav, #adminNav { display: block; }
  .page-nav-spacer { display: none !important; }
  /* Dropdown opens upward-ish from bottom of filter bar row */
  .page-nav-dropdown {
    width: 100%;
    left: 0;
    right: 0;
  }
}

/* ── YoY / chart-card-header overflow fix ──────────────────── */
@media (max-width: 640px) {
  /* Allow chart card header to wrap so buttons don't overlap title */
  .chart-card-header[style*="space-between"] {
    flex-wrap: wrap;
    gap: 8px;
  }
  /* Perf selectors (YoY + dropdowns) go full-width below the title */
  .perf-selectors {
    flex: 0 0 100% !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 5px !important;
  }
  .perf-selectors .filter-select { max-width: none !important; flex: 1 1 auto; min-width: 80px; font-size: 14px; }
  .chart-peaks-btn { min-height: 32px; padding: 4px 10px; }

  /* Revenue / Workload chart buttons also wrap */
  .chart-card-header > div[style*="gap"] {
    flex-wrap: wrap;
    gap: 5px;
  }
}

/* ── Funnel sort buttons: wrap on narrow screens ───────────── */
@media (max-width: 480px) {
  .funnel-sort-btns { flex-wrap: wrap; gap: 4px; }
  .funnel-sort-btn  { flex: 1 1 auto; text-align: center; }
}

/* ── Perf stat row: wrap on narrow screens ─────────────────── */
@media (max-width: 480px) {
  .perf-stats-row { flex-wrap: wrap; gap: 6px; }
  .perf-stat-box  { flex: 1 1 calc(50% - 3px); min-width: 0; }
}

/* ── Filter bar: hide page-nav spacer on mobile (belt+suspenders) */
@media (max-width: 640px) {
  .filter-bar .page-nav-spacer { display: none; }
}

/* ── Summary bar: don't let brand+mode-switcher crowd the nav ── */
@media (max-width: 400px) {
  .mode-switch-toggle { padding: 3px 6px; font-size: 9px; }
  .mode-switch-toggle svg { display: none !important; }
}


/* ============================================================
   BRAND FOOTER + MOBILE DATE BAR
   ============================================================ */

/* ── Brand footer (replaces header brand-mark) ─────────────── */
.brand-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 20px 12px;
  opacity: 0.45;
}
.brand-footer .brand-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 3px 7px;
  border-radius: 5px;
  letter-spacing: 0.08em;
}
.brand-footer-copy {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  letter-spacing: 0.04em;
}


@media (max-width: 640px) {
  /* filter-bar sits directly below header */
  .filter-bar { top: var(--header-h); }
  .mode-switcher { margin-left: 0; }
}

/* ── Page copyright footer: visible on all breakpoints ── */
@media (max-width: 640px) {
  .page-copyright {
    padding: 12px 16px 24px;
  }
}

/* ── Desktop: remove brand-mark rules that relied on header position ── */
@media (min-width: 641px) {
  .mode-switcher { margin-left: 0; }
}


/* ============================================================
   MOBILE FIXES - analytics PDF, metrics row, schedule bars
   ============================================================ */

/* ── 1. Hide Export PDF button on mobile (analytics filter bar) */
@media (max-width: 640px) {
  #btnExportPDF { display: none !important; }
}

/* ── 3. Schedule: bar row matches col grid min-width ────────── */
@media (max-width: 640px) {
  /* Wrap both grids in a single scrolling container */
  .schedule-visual-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Both children get the same min-width so they scroll together */
  .sched-cols,
  .sched-bar-row {
    min-width: 520px;
    /* Ensure gap matches so columns align */
    gap: 4px;
  }
  /* Prevent the outer grid from double-scrolling */
  .sched-cols { overflow-x: visible; }
}



/* ============================================================
   WORKOUT BUILDER - mobile fixes
   ============================================================ */
@media (max-width: 640px) {

  /* Layout: sidebar above builder, no gap waste */
  .wb-layout { gap: 12px; }

  /* Sidebar: compact */
  .wb-sidebar { padding: 10px; }
  .wb-sidebar-header { flex-wrap: wrap; gap: 6px; }

  /* Name input: full width */
  .wb-name-input { max-width: 100% !important; width: 100% !important; box-sizing: border-box; }

  /* Table: scrolls horizontally to reveal all columns */
  /* max-width gives iOS Safari a concrete boundary so overflow-x:auto actually fires */
  .wb-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: calc(100vw - 52px); /* viewport minus analytics-section + wb-main padding */
  }
  .wb-table { min-width: 540px; font-size: 12px; }

  /* Video column: visible and scrollable to - do NOT hide */
  .wb-th-video { min-width: 160px; display: table-cell; }
  .wb-table tbody td:nth-child(5) { display: table-cell; }

  /* Drag handle: works on mobile now */
  .wb-th-drag { width: 24px; display: table-cell; }
  .wb-td-drag, .wb-drag-handle { display: inline-flex; }

  /* Tighten columns so more fits before scroll */
  .wb-th-exercise { min-width: 110px; }
  .wb-th-sets, .wb-th-reps { width: 50px; }

  /* Inputs in table: tighter */
  .wb-input-sm { width: 44px; padding: 4px 4px !important; font-size: 12px !important; }
  /* Prevent iOS zoom on focus - must be ≥16px */
  .wb-input,
  .wb-input-sm { font-size: 16px !important; }

  /* Actions row: stack on two lines */
  .wb-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .wb-actions > div { display: flex; gap: 8px; justify-content: flex-end; }
  .wb-actions .btn-primary { flex: 1; }

  /* Section header: stack title + library button */
  #page-workout .analytics-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  #page-workout .analytics-header .btn-ghost { align-self: flex-start; }
}

/* ── Take-aways page ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .ta-card-header { flex-direction: column; gap: 10px; }
  .ta-card-kpi    { text-align: left; }
  .ta-kpi-sub     { white-space: normal; }
  .ta-kpi-value   { font-size: 17px; }
  .ta-card-inner  { padding: 16px; }
  .ta-hbar-label  { width: 56px; }
  .ta-hbar-val    { width: 44px; }
}


/* ===== TOUR BUTTON MOBILE FIX =====
   Replaces the original mobile.css rule that sets font-size:0 on .tut-trigger-btn
   (which hid the "Tour" label). The button now uses inline styles in tutorial.js
   for font-size so the cascade cannot zero it out. This rule resets the
   position/transform overrides that were also causing tap-target issues. */

@media (max-width: 640px) {
  .tut-trigger-btn {
    /* Remove font-size:0 - label text is now protected by inline style in JS */
    font-size: 12px;
    /* Remove absolute positioning that caused mis-placement on mobile */
    position: static;
    transform: none;
    /* Ensure minimum tap target */
    min-height: 36px;
    min-width: 60px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
}


/* ===== ANALYTICS REPORT - HIDE INLINE GRAPHS ON MOBILE =====
   Hides sparklines, donut charts, and horizontal bar charts inside
   the analytics report on screens ≤ 640px. Text KPIs and tables
   remain fully visible. */

@media (max-width: 640px) {

  /* Sparkline thumbnails in the hero KPI cards */
  .ar-kpi-spark        { display: none !important; }

  /* Standalone sparkline SVGs (business health, weekly trend) */
  .ar-sparkline        { display: none !important; }

  /* Horizontal bar chart SVGs (schedule patterns, revenue concentration) */
  .ar-hbar             { display: none !important; }

  /* Donut chart circles (session breakdown, client health) */
  .ar-donut-wrap       { display: none !important; }

  /* Collapse the donut row so the legend sits flush to the top */
  .ar-donut-row        { flex-wrap: wrap; gap: 12px; }

  /* Schedule pattern chart columns - hide the SVG-heavy chart grid */
  .ar-sched-charts     { display: none !important; }

  /* Progress/sparkline section inside business health */
  .ar-biz-progress-block { display: none !important; }
}

/* ── Settings segmented controls (Card Corners) ──────────────── */
@media (max-width: 640px) {
  .settings-row:has(.settings-segmented) {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .settings-segmented { width: 100%; }
  .settings-seg-btn {
    flex: 1;
    padding: 5px 6px;
    font-size: 11px;
    text-align: center;
  }
}

/* ── Mobile: disable schedule slot hover highlights and tooltips ── */
@media (max-width: 768px) {
  .sched-slot:hover {
    filter: none;
    box-shadow: none;
  }
  #schedTooltip {
    display: none !important;
  }
}

/* ── Mobile: disable saved workout item hover highlight ── */
@media (max-width: 768px) {
  .wb-saved-item:hover {
    background: var(--bg-2);
    border-color: var(--border);
  }
  .wb-saved-name:hover {
    color: inherit;
  }
}