/* ============================================================================
   RESPONSIVE + TOUCH LAYER  —  loaded LAST so it cascades over app.css and every
   module stylesheet. Makes the ops dashboard fully usable on iPhone and iPad
   with no build step. Tokens only (see docs/DESIGN-SYSTEM.md).

   Breakpoints:  <=760px = phone / small (matches the nav overlay in shell.css)
                 <=430px = compact phone
   pointer:coarse = any touch device (iPhone + iPad), regardless of width.
   ============================================================================ */

/* ---- universal touch niceties (harmless on desktop) ---- */
button, .btn, .btn-primary, .filter-btn, .lead-chip, .lead-mode, .nav-it,
.tab, .rtab, .subtab, .icon-btn, .focus-chip, .doc-status, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* mobile drawer backdrop — hidden until the nav drawer is opened on a phone */
.nav-scrim { display: none; }

/* ============================================================================
   TOUCH DEVICES — iPhone + iPad (ergonomics that apply at any width)
   ============================================================================ */
@media (pointer: coarse) {
  /* iOS / iPadOS zoom the whole page when a focused field is < 16px. Force 16px on
     every control so tapping into an input never triggers an unwanted zoom. */
  input, select, textarea { font-size: 16px !important; }

  /* Comfortable hit areas for the desktop UI's small controls (Apple HIG 44px).
     Size comes from the L1 token --tap-min (css/tokens.css) — edit the token, not here.
     .vk-toolbar button / .vk-toolbar select cover the viewkit toolbar structurally,
     so future toolbar controls are included without re-enumeration. */
  .icon-btn, .btn, .btn-primary, .cf-range-btn, .doc-status, .doc-open, .doc-act,
  .doc-link, .lead-chip, .lead-mode, .lead-adv, .filter-btn, .focus-chip,
  .stage-arrow, .plan-pin-btn, .plan-launch-btn, .plp-btn, .pg-act, .td-pbtn,
  .jd-nav-btn, .tl-filter, .vk-sort, .vk-gear, .mg-chip,
  .vk-toolbar button, .vk-toolbar select {
    min-height: var(--tap-min, 44px);
    min-width: var(--tap-min, 44px);
  }
  /* table cells ignore min-height; for display:table-cell, height acts as a minimum */
  th.th-sort { height: var(--tap-min, 44px); }
  /* keep the 26px circle visual but extend the hit area to 44px (26 + 9 + 9);
     the ::after is part of the button, so taps on it still hit .td-check */
  .td-check { position: relative; width: 26px; height: 26px; }
  .td-check::after { content: ''; position: absolute; inset: -9px; }
  .jd-x { font-size: 26px; padding: 2px 6px; }

  /* Hover-only affordances never fire on touch — reveal them permanently. */
  .pg-head .pg-actions { display: inline-flex; }
}

/* ---- touch devices apply :hover on tap and it "sticks" to the last-tapped element,
        leaving a phantom highlight. Neutralize hover *background* feedback (keep the
        real .selected / .active states). ---- */
@media (hover: none) {
  .job-row:hover:not(.selected),
  .td-task:hover:not(.selected),
  .doc-row:hover, .sys-row:hover, .omni-row:hover,
  .ms-row:hover td, .tl-item:hover, .nav-it:hover:not(.active) {
    background: transparent;
  }
}

/* ============================================================================
   PHONE / SMALL  (<=760px)
   ============================================================================ */
@media (max-width: 760px) {
  /* full-bleed: drop the desktop body gutter + centering so content uses the width */
  body { padding: 0; max-width: 100%; }

  /* ---- the sidebar becomes a slide-in drawer in BOTH nav layouts on phones ----
     (specificity is matched to shell.css's :root[data-nav=...] rules so these win) */
  :root[data-nav="side"] .side,
  :root[data-nav="top"]  .side {
    position: fixed; top: 0; left: 0; z-index: 50; height: 100vh;
    width: min(82vw, 264px); box-shadow: var(--shadow-2);
    padding-top: env(safe-area-inset-top);
  }
  :root[data-nav="side"] body:not(.nav-open) .side,
  :root[data-nav="top"]  body:not(.nav-open) .side { display: none; }
  :root[data-nav="side"] body.nav-open .side,
  :root[data-nav="top"]  body.nav-open .side { display: flex; }

  /* the top tab-bar doesn't fit a phone → hide it; the hamburger is the phone nav */
  :root[data-nav="top"] .topnav,
  :root[data-nav="top"] .topsub { display: none; }
  :root[data-nav="side"] #nav-collapse,
  :root[data-nav="top"]  #nav-collapse { display: inline-flex; }

  body.nav-open .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .45);
  }
  /* roomier nav rows for thumbs */
  .nav-it { padding-top: 9px; padding-bottom: 9px; }
  .nav-grp-h { padding-top: 12px; }

  /* ---- top bar: one tidy, safe-area-aware row ---- */
  .topbar {
    gap: 7px; flex-wrap: nowrap; min-height: 46px;
    padding: calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) 6px calc(8px + env(safe-area-inset-left));
  }
  .tagline-mini, #nav-mode, .private-badge { display: none; }   /* declutter */
  #brand { font-size: 16px; }
  .topbar-spacer { display: none; }
  #omni { flex: 1 1 auto; margin-left: 4px; min-width: 0; }
  #omni-input, #omni-input:focus { width: 100%; }
  #omni-results { position: fixed; left: 0; right: 0; width: auto; top: 54px; max-height: 62vh; }
  .ticker { flex: 0 0 auto; }
  #syncwrap { margin-left: 4px; }

  /* ---- content: padding + iOS safe areas + room to scroll past the home bar ---- */
  main#panel {
    padding: 12px calc(12px + env(safe-area-inset-right)) calc(64px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  }

  /* ---- KPI row: the desktop uses CSS grid, so the old flex mobile override in
          app.css never applied. Two up on phones. ---- */
  .money-row { grid-template-columns: repeat(2, 1fr); }

  /* tables scroll sideways inside their own box rather than the whole page */
  .money-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* lists get more vertical room on a tall phone */
  .dq-list, .cm-list, .job-rows { max-height: 60vh; }

  /* master-detail modules (leads/decisions/proposals): the desktop side column is hidden on a
     phone; tapping a record reveals its detail as a centered modal popup — most of the screen,
     not all — over a dimmed backdrop (the box-shadow scrim), so the list stays visible behind. */
  .jobs-grid { grid-template-columns: minmax(0, 1fr); }
  .jobs-list, .jobs-grid > * { min-width: 0; }
  .jobs-detail { display: none; }
  .jobs-detail.show {
    display: block; position: fixed; z-index: 60;
    inset: calc(4vh + env(safe-area-inset-top)) 5vw calc(4vh + env(safe-area-inset-bottom)) 5vw;
    background: var(--surface-2); border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--border-radius-lg); overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 0 0 100vmax var(--scrim), var(--shadow-2);
  }
  /* per-view opt-out (cfg.DETAIL_STYLE[view] = 'page'): full-screen, no popup chrome */
  .jobs-detail.show.as-page {
    inset: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--bg);
    padding: calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
  }
  .lead-back-btn { position: sticky; top: 0; z-index: 1; margin-bottom: 10px; }

  /* kanban: near-full-width columns so one is readable + swipeable */
  .lk-col { flex-basis: 82vw; max-width: 300px; }

  /* dropdowns never exceed the screen */
  .theme-menu { max-width: 80vw; }
  .vk-toolbar { gap: 6px; }
  .vk-toolbar .vk-search { flex: 1 1 100%; }
}

/* ============================================================================
   COMPACT PHONE  (<=430px)
   ============================================================================ */
@media (max-width: 430px) {
  .ov-grid { grid-template-columns: 1fr; }
  #brand { font-size: 15px; }
  .lead-tools { margin-left: 0; flex: 1 1 100%; }
  .lead-tools input { min-width: 0; width: 100%; }
  .money-cell { padding: 7px 4px; }
  .mc-n { font-size: 14px; }
}