/* field-fit.css — the field pages at every screen size (owner, screen-size round Oct 23 2026): Hub, Daily Ticket, Get PO,
   My Truck, My Timesheet, Tools, Time Off, My Profile, Safety and the safety forms. Linked last in each page's <head>, so
   it wins over the page's own styles of the same weight.
   Under 600 wide (regular phones) nothing here applies: those pages look and work as before (owner, Oct 25 2026).
   - From 600 wide every control is a 44px tap target (CLAUDE.md); delete / remove buttons keep ~32px on purpose.
   - 600-1023 (unfolded foldables, the iPhone Duo's 669x867, tablets): two-column field groups where they belong together.
   - Wide but short screens (the Duo's 951x585 landscape): slimmer sticky headers so they don't eat the height. */

/* ── Tap targets: 44px from 600 wide up (owner Oct 25 2026: under 600, regular phones, the pages stay exactly as they
   were; the field pages are used by touch, so at 1024 and up the extra 1-10px costs nothing) ── */
@media (min-width: 600px) {
  /* Page header: the logo link home, the header links */
  .app-header .header-brand > a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .app-header .header-nav a { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; }
  .app-header a.back-btn, .back-btn { min-height: 44px; }

  /* Text boxes and dropdowns (16px text: iOS doesn't zoom in on focus) */
  .form-control:not(textarea) { min-height: 44px; }
  .form-control, select.form-control { font-size: 16px; }

  /* Safety forms: back link, buttons, chips, yes/no and choice buttons */
  .fp-back, .flha-header-back { min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }
  .fp-body .btn, .flha-body .btn, .sf-geo-row .btn { min-height: 44px; }
  .haz-quick-chip, .sev-btn, .imm-cause-btn, .nm-type-btn, .btn-group-item, .erp-yn-btn, .gamma-btn { min-height: 44px; }
  .sf-sig-close { min-width: 44px; min-height: 44px; }
  .sf-rep-cell .form-control { min-height: 44px; }

  /* Hub: Sign out */
  #logout-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }
  /* Daily Ticket: My Tickets Today, Add Employee */
  #my-tickets-btn, #add-employee-btn { min-height: 44px; }
  /* Get PO: the tick-box rows (Add items, reimbursement): the whole row is the target */
  #po-form .form-section > label:has(input[type=checkbox]) { min-height: 44px; display: flex; align-items: center; gap: 10px; }
  /* My Profile */
  .mp-back, .mp-btn, .tku-head .tku-btn, .tku-btn { min-height: 44px; }
  /* Time Off: tabs, calendar month arrows, person filter */
  .view-tab { min-height: 44px; }
  .cal-nav { min-width: 44px; min-height: 44px; }
  #cf-person { min-height: 44px; }
  /* Safety: logo link, menu, back link, search and form-type filter */
  .sidebar-brand > a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .sidebar-nav button, .sidebar-nav a, .sidebar-bottom a, .safety-tab { min-height: 44px; box-sizing: border-box; }
  #sf-sub-search, #sf-sub-type-filter { min-height: 44px; box-sizing: border-box; }
  /* Tools: the tool names in "Recently" are links to the tool (they show once tools have been used) */
  .recent-item-left .tool-nm a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── 600-768: field pairs side by side again (style.css stacks .grid-2 under 768) ── */
@media (min-width: 600px) and (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* ── Wide but short (landscape, 600 tall or less): slimmer sticky headers ── */
@media (orientation: landscape) and (max-height: 640px) and (min-width: 600px) {
  .app-header { height: 48px; }
  .app-header .header-logo { height: 34px; width: 34px; }
  .fp-header-inner, .flha-header-inner { padding-top: 2px !important; padding-bottom: 2px !important; }
  .fp-header-sub, .flha-header-sub { display: none; }
}