/* ShiftFuel mobile polish pass 2: phone-first header, booking, returning, track, and shared layout fixes. */

@media (max-width: 760px) {
  body.admin-portal-page {
    --admin-sticky-header-height: 58px;
    --admin-header-clearance: 12px;
  }

  :root {
    --sf-mobile-gutter: 14px;
    --sf-page-pad: 18px;
  }

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    background:
      radial-gradient(circle at top left, rgb(var(--sf-accent-rgb, 167 191 166) / 0.2), transparent 22rem),
      var(--sf-off-white);
    -webkit-text-size-adjust: 100%;
  }

  .sf-container,
  .section,
  .trust-service-bar,
  .landing-section,
  .returning-shortcut,
  .availability-section,
  .landing-final-cta,
  .returning-flow-shell,
  .booking-flow-shell,
  .track-shell,
  .site-footer,
  .portal-closing-banner {
    width: calc(100% - var(--sf-mobile-gutter) * 2) !important;
    max-width: none !important;
  }

  .site-header,
  .landing-header {
    top: 8px;
    width: calc(100% - var(--sf-mobile-gutter) * 2) !important;
    margin-top: 8px;
    padding: 12px 12px;
    gap: 10px;
    border-radius: 14px;
  }

  .logo {
    min-width: 0;
    gap: 8px;
    font-size: 1rem;
    line-height: 1.15;
  }

  .logo span:last-child {
    display: block;
    max-width: 170px;
    white-space: normal;
  }

  .logo-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    font-size: 1.55rem;
  }

  .mobile-menu-button {
    display: inline-flex !important;
    flex: 0 0 auto;
    min-height: 46px;
    padding: 10px 14px;
    font-size: 0.95rem;
  }

  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--sf-teal), var(--sf-teal-dark));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    box-shadow: var(--sf-shadow-header);
  }

  .nav.is-open {
    display: flex;
  }

  .nav a,
  .nav .nav-cta,
  .nav .nav-returning,
  .nav .nav-outline {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    text-align: center;
  }

  .booking-flow-shell,
  .track-shell {
    margin-top: 12px;
  }

  .booking-flow-hero,
  .track-hero-redesign,
  .landing-hero,
  .returning-flow-hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    margin-top: 14px !important;
    border-radius: 18px !important;
  }

  .booking-flow-hero-copy,
  .landing-hero-copy,
  .returning-flow-hero-copy {
    padding: 26px 20px !important;
  }

  .landing-hero-copy {
    gap: 0;
    padding: 26px 20px 24px !important;
  }

  .landing-hero .hero-copy {
    margin-top: 16px !important;
    font-size: 1rem;
    line-height: 1.55;
  }

  .booking-flow-hero p:not(.eyebrow),
  .returning-flow-hero p:not(.eyebrow) {
    margin-top: 16px !important;
  }

  .booking-flow-hero-image,
  .landing-hero-image,
  .returning-flow-hero-image {
    min-height: 190px !important;
  }

  .landing-hero-image {
    min-height: 190px !important;
  }

  body.customer-account-page .customer-account-hero .booking-flow-hero-image,
  body.customer-account-page .customer-account-hero .landing-hero-image,
  body.customer-account-page .customer-account-hero img {
    display: none !important;
  }

  .booking-flow-hero-image img,
  .landing-hero-image img,
  .returning-flow-hero-image img {
    min-height: 190px !important;
    height: 190px !important;
    object-fit: cover;
  }

  .landing-hero-image img {
    min-height: 190px !important;
    height: 190px !important;
  }

  body.landing-page .landing-hero {
    margin-bottom: 12px !important;
  }

  h1 {
    font-size: clamp(2rem, 10vw, 2.65rem) !important;
    line-height: 1.05;
  }

  h2 {
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
  }

  .hero-trust-row {
    gap: 7px 10px;
  }

  .hero-trust-row span {
    width: 100%;
    font-size: 0.86rem;
    line-height: 1.25;
  }

  .landing-actions,
  .final-cta-portals {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100%;
  }

  .landing-actions {
    gap: 10px !important;
    margin-top: 18px !important;
  }

  body.customer-account-page .customer-account-hero .landing-actions {
    grid-auto-flow: row;
    gap: 10px !important;
    margin-top: 18px !important;
  }

  body.customer-account-page .customer-account-hero .landing-actions .button {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 800;
    justify-content: center;
    text-align: center;
  }

  /* Customer-account mobile page rules moved to customer.css 2026-07-08. */

  /* Desktop three-box variant hides on mobile; single Staff Access button shows */
  .final-cta-portals--desktop { display: none !important; }
  .final-cta-portals--mobile { display: grid !important; }

  .landing-actions .button,
  .pricing-button {
    width: 100%;
  }

  .landing-hero .hero-trust-row,
  .booking-flow-hero .hero-trust-row,
  .returning-flow-hero .hero-trust-row {
    margin-top: 18px !important;
  }

  .how-it-works-grid,
  .pricing-card-grid,
  .safety-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .safety-row > div {
    padding: 14px !important;
  }

  .landing-section,
  .section {
    padding: 32px 16px !important;
    border-radius: 18px;
  }

  body.landing-page .landing-section + .landing-section {
    margin-top: 14px !important;
  }

  body.landing-page .section-heading {
    margin-bottom: 16px !important;
  }

  body.landing-page .section-heading h2 {
    margin-bottom: 6px;
  }

  body.landing-page .section-heading p {
    margin-top: 6px;
    line-height: 1.45;
  }

  body.landing-page .how-it-works-grid {
    margin-top: 20px !important;
    gap: 10px !important;
  }

  body.landing-page .how-it-works-grid li {
    grid-template-columns: 32px 1fr;
    align-items: center;
    justify-items: start;
    gap: 3px 10px;
    min-height: 0;
    padding: 12px 0 !important;
    text-align: left;
    border-bottom: 1px solid rgb(var(--sf-primary-rgb) / 0.08);
  }

  body.landing-page .how-it-works-grid li:last-child {
    border-bottom: 0;
  }

  body.landing-page .step-number {
    grid-row: 1 / 3;
    width: 28px;
    height: 28px;
    margin: 0;
    align-self: center;
  }

  body.landing-page .step-icon {
    display: none !important;
  }

  body.landing-page .how-it-works-grid strong {
    grid-column: 2;
    font-size: 1rem !important;
    line-height: 1.15;
  }

  body.landing-page .how-it-works-grid p {
    grid-column: 2;
    max-width: none;
    font-size: 0.9rem !important;
    line-height: 1.35;
  }

  body.landing-page .pricing-card-grid {
    margin-top: 18px !important;
  }

  .pricing-card,
  .safety-row,
  .wash-summary-item {
    padding: 18px !important;
    border-radius: 16px !important;
  }

  body.landing-page .pricing-card {
    gap: 9px;
    padding: 16px !important;
  }

  body.landing-page .pricing-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 2px;
  }

  body.landing-page .pricing-icon svg {
    width: 20px;
    height: 20px;
  }

  body.landing-page .pricing-includes {
    gap: 4px;
  }

  body.landing-page .pricing-disclaimer {
    margin-top: 16px;
    line-height: 1.4;
  }

  body.landing-page .safety-row {
    margin-top: 18px !important;
    padding: 14px !important;
    gap: 10px !important;
  }

  body.landing-page .safety-row > div {
    grid-template-columns: 36px 1fr;
    gap: 3px 10px;
    padding: 0 0 10px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgb(var(--sf-primary-rgb) / 0.08);
  }

  body.landing-page .safety-row > div:last-child {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }

  body.landing-page .safety-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  body.landing-page .safety-icon svg {
    width: 17px;
    height: 17px;
  }

  body.landing-page .safety-row strong {
    align-self: center;
    font-size: 0.95rem !important;
    line-height: 1.15;
  }

  body.landing-page .safety-row p {
    grid-column: 2;
    font-size: 0.88rem !important;
    line-height: 1.35;
  }

  /* Readable body text on phones — keep descriptions at 15–16px minimum so the
     landing page stays legible (How it works, Services & Pricing, Trust, footer). */
  .how-it-works-grid p,
  .pricing-card p,
  .pricing-from,
  .pricing-from span,
  .pricing-includes li,
  .pricing-package-list span,
  .pricing-package-list strong,
  .wash-summary-item p,
  .wash-summary-header strong,
  .wash-summary-header span,
  .safety-row p,
  .safety-row strong {
    font-size: 0.95rem !important;
    line-height: 1.55;
  }

  .pricing-warning,
  .pricing-disclaimer {
    font-size: 0.9rem !important;
  }

  .footer-links a {
    font-size: 0.95rem;
  }

  /* The How it works paragraphs are width-capped at 230px on desktop; let them
     use the full card width on a phone so the larger text doesn't wrap awkwardly. */
  .how-it-works-grid p {
    max-width: none;
  }

  .booking-flow {
    gap: 12px;
  }

  .booking-accordion-card {
    border-radius: 18px !important;
    overflow: hidden;
  }

  .booking-step-header {
    gap: 12px !important;
    padding: 18px 16px !important;
  }

  .booking-step-icon {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px;
  }

  .booking-step-heading h3,
  .booking-step-heading strong {
    font-size: 1.05rem !important;
    line-height: 1.2;
  }

  .booking-step-heading p,
  .booking-step-intro {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.9rem !important;
  }

  .booking-step-panel,
  .booking-panel,
  .booking-step-content {
    padding: 0 16px 18px !important;
  }

  .booking-field-grid,
  .track-field-grid,
  .track-search-form,
  .returning-options-grid,
  .returning-saved-grid,
  .service-choice-grid,
  .service-detail-grid,
  .review-grid,
  .payment-grid,
  .vehicle-grid,
  .address-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .returning-option-card,
  .track-search-card,
  .payment-placeholder,
  .review-summary-list > div,
  .service-details-panel,
  .payment-box,
  fieldset {
    padding: 16px !important;
    border-radius: 14px !important;
  }

  .customer-book-service-picker {
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .track-search-card {
    margin-top: 14px !important;
  }

  .track-search-heading {
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .track-search-icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px;
  }

  input,
  select,
  textarea,
  .sfp-trigger {
    min-height: 50px;
    font-size: 16px;
    border-radius: 12px;
  }

  textarea {
    min-height: 110px;
  }

  .button,
  button.button,
  .status-btn {
    width: 100%;
    min-height: 50px;
    border-radius: 12px;
    font-size: 0.98rem;
  }

  .booking-actions,
  .form-actions,
  .returning-customer-actions,
  .track-search-actions,
  .request-actions,
  .status-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100%;
  }

  .returning-customer-actions .button,
  .returning-customer-actions button {
    width: 100%;
  }

  /* The payment card box now lives ONLY inside the authorization modal, so it
     must stay visible — Stripe's card field renders inside it. (This was
     display:none from an older inline-card layout, which hid the field on
     phones while iPad/desktop, above this breakpoint, still showed it.) */
  .booking-payment-dialog .payment-card-box {
    display: grid !important;
  }

  /* Keep the modal's Cancel / Authorize buttons a normal height — the global
     `.admin-button-row .button { flex: 1 1 180px }` otherwise balloons them
     into ~180px-tall boxes once the row stacks at narrow widths. */
  .booking-payment-dialog .admin-button-row {
    flex-direction: column;
    width: 100%;
  }
  .booking-payment-dialog .admin-button-row > .button {
    flex: 0 0 auto;
    width: 100%;
    min-height: 50px;
  }

  [data-authorize-payment] {
    margin-top: 10px;
  }

  .placeholder-note,
  .field-help,
  .booking-note,
  .form-status {
    font-size: 0.92rem !important;
    line-height: 1.55;
  }

  .review-summary-list {
    gap: 10px !important;
  }

  .review-summary-list div {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px;
  }

  .timeline,
  .status-timeline {
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .tracking-result-card,
  .status-panel,
  .request-card,
  .track-request-card {
    border-radius: 16px !important;
    padding: 16px !important;
  }

  .photo-grid,
  .receipt-grid,
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .photo-grid img,
  .receipt-grid img,
  .gallery-grid img {
    min-height: 118px !important;
    border-radius: 12px !important;
    object-fit: cover;
  }

  .site-footer {
    margin-top: 26px;
    padding: 20px 16px;
    border-radius: 16px;
  }

  body.admin-portal-page .site-footer {
    display: none !important;
  }

  body.landing-page .site-footer {
    margin-top: 18px;
  }

  body.landing-page .footer-main {
    gap: 12px;
  }

  body.landing-page .footer-links {
    gap: 10px 14px;
  }

  .portal-closing-banner {
    margin-top: 28px;
    padding: 22px 18px;
    border-radius: 18px;
  }

  .final-cta-main {
    align-items: flex-start;
  }

  .final-cta-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
  }
}

@media (max-width: 420px) {
  :root {
    --sf-mobile-gutter: 10px;
  }

  .site-header,
  .landing-header {
    padding: 10px;
  }

  .logo {
    font-size: 0.95rem;
  }

  .logo span:last-child {
    max-width: 140px;
  }

  .mobile-menu-button span:first-child {
    font-size: 0.92rem;
  }

  .booking-step-header {
    padding: 16px 14px !important;
  }

  .booking-step-panel,
  .booking-panel,
  .booking-step-content {
    padding-inline: 14px !important;
  }

  .photo-grid,
  .receipt-grid,
  .gallery-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Pass 3: admin dashboard + worker portal phone fixes (tables, control rows, modals). */
@media (max-width: 760px) {
  /* Data tables scroll inside their own box instead of forcing the whole page to
     scroll sideways. display:block on the table (not its rows/cells) keeps the
     columns aligned via the table's anonymous table boxes. */
  .admin-requests-table,
  .revenue-breakdown-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.82rem;
  }

  .admin-requests-table th,
  .admin-requests-table td,
  .revenue-breakdown-table th,
  .revenue-breakdown-table td {
    padding: 8px 10px;
  }

  /* Admin control / filter rows wrap instead of overflowing off-screen. */
  .admin-toolbar,
  .admin-filters-wrap,
  .admin-hero-controls,
  .review-filter-row,
  .star-filter-buttons,
  .find-tickets-search-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .find-tickets-search-row > * {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Tab strips scroll sideways rather than squashing their labels. */
  .admin-request-tabs,
  .admin-page-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Modals use the full phone width and scroll their body. */
  .modal-overlay {
    padding: 12px !important;
  }

  .modal-dialog,
  .worker-modal-wide,
  .find-tickets-dialog,
  .ticket-detail-dialog,
  .returning-modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh;
  }

  .modal-body {
    overflow-y: auto;
  }

  /* Settings + generic field grids collapse to a single column. */
  .settings-grid,
  .field-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   App shell — mobile bottom tab bar + portal "app feel"
   (hidden on desktop; only kicks in on phones)
   ───────────────────────────────────────────────────────────────────────── */
.app-tabbar { display: none; }

@media (max-width: 760px) {
  .app-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgb(var(--sf-primary-rgb) / 0.12);
    box-shadow: 0 -6px 24px rgb(var(--sf-primary-rgb) / 0.10);
  }

  .app-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 50px;
    padding: 6px 4px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--sf-muted, #60716d);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .app-tab svg { width: 22px; height: 22px; }

  .app-tab.active,
  .app-tab.is-active {
    color: var(--sf-teal-dark, var(--sf-primary));
    background: rgb(var(--sf-accent-rgb, 167 191 166) / 0.18);
  }

  /* Leave room so content isn't hidden behind the fixed bar. */
  body.worker-portal-page,
  body.track-page,
  body.admin-portal-page {
    padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Declutter the worker portal into an app feel: drop pure-marketing chrome. */
  body.worker-portal-page .portal-closing-banner { display: none !important; }
  body.worker-portal-page .worker-portal-hero .actions { gap: 8px; }
}

@media (max-width: 760px) {
  /* Customer Track — app feel: drop the marketing banner. */
  body.track-page .portal-closing-banner { display: none !important; }

  /* Admin — the bottom bar replaces the cramped top page-tab row on phones. */
  body.admin-portal-page .admin-page-tabs { display: none !important; width: 0 !important; }
  body.admin-portal-page .portal-closing-banner { display: none !important; }

  /* Mobile browser has no bottom tabbar — nav is the header PAGE switcher only.
     The installed PWA keeps its bottom tabbar (5 quick sections) AND now also
     shows the header PAGE dropdown below, so Support/Payroll/Marketing (which
     have no bottom-nav slot) are reachable. Hence the header-switcher rules
     below are no longer scoped to sf-browser. */
  html.sf-browser body.admin-portal-page .app-tabbar {
    display: none !important;
  }

  body.admin-portal-page .portal-header.admin-top-nav {
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    padding: 10px 12px 8px !important;
  }

  body.admin-portal-page .portal-header.admin-top-nav .logo {
    order: 1;
    flex: 1 1 auto;
    margin-right: 0;
  }

  body.admin-portal-page .portal-header.admin-top-nav .portal-header-actions {
    order: 2;
    flex: 0 0 auto;
  }

  body.admin-portal-page .portal-header.admin-top-nav .portal-section-toggle {
    order: 3;
    display: flex;
    flex: 1 0 100%;
    width: 100%;
    padding: 9px 12px;
  }

  body.admin-portal-page .portal-header.admin-top-nav .admin-page-tabs {
    order: 4;
    display: none !important;
    width: 100% !important;
    flex: 1 0 100%;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 2px 0 4px;
    overflow: visible;
  }

  body.admin-portal-page .portal-header.admin-top-nav .admin-page-tabs.is-mobile-open {
    display: flex !important;
  }

  body.admin-portal-page .portal-header.admin-top-nav .admin-page-tabs::-webkit-scrollbar {
    display: none;
  }

  body.admin-portal-page .portal-header.admin-top-nav .admin-page-tab {
    flex: 0 0 auto;
    justify-content: flex-start;
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.82rem;
    white-space: nowrap;
  }

  body.admin-portal-page .portal-header.admin-top-nav .admin-page-tab.active {
    background: rgba(255, 255, 255, 0.18);
  }

  /* Admin (header-switcher shell) and the account SETTINGS page (website shell)
     have no bottom tab bar in mobile web, so they keep zero tabbar clearance. */
  html.sf-browser body.admin-portal-page,
  html.sf-browser body.account-page {
    padding-bottom: 0 !important;
  }

  /* Customer mobile web uses the website shell. The bottom tab bar is reserved
     for installed PWA mode, so browser pages do not need tabbar clearance. */
  html.sf-browser body.customer-account-page,
  html.sf-browser body.booking-page {
    padding-bottom: 0 !important;
  }

  /* Tighter tab labels so all 7 admin tabs (incl. Payroll + Promos) fit a narrow
     phone without wrapping. */
  body.admin-portal-page .app-tabbar { gap: 0; }
  body.admin-portal-page .app-tab { font-size: 0.56rem; padding: 6px 1px; min-width: 0; }
  body.admin-portal-page .app-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  body.admin-portal-page .app-tab svg { width: 20px; height: 20px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Mobile: turn the wide request/job TABLE into stacked cards (no sideways
   scroll). Works for both the worker job list and the admin queue because
   they share .admin-requests-table; driven by each cell's data-label.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .admin-requests-table { border: 0 !important; }
  .admin-requests-table thead { display: none !important; }
  .admin-requests-table,
  .admin-requests-table tbody { display: block; width: 100%; }

  /* Compact card: a 2-column grid so the four detail fields pair up onto two
     lines (Service | Status, then Worker | Date). Customer headline and the
     action row span the full width. */
  .admin-requests-table tr.queue-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    row-gap: 2px;
    padding: 12px 14px;
    margin: 0 0 10px;
    border: 1px solid rgb(var(--sf-primary-rgb) / 0.12);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 4px rgb(var(--sf-primary-rgb) / 0.05);
  }

  /* Each field stacks its label over its value, left-aligned, in its grid cell. */
  .admin-requests-table tr.queue-row td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: auto;
    min-width: 0;
    padding: 4px 0;
    border: none !important;
    text-align: left;
  }
  .admin-requests-table tr.queue-row td::before {
    content: attr(data-label);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--sf-muted, #60716d);
  }

  /* Customer is the card headline — spans both columns, no label. */
  .admin-requests-table tr.queue-row td[data-label="Customer"] {
    grid-column: 1 / -1;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgb(var(--sf-primary-rgb) / 0.08) !important;
  }
  .admin-requests-table tr.queue-row td[data-label="Customer"]::before { display: none; }
  .admin-requests-table tr.queue-row td[data-label="Customer"] .queue-customer-cell strong { font-size: 1.02rem; }

  /* Action row — spans both columns, full-width buttons, no label. */
  .admin-requests-table tr.queue-row td[data-label="Action"] {
    grid-column: 1 / -1;
    padding-top: 8px;
    margin-top: 2px;
    border-top: 1px solid rgb(var(--sf-primary-rgb) / 0.08) !important;
  }
  .admin-requests-table tr.queue-row td[data-label="Action"]::before { display: none; }
  .admin-requests-table tr.queue-row td[data-label="Action"] .queue-next-action-cell { display: flex; gap: 8px; width: 100%; }
  .admin-requests-table tr.queue-row td[data-label="Action"] .queue-next-action-cell .button { flex: 1; min-height: 44px; }
  .admin-requests-table tr.queue-row td[data-label="Action"] .queue-row-kebab { flex: 0 0 44px; }

  /* Status renders as a chip on its own value line. */
  .admin-requests-table tr.queue-row td[data-label="Status"] .status-pill { white-space: nowrap; }

  /* Expanded detail row spans full width as a panel (no card chrome). */
  .admin-requests-table tr.queue-row-detail { display: block; }
  .admin-requests-table tr.queue-row-detail td {
    display: block;
    width: auto;
    padding: 0;
    border: none !important;
  }
  .admin-requests-table tr.queue-row-detail td::before { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   App density pass (phones): tighter type + spacing + compact hero so the
   staff portals read like an app rather than a marketing website.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* Smaller, denser headings inside the portals. */
  body.worker-portal-page h1,
  body.admin-portal-page h1 { font-size: 1.5rem !important; line-height: 1.15; }
  body.worker-portal-page h2,
  body.admin-portal-page h2,
  body.worker-portal-page .worker-card-heading h2 { font-size: 1.15rem !important; }

  /* Tighter cards + less gap between sections. */
  body.worker-portal-page .worker-dashboard-card,
  body.worker-portal-page .worker-current-status-card {
    padding: 15px 14px !important;
    border-radius: 16px !important;
  }
  body.worker-portal-page .worker-dashboard-layout { gap: 12px !important; }
  body.worker-portal-page .section,
  body.admin-portal-page .section { margin-top: 12px !important; margin-bottom: 12px !important; }

  /* Compact the worker hero so jobs are visible sooner (less giant image). */
  body.worker-portal-page .worker-portal-hero { padding: 16px !important; min-height: 0 !important; }
  body.worker-portal-page .worker-portal-hero .booking-flow-hero-image,
  body.worker-portal-page .worker-portal-hero figure { display: none !important; }
  body.worker-portal-page .worker-hero-content { gap: 12px !important; }

  /* Make the in-portal action buttons full-width + comfortably tappable. */
  body.worker-portal-page .worker-portal-hero .actions .button,
  body.worker-portal-page .worker-profile-actions .button { width: 100%; min-height: 46px; }
  body.worker-portal-page .worker-portal-hero .actions,
  body.worker-portal-page .worker-profile-actions { display: grid; gap: 8px; }
  body.worker-portal-page .worker-app-legal,
  body.worker-portal-page .worker-app-copy {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   App "screens" — each bottom tab shows ONLY its section (phones).
   Driven by body[data-app-view] + section [data-app-view].
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body.worker-portal-page[data-app-view] [data-app-view] { display: none !important; }
  body.worker-portal-page[data-app-view="jobs"]     [data-app-view="jobs"],
  body.worker-portal-page[data-app-view="progress"] [data-app-view="progress"],
  body.worker-portal-page[data-app-view="profile"]  [data-app-view="profile"],
  body.worker-portal-page[data-app-view="schedule"] [data-app-view="schedule"] {
    display: block !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Worker job-detail: stop giant buttons + tighten the flow so the worker
   reaches photo upload with far less scrolling.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* Action buttons (Back / status) and the GPS button must be a normal height,
     not full-height boxes. align-self:center stops the flex stretch. */
  body.worker-portal-page .guided-step .admin-button-row .button,
  body.worker-portal-page .gps-tracking-panel .admin-button-row .button,
  body.worker-portal-page .gps-tracking-panel .button {
    min-height: 50px !important;
    height: 50px !important;
    align-self: center !important;
    flex: 1 1 auto !important;
  }

  /* Compact the status + GPS cards so they don't each fill a screen. */
  body.worker-portal-page .guided-step { padding: 14px !important; margin-bottom: 12px !important; }
  body.worker-portal-page .gps-tracking-panel { padding: 12px 14px !important; margin: 10px 0 !important; }
  body.worker-portal-page .gps-tracking-panel h4 { margin-bottom: 4px !important; }

  /* The reference details (customer/address/parking/vehicle) are read-only info —
     tighten them so they take less room above the action. */
  body.worker-portal-page .worker-job-card .request-details { margin: 6px 0 !important; }
  body.worker-portal-page .worker-job-card .request-details p { margin: 4px 0 !important; font-size: 0.92rem; }
}

/* Worker PWA owns the whole app window. Keep a small operational gutter, but
   remove the centered website-column feel from worker cards and sections. */
@media (max-width: 760px) {
  body.worker-portal-page main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.worker-portal-page .worker-tab,
  body.worker-portal-page .worker-dash-grid,
  body.worker-portal-page .worker-dash-main,
  body.worker-portal-page .worker-card-list,
  body.worker-portal-page .worker-today-list {
    width: 100% !important;
    max-width: none !important;
  }

  body.worker-portal-page .section {
    padding-left: clamp(8px, 2.5vw, 14px) !important;
    padding-right: clamp(8px, 2.5vw, 14px) !important;
  }

  body.worker-portal-page .worker-dashboard-card,
  body.worker-portal-page .worker-current-status-card,
  body.worker-portal-page .worker-current-job-card,
  body.worker-portal-page .worker-state-card,
  body.worker-portal-page .worker-today-counts {
    width: 100% !important;
    max-width: none !important;
  }

  body.worker-portal-page[data-app-view="schedule"] .worker-schedule-form-inline {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.worker-portal-page[data-app-view="schedule"] .worker-availability-window {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    border: 1px solid rgb(var(--sf-primary-rgb) / 0.1);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgb(var(--sf-primary-rgb) / 0.07);
    overflow: hidden;
  }

  body.worker-portal-page[data-app-view="schedule"] .worker-acc + .worker-acc {
    margin-top: 10px;
    border-top: 1px solid rgb(var(--sf-primary-rgb) / 0.1);
  }

  body.worker-portal-page[data-app-view="schedule"] .worker-acc-head {
    min-height: 54px;
    padding: 14px 16px;
  }

  body.worker-portal-page[data-app-view="schedule"] .worker-acc-body {
    padding: 0 14px 14px;
  }
}

/* Fix: `.admin-button-row { display:flex }` overrode the [hidden] attribute, so
   rows hidden in JS (e.g. the GPS "Resume" button once tracking is active) stayed
   visible. Make [hidden] win. Applies on all widths. */
.admin-button-row[hidden] { display: none !important; }

/* Collapsible "Job details" on worker job cards — collapsed by default so the
   action (photos/receipt/inspection) is near the top. */
.worker-job-details { margin: 6px 0 2px; }
.worker-job-details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid rgb(var(--sf-primary-rgb) / 0.16);
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--sf-teal-dark, var(--sf-primary));
  background: rgb(var(--sf-accent-rgb, 167 191 166) / 0.14);
}
.worker-job-details > summary::-webkit-details-marker { display: none; }
.worker-job-details > summary::after { content: " ▾"; font-size: 0.8em; }
.worker-job-details[open] > summary::after { content: " ▴"; }

/* Once GPS is actively tracking, drop the intro paragraph (keep the status line). */
.gps-tracking-panel.is-tracking > p.field-help:not(.gps-tracking-status) { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
   Admin app mobile fixes (PWA on phones)

   #1 Oversized toolbar buttons:
      styles.css @820px flips `.admin-button-row` to `flex-direction: column`
      but its buttons keep `flex: 1 1 180px` (a min-WIDTH meant for a horizontal
      row). In a column that 180px becomes a vertical flex-basis, so each toolbar
      control balloons into a ~180px-tall box (the giant "Find Tickets" box).
      Reset toolbar controls to natural height, full width.

   #2 Queue cards bleeding off the right edge:
      the requests table is restyled into stacked cards, but flex value cells
      default to min-width:auto and can't shrink, so long values (service, date,
      action buttons) spill past the card and get clipped. Let them shrink/wrap.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* #1 — toolbar controls: kill the inherited vertical flex-basis. */
  .admin-toolbar .admin-button-row {
    flex-direction: column;
    width: 100%;
  }
  .admin-toolbar .admin-button-row > .button,
  .admin-toolbar .admin-button-row > .admin-date-range-wrap,
  .admin-toolbar .admin-button-row > .admin-filters-wrap,
  .admin-toolbar .admin-find-tickets-btn,
  .admin-toolbar .admin-filters-btn {
    flex: 0 0 auto;
    width: 100%;
  }
  .admin-toolbar .admin-find-tickets-btn,
  .admin-toolbar .admin-filters-btn {
    justify-content: center;
    min-height: 44px;
  }
  .admin-toolbar .admin-date-range-wrap > .admin-date-range,
  .admin-toolbar .admin-date-range select {
    width: 100%;
  }

  /* #2 — stacked queue cards: let value cells shrink and wrap instead of
     overflowing. Drop the leftover horizontal-scroll mode on the table. */
  .admin-requests-table {
    overflow-x: hidden !important;
    width: 100% !important;
  }
  .admin-requests-table tr.queue-row td {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .admin-requests-table tr.queue-row td > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* #3 — page-level right-edge bleed: the admin sections size as
     `calc(100% - 40px)` of `.admin-main`, whose content box grows to contain
     any overflowing descendant. So one wide child (e.g. the queue table cells)
     inflates EVERY section's width uniformly and the whole page bleeds right.
     Pin sections to the viewport (vw) so a wide child can't drag them out. */
  .admin-portal-page .admin-hero,
  .admin-portal-page .admin-section,
  .admin-portal-page .admin-page-row {
    width: min(var(--sf-page-width), calc(100vw - 2 * var(--sf-mobile-gutter))) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .admin-portal-page .admin-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* The sections above are pinned to 100vw − 2×gutter and centered. Any
       horizontal padding here makes the main's content box narrower than those
       sections, so margin:auto can't center them — they collapse to the left
       padding edge and the whole page leans right. Keep the vertical padding,
       drop the horizontal so the viewport-based centering stays symmetric. */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Dashboard-only rail: the Quick Actions / Worker Snapshot / Reviews sidebar
     and the Workers/Create/Settings shortcut grid have no data-page-section, so
     the tab switcher leaves them visible on every tab. On desktop they're the
     persistent right rail; on phones they stack onto each tab as clutter. Show
     them only on the Home/dashboard tab. */
  body.admin-portal-page[data-admin-page]:not([data-admin-page="dashboard"]) .admin-dashboard-side,
  body.admin-portal-page[data-admin-page]:not([data-admin-page="dashboard"]) .admin-shortcut-grid {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   #6 Oversized portal headers (worker + admin top nav)

   The dark teal `.unified-portal-header` gets `min-height: 84px`,
   `align-items: flex-start`, and `.portal-header-actions { width: 100% }` on
   mobile. That drops the whole action cluster onto its own full-width row
   BELOW the logo, so the bar balloons into a tall block:
     • Admin — label + sign-out are hidden ≤640px, leaving a lone avatar
       stranded across a full-width row (big empty band under the logo).
     • Worker — the label, presence pill, "Take a break" and "Sign out" each
       wrap onto their own line, a 4-row stack.
   Collapse both back into a tidy, low single bar.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .unified-portal-header.admin-top-nav,
  .unified-portal-header.worker-top-nav {
    min-height: 0 !important;
    align-items: center !important;
    gap: 10px;
    padding: 12px 16px !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
  }

  /* Logo shares the top row rather than claiming 100% width. */
  .unified-portal-header.admin-top-nav .logo,
  .unified-portal-header.worker-top-nav .logo {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Admin: pin the lone avatar inline on the right next to the logo. */
  .unified-portal-header.admin-top-nav .portal-header-actions {
    width: auto !important;
    flex: 0 0 auto;
    margin-left: auto;
    justify-content: flex-end !important;
  }

  /* Worker: keep label + presence + buttons on one compact, left-aligned
     wrapping row instead of a tall centered stack. */
  .unified-portal-header.worker-top-nav .portal-header-actions {
    width: 100%;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start !important;
  }
  .unified-portal-header.worker-top-nav .portal-header-label {
    margin-right: auto;
  }
  .worker-top-nav .portal-signout-btn,
  .worker-top-nav #worker-break-toggle {
    min-height: 36px;
    padding: 7px 14px;
    flex: 0 0 auto;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   #7 Admin Dashboard cleanup (match the polished mockup)

   The stat cards collapse to a single tall column ≤640px, which reads as a
   long ribbon on a phone. The mockup's cleaner feel comes from a 2-up grid
   with the wider "Net Revenue" card spanning the full row. Our card order
   (Open | In Progress / Completed | Active Workers / Revenue) already lines
   up with that layout — just restore the 2-column grid on phones and let the
   revenue card span both columns. Also slim the hero so the cards lead.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body.admin-portal-page .admin-hero-top,
  body.admin-portal-page [data-tab-panel="workers"] > .admin-toolbar:first-child,
  body.admin-portal-page [data-tab-panel="settings"] > .admin-toolbar:first-child {
    display: none !important;
  }

  body.admin-portal-page [data-tab-panel="support"] > .admin-toolbar:first-child > div:first-child > .eyebrow,
  body.admin-portal-page [data-tab-panel="support"] > .admin-toolbar:first-child > div:first-child > h2,
  body.admin-portal-page [data-tab-panel="payroll"] > .admin-toolbar:first-child > div:first-child > .eyebrow,
  body.admin-portal-page [data-tab-panel="payroll"] > .admin-toolbar:first-child > div:first-child > h2,
  body.admin-portal-page [data-tab-panel="marketing"] > .admin-toolbar:first-child > div:first-child > .eyebrow,
  body.admin-portal-page [data-tab-panel="marketing"] > .admin-toolbar:first-child > div:first-child > h2,
  body.admin-portal-page [data-tab-panel="services"] > .admin-toolbar:first-child > div:first-child > .eyebrow,
  body.admin-portal-page [data-tab-panel="services"] > .admin-toolbar:first-child > div:first-child > h2,
  body.admin-portal-page [data-tab-panel="create-request"] > .admin-toolbar:first-child > div:first-child > .eyebrow,
  body.admin-portal-page [data-tab-panel="create-request"] > .admin-toolbar:first-child > div:first-child > h2 {
    display: none !important;
  }

  .admin-portal-page .admin-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
  /* Net Revenue spans the full width beneath the 2x2 of counts. */
  .admin-portal-page #stat-card-revenue {
    grid-column: 1 / -1;
  }
  .admin-portal-page .admin-stat-card {
    min-height: 82px;
    padding: 14px;
  }

  /* Slim the dashboard hero text so the stat cards come up sooner, the way the
     mockup leads straight into the cards. */
  .admin-portal-page .admin-hero .section-heading h1 {
    font-size: 1.55rem;
    margin: 2px 0;
  }
  .admin-portal-page .admin-hero .section-heading > p {
    font-size: 0.9rem;
  }

  /* Mockup touch: small line icons before the Service / Worker / Date labels on
     each request card. The avatar circle is already rendered in the Customer
     cell (.queue-avatar). Scoped by data-label so it only decorates the request
     queue, never the worker list (which uses Name/Phone/Status labels). */
  .admin-requests-table tr.queue-row td[data-label="Service"]::before,
  .admin-requests-table tr.queue-row td[data-label="Worker"]::before,
  .admin-requests-table tr.queue-row td[data-label="Date"]::before,
  .admin-requests-table tr.queue-row td[data-label="Time"]::before {
    padding-left: 19px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 13px 13px;
  }
  /* Worker job cards lead with a Time column — give it a clock icon. */
  .admin-requests-table tr.queue-row td[data-label="Time"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360716d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  }
  .admin-requests-table tr.queue-row td[data-label="Service"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360716d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 3h6v3H9z'/%3E%3Cpath d='M9 11h6M9 15h4'/%3E%3C/svg%3E");
  }
  .admin-requests-table tr.queue-row td[data-label="Worker"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360716d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
  }
  .admin-requests-table tr.queue-row td[data-label="Date"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360716d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   #8 Oversized buttons in ALL admin button-rows (not just the toolbar)

   styles.css gives `.admin-button-row .button { flex: 1 1 180px }` and flips
   the row to `flex-direction: column` at narrow widths — so the 180px (meant
   as a min-WIDTH for a horizontal row) becomes a vertical flex-basis and each
   button balloons to ~180px tall. Fix #1 only patched the toolbar; the same
   bug hit the worker-profile actions (Save worker profile / Create new portal
   password / Deactivate worker) and any other admin button-row. Reset every
   admin button-row button to natural height, full width.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .admin-portal-page .admin-button-row {
    flex-direction: column;
    width: 100%;
  }
  .admin-portal-page .admin-button-row > .button {
    flex: 0 0 auto;
    width: 100%;
    min-height: 44px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   #9 Worker dashboard — "Current Job"-led layout

   loadWorkerJobs() now groups the list into Current Job / Today's Schedule /
   Available Requests sections (.worker-jobs-section). Space them out, and give
   the active job card a teal accent so it reads as the focus of the screen,
   the way the mockup leads with a highlighted current job.
   ───────────────────────────────────────────────────────────────────────── */
.worker-jobs-section {
  margin-bottom: 14px;
}
.worker-jobs-section > h3 {
  margin: 0 0 8px;
}

@media (max-width: 760px) {
  /* The current job is rendered as a single stacked card — accent it. */
  .worker-jobs-current tr.queue-row {
    border: 1px solid var(--sf-teal, var(--sf-primary)) !important;
    box-shadow: 0 6px 18px rgb(var(--sf-primary-rgb) / 0.12);
  }
  .worker-jobs-cancelled tr.queue-row {
    border-color: #e7b8b3 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   #10 Worker portal tweaks (from on-device review)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* A) Schedule / availability buttons (e.g. "Work Days and Shift Times",
     "Days Off", "Save …") were ballooning tall: they live in CSS grids, and a
     grid item defaults to align-self:stretch on the block axis, so each button
     stretched to fill its grid track. Pin them to natural height. */
  .worker-portal-page .worker-schedule-actions .button,
  .worker-portal-page .worker-availability-window .button,
  .worker-portal-page .worker-schedule-form-inline .button {
    align-self: start;
    height: auto;
    min-height: 46px;
  }

  /* B) The view-switcher hides sections by [data-app-view], but the structural
     wrappers (.worker-dashboard-layout / -side / -main) carry no data-app-view,
     so they stay in flow as EMPTY boxes and reserve big vertical gaps when their
     inner sections are hidden. Hide whichever wrapper has no active child for the
     current tab. (The Schedule tab's huge blank band was the empty layout box.) */
  body.worker-portal-page[data-app-view="schedule"] .worker-dashboard-layout { display: none !important; }
  body.worker-portal-page[data-app-view="jobs"] .worker-dashboard-side { display: none !important; }
  body.worker-portal-page[data-app-view="progress"] .worker-dashboard-main,
  body.worker-portal-page[data-app-view="profile"] .worker-dashboard-main { display: none !important; }

  /* C) Tighter worker header: keep the "Worker Portal" tag on its own slim line
     under the logo, then let presence + Take a break + Sign out share ONE compact
     row instead of stacking into a tall block. */
  .unified-portal-header.worker-top-nav .portal-header-label {
    flex: 0 0 100%;
    margin: 0;
    font-size: 0.8rem;
  }
  .unified-portal-header.worker-top-nav .worker-presence-indicator {
    flex: 0 0 auto;
  }
  .worker-top-nav .portal-signout-btn,
  .worker-top-nav #worker-break-toggle {
    flex: 1 1 auto;
    min-height: 38px;
    padding: 8px 10px;
    font-size: 0.85rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   #11 Slim the idle worker hero (Jobs tab)

   The hero forces min-height:280px on both the section and its content and an
   h1 up to clamp(2.8rem,7vw,4.8rem), so on a phone the "Welcome back / name /
   0 jobs" banner towers over the screen. When there's no active job to lead
   with, this is the first thing the worker sees — so make it a light, compact
   card: shrink the heading, drop the forced height, and tighten the Current
   Status card.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .worker-portal-hero {
    min-height: 0;
  }
  .worker-hero-content {
    min-height: 0;
    padding: 18px 16px;
    gap: 14px;
  }
  .worker-portal-hero h1 {
    font-size: 1.85rem;
    line-height: 1.05;
    margin: 4px 0 6px;
  }
  .worker-portal-hero p {
    font-size: 0.95rem;
  }
  .worker-portal-hero .actions {
    margin-top: 14px;
    gap: 8px;
  }
  .worker-portal-hero .actions .button {
    min-width: 0;
  }
  .worker-current-status-card {
    max-width: none;
    padding: 14px 16px;
  }
  .worker-current-status-card .worker-card-heading {
    margin-bottom: 8px;
  }
  .worker-current-status-card dl div,
  .worker-current-status-card .worker-profile-facts div {
    padding: 8px 0;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   #12 Worker page — stop horizontal bleed + long-status clipping

   The worker page never got the viewport-containment the admin page did (#3),
   so the hero, dashboard layout and job cards could push past the right edge.
   Pin them to the content width, clip any residual overflow on the body, and
   let long statuses (e.g. "Cancellation received - awaiting key/vehicle return")
   wrap instead of running off the card.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body.worker-portal-page {
    overflow-x: hidden;
  }
  .worker-portal-page .worker-portal-hero,
  .worker-portal-page .worker-dashboard-layout,
  .worker-portal-page .worker-schedule-view,
  .worker-portal-page .worker-tab {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .worker-portal-page .worker-hero-content {
    overflow-wrap: anywhere;
  }

  /* Long worker statuses were nowrap and clipped — let the pill wrap. */
  .worker-portal-page .admin-requests-table tr.queue-row td[data-label="Status"] .status-pill {
    white-space: normal;
    text-align: right;
    overflow-wrap: anywhere;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   #13 Action Needed cards — stack on mobile (info over a full-width button).
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .action-needed-card {
    flex-direction: column;
    align-items: stretch;
  }
  .action-needed-card .action-needed-btn {
    width: 100%;
    min-height: 44px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   #14 Admin dashboard — command-center cleanup (mobile)
   - compact top header (logo + avatar on one row, no tall green block)
   - tighter metric spacing
   - drop the random Avg-Rating block from the first screen
   - drop the duplicate Workers/Create/Settings shortcut grid (it repeats the
     bottom nav + Quick Actions)
   - drop the public marketing footer (legal links live under Settings)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* 1 — compact app header: logo left, avatar right, full-width bar. */
  .admin-portal-page .unified-portal-header.admin-top-nav {
    min-height: 0 !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px;
  }
  .admin-portal-page .unified-portal-header.admin-top-nav .logo {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.95rem;
    line-height: 1.1;
  }
  /* Keep the name on one line so the bar stays a single compact row. */
  .admin-portal-page .unified-portal-header.admin-top-nav .logo span:last-child {
    white-space: nowrap;
    max-width: none;
  }
  .admin-portal-page .unified-portal-header.admin-top-nav .logo-mark {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    font-size: 1.3rem;
  }
  .admin-portal-page .unified-portal-header.admin-top-nav .portal-header-actions {
    width: auto !important;
    flex: 0 0 auto;
    margin-left: auto;
    justify-content: flex-end !important;
  }
  .admin-top-nav .admin-avatar {
    width: 34px;
    height: 34px;
  }

  /* 3 — tighten the metric cards under the title. */
  .admin-portal-page .admin-stat-grid {
    gap: 8px;
    margin-top: 10px;
  }

  /* 9 — duplicate shortcut cards (Workers / Create Request / Settings) repeat
     the bottom nav and Quick Actions — drop them on the app dashboard. */
  .admin-portal-page .admin-shortcut-grid {
    display: none !important;
  }

  /* 10 — no public marketing footer inside the signed-in admin app. */
  body.admin-portal-page .site-footer {
    display: none !important;
  }

  /* 12 — admin sections inherit the landing page's tall 44px section padding,
     which is the source of the big vertical gaps. Tighten them so the dashboard
     reads like an app, not a marketing page. */
  .admin-portal-page .section,
  .admin-portal-page .admin-section,
  .admin-portal-page .admin-hero {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .admin-portal-page .admin-main {
    padding-top: 6px;
  }

  /* Prevent any overflowing child from pushing the page right. */
  html:has(body.admin-portal-page),
  body.admin-portal-page {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Task 1 — Customer app header matches the admin/worker portal bar on phones.
   The signed-in customer header was a tall, rounded, floating card with the
   brand wrapped onto two lines and a large avatar. Give it the same compact,
   flush, single-line app-bar treatment the admin/worker portals use: logo
   left on one line, small avatar pinned right.
   Also applies to the My Account/settings hub (body.account-page) so its
   header matches Home/Book/Track instead of falling back to the oversized
   floating landing-page header. */
@media (max-width: 760px) {
  body.customer-account-page .site-header,
  body.account-page .site-header {
    top: 0 !important;
    margin-top: 0 !important;
    padding: 8px 12px !important;
    border-radius: 0 !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px;
  }
  body.customer-account-page .site-header .logo,
  body.account-page .site-header .logo {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.95rem;
    line-height: 1.1;
  }
  /* Keep the brand on one line so the bar stays a single compact row. */
  body.customer-account-page .site-header .logo span:last-child,
  body.account-page .site-header .logo span:last-child {
    white-space: nowrap;
    max-width: none;
  }
  /* Same "S" mark size on every signed-in customer surface (Book and Track were
     left at the larger 34px base, so their logo looked bigger/brighter than the
     Dashboard/My Account one). */
  body.customer-account-page .site-header .logo-mark,
  body.account-page .site-header .logo-mark,
  body.booking-page .site-header .logo-mark,
  body.track-page .site-header .logo-mark {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    font-size: 1.3rem;
  }
  /* Avatar cluster pinned right, sized to match the admin avatar. */
  body.customer-account-loaded .customer-header-signed {
    gap: 6px;
    margin-left: auto;
  }
  body.customer-account-page .customer-header-signed .customer-avatar,
  body.account-page .customer-header-signed .customer-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
  }
  body.customer-account-page .customer-avatar-chevron,
  body.account-page .customer-avatar-chevron {
    width: 16px;
    height: 16px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Worker Dashboard cards on phones: full-width facts + sticky next-action.
   When a worker is inside the active job, the main action button sticks to the
   bottom of the screen (just above the tab bar) so it's always reachable.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body.worker-portal-page .worker-card { padding: 14px; }
  body.worker-portal-page .worker-current-job-facts { grid-template-columns: 1fr; }

  body.worker-portal-page .worker-current-job-card .guided-step .admin-button-row {
    position: sticky;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    z-index: 6;
    margin: 12px -14px -4px;
    padding: 10px 14px;
    background: #fff;
    border-top: 1px solid var(--worker-line, rgb(var(--sf-primary-rgb) / 0.12));
    box-shadow: 0 -8px 18px rgba(255, 255, 255, 0.96);
  }

  body.worker-portal-page .worker-current-job-card .guided-step .admin-button-row .button.primary {
    width: 100%;
  }

  body.worker-portal-page .worker-secondary-btn { min-height: 44px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Worker tab panels — desktop shows all, mobile shows active only.
   The hidden attribute is toggled by switchWorkerTab(); on desktop we
   override it so all sections remain visible without a tab bar.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 761px) {
  .worker-tab { display: block !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Fix: "Location" label in the Current Status card word-wrapping to
   "Loca / tion" on narrow phones.  The dt must not break; the dd (which
   can be a long address) wraps on the right side instead.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .worker-current-status-card dt,
  .worker-profile-facts dt {
    white-space: nowrap;
    flex-shrink: 0;
  }
  .worker-current-status-card dd,
  .worker-profile-facts dd {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
  }
}

/* Batch 1: shared mobile shell consistency.
   Keep this presentation-only layer narrow: gutters, card rhythm, tap targets,
   and tabbar clearance across the role apps. */
@media (max-width: 760px) {
  :root {
    --sf-mobile-shell-gutter: clamp(14px, 4vw, 18px);
    --sf-mobile-card-radius: 18px;
    --sf-mobile-card-pad: 16px;
    --sf-mobile-card-shadow: 0 8px 24px rgb(var(--sf-primary-rgb) / 0.08);
    --sf-mobile-tabbar-clearance: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  body.admin-portal-page,
  body.worker-portal-page,
  body.customer-account-page,
  body.booking-page,
  body.track-page,
  body.account-page {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
  }

  body.admin-portal-page,
  body.worker-portal-page,
  body.track-page {
    padding-bottom: var(--sf-mobile-tabbar-clearance) !important;
  }

  body.admin-portal-page .admin-main,
  body.worker-portal-page main,
  body.customer-account-page .customer-account-shell,
  body.booking-page .booking-flow-shell,
  body.track-page .track-shell,
  body.account-page .account-layout {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.admin-portal-page .admin-main,
  body.worker-portal-page main {
    padding-left: var(--sf-mobile-shell-gutter);
    padding-right: var(--sf-mobile-shell-gutter);
  }

  body.admin-portal-page .section,
  body.worker-portal-page .section,
  body.customer-account-page .customer-account-shell,
  body.booking-page .booking-flow-shell,
  body.track-page .track-shell {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.admin-portal-page .unified-portal-header.admin-top-nav,
  body.worker-portal-page .unified-portal-header.worker-top-nav,
  body.customer-account-page .site-header,
  body.booking-page .site-header,
  body.track-page .site-header,
  body.account-page .account-header {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.admin-portal-page .admin-queue-card,
  body.admin-portal-page .admin-side-card,
  body.admin-portal-page .admin-stat-card,
  body.admin-portal-page .booking-card,
  body.worker-portal-page .worker-dashboard-card,
  body.worker-portal-page .worker-current-status-card,
  body.worker-portal-page .worker-current-job-card,
  body.worker-portal-page .worker-state-card,
  body.customer-account-page .customer-account-panel,
  body.customer-account-page .customer-account-option-card,
  body.customer-account-page .customer-dashboard,
  body.customer-account-page .customer-request-card,
  body.customer-account-page .customer-data-card,
  body.customer-account-page .customer-empty-card,
  body.booking-page .booking-flow,
  body.booking-page .booking-accordion-card,
  body.track-page .track-search-card,
  body.account-page .account-tab-body {
    border-radius: var(--sf-mobile-card-radius) !important;
    box-shadow: var(--sf-mobile-card-shadow);
  }

  body.worker-portal-page .worker-today-section {
    padding-top: 14px !important;
    padding-bottom: 6px !important;
  }

  body.worker-portal-page .worker-today-heading {
    margin-bottom: 10px !important;
  }

  body.worker-portal-page .worker-today-section + .section {
    padding-top: 0 !important;
    padding-bottom: 8px !important;
  }

  body.worker-portal-page .worker-today-section + .section .worker-card-heading {
    display: none !important;
  }

  body.worker-portal-page .worker-today-counts .worker-count-cell {
    padding: 12px 2px !important;
  }

  body.worker-portal-page .worker-today-counts .worker-count-value {
    font-size: 1.25rem !important;
  }

  body.worker-portal-page .worker-mobile-summary-section,
  body.worker-portal-page .worker-future-section {
    padding-top: 10px !important;
  }

  body.worker-portal-page .worker-update-list li.field-help {
    display: block !important;
    grid-template-columns: none !important;
    line-height: 1.45;
  }

  body.worker-portal-page #wtab-earnings .section {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  body.worker-portal-page #worker-pay-setup-section {
    padding-top: 18px !important;
  }

  body.worker-portal-page .worker-earnings-mini {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
  }

  body.worker-portal-page .worker-earnings-mini > div {
    padding: 10px;
  }

  body.worker-portal-page .worker-earnings-mini strong {
    font-size: 1rem;
  }

  body.worker-portal-page .worker-pay-calc-inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 10px !important;
  }

  body.worker-portal-page .worker-pay-calc-inputs label:nth-child(3),
  body.worker-portal-page .worker-pay-calc-inputs label:nth-child(4),
  body.worker-portal-page .worker-pay-calc-check {
    grid-column: 1 / -1 !important;
  }

  body.admin-portal-page .admin-queue-card,
  body.admin-portal-page .admin-side-card,
  body.worker-portal-page .worker-dashboard-card,
  body.worker-portal-page .worker-current-status-card,
  body.worker-portal-page .worker-current-job-card,
  body.customer-account-page .customer-dashboard,
  body.booking-page .booking-flow,
  body.track-page .track-search-card,
  body.account-page .account-tab-body {
    padding: var(--sf-mobile-card-pad) !important;
  }

  body.admin-portal-page .button,
  body.admin-portal-page button.summary-button,
  body.admin-portal-page .admin-page-tab,
  body.worker-portal-page .button,
  body.worker-portal-page .worker-aside-link,
  body.customer-account-page .button,
  body.customer-account-page .customer-account-action,
  body.booking-page .button,
  body.track-page .button,
  body.account-page .button,
  body.account-page .account-nav-item {
    min-height: 44px;
    touch-action: manipulation;
  }

  .app-tabbar {
    min-height: var(--sf-mobile-tabbar-clearance);
  }

  .app-tabbar .app-tab {
    min-height: 54px;
  }
}

/* Batch 2: Admin mobile declutter.
   Admin-only polish: keep dashboard metrics driving the inline queue, reduce
   search clutter, and make filters/request cards easier to use on phones. */
@media (max-width: 760px) {
  body.admin-portal-page[data-admin-page="dashboard"] .admin-find-section,
  body.admin-portal-page[data-admin-page="dashboard"] .admin-viewall-link,
  body.admin-portal-page[data-admin-page="dashboard"] .admin-queue-section .admin-find-tickets-btn {
    display: none !important;
  }

  /* Clear path to full Find/search from the mobile Open Requests area. */
  body.admin-portal-page[data-admin-page="dashboard"] .admin-queue-section .queue-goto-find {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  body.admin-portal-page[data-admin-page="dashboard"] .admin-queue-section .queue-goto-find svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
  }

  body.admin-portal-page[data-admin-page="dashboard"] .admin-queue-section {
    display: block;
  }

  body.admin-portal-page[data-admin-page="dashboard"] .admin-queue-section .admin-queue-card {
    margin-top: 0;
  }

  body.admin-portal-page[data-admin-page="dashboard"] .admin-queue-section .admin-toolbar {
    gap: 12px;
  }

  body.admin-portal-page[data-admin-page="dashboard"] .admin-queue-section .admin-toolbar .eyebrow {
    margin-bottom: 2px;
  }

  body.admin-portal-page[data-admin-page="dashboard"] .admin-queue-section .admin-toolbar h2 {
    margin-bottom: 0;
  }

  body.admin-portal-page[data-admin-page="requests"] .admin-find-card {
    padding: 16px !important;
  }

  body.admin-portal-page[data-admin-page="requests"] .admin-find-bar {
    min-height: 50px;
    padding: 12px 14px;
  }

  body.admin-portal-page[data-admin-page="requests"] .admin-find-helper {
    margin-top: 10px;
    line-height: 1.45;
  }

  body.admin-portal-page[data-admin-page="requests"] .admin-find-quick-filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.admin-portal-page[data-admin-page="requests"] .admin-find-quick-filters .button {
    width: 100%;
    justify-content: center;
  }

  body.admin-portal-page[data-admin-page="marketing"] .admin-marketing-section {
    display: flex;
    flex-direction: column;
  }

  body.admin-portal-page[data-admin-page="marketing"] .marketing-toolbar {
    display: contents;
  }

  body.admin-portal-page[data-admin-page="marketing"] .marketing-toolbar > div {
    order: 0;
  }

  body.admin-portal-page[data-admin-page="marketing"] .marketing-subtabs {
    order: 1;
    margin-top: 12px;
  }

  body.admin-portal-page[data-admin-page="marketing"] #marketing-refresh-drafts {
    order: 2;
    width: 100%;
    min-height: 42px;
    margin-top: 10px;
  }

  body.admin-portal-page[data-admin-page="marketing"] #marketing-status {
    order: 3;
  }

  body.admin-portal-page[data-admin-page="marketing"] .marketing-panel {
    order: 4;
  }

  body.admin-portal-page .admin-request-tabs {
    gap: 8px;
    margin: 12px -2px 14px;
    padding: 2px 2px 6px;
    border-bottom: 0;
    scrollbar-width: none;
  }

  body.admin-portal-page .admin-request-tabs::-webkit-scrollbar {
    display: none;
  }

  body.admin-portal-page .admin-request-tabs .summary-button {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgb(var(--sf-primary-rgb) / 0.12);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 8px rgb(var(--sf-primary-rgb) / 0.05);
    font-size: 0.78rem;
    white-space: nowrap;
  }

  body.admin-portal-page .admin-request-tabs .summary-button.active {
    border-color: var(--sf-primary);
    background: var(--sf-primary);
    color: #fff;
    box-shadow: 0 8px 18px rgb(var(--sf-primary-rgb, 13 59 59) / 0.22);
  }

  body.admin-portal-page .app-tabbar .app-tab.active,
  body.admin-portal-page .app-tabbar .app-tab.is-active {
    background: var(--sf-primary);
    color: #fff;
    box-shadow: 0 8px 18px rgb(var(--sf-primary-rgb, 13 59 59) / 0.22);
  }

  body.admin-portal-page .admin-date-range-wrap,
  body.admin-portal-page .admin-filters-wrap {
    width: 100%;
  }

  body.admin-portal-page .admin-date-range select,
  body.admin-portal-page .queue-goto-find,
  body.admin-portal-page .admin-filters-btn,
  body.admin-portal-page #admin-refresh-btn,
  body.admin-portal-page #show-all-time-btn {
    min-height: 44px;
    border-radius: 14px;
  }

  body.admin-portal-page .admin-filters-panel {
    position: fixed;
    left: var(--sf-mobile-shell-gutter, 14px);
    right: var(--sf-mobile-shell-gutter, 14px);
    top: auto;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    z-index: 1300;
    width: auto;
    max-height: min(72vh, 560px);
    overflow: auto;
    gap: 12px;
    padding: 16px;
    border-radius: 20px;
    box-shadow: 0 24px 70px rgb(var(--sf-primary-rgb) / 0.35);
  }

  body.admin-portal-page .admin-filters-panel::before {
    content: "Filters";
    display: block;
    margin-bottom: 2px;
    color: var(--admin-ink, var(--sf-primary-dark));
    font-size: 1rem;
    font-weight: 900;
  }

  body.admin-portal-page .admin-filters-panel label {
    gap: 7px;
  }

  body.admin-portal-page .admin-filters-panel select,
  body.admin-portal-page .admin-filters-panel input[type="search"] {
    min-height: 44px;
    border-radius: 12px;
    font-size: 0.95rem;
  }

  body.admin-portal-page .admin-filters-panel #filter-clear-btn {
    width: 100%;
    margin-top: 4px;
  }

  body.admin-portal-page .admin-requests-table tr.queue-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    padding: 14px;
    border-radius: 18px;
    box-shadow: 0 7px 20px rgb(var(--sf-primary-rgb) / 0.07);
  }

  body.admin-portal-page .admin-requests-table tr.queue-row:active {
    transform: scale(0.99);
  }

  body.admin-portal-page .admin-requests-table tr.queue-row td {
    gap: 3px;
  }

  body.admin-portal-page .admin-requests-table tr.queue-row td::before {
    font-size: 0.64rem;
  }

  body.admin-portal-page .admin-requests-table tr.queue-row td[data-label="Customer"] {
    grid-column: 1 / -1;
    padding-bottom: 10px;
  }

  body.admin-portal-page .admin-requests-table tr.queue-row td[data-label="Status"] {
    align-items: flex-end;
    text-align: right;
  }

  body.admin-portal-page .admin-requests-table tr.queue-row td[data-label="Status"] .status-pill {
    white-space: normal;
    text-align: right;
  }

  body.admin-portal-page .admin-requests-table tr.queue-row td[data-label="Service"],
  body.admin-portal-page .admin-requests-table tr.queue-row td[data-label="Worker"],
  body.admin-portal-page .admin-requests-table tr.queue-row td[data-label="Date"],
  body.admin-portal-page .admin-requests-table tr.queue-row td[data-label="Time"] {
    min-width: 0;
  }

  body.admin-portal-page .admin-requests-table tr.queue-row td[data-label="Action"] {
    grid-column: 1 / -1;
    padding-top: 10px;
  }

  body.admin-portal-page .admin-requests-table tr.queue-row td[data-label="Action"] .queue-next-action-cell {
    align-items: stretch;
  }

body.admin-portal-page .admin-requests-table tr.queue-row td[data-label="Action"] .queue-next-action-cell .button {
    border-radius: 14px;
    font-size: 0.9rem;
  }
}

/* Track result on phones: keep one readable request surface instead of
   card-in-card-in-card nesting. This loads after track-redesign.css, so it wins
   over the shared mobile card padding rules above. */
@media (max-width: 640px) {
  body.track-page #tracking-result {
    display: grid;
    gap: 14px;
  }

  body.track-page .track-section {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.track-page .track-section-header {
    border-radius: 14px !important;
    border: 1px solid rgb(var(--sf-primary-rgb) / 0.08) !important;
    background: rgba(231, 241, 236, 0.72) !important;
  }

  body.track-page .track-section-body {
    padding: 10px 0 0 !important;
  }

  body.track-page .track-request-card {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.track-page .track-dashboard-card > .track-request-details[open] {
    padding: 0 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 14px 34px rgb(var(--sf-primary-rgb) / 0.08) !important;
    overflow: hidden;
  }

  body.track-page .track-dashboard-card .track-request-summary {
    padding: 14px 16px 10px !important;
    border-bottom: 1px solid rgb(var(--sf-primary-rgb) / 0.08);
  }

  body.track-page .track-dashboard-card .track-request-body {
    padding: 12px !important;
    gap: 0 !important;
  }

  body.track-page .track-dashboard-card .tk-hero {
    margin: 0 0 10px !important;
    box-shadow: none !important;
  }

  body.track-page .track-dashboard-card .tk-detail-grid,
  body.track-page .track-dashboard-card .tk-detail-col {
    gap: 0 !important;
  }

  body.track-page .track-dashboard-card .tk-sub-acc {
    border: 0 !important;
    border-top: 1px solid rgb(var(--sf-primary-rgb) / 0.09) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
  }

  body.track-page .track-dashboard-card .tk-sub-acc-head {
    min-height: 46px !important;
    padding: 13px 0 !important;
  }

  body.track-page .track-dashboard-card .tk-sub-acc-body {
    padding: 0 0 12px !important;
    gap: 10px !important;
  }

  body.track-page .track-dashboard-card .tk-card,
  body.track-page .track-dashboard-card .estimated-total-card {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.track-page .track-dashboard-card .tk-updates + .tk-updates,
  body.track-page .track-dashboard-card .tk-vehicle-meta div {
    padding-top: 10px;
    border-top: 1px solid rgb(var(--sf-primary-rgb) / 0.07);
  }
}

/* Batch 4: customer mobile/PWA polish.
   Customer-only density and tap-target improvements for booking, tracking, and
   account screens. Admin and worker selectors are intentionally excluded. */
@media (max-width: 760px) {
  body.customer-account-page .customer-dashboard-header,
  body.customer-account-page .customer-dashboard-layout,
  body.customer-account-page .customer-card-list,
  body.booking-page .booking-flow,
  body.track-page #tracking-result {
    gap: 12px;
  }

  body.customer-account-page .customer-dashboard-subtitle,
  body.customer-account-page .customer-account-action-sub,
  body.booking-page .booking-step-intro,
  body.booking-page .booking-step-heading p,
  body.track-page .tk-status-desc,
  body.track-page .tk-hero-desc {
    line-height: 1.45;
  }

  body.customer-account-page .customer-card-actions,
  body.customer-account-page .customer-dashboard-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  body.customer-account-page .customer-card-actions .button,
  body.customer-account-page .customer-dashboard-actions .button,
  body.customer-account-page .customer-dashboard-actions button,
  body.customer-account-page .customer-account-action,
  body.booking-page .booking-step-actions .button,
  body.booking-page .booking-actions .button,
  body.booking-page .returning-customer-actions .button,
  body.booking-page .returning-customer-actions button,
  body.track-page .track-search-actions .button {
    width: 100%;
    min-height: 50px;
    border-radius: 14px;
  }

  body.customer-account-page .customer-card-actions [data-delete-vehicle],
  body.customer-account-page .customer-card-actions [data-delete-address],
  body.booking-page [data-delete-returning-vehicle],
  body.booking-page [data-delete-returning-address] {
    border-color: rgba(185, 28, 28, 0.18);
    color: #9f1d1d;
    background: #fff7f7;
  }

  body.customer-account-page .customer-data-card,
  body.customer-account-page .customer-request-card,
  body.customer-account-page .customer-empty-card,
  body.booking-page .booking-accordion-card,
  body.booking-page .returning-option-card,
  body.track-page .track-request-card {
    border-radius: 18px !important;
  }

  body.customer-account-page .customer-data-card strong,
  body.customer-account-page .customer-request-card strong {
    overflow-wrap: anywhere;
  }

  body.customer-account-page .customer-data-card span,
  body.customer-account-page .customer-request-card dd,
  body.booking-page .review-summary-list dd,
  body.track-page .track-request-meta {
    overflow-wrap: anywhere;
  }

  body.booking-page .booking-step-header {
    align-items: center;
  }

  body.booking-page .booking-step-icon {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px;
  }

  body.booking-page .booking-step-heading h3,
  body.booking-page .booking-step-heading strong {
    font-size: 1rem !important;
  }

  body.booking-page .booking-step-actions,
  body.booking-page .booking-actions {
    position: sticky;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    margin: 12px -2px -2px;
    padding: 10px 2px 2px;
    background: linear-gradient(180deg, rgba(255,255,255,0), #fff 22%);
  }

  body.booking-page .choice-card,
  body.booking-page .returning-option-card,
  body.booking-page .service-details-panel,
  body.booking-page .payment-placeholder,
  body.booking-page .review-summary-list > div {
    box-shadow: 0 7px 18px rgb(var(--sf-primary-rgb) / 0.06);
  }

  body.booking-page .choice-card {
    min-height: 54px;
  }

  body.booking-page .address-suggest {
    max-height: min(42vh, 320px);
    overflow: auto;
    border-radius: 14px;
  }

  body.booking-page .address-suggest-item {
    min-height: 50px;
  }
}

/* ── Signed-in Book: streamlined app-style flow ─────────────────────────────
   booking-flow.js adds body.booking-account-mode when a logged-in customer opens
   Book. Desktop keeps its full hero (no regression); phone/PWA gets a compact
   "Book your service" header instead of the long marketing hero. */
.booking-account-intro { display: none; }

@media (max-width: 760px) {
  body.booking-account-mode .booking-flow-hero,
  body.booking-account-mode .landing-final-cta {
    display: none !important;
  }

  body.booking-account-mode .booking-account-intro {
    display: block;
    margin: 2px 0 16px;
  }

  body.booking-account-mode .booking-account-intro h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--sf-primary-dark);
  }

  body.booking-account-mode .booking-account-intro p {
    margin: 6px 0 0;
    font-size: 0.95rem;
    color: #55706c;
  }

  /* The embedded in-account checkout (/account#customer-book-details) already
     has the dashboard "Complete your booking" heading — don't double it. */
  body.customer-account-page .booking-account-intro {
    display: none !important;
  }

  /* The Support page's "Customer profile lookup" card duplicates the Find tab's
     search — hide it in the app only to keep the mobile Support list clean. */
  .admin-support-panel .support-identity-card {
    display: none;
  }

  /* Support tickets are an accordion in the app: header stays, details collapse. */
  .support-message-card .request-details {
    overflow: hidden;
    transition: none;
  }
  .support-message-card.is-collapsed .request-details {
    display: none;
  }
  .support-message-header {
    cursor: pointer;
    align-items: flex-start;
  }
  /* Collapsed card must still be identifiable: show who + a message preview so the
     stack of headers isn't a wall of look-alikes. */
  .support-message-headline {
    min-width: 0;
    flex: 1 1 auto;
  }
  .support-message-headline h3 {
    margin: 2px 0;
  }
  .support-message-who {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #33514d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .support-message-preview {
    margin: 3px 0 0;
    font-size: 0.82rem;
    line-height: 1.35;
    color: #55706c;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .support-message-card:not(.is-collapsed) .support-message-preview {
    display: none;
  }
  .support-accordion-chevron {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 8px;
    border-right: 2px solid #55706c;
    border-bottom: 2px solid #55706c;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    flex: 0 0 auto;
  }
  .support-message-card.is-collapsed .support-accordion-chevron {
    transform: rotate(-45deg);
  }
}

/* Desktop keeps every ticket fully expanded and the chevron hidden — the accordion
   is a phone-only affordance. The header's who/preview lines are a collapsed-card
   summary, so they'd duplicate the always-visible detail body on desktop. */
@media (min-width: 761px) {
  .support-message-card .support-accordion-chevron {
    display: none;
  }
  .support-message-who,
  .support-message-preview {
    display: none;
  }
}

@media (max-width: 760px) {
  #promo-economics-preview {
    min-width: 0;
  }
  #promo-economics-preview .marketing-promo-accounting {
    overflow-x: auto;
  }
  #promo-economics-preview .marketing-promo-table {
    min-width: 520px;
  }
  #promo-economics-preview .marketing-promo-fb-controls label {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 640px) {
  body.track-page #tracking-result {
    gap: 14px !important;
  }

  body.track-page .track-request-card {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.track-page .track-dashboard-card > .track-request-details[open] {
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 14px 34px rgb(var(--sf-primary-rgb) / 0.08) !important;
    overflow: hidden;
  }

  body.track-page .track-dashboard-card .tk-sub-acc,
  body.track-page .track-dashboard-card .tk-card,
  body.track-page .track-dashboard-card .estimated-total-card {
    box-shadow: none !important;
  }
}

/* Admin bottom nav: same dimensions as Customer/Worker, admin-purple active tab. */
@media (max-width: 760px) {
  body.admin-portal-page .app-tabbar {
    min-height: calc(76px + env(safe-area-inset-bottom, 0px));
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 4px;
  }

  body.admin-portal-page .app-tabbar .app-tab {
    min-height: 60px;
    height: 60px;
    padding: 7px 4px;
    gap: 4px;
    border-radius: 12px;
    font-size: 0.66rem;
    line-height: 1.1;
  }

  body.admin-portal-page .app-tabbar .app-tab svg {
    width: 22px;
    height: 22px;
  }

  body.admin-portal-page .app-tabbar .app-tab.active,
  body.admin-portal-page .app-tabbar .app-tab.is-active {
    color: #fff;
    background: var(--sf-primary, #4b3f91);
    box-shadow: 0 8px 18px rgb(var(--sf-primary-rgb, 75 63 145) / 0.22);
  }
}

/* Installed Admin PWA: bottom nav is the page switcher, so remove the oversized
   PAGE / Dashboard dropdown row from the compact purple shell. */
@media (max-width: 760px) {
  html.sf-standalone.sf-compact body.admin-portal-page .portal-header.admin-top-nav .portal-section-toggle,
  html.sf-standalone.sf-compact body.admin-portal-page .portal-header.admin-top-nav .admin-section-toggle {
    display: none !important;
  }

  html.sf-standalone.sf-compact body.admin-portal-page .portal-header.admin-top-nav .admin-page-tabs {
    display: none !important;
  }

  html.sf-standalone.sf-compact body.admin-portal-page .portal-header.admin-top-nav {
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
  }
}