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

@media (max-width: 760px) {
  :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, rgba(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;
  }

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

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

  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: 10px;
  }

  .hero-trust-row span {
    width: 100%;
  }

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

  /* 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%;
  }

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

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

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

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

  /* 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;
  }

  .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: 24px 18px;
    border-radius: 16px;
  }

  .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 rgba(13, 59, 59, 0.12);
    box-shadow: 0 -6px 24px rgba(6, 39, 39, 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, #0d3b3b);
    background: rgba(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; }

  /* 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 rgba(13, 59, 59, 0.12);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(6, 39, 39, 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 rgba(13, 59, 59, 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 rgba(13, 59, 59, 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; }
}

/* ─────────────────────────────────────────────────────────────────────────
   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; }
}

/* 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 rgba(13, 59, 59, 0.16);
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--sf-teal-dark, #0d3b3b);
  background: rgba(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) {
  .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, #0d3b3b) !important;
    box-shadow: 0 6px 18px rgba(13, 59, 59, 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;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   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, rgba(6, 47, 45, 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;
  }
}