/* ============================================================================
   nexus-tablet.css  —  Tablet / iPad adaptation for the Nexus Hire Booking Board
   ----------------------------------------------------------------------------
   Drop-in, additive stylesheet. It does NOT edit any existing rule — it is
   designed to load AFTER styles.css so it cascades last (same trick the
   "Pipedrive-style" block already uses). Touch rules are gated on
   `(any-pointer: coarse)` — true whenever ANY input is a touchscreen. We use
   `any-pointer`, NOT `pointer`: stylus tablets (Galaxy Tab S-series with S Pen,
   Surface, etc.) report their PRIMARY pointer as `fine`, which makes plain
   `(pointer: coarse)` false and would skip every tablet rule on those devices.

   HOW TO INSTALL (pick one):
     A) In index.html, add right AFTER the styles.css link:
          <link rel="stylesheet" href="/nexus-tablet.css">
     B) Or paste this whole file at the very end of styles.css.

   Targets the app's real selectors: .app-shell, .side-rail, .app-main,
   .rail-nav, .side-rail .tab, .toolbar, .filters, .calendar-root, .month-grid,
   .month-cell, .booking-card(.compact), .week-grid, .data-table, .fortnight-*.

   Device CSS widths this covers:
     iPad mini 744 / 1133   iPad 10.9" 820 / 1180
     iPad 11"  834 / 1194   iPad Pro 12.9" 1024 / 1366
   ============================================================================ */


/* ── 1. FOUNDATION (applies on all devices; safe on desktop too) ──────────── */

/* iPad Safari's toolbar shows/hides and changes the viewport height. Using the
   dynamic viewport unit stops the layout "jumping". Falls back to vh first. */
.app-shell { min-height: 100vh; min-height: 100dvh; }
.side-rail { height: 100vh; height: 100dvh; }

/* Don't let iOS auto-inflate text; remove the 300ms double-tap delay. */
html { -webkit-text-size-adjust: 100%; }
.tab, .btn, .js-btn, .fleet-btn, .booking-card, .data-row,
.month-cell, .su-tab, .row-link { touch-action: manipulation; }

/* Respect the notch / home indicator, mostly relevant in landscape. */
.app-header { padding-left: max(20px, env(safe-area-inset-left));
              padding-right: max(20px, env(safe-area-inset-right)); }
.calendar-root, .fleet-page, .toolbar {
              padding-left: max(20px, env(safe-area-inset-left));
              padding-right: max(20px, env(safe-area-inset-right)); }
.side-rail  { padding-bottom: max(14px, env(safe-area-inset-bottom)); }


/* ── 2. TABLET TOUCH TUNING (any iPad, either orientation) ────────────────── */
/* Gated on a touchscreen + tablet-ish width (no upper cap, so large Android
   tablets like the Galaxy Tab S10 Ultra are covered too).                     */
@media (any-pointer: coarse) {

  /* 2a. Minimum 44×44 hit targets (Apple HIG). Filters were 38px; bump them,
         and use 16px font so focusing a field doesn't trigger iOS zoom. */
  .filters input,
  .filters select        { min-height: 44px; font-size: 16px; }
  .filters input[type="search"] { min-width: 200px; }

  .btn,
  .nav-group .btn,
  .header-actions .btn,
  .js-btn,
  .fleet-btn             { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }

  .side-rail .tab        { min-height: 56px; }          /* icon+label rail items */

  /* 2b. Booking chips: legible + tappable (compact was 11px). */
  .booking-card.compact  { font-size: 13px; padding: 7px 9px; min-height: 40px; }
  .bc-status             { font-size: 12px; }

  /* 2c. Touch has no hover — give a pressed state instead. */
  .tab:active,
  .btn:active,
  .js-btn:active,
  .fleet-btn:active,
  .booking-card:active,
  .data-row:active       { filter: brightness(0.94); }

  /* 2d. Native <select> already opens the iOS picker — just make sure the
         checkbox/toggle controls in fleet/jobsheet are finger-sized. */
  .js-chk                { width: 30px; height: 30px; }
  .rs-toggle-track       { width: 52px; height: 30px; }
  .rs-toggle-thumb       { width: 24px; height: 24px; }
  .rs-toggle input:checked ~ .rs-toggle-track .rs-toggle-thumb { left: 25px; }
}


/* ── 3. PORTRAIT (iPad held upright: ~744–834px, also 1024 Pro portrait) ──── */
/* Seven day-columns are narrow here, so the priority is: stop truncation,
   give cells height, and stack the secondary data tables.                     */
@media (any-pointer: coarse) and (orientation: portrait) {

  /* Keep the office-screen ("tv") mode out of these density tweaks. */
  body:not([data-mode="tv"]) .month-grid  { gap: 5px; }
  body:not([data-mode="tv"]) .month-cell  { min-height: 104px; padding: 6px 7px; }

  /* Let customer names wrap to a 2nd line instead of clipping to "ALDI Stor…". */
  .booking-card.compact      { white-space: normal; line-height: 1.25;
                               overflow: visible; text-overflow: clip; }
  .bc-cust                   { white-space: normal; }
  .bc-top                    { flex-wrap: wrap; row-gap: 2px; }

  /* Day / List views are centred at max 900px — let them use the full width. */
  .day-wrap, .list-wrap      { max-width: 100%; }

  /* List view = the best portrait "agenda". Its 11-column table is too wide
     upright, so drop the lower-priority columns and keep the essentials:
     Status(1), Customer(2), When(6), Duration(7), Actions(11). The hidden ones
     (Job type, Site, Suburb, Generator, Equipment, Deal owner) are all still on
     the booking's detail sheet, one tap away. */
  .data-table th:nth-child(3),  .data-table td:nth-child(3),   /* Job type   */
  .data-table th:nth-child(4),  .data-table td:nth-child(4),   /* Site       */
  .data-table th:nth-child(5),  .data-table td:nth-child(5),   /* Suburb     */
  .data-table th:nth-child(8),  .data-table td:nth-child(8),   /* Generator  */
  .data-table th:nth-child(9),  .data-table td:nth-child(9),   /* Equipment  */
  .data-table th:nth-child(10), .data-table td:nth-child(10)   /* Deal owner */
                             { display: none; }
  .data-table td             { font-size: 14px; }

  /* Other tables can still scroll horizontally if needed. */
  .fleet-table-wrap,
  .su-table-wrap             { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Week view: 7 columns get tight upright — relax the tall min-height so the
     whole week fits without a huge scroll. */
  .week-col                  { min-height: 150px; }
  .fortnight-cell            { min-height: 120px; }
}


/* ── 4. LANDSCAPE (iPad on its side: ~1133–1366px) ───────────────────────── */
/* There's room for the full month grid; make it touch-comfortable rather than
   the dense desktop spacing it inherits above 1100px today.                   */
@media (any-pointer: coarse) and (orientation: landscape) and (min-width: 1000px) and (max-width: 2200px) {

  body:not([data-mode="tv"]) .month-cell      { min-height: 120px; }
  body:not([data-mode="tv"]) .booking-card.compact { font-size: 13px; padding: 7px 9px; }

  /* The toolbar packs a search + 4 selects + actions; it already wraps, just
     give the wrapped rows a little breathing room. */
  .toolbar                   { row-gap: 10px; }
  .filters                   { gap: 10px; }

  /* Comfortable side rail (keep it — landscape has the width for it). */
  .side-rail .tab            { padding: 11px 4px; }
}


/* ── 5. NICE-TO-HAVE: smooth momentum scrolling on the scroll containers ──── */
.calendar-root, .fleet-page, .modal, .fleet-modal,
.data-table, .fleet-table-wrap, .su-table-wrap {
  -webkit-overflow-scrolling: touch;
}


/* ============================================================================
   NOTES — the two enhancements that need a small app.js change (not CSS):



/* ============================================================================
   6. CALENDAR TILE LAYOUT FIX
   Status badge moved to its own row so the customer title gets full width;
   labour-conflict warning enlarged. Applies on all screens (incl. office TV).
   Scoped to calendar tiles only: .booking-span (month) and .booking-card
   (week / day / alerts). No colour, data, or drag-drop changes.
   ============================================================================ */

/* Row 1 — title fills the width and ellipses; conflict icon pinned far right. */
.booking-span .bs-top,
.booking-card .bc-top   { display: flex; align-items: center; gap: 6px; justify-content: flex-start; }
.booking-span .bs-cust,
.booking-card .bc-cust  { flex: 1 1 auto; min-width: 0;
                          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Row 2 — location on the left, status badge hugging the right. */
.booking-span .bs-meta,
.booking-card .bc-subrow { display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.booking-span .bs-meta .bs-site,
.booking-card .bc-subrow .bc-site { flex: 1 1 auto; min-width: 0;
                          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.booking-span .bs-meta .bs-status,
.booking-card .bc-subrow .bc-status { flex: 0 0 auto; margin-left: auto; }

/* Alert cluster (refuelling + labour conflict) — grouped at the right of the
   title row, evenly sized and spaced so the two icons never overlap. */
.booking-span .bs-alerts {
  flex: 0 0 auto; margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px; padding-left: 5px;
}
.booking-span .bs-alerts .bs-staff-warn { width: 18px; height: auto; display: block; }
.booking-span .bs-alerts .bs-fuel-warn {
  position: static; bottom: auto; right: auto;   /* was an absolute corner pin */
  font-size: 15px; line-height: 1; display: inline-flex; align-items: center;
}

/* Week / day cards: single conflict icon, right-aligned in the title row. */
.booking-card .bc-staff-conflict {
  flex: 0 0 auto; margin-left: auto;
  display: inline-flex; align-items: center; padding-left: 4px;
}
.booking-card .bc-staff-conflict .bs-staff-warn { width: 18px; height: auto; display: block; }


/* ============================================================================
   7. JOBSHEET HEADER LOGO
   Use the real Nexus brand image (nexus-logo.png) instead of the old inline
   SVG approximation. Sized to match the previous header logo height.
   ============================================================================ */
.js-logo-img { height: 50px; width: auto; max-width: 280px; display: block; object-fit: contain; }
.js-sheet-head { align-items: center; }   /* logo (left) + job-no/printed (right), vertically centred */
.js-btn .js-btn-ico { flex: 0 0 auto; }


/* ============================================================================
   8. JOBSHEET ACTIVE-ALERT PILLS (status line)
   Refuelling / Electrical / Delivery required + Labour conflict, shown as
   coloured pills beside the job-type and status tags.
   ============================================================================ */
.js-statusline .js-alert { font-weight: 700; }
.js-alert.al-fuel     { background: #fff3e0; color: #b26a00; border-color: #f0c890; }
.js-alert.al-elec     { background: #fff8e1; color: #8a6d00; border-color: #efd271; }
.js-alert.al-deliver  { background: #eef2ff; color: #3a48c0; border-color: #c3ccf5; }
.js-alert.al-conflict { background: #fdecea; color: #b71c1c; border-color: #f1b0a8; }


/* == 9. PHONE + ALL-PORTRAIT FIX (nexus-tablet responsive patch) ==========
   app.js isTouchTablet() is now touch-based (no width floor), so the
   orientation defaults + these touch rules also apply on phones and at all
   portrait widths. Stops the iOS focus-zoom and the cramped/zoomed-in look.
   Touch-gated only: desktop is untouched. ====================================*/
@media (any-pointer: coarse) {
  /* iOS zooms the whole page when focusing an input with font-size < 16px. */
  input, select, textarea { font-size: 16px; }
}
@media (any-pointer: coarse) and (orientation: portrait) {
  .app-shell { min-height: 100vh; min-height: 100dvh; }
  .calendar-root { overflow: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .calendar-root, .day-wrap, .list-wrap, .list-table-wrap { width: 100%; max-width: 100%; }
  .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (any-pointer: coarse) and (orientation: portrait) and (max-width: 699px) {
  body:not([data-mode="tv"]) .month-grid { gap: 4px; }
  body:not([data-mode="tv"]) .month-cell { min-height: 84px; padding: 5px 6px; }
  .month-grid-spans .month-dow-row, .month-row-days, .month-row-spans, .week-grid { gap: 4px; }
  .data-table td { font-size: 14px; }
  .toolbar, .filters { width: 100%; }
  .filters input[type="search"] { min-width: 0; flex: 1 1 100%; }
}


/* == 10. MOBILE / PORTRAIT SIDE-RAIL HEIGHT FIX ============================
   When .app-shell switches to a column layout (<=860px, i.e. portrait phones
   & tablets), the rail keeps its base `flex: 0 0 var(--rail-w)` where
   --rail-w becomes 100%. In a COLUMN flex container that flex-basis applies to
   the MAIN axis = HEIGHT, so the rail stretched to full screen height and
   covered the whole calendar (the "zoomed-in" portrait bug). Reset it to
   content height so it stays a compact bottom nav bar. ====================== */
@media (max-width: 860px) {
  .side-rail { flex: 0 0 auto; height: auto; }
}