/* ===== Newton Ops shared mobile styles =====
   Everything here is scoped to @media (max-width: 768px),
   so desktop rendering is completely unchanged.
*/

@media (max-width: 768px) {

  /* Kill sideways scroll/jank at the page level */
  html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }

  body { padding-left: 10px !important; padding-right: 10px !important; }

  /* Media never wider than the screen */
  img, canvas, video, svg { max-width: 100%; height: auto; }

  /* Wide tables become swipeable instead of blowing out the layout */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  table.mobile-ok { display: table; }   /* opt-out hook for small tables */

  /* Inputs: 16px stops iOS auto-zoom on focus; bigger tap targets */
  input, select, textarea { font-size: 16px !important; min-height: 42px; }
  button, .btn { min-height: 42px; }

  /* Stat card rows: two-up grid instead of a long squeezed row */
  .stats-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .stat-card { min-width: 0 !important; padding: 12px 12px !important; }
  .stat-card .stat-value { font-size: 22px !important; }

  /* Tab bars scroll horizontally instead of wrapping into a wall */
  .nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tab { flex: 0 0 auto; white-space: nowrap; }

  /* Modals: near-full-screen sheets with internal scroll */
  .modal-overlay > div,
  .modal, .modal-box, .modal-content {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Common toolbar/filter rows stack instead of overflowing */
  .toolbar, .filters { flex-wrap: wrap !important; gap: 8px !important; }

  /* Long code/pre blocks scroll */
  pre { overflow-x: auto; max-width: 100%; }

  /* ===== Template-specific tuning (selectors only exist on their pages) ===== */

  /* Field trackers (all 13) + shared form layouts: forms stack single-column */
  .form-grid, .form-grid-3, .field-grid, .form-row,
  .approval-block, .safety-obs-row, .row {
    grid-template-columns: 1fr !important;
  }

  /* Compact meta rows: two-up reads fine on phones */
  .meta, .meta-row { grid-template-columns: 1fr 1fr !important; }

  /* Dashboard columns stack */
  .main-grid, .main-grid.three { grid-template-columns: 1fr !important; }

  /* Field tracker tab bar scrolls sideways */
  .tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab { flex: 0 0 auto; white-space: nowrap; }

  /* Phase toggles scroll instead of squeezing */
  .phase-toggle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .phase-btn { flex: 0 0 auto; white-space: nowrap; }

  /* Header/banner rows wrap instead of overflowing */
  .header, .job-banner, .vh, .wcard-head, .fgroup,
  .safety-form-header, .safety-field, .safety-sig-field,
  .safety-weather-toggle, .safety-yesno, .sig-pad-btns, .ch {
    flex-wrap: wrap !important;
    row-gap: 8px;
  }

  /* Gantt/timeline strips swipe sideways */
  .gantt, .gantt-wrap, .gantt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Fixed-width heroes/panels shrink to screen */
  .hero { width: auto !important; max-width: 100% !important; }
}

/* ===== Global theme support (all screen sizes) ===== */

/* Generic light mode for pages without their own light styling —
   same proven inversion technique the field trackers use */
html.ops-invert-global { filter: invert(1) hue-rotate(180deg); background: #f5f2ec; }
html.ops-invert-global img, html.ops-invert-global canvas,
html.ops-invert-global video, html.ops-invert-global iframe,
html.ops-invert-global #opsGlobalCluster, html.ops-invert-global #opsPwaNav {
  filter: invert(1) hue-rotate(180deg);
}
@media print { html.ops-invert-global { filter: none !important; } }

/* View dropdown that replaces cluttered tab bars */
.ops-view-select {
  appearance:none; -webkit-appearance:none;
  background:rgba(13,23,40,.92) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233ba8d8' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;
  color:#e8eef7; border:1px solid #3ba8d8; border-radius:10px;
  padding:10px 38px 10px 14px; font-size:15px; font-weight:700; cursor:pointer;
  max-width:100%;
}
body.ops-light-generic .ops-view-select,
body.light .ops-view-select { background-color:#ffffff; color:#182234; }

/* ===== TV dashboard on phones: stack the quadrants ===== */
@media (max-width: 768px) {
  html:has(#grid), html:has(#grid) body { overflow: auto !important; height: auto !important; }
  #wrap { height: auto !important; }
  #grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: auto !important;
  }
  #grid .quad {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 240px;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #finCards { grid-template-columns: 1fr !important; }
  #finCards > div { padding: 12px 14px !important; }
}