/* ============================================================
   AdPilots — shared MOBILE layer
   ------------------------------------------------------------
   Linked LAST on every app page so it wins over each page's own
   <style> block. Pages already had 700/800px breakpoints, but they
   only "squeezed things until they fit" (centered topbar, chips
   wrapping onto 3 rows, grids crushed). This layer restyles the
   shared shell for phones: one calm column, swipeable strips instead
   of wrapped rows, comfortable touch targets, readable type.

   Shared shell classes (present on all 12 app pages):
     .wrap .topbar .side-nav .side-tab .card .btn
   Extras handled where present: .kpis .kpi .grid-2 .filters .chip
   ============================================================ */

/* ---------- Phones ---------- */
@media (max-width: 640px) {

  /* --- page frame: nothing may push the page sideways --- */
  html, body { overflow-x: hidden !important; }
  .wrap { padding: 12px 12px 96px !important; max-width: 100% !important; }
  img, svg, canvas, video { max-width: 100%; }

  /* --- TOP BAR ---
     was: grid-template-columns:1fr + justify-items:center → everything
     stacked and centred (the messy look). Now: title left, actions right. */
  .topbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    justify-items: start !important;
    text-align: left !important;
    gap: 8px !important;
    padding: 10px 0 !important;
  }
  .topbar .brand { justify-self: start !important; margin: 0 !important; }
  .topbar h1 { font-size: 18px !important; line-height: 1.25 !important; margin: 0 !important; }
  .topbar .sub, .topbar p { font-size: 12px !important; margin: 0 !important; }
  /* the long email is noise on a 375px screen — the avatar/logout stay.
     Most shell pages render it as <div data-user-email> (no id/class). */
  .topbar [id*="email"], .topbar .user-email,
  .topbar [data-user-email] { display: none !important; }

  /* --- SIDE NAV → sticky, swipeable tab strip (no wrapping) --- */
  .side-nav {
    position: sticky !important; top: 0 !important; z-index: 30 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    gap: 4px !important;
    padding: 6px 4px !important;
    margin: 0 -12px 12px !important;   /* bleed to the screen edges */
    background: #fff !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
  }
  .side-nav::-webkit-scrollbar { display: none; }

  .side-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
    font-size: 13px !important;
    padding: 9px 12px !important;   /* ≥40px tall touch target */
    border-radius: 10px !important;
  }
  /* section headings inside the nav make no sense in a horizontal strip */
  .side-nav-section { display: none !important; }

  /* --- FILTER / CHIP ROWS → one swipeable row, not 3 wrapped rows ---
     Page-local variants included: #platform-pills (reports), .update-filter
     (updates), .chat-chips (chat-ai), .filter-group (campaigns). */
  .filters, .chips, .chip-row, .filter-row,
  #platform-pills, .update-filter, .chat-chips, .filter-group {
    display: flex !important;
    max-width: 100%;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    padding-bottom: 2px !important;
  }
  .filters::-webkit-scrollbar,
  .chips::-webkit-scrollbar,
  .chip-row::-webkit-scrollbar,
  .filter-row::-webkit-scrollbar,
  #platform-pills::-webkit-scrollbar,
  .update-filter::-webkit-scrollbar,
  .chat-chips::-webkit-scrollbar,
  .filter-group::-webkit-scrollbar { display: none; }
  .filters > *, .chips > *, .chip-row > *, .filter-row > *,
  #platform-pills > *, .update-filter > *, .chat-chips > *, .filter-group > * { flex: 0 0 auto !important; }
  .chip, .chat-chip, .update-filter button { white-space: nowrap !important; }
  .chip { font-size: 12px !important; padding: 7px 11px !important; }

  /* --- KPI CARDS → 2 per row (readable, not crushed) --- */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .kpi { padding: 12px !important; min-width: 0 !important; }
  .kpi h3, .kpi .label { font-size: 11px !important; }
  .kpi .value, .kpi strong { font-size: 18px !important; }

  /* --- ANY multi-column grid → single column --- */
  .grid, .grid-2, .grid-3, .grid-4,
  .cards, .card-grid, .two-col, .three-col,
  .template-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* --- CARDS --- */
  .card {
    padding: 14px !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    min-width: 0 !important;
  }
  .card h2 { font-size: 14px !important; }
  .card .desc { font-size: 12px !important; }

  /* --- BUTTONS: never break a Thai label across lines --- */
  .btn, button, .btn-mini, .btn-primary, .btn-secondary { white-space: nowrap !important; }
  .btn, button { min-height: 38px; }
  .btn-mini { min-height: 32px; }
  .btn-block { width: 100% !important; }

  /* --- TABLES scroll sideways instead of squashing --- */
  table { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  table th, table td { white-space: nowrap !important; }

  /* --- FORMS: full width, and ≥16px so iOS doesn't zoom on focus --- */
  input, select, textarea { font-size: 16px !important; max-width: 100% !important; }
  .field, .form-row { width: 100% !important; }

  /* --- charts/canvas must not overflow --- */
  .chart, .chart-wrap, canvas { max-width: 100% !important; }
}

/* ---------- Page-local components (from the full-app audit) ---------- */
@media (max-width: 640px) {
  /* connect.html — .conn-card is a rigid icon|body|actions row; at 375px the
     body column collapsed to a few px. Let it wrap; actions go full-width. */
  .conn-card { flex-wrap: wrap !important; padding: 16px !important; }
  .conn-card .actions-row {
    flex-direction: row !important; flex-wrap: wrap !important;
    width: 100% !important; justify-content: flex-start !important;
  }
  #metaRedirectBtn { font-size: 12px !important; padding: 8px 12px !important; }

  /* standalone shells (connect/settings/team/campaigns) kept desktop padding */
  .conn-shell, .settings-shell, .team-shell, .camp-shell { padding: 16px 12px 60px !important; }
  .conn-card, .settings-section, .team-card { padding: 16px !important; }
  .content-area { padding: 14px 12px !important; }

  /* settings.html — password + "ลบบัญชีถาวร" were squeezed onto one row */
  #del-form { flex-direction: column !important; align-items: stretch !important; }
  #del-form .btn, #del-form button { align-self: flex-start; }

  /* ab-test.html — nested paddings left ~54px per metric cell */
  .ab-test-card { padding: 12px 14px !important; }
  .ab-variant { padding: 10px !important; }
  .ab-metric { padding: 6px 8px !important; }
  .ab-metric .v { font-size: 13px !important; }

  /* placement.html — 128px|1fr|96px grid left a sliver for the bar chart */
  .share-row { grid-template-columns: 84px 1fr auto !important; gap: 8px !important; }
  .share-name { font-size: 11.5px !important; }

  /* reports.html — recent-report rows: long Thai filenames were crushed */
  .ch-row { flex-wrap: wrap !important; }
  .ch-row .ch-time { display: none !important; }

  /* chat-ai.html — 100vh math put the input below the fold on small phones */
  .chat-shell { height: calc(100dvh - 230px) !important; min-height: 360px !important; }

  /* updates.html — two long nowrap buttons overflowed the card */
  .update-actions { flex-wrap: wrap !important; }

  /* wizard.html — stepper crushed; two side-by-side nav buttons overflowed */
  .stepper { gap: 6px !important; }
  .step { padding: 10px 8px !important; font-size: 12px !important; }
  #launchBtnRow, #reviewBtnRow { flex-direction: column !important; }

  /* admin.html (app-shell): keep side padding; move the fixed view-switcher
     to the bottom so it stops covering the topbar bell/badge */
  .app-shell .topbar { padding: 10px 12px !important; }
  .view-switcher { top: auto !important; bottom: 12px !important; }

  /* toasts were min-width:280px anchored right — clipped on 375px screens */
  #toast-container { left: 12px !important; right: 12px !important; }
  .toast { min-width: 0 !important; max-width: 100% !important; }

  /* login/register — 3-up OAuth buttons: keep labels inside on 320-375px */
  .oauth-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .oauth-btn { padding: 10px 6px !important; font-size: 12px !important; gap: 4px !important; }

  /* payment.html — absolute TH/EN toggle overlapped the header row */
  .pay-shell { padding-top: 60px !important; }
}

/* ---------- App control bar (dashboard + all 12 shell pages) ----------
   These use their OWN classes (.controls-bar / .filter-btn / .platform-switch /
   .objective-chip / .btn-ai-hero), NOT the generic .filters/.chip, so the
   rules above didn't reach them — the date presets wrapped onto 3 rows and the
   whole bar centred. Turn each strip into one swipeable row. */
@media (max-width: 640px) {
  /* was: grid minmax(0,1fr) auto → stack the two groups, left-aligned */
  .controls-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-items: start !important;
    gap: 10px !important;
  }

  /* date-preset chips: were flex-wrap:wrap (inline) → one swipeable row */
  #date-chips, .date-chips,
  .platform-switch {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100% !important;
    gap: 6px !important;
    padding-bottom: 2px !important;
    justify-content: flex-start !important;
  }
  #date-chips::-webkit-scrollbar,
  .date-chips::-webkit-scrollbar,
  .platform-switch::-webkit-scrollbar { display: none; }
  #date-chips > *, .date-chips > *, .platform-switch > * { flex: 0 0 auto !important; }

  .filter-btn { white-space: nowrap !important; padding: 7px 12px !important; font-size: 13px !important; }
  .platform-switch > * { white-space: nowrap !important; }

  /* the left group is a column (date row + platform row); keep it full width */
  .controls[style*="column"] { width: 100% !important; align-items: stretch !important; }

  /* the RIGHT action group (objective / AI Briefing / status / refresh…) is a
     row with too many items — make it one left-aligned swipeable row too.
     Target rows only (the left column has inline flex-direction:column). */
  .controls:not([style*="column"]) {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100% !important;
    justify-self: start !important;
    justify-content: flex-start !important;
  }
  .controls:not([style*="column"])::-webkit-scrollbar { display: none; }
  .controls:not([style*="column"]) > * { flex: 0 0 auto !important; }

  .objective-chip, .btn-ai-hero, .status-pill { white-space: nowrap !important; }
  .btn-ai-hero { padding: 8px 12px !important; }
  #controls-card { padding: 12px !important; }
  #last-sync { margin-left: 4px !important; }
}

/* ---------- Small phones ---------- */
@media (max-width: 380px) {
  .wrap { padding: 10px 10px 96px !important; }
  .kpis { grid-template-columns: 1fr !important; }   /* 2-up gets too tight */
  .topbar h1 { font-size: 16px !important; }
  .side-tab { font-size: 12px !important; padding: 8px 10px !important; }
}