/* ============================================================================
   mobile-fixes.css — shared iOS Safari + small-screen overrides
   Loaded by every main WLO page right before </head>. Pages keep their own
   <style> blocks; this file fixes the cross-cutting mobile problems that
   would otherwise need 14 separate per-page edits.
   ============================================================================ */

/* ---- iOS Safari foundations ---- */
html {
  height: 100%;
  -webkit-text-size-adjust: 100%;       /* don't auto-resize text on rotate */
  text-size-adjust: 100%;
}
body {
  overflow-x: hidden;                    /* prevent rubber-banding from creating
                                            a horizontal scrollbar on rotate */
  -webkit-tap-highlight-color: transparent;
}

/* Notched-device safe-area insets (iPhone X+). Pages use .app as their
   outer container, so we pad the sides via env() at any screen size. */
@supports (padding: max(0px, env(safe-area-inset-left))) {
  .app {
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ---- The big one: kill iOS auto-zoom on input focus ----
   iOS Safari zooms the page if it focuses an input/textarea/select with a
   computed font-size below 16px. Every form field in the app uses 11–14px
   for visual density on PC. Bump them to 16px on touch viewports so focus
   stays put. ! important to win cascade against the inline styles. */
@media (max-width: 720px) {
  input, select, textarea, .prompt-input {
    font-size: 16px !important;
  }
  /* Single exception: the classic terminal's prompt-input — the user wants
     terminal-feel and the screen-tap auto-zoom isn't an issue inside a
     code-style input with no focus ring; keep it tight. */
  .prompt-input { font-size: 14px !important; }
}

/* ---- Tables overflow horizontally on small screens ---- */
@media (max-width: 720px) {
  /* Wrap every table in an x-scroll container by making the table itself
     a block-level scroller. This preserves the inline page styles while
     keeping the row off the right edge. */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* keep cells from collapsing */
    white-space: normal;
  }
  /* Within scrolled tables, hold cell widths so the scroll is meaningful */
  table thead, table tbody, table tr { display: table; width: 100%; table-layout: fixed; }
  /* Some specific tables benefit from auto layout instead of fixed
     (lots of variable-length last_action / notes content). */
  table.activity-list thead, table.activity-list tbody, table.activity-list tr {
    table-layout: auto;
  }
}

/* ---- Header rows stack vertically on small screens ---- */
@media (max-width: 720px) {
  header.topbar, header.head, .head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  /* Right-side action button rows wrap rather than overflow */
  .topbar-actions, .topbar .right, .head .seg, .topbar-actions {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
}

/* ---- Stat strip / KPI grids reflow ---- */
@media (max-width: 720px) {
  .stat-strip, .kpis, .quick-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .stat, .kpi { padding: 10px 12px !important; }
  .kpi .v { font-size: 22px !important; }
}

/* ---- Modal width clamps to viewport ---- */
@media (max-width: 720px) {
  .modal {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    padding: 18px !important;
  }
}

/* ---- Drawer inline mode: single column on mobile ---- */
@media (max-width: 720px) {
  .drawer.inline .drawer-body {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .drawer.inline .drawer-section .row2 {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Use dvh for full-screen overlays where vh would be eaten by the
        iOS Safari bottom bar ---- */
@supports (height: 100dvh) {
  .scrim, .drawer-scrim {
    height: 100dvh !important;
  }
}

/* ---- Touch target minimums (Apple HIG: 44pt; we use 36px as a softer
        floor since our buttons sit in dense lists) ---- */
@media (max-width: 720px) {
  button, .chip, a.button-like {
    min-height: 36px;
    line-height: 1.2;
  }
  /* Inline buttons inside dense rows can stay smaller — they're explicit. */
  td.row-actions button,
  .stage-children button,
  .round-stepper button {
    min-height: 28px;
  }
}

/* ---- App padding tighter on small screens ---- */
@media (max-width: 720px) {
  .app {
    padding-top: 14px !important;
    padding-bottom: 60px !important;
  }
}

/* ---- Forecasting / activity table column priority on mobile ----
        Hide the AM column and Last-touched column so the 4 most important
        columns (Candidate, Client, Stage, Stage action) actually fit. The
        hidden data is still in the drawer for any row. */
@media (max-width: 720px) {
  table.activity-list th:nth-child(3),
  table.activity-list td:nth-child(3),
  table.activity-list th:nth-child(6),
  table.activity-list td:nth-child(6) {
    display: none;
  }
}

/* ---- Pitch / blast / cv studio specific tweaks ---- */
@media (max-width: 720px) {
  /* Multi-column dump → stack */
  .dumpbox, textarea.dumpbox, textarea.paste-input { min-height: 140px; }
  /* Heavy tab bars wrap */
  .tabbar, .seg { flex-wrap: wrap; }
}

/* ---- Inputs in dense rows (Easy Avails name + active-pick) wrap ---- */
@media (max-width: 720px) {
  .candidate-row { flex-direction: column !important; align-items: stretch !important; }
  .candidate-row .name-wrap, .candidate-row select { width: 100% !important; flex-basis: 100% !important; }
}

/* ---- Drawer save row (forecasting) wraps on mobile ---- */
@media (max-width: 720px) {
  .drawer-body > div[style*="display:flex"] { flex-wrap: wrap !important; gap: 8px !important; }
}