/* ==============================================================
   mobile-core.css - Core responsive overrides (header, filter bar, layout, modals, tables)
   ============================================================== */
/* ============================================================
   mobile.css - Responsive overrides (≤900px / ≤640px)
   ============================================================ */

/* ============================================================
   MOBILE-FRIENDLY RESPONSIVE STYLES
   Breakpoints: 900px (tablet), 640px (mobile), 400px (xs)
   ============================================================ */

/* ── Prevent double-tap zoom on all interactive elements (iOS Safari ignores user-scalable=no) ── */
button, a, input, select, textarea, label,
.btn-primary, .btn-ghost, .btn-danger, .btn-icon,
.btn-add-client, .mode-switch-btn, .page-nav-btn,
.fc-quick-btn, .fc-target-type-btn, .tab-btn, .nav-btn,
[role="button"], [onclick] {
  touch-action: manipulation;
}

/* ── Touch-target baseline ─────────────────────────────────── */
@media (max-width: 900px) {
  button, .btn-primary, .btn-ghost, .btn-danger,
  .btn-add-client, .mode-switch-btn, .page-nav-btn,
  .filter-input, .filter-select, .form-input {
    min-height: 40px;
  }
  .btn-icon { min-height: 36px; }
}

/* ── Summary / Header bar ──────────────────────────────────── */
@media (max-width: 900px) {
  .summary-bar-inner { padding: 0 12px; gap: 10px; }
  .stat-chip { padding: 5px 10px; }
  .btn-add-client { padding: 8px 12px; font-size: 12px; }
}

@media (max-width: 640px) {
  :root { --header-h: 56px; }
  .summary-bar-inner { gap: 6px; padding: 0 10px; }
  .brand-mark { font-size: 12px; padding: 3px 7px; }
  .brand-label { display: none; }
  .mode-switcher { margin-left: 6px; }
  .mode-switch-btn, .mode-switch-toggle { padding: 5px 9px; font-size: 11px; }
  .btn-add-client .btn-add-label,
  .btn-add-session .btn-add-label { display: none; }
  .btn-add-client, .btn-add-session { padding: 8px 10px; }
  .stat-chip { padding: 4px 7px; }
  .stat-value { font-size: 11px; }
  .stat-label { font-size: 9px; }
  .stat-divider { margin: 0 4px; height: 24px; }
  /* Backup cluster: show icon-only (hide text label + last-backup date) */
  .last-backup-label { display: none; }
  .backup-btn-label { display: none; }
  .backup-cluster { display: flex; flex-direction: row; gap: 0; }
  .btn-export-backup { padding: 7px 9px; }
  /* Tour button: show icon-only (hide "Tour" text) */
  .tut-trigger-btn { padding: 6px 8px; gap: 0; position: static; transform: none; font-size: 0; }
  .tut-trigger-btn svg { display: inline-block; }
}

@media (max-width: 400px) {
  .summary-stats .stat-chip:nth-child(n+9),
  .summary-stats .stat-divider:nth-child(n+9) { display: none; }
}

/* ── Filter bar ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .filter-bar-inner { padding: 8px 12px; gap: 8px; }
}

/* Desktop: add base rule so export buttons sit inline */
.analytics-export-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* Desktop: funnel-btn-row stays inline */
.funnel-btn-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  :root { --filter-h: auto; }

  /* ── Core bar: flex-row wrapping, NOT stacked column ── */
  .filter-bar-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 6px 10px;
    gap: 4px 6px;
  }

  /* ── Page nav: always last, full width ── */
  .page-nav-spacer { display: none; }
  .page-nav {
    order: 100;
    flex: 0 0 100%;
    width: 100%;
  }
  .page-nav-btn {
    width: 100%;
    justify-content: space-between;
    box-sizing: border-box;
  }
  .page-nav-dropdown { width: 100%; left: 0; right: 0; }

  /* ── Date inputs: only as wide as content, never stretched ── */
  .filter-input[type="date"] {
    width: 108px;
    min-width: 0;
    flex-shrink: 0;
    font-size: 14px;
  }
  /* Other inputs/selects: normal sizing (not full-width) */
  .filter-input, .filter-select {
    font-size: 16px;
  }
  /* But do NOT override date inputs with 100% width */
  .filter-input:not([type="date"]) {
    width: auto;
  }

  /* ── Date range hidden on mobile - header bar handles it ── */
  #filterGroupDateRange,
  #filterGroupForecast { display: none !important; }

  /* ── Hide self-explanatory labels on mobile ── */
  #filterGroupGrouping .filter-label,
  #filterGroupQuickRange .filter-label { display: none; }

  /* ── Hide reset button (redundant on mobile) ── */
  #filterBtnReset { display: none; }

  /* ── Grouping + Quick range: same row ── */
  #filterGroupGrouping { flex-shrink: 0; order: 2; }
  #filterGroupGrouping .filter-select { width: auto; font-size: 14px; padding: 5px 8px; }

  #filterGroupQuickRange {
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
    order: 3;
  }
  .filter-quick-btns { flex-wrap: nowrap; gap: 3px; }

  /* ── Analytics group: period+nav on row 1, exports on row 2 ── */
  #filterGroupAnalytics {
    flex: 0 0 100%;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    order: 3;
  }
  #filterGroupAnalytics .ar-navbar-period-selector { flex-shrink: 0; }
  #filterGroupAnalytics .sched-nav-btn { flex-shrink: 0; }
  #filterGroupAnalytics .schedule-period-label {
    min-width: 0 !important;
    width: auto;
    text-align: center;
    flex: 1;
    font-size: 11px;
  }
  .analytics-export-btns {
    flex: 0 0 100%;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
  }
  .analytics-export-btns .ar-export-btn-sm {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 80px;
    padding: 6px 8px;
    font-size: 11px;
  }

  /* ── Schedule group: single scrollable row ── */
  #filterGroupSchedule {
    flex: 0 0 100%;
    flex-wrap: nowrap;
    gap: 5px;
    align-items: center;
    order: 3;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #filterGroupSchedule .schedule-period-label {
    flex: 1;
    text-align: center;
    min-width: 80px;
    white-space: nowrap;
  }
  #filterGroupSchedule .filter-select-sm { font-size: 14px; flex-shrink: 0; }

  /* ── Funnel group: sort row 1, search+buttons row 2 ── */
  #filterGroupFunnel {
    flex: 0 0 100%;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    order: 3;
  }
  .filter-funnel-sort {
    flex: 0 0 100%;
    flex-wrap: nowrap;
    gap: 4px;
  }
  /* Search + buttons on the same row */
  .filter-funnel-search { flex: 0 0 auto; min-width: 0; }
  #funnelSearch {
    width: 114px !important;
    font-size: 16px;
    box-sizing: border-box;
  }
  #funnelSearch:focus { width: 140px !important; }
  .funnel-btn-row {
    flex: 1 1 auto;
    flex-shrink: 0;
    gap: 5px;
    justify-content: flex-end;
  }
  .funnel-btn-row .funnel-email-btn { font-size: 12px; padding: 7px 10px; }

  /* ── Clients group: one full-width row ── */
  #filterGroupClients {
    flex: 0 0 100%;
    flex-wrap: nowrap;
    gap: 5px;
    align-items: center;
    order: 4;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #filterGroupClients .search-input {
    flex: 1 1 auto;
    min-width: 80px;
    width: auto !important;
    font-size: 16px;
  }
  #filterGroupClients .filter-select {
    flex-shrink: 0;
    width: auto !important;
    font-size: 14px;
  }
  #filterGroupClients .view-toggle-btn { flex-shrink: 0; }
}

/* ── Sections / padding ────────────────────────────────────── */
@media (max-width: 900px) {
  .analytics-section, .schedule-section, .clients-section { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 640px) {
  .analytics-section { padding: 10px 10px 0; }
  .schedule-section  { padding: 10px 10px 0; }
  .clients-section   { padding: 10px 10px 60px; }
}

/* ── Charts ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .chart-card { padding: 12px; }
  .chart-card-header { margin-bottom: 10px; }
  .chart-title { font-size: 13px; }
  .chart-wrap { height: 220px; }
  .chart-card-tall .chart-wrap { height: 260px; }
}

/* ── Client cards ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .clients-grid { grid-template-columns: 1fr; gap: 12px; }
  .client-actions { gap: 5px; }
  .client-actions .btn-icon { flex: 1 1 auto; justify-content: center; font-size: 11px; }
}

/* ── Modals ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%;
    max-height: 92vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    animation: modalInMobile 0.25s ease;
  }
  @keyframes modalInMobile {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
  }
  .modal.modal-sm, .modal.modal-lg { max-width: 100%; }
  .modal-header { padding: 16px 18px 12px; }
  .modal-body   { padding: 16px 18px 20px; }
  .form-row     { grid-template-columns: 1fr; gap: 0; }
  .form-actions { flex-direction: column-reverse; gap: 8px; }
  .form-actions button { width: 100%; justify-content: center; min-height: 44px; }
  .form-input, select.form-input, textarea.form-input { font-size: 16px; }
}

/* ── Schedule column view ──────────────────────────────────── */
@media (max-width: 900px) {
  .sched-cols { gap: 3px; }
  .sched-col-date { font-size: 16px; }
  .sched-slot-name { font-size: 10px; }
  .schedule-header-controls { gap: 4px; }
  .schedule-period-label { min-width: 90px; font-size: 11px; }
}

@media (max-width: 640px) {
  .schedule-visual-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sched-cols { min-width: 520px; }
  .schedule-header-controls { flex-wrap: wrap; row-gap: 6px; }
  .filter-select-sm { font-size: 16px; }
  .sched-cal-cell { min-height: 48px; padding: 4px; }
  .sched-cal-date { font-size: 11px; }
  .sched-legend { gap: 8px 12px; }
}

/* ── History / session log table ───────────────────────────── */
@media (max-width: 640px) {
  .history-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .history-table { min-width: 480px; }
  .history-table th, .history-table td { padding: 8px 8px; }
}

/* ── Forms / Schedule list ─────────────────────────────────── */
@media (max-width: 640px) {
  .schedule-row { flex-wrap: wrap; }
  .schedule-row select, .schedule-row input { min-width: 0; font-size: 16px; }
  .resched-pickers { grid-template-columns: 1fr; gap: 10px; }
}

/* ── Analytics header ──────────────────────────────────────── */
@media (max-width: 640px) {
  .analytics-header { flex-wrap: wrap; gap: 8px; }
  .section-title { font-size: 16px; }
  .clients-controls { width: 100%; justify-content: stretch; }
  .search-input { flex: 1; width: auto; }
}

/* ── Workout builder ───────────────────────────────────────── */
@media (max-width: 640px) {
  .wb-layout { grid-template-columns: 1fr; gap: 14px; }
  .wb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wb-table { min-width: 480px; }
  .wb-name-input { max-width: 100% !important; }
  .wb-filter-bar { flex-wrap: wrap; gap: 8px; }
}