/**
 * pr_responsive_mobile.css
 * Global mobile responsive overrides — all main nav modules.
 * Single breakpoint: max-width 767px (mobile).
 * Does NOT touch any schedule-related class (p226-*, schedule-*, scheduling-*).
 * Does NOT override pr_ui_1b_sidebar.css mobile rail rules.
 *
 * Strategy: mobile gets a simplified, single-column stacked view.
 * - Stat/KPI bars → wrap into 2-column grid
 * - Tab ribbons → horizontally scrollable strip
 * - Detail grids / two-column layouts → single column
 * - Data tables → horizontally scrollable wrapper
 * - Page headers → stack title + actions vertically
 * - Max-width caps removed; full-bleed with safe padding
 * - Fixed pixel widths on sidebars/panels → 100%
 */

/* ─────────────────────────────────────────────────────────────────────────────
   GLOBAL CONTENT AREA
   Ensures #app content sits correctly next to the 56px icon rail on mobile.
   (The sidebar CSS handles margin-left:3.5rem on body.pui1b-mounted —
   this just makes sure module containers don't overflow.)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  #app {
    min-width: 0;
    overflow-x: hidden;
  }

  /* Remove all fixed max-width caps on module wrappers on mobile */
  .pr301-landing,
  .pr233-wrap, .tr233-wrap,
  .pr302-panel,
  .pr331-estimating,
  .pr357-dispatch-wrap,
  .mhub-wrap,
  .pr232-planhub-wrap,
  .vch-root,
  .pr374-sa-root {
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* General module content padding */
  [class*="-page-header"],
  [class*="-root"],
  [class*="-wrap"],
  [class*="-module"] {
    box-sizing: border-box;
    min-width: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PAGE HEADERS — stack title + subtitle + actions vertically
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Generic header-actions rows that sit next to titles */
  .pr302-content > *,
  .pr307-header,
  .pr314-page-header,
  .pr315-page-header,
  .pr316-header,
  .pr318-page-header,
  .pr319-page-header,
  .pr321-page-header,
  .pr322-page-header,
  .pr334-page-header,
  .pr300-page-header,
  .pr301-page-header,
  .pr308-page-header,
  .pr309-page-header,
  .pr311-header,
  .pr330-page-header,
  .pr331-page-header,
  .pr346-page-header,
  .tr346-page-header,
  .pr366-page-header,
  .pr371-panel-header,
  .tr233-header,
  .pr232b-header,
  .pr302-panel-header,
  .doc-hub-header,
  .vch-header,
  .rp-header,
  .tr241-module-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Header action button rows — wrap and allow stacking */
  .pr307-header-actions,
  .tr233-header-actions,
  .doc-hub-header-right,
  .pr232b-header-right,
  .pr302-header-actions {
    flex-wrap: wrap !important;
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  /* Header buttons — full width on mobile */
  .pr307-header-actions .pr307-btn,
  .tr233-header-actions button,
  .doc-hub-upload-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TAB RIBBONS — horizontal scroll strip, no wrapping
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr300-tab-ribbon,
  .pr302-tab-ribbon,
  .pr307-tab-ribbon,
  .pr308-tab-ribbon,
  .pr309-tab-ribbon,
  .pr311-view-tabs,
  .pr314-tab-ribbon,
  .pr315-tab-ribbon,
  .pr316-tab-ribbon,
  .pr318-tab-ribbon,
  .pr319-tab-ribbon,
  .pr321-tab-ribbon,
  .pr322-tab-ribbon,
  .pr330-tab-ribbon,
  .pr331-tab-ribbon,
  .pr334-tab-ribbon,
  .pr346-tab-ribbon,
  .tr346-tab-ribbon,
  .pr366-tab-ribbon,
  .tr233-tabs,
  .pr232b-tabs,
  .rp-tab-bar,
  .tr241-header-badges,
  .portal-top-ribbon {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 4px !important;
    padding-bottom: 4px !important;
    /* Hide scrollbar but keep functional */
    scrollbar-width: none !important;
  }

  .pr300-tab-ribbon::-webkit-scrollbar,
  .pr302-tab-ribbon::-webkit-scrollbar,
  .pr314-tab-ribbon::-webkit-scrollbar,
  .pr315-tab-ribbon::-webkit-scrollbar,
  .pr316-tab-ribbon::-webkit-scrollbar,
  .pr318-tab-ribbon::-webkit-scrollbar,
  .tr346-tab-ribbon::-webkit-scrollbar,
  .tr233-tabs::-webkit-scrollbar,
  .rp-tab-bar::-webkit-scrollbar,
  .portal-top-ribbon::-webkit-scrollbar {
    display: none !important;
  }

  /* Tab items — no shrink, keep min readable width */
  .pr300-tab,
  .pr302-tab,
  .pr314-tab,
  .pr315-tab,
  .pr316-tab-ribbon__label,
  .pr318-tab,
  .pr319-tab,
  .pr321-tab-ribbon-item,
  .pr322-tab-ribbon-item,
  .tr346-tab,
  .tr233-tab,
  .pr232b-tab,
  .rp-tab,
  .pr311-view-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   STAT PILLS / KPI BARS — 2-column grid
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr301-stats-row,
  .pr302-kpi-bar,
  .pr308-stat-pills,
  .pr314-stats-row,
  .pr315-stats-row,
  .pr316-stats-row,
  .pr318-stats-row,
  .pr319-stats-row,
  .pr321-stats-row,
  .pr330-kpi-bar,
  .pr366-kpi-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    overflow-x: unset !important;
  }

  /* Individual stat pills — remove fixed min-width */
  .pr302-kpi,
  .pr308-stat-pill,
  .pr314-stat-pill,
  .pr315-stat-pill,
  .pr316-stat-pill,
  .pr318-stat-pill,
  .pr319-stat-pill,
  .pr321-stat-pill,
  .pr330-kpi-tile,
  .pr366-kpi-tile {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TWO-COLUMN LAYOUTS — stack to single column
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Owner Dashboard — left/right body columns */
  .pr366-body-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .pr366-left-col,
  .pr366-right-col {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Command Center — panel layout */
  .pr302-panel {
    flex-direction: column !important;
  }

  /* Estimating — portal-layout sidebar + main */
  .portal-layout {
    flex-direction: column !important;
  }
  .portal-layout .sidebar {
    width: 100% !important;
    min-width: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--bd-lt, #e2e8f0) !important;
  }
  .portal-layout .main-content {
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
  }

  /* Fleet management workarea */
  .fm-workarea-bar {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Vendor PO detail grid */
  .pr319-detail-grid,
  .pr314-detail-grid,
  .pr315-detail-grid,
  .pr230-detail-grid,
  .et-row-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Week cards (certified payroll) — 1 per row on mobile */
  .pr334-week-cards {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   DATA TABLES — horizontal scroll wrapper
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Any table inside a module that isn't already wrapped */
  .pr307-list-table,
  .pr309-list-table,
  .pr309-list-table-wrap,
  .pr371-table-wrap,
  .pr371-wh347-worker-table,
  .pr322-table,
  .pr321-table,
  .pr319-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  /* Generic catch-all: any module table not already set to block */
  [class*="pr3"][class*="-table"]:not([class*="schedule"]):not([class*="p226"]) {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  /* Prevent table cells from getting too narrow */
  [class*="pr3"][class*="-table"] th,
  [class*="pr3"][class*="-table"] td {
    white-space: nowrap !important;
    min-width: 80px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PROJECTS MODULE (pr300)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr300-landing {
    padding: 12px !important;
  }

  .pr300-page-header-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Project cards grid — 1 column */
  .pr300-project-grid,
  .pr300-cards-grid {
    grid-template-columns: 1fr !important;
  }

  /* Project hub inner split */
  .pr300-hub-body {
    flex-direction: column !important;
  }
  .pr300-hub-left,
  .pr300-hub-right {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADDRESS HUB (pr301)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr301-search-bar {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .pr301-search-input {
    width: 100% !important;
  }
  .pr301-add-btn {
    width: 100% !important;
  }
  .pr301-filter-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* Address cards — 1 column */
  .pr301-address-grid,
  .pr301-cards {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CUSTOMERS / VCH (customer_hub)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .vch-host {
    flex-direction: column !important;
  }
  .vch-list-pane {
    width: 100% !important;
    min-width: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--bd-lt, #e2e8f0) !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
  }
  .vch-detail-pane {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PLANHUB (pr232)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .phv9-mep-filter-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* Plan card grid — 1 column */
  .phv9-plan-grid,
  .pr232-plan-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SERVICE MODULE (pr230)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .p230-svc-badge-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .p230-detail-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPLIANCE (pr233)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .tr233-wrap {
    padding: 12px !important;
  }
  .tr233-card {
    padding: 12px !important;
  }
  /* Compliance section grids — single column */
  .tr233-grid,
  .tr233-two-col {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   DOCUMENTS HUB (pr351)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .doc-hub-header {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
  .doc-hub-header-right {
    width: 100% !important;
  }
  .doc-hub-upload-btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .doc-hub-body {
    flex-direction: column !important;
  }
  .doc-hub-sidebar {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Document list — full width cards */
  .doc-hub-file-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PAY APP (pr307)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr307-root {
    padding: 12px !important;
  }
  .pr307-sov-cta {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .pr307-btn {
    width: 100% !important;
    justify-content: center !important;
  }
  /* SOV table scrolls horizontally */
  .pr307-list-table {
    font-size: 12px !important;
  }
  .pr307-list-table th,
  .pr307-list-table td {
    padding: 6px 8px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   INVOICES (pr314)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr314-detail-grid {
    grid-template-columns: 1fr !important;
  }
  .pr314-lily-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CHANGE ORDERS (pr315)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr315-lily-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   BUDGET (pr316)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr316-root {
    padding: 12px !important;
  }
  .pr316-lily-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* Budget table rows */
  .pr316-cost-table {
    display: block !important;
    overflow-x: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   RFI HUB (pr232b / pr318)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr232b-header {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .pr232b-header-right {
    width: 100% !important;
  }
  .pr318-lily-bar {
    flex-wrap: wrap !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   VENDOR PO (pr319)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr319-lily-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   WIP REPORT (pr321)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr321-lily-subtitle {
    font-size: 12px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   T&M BILLING (pr322)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr322-header {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   QUICKBOOKS SYNC (pr330)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr330-body {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .pr330-left,
  .pr330-right {
    width: 100% !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ESTIMATING (pr331)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr331-estimating {
    padding: 12px !important;
  }
  .pr331-page-header {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CERTIFIED PAYROLL (pr334)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr334-demo-root {
    padding: 12px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   DISPATCH (pr357)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr357-dispatch-wrap {
    padding: 12px !important;
  }
  .pr357-dispatch-header {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
  .pr357-dispatch-summary {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .pr357-dispatch-summary-count {
    min-width: 0 !important;
  }
  /* Dispatch rows — stack truck + jobs vertically */
  .pr357-dispatch-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .pr357-truck-cell {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   OWNER DASHBOARD (pr366)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr366-dash-wrap {
    padding: 12px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PREVAILING WAGE (pr371)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr371-tracker-panel {
    padding: 12px !important;
  }
  .pr371-panel-header {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TIME & ATTENDANCE (pr241)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .tr241-module {
    padding: 12px !important;
  }
  .tr241-module-header {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
  .tr241-header-badges {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* Timesheet table */
  .tr241-timesheet-table {
    display: block !important;
    overflow-x: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMMUNICATIONS (pr311)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr311-root {
    flex-direction: column !important;
    height: auto !important;
  }
  /* Messaging pane split */
  .pr311-list-pane {
    width: 100% !important;
    min-width: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--bd-lt, #e2e8f0) !important;
    max-height: 40vh !important;
    overflow-y: auto !important;
  }
  .pr311-thread-pane {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMMAND CENTER (pr302)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr302-panel {
    padding: 12px !important;
  }
  .pr302-lock-btn {
    width: 100% !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TRAI HQ (pr346a)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .tr346-lily-hq-shell {
    padding: 12px !important;
  }
  /* Module card grid — 1 column on mobile */
  .tr346-module-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SUPER ADMIN (pr374)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr374-sa-root {
    padding: 12px !important;
  }
  .pr374-sa-header {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
  /* Tenant cards — 1 per row */
  .pr374-tenant-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MATERIALS HUB
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .mhub-wrap {
    padding: 12px !important;
  }
  .mhub-banner {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FLEET MANAGEMENT
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .fm-section-nav {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .fm-section-jump {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   REPORTING / ANALYTICS (pr235)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .rp-module {
    padding: 12px !important;
  }
  .rp-header {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
  /* Report chart containers — remove fixed height */
  .rp-chart-wrap {
    height: auto !important;
    min-height: 200px !important;
  }
  /* KPI grid → 2 column */
  .rp-kpi-row {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   LIEN WAIVER (pr313 / pr372)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr313-modal {
    width: 95vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   DAILY REPORTS (pr309)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pr309-list-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .pr309-list-table {
    min-width: 520px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   LILY INSIGHT BARS — wrap chips on mobile
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  [class*="-lily-bar"],
  [class*="-trai-bar"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  [class*="-lily-chip"],
  [class*="-trai-chip"] {
    font-size: 11px !important;
    padding: 3px 8px !important;
    white-space: nowrap !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MODALS & OVERLAYS — ensure they don't overflow the screen
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Any modal-like overlay */
  [class*="-modal"],
  [class*="-overlay"],
  [class*="-drawer"],
  [class*="-panel-popout"] {
    max-width: 100vw !important;
    max-height: 100vh !important;
    box-sizing: border-box !important;
  }

  /* Modal inner scroll */
  [class*="-modal-body"],
  [class*="-modal-content"] {
    max-height: 70vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Bottom-anchored modals — use full width */
  [class*="-modal"].bottom-sheet,
  [class*="-sheet"] {
    width: 100vw !important;
    border-radius: 16px 16px 0 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PAGE HEADER MODULE TITLE SIZING
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  [class*="-page-title"],
  [class*="-module-title"],
  [class*="-panel-title"] {
    font-size: clamp(16px, 4vw, 22px) !important;
    line-height: 1.2 !important;
  }

  [class*="-page-subtitle"],
  [class*="-lily-subtitle"],
  [class*="-panel-subtitle"] {
    font-size: 12px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SEARCH / FILTER BARS — full width on mobile
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  [class*="-search-bar"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  [class*="-search-input"],
  [class*="-search-field"] {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  [class*="-filter-row"],
  [class*="-filter-bar"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACTION BUTTON ROWS — stack or wrap on mobile
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  [class*="-action-row"],
  [class*="-btn-row"],
  [class*="-button-row"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Primary CTA buttons — full width */
  [class*="-primary-btn"],
  [class*="-cta-btn"] {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CARD GRIDS — responsive grid on mobile
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  [class*="-card-grid"],
  [class*="-cards-grid"],
  [class*="-grid-3"],
  [class*="-grid-4"] {
    grid-template-columns: 1fr !important;
  }

  [class*="-grid-2"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PREVENT HORIZONTAL OVERFLOW ON ALL MODULE ROOTS
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Scoped to known module prefixes — does NOT touch schedule classes */
  [class^="pr3"],
  [class^="tr2"],
  [class^="tr3"],
  [class^="vch-"],
  [class^="mhub-"],
  [class^="fm-"],
  [class^="doc-hub"],
  [class^="rp-"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CRITICAL FIX: position:fixed module root panels — offset by icon-rail on mobile
   These panels use position:fixed and start at left:16.5rem (desktop sidebar).
   On mobile they must start at left:3.5rem (icon-rail) or 0 (field_tech).
   This block overrides any module that uses the Fleet/Command Center fixed-panel
   pattern but didn't have its own mobile rule yet.
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Main content shell — covers most modules */
  body[data-tr-role]:not([data-tr-role="field_tech"]).pui1b-mounted #vsFullOverlay,
  body[data-tr-role]:not([data-tr-role="field_tech"]).pui1b-mounted #pr300-root,
  body[data-tr-role]:not([data-tr-role="field_tech"]).pui1b-mounted #pr301-root,
  body[data-tr-role]:not([data-tr-role="field_tech"]).pui1b-mounted #pr302-root,
  body[data-tr-role]:not([data-tr-role="field_tech"]).pui1b-mounted #tr346-lily-hq-root,
  body[data-tr-role]:not([data-tr-role="field_tech"]).pui1b-mounted #drcOverlay,
  body[data-tr-role]:not([data-tr-role="field_tech"]).pui1b-mounted #phccOverlay,
  body[data-tr-role]:not([data-tr-role="field_tech"]).pui1b-mounted #pr157PermitsPanel {
    left: 3.5rem !important;
  }

  /* field_tech has no rail — full width */
  body[data-tr-role="field_tech"].pui1b-mounted #vsFullOverlay,
  body[data-tr-role="field_tech"].pui1b-mounted #pr300-root,
  body[data-tr-role="field_tech"].pui1b-mounted #pr301-root,
  body[data-tr-role="field_tech"].pui1b-mounted #pr302-root,
  body[data-tr-role="field_tech"].pui1b-mounted #tr346-lily-hq-root,
  body[data-tr-role="field_tech"].pui1b-mounted #drcOverlay,
  body[data-tr-role="field_tech"].pui1b-mounted #phccOverlay,
  body[data-tr-role="field_tech"].pui1b-mounted #pr157PermitsPanel {
    left: 0 !important;
  }

  /* When no data-tr-role yet set (loading state) — default to rail offset */
  body:not([data-tr-role]).pui1b-mounted #vsFullOverlay {
    left: 3.5rem !important;
  }
}