/* ---------------------------------------------------------------------
   Mobile layout.

   The pages were built desktop-first, so rather than rewriting each one
   this adapts the shared patterns at narrow widths. Loaded last so it
   overrides the per-page styles.

   The breakpoint is 760px: below that a two-column layout stops being
   readable on a phone held in one hand.
   --------------------------------------------------------------------- */

@media (max-width: 760px) {

  main { padding: 16px 12px 60px !important; }

  /* Header: stack the brand and the user/nav so neither is squashed */
  header {
    padding: 10px 14px !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  header nav { display: flex; flex-wrap: wrap; gap: 4px; }
  header nav a { margin-left: 0 !important; margin-right: 14px; }
  header .mark { font-size: 10px !important; }

  /* Two-column form rows become single column */
  .row2, .row3, .meta-grid { grid-template-columns: 1fr !important; }

  /* Tiles: one per row rather than a cramped grid */
  .hub-grid, .modules, .stats-grid, .summary-grid {
    grid-template-columns: 1fr !important;
  }

  /* Inputs need to be at least 16px or iOS zooms in on focus, which
     throws the whole layout off and is very hard to recover from. */
  input, select, textarea { font-size: 16px !important; }

  /* iOS gives date and time inputs its own styling — centred text, a
     different height, and its own padding — so they sit oddly next to
     ordinary text fields. Strip that and match the rest. */
  input[type="date"], input[type="time"], input[type="number"] {
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
    min-height: 44px;
    padding: 10px 12px !important;
    width: 100%;
    background-clip: padding-box;
  }
  /* Safari wraps the value in its own container, which is what actually
     centres the text. */
  input[type="date"]::-webkit-date-and-time-value,
  input[type="time"]::-webkit-date-and-time-value {
    text-align: left;
  }
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0.5;
  }

  /* iOS has its own time picker, so the custom clock button is
     redundant on a phone and only crowds the row. */
  .time-picker-btn { display: none !important; }
  .time-row, .time-field { display: block !important; }

  /* Touch targets: 44px is Apple's minimum for a reliable tap */
  button, .row-actions button { min-height: 40px; padding: 10px 14px !important; }
  .row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .row-actions button { margin: 0 !important; }

  /* Wide tables scroll sideways rather than forcing the page wide */
  table { display: block; overflow-x: auto; white-space: nowrap; }

  /* --- Estimate -----------------------------------------------------
     The cost table is too wide for a phone, so the columns that are
     only context get hidden and the rest scroll sideways.

     HIDDEN BY CLASS, NEVER BY nth-child. The old rules named positions
     — nth-child(8) with a comment saying "mark-up" — and were written
     when the table had nine columns. Adding Allowed and then Spend
     shifted everything along, so the phone was quietly hiding the COST
     column and showing Mark-up instead: the opposite of the intent, and
     invisible unless you counted. A class says which column it means
     and stays right however many are added.

     Kept on a phone: description, quantity, unit cost, allowed, cost,
     spend and sell — what the job is costing against what it was
     allowed. Dropped: category and supplier (context, not figures),
     unit (a label, not part of the sum) and mark-up (a commercial
     figure, not a site one). Everything is still on the desktop and in
     the export. */
  #tableWrap table { white-space: normal; }
  #tableWrap .c-cat,
  #tableWrap .c-supp,
  #tableWrap .c-unit,
  #tableWrap .c-markup { display: none; }
  #tableWrap th:first-child, #tableWrap td:first-child { min-width: 130px; }
  .summary { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .stat { padding: 10px 12px !important; }
  .stat .val { font-size: 16px !important; }
  #sheetTabs { overflow-x: auto; flex-wrap: nowrap !important; }
  .sheet-tab { white-space: nowrap; }

  /* Toolbars wrap instead of overflowing */
  .toolbar, .filter-bar, .intake-controls { gap: 8px !important; }
  .toolbar input[type=text], .filter-bar input[type=text] { min-width: 100% !important; }

  /* Charts and cards */
  .chart-card, .card, .intake-card { padding: 14px !important; }
  .pie-wrap { flex-direction: column; gap: 14px !important; }

  /* Modals fill more of a small screen */
  .modal { max-width: 100% !important; padding: 18px !important; }
  .modal-overlay { padding: 12px !important; }

  /* Signature pads: full width so there's room to actually sign */
  .sig-box canvas, #sigModalCanvas { width: 100% !important; }

  /* Gantt: the grid pane would leave no room for the chart on a phone,
     so narrow it and let the chart take what's left. */
  .grid-pane { width: 190px !important; }
  .g-row .c-date, .g-row .c-dur, .g-row .c-pct { display: none !important; }
  .grid-head .date-head, .grid-head div:nth-child(n+2) { display: none !important; }
  .gantt { height: 60vh !important; }
}

/* Very small screens — older or smaller phones */
@media (max-width: 400px) {
  .grid-pane { width: 140px !important; }
  header nav a { font-size: 12px !important; }
}