/* Copyright (c) 2026 Derek Frampton Davis. All rights reserved. */
/* ================================================================ */
/* MOBILE V2 - Admin-toggleable responsive "B" view                */
/* ---------------------------------------------------------------- */
/* Every redesign rule is scoped under `.whr-view--b` (a class the  */
/* admin A|B pill adds to <body>). The default "A" view is 100%     */
/* untouched until the pill is flipped, so this layer is fully      */
/* reversible.                                                      */
/* Constraints: NO font-family / font-size changes; Jost 400-500;   */
/* sharp corners (no border-radius); neutral grays only (status     */
/* colors reserved for status states, per the style guide).        */
/* Governing rule: preserve every existing page function in B       */
/* (parity first, evolution later). See audit doc §0.              */
/* Audit + plan: docs/design/MOBILE_REDESIGN_AUDIT_2026-09-20.md    */
/* ================================================================ */


/* ================================================================ */
/* A|B TOGGLE PILL (header top bar) - visible in BOTH views so it   */
/* is NOT scoped under .whr-view--b. Rendered admin-only in Twig.   */
/* ================================================================ */
.whr-view-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e0e0e0;
  background: #fff;
  padding: 0;
  margin: 0 10px 0 0;
  cursor: pointer;
  font-family: var(--whr-font-stack, "Jost", sans-serif);
  line-height: 1;
  vertical-align: middle;
}
.whr-view-toggle .whr-vt-seg {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  color: #999;
  transition: background .15s ease, color .15s ease;
}
.whr-view-toggle .whr-vt-a { border-right: 1px solid #e0e0e0; }
.whr-view-toggle:not(.is-b) .whr-vt-a { background: #333; color: #fff; }
.whr-view-toggle.is-b .whr-vt-b { background: #333; color: #fff; }
.whr-view-toggle:hover .whr-vt-seg { color: #666; }
.whr-view-toggle:not(.is-b):hover .whr-vt-a,
.whr-view-toggle.is-b:hover .whr-vt-b { color: #fff; }


/* ================================================================ */
/* FOUNDATION (B view) - safe global tweaks, mobile/tablet only.    */
/* Per-page passes are added below this block as pages are          */
/* converted. Expense History intentionally has NO page overrides   */
/* (its B view == A; frozen columns were rejected, the flagged-row  */
/* tint is enough highlight).                                       */
/* ================================================================ */
@media (max-width: 1199px) {
  .whr-view--b .whr-breadcrumb { padding-bottom: 14px; }
  .whr-view--b .mobile-tab-bar {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 1199px) and (max-height: 500px) {
  .whr-view--b .whr-header-card { margin-bottom: 6px; }
  .whr-view--b .whr-breadcrumb { padding-top: 6px; padding-bottom: 8px; }
  .whr-view--b .summary-row { margin-bottom: 8px; }
}


/* ================================================================ */
/* ADVANCES - make the inline-edit controls legible-as-editable and */
/* finger-usable on touch. No layout restructure, no function       */
/* removed: every field stays inline-editable with autosave; remove */
/* (x) -> delete modal; view toggle / filter / collapsible groups / */
/* autocomplete all preserved. Read-only (disabled) fields are left */
/* static via :not([disabled]) so the read-only role still reads    */
/* as read-only.                                                    */
/* ================================================================ */
@media (max-width: 768px) {
  /* Stack card + grouped rows so each field gets its own touch row. */
  .whr-view--b #advance-history-container .advance-card-main {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .whr-view--b #advance-history-container .grouped-advance-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Inline-edit inputs: visible affordance + 44px tap height. */
  .whr-view--b #advance-history-container .advance-card input:not([disabled]),
  .whr-view--b #advance-history-container .grouped-advance-row input:not([disabled]) {
    border-bottom: 1px solid #e0e0e0;
    padding: 8px 0;
    min-height: 44px;
    width: 100%;
  }
  /* Selects: same affordance but keep the right padding for the chevron. */
  .whr-view--b #advance-history-container .advance-card select:not([disabled]),
  .whr-view--b #advance-history-container .grouped-advance-row select:not([disabled]) {
    border-bottom: 1px solid #e0e0e0;
    padding-top: 8px;
    padding-bottom: 8px;
    min-height: 44px;
    width: 100%;
  }
  /* Left-align amount for easier on-touch editing. */
  .whr-view--b #advance-history-container .advance-card .amount-input,
  .whr-view--b #advance-history-container .grouped-advance-row .amount-input {
    text-align: left;
  }

  /* Remove (x): 44px hit area, glyph unchanged. */
  .whr-view--b #advance-history-container .advance-card-remove,
  .whr-view--b #advance-history-container .grouped-advance-remove {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
  }
  .whr-view--b #advance-history-container .advance-card-remove {
    top: 6px;
    right: 6px;
  }

  /* Collapse/expand person group: comfortable tap target. */
  .whr-view--b #advance-history-container .person-group-header {
    min-height: 48px;
  }

  /* Add-advance form fields: comfortable height. */
  .whr-view--b #advance-history-container .add-advance-form .form-input {
    min-height: 44px;
  }

  /* Autocomplete must sit above the fixed tab bar (z-index 1000). */
  .whr-view--b #advance-history-container .autocomplete-dropdown {
    z-index: 1002;
  }
}

/* Landscape: keep the autocomplete from running under the tab bar. */
@media (max-width: 768px) and (max-height: 500px) {
  .whr-view--b #advance-history-container .autocomplete-dropdown {
    max-height: 40vh;
    max-height: 40dvh;
  }
}


/* ================================================================ */
/* BUDGET SETUP  (#budget-setup-container)                          */
/* Restores the Days/Rate/Qty/Tax columns hidden on phones by       */
/* letting the category BODY scroll horizontally (sticky category   */
/* headers + bulk toolbar stay fixed). Enlarges calendar boxes and  */
/* clamps the body-appended overlays. [REVIEW: horizontal-scroll    */
/* body + SortableJS drag — device check.]                          */
/* ================================================================ */
@media (max-width: 768px) {
  .whr-view--b #budget-setup-container .budget-section { padding: 16px 12px; }

  .whr-view--b #budget-setup-container .metadata-section-header,
  .whr-view--b #budget-setup-container .payment-section-header,
  .whr-view--b #budget-setup-container .sow-section-header,
  .whr-view--b #budget-setup-container .versions-section-header,
  .whr-view--b #budget-setup-container .sow-sub-header {
    min-height: 44px;
    box-sizing: border-box;
  }

  .whr-view--b #budget-setup-container .meta-input,
  .whr-view--b #budget-setup-container .meta-select,
  .whr-view--b #budget-setup-container .version-title-input,
  .whr-view--b #budget-setup-container .version-notes-input,
  .whr-view--b #budget-setup-container .percent-input {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .whr-view--b #budget-setup-container .meta-textarea,
  .whr-view--b #budget-setup-container .sow-textarea,
  .whr-view--b #budget-setup-container .sow-item-body textarea { min-height: 96px; }
  .whr-view--b #budget-setup-container .meta-num { min-height: 44px; }

  .whr-view--b #budget-setup-container .meta-add-btn,
  .whr-view--b #budget-setup-container .version-save-btn,
  .whr-view--b #budget-setup-container .version-load-btn,
  .whr-view--b #budget-setup-container .version-delete-btn,
  .whr-view--b #budget-setup-container .sow-btn,
  .whr-view--b #budget-setup-container .btn-cancel,
  .whr-view--b #budget-setup-container .btn-import,
  .whr-view--b #budget-setup-container .li-add-category-btn,
  .whr-view--b #budget-setup-container .li-lock-btn,
  .whr-view--b #budget-setup-container .li-export-excel-btn,
  .whr-view--b #budget-setup-container .li-view-dropdown-btn,
  .whr-view--b #budget-setup-container .li-cat-add-btn,
  .whr-view--b #budget-setup-container .li-cat-template-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .whr-view--b #budget-setup-container .li-add-row-btn { min-height: 44px; }

  .whr-view--b #budget-setup-container .sow-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .whr-view--b #budget-setup-container .sow-toolbar-actions,
  .whr-view--b #budget-setup-container .sow-def-toolbar { flex-wrap: wrap; }
  .whr-view--b #budget-setup-container .sow-item-row { flex-wrap: wrap; }
  .whr-view--b #budget-setup-container .sow-item-title { min-width: 0; padding-top: 0; }

  .whr-view--b #budget-setup-container .li-toolbar { flex-wrap: wrap; }
  .whr-view--b #budget-setup-container .li-export-excel-btn { margin-left: 0; }
  .whr-view--b #budget-setup-container .li-bulk-toolbar { flex-wrap: wrap; gap: 8px; }
  .whr-view--b #budget-setup-container .li-bulk-toolbar .li-bulk-duplicate-btn,
  .whr-view--b #budget-setup-container .li-bulk-toolbar .li-bulk-delete-btn,
  .whr-view--b #budget-setup-container .li-bulk-toolbar .li-bulk-focus-btn,
  .whr-view--b #budget-setup-container .li-bulk-toolbar .li-bulk-deselect-btn { min-height: 44px; }
  .whr-view--b #budget-setup-container .li-bulk-spacer { display: none; }
  .whr-view--b #budget-setup-container .li-bulk-totals {
    border-left: none; margin-left: 0; padding-left: 0; flex-basis: 100%;
  }

  /* PARITY FIX: re-show hidden edit columns; scroll the category body. */
  .whr-view--b #budget-setup-container .li-category-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .whr-view--b #budget-setup-container .li-col-header,
  .whr-view--b #budget-setup-container .li-item-row {
    grid-template-columns: 32px 30px minmax(150px,1fr) 72px 90px 56px 96px 96px 40px;
    min-width: 620px;
  }
  .whr-view--b #budget-setup-container .li-col-header-cell:nth-child(4),
  .whr-view--b #budget-setup-container .li-col-header-cell:nth-child(5),
  .whr-view--b #budget-setup-container .li-col-header-cell:nth-child(6),
  .whr-view--b #budget-setup-container .li-col-header-cell:nth-child(8),
  .whr-view--b #budget-setup-container .li-cell:nth-child(4),
  .whr-view--b #budget-setup-container .li-cell:nth-child(5),
  .whr-view--b #budget-setup-container .li-cell:nth-child(6),
  .whr-view--b #budget-setup-container .li-cell:nth-child(8) { display: flex; }
  .whr-view--b #budget-setup-container .li-item-row { min-height: 44px; }
  .whr-view--b #budget-setup-container .li-cell input[type="text"],
  .whr-view--b #budget-setup-container .li-cell input[type="number"] { min-height: 40px; }
  .whr-view--b #budget-setup-container .li-detail-panel { padding-left: 12px; padding-right: 12px; }
  .whr-view--b #budget-setup-container .li-focus-mode .li-detail-panel { padding-left: 12px; padding-right: 12px; }

  .whr-view--b #budget-setup-container .li-cal-day { min-width: 40px; }
  .whr-view--b #budget-setup-container .li-cal-box { width: 38px; height: 40px; }
  .whr-view--b #budget-setup-container .li-cal-arrow { flex-basis: 40px; flex-shrink: 0; }
  .whr-view--b #budget-setup-container .li-cal-controls-right { float: none; flex-wrap: wrap; margin-right: 0; }
  .whr-view--b #budget-setup-container .li-cal-reset-btn,
  .whr-view--b #budget-setup-container .li-cal-notes-toggle,
  .whr-view--b #budget-setup-container .li-cal-focus-btn,
  .whr-view--b #budget-setup-container .li-cal-sync-label { min-height: 40px; display: inline-flex; align-items: center; }
  .whr-view--b #budget-setup-container .li-detail-promote-btn,
  .whr-view--b #budget-setup-container .li-detail-delete-btn { min-height: 40px; }

  .whr-view--b #budget-setup-container .upload-area { min-height: 44px; }
  .whr-view--b #budget-setup-container .history-download-btn,
  .whr-view--b #budget-setup-container .history-reimport-btn,
  .whr-view--b #budget-setup-container .history-delete-btn { width: 40px; height: 40px; }
  .whr-view--b #budget-setup-container .btn-clear { min-height: 40px; }
}
/* Body-appended overlays (outside the container): clamp + lift only. */
@media (max-width: 768px) {
  .whr-view--b .li-cat-picker,
  .whr-view--b .li-autocomplete,
  .whr-view--b .li-view-dropdown-menu {
    max-width: calc(100vw - 16px);
    max-height: 60vh;
    z-index: 1100;
  }
  .whr-view--b .li-cat-picker { min-width: 0; width: calc(100vw - 16px); }
  .whr-view--b .li-template-panel {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; max-width: 100vw; max-height: 80vh; z-index: 1100;
  }
}
@media (max-width: 1199px) {
  .whr-view--b .li-cat-picker,
  .whr-view--b .li-autocomplete,
  .whr-view--b .li-template-panel,
  .whr-view--b .li-view-dropdown-menu { z-index: 1100; }
}
@media (max-width: 768px) and (max-height: 500px) {
  .whr-view--b #budget-setup-container .budget-section { padding: 10px 12px; }
  .whr-view--b #budget-setup-container .metadata-section-header,
  .whr-view--b #budget-setup-container .payment-section-header,
  .whr-view--b #budget-setup-container .sow-section-header,
  .whr-view--b #budget-setup-container .versions-section-header,
  .whr-view--b #budget-setup-container .sow-sub-header { min-height: 40px; }
  .whr-view--b #budget-setup-container .meta-textarea,
  .whr-view--b #budget-setup-container .sow-textarea,
  .whr-view--b #budget-setup-container .sow-item-body textarea { min-height: 60px; }
  .whr-view--b .li-cat-picker,
  .whr-view--b .li-autocomplete,
  .whr-view--b .li-view-dropdown-menu { max-height: 78vh; }
  .whr-view--b .li-template-panel { max-height: 92vh; }
  .whr-view--b #budget-setup-container .li-cal-box { height: 36px; }
}


/* ================================================================ */
/* RUNNING TOTALS  (#running-totals-container)                      */
/* Stacks the crushed 4-col fee grid + 5-col category list to       */
/* label-over-values; trims allocation indent; height-independent   */
/* privacy overlay. Does NOT touch JS-animated wrappers.            */
/* ================================================================ */
@media (max-width: 768px) {
  .whr-view--b #running-totals-container .production-calcs .calc-row,
  .whr-view--b #running-totals-container .production-calcs .calc-row.subtotal-row,
  .whr-view--b #running-totals-container .production-calcs .calc-row.grand-total-row {
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: min-content;
    gap: 4px 8px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .whr-view--b #running-totals-container .production-calcs .calc-row .calc-label {
    grid-column: 1 / -1;
  }
  .whr-view--b #running-totals-container .production-calcs .calc-row .calc-value {
    text-align: right;
    min-width: 0;
  }
  .whr-view--b #running-totals-container .production-calcs .calc-row.calc-header-row .calc-label { display: none; }

  .whr-view--b #running-totals-container #comparison-list .category-header,
  .whr-view--b #running-totals-container #comparison-list .category-item {
    grid-template-columns: 24px 1fr 1fr 1fr;
    gap: 4px 8px;
    align-items: center;
  }
  .whr-view--b #running-totals-container #comparison-list .category-item .category-name {
    grid-column: 2 / -1;
    white-space: normal;
    overflow: visible;
  }
  .whr-view--b #running-totals-container #comparison-list .category-item .category-estimated,
  .whr-view--b #running-totals-container #comparison-list .category-item .category-actuals,
  .whr-view--b #running-totals-container #comparison-list .category-item .category-remaining {
    grid-row: 2;
    text-align: right;
  }
  .whr-view--b #running-totals-container #comparison-list .category-item .category-letter { grid-row: 1; }
  .whr-view--b #running-totals-container #comparison-list .category-header .col-estimated,
  .whr-view--b #running-totals-container #comparison-list .category-header .col-actuals,
  .whr-view--b #running-totals-container #comparison-list .category-header .col-remaining { text-align: right; }

  .whr-view--b #running-totals-container .allocations-list { padding-left: 12px; }
  .whr-view--b #running-totals-container a.allocation-row {
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .whr-view--b #running-totals-container a.allocation-row .allocation-desc { grid-column: 1 / -1; white-space: normal; }
  .whr-view--b #running-totals-container a.allocation-row .allocation-amount { text-align: right; }
  .whr-view--b #running-totals-container .line-item-row td,
  .whr-view--b #running-totals-container .line-item-row td:first-child { padding-left: 20px; }

  .whr-view--b #running-totals-container .chart-section { min-height: 0; }
}
@media (max-width: 768px) and (max-height: 500px) {
  .whr-view--b #running-totals-container .chart-section { min-height: 0; }
  .whr-view--b #running-totals-container .chart-summary {
    flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; padding-top: 12px;
  }
  .whr-view--b #running-totals-container .rt-bottom-spacer { height: 18vh; }
}
@media (max-width: 1199px) {
  .whr-view--b #running-totals-container .calcs-section .privacy-overlay {
    top: auto; height: auto; inset: 3.5em 0 0 0;
  }
  .whr-view--b #running-totals-container .calcs-section .privacy-toggle { z-index: 1002; }
}


/* ================================================================ */
/* EDIT ENTRIES  (#edit-entries-container)                          */
/* Page is already good on mobile. Only: viewport-relative image    */
/* height (was fixed 400px) + remove the inner 80vh scroll trap.    */
/* ================================================================ */
@media (max-width: 768px) {
  .whr-view--b #edit-entries-container .record-thumbnail {
    height: 45vh;
    min-height: 240px;
    max-height: 400px;
  }
  .whr-view--b #edit-entries-container .v2-card {
    max-height: none;
    overflow-y: visible;
  }
}
@media (max-width: 768px) and (max-height: 500px) {
  .whr-view--b #edit-entries-container .record-thumbnail {
    height: 60vh;
    min-height: 180px;
    max-height: 400px;
  }
}


/* ================================================================ */
/* SCHEDULE EDITOR  (#schedule-editor-container)                    */
/* Toolbar wrap + 44px controls, bigger handles/date cells, expose  */
/* hover-only actions on touch, touch-action on draggables, clamp   */
/* fixed/absolute popups, stack notes sidebar, landscape trims.     */
/* [REVIEW: touch-drag reorder is a known limitation — CSS          */
/* touch-action helps but full touch DnD needs a JS follow-up.]     */
/* ================================================================ */
@media (max-width: 1199px) {
  .whr-view--b #schedule-editor-container .se-toolbar { gap: 8px; padding: 8px 10px; row-gap: 8px; }
  .whr-view--b #schedule-editor-container .se-toolbar-spacer { flex-basis: 100%; height: 0; flex: 0 0 100%; }
  .whr-view--b #schedule-editor-container .se-tool-btn,
  .whr-view--b #schedule-editor-container .se-nav-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .whr-view--b #schedule-editor-container .se-nav-btn { min-width: 44px; width: auto; height: 44px; }
  .whr-view--b #schedule-editor-container .se-tool-btn { padding: 0 12px; }
  .whr-view--b #schedule-editor-container .se-day-type-badge.visible { min-height: 28px; display: inline-flex; align-items: center; }

  .whr-view--b #schedule-editor-container .se-day-cell { min-width: 54px; padding: 8px 8px; min-height: 44px; }
  .whr-view--b #schedule-editor-container .se-add-date-btn { min-width: 44px; min-height: 44px; }
  .whr-view--b #schedule-editor-container .se-date-strip { scrollbar-width: auto; -webkit-overflow-scrolling: touch; }
  .whr-view--b #schedule-editor-container .se-date-strip::-webkit-scrollbar { height: 8px; }

  .whr-view--b #schedule-editor-container .se-main-canvas { min-height: 320px; }
  .whr-view--b #schedule-editor-container .se-runs-area { padding-bottom: 120px; }

  .whr-view--b #schedule-editor-container .se-crew-header,
  .whr-view--b #schedule-editor-container .se-groups-header,
  .whr-view--b #schedule-editor-container .se-transport-header { min-height: 48px; }
  .whr-view--b #schedule-editor-container .se-transport-actions .se-tool-btn { min-height: 40px; }

  .whr-view--b #schedule-editor-container .se-section-drag-handle,
  .whr-view--b #schedule-editor-container .se-run-drag-handle,
  .whr-view--b #schedule-editor-container .se-vcard-pass-drag,
  .whr-view--b #schedule-editor-container .se-gcard-member-drag,
  .whr-view--b #schedule-editor-container .se-csl-drag,
  .whr-view--b #schedule-editor-container .se-book-drag,
  .whr-view--b #schedule-editor-container .se-shooting-drag-handle {
    min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  }
  .whr-view--b #schedule-editor-container .se-section-drag-handle { opacity: 0.6; }
  .whr-view--b #schedule-editor-container .se-vcard-remove,
  .whr-view--b #schedule-editor-container .se-gcard-remove,
  .whr-view--b #schedule-editor-container .se-vcard-pass-remove,
  .whr-view--b #schedule-editor-container .se-gcard-member-remove,
  .whr-view--b #schedule-editor-container .se-sec-remove,
  .whr-view--b #schedule-editor-container .se-run-person-remove,
  .whr-view--b #schedule-editor-container .se-location-remove,
  .whr-view--b #schedule-editor-container .se-att-card-delete,
  .whr-view--b #schedule-editor-container .se-run-delete {
    min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .whr-view--b #schedule-editor-container .se-event-actions-bar { display: flex; }
  .whr-view--b #schedule-editor-container .se-evt-action-btn { min-height: 36px; border-color: #ddd; }
  .whr-view--b #schedule-editor-container .se-event-toolbar { min-height: 40px; }

  .whr-view--b #schedule-editor-container .se-crew-chip,
  .whr-view--b #schedule-editor-container .se-run-drag-handle,
  .whr-view--b #schedule-editor-container .se-event-drag-handle,
  .whr-view--b #schedule-editor-container .se-event-toolbar,
  .whr-view--b #schedule-editor-container .se-section-drag-handle,
  .whr-view--b #schedule-editor-container .se-vcard-pass-drag,
  .whr-view--b #schedule-editor-container .se-gcard-member-drag,
  .whr-view--b #schedule-editor-container .se-vehicle-card,
  .whr-view--b #schedule-editor-container .se-group-card,
  .whr-view--b #schedule-editor-container .se-sec-vehicle,
  .whr-view--b #schedule-editor-container .se-sec-group,
  .whr-view--b #schedule-editor-container .se-sec-subgroup,
  .whr-view--b #schedule-editor-container .se-run-location-item,
  .whr-view--b #schedule-editor-container .se-csl-drag,
  .whr-view--b #schedule-editor-container .se-book-drag,
  .whr-view--b #schedule-editor-container .se-shooting-drag-handle { touch-action: none; }

  .whr-view--b #schedule-editor-container .se-cascade-panel,
  .whr-view--b #schedule-editor-container .se-roster-popup,
  .whr-view--b #schedule-editor-container .se-transfer-panel {
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    left: 8px !important; right: 8px !important; width: auto !important;
    overflow-y: auto; box-sizing: border-box;
  }
  .whr-view--b #schedule-editor-container .se-transport-dropdown,
  .whr-view--b #schedule-editor-container .se-person-dropdown,
  .whr-view--b #schedule-editor-container .se-transfer-dropdown,
  .whr-view--b #schedule-editor-container .se-run-assign-dropdown,
  .whr-view--b #schedule-editor-container .se-location-picker-dropdown,
  .whr-view--b #schedule-editor-container .se-autocomplete-dropdown,
  .whr-view--b #schedule-editor-container .se-pdf-menu,
  .whr-view--b #schedule-editor-container .se-idml-menu,
  .whr-view--b #schedule-editor-container .se-tools-menu {
    max-width: calc(100vw - 16px); min-width: 0; max-height: 60vh; max-height: 60dvh; overflow-y: auto; box-sizing: border-box;
  }
  .whr-view--b #schedule-editor-container .se-pdf-menu,
  .whr-view--b #schedule-editor-container .se-idml-menu,
  .whr-view--b #schedule-editor-container .se-tools-menu,
  .whr-view--b #schedule-editor-container .se-transport-dropdown,
  .whr-view--b #schedule-editor-container .se-person-dropdown,
  .whr-view--b #schedule-editor-container .se-location-picker-dropdown,
  .whr-view--b #schedule-editor-container .se-autocomplete-dropdown { z-index: 1002; }
}
@media (max-width: 768px) {
  .whr-view--b #schedule-editor-container .se-notes-sidebar { flex-direction: column; flex-wrap: nowrap; }
  .whr-view--b #schedule-editor-container .se-sidebar-section { min-width: 0; flex: 1 1 auto; width: 100%; }
  .whr-view--b #schedule-editor-container .se-sidebar-resize { display: none; }
  .whr-view--b #schedule-editor-container .se-shooting-modal,
  .whr-view--b .se-shooting-modal { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
}
@media (max-width: 768px) and (max-height: 500px) {
  .whr-view--b #schedule-editor-container .se-toolbar { padding: 4px 8px; gap: 6px; }
  .whr-view--b #schedule-editor-container .se-day-cell { padding: 4px 8px; min-height: 40px; }
  .whr-view--b #schedule-editor-container .se-crew-body,
  .whr-view--b #schedule-editor-container .se-transport-body,
  .whr-view--b #schedule-editor-container .se-groups-body { max-height: 40vh; max-height: 40dvh; overflow-y: auto; }
  .whr-view--b #schedule-editor-container .se-cascade-panel,
  .whr-view--b #schedule-editor-container .se-roster-popup,
  .whr-view--b #schedule-editor-container .se-transfer-panel { max-height: calc(100dvh - 12px); }
  .whr-view--b #schedule-editor-container .se-runs-area { padding-bottom: 90px; }
}


/* ================================================================ */
/* CALL SHEET BUILDER  (#callsheet-builder-container)               */
/* Prominent Generate IDML, bigger day strip, scroll-wrap contact   */
/* table, reposition contact dropdown, stack location thumb, un-    */
/* stick header in landscape. touch-action on drag handles.         */
/* ================================================================ */
@media (max-width: 1199px) {
  .whr-view--b #callsheet-builder-container .cs-header-unified .cs-section-label { flex-wrap: wrap; row-gap: 8px; }
  .whr-view--b #callsheet-builder-container .cs-header-section-actions { margin-left: 0; flex-wrap: wrap; width: 100%; gap: 8px; }
  .whr-view--b #callsheet-builder-container .cs-prepend-toggle { min-height: 44px; flex: 1 1 45%; }
  .whr-view--b #callsheet-builder-container .cs-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .whr-view--b #callsheet-builder-container .cs-btn-secondary { flex: 0 0 auto; }
  .whr-view--b #callsheet-builder-container .cs-btn-primary { flex: 1 1 100%; order: 9; font-weight: 500; }

  .whr-view--b #callsheet-builder-container .cs-day-strip { -webkit-overflow-scrolling: touch; }
  .whr-view--b #callsheet-builder-container .cs-day-btn { padding: 8px 12px; min-height: 44px; }
  .whr-view--b #callsheet-builder-container .cs-day-nav { width: 44px; height: 44px; flex-shrink: 0; }

  .whr-view--b #callsheet-builder-container #cs-contacts-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .whr-view--b #callsheet-builder-container .cs-contact-list-table { min-width: 520px; }

  .whr-view--b #callsheet-builder-container .cs-contact-dropdown {
    left: 0; right: 0; width: auto; max-width: calc(100vw - 16px); box-sizing: border-box; z-index: 1002;
  }
  .whr-view--b #callsheet-builder-container .cs-contact-results { max-height: 50vh; max-height: 50dvh; }

  .whr-view--b #callsheet-builder-container .cs-att-drag-handle,
  .whr-view--b #callsheet-builder-container .cs-location-drag-handle {
    min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .whr-view--b #callsheet-builder-container .cs-att-delete { width: 44px; height: 44px; }
  .whr-view--b #callsheet-builder-container .cs-att-persist-toggle,
  .whr-view--b #callsheet-builder-container .cs-att-persist-cb { min-height: 44px; }

  .whr-view--b #callsheet-builder-container .cs-editable-value,
  .whr-view--b #callsheet-builder-container .cs-override-value,
  .whr-view--b #callsheet-builder-container .cs-crew-call-editable,
  .whr-view--b #callsheet-builder-container .cs-notes-line { min-height: 40px; display: flex; align-items: center; }
  .whr-view--b #callsheet-builder-container .cs-notes-edit-btn { min-height: 40px; }

  .whr-view--b #callsheet-builder-container .cs-att-drag-handle,
  .whr-view--b #callsheet-builder-container .cs-location-drag-handle { touch-action: none; }
}
@media (max-width: 600px) {
  .whr-view--b #callsheet-builder-container .cs-location-body { flex-direction: column; }
  .whr-view--b #callsheet-builder-container .cs-location-map-thumb { width: 100%; }
}
@media (max-width: 768px) and (max-height: 500px) {
  .whr-view--b #callsheet-builder-container .cs-sticky-header { position: static; }
  .whr-view--b #callsheet-builder-container .cs-toolbar { padding: 4px 10px; margin-bottom: 6px; }
  .whr-view--b #callsheet-builder-container .cs-day-btn { min-height: 40px; padding: 6px 10px; }
  .whr-view--b #callsheet-builder-container .cs-contact-results { max-height: 40dvh; }
}


/* ================================================================ */
/* PROJECT RESOURCES  (#crew-list-container)                        */
/* Wrap compact-card header, enlarge calendar day/box + arrows,     */
/* bigger view-toggle + actions, reclaim bottom padding.            */
/* ================================================================ */
@media (max-width: 1199px) {
  .whr-view--b #crew-list-container .crew-list { padding-bottom: 24px; }
}
@media (max-width: 768px) {
  .whr-view--b #crew-list-container .crew-toolbar { flex-wrap: wrap; align-items: stretch; }
  .whr-view--b #crew-list-container .crew-search-wrap { flex: 1 1 100%; }
  .whr-view--b #crew-list-container .crew-search-input { min-height: 44px; box-sizing: border-box; }
  .whr-view--b #crew-list-container .crew-view-level-toggle { flex: 0 0 auto; }
  .whr-view--b #crew-list-container .crew-view-level-btn { min-width: 48px; min-height: 44px; padding: 5px 12px; }
  .whr-view--b #crew-list-container .crew-add-group-btn { flex: 1 1 auto; min-height: 44px; text-align: center; }

  .whr-view--b #crew-list-container .crew-group-header { padding: 10px 12px; gap: 8px; }
  .whr-view--b #crew-list-container .crew-group-chevron { width: 22px; padding: 8px 0; }
  .whr-view--b #crew-list-container .crew-section-cb { width: 20px; height: 20px; }
  .whr-view--b #crew-list-container .crew-section-add-btn { padding: 6px 10px; min-height: 32px; }
  .whr-view--b #crew-list-container .crew-group-actions { opacity: 1; }
  .whr-view--b #crew-list-container .crew-group-action-btn { padding: 8px 8px; }

  .whr-view--b #crew-list-container .crew-card-compact .crew-card-header { flex-wrap: wrap; gap: 6px 10px; align-items: center; }
  .whr-view--b #crew-list-container .crew-compact-role { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; flex: 1 1 auto; min-width: 0; }
  .whr-view--b #crew-list-container .crew-card-compact { padding: 10px 14px; }
  .whr-view--b #crew-list-container .crew-card-actions,
  .whr-view--b #crew-list-container .crew-card-compact .crew-card-actions { opacity: 1; }
  .whr-view--b #crew-list-container .crew-action-btn { width: 40px; height: 40px; }

  .whr-view--b #crew-list-container .crew-cal-day { min-width: 44px; padding: 4px 3px 5px; }
  .whr-view--b #crew-list-container .crew-cal-box,
  .whr-view--b #crew-list-container .crew-merged-box { width: 30px; min-width: 30px; height: 28px; }
  .whr-view--b #crew-list-container .crew-cal-arrow { flex: 0 0 44px; }
  .whr-view--b #crew-list-container .crew-cal-strip-scroll { padding: 8px 6px; scrollbar-width: auto; }
  .whr-view--b #crew-list-container .crew-cal-strip-scroll::-webkit-scrollbar { height: 8px; }
  .whr-view--b #crew-list-container .crew-merged-strip { padding: 4px 12px 8px 34px; }
  .whr-view--b #crew-list-container .crew-cal-reset-btn { min-height: 32px; padding: 0 10px; }
  .whr-view--b #crew-list-container .crew-cal-sync-label { padding: 6px 0; }

  .whr-view--b #crew-list-container .crew-edit-field input,
  .whr-view--b #crew-list-container .crew-edit-field select { min-height: 40px; }

  .whr-view--b #crew-list-container .crew-group-picker { right: 0; left: 0; min-width: 0; width: 100%; }
  .whr-view--b #crew-list-container .crew-group-picker-item { padding: 12px; }
  .whr-view--b #crew-list-container .crew-link-picker-item { padding: 12px; }
  .whr-view--b #crew-list-container .crew-link-unlink,
  .whr-view--b #crew-list-container .crew-adhoc-remove { padding: 8px 6px; }
}
@media (max-width: 768px) and (max-height: 500px) {
  .whr-view--b #crew-list-container .crew-modal { height: 100vh; max-height: 100vh; }
  .whr-view--b #crew-list-container .crew-modal-header { position: sticky; top: 0; background: #fff; z-index: 1; }
  .whr-view--b #crew-list-container .crew-doublebook-modal,
  .whr-view--b .crew-doublebook-overlay .crew-doublebook-modal { max-height: 92vh; overflow-y: auto; }
  .whr-view--b #crew-list-container .crew-list { padding-bottom: 12px; }
}


/* ================================================================ */
/* CONTACTS LIBRARY  (#contacts-library-container)                  */
/* Shrink 216px avatar, fluid search, 44px edit/tag/menu targets,   */
/* landscape split-layout + avatar guard.                           */
/* ================================================================ */
@media (max-width: 768px) {
  .whr-view--b #contacts-library-container .contacts-toolbar-left { width: 100%; flex: 1 1 100%; }
  .whr-view--b #contacts-library-container .contacts-search-input { min-width: 0; width: 100%; min-height: 44px; box-sizing: border-box; }
  .whr-view--b #contacts-library-container .contacts-toolbar-right { width: 100%; justify-content: flex-start; }
  .whr-view--b #contacts-library-container .btn-add-contact,
  .whr-view--b #contacts-library-container .btn-import-users { min-height: 44px; }
  .whr-view--b #contacts-library-container .add-contact-menu { right: 0; left: auto; }
  .whr-view--b #contacts-library-container .add-contact-item { padding: 12px 14px; }
  .whr-view--b #contacts-library-container .tag-pill { padding: 8px 12px; }

  .whr-view--b #contacts-library-container .detail-avatar-lg { width: 120px !important; height: 120px !important; font-size: 40px !important; }
  .whr-view--b #contacts-library-container .detail-header { padding: 14px 16px; }
  .whr-view--b #contacts-library-container .detail-edit-btn { min-height: 44px; display: inline-flex; align-items: center; padding: 6px 14px; }
  .whr-view--b #contacts-library-container .detail-tab { padding: 12px 16px; }
  .whr-view--b #contacts-library-container .detail-edit-input { min-height: 40px; }
  .whr-view--b #contacts-library-container .detail-field-value { padding: 6px 4px; }
  .whr-view--b #contacts-library-container .pa-row { padding: 8px 0; }
  .whr-view--b #contacts-library-container .detail-tag-remove,
  .whr-view--b #contacts-library-container .detail-vendor-unlink,
  .whr-view--b #contacts-library-container .company-unlink,
  .whr-view--b #contacts-library-container .addr-delete { padding: 8px 8px; line-height: 1; }
  .whr-view--b #contacts-library-container .detail-actions { flex-wrap: wrap; }
  .whr-view--b #contacts-library-container .btn-duplicate-contact,
  .whr-view--b #contacts-library-container .btn-archive-contact { min-height: 44px; }
}
@media (max-width: 768px) and (max-height: 500px) {
  .whr-view--b #contacts-library-container .contacts-split-layout { min-height: 0; }
  .whr-view--b #contacts-library-container .detail-avatar-lg { width: 96px !important; height: 96px !important; font-size: 32px !important; }
  .whr-view--b #contacts-library-container .detail-header { padding: 10px 14px; }
  .whr-view--b #contacts-library-container .photo-crop-modal,
  .whr-view--b .photo-crop-overlay .photo-crop-modal { max-height: 94vh; overflow-y: auto; }
}


/* ================================================================ */
/* CREW CALL TIMES  (#crew-call-times-container)                    */
/* Finish the card-per-row transform with :nth-child labels (JS     */
/* column order is fixed), apply it up to 900px so landscape phones */
/* don't get the wide table, 44px inline editors.                   */
/* ================================================================ */
@media (max-width: 1199px) {
  .whr-view--b #crew-call-times-container { padding-bottom: 16px; }
  .whr-view--b #crew-call-times-container .ct-toolbar,
  .whr-view--b #crew-call-times-container .ct-controls-bar { flex-wrap: wrap; }
  .whr-view--b #crew-call-times-container .ct-nav-btn { width: 44px; height: 44px; }
  .whr-view--b #crew-call-times-container .ct-day-cell { min-width: 54px; min-height: 44px; padding: 6px 8px; }
  .whr-view--b #crew-call-times-container .ct-date-strip { padding: 8px; }
  .whr-view--b #crew-call-times-container .ct-search-input { max-width: none; }
  .whr-view--b #crew-call-times-container .ct-expand-btn { min-height: 40px; padding: 8px 12px; }
}
@media (max-width: 900px) {
  .whr-view--b #crew-call-times-container .ct-table thead { display: none; }
  .whr-view--b #crew-call-times-container .ct-table,
  .whr-view--b #crew-call-times-container .ct-table tbody { display: block; width: 100%; }
  .whr-view--b #crew-call-times-container .ct-crew-row { display: block; padding: 10px 12px; border-bottom: 1px solid #e0e0e0; }
  .whr-view--b #crew-call-times-container .ct-crew-row:hover td { background: transparent; }
  .whr-view--b #crew-call-times-container .ct-crew-row td {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 4px 0; border: none; box-sizing: border-box; min-height: 32px;
  }
  .whr-view--b #crew-call-times-container .ct-crew-row td::before {
    color: #999; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0;
  }
  .whr-view--b #crew-call-times-container .ct-crew-row td.ct-name-cell {
    display: block; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #f0f0f0;
  }
  .whr-view--b #crew-call-times-container .ct-crew-row td:nth-child(2)::before { content: "Call"; }
  .whr-view--b #crew-call-times-container .ct-crew-row td:nth-child(3)::before { content: "Wrap"; }
  .whr-view--b #crew-call-times-container .ct-crew-row td:nth-child(4)::before { content: "Type"; }
  .whr-view--b #crew-call-times-container .ct-crew-row td:nth-child(5)::before { content: "Status"; }
  .whr-view--b #crew-call-times-container .ct-crew-row td:nth-child(6)::before { content: "Note"; }
  .whr-view--b #crew-call-times-container .ct-crew-row td:nth-child(7)::before { content: "Run"; }
  .whr-view--b #crew-call-times-container .ct-crew-row td.ct-type-cell:empty,
  .whr-view--b #crew-call-times-container .ct-crew-row td.ct-run-cell:empty,
  .whr-view--b #crew-call-times-container .ct-crew-row td.ct-note-cell:empty { display: none; }
  .whr-view--b #crew-call-times-container .ct-crew-row td .ct-time-display,
  .whr-view--b #crew-call-times-container .ct-crew-row td.ct-note-cell,
  .whr-view--b #crew-call-times-container .ct-crew-row td.ct-status-cell { text-align: right; }
  .whr-view--b #crew-call-times-container .ct-time-display { min-height: 44px; display: inline-flex; align-items: center; padding: 4px 8px; }
  .whr-view--b #crew-call-times-container .ct-status-cell,
  .whr-view--b #crew-call-times-container .ct-note-cell { min-height: 44px; }
  .whr-view--b #crew-call-times-container .ct-time-input { width: 72px; min-height: 44px; padding: 8px 6px; }
  .whr-view--b #crew-call-times-container .ct-text-input { min-height: 44px; padding: 8px; }
  .whr-view--b #crew-call-times-container .ct-status-select { min-height: 44px; padding: 8px; }
}
@media (max-width: 768px) {
  .whr-view--b #crew-call-times-container .ct-day-label { min-width: 0; flex: 1; }
  .whr-view--b #crew-call-times-container .ct-day-nav { width: 100%; }
}
@media (max-width: 768px) and (max-height: 500px) {
  .whr-view--b #crew-call-times-container .ct-toolbar,
  .whr-view--b #crew-call-times-container .ct-controls-bar { padding: 6px 12px; }
  .whr-view--b #crew-call-times-container .ct-date-strip { padding: 4px 8px; }
  .whr-view--b #crew-call-times-container .ct-day-cell { min-height: 44px; }
}


/* ================================================================ */
/* TASKS BOARD  (#tasks-board-container)                            */
/* Reference impl. Only: re-anchor FAB (no tab bar here), 44px      */
/* tabs + modal selects, static search toggle. (Corners left as-is.)*/
/* ================================================================ */
@media (max-width: 1198px) {
  .whr-view--b #tasks-board-container { padding-bottom: 16px; }
  .whr-view--b #tasks-board-container ~ .kb-mobile-fab,
  .whr-view--b .kb-mobile-fab { bottom: 24px; }
  .whr-view--b #tasks-board-container .kb-status-tab { min-height: 44px; padding: 12px 16px 10px; display: flex; align-items: center; }
  .whr-view--b #tasks-board-container .kb-search-toggle { position: static; margin: 8px 16px 0 auto; min-width: 44px; min-height: 44px; }
}
@media (max-width: 1198px) {
  .whr-view--b .kb-modal .kb-detail-status-select,
  .whr-view--b .kb-modal .kb-detail-lane-select { min-height: 44px; padding: 10px 28px 10px 12px; background-position: right 10px center; }
  .whr-view--b .kb-modal .kb-note-post { min-height: 44px; }
  .whr-view--b .kb-modal .kb-search-input,
  .whr-view--b #tasks-board-container .kb-search-input { min-height: 44px; }
}
@media (max-width: 768px) {
  .whr-view--b #tasks-board-container .kb-mobile-card { min-height: 44px; }
  .whr-view--b #tasks-board-container .kb-search-toggle { align-self: flex-end; }
}
@media (max-width: 768px) and (max-height: 500px) {
  .whr-view--b .kb-mobile-fab { bottom: 16px; }
  .whr-view--b #tasks-board-container .kb-status-tab { min-height: 44px; padding: 8px 14px; }
  .whr-view--b #tasks-board-container .kb-mobile-list { min-height: 40vh; }
}


/* ================================================================ */
/* PRODUCTION PROJECTS DASHBOARD  (#admin-production-dashboard)     */
/* Bigger card gear/minus + gap, 44px filter selects, wrap pipeline */
/* + off-ramps, taller settings panel.                             */
/* ================================================================ */
@media (max-width: 1199px) {
  .whr-view--b #admin-production-dashboard .filter-controls { flex-wrap: wrap; gap: 12px; }
  .whr-view--b #admin-production-dashboard .filter-select { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 768px) {
  .whr-view--b #admin-production-dashboard .card-gear-btn,
  .whr-view--b #admin-production-dashboard .card-minus-btn { width: 40px; height: 40px; }
  .whr-view--b #admin-production-dashboard .card-action-buttons { gap: 10px; right: 12px; bottom: 16px; }
  .whr-view--b #admin-production-dashboard .card-action-icon { width: 40px; height: 40px; }
  .whr-view--b #admin-production-dashboard .card-settings-panel.open { max-height: 720px; }
  .whr-view--b #admin-production-dashboard .settings-pipeline { gap: 4px 0; }
  .whr-view--b #admin-production-dashboard .pipeline-connector { width: 12px; }
  .whr-view--b #admin-production-dashboard .settings-offramps { flex-wrap: wrap; gap: 8px; }
  .whr-view--b #admin-production-dashboard .offramp-btn { min-height: 44px; display: inline-flex; align-items: center; }
  .whr-view--b #admin-production-dashboard .settings-rename-input,
  .whr-view--b #admin-production-dashboard .settings-doc-name-input,
  .whr-view--b #admin-production-dashboard .settings-delete-input { min-height: 44px; }
  .whr-view--b #admin-production-dashboard .settings-btn { min-height: 44px; }
  .whr-view--b #admin-production-dashboard .settings-delete-input-row { flex-wrap: wrap; }
  .whr-view--b #admin-production-dashboard .settings-delete-input-row .settings-btn { flex: 1 1 auto; }
}
@media (max-width: 768px) and (max-height: 500px) {
  .whr-view--b #admin-production-dashboard .card-settings-panel.open { max-height: 80vh; max-height: 80dvh; overflow-y: auto; }
  .whr-view--b #admin-production-dashboard .settings-panel-inner { gap: 14px; }
}


/* ================================================================ */
/* ACCOUNTING PROJECT DASHBOARD  (#admin-accounting-container)      */
/* Multi-column card grid on tablet portrait instead of oversized   */
/* 1fr; single column only on the narrowest phones.                 */
/* ================================================================ */
@media (max-width: 768px) {
  .whr-view--b #admin-accounting-container .tools-grid,
  .whr-view--b #admin-accounting-container .modules-grid,
  .whr-view--b #admin-accounting-container .projects-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width: 480px) {
  .whr-view--b #admin-accounting-container .tools-grid,
  .whr-view--b #admin-accounting-container .modules-grid,
  .whr-view--b #admin-accounting-container .projects-grid { grid-template-columns: 1fr; }
}


/* ================================================================ */
/* PROJECTS HUB  (#production-projects-hub-container)               */
/* Wrap the Document Links row + 44px toggle, responsive latent     */
/* contact grid, single-column module cards.                        */
/* ================================================================ */
@media (max-width: 900px) {
  .whr-view--b #production-projects-hub-container .hub-contact-row { grid-template-columns: 1fr 1fr; gap: 8px 16px; }
}
@media (max-width: 600px) {
  .whr-view--b #production-projects-hub-container .hub-contact-row { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 1199px) {
  .whr-view--b #production-projects-hub-container .hub-settings-row { flex-wrap: wrap; }
  .whr-view--b #production-projects-hub-container .hub-links-toggle-btn { min-height: 44px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
  .whr-view--b #production-projects-hub-container .hub-setting-hint { flex: 1 0 100%; }
}
@media (max-width: 768px) {
  .whr-view--b #production-projects-hub-container .projects-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) and (max-height: 500px) {
  .whr-view--b #production-projects-hub-container .hub-pipeline { padding-bottom: 6px; }
}


/* ================================================================ */
/* PROJECT SETUP  (#project-setup-container)                        */
/* Make the save bar a real fixed footer (no tab bar here), lift    */
/* autocomplete above it, single-col rows, 44px targets.            */
/* ================================================================ */
@media (max-width: 768px) {
  .whr-view--b #project-setup-container .project-setup-save-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
    background: #fff; box-shadow: 0 -2px 8px rgba(0,0,0,.15);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) 16px; margin: 0;
  }
  .whr-view--b #project-setup-container .project-setup-form-body { padding-bottom: 84px; }
  .whr-view--b #project-setup-container .save-status { min-width: 0; }
  .whr-view--b #project-setup-container .btn-save-version,
  .whr-view--b #project-setup-container .btn-generate { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .whr-view--b #project-setup-container .ps-contact-row,
  .whr-view--b #project-setup-container .ps-contact-row--triple { grid-template-columns: 1fr; }
  .whr-view--b #project-setup-container .ps-date { max-width: 100%; }
  .whr-view--b #project-setup-container .ps-input:not([disabled]),
  .whr-view--b #project-setup-container .ps-select:not([disabled]) { min-height: 44px; }
  .whr-view--b #project-setup-container .ps-num:not([disabled]) { min-height: 44px; }
  .whr-view--b #project-setup-container .ps-add-btn { min-height: 44px; display: inline-flex; align-items: center; }
  .whr-view--b #project-setup-container .ps-location-remove,
  .whr-view--b #project-setup-container .deposit-remove { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .whr-view--b #project-setup-container .ps-versions-header { min-height: 48px; }
  .whr-view--b #project-setup-container .autocomplete-dropdown,
  .whr-view--b #project-setup-container .ps-search-results { z-index: 1002; }
}
@media (max-width: 768px) and (max-height: 500px) {
  .whr-view--b #project-setup-container .autocomplete-dropdown,
  .whr-view--b #project-setup-container .ps-search-results { max-height: 40vh; max-height: 40dvh; }
  .whr-view--b #project-setup-container .project-setup-form-body { padding-bottom: 72px; }
}


/* ================================================================ */
/* USER MANAGEMENT  (#admin-user-management-container)              */
/* Keep the horizontal-scroll table (no freeze/card-ify); wrap the  */
/* action buttons, enlarge expand toggle, wrap header, 44px tabs.   */
/* ================================================================ */
@media (max-width: 1199px) {
  .whr-view--b #admin-user-management-container .users-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 768px) {
  .whr-view--b #admin-user-management-container .section-header { flex-wrap: wrap; gap: 10px; }
  .whr-view--b #admin-user-management-container .section-header-actions { flex-wrap: wrap; gap: 10px; }
  .whr-view--b #admin-user-management-container .filter-tab { min-height: 44px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
  .whr-view--b #admin-user-management-container .btn-add-user { min-height: 44px; }
  .whr-view--b #admin-user-management-container .col-actions { white-space: normal; display: flex; flex-wrap: wrap; gap: 6px; }
  .whr-view--b #admin-user-management-container .col-actions button { min-height: 40px; margin-right: 0; display: inline-flex; align-items: center; }
  .whr-view--b #admin-user-management-container .btn-expand-projects { width: 40px; height: 40px; line-height: 40px; }
  .whr-view--b #admin-user-management-container .col-expand { width: 40px; }
  .whr-view--b #admin-user-management-container .modal-content { max-width: 90vw; }
  .whr-view--b #admin-user-management-container .modal-body .form-group input,
  .whr-view--b #admin-user-management-container .modal-body .form-group select { min-height: 44px; }
  .whr-view--b #admin-user-management-container .btn-cancel,
  .whr-view--b #admin-user-management-container .modal-actions .btn-save { min-height: 44px; }
}


/* ================================================================ */
/* OVERTIME CALCULATOR  (#overtime-calculator-container)            */
/* Scroll-wrap the fixed-layout table (no card-ify), wrap controls, */
/* 44px inline editors, clamp popovers, clear the fixed totals bar. */
/* ================================================================ */
@media (max-width: 1199px) {
  .whr-view--b #overtime-calculator-container .ot-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .whr-view--b #overtime-calculator-container .ot-table { min-width: 760px; }
}
@media (max-width: 768px) {
  .whr-view--b #overtime-calculator-container .ot-controls-bar { flex-wrap: wrap; gap: 6px; }
  .whr-view--b #overtime-calculator-container .ot-search-input { max-width: 100%; flex: 1 1 100%; }
  .whr-view--b #overtime-calculator-container .ot-expand-btn { min-height: 44px; display: inline-flex; align-items: center; }
  .whr-view--b #overtime-calculator-container .ot-toolbar { flex-wrap: wrap; gap: 8px; }
  .whr-view--b #overtime-calculator-container .ot-nav-btn { width: 44px; height: 44px; }
  .whr-view--b #overtime-calculator-container .ot-time-input { min-height: 44px; width: 64px; }
  .whr-view--b #overtime-calculator-container .ot-time-display { min-height: 44px; display: inline-flex; align-items: center; }
  .whr-view--b #overtime-calculator-container .ot-deal-btn { min-height: 40px; padding: 2px 10px; }
  .whr-view--b #overtime-calculator-container .ot-group-header { min-height: 48px; }
  .whr-view--b #overtime-calculator-container .ot-deal-popover,
  .whr-view--b #overtime-calculator-container .ot-apply-wrap-modal,
  .whr-view--b #overtime-calculator-container .ot-unlock-modal { max-width: 90vw; }
  .whr-view--b #overtime-calculator-container .ot-deal-popover { width: 320px; }
  .whr-view--b #overtime-calculator-container .ot-deal-field input,
  .whr-view--b #overtime-calculator-container .ot-deal-field select,
  .whr-view--b #overtime-calculator-container .ot-apply-wrap-input,
  .whr-view--b #overtime-calculator-container .ot-unlock-input,
  .whr-view--b #overtime-calculator-container .ot-unlock-pw { min-height: 44px; }
  .whr-view--b #overtime-calculator-container .ot-deal-save,
  .whr-view--b #overtime-calculator-container .ot-unlock-confirm,
  .whr-view--b #overtime-calculator-container .ot-unlock-cancel { min-height: 44px; }
}
@media (max-width: 768px) and (max-height: 500px) {
  .whr-view--b #overtime-calculator-container .ot-deal-popover,
  .whr-view--b #overtime-calculator-container .ot-apply-wrap-modal { max-height: 85vh; max-height: 85dvh; overflow-y: auto; }
  .whr-view--b #overtime-calculator-container .ot-grid-wrap { padding-bottom: 64px; }
}


/* ================================================================ */
/* PHONE-NATIVE: RUNNING TOTALS (prototype, first purpose-built view)*/
/* Rendered by js/mobile-v2-running-totals.js into #rt-mobile from   */
/* the same data the desktop page computed. Shown only under         */
/* .whr-view--b at phone width (< 768px); the desktop layout +       */
/* details table are hidden there. The fee/grand-total calc card +   */
/* privacy toggle and the export panel remain (parity). Vitals value */
/* uses a modestly larger size (20px) as the single dominant number. */
/* ================================================================ */
#rt-mobile { display: none; }   /* hidden by default (A view / desktop / iPad tier) */

@media (max-width: 767px) {
  .whr-view--b #running-totals-container .running-totals-layout,
  .whr-view--b #running-totals-container #details-table-container { display: none; }
  .whr-view--b #running-totals-container #rt-mobile { display: block; }

  /* Vitals summary */
  .whr-view--b #rt-mobile .rt-m-vitals {
    background: #fff; border: 1px solid #f0f0f0;
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
    padding: 16px; margin-bottom: 12px;
  }
  .whr-view--b #rt-mobile .rt-m-vitals-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #999; }
  .whr-view--b #rt-mobile .rt-m-vitals-value { font-size: 20px; font-weight: 500; color: #333; margin-top: 2px; }
  .whr-view--b #rt-mobile .rt-m-vitals.rt-m-positive .rt-m-vitals-value { color: #5a6c50; }
  .whr-view--b #rt-mobile .rt-m-vitals.rt-m-negative .rt-m-vitals-value { color: #a63d2f; }
  .whr-view--b #rt-mobile .rt-m-vitals-sub { font-size: 12px; color: #999; margin-top: 4px; }
  .whr-view--b #rt-mobile .rt-m-overflag {
    display: inline-block; margin-top: 10px; padding: 4px 10px;
    font-size: 11px; color: #a63d2f; background: #f7ecea; border: 1px solid #e4c9c4;
  }

  /* Utilization bar (shared) */
  .whr-view--b #rt-mobile .rt-m-bar { height: 6px; background: #f0f0f0; margin: 8px 0; overflow: hidden; }
  .whr-view--b #rt-mobile .rt-m-bar-fill { height: 100%; }
  .whr-view--b #rt-mobile .rt-m-bar-fill.normal  { background: #7a8c6e; }
  .whr-view--b #rt-mobile .rt-m-bar-fill.warning { background: #c4956a; }
  .whr-view--b #rt-mobile .rt-m-bar-fill.over    { background: #a63d2f; }

  /* Category cards */
  .whr-view--b #rt-mobile .rt-m-card {
    background: #fff; border: 1px solid #f0f0f0;
    box-shadow: 0 1px 2px rgba(0,0,0,.10); margin-bottom: 8px; padding: 12px;
  }
  .whr-view--b #rt-mobile .rt-m-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; background: none; border: none; padding: 0; cursor: pointer;
    min-height: 32px; text-align: left; font-family: inherit;
  }
  .whr-view--b #rt-mobile .rt-m-card-letter {
    flex: 0 0 auto;
    min-width: 20px; height: 20px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 500; color: #666;
    background: #f5f5f5; border: 1px solid #f0f0f0;
  }
  .whr-view--b #rt-mobile .rt-m-card-name { font-size: 14px; color: #333; }
  .whr-view--b #rt-mobile .rt-m-card-pct { font-size: 13px; font-weight: 500; flex: 0 0 auto; }
  .whr-view--b #rt-mobile .rt-m-card-pct.normal  { color: #5a6c50; }
  .whr-view--b #rt-mobile .rt-m-card-pct.warning { color: #a67d52; }
  .whr-view--b #rt-mobile .rt-m-card-pct.over    { color: #a63d2f; }
  .whr-view--b #rt-mobile .rt-m-card-head::after {
    content: "\25B8"; color: #bbb; font-size: 11px; margin-left: 4px; transition: transform .15s ease;
  }
  .whr-view--b #rt-mobile .rt-m-card.open .rt-m-card-head::after { transform: rotate(90deg); }
  .whr-view--b #rt-mobile .rt-m-card-nums { margin-top: 6px; }
  .whr-view--b #rt-mobile .rt-m-card-remrow {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  }
  .whr-view--b #rt-mobile .rt-m-card-remlabel {
    font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #999;
  }
  .whr-view--b #rt-mobile .rt-m-card-estact { font-size: 12px; color: #999; margin-top: 3px; }
  .whr-view--b #rt-mobile .rt-m-card-rem { font-size: 15px; font-weight: 500; }
  .whr-view--b #rt-mobile .rt-m-card-rem.positive { color: #5a6c50; }
  .whr-view--b #rt-mobile .rt-m-card-rem.negative { color: #a63d2f; }
  .whr-view--b #rt-mobile .rt-m-card-rem.neutral  { color: #333; }

  /* Drill-in: line items */
  .whr-view--b #rt-mobile .rt-m-items { margin-top: 10px; border-top: 1px solid #f0f0f0; padding-top: 6px; }
  .whr-view--b #rt-mobile .rt-m-noitems { font-size: 12px; color: #999; padding: 8px 0; }
  .whr-view--b #rt-mobile .rt-m-item { padding: 8px 0; border-bottom: 1px solid #f5f5f5; }
  .whr-view--b #rt-mobile .rt-m-item:last-child { border-bottom: none; }
  .whr-view--b #rt-mobile .rt-m-item-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; background: none; border: none; padding: 0; text-align: left;
    font-family: inherit; min-height: 32px; cursor: pointer; color: #333;
  }
  .whr-view--b #rt-mobile .rt-m-item-head[disabled] { cursor: default; }
  .whr-view--b #rt-mobile .rt-m-item-desc { font-size: 13px; color: #333; }
  .whr-view--b #rt-mobile .rt-m-item-count { color: #999; }
  .whr-view--b #rt-mobile .rt-m-item-rem { font-size: 13px; flex: 0 0 auto; }
  .whr-view--b #rt-mobile .rt-m-item-rem.positive { color: #5a6c50; }
  .whr-view--b #rt-mobile .rt-m-item-rem.negative { color: #a63d2f; }
  .whr-view--b #rt-mobile .rt-m-item-rem.neutral  { color: #666; }
  .whr-view--b #rt-mobile .rt-m-item-sub { font-size: 11px; color: #999; margin-top: 2px; }

  /* Drill-in: allocations (receipt links preserved) */
  .whr-view--b #rt-mobile .rt-m-allocs { margin-top: 6px; }
  .whr-view--b #rt-mobile .rt-m-alloc {
    display: flex; align-items: center; gap: 8px; justify-content: space-between;
    padding: 10px 8px; min-height: 44px; text-decoration: none;
    background: #fafafa; border: 1px solid #f0f0f0; margin-bottom: 4px;
  }
  .whr-view--b #rt-mobile .rt-m-alloc-date { font-size: 11px; color: #999; flex: 0 0 auto; }
  .whr-view--b #rt-mobile .rt-m-alloc-vendor {
    font-size: 12px; color: #333; flex: 1 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .whr-view--b #rt-mobile .rt-m-alloc-amt { font-size: 12px; color: #333; flex: 0 0 auto; }

  .whr-view--b #rt-mobile .rt-m-empty { padding: 30px 20px; text-align: center; color: #999; }
}

/* Large-amount / long-name safety: decision numbers (Remaining, receipt
   amounts) never shrink or wrap; supporting text (category name, est/act)
   ellipsis-truncates rather than pushing the amount off the card. */
@media (max-width: 767px) {
  .whr-view--b #rt-mobile .rt-m-vitals-value { white-space: nowrap; }
  .whr-view--b #rt-mobile .rt-m-card-name {
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .whr-view--b #rt-mobile .rt-m-card-pct { flex: 0 0 auto; }
  .whr-view--b #rt-mobile .rt-m-card-estact { white-space: normal; }
  .whr-view--b #rt-mobile .rt-m-card-rem { flex: 0 0 auto; white-space: nowrap; }
  .whr-view--b #rt-mobile .rt-m-item-desc {
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .whr-view--b #rt-mobile .rt-m-item-rem { flex: 0 0 auto; white-space: nowrap; }
  .whr-view--b #rt-mobile .rt-m-alloc-amt { white-space: nowrap; }
}

/* Unallocated card (phone Running Totals) — styled like the other cards;
   only the ⚠ marker is distinct, rendered in black. */
@media (max-width: 767px) {
  .whr-view--b #rt-mobile .rt-m-card-letter--warn {
    color: #333;
  }
  .whr-view--b #rt-mobile .rt-m-card-amt {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
  }
  .whr-view--b #rt-mobile .rt-m-card-sub {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
  }
}


/* ================================================================ */
/* PHONE-NATIVE: BUDGET (read-only summary)                         */
/* Rendered by js/mobile-v2-budget.js into #budget-mobile from      */
/* window._lineItemsManager. Shown only under .whr-view--b at phone */
/* width (<768px); the editable budget sections are hidden there,   */
/* editing unlocks on iPad/desktop (handoff banner). Reuses the     */
/* Running Totals card grammar; neutral (no health) at budget stage.*/
/* ================================================================ */
#budget-mobile { display: none; }   /* hidden by default (A / desktop / iPad tier) */

@media (max-width: 767px) {
  .whr-view--b #budget-setup-container .budget-section { display: none; }
  .whr-view--b #budget-setup-container #budget-mobile { display: block; }

  /* Handoff banner (edit unlocks on a larger screen) */
  .whr-view--b #budget-mobile .bm-banner {
    display: flex; align-items: center; gap: 8px;
    background: #f5f5f5; border: 1px solid #f0f0f0;
    padding: 10px 12px; margin-bottom: 12px; color: #666;
  }
  .whr-view--b #budget-mobile .bm-banner-icon { color: #333; flex: 0 0 auto; }
  .whr-view--b #budget-mobile .bm-banner-text { font-size: 12px; }

  /* Vitals */
  .whr-view--b #budget-mobile .bm-vitals {
    background: #fff; border: 1px solid #f0f0f0;
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
    padding: 16px; margin-bottom: 12px;
  }
  .whr-view--b #budget-mobile .bm-vitals-job { font-size: 15px; font-weight: 500; color: #333; }
  .whr-view--b #budget-mobile .bm-vitals-dates { font-size: 12px; color: #999; margin-top: 2px; }
  /* single blank line between the job title/dates and the budget figures */
  .whr-view--b #budget-mobile .bm-vitals-job + .bm-vitals-label,
  .whr-view--b #budget-mobile .bm-vitals-dates + .bm-vitals-label { margin-top: 16px; }
  .whr-view--b #budget-mobile .bm-vitals-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #999; }
  .whr-view--b #budget-mobile .bm-vitals-value { font-size: 20px; font-weight: 500; color: #333; margin-top: 2px; white-space: nowrap; }
  .whr-view--b #budget-mobile .bm-vitals-sub { font-size: 12px; color: #999; margin-top: 4px; }

  /* Category cards */
  .whr-view--b #budget-mobile .bm-card {
    background: #fff; border: 1px solid #f0f0f0;
    box-shadow: 0 1px 2px rgba(0,0,0,.10); margin-bottom: 8px; padding: 12px;
  }
  .whr-view--b #budget-mobile .bm-card-head {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: none; padding: 0; cursor: pointer;
    min-height: 32px; text-align: left; font-family: inherit;
  }
  .whr-view--b #budget-mobile .bm-card-letter {
    flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 500; color: #666;
    background: #f5f5f5; border: 1px solid #f0f0f0;
  }
  .whr-view--b #budget-mobile .bm-card-name {
    font-size: 14px; color: #333; flex: 1 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .whr-view--b #budget-mobile .bm-card-amt { flex: 0 0 auto; font-size: 15px; font-weight: 500; color: #333; white-space: nowrap; }
  .whr-view--b #budget-mobile .bm-card-head::after {
    content: "\25B8"; color: #bbb; font-size: 11px; margin-left: 4px; transition: transform .15s ease;
  }
  .whr-view--b #budget-mobile .bm-card.open .bm-card-head::after { transform: rotate(90deg); }

  /* Neutral share bar */
  .whr-view--b #budget-mobile .bm-bar { height: 6px; background: #f0f0f0; margin: 8px 0 0; overflow: hidden; }
  .whr-view--b #budget-mobile .bm-bar-fill { height: 100%; background: #999; }

  /* Drill-in line items */
  .whr-view--b #budget-mobile .bm-items { margin-top: 10px; border-top: 1px solid #f0f0f0; padding-top: 6px; }
  .whr-view--b #budget-mobile .bm-noitems { font-size: 12px; color: #999; padding: 8px 0; }
  .whr-view--b #budget-mobile .bm-item { padding: 8px 0; border-bottom: 1px solid #f5f5f5; }
  .whr-view--b #budget-mobile .bm-item:last-child { border-bottom: none; }
  .whr-view--b #budget-mobile .bm-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .whr-view--b #budget-mobile .bm-item-desc { font-size: 13px; color: #333; min-width: 0; }
  .whr-view--b #budget-mobile .bm-item-amt { font-size: 13px; color: #333; flex: 0 0 auto; white-space: nowrap; }
  .whr-view--b #budget-mobile .bm-item-detail { font-size: 11px; color: #999; margin-top: 2px; }

  /* Fee / grand-total card */
  .whr-view--b #budget-mobile .bm-fee {
    background: #fff; border: 1px solid #f0f0f0;
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
    padding: 14px; margin-top: 12px;
  }
  .whr-view--b #budget-mobile .bm-fee-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    font-size: 13px; color: #666; padding: 6px 0; border-bottom: 1px solid #f5f5f5;
  }
  .whr-view--b #budget-mobile .bm-fee-row span:last-child { color: #333; white-space: nowrap; }
  .whr-view--b #budget-mobile .bm-fee-grand {
    border-bottom: none; border-top: 1px solid #f0f0f0; margin-top: 2px; padding-top: 10px;
  }
  .whr-view--b #budget-mobile .bm-fee-grand span { font-size: 15px; font-weight: 500; color: #333; }

  .whr-view--b #budget-mobile .bm-empty { padding: 30px 20px; text-align: center; color: #999; }
}

/* Budget phone view — read-only project info line + payment card title. */
@media (max-width: 767px) {
  /* (job title + dates now live inside the .bm-vitals card — see above) */
  .whr-view--b #budget-mobile .bm-card-title { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #999; margin-bottom: 6px; }
  .whr-view--b #budget-mobile .bm-pay-next { font-size: 12px; color: #666; margin-top: 8px; }
}

/* Budget phone view — auto-fade banner + focus view (select items → subtotal). */
@media (max-width: 767px) {
  /* Handoff banner auto-fade + collapse */
  .whr-view--b #budget-mobile .bm-banner {
    transition: opacity 1s ease, max-height 1s ease, margin 1s ease, padding 1s ease, border-width 1s ease;
    max-height: 100px; overflow: hidden;
  }
  .whr-view--b #budget-mobile .bm-banner--faded {
    opacity: 0; max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; border-width: 0;
  }

  /* Selectable line items */
  .whr-view--b #budget-mobile .bm-item { cursor: pointer; }
  .whr-view--b #budget-mobile .bm-item-check { flex: 0 0 auto; color: #bbb; }
  .whr-view--b #budget-mobile .bm-item-desc { flex: 1 1 auto; }
  .whr-view--b #budget-mobile .bm-item--sel { background: #f5f5f5; }
  .whr-view--b #budget-mobile .bm-item--sel .bm-item-check,
  .whr-view--b #budget-mobile .bm-item--sel .bm-item-desc { color: #333; }

  /* Sticky action bar (sits above the mobile tab bar) */
  .whr-view--b #budget-mobile.bm-has-actionbar { padding-bottom: 140px; }
  .whr-view--b #budget-mobile .bm-actionbar {
    position: fixed; left: 0; right: 0; bottom: 76px; z-index: 900;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; background: #fff;
    border-top: 1px solid #e0e0e0; box-shadow: 0 -1px 3px rgba(0,0,0,.1);
  }
  .whr-view--b #budget-mobile .bm-ab-info { flex: 1 1 auto; font-size: 13px; color: #333; }
  .whr-view--b #budget-mobile .bm-ab-focus,
  .whr-view--b #budget-mobile .bm-ab-clear {
    flex: 0 0 auto; min-height: 40px; padding: 0 14px; font-family: inherit; cursor: pointer;
  }
  .whr-view--b #budget-mobile .bm-ab-focus { background: #333; color: #fff; border: none; }
  .whr-view--b #budget-mobile .bm-ab-clear { background: none; border: 1px solid #e0e0e0; color: #666; }

  /* Focus panel */
  .whr-view--b #budget-mobile .bm-focus-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .whr-view--b #budget-mobile .bm-focus-exit { background: none; border: none; color: #666; font-size: 14px; min-height: 44px; padding: 0; cursor: pointer; font-family: inherit; }
  .whr-view--b #budget-mobile .bm-focus-title { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #999; }
  .whr-view--b #budget-mobile .bm-fitem { background: #fff; border: 1px solid #f0f0f0; box-shadow: 0 1px 2px rgba(0,0,0,.10); margin-bottom: 8px; padding: 12px; cursor: pointer; }
  .whr-view--b #budget-mobile .bm-fitem-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .whr-view--b #budget-mobile .bm-fitem-desc { font-size: 14px; color: #333; min-width: 0; }
  .whr-view--b #budget-mobile .bm-fitem-amt { font-size: 15px; font-weight: 500; color: #333; flex: 0 0 auto; white-space: nowrap; }
  .whr-view--b #budget-mobile .bm-fitem-sub { font-size: 11px; color: #999; margin-top: 2px; }
  .whr-view--b #budget-mobile .bm-focus-actions { margin-top: 12px; }
  .whr-view--b #budget-mobile .bm-focus-clear { min-height: 40px; padding: 0 14px; background: none; border: 1px solid #e0e0e0; color: #666; font-family: inherit; cursor: pointer; }
}


/* ================================================================ */
/* PHONE-NATIVE: CREW CALL TIMES (read-only glance)                 */
/* Rendered by js/mobile-v2-call-times.js into #ct-mobile from its   */
/* OWN fetches (this page exposes no window manager). Shown only     */
/* under .whr-view--b at phone width (<768px); every desktop layer   */
/* is hidden there and editing unlocks on iPad/desktop (banner).     */
/* Reuses the Budget/Running-Totals card grammar. Times run larger   */
/* and in #333 for on-set glare; call time carries the source color. */
/* NOTE: the CREW CALL TIMES block higher up card-ifies .ct-table up */
/* to 900px — that stays the ≥768px (iPad/landscape) treatment and   */
/* is inert below 768px where .ct-grid-wrap is hidden outright.      */
/* ================================================================ */
#ct-mobile { display: none; }   /* hidden by default (A / desktop / iPad tier) */

@media (max-width: 767px) {
  /* Hide the desktop layers; keep the breadcrumb header card. */
  .whr-view--b #crew-call-times-container .ct-toolbar,
  .whr-view--b #crew-call-times-container .ct-date-strip-wrap,
  .whr-view--b #crew-call-times-container .ct-controls-bar,
  .whr-view--b #crew-call-times-container .ct-grid-wrap { display: none; }
  .whr-view--b #crew-call-times-container #ct-mobile { display: block; }

  /* [hidden] must beat the explicit display values set below. */
  .whr-view--b #ct-mobile [hidden] { display: none !important; }

  /* Handoff banner (edit unlocks on a larger screen) */
  .whr-view--b #ct-mobile .ctm-banner {
    display: flex; align-items: center; gap: 8px;
    background: #f5f5f5; border: 1px solid #f0f0f0;
    padding: 10px 12px; margin-bottom: 12px; color: #666;
    transition: opacity 1s ease, max-height 1s ease, margin 1s ease, padding 1s ease, border-width 1s ease;
    max-height: 100px; overflow: hidden;
  }
  .whr-view--b #ct-mobile .ctm-banner-icon { color: #333; flex: 0 0 auto; }
  .whr-view--b #ct-mobile .ctm-banner-text { font-size: 12px; }
  .whr-view--b #ct-mobile .ctm-banner--faded {
    opacity: 0; max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; border-width: 0;
  }

  /* Day navigation: prev/next + scrollable chip strip */
  .whr-view--b #ct-mobile .ctm-nav {
    display: flex; align-items: stretch; gap: 4px; margin-bottom: 10px;
  }
  .whr-view--b #ct-mobile .ctm-nav-btn {
    flex: 0 0 auto; width: 36px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #e0e0e0; color: #666;
    font-family: inherit; font-size: 18px; line-height: 1; cursor: pointer;
  }
  .whr-view--b #ct-mobile .ctm-strip {
    flex: 1 1 auto; min-width: 0;
    display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .whr-view--b #ct-mobile .ctm-strip::-webkit-scrollbar { display: none; }
  .whr-view--b #ct-mobile .ctm-chip {
    flex: 0 0 auto; min-width: 48px; min-height: 44px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    padding: 5px 6px; background: #fff; border: 1px solid #e0e0e0;
    font-family: inherit; cursor: pointer;
  }
  .whr-view--b #ct-mobile .ctm-chip--off { background: #fafafa; }
  .whr-view--b #ct-mobile .ctm-chip--on { background: #333; border-color: #333; }
  .whr-view--b #ct-mobile .ctm-chip-day { font-size: 10px; font-weight: 500; color: #666; }
  .whr-view--b #ct-mobile .ctm-chip-date { font-size: 12px; color: #333; }
  .whr-view--b #ct-mobile .ctm-chip-dow { font-size: 9px; letter-spacing: .5px; color: #999; }
  .whr-view--b #ct-mobile .ctm-chip--on .ctm-chip-day,
  .whr-view--b #ct-mobile .ctm-chip--on .ctm-chip-date,
  .whr-view--b #ct-mobile .ctm-chip--on .ctm-chip-dow { color: #fff; }
  .whr-view--b #ct-mobile .ctm-chip-dot {
    width: 6px; height: 6px; margin-top: 1px;
    background: transparent; border: 1px solid transparent;
  }

  /* Day header + type pill */
  .whr-view--b #ct-mobile .ctm-dayhead {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px;
  }
  .whr-view--b #ct-mobile .ctm-dayhead-title { font-size: 13px; font-weight: 500; color: #333; }
  .whr-view--b #ct-mobile .ctm-dayhead-desc { font-size: 12px; color: #999; margin-bottom: 4px; }
  .whr-view--b #ct-mobile .ctm-pill {
    display: inline-block; padding: 2px 8px;
    font-size: 10px; font-weight: 500; letter-spacing: .5px;
  }

  /* Vitals: the day's call/wrap window — the two dominant numbers */
  .whr-view--b #ct-mobile .ctm-vitals {
    background: #fff; border: 1px solid #f0f0f0;
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
    padding: 16px; margin: 10px 0 12px;
  }
  .whr-view--b #ct-mobile .ctm-vitals-pair { display: flex; gap: 24px; }
  .whr-view--b #ct-mobile .ctm-vitals-cell { flex: 1 1 0; min-width: 0; }
  .whr-view--b #ct-mobile .ctm-vitals-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #999;
  }
  .whr-view--b #ct-mobile .ctm-vitals-value {
    font-size: 24px; font-weight: 500; color: #333; margin-top: 2px; white-space: nowrap;
  }
  .whr-view--b #ct-mobile .ctm-vitals-sub { font-size: 12px; color: #999; margin-top: 8px; }

  /* Controls: search + expand/collapse all */
  .whr-view--b #ct-mobile .ctm-controls { margin-bottom: 10px; }
  .whr-view--b #ct-mobile .ctm-search {
    width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 10px;
    background: #fff; border: 1px solid #e0e0e0; color: #333;
    font-family: inherit; font-size: 14px;
  }
  .whr-view--b #ct-mobile .ctm-control-btns { display: flex; gap: 8px; margin-top: 8px; }
  .whr-view--b #ct-mobile .ctm-btn {
    flex: 1 1 auto; min-height: 40px; padding: 0 12px;
    background: none; border: 1px solid #e0e0e0; color: #666;
    font-family: inherit; font-size: 12px; cursor: pointer;
  }

  /* Department group cards */
  .whr-view--b #ct-mobile .ctm-group {
    display: block; background: #fff; border: 1px solid #f0f0f0;
    box-shadow: 0 1px 2px rgba(0,0,0,.10); margin-bottom: 8px; padding: 12px;
  }
  .whr-view--b #ct-mobile .ctm-group-head {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: none; padding: 0; cursor: pointer;
    min-height: 32px; text-align: left; font-family: inherit;
  }
  .whr-view--b #ct-mobile .ctm-group-name {
    flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 500; color: #333;
    letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .whr-view--b #ct-mobile .ctm-group-default { flex: 0 0 auto; font-size: 12px; color: #6b8fa3; }
  .whr-view--b #ct-mobile .ctm-group-count {
    flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 500; color: #666;
    background: #f5f5f5; border: 1px solid #f0f0f0;
  }
  .whr-view--b #ct-mobile .ctm-group-head::after {
    content: "\25B8"; color: #bbb; font-size: 11px; margin-left: 4px; transition: transform .15s ease;
  }
  .whr-view--b #ct-mobile .ctm-group:not(.collapsed) .ctm-group-head::after { transform: rotate(90deg); }
  .whr-view--b #ct-mobile .ctm-group-body {
    display: block; margin-top: 10px; border-top: 1px solid #f0f0f0; padding-top: 4px;
  }
  .whr-view--b #ct-mobile .ctm-group.collapsed .ctm-group-body { display: none; }
  /* A search match force-opens its group without touching stored state. */
  .whr-view--b #ct-mobile .ctm-group.ctm-group--searchopen .ctm-group-body { display: block; }

  /* Per-person row (read-only, stacked) */
  .whr-view--b #ct-mobile .ctm-person {
    display: block; padding: 10px 0; border-bottom: 1px solid #f5f5f5;
  }
  .whr-view--b #ct-mobile .ctm-person:last-child { border-bottom: none; }
  .whr-view--b #ct-mobile .ctm-person-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  }
  .whr-view--b #ct-mobile .ctm-person-id { flex: 1 1 auto; min-width: 0; }
  .whr-view--b #ct-mobile .ctm-person-name {
    font-size: 14px; color: #333;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .whr-view--b #ct-mobile .ctm-person-role { font-size: 11px; color: #999; margin-top: 2px; }
  .whr-view--b #ct-mobile .ctm-person-times { flex: 0 0 auto; display: flex; gap: 14px; }
  .whr-view--b #ct-mobile .ctm-time { text-align: right; }
  .whr-view--b #ct-mobile .ctm-time-label {
    display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: #999;
  }
  .whr-view--b #ct-mobile .ctm-time-value {
    display: block; font-size: 17px; font-weight: 500; color: #333; white-space: nowrap;
  }

  /* Type / Status / Run / Note */
  .whr-view--b #ct-mobile .ctm-person-meta {
    display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px;
  }
  .whr-view--b #ct-mobile .ctm-meta-cell {
    display: flex; align-items: baseline; gap: 6px; min-width: 0;
  }
  .whr-view--b #ct-mobile .ctm-meta-cell--note { flex: 1 1 100%; }
  .whr-view--b #ct-mobile .ctm-meta-label {
    flex: 0 0 auto; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: #999;
  }
  .whr-view--b #ct-mobile .ctm-meta-value { font-size: 11px; color: #333; min-width: 0; }
  .whr-view--b #ct-mobile .ctm-meta-value--empty { color: #ccc; }
  .whr-view--b #ct-mobile .ctm-meta-cell--type .ctm-meta-value:not(.ctm-meta-value--empty) {
    padding: 2px 8px; font-weight: 500; letter-spacing: .5px;
  }
  .whr-view--b #ct-mobile .ctm-meta-cell--status .ctm-meta-value:not(.ctm-meta-value--empty) {
    color: #8a7ab8; font-weight: 500; letter-spacing: .5px;
  }
  .whr-view--b #ct-mobile .ctm-meta-cell--note .ctm-meta-value { color: #666; }

  /* Loading / empty / error / no-results states */
  .whr-view--b #ct-mobile .ctm-state { padding: 30px 20px; text-align: center; color: #999; }
  .whr-view--b #ct-mobile .ctm-state--error { color: #a63d2f; }
  .whr-view--b #ct-mobile .ctm-noresults { padding: 20px; text-align: center; color: #999; }
}

/* Landscape phones: trim the vertical chrome so the crew list stays visible. */
@media (max-width: 767px) and (max-height: 500px) {
  .whr-view--b #ct-mobile .ctm-vitals { padding: 10px 16px; margin: 8px 0 10px; }
  .whr-view--b #ct-mobile .ctm-vitals-value { font-size: 20px; }
  .whr-view--b #ct-mobile .ctm-vitals-sub { margin-top: 4px; }
  .whr-view--b #ct-mobile .ctm-banner { display: none; }
}