/* ════════════════════════════════════════════════════════════════════════════
 * FleetPRO on the iPhone Duo (and other wide screens) — following Apple's
 * iPhone Duo guidance (Tech Talks "Design for iPhone Duo", "Raise the bar with
 * iPhone Duo", "Strike a pose with adaptive layouts", "Prepare your app"):
 *
 *  • Closed, and open like a book: bars move into ONE vertical strip on the
 *    right edge, shared with the status bar and camera, so content gets the
 *    full height. Tabs show as icons there; the main action (＋) sits at the
 *    top of the strip, the tab group at the bottom.
 *  • Open and turned upright: horizontal bars, as on any iPhone.
 *  • Open (inner display): split views show two levels at once; wide content
 *    reflows into two columns. Sheets are centred.
 *  • Half open: the fold is a division region — buttons, panels and sheets
 *    move off it ("sheets slide over to avoid resting in the fold"; alerts go
 *    to the trailing side). Scrolling content (lists, feeds) is NOT displaced.
 *  • Tabletop: content on the upper half, interactive controls on the flat
 *    lower half — same controls and hierarchy as every other pose.
 *
 * Every rule is gated on a class the shim puts on <html> (setupWideLayout):
 *   fp-rail  bars in the right-hand strip   fp-book  wide: two panes
 *   fp-tall  open + upright (horizontal bars)   fp-wide  book or tall
 *   fp-fold-v / fp-fold-h / fp-half  a real fold, and whether it is half open
 * A normal phone gets none of them and is untouched.
 *
 * Geometry (web-view px, set by the shim):
 *   --fp-rail-w  strip width      --fp-rail-top  where our strip items start
 *   --fp-cr      content right edge (100vw − strip)
 *   --fp-pl-end  left pane's right edge     --fp-pr-x  right pane's left edge
 *   --fp-fold-x / --fp-fold-y  the fold
 * The app styles itself inline, so overrides here need !important.
 * ════════════════════════════════════════════════════════════════════════════ */

html.fp-wide, html.fp-rail { --fp-pad: 16px; --fp-sai: max(env(safe-area-inset-bottom, 0px), var(--fp-sai-bottom, 0px)); }
.van-panel-hd { display: none; }

/* ── 1. The right-hand strip ────────────────────────────────────────────────
   Everything the app draws keeps clear of the strip; the strip itself holds
   our tab bar (and, on the Duo, the system status bar above it). */
html.fp-rail body { padding-right: var(--fp-rail-w) !important; }
html.fp-rail body > div[style*="position:fixed"]:is([style*="inset:0"], [style*="inset: 0"]),
html.fp-rail :is(.fp-confirm-ov, .media-overlay, .settings-overlay, .scanner-overlay, .assign-overlay,
  .add-client-panel, .profile-panel, .cal-panel, .cal-modal-overlay, .cal-day-detail,
  #adminJobOv, #jobOverview, #calDayDetail) {
  right: var(--fp-rail-w) !important;
}
/* Work Mode's toolbar (Send Report · Reset) — Apple puts toolbar buttons in
   the strip too. The tab bar is hidden in Work Mode, so the strip is free:
   Send sits where the ＋ sits on other screens, Reset under it, each with a
   short caption. Frees the bottom of the list. */
html.fp-rail:not(.fp-wm) .export-bar:not([style*="display: none"]) {
  left: auto !important; right: 0 !important; top: var(--fp-rail-top) !important; bottom: auto !important;
  width: var(--fp-rail-w); flex-direction: column; align-items: center; gap: 30px;
  padding: 0 !important; background: none !important; border: 0 !important; z-index: 152;
}
html.fp-rail:not(.fp-wm) .export-bar > button {
  flex: none !important; position: relative; width: 52px; height: 52px; padding: 0 !important; gap: 0 !important;
  border-radius: 26px !important; font-size: 0 !important; display: flex; align-items: center; justify-content: center;
}
html.fp-rail:not(.fp-wm) .btn-send-report {
  box-shadow: 0 6px 18px rgba(91, 99, 230, .4);
  background: var(--clr-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22 11 13 2 9z'/%3E%3C/svg%3E") center / 22px no-repeat !important;
}
html.fp-rail:not(.fp-wm) .btn-reset-day { background: var(--clr-card) !important; box-shadow: 0 2px 10px rgba(15, 18, 30, .08); }
html.fp-rail:not(.fp-wm) .btn-reset-day svg { width: 20px; height: 20px; }
html.fp-rail:not(.fp-wm) .export-bar > button::after {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--clr-text2); white-space: nowrap;
}
html.fp-rail:not(.fp-wm) .btn-send-report::after { content: "Send"; }
html.fp-rail:not(.fp-wm) .btn-reset-day::after { content: "Reset"; }
html.fp-rail .app-wrapper { padding-bottom: calc(24px + var(--fp-sai)) !important; }
/* slide-in panels park just off the right edge when closed — which is now the
   strip — so push them past it too */
html.fp-rail :is(.settings-overlay, .add-client-panel, .profile-panel, .cal-panel):not(.open) {
  transform: translateX(calc(100% + var(--fp-rail-w) + 4px)) !important;
}

/* Admin tab bar → the strip: ＋ at the top (the prominent action), the four
   tabs as one icon capsule at the bottom. Labels become tooltips/aria-labels
   (Apple: vertical bars suit symbol-only items; always keep the title). The
   app hides the bar with an inline display:none — that still wins. */
html.fp-rail #fpActionBar:not([style*="display: none"]) {
  display: flex !important; flex-direction: column !important; align-items: center !important;
  left: auto !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
  width: var(--fp-rail-w); background: var(--clr-bg) !important; border-top: 0 !important;
  padding: var(--fp-rail-top) 0 calc(16px + var(--fp-sai)) !important;
}
html.fp-rail #fpActionBar .fpBarAct {
  flex: none !important; width: 48px; height: 46px; padding: 0 !important; gap: 0 !important;
  font-size: 0 !important; justify-content: center; background: var(--clr-card) !important;
  border-radius: 0; color: var(--clr-text2) !important;
}
html.fp-rail #fpActionBar .fpBarAct:nth-child(1) { border-radius: 24px 24px 0 0; height: 52px; padding-top: 6px !important; margin-top: auto; }
html.fp-rail #fpActionBar .fpBarAct:nth-child(5) { border-radius: 0 0 24px 24px; height: 52px; padding-bottom: 6px !important; }
html.fp-rail #fpActionBar .fpBarAct:not([data-act="add"]) { box-shadow: 4px 0 14px -6px rgba(15, 18, 30, .14), -4px 0 14px -6px rgba(15, 18, 30, .14); }
html.fp-rail #fpActionBar .fpBarAct[data-act="add"] {
  order: -1; background: none !important; height: auto; box-shadow: none !important;
}
html.fp-rail #fpActionBar .fpBarAct[data-act="add"] > span:first-child { transform: none !important; width: 48px !important; height: 48px !important; }
html.fp-rail #fpActionBar .fpBarAct[data-act="add"] > span:last-child { display: none; }

/* Drawer open: the strip stays (hiding it would expose the screen underneath,
   since wide screens stop at the strip's edge). Dim it like the backdrop
   (rgba(0,0,0,.4) ≈ brightness .6) and let taps fall through to the backdrop. */
html.fp-rail.fp-drawer-open :is(#fpActionBar, #fpCrewTabs) { filter: brightness(.6); pointer-events: none; }

/* Crew tab bar → the strip, same capsule (no ＋). */
html.fp-rail #fpCrewTabs:not([style*="display: none"]) {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-end !important;
  left: auto !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
  width: var(--fp-rail-w); background: var(--clr-bg) !important; border-top: 0 !important;
  padding: var(--fp-rail-top) 0 calc(16px + var(--fp-sai)) !important;
}
html.fp-rail #fpCrewTabs > button {
  flex: none !important; width: 48px; height: 46px; padding: 0 !important; gap: 0 !important;
  font-size: 0 !important; justify-content: center; background: var(--clr-card) !important;
  box-shadow: 4px 0 14px -6px rgba(15, 18, 30, .14), -4px 0 14px -6px rgba(15, 18, 30, .14);
}
html.fp-rail #fpCrewTabs > button:first-child { border-radius: 24px 24px 0 0; height: 52px; padding-top: 6px !important; }
html.fp-rail #fpCrewTabs > button:last-child { border-radius: 0 0 24px 24px; height: 52px; padding-bottom: 6px !important; }

/* The ＋ menu pops out beside the ＋ at the top of the strip. */
html.fp-rail #fpQaSheet {
  left: auto !important; right: calc(var(--fp-rail-w) + 4px) !important;
  top: var(--fp-rail-top) !important; bottom: auto !important; width: 320px;
  border-radius: 20px !important; max-height: calc(100vh - var(--fp-rail-top) - 24px); overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
html.fp-rail #fpQaSheet > div:first-child { display: none; }   /* grab handle: it's a popover here */
html.fp-rail #fpQaSheet { transform-origin: top right; transition: transform .2s ease, opacity .2s ease !important; }
html.fp-rail #fpQaSheet[style*="translateY(130%)"] { opacity: 0; pointer-events: none; transform: translateX(10px) scale(.96) !important; }

/* Toasts centre on the content area, never under the strip. */
html.fp-rail .toast { left: calc(var(--fp-cr) / 2) !important; }

/* ── 2. Sheets and pop-up forms ─────────────────────────────────────────────
   Every bottom sheet in the app is a fixed backdrop that pins its card to the
   bottom edge. On the inner display Apple centres sheets; half open, they
   slide off the fold to the trailing side; on a tabletop they sit on the flat
   lower half. (Closed, they stay phone-style, within the content area.) */
html.fp-wide body [style*="position:fixed"][style*="inset:0"][style*="align-items:flex-end"] {
  align-items: center !important; justify-content: center !important; padding: 16px !important;
}
html.fp-wide body [style*="position:fixed"][style*="inset:0"][style*="align-items:flex-end"] > div {
  border-radius: 20px !important; width: 100% !important; max-width: 540px !important;
  max-height: calc(100vh - 32px) !important; overflow-y: auto;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}
/* With a real fold (the Duo), open like a book — flat or half — pop-up forms
   open on the right-hand page instead of straddling the fold. iPad / desktop
   (no fold) keep them centred. */
html.fp-book.fp-fold-v body [style*="position:fixed"][style*="inset:0"][style*="align-items:flex-end"] {
  justify-content: flex-start !important; padding-left: var(--fp-pr-x) !important;
}
html.fp-book.fp-fold-v body [style*="position:fixed"][style*="inset:0"][style*="align-items:flex-end"] > div {
  max-width: min(540px, calc(var(--fp-cr) - var(--fp-pr-x) - 16px)) !important;
}
/* Sign-in / sign-up screens: half open, the form moves off the curve onto
   the right-hand page. */
html.fp-book.fp-half :is(#fleetLoginOverlay, #fleetSignupOverlay, #fleetForgotOverlay, #fleetMfaOverlay) {
  justify-content: flex-start !important; padding-left: calc(var(--fp-pr-x) + 12px) !important;
}
html.fp-tall.fp-half body [style*="position:fixed"][style*="inset:0"][style*="align-items:flex-end"] {
  align-items: flex-end !important; padding-top: calc(var(--fp-fold-y) + 14px) !important;
}
html.fp-tall.fp-half body [style*="position:fixed"][style*="inset:0"][style*="align-items:flex-end"] > div {
  max-height: calc(100vh - var(--fp-fold-y) - 30px) !important;
}

/* ── 3. Readable width for every other screen ───────────────────────────────
   Admin screens are fixed panels whose second child scrolls. Open, a single
   column stays at a comfortable reading width within the content area
   (scrolling content never needs to dodge the fold). Screens with their own
   two-pane layout below override this. */
html.fp-book body > div[style*="z-index:9997"][style*="inset:0"] > div[style*="overflow-y:auto"] {
  padding-left: max(var(--fp-pad), calc((100% - 720px) / 2)) !important;
  padding-right: max(var(--fp-pad), calc((100% - 720px) / 2)) !important;
}
html.fp-tall body > div[style*="z-index:9997"][style*="inset:0"] > div[style*="overflow-y:auto"] {
  padding-left: max(18px, calc((100% - 640px) / 2)) !important;
  padding-right: max(18px, calc((100% - 640px) / 2)) !important;
}
html.fp-book .fpScreenHead > div[style*="flex:1"][style*="text-align:center"] { text-align: left !important; padding-left: 6px; }

/* ── 4. Work Mode ───────────────────────────────────────────────────────────
   book: the vehicle list in the LEFT pane, the tapped vehicle in the RIGHT
   pane with the progress card above it. Send Report / Reset stay with the
   list they act on (Apple: keep controls with the content they affect).
   tall: list on top; the tapped vehicle docks in the bottom half — on a
   tabletop that is the flat half, right under your thumbs. */
/* (only when there ARE vehicles — an empty state spans the whole content area) */
html.fp-book:not(.fp-wm) body:has(#vanList .van-item) .app-wrapper { width: var(--fp-pl-end) !important; }
html.fp-book:not(.fp-wm) .progress-section .p-stats { display: none; }
html.fp-book:not(.fp-wm) body:has(#vanList .van-item) .progress-section {
  position: fixed; z-index: 151; margin: 0 !important;
  left: var(--fp-pr-x); right: calc(100vw - var(--fp-cr) + var(--fp-pad)); top: 12px;
  padding: 14px 18px !important; border: 0.5px solid var(--clr-border);
}
html.fp-book:not(.fp-wm) .van-body[style*="display: block"] {
  position: fixed; z-index: 150;
  left: var(--fp-pr-x); right: calc(100vw - var(--fp-cr) + var(--fp-pad));
  top: 86px; bottom: calc(12px + var(--fp-sai));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--clr-card); border: 0.5px solid var(--clr-border) !important;
  border-radius: 20px; padding: 0 18px 18px !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .08);
}
#fpWmSum { display: none; }
html.fp-book:not(.fp-wm) body:has(#vanList .van-item):not(:has(.van-body[style*="display: block"])) #fpWmSum:not(:empty) {
  display: block; position: fixed; z-index: 1;
  left: var(--fp-pr-x); right: calc(100vw - var(--fp-cr) + var(--fp-pad));
  top: 12px; bottom: calc(12px + var(--fp-sai));
  overflow-y: auto; overscroll-behavior: contain;
}
/* the summary carries its own progress card, so the fixed one steps aside */
html.fp-book:not(.fp-wm) body:has(#vanList .van-item):not(:has(.van-body[style*="display: block"])):has(#fpWmSum:not(:empty)) .progress-section { display: none !important; }
html.fp-book:not(.fp-wm) .toast { left: calc(var(--fp-pl-end) / 2) !important; }

html.fp-book:not(.fp-wm) .van-num, html.fp-book:not(.fp-wm) .progress-section .p-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

html.fp-tall body:has(.van-body[style*="display: block"]) .app-wrapper { padding-bottom: calc(100vh - var(--fp-fold-y) + 24px) !important; }
html.fp-tall body:has(.van-body[style*="display: block"]) .progress-section,
html.fp-tall body:has(.van-body[style*="display: block"]) .export-bar { display: none !important; }
html.fp-tall .van-body[style*="display: block"] {
  position: fixed; z-index: 150; left: 0; right: 0; bottom: 0;
  top: calc(var(--fp-fold-y) + 12px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--clr-card); border: 0 !important; border-top: 0.5px solid var(--clr-border) !important;
  border-radius: 22px 22px 0 0; padding: 0 20px calc(16px + var(--fp-sai)) !important;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .12);
}
html:is(.fp-book, .fp-tall):not(.fp-wm) .van-body[style*="display: block"] .van-panel-hd {
  display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; z-index: 2; background: var(--clr-card);
  padding: 16px 0 12px; margin-bottom: 4px; border-bottom: 0.5px solid var(--clr-border-light);
}
.van-panel-name { flex: 1; min-width: 0; font-size: 20px; font-weight: 700; color: var(--clr-text); letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:is(.fp-book, .fp-tall):not(.fp-wm) .van-item:has(> .van-body[style*="display: block"]) > .van-hdr {
  background: rgba(91, 99, 230, .10); box-shadow: inset 3px 0 0 var(--clr-blue);
}
html:is(.fp-book, .fp-tall):not(.fp-wm) .van-body[style*="display: block"] .actions { gap: 10px; }
/* Previous / next / close on the open vehicle — the list stays visible beside
   it, so stepping through vehicles shouldn't need a trip back to the list. */
.vp-nav { display: none; }
html.fp-book:not(.fp-wm) .van-body[style*="display: block"] .van-panel-hd { flex-wrap: wrap; row-gap: 6px; }
html.fp-book:not(.fp-wm) .van-body[style*="display: block"] .van-panel-hd > .van-panel-name { flex: 1 1 0; }
html.fp-book:not(.fp-wm) .van-body[style*="display: block"] .van-panel-hd > :not(.van-panel-name):not(.vp-nav) { order: 3; }
html.fp-book:not(.fp-wm) .van-body[style*="display: block"] .van-panel-hd::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
html:is(.fp-book, .fp-tall):not(.fp-wm) .van-body[style*="display: block"] .vp-nav { display: flex; gap: 6px; margin-left: 4px; }
.vp-nav button {
  width: 34px; height: 34px; border-radius: 17px; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--clr-input-bg, rgba(120, 120, 128, .12)); color: var(--clr-text);
}
.vp-nav button:disabled { opacity: .35; cursor: default; }
html:is(.fp-book, .fp-tall):not(.fp-wm) .van-body[style*="display: block"] .actions button { white-space: nowrap; }

/* ── 5. Two-column spreads (Apple: wide content reflows into two columns) ───
   Dashboard, crew Home / Timecard / job screen and the customer portal: the
   cards flow down the left column and on to the right. Equal side margins put
   the gutter in the middle of the content area. These screens scroll as a
   whole (columns need a container of natural height); headers stay pinned. */
html.fp-book :is(#fpDashScreen, #fpEmpHome, #fpEmpTimecard, #fpJobWork) { display: block !important; overflow-y: auto !important; }
html.fp-book #fpDashScreen > .fpScreenHead,
html.fp-book :is(#fpEmpHome, #fpEmpTimecard, #fpJobWork) > div:nth-child(2) { position: sticky; top: 0; z-index: 5; }
html.fp-book :is(#fpDashScreen, #fpEmpHome, #fpEmpTimecard, #fpJobWork) > div[style*="overflow-y:auto"] {
  overflow: visible !important; height: auto; max-width: none !important; display: block !important;
  column-count: 2; column-gap: 24px; column-fill: balance;
  padding-left: var(--fp-pad) !important; padding-right: var(--fp-pad) !important;
  padding-bottom: calc(24px + var(--fp-sai)) !important;
}
html.fp-book :is(#fpClientApp, .fpcScreen) > div:nth-child(3) {
  max-width: none !important; column-count: 2; column-gap: 24px; column-fill: balance;
  padding-left: var(--fp-pad) !important; padding-right: var(--fp-pad) !important;
}
html.fp-book :is(#fpDashScreen, #fpEmpHome, #fpEmpTimecard, #fpJobWork) > div[style*="overflow-y:auto"] > *,
html.fp-book :is(#fpClientApp, .fpcScreen) > div:nth-child(3) > * {
  break-inside: avoid; -webkit-column-break-inside: avoid; margin-top: 0 !important; margin-bottom: 12px !important;
}
html.fp-tall #fpDashScreen > div[style*="overflow-y:auto"] > div:nth-child(3)[style*="grid-template-columns"] {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* ── 6. List screens: controls in the left pane, the list in the right ──────
   Invoices, Estimates, Sent reports: search, period and totals stack in the
   left pane; the list fills the right pane top to bottom. */
html.fp-book :is(#fpInvScreen:not(.fp-cw), #fpEstScreen:not(.fp-cw), #fpRepScreen:not(.fp-cw), #fpClientsScreen:not(.fp-cw)) {
  display: grid !important;
  grid-template-columns: var(--fp-pl-end) 1fr;
  grid-template-rows: auto auto auto auto auto auto 1fr;
  column-gap: calc(var(--fp-pr-x) - var(--fp-pl-end));
}
html.fp-book :is(#fpInvScreen:not(.fp-cw), #fpEstScreen:not(.fp-cw), #fpRepScreen:not(.fp-cw), #fpClientsScreen:not(.fp-cw)) > * { grid-column: 1; min-width: 0; }
html.fp-book :is(#fpInvScreen:not(.fp-cw), #fpEstScreen:not(.fp-cw), #fpRepScreen:not(.fp-cw), #fpClientsScreen:not(.fp-cw)) > :first-child,
html.fp-book :is(#fpInvScreen:not(.fp-cw), #fpEstScreen:not(.fp-cw), #fpRepScreen:not(.fp-cw), #fpClientsScreen:not(.fp-cw)) > .fpScreenHead { grid-column: 1 / -1; }
html.fp-book :is(#fpInvScreen:not(.fp-cw), #fpEstScreen:not(.fp-cw), #fpRepScreen:not(.fp-cw), #fpClientsScreen:not(.fp-cw)) > :not(:first-child):not(.fpScreenHead):not([id$="List"]) {
  padding-left: var(--fp-pad) !important; padding-right: 0 !important;
}
html.fp-book #fpRepScreen:not(.fp-cw) > :not(:first-child):not(.fpScreenHead):not([id$="List"]) { border-bottom: 0 !important; }
html.fp-book :is(#fpInvScreen:not(.fp-cw) > #fpInvList, #fpEstScreen:not(.fp-cw) > #fpEstList, #fpRepScreen:not(.fp-cw) > #fpRepList) {
  grid-column: 2 !important; grid-row: 3 / 8; min-height: 0;
  padding: 14px var(--fp-pad) calc(24px + var(--fp-sai)) 0 !important;
}
html.fp-tall :is(#fpInvScreen:not(.fp-cw) #fpInvList, #fpEstScreen:not(.fp-cw) #fpEstList, #fpClientsScreen:not(.fp-cw) #fpcList, #fpRepScreen:not(.fp-cw) #fpRepList) {
  padding-left: max(18px, calc((100% - 640px) / 2)) !important;
  padding-right: max(18px, calc((100% - 640px) / 2)) !important;
}

/* ── 7. Split views: the list on the left, what you tapped on the right ─────
   (Apple: on the inner display, split views show multiple levels of the
   hierarchy at once.) Customers, plus every drill-down screen whose parent
   stays open underneath: Vehicles → fleet → vehicle, Team, Timecards, Photos,
   Pricing, Work Orders, E-Sign, Library, Estimates. Nothing chosen yet → a
   quiet placeholder in the right pane. */
html.fp-book #fpClientsScreen:not(.fp-cw) > #fpcList {
  grid-column: 1 !important; grid-row: 4 / 8;
  padding: 8px 0 calc(24px + var(--fp-sai)) var(--fp-pad) !important;
}
html.fp-book #fpClientsScreen:not(.fp-cw)::after {
  content: "Select a customer to see their details";
  grid-column: 2; grid-row: 3 / 8;
  margin: 14px var(--fp-pad) calc(24px + var(--fp-sai)) 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1.5px dashed var(--clr-border); border-radius: 20px;
  color: var(--clr-text2); font-size: 15px; font-weight: 500;
}
html.fp-book body:has(#fpSvcCustForm, .profile-panel.open) .fpc-row.fp-sel {
  background: rgba(91, 99, 230, .10) !important; box-shadow: inset 3px 0 0 var(--clr-blue);
}
html.fp-book #fpClientsScreen:not(.fp-cw) > .fpScreenHead { padding-right: calc(var(--fp-cr) - var(--fp-pl-end)) !important; }
html.fp-book body:has(#fpClientsScreen:not(.fp-cw)) :is(.profile-panel, #fpSvcCustForm),
html.fp-book :is(#fpVehClientScreen, #fpVehDetail:not(.fp-cw), #fpTeamPerson, #fpTcPerson, #fpArchClientScreen, #fpArchVehScreen,
  #fpPriceClientScreen, #fpWoDetail, #fpCtDetail, #fpAgDoc, #fpEstDetail) {
  left: var(--fp-pr-x) !important;
  border-left: 0.5px solid var(--clr-border); box-shadow: -10px 0 30px rgba(0, 0, 0, .08);
}
html.fp-book :is(#fpVehClientScreen, #fpVehDetail:not(.fp-cw), #fpTeamPerson, #fpTcPerson, #fpArchClientScreen, #fpArchVehScreen,
  #fpPriceClientScreen, #fpWoDetail, #fpCtDetail, #fpAgDoc) > div[style*="overflow-y:auto"] {
  padding-left: 16px !important; padding-right: var(--fp-pad) !important;
}
/* (#fpVehClientScreen / #fpArchClientScreen are details in the RIGHT pane; they
   only become a left-hand list when their own detail opens — rule further down) */
html.fp-book :is(#fpVehScreen:not(.fp-cw), #fpTeamScreen:not(.fp-cw), #fpTimecardsScreen:not(.fp-cw), #fpArchScreen:not(.fp-cw),
  #fpPriceScreen:not(.fp-cw), #fpWoScreen, #fpCtScreen:not(.fp-cw), #fpAgScreen:not(.fp-cw)) > div[style*="overflow-y:auto"] {
  padding-left: var(--fp-pad) !important;
  padding-right: calc(var(--fp-cr) - var(--fp-pl-end)) !important;
}
html.fp-book :is(#fpVehScreen:not(.fp-cw), #fpTeamScreen:not(.fp-cw), #fpTimecardsScreen:not(.fp-cw), #fpArchScreen:not(.fp-cw),
  #fpPriceScreen:not(.fp-cw), #fpWoScreen, #fpCtScreen:not(.fp-cw), #fpAgScreen:not(.fp-cw))::after {
  content: "Choose one on the left to open it here";
  position: absolute; left: var(--fp-pr-x); right: var(--fp-pad);
  top: calc(var(--fp-sat,env(safe-area-inset-top,0px)) + 70px); bottom: calc(24px + var(--fp-sai));
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px;
  border: 1.5px dashed var(--clr-border); border-radius: 20px;
  color: var(--clr-text2); font-size: 15px; font-weight: 500; pointer-events: none;
}
/* a level that is both a detail and a list slides back to the left pane
   while ITS detail is open (fleet → vehicle; client photos → a vehicle) */
html.fp-book body:has(#fpVehDetail:not(.fp-cw)) #fpVehClientScreen,
html.fp-book body:has(#fpArchVehScreen) #fpArchClientScreen {
  left: 0 !important; right: calc(100vw - var(--fp-pl-end)) !important; border-left: 0; box-shadow: none;
}
html.fp-book body:has(#fpVehDetail:not(.fp-cw)) #fpVehClientScreen > div[style*="overflow-y:auto"],
html.fp-book body:has(#fpArchVehScreen) #fpArchClientScreen > div[style*="overflow-y:auto"] { padding-left: var(--fp-pad) !important; padding-right: 0 !important; }
html.fp-book body:has(#fpVehDetail:not(.fp-cw)) #fpVehClientScreen::after,
html.fp-book body:has(#fpArchVehScreen) #fpArchClientScreen::after { display: none; }
/* Estimates: with one open, the list moves under the controls in the left pane */
html.fp-book body:has(#fpEstDetail) #fpEstList { grid-column: 1 !important; grid-row: 6 / 8; padding-left: var(--fp-pad) !important; padding-right: 0 !important; }

/* ── 8. Schedule ────────────────────────────────────────────────────────────
   Month: the grid in the left column, "Up next" in the right. Week / Day: the
   days flow across both columns. The panel scrolls as a whole. */
html.fp-book #calPanel.open { display: block !important; overflow-y: auto !important; }
html.fp-book #calPanel > .cal-hdr { position: sticky; top: 0; z-index: 5; }
html.fp-book #calBody {
  overflow: visible !important; height: auto;
  column-count: 2; column-gap: 24px; column-fill: balance;
  padding: 12px var(--fp-pad) calc(24px + var(--fp-sai)) !important;
}
html.fp-book #calBody > *, html.fp-book #calBody .cal-week-day, html.fp-book #calBody .cal-dayrow { break-inside: avoid; -webkit-column-break-inside: avoid; }
html.fp-book #calBody > .cal-section-lbl { display: block; break-before: column; -webkit-column-break-before: always; margin-top: 0; }
html.fp-book #calBody .cal-weekwrap, html.fp-book #calBody .cal-daywrap { display: contents; }
html.fp-tall #calBody { padding-left: max(14px, calc((100% - 640px) / 2)) !important; padding-right: max(14px, calc((100% - 640px) / 2)) !important; }

/* Closed Duo: the content area left of the strip is ~370pt, a little narrower
   than a regular iPhone — keep group names to one line. */
html.fp-rail .group-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html.fp-rail:not(.fp-wide) .group-done-btn { font-size: 0 !important; gap: 0 !important; padding: 7px 9px !important; }
html.fp-rail:not(.fp-wide) #fpEmpHome button[data-work],
html.fp-rail:not(.fp-wide) #fpEmpHome button[data-job] { white-space: nowrap; font-size: 13.5px !important; padding-left: 6px !important; padding-right: 6px !important; }

/* ── 9. Half open on a table: pick on the standing half, details on the flat half ──
   Work Mode already does this (section 4). Schedule's Month view shows the chosen
   day's jobs on the flat half (app.html buildCalTtPane); Customers and the list
   screens dock whatever you open into the flat half, with the list still
   scrolling above it. Flat, and on every other device, nothing changes. */
.cal-tt-pane { display: none; }
html.fp-tall.fp-half .cal-tt-pane {
  display: block; position: fixed; z-index: 20; left: 0; right: 0; top: calc(var(--fp-fold-y) + 12px);
  overflow-y: auto; overscroll-behavior: contain; background: var(--clr-card);
  border-top: 0.5px solid var(--clr-border); border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .12); padding: 0 16px 16px;
}
.cal-tt-hd {
  position: sticky; top: 0; z-index: 2; background: var(--clr-card);
  display: flex; align-items: center; gap: 10px; padding: 14px 4px 10px; margin-bottom: 6px;
  border-bottom: 0.5px solid var(--clr-border-light, var(--clr-border));
}
.cal-tt-day { flex: 1; font-size: 19px; font-weight: 700; color: var(--clr-text); }
.cal-tt-count { font-size: 13px; color: var(--clr-text2); }
.cal-tt-add {
  border: 0; border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 13.5px; font-weight: 600;
  background: var(--clr-blue-bg, rgba(91, 99, 230, .12)); color: var(--clr-blue); cursor: pointer;
}
html.fp-tall.fp-half #calBody:has(.cal-tt-pane) { padding-bottom: calc(100vh - var(--fp-fold-y) + 24px) !important; }
html.fp-tall.fp-half #calBody:has(.cal-tt-pane) .cal-day { min-height: 40px !important; }
html.fp-tall.fp-half #calPanel:has(.cal-tt-pane) .cal-hdr-sub { display: none; }
html.fp-tall.fp-half #calBody:has(.cal-tt-pane) .cal-dow { padding-top: 6px !important; padding-bottom: 2px !important; }
.cal-tt-ctl { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 12px; }
.cal-tt-ctl > * { margin: 0 !important; }
html.fp-tall.fp-half #calBody:has(.cal-tt-pane) .cal-legend { display: none; }
html.fp-tall.fp-half .cal-day.tt-sel { background: rgba(91, 99, 230, .12); }
html.fp-tall.fp-half .cal-day.tt-sel:not(.today) .cal-daynum { color: var(--clr-blue); font-weight: 700; }

/* Customers + drill-down screens: what you open docks into the flat half */
html.fp-tall.fp-half body:has(#fpClientsScreen:not(.fp-cw)) :is(.profile-panel.open, #fpSvcCustForm),
html.fp-tall.fp-half :is(#fpVehClientScreen, #fpVehDetail:not(.fp-cw), #fpTeamPerson, #fpTcPerson, #fpArchClientScreen, #fpArchVehScreen,
  #fpPriceClientScreen, #fpWoDetail, #fpCtDetail, #fpAgDoc, #fpEstDetail) {
  top: calc(var(--fp-fold-y) + 12px) !important; height: auto !important; bottom: 0 !important;
  border-top: 0.5px solid var(--clr-border); border-radius: 22px 22px 0 0; overflow: hidden;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .14);
}
html.fp-tall.fp-half :is(#fpVehClientScreen, #fpVehDetail:not(.fp-cw), #fpTeamPerson, #fpTcPerson, #fpArchClientScreen, #fpArchVehScreen,
  #fpPriceClientScreen, #fpWoDetail, #fpCtDetail, #fpAgDoc, #fpEstDetail, #fpSvcCustForm) > div:first-child[style*="safe-area-inset-top"] { display: none; }
/* a level that is both a detail and a list goes back to full height while ITS detail is open */
html.fp-tall.fp-half body:has(#fpVehDetail:not(.fp-cw)) #fpVehClientScreen,
html.fp-tall.fp-half body:has(#fpArchVehScreen) #fpArchClientScreen { top: 0 !important; border-radius: 0; box-shadow: none; border-top: 0; }
/* the list underneath keeps scrolling in the standing half */
html.fp-tall.fp-half body:has(.profile-panel.open, #fpSvcCustForm) #fpcList,
html.fp-tall.fp-half body:has(#fpEstDetail) #fpEstList,
html.fp-tall.fp-half body:has(#fpVehClientScreen) #fpVehScreen:not(.fp-cw) > div[style*="overflow-y:auto"],
html.fp-tall.fp-half body:has(#fpVehDetail:not(.fp-cw)) #fpVehClientScreen > div[style*="overflow-y:auto"],
html.fp-tall.fp-half body:has(#fpTeamPerson) #fpTeamScreen:not(.fp-cw) > div[style*="overflow-y:auto"],
html.fp-tall.fp-half body:has(#fpTcPerson) #fpTimecardsScreen:not(.fp-cw) > div[style*="overflow-y:auto"],
html.fp-tall.fp-half body:has(#fpArchClientScreen) #fpArchScreen:not(.fp-cw) > div[style*="overflow-y:auto"],
html.fp-tall.fp-half body:has(#fpArchVehScreen) #fpArchClientScreen > div[style*="overflow-y:auto"],
html.fp-tall.fp-half body:has(#fpPriceClientScreen) #fpPriceScreen > div[style*="overflow-y:auto"],
html.fp-tall.fp-half body:has(#fpWoDetail) #fpWoScreen > div[style*="overflow-y:auto"],
html.fp-tall.fp-half body:has(#fpCtDetail) #fpCtScreen:not(.fp-cw) > div[style*="overflow-y:auto"],
html.fp-tall.fp-half body:has(#fpAgDoc) #fpAgScreen:not(.fp-cw) > div[style*="overflow-y:auto"] {
  padding-bottom: calc(100vh - var(--fp-fold-y) + 24px) !important;
}
html.fp-tall.fp-half body:has(.profile-panel.open, #fpSvcCustForm) .fpc-row.fp-sel {
  background: rgba(91, 99, 230, .10) !important; box-shadow: inset 3px 0 0 var(--clr-blue);
}

/* ── 10. The right pane before you pick anything ─────────────────────────────
   Work Mode (#fpWmSum, app.html fpRenderWmSum), Customers (#fpcSummary) and
   Vehicles (#fpvSummary, fleetpro-admin.js): what needs doing on that screen,
   each line tappable. Only open like a book; elsewhere they're hidden. */
#fpWmSum .wm-card, .fp-sum .wm-card {
  background: var(--clr-card); border: 0.5px solid var(--clr-border); border-radius: 18px;
  padding: 14px 16px; margin-bottom: 12px;
}
.wm-hd { display: flex; justify-content: space-between; align-items: baseline; }
.wm-lbl { font-size: 11px; font-weight: 700; color: var(--clr-text2); letter-spacing: .05em; text-transform: uppercase; }
.wm-pct { color: var(--clr-green); font-weight: 800; font-size: 15px; }
.wm-bar { height: 7px; border-radius: 4px; background: var(--clr-border-light, #EEF0F4); margin-top: 10px; overflow: hidden; }
.wm-bar i { display: block; height: 100%; background: var(--clr-green); border-radius: 4px; }
.wm-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.wm-mini.three { grid-template-columns: repeat(3, 1fr); }
.wm-mini > div { background: var(--clr-bg); border-radius: 12px; padding: 9px 12px; }
.wm-mini b { display: block; font-size: 20px; font-weight: 800; color: var(--clr-text); }
.wm-mini b.red { color: var(--clr-danger); }
.wm-mini small { font-size: 11.5px; color: var(--clr-text2); }
.wm-next { font-size: 20px; font-weight: 800; color: var(--clr-text); margin-top: 8px; }
.wm-sub { font-size: 13px; color: var(--clr-text2); margin-top: 3px; line-height: 1.45; }
.wm-cta {
  display: block; width: 100%; margin-top: 12px; border: 0; border-radius: 12px; padding: 13px;
  font: inherit; font-size: 15px; font-weight: 700; color: #fff; background: var(--clr-blue); cursor: pointer;
}
.wm-fin { text-align: center; padding: 22px 16px; }
.wm-ok { width: 54px; height: 54px; border-radius: 27px; margin: 0 auto 4px; display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: var(--clr-green); background: rgba(52, 199, 89, .14); }
.wm-it {
  display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; border-top: 0.5px solid var(--clr-border-light, var(--clr-border));
  padding: 11px 0; font: inherit; color: var(--clr-text); text-align: left; cursor: pointer;
}
.wm-lbl + .wm-it, .wm-hd + .wm-it { border-top: 0; margin-top: 4px; }
.wm-n { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-n small { display: block; font-size: 12px; font-weight: 400; color: var(--clr-text2); white-space: normal; margin-top: 1px; }
.wm-amt { font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.wm-tag { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 7px; white-space: nowrap; }
.wm-tag.b-p { background: rgba(232, 160, 50, .16); color: var(--clr-amber-text, #B7791F); }
.wm-tag.b-nf { background: rgba(226, 75, 74, .12); color: var(--clr-danger); }
.wm-tag.b-flag { background: rgba(232, 160, 50, .16); color: var(--clr-amber-text, #B7791F); }
.wm-chev { color: var(--clr-chevron, #C4C7D2); font-size: 18px; }
.wm-av { width: 30px; height: 30px; border-radius: 15px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--clr-blue-bg, rgba(91, 99, 230, .12)); color: var(--clr-blue); font-size: 11px; font-weight: 700; }
.fp-sum { display: none; }
html.fp-book #fpClientsScreen:not(.fp-cw) > #fpcSummary {
  display: block !important; grid-column: 2 !important; grid-row: 3 / 8; min-height: 0; overflow-y: auto;
  padding: 14px var(--fp-pad) calc(24px + var(--fp-sai)) 0 !important;
}
html.fp-book #fpClientsScreen:not(.fp-cw):has(#fpcSummary:not(:empty))::after { display: none; }
html.fp-book #fpVehScreen:not(.fp-cw) > #fpvSummary {
  display: block; position: absolute; left: var(--fp-pr-x); right: var(--fp-pad);
  top: calc(var(--fp-sat,env(safe-area-inset-top,0px)) + 70px); bottom: 0; overflow-y: auto;
  padding-bottom: calc(24px + var(--fp-sai));
}
html.fp-book #fpVehScreen:has(#fpvSummary:not(:empty))::after { display: none; }

/* ── 11. Before / after photo editor ───────────────────────────────────────────
   Open like a book (flat or half): the photo pair on the left page, Cancel /
   Save and every control on the right page. On a table: the photo on the
   standing half, controls on the flat half. Closed and upright: unchanged. */
html.fp-book #fpiEd.on {
  display: grid; grid-template-columns: var(--fp-pl-end) 1fr; grid-template-rows: auto 1fr;
  column-gap: calc(var(--fp-pr-x) - var(--fp-pl-end));
}
html.fp-book #fpiEd .fpied-stage { grid-column: 1; grid-row: 1 / 3; }
html.fp-book #fpiEd .fpied-top { grid-column: 2; grid-row: 1; padding-right: calc(var(--fp-rail-w) + 14px); }
html.fp-book #fpiEd .fpied-panel {
  grid-column: 2; grid-row: 2; overflow-y: auto; border-top: 0;
  padding-right: calc(var(--fp-rail-w) + 14px); padding-top: 16px;
}
html.fp-book #fpiEd .fpied-strip { flex-wrap: wrap; overflow: visible; }
html.fp-tall.fp-half #fpiEd .fpied-stage { order: 0; flex: none; height: calc(var(--fp-fold-y) - 12px); }
html.fp-tall.fp-half #fpiEd .fpied-top { order: 1; margin-top: 24px; padding-top: 12px; border-radius: 20px 20px 0 0; }
html.fp-tall.fp-half #fpiEd .fpied-panel { order: 2; flex: 1; min-height: 0; overflow-y: auto; border-top: 0; }
html.fp-tall.fp-half #fpiEd .fpied-strip { justify-content: space-between; }

/* ── 12. Polish ───────────────────────────────────────────────────────────────
   The current tab gets a tinted circle in the strip (fleetpro-admin.js marks it
   .on from whatever screen is on top; the crew bar already does this). */
html.fp-rail #fpActionBar .fpBarAct.on:not([data-act="add"]) > span:first-child {
  background: rgba(91, 99, 230, .14); border-radius: 15px; padding: 5px;
}
/* A details pane beside (or under) its list closes with ✕ — "Back" reads as
   leaving the screen, but the list never went anywhere. The fleet / client-photos
   level keeps Back while ITS detail is open, because then it is the list. */
html:is(.fp-book, .fp-tall.fp-half) :is(#fpVehDetail:not(.fp-cw), #fpTeamPerson, #fpTcPerson, #fpArchVehScreen, #fpPriceClientScreen,
  #fpWoDetail, #fpCtDetail, #fpAgDoc, #fpEstDetail) > .fpScreenHead > button:first-child,
html:is(.fp-book, .fp-tall.fp-half) body:not(:has(#fpVehDetail:not(.fp-cw))) #fpVehClientScreen > .fpScreenHead > button:first-child,
html:is(.fp-book, .fp-tall.fp-half) body:not(:has(#fpArchVehScreen)) #fpArchClientScreen > .fpScreenHead > button:first-child,
html:is(.fp-book, .fp-tall.fp-half) body:has(#fpClientsScreen:not(.fp-cw)) #fpSvcCustForm > .fpScreenHead > button:first-child,
html:is(.fp-book, .fp-tall.fp-half) body:has(#fpClientsScreen:not(.fp-cw)) .profile-panel.open .settings-back {
  font-size: 0 !important; gap: 0 !important; width: 32px; height: 32px; min-width: 32px; padding: 0 !important;
  border-radius: 16px !important; justify-content: center !important; align-items: center !important;
  background: var(--clr-btn-muted, rgba(120, 120, 128, .14)) !important;
}
html:is(.fp-book, .fp-tall.fp-half) :is(#fpVehDetail:not(.fp-cw), #fpTeamPerson, #fpTcPerson, #fpArchVehScreen, #fpPriceClientScreen,
  #fpWoDetail, #fpCtDetail, #fpAgDoc, #fpEstDetail) > .fpScreenHead > button:first-child > svg,
html:is(.fp-book, .fp-tall.fp-half) body:not(:has(#fpVehDetail:not(.fp-cw))) #fpVehClientScreen > .fpScreenHead > button:first-child > svg,
html:is(.fp-book, .fp-tall.fp-half) body:not(:has(#fpArchVehScreen)) #fpArchClientScreen > .fpScreenHead > button:first-child > svg,
html:is(.fp-book, .fp-tall.fp-half) body:has(#fpClientsScreen:not(.fp-cw)) #fpSvcCustForm > .fpScreenHead > button:first-child > svg,
html:is(.fp-book, .fp-tall.fp-half) body:has(#fpClientsScreen:not(.fp-cw)) .profile-panel.open .settings-back > svg { display: none; }
html:is(.fp-book, .fp-tall.fp-half) :is(#fpVehDetail:not(.fp-cw), #fpTeamPerson, #fpTcPerson, #fpArchVehScreen, #fpPriceClientScreen,
  #fpWoDetail, #fpCtDetail, #fpAgDoc, #fpEstDetail) > .fpScreenHead > button:first-child::before,
html:is(.fp-book, .fp-tall.fp-half) body:not(:has(#fpVehDetail:not(.fp-cw))) #fpVehClientScreen > .fpScreenHead > button:first-child::before,
html:is(.fp-book, .fp-tall.fp-half) body:not(:has(#fpArchVehScreen)) #fpArchClientScreen > .fpScreenHead > button:first-child::before,
html:is(.fp-book, .fp-tall.fp-half) body:has(#fpClientsScreen:not(.fp-cw)) #fpSvcCustForm > .fpScreenHead > button:first-child::before,
html:is(.fp-book, .fp-tall.fp-half) body:has(#fpClientsScreen:not(.fp-cw)) .profile-panel.open .settings-back::before {
  content: "✕"; font-size: 14px; font-weight: 700; line-height: 1; color: var(--clr-text2);
}

/* ── 13. Open + upright: Invoices and Estimates two cards per row ──────────────
   669pt is wide enough for two phone-width cards. */
html.fp-tall :is(#fpInvList, #fpEstList) {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; column-gap: 12px; align-content: start;
  padding-left: 16px !important; padding-right: 16px !important;
}
html.fp-tall :is(#fpInvList, #fpEstList) > * { grid-column: 1 / -1; min-width: 0; }
html.fp-tall :is(#fpInvList, #fpEstList) > div[style*="position:relative"] { grid-column: auto; }
/* each card already shows its own date, so the day headings would only strand
   one card per row — drop them here and let the cards pair up in date order */
html.fp-tall :is(#fpInvList, #fpEstList) > div:not([style*="position:relative"]):has(+ div[style*="position:relative"]) { display: none; }