/* ============================================================
   CREWTHAT — MOBILE SWEEP
   ------------------------------------------------------------
   Loaded after app-shell.css on every daily-driver page.
   Targets ≤720px (small tablets) and ≤480px (phones).
   Goals:
     - Touch targets ≥44px on phones
     - No horizontal scroll on the page (only deliberately
       scrolling sub-regions like the Pipeline rail)
     - Modals fit phone viewport
     - Tables become readable cards
     - Punchlist room rail / pull queue / task rows stay
       legible at narrow widths
   ============================================================ */

/* === Universal touch-target floor on phones === */
@media (max-width: 480px) {
  .btn,
  .filter-chip,
  .icon-btn,
  .view-toggle button,
  .verify-banner-btn,
  .modal-close,
  .modal-footer button,
  button.primary,
  button.secondary {
    min-height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .btn { font-size: 14px; }
  .filter-chip { font-size: 12px; padding: 8px 12px; }

  /* Inputs / textareas — phone-friendly */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="number"],
  input[type="password"],
  input[type="url"],
  select,
  textarea,
  .field-input,
  .field-select,
  .field-textarea {
    font-size: 16px; /* prevents iOS zoom on focus */
    min-height: 40px;
  }

  /* Topbar gets a tighter look on phones */
  .topbar { padding: 0 12px; gap: 10px; }
  .icon-btn { width: 40px; height: 40px; }
}

/* === Modals — ALL pages === */
@media (max-width: 600px) {
  .modal,
  .modal-card,
  .modal-backdrop > * {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 80px) !important;
    width: 100% !important;
  }
  .modal-header,
  .modal-body,
  .modal-footer { padding: 14px 16px; }
  .modal-title { font-size: 18px; }
  .modal-footer { flex-wrap: wrap; gap: 8px; }
  .modal-footer .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
}

/* === Content shrinks earlier on phones === */
@media (max-width: 480px) {
  .content { padding: 14px 12px; }
  .content-header { gap: 10px; margin-bottom: 14px; }
  .content-title-group h1 { font-size: 26px; }
  .stats-row { gap: 8px; }
  .stat-tile { padding: 12px 14px; }
  .stat-tile-value { font-size: 28px; }
  .panel-header { padding: 12px 14px; flex-wrap: wrap; }
  .panel-body { padding: 12px 14px; }
  .panel-title { font-size: 15px; }
}

/* === Generic data-table → card behaviour at ≤600px ===
   Wrap any .data-table in <div class="responsive-scroll">
   to keep the existing layout but allow horizontal scroll
   instead of overflow.  Pages that opt in to a card layout
   add class="rt-cards" on the table itself. */
.responsive-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.responsive-scroll > .data-table { min-width: 560px; }

@media (max-width: 600px) {
  .rt-cards thead { display: none; }
  .rt-cards, .rt-cards tbody, .rt-cards tr, .rt-cards td {
    display: block;
    width: 100%;
  }
  .rt-cards tr {
    border: 1px solid var(--line);
    border-radius: 6px;
    margin-bottom: 8px;
    background: var(--bg-2);
  }
  .rt-cards td {
    border: none !important;
    padding: 6px 12px;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .rt-cards td:first-child { padding-top: 12px; }
  .rt-cards td:last-child  { padding-bottom: 12px; }
  .rt-cards td::before {
    content: attr(data-label);
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 10px;
    color: var(--ink-faint);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    flex-shrink: 0;
  }
}

/* === jobs.html — pipeline === */
@media (max-width: 1200px) {
  .pipeline { grid-template-columns: repeat(6, 240px) !important; padding-bottom: 10px; }
}
@media (max-width: 720px) {
  .pipeline { grid-template-columns: repeat(6, 200px) !important; gap: 8px; }
  .pipeline .column { min-height: 280px; }
  .pipeline .column-header { padding: 10px 12px; font-size: 12px; }
}
@media (max-width: 480px) {
  .pipeline { grid-template-columns: repeat(6, 180px) !important; }
  .pipeline .column-header { padding: 9px 10px; }
}

/* === jobs.html / job-detail.html — detail KV grid === */
@media (max-width: 600px) {
  .detail-kv-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .detail-kv-grid > .label,
  .detail-kv-grid .label {
    font-size: 10px !important;
    color: var(--ink-faint) !important;
    margin-bottom: -2px;
  }
}

/* === job-detail.html — photo grid === */
@media (max-width: 480px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
}

/* === templates.html — card grid === */
@media (max-width: 480px) {
  .tpl-grid { grid-template-columns: 1fr !important; gap: 10px; }
}

/* === team.html — roster table; column collapse approach ===
   The <table> is React-rendered with inline styles, so we can't
   easily add data-label per <td>.  Instead, on small screens we
   hide columns that aren't essential at-a-glance and shrink the
   font.  Order is: 1 Email, 2 Role, 3 Shop, 4 Status, 5 Invited-by,
   6 Invited, 7 Last sign-in, 8 Actions. */
@media (max-width: 900px) {
  .team-roster table { font-size: 12px; }
  /* hide Shop, Invited-by */
  .team-roster table thead th:nth-child(3),
  .team-roster table thead th:nth-child(5),
  .team-roster table tbody td:nth-child(3),
  .team-roster table tbody td:nth-child(5) { display: none; }
}
@media (max-width: 720px) {
  /* additionally hide Last sign-in, Invited, and shrink padding */
  .team-roster table thead th:nth-child(6),
  .team-roster table thead th:nth-child(7),
  .team-roster table tbody td:nth-child(6),
  .team-roster table tbody td:nth-child(7) { display: none; }
  .team-roster table thead th { padding: 6px 6px !important; font-size: 8px !important; }
  .team-roster table tbody td { padding: 8px 6px !important; }
  .team-roster table tbody td button { padding: 6px 8px !important; font-size: 9px !important; }
}
@media (max-width: 480px) {
  /* Hide actions column behind a tap on the row instead — keep
     Resend/Copy/Remove visible by stacking under the email cell. */
  .team-roster table tbody td:nth-child(8) {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-top: 1px dashed var(--line);
    padding-top: 6px !important;
  }
}

/* === team.html — invite form & shop-join section === */
@media (max-width: 600px) {
  .team-invite-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .team-invite-row > * { width: 100% !important; }
}

/* === chat.html — bigger touch targets in sidebar === */
@media (max-width: 720px) {
  .chat-shell .ch-row { padding: 12px 14px !important; }
  .chat-shell .ch-row .hash { font-size: 16px; }
  .chat-shell .ch-row .ttl { font-size: 14px; }
  .chat-shell .composer textarea { font-size: 16px !important; }
  .chat-shell .composer .send { min-height: 44px; padding: 0 18px; }
  /* Make hover-only actions tappable on mobile */
  .chat-shell .ch-row .ch-actions { opacity: 1 !important; }
  .chat-shell .ch-row .ch-actions button { padding: 6px 8px; font-size: 11px; }
  .chat-shell .msg .actions { opacity: 1 !important; }
}

/* === timesheet.html — entry grid === */
@media (max-width: 720px) {
  .ts-entry {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .ts-entry > * {
    text-align: left !important;
  }
  .crew-group-header .totals {
    gap: 12px !important;
    flex-wrap: wrap;
  }
}

/* === punchlist.html — run header layout on mobile ===
   Desktop puts the run name on the left and the cable-badge cluster
   (capped at 240px) on the right of the same flex row.  On a phone
   that 240px-wide cluster eats most of the width and squeezes the
   name to nothing.  Switch the header to wrap so the cables drop
   below the name, and let the name span the full width. */
@media (max-width: 720px) {
  body[data-page="punchlist"] .run-header {
    flex-wrap: wrap !important;
  }
  body[data-page="punchlist"] .run-header > div:first-of-type {
    /* The "left" column that contains run.note + #conduit + ✎ */
    flex: 1 1 100% !important;
    min-width: 0;
  }
  body[data-page="punchlist"] .run-name-label {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.18 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    flex: 1 1 auto !important;
    font-size: 16px !important;
  }
  body[data-page="punchlist"] .run-cable-cluster {
    max-width: 100% !important;
    justify-content: flex-start !important;
    flex: 1 1 100% !important;
    margin-top: 4px;
  }
}

/* === punchlist.html — global mobile patches ===
   The punchlist is mostly inline-style React, but a number of
   wrapper divs use class names we can target.  Punchlist also
   carries window.CT_PAGE='punchlist' so we can scope. */
@media (max-width: 720px) {
  /* Sticky tier-filter bar rolls down a bit so it doesn't crash
     into the topbar */
  body[data-page="punchlist"] .tier-filter-bar {
    position: sticky; top: var(--topbar-h, 56px);
  }
  /* Pull Queue rows: full-width grouping checkbox tap area */
  body[data-page="punchlist"] .pull-queue-row {
    padding: 12px !important;
    gap: 10px !important;
  }
  body[data-page="punchlist"] .pull-queue-row input[type="checkbox"] {
    width: 22px !important; height: 22px !important;
  }
  /* Room rail collapses; pulls list takes full width */
  body[data-page="punchlist"] .room-rail {
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap !important;
    padding-bottom: 6px;
  }
  body[data-page="punchlist"] .room-card {
    flex: 0 0 auto !important;
    min-width: 132px !important;
  }
}

/* === Activity feed / notification panel === */
@media (max-width: 600px) {
  .activity-modal,
  .activity-list { max-height: clamp(260px, 60vh, 480px) !important; }
}

/* === Forms with side-by-side fields === */
@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr !important; }
}

/* === Print-friendly cheat-sheet hides bottom tabs === */
@media print {
  .bottom-tabs, .topbar, .sidebar { display: none !important; }
}

/* === Bottom-tab safe-area for iPhones with home indicator === */
@supports (padding: max(0px)) {
  .bottom-tabs {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
    height: calc(var(--bottom-tabs-h, 64px) + env(safe-area-inset-bottom, 0px));
  }
  .app-shell {
    padding-bottom: max(var(--bottom-tabs-h, 64px), calc(var(--bottom-tabs-h, 64px) + env(safe-area-inset-bottom, 0px)));
  }
}

/* === PWA standalone-mode polish ===
   Engaged when the page is launched from the home screen / installed
   app, indicated by html.pwa-standalone (set by pwa.js).  We:
     - Add top padding equal to the device safe-area inset so the
       status bar doesn't crash into the topbar / page header.
     - Hide any "Open in browser" hint elements pages may render.
     - Tighten the topbar so the home-screen experience feels native. */
html.pwa-standalone body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
html.pwa-standalone .topbar {
  /* When launched standalone, the iOS status bar overlays the page
     because we use 'black-translucent'. Push our topbar down. */
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--topbar-h, 56px) + env(safe-area-inset-top, 0px));
}
html.pwa-standalone .show-only-in-browser { display: none !important; }
html:not(.pwa-standalone) .show-only-in-pwa { display: none !important; }

/* "Install CrewThat" prompt — pages can render <button class="pwa-install-btn">
   anywhere; pwa.js sets html.pwa-installable while a beforeinstallprompt
   event is queued.  Hidden by default and only revealed when both
   (a) the prompt is available AND (b) we're not already running standalone. */
.pwa-install-btn { display: none; }
html.pwa-installable:not(.pwa-standalone) .pwa-install-btn { display: inline-flex; }

/* === Presence indicator pulse (used by inline JSX) === */
@keyframes pl-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* === Fixed action button (FAB) base — pages can opt in === */
.fab {
  position: fixed;
  right: 18px;
  bottom: calc(var(--bottom-tabs-h, 64px) + 18px + env(safe-area-inset-bottom, 0px));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  border: none;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  box-shadow: 0 8px 22px -4px rgba(204, 31, 31, 0.55);
  z-index: 80;
  cursor: pointer;
}
@media (max-width: 720px) { .fab.show-mobile { display: flex; } }