/*
 * Mobile/tablet interaction and containment guarantees.
 * Loaded after the Portal's feature stylesheets so these rules are the final
 * responsive contract rather than another competing component theme.
 */

/* These elements are visual atmosphere only. Keeping them pointer-inert also
   prevents their oversized decorative boxes from obscuring real controls. */
:where(.bg-emoji, .atmosphere, .sun, .sun-decoration) {
  pointer-events: none !important;
}

@media (max-width: 900px) {
  .qrc-mix-rates-shell .section {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 360px) {
  /* This must remain after the broader Admin tablet grid. At 200% text the
     three utility buttons need full rows rather than three squeezed cells. */
  .admin-portal-shell .top-header .header-right {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .fleet-portal-shell .fleet-dashboard-header,
  .fleet-portal-shell .fleet-dashboard-actions {
    align-items: stretch !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .fleet-portal-shell .fleet-dashboard-actions > .btn {
    justify-content: center;
    max-width: 100%;
    min-width: 0 !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
    width: 100%;
  }

  .sms-admin-shell > .header {
    background: #166534 !important;
  }

  .sms-admin-shell #sms-freshness {
    color: #fff !important;
  }

  .qr-card {
    background: #166534 !important;
  }

  .category-bar {
    background: #334155 !important;
    background-image: none !important;
  }

  .mobile-title {
    height: auto !important;
    max-width: 100%;
    min-width: 0;
    overflow: visible !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }

  html.mechanic-redesign-enabled .bottom-nav {
    position: static !important;
  }

  html.mechanic-redesign-enabled :where(.queue-compact-top, .queue-work-block-secondary) {
    height: auto !important;
    max-width: 100%;
    min-width: 0;
    overflow: visible !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }

  .profile-shell #userName {
    height: auto !important;
    max-width: 100%;
    min-width: 0;
    overflow: visible !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }
}

@media (min-width: 361px) and (max-width: 900px) {
  html.mechanic-redesign-enabled .header-title {
    height: auto !important;
    line-height: 1.2 !important;
    min-height: 1.2em;
    overflow: visible !important;
  }
}

@media (max-width: 900px) {
  .ll-fab-inner {
    align-items: stretch;
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
  }

  .ll-fab .right {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-left: 0 !important;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .ll-fab .right > * {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
    width: 100%;
  }
}

/* Compound narrow-screen + large-text hardening. These rules keep the
   320px layout usable when the browser's text size is raised to 200% without
   weakening the ordinary phone/tablet layouts. */
@media (max-width: 360px) {
  .admin-portal-shell .top-header .header-right {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-portal-shell .top-header .header-right :where(.btn, a, button),
  .fleet-portal-shell :where(.page-header, .page-actions, .header-actions) > :where(.btn, a, button) {
    max-width: 100%;
    min-width: 0 !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
    width: 100%;
  }

  #arcade-exit-hint {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }

  .results-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .results-grid :where(.result-item, .label, .value) {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #migrationBanner,
  .header-content,
  .header-left,
  .header-right,
  .filter-bar-content,
  .overall-progress,
  .truck-card-header {
    max-width: 100%;
    min-width: 0;
  }

  #migrationBanner,
  .header-content,
  .header-left,
  .header-right,
  .filter-bar-content,
  .overall-progress,
  .truck-card-header {
    flex-wrap: wrap !important;
  }

  .header-right .btn-secondary {
    background: #fff !important;
    border-color: #fff !important;
    color: #166534 !important;
  }

  .fleet-portal-shell :where(.page-header, .page-actions, .header-actions),
  .fleet-portal-shell :where(.page-header, .page-actions, .header-actions) > div {
    align-items: stretch !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .form-cards,
  .form-cards.compact {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100% !important;
  }

  .form-cards :where(.form-card, .form-name, .form-desc) {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .mode-bar {
    align-items: start !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    max-width: 100%;
    min-width: 0;
  }

  .mode-bar-left {
    grid-column: 1 / -1;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .mode-bar-left > div,
  .mode-bar :where(.mode-bar-dept, .mode-bar-label) {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }

  .mode-bar .mode-toggle {
    max-width: 100%;
    min-width: 0;
  }

  .mode-bar .mode-btn {
    min-width: 0;
    padding-inline: 8px !important;
    white-space: normal;
  }

  .mode-bar .text-size-btn {
    margin-left: 0;
  }

  /* At very large text sizes a fixed footer can cover the sticky mode bar
     and the active question. Keep every action in document flow instead. */
  .mode-bar ~ :where(#cardMode, .card-mode) .card-nav,
  #cardMode .card-nav {
    position: static !important;
    transform: none !important;
  }

  .header-badge-row {
    align-items: flex-start !important;
    flex-direction: column;
    max-width: 100%;
    min-width: 0;
  }

  .header-badge-row > div,
  .header-badge-row :where(.header-eyebrow, .header-title),
  .chapter-card,
  .chapter-body,
  .callout,
  .callout-body {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  html.mechanic-redesign-enabled .stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html.mechanic-redesign-enabled :where(.stat-box, .stat-label) {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }

  html.mechanic-redesign-enabled .action-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .profile-power-stats {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(.scope-chip, .period-badge) {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }

  .trend-window-toggle {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100%;
    width: 100%;
  }

  .trend-window-btn {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  :where(.team-header-controls, .team-action-bar) {
    align-items: stretch !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  :where(.team-header-controls, .team-action-bar) > *,
  :where(.team-header-controls, .team-action-bar) :where(button, a) {
    max-width: 100%;
    min-width: 0 !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
    width: 100%;
  }

  .department-toggle {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
    width: 100%;
  }

  .department-toggle .dept-btn {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .bottom-nav {
    align-items: stretch;
    height: auto;
    min-height: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  .bottom-nav-item {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 4px;
  }

  .bottom-nav-label {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;
    width: 100%;
  }

  .stepper-step {
    flex: 1 1 0;
    max-width: 33.333%;
    min-width: 0;
  }

  .stepper-label {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;
  }

  .voc-card-header {
    align-items: stretch !important;
    flex-wrap: wrap;
  }

  .voc-trend-range-toggle {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 100%;
    width: 100%;
  }

  .voc-trend-range-toggle .voc-range-btn {
    max-width: 100%;
    min-width: 0;
  }

  .stats-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .stats-bar :where(.stat-card, .stat-label, .stat-value) {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 900px) {
  .ll-output-head {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .ll-output-head .right {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-left: 0;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .ll-output-head .right > * {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    width: 100%;
  }
}

#sms-freshness {
  color: #475569 !important;
}

.qr-card {
  background-color: #166534;
}

.category-bar .cat-count {
  color: #fff !important;
  font-weight: 700;
  opacity: 1 !important;
}

/* Keyboard users can reach Office Hub sections before their scroll reveal has
   completed. Never leave the focused control inside a transparent ancestor. */
.office-hub-shell .section:focus-within {
  opacity: 1 !important;
  transform: none !important;
}

@media (hover: none), (pointer: coarse) {
  .fb-data-table th.fb-sortable {
    padding-block: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .office-hub-shell .section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Standalone tool pages share the final hardening layer even when their
   component styles are compiled inline. Keep fixed action bars and embedded
   tool controls inside the narrowest supported phone viewport. */
@media (max-width: 520px) {
  .ll-fab-inner {
    min-width: 0;
    padding-inline: 12px !important;
  }

  .ll-fab .summary {
    display: none !important;
  }

  .ll-fab .right {
    width: 100%;
    min-width: 0;
    margin-left: 0 !important;
  }

  .ll-fab .right .rc-button {
    min-width: 0;
    white-space: normal;
  }

  .ll-fab .right .rc-button.primary {
    flex: 1 1 auto;
  }

  .tool-frame-header {
    align-items: stretch !important;
    flex-direction: column;
    gap: 12px;
    padding-inline: 16px !important;
  }

  .tool-frame-title,
  .tool-frame-actions {
    width: 100%;
    min-width: 0;
  }

  .tool-frame-actions {
    flex-wrap: wrap;
  }

  .tool-frame-actions .frame-btn {
    flex: 1 1 88px;
    min-width: 0;
    padding-inline: 8px;
    white-space: normal;
  }
}

/* The Voice feature sheet loads after the base Portal stylesheet. A tablet in
   landscape still needs its scaled company and period controls stacked, so
   keep this cross-feature guarantee in the final hardening layer. */
@media (min-width: 901px) and (max-width: 1180px) {
  .voice-center-shell__controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .voice-center-shell__control-group,
  .voice-center-shell__status,
  .voice-center-shell__controls select,
  .voice-center-shell__controls .company-toggle-container {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .voice-center-shell__status {
    align-self: stretch;
    justify-content: flex-start;
  }
}

/* Keyboard focus must remain visually obvious regardless of which legacy
   component reset its native outline. */
:where(
  a[href],
  button,
  input:not([type="hidden"]),
  select,
  textarea,
  iframe,
  summary,
  [contenteditable="true"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 3px solid #075985 !important;
  outline-offset: 3px !important;
}

/* Focus moves into an iframe's browsing context before every engine exposes
   :focus-visible on the frame element. The frame boundary still needs a clear
   keyboard indicator. */
iframe:focus {
  outline: 3px solid #075985 !important;
  outline-offset: 3px !important;
}

:where(.estimate-preview-frame, .pdf-frame, .voc-embedded-page) {
  outline: 2px solid #075985;
  outline-offset: 2px;
}

/* Repeated legacy status treatments whose visual backgrounds come from a
   sibling/pseudo-element cannot be inferred reliably from computed background
   color alone. Keep their authored meaning with explicit accessible colors. */
.mode-btn.active:is(#btnCard, #btnList) {
  color: #ffffff !important;
}

.task-ownership-badge {
  color: #475569 !important;
}

.voc-pill,
#vocModePill {
  color: #166534 !important;
}

.voc-delta-chip.neutral {
  color: #475569 !important;
}

/* Stateful dashboards render several surfaces only after their feature data
   arrives. Explicit colors keep their status meaning intact even when a theme
   token or translucent background makes computed contrast ambiguous. */
.review-label,
.company-btn:not(.active),
.waccu-lb-rank {
  color: #475569 !important;
}

.company-btn.active,
#waccu-count-all,
.br-company-badge.gx,
.br-status-badge.optimal,
.rc-pill[data-tone="pos"],
#peoplePerformanceCenterView span[style*="color:var(--accent-green)"],
.rc-subview-btn--active {
  color: #166534 !important;
}

.br-company-badge.rlc {
  color: #155e75 !important;
}

.rc-company-badge--gx {
  background: #166534 !important;
  color: #ffffff !important;
}

.voc-range-btn.active {
  background: #4338ca !important;
  border-color: #4338ca !important;
  color: #ffffff !important;
}

.tv-preset-btn.active {
  color: #1f2937 !important;
}

html body button.btn.btn-secondary:focus,
html body button.btn.btn-secondary:focus-visible {
  outline: 3px solid #075985 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(7, 89, 133, 0.3) !important;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* High-contrast users must retain structure and an unmistakable focus ring.
   System colors allow Windows forced-colors mode to choose the actual palette
   instead of preserving a brand color that may disappear against Canvas. */
@media (prefers-contrast: more) {
  :where(
    button,
    input:not([type="hidden"]),
    select,
    textarea,
    summary,
    [role="button"],
    [role="tab"]
  ) {
    border-color: currentColor !important;
  }

  :where(
    a[href],
    button,
    input:not([type="hidden"]),
    select,
    textarea,
    iframe,
    summary,
    [contenteditable="true"],
    [tabindex]:not([tabindex="-1"])
  ):focus-visible {
    outline-width: 4px !important;
  }
}

@media (forced-colors: active) {
  :where(
    a[href],
    button,
    input:not([type="hidden"]),
    select,
    textarea,
    iframe,
    summary,
    [contenteditable="true"],
    [tabindex]:not([tabindex="-1"])
  ):focus,
  :where(
    a[href],
    button,
    input:not([type="hidden"]),
    select,
    textarea,
    iframe,
    summary,
    [contenteditable="true"],
    [tabindex]:not([tabindex="-1"])
  ):focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
  }

  :where(
    .badge,
    .chip,
    .pill,
    [class*="badge"],
    [class*="chip"],
    [class*="pill"]
  ) {
    border: 1px solid CanvasText !important;
  }
}

@media (max-width: 360px) {
  html.mechanic-redesign-enabled .header-right {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html.mechanic-redesign-enabled .header-status-cluster,
  html.mechanic-redesign-enabled .header-action-cluster {
    width: 100%;
    max-width: none !important;
    justify-content: space-between !important;
  }
}

/* Visually styled radio/checkbox pills keep the native control in the tab
   order. Project its focus indication onto the visible label hit area. */
label:has(input:is([type="checkbox"], [type="radio"]):focus-visible) {
  outline: 3px solid #075985 !important;
  outline-offset: 3px !important;
}

@media (max-width: 1180px) and (pointer: coarse) {
  /* Feedback remains reachable from Portal navigation. The floating duplicate
     competes with dense maps, legends, and tab bars on touch-size tablets. */
  .feedback-btn {
    display: none !important;
  }

  #chatWidget,
  .easter-egg {
    display: none !important;
  }

  /* A single touch contract covers feature-owned controls that otherwise
     inherit compact desktop heights from dozens of independent modules. */
  :where(
    button,
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    summary
  ) {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* iOS Safari zooms the page when an editable control is focused below
     16px. Keep the authored hierarchy when it is already larger while making
     every touch form safe for keyboard entry. */
  :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    [contenteditable="true"]
  ) {
    font-size: max(16px, 1rem) !important;
    scroll-margin-block: calc(96px + env(safe-area-inset-top, 0px))
      calc(96px + env(safe-area-inset-bottom, 0px));
  }

  button {
    min-width: 44px !important;
  }

  [data-yard-a11y-keyboard="true"] {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  :where(
    a.btn,
    a.entity-link,
    .guide-nav-list a,
    a.back,
    a.back-btn,
    a.back-to-lc,
    a.top-bar-back,
    a.header-back-link,
    a.footer-link,
    a.ctx-link,
    a.team-review-btn,
    a.reporting-home-link,
    a.reporting-card-link,
    a.h-back,
    a.buy-badge,
    a.toc-item,
    a.doc-btn,
    a[href="/learning/troubleshooting/"],
    .back-nav a,
    a[href="/learning/"]
  ) {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex;
    align-items: center;
  }

  :where(
    .breadcrumb a[href],
    a.breadcrumb-item,
    a.back-link,
    a.header-back,
    a[download],
    header a[href]
  ) {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex;
    align-items: center;
  }

  label:has(input[type="checkbox"], input[type="radio"]) {
    min-height: 44px !important;
    min-width: 44px !important;
    align-items: center !important;
  }

  .pnc-switch {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  :where(.reporting-card, .reporting-table-wrap) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .reporting-table-wrap {
    width: 100% !important;
    box-sizing: border-box;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #view-manuals table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .rules-container {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  tr[tabindex],
  tr[role="button"] {
    height: 44px;
  }

  /* The embedded WACCU view has the Portal sidebar removed from its usable
     width, so viewport-only breakpoints otherwise retain the desktop row. */
  #waccuPulseView .waccu-lb-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 8px;
    max-width: 100%;
  }

  #waccuPulseView :where(.waccu-lb-category, .waccu-lb-bar-wrap) {
    display: none;
  }

  #waccuPulseView .waccu-lb-name,
  #estimatesDashboardView .ed-estimator-chart-name {
    min-width: 0;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
  }

  #estimatesView .est-table-wrap {
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  :where(
    .person-action-btn,
    .action-btn,
    .btn.btn-sm,
    .view-toggle-btn,
    .ai-calls-center-tab,
    .ai-calls-company-tab,
    .ai-calls-outcome-tab,
    .waccu-view-btn,
    .waccu-race-mode-btn,
    .waccu-cv-cat-btn,
    .waccu-cv-code-preset-btn,
    .waccu-cv-range-btn,
    .waccu-cv-type-btn,
    .fb-tab,
    .m-btn,
    .chip,
    .notif-filter-tab,
    .est-tab,
    .rch-scope-pill,
    .sub-chip-btn,
    .rc-btn,
    .rc-btn-accent,
    .or-period-btn,
    .or-dept-tab,
    .rc-tab,
    .rc-segment,
    .rc-subview-btn,
    .rc-day-nav-btn,
    .rc-filter-btn,
    .mpg-seg-btn,
    .chat-btn-primary,
    .chatbot-co-btn,
    .yard-btn,
    .voc-button,
    .voc-filter-tab,
    .voc-select,
    .waccu-pill,
    .waccu-portal-link
  ) {
    min-height: 44px !important;
  }

  :where(
    .action-btn,
    .action-menu-btn,
    .btn.btn-sm,
    .view-toggle-btn,
    .m-btn,
    .ai-calls-outcome-tab,
    .rcs-toggle,
    .rc-day-nav-btn,
    .rc-segment,
    .waccu-cv-range-btn,
    .waccu-cv-type-btn,
    .waccu-cv-wl-clear,
    .chatbot-co-btn
  ) {
    min-width: 44px !important;
  }

  :where(button.modal-close, #drm-detailClose) {
    min-width: 44px !important;
  }

  .waccu-cv-wl-clear {
    min-height: 44px !important;
  }

  :where(
    #peopleSearchInput,
    #invItemSearch,
    #est-filterStatus,
    #est-filterEstimator,
    #est-filterDateFrom,
    #est-filterDateTo,
    #meetingPrepDatePicker,
    #meetingPrepType,
    #mpTitle,
    #mpWinsInput,
    #mpLossesInput,
    #mpCoachingInput,
    #mpActionInput,
    #mpNotes,
    #myDayDatePicker,
    #or-dateFrom,
    #or-dateTo,
    #or-companyFilter,
    #spTargetDate,
    #rdcHistoryYear,
    #rcsRecipientSearch,
    #rcDateRangeSelect,
    #chatbot-input,
    #sub-filterSearch,
    #sub-filterFormType,
    #sub-filterCompany,
    #sub-filterDepartment,
    #sub-filterDateFrom,
    #sub-filterDateTo,
    #sub-filterSort,
    #sub-filterPageSize,
    #wbPhotoFilter,
    #wbArcadeVolume,
    #waccu-cv-search,
    #fbSearchInput,
    #ai-setting-phone,
    #ai-setting-escalation,
    #ai-setting-mode,
    #ai-setting-voice,
    #ai-setting-hours-start,
    #ai-setting-hours-end,
    #ai-setting-max-concurrent,
    #ai-setting-max-duration,
    #vocCallsStartDate,
    #vocCallsEndDate,
    #vocCallsSearch,
    #vocLeaderboardCompanyFilter,
    #vocLeaderboardSortBy,
    #vocVolumeDaysSelect,
    #heatmapCategoryFilter,
    #heatmapCodeFilter
  ) {
    min-height: 44px !important;
  }

  :where(
    #dailyTargetsView,
    #lawnDeptView,
    #liquidSoilDeptView,
    #pestDeptView,
    #treeDeptView,
    #reportCenterSettingsView,
    #scheduleView,
    #rainDayCenterView,
    #whiteboardUtilityView,
    #whosoutView
  ) button {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  #focusBoardPinBtn {
    min-height: 44px !important;
  }

  #peoplePerformanceCenterView .reporting-insight-hero__actions .btn,
  #drainageRiskView .btn-refresh,
  #estimatesDashboardPanels .rc-filterbar button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .pc-back-link {
    display: inline-flex;
    min-height: 44px !important;
    align-items: center;
  }

  :where(#rainDayCenterView, #whiteboardUtilityView, #whosoutView) a[href] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  #inventoryView :where(.inv-item-cb, #invSelectAll) {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
  }

  :where(
    label:has(#wbArcadeToggle),
    label:has(#wbArcadeMute),
    label:has(#wbArcadeVolume),
    label:has(#wbMemoToggle)
  ) {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
  }

  /* Keep the visual toggle track compact while its button owns a 44px hit box. */
  .rcs-toggle {
    width: 44px !important;
    height: 44px !important;
    border-radius: 22px !important;
    background: transparent !important;
  }

  .rcs-toggle::before {
    content: '';
    position: absolute;
    inset: 12px 4px;
    border-radius: 10px;
    background: var(--slate-300, #cbd5e1);
  }

  .rcs-toggle[data-on="true"]::before {
    background: var(--accent-blue, #2563eb);
  }

  .rcs-toggle > span {
    top: 14px !important;
    left: 6px !important;
    z-index: 1;
  }

  .rcs-toggle[data-on="true"] > span {
    transform: translateX(16px);
  }
}

@media (max-width: 900px) {
  .ai-calls-outcome-bar {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .ai-calls-outcome-bar > * {
    flex: 0 0 auto;
  }

  #estimatesDashboardView .reporting-glance-cell strong,
  #estimatesDashboardView .ed-estimator-chart-name {
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
  }

  #inventoryView #invPOsTab .card-header p,
  #inventoryView #invPOsTab .card-header p span {
    min-width: 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  #submissionsView .sub-table-wrap,
  #estimatesView .est-table-wrap {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  #reportCenterSettingsView .rcs-tabs {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  #reportCenterSettingsView .rcs-digest-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #reportCenterSettingsContent {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  #reportCenterSettingsView .rcs-digest-layout :where(input, select) {
    min-height: 44px !important;
  }

  #reportCenterSettingsView .rcs-recipient-toolbar {
    align-items: stretch !important;
    flex-direction: column;
    gap: 12px;
  }

  #reportCenterSettingsView .rcs-recipient-toolbar > div:last-child {
    align-items: stretch !important;
    flex-direction: column;
  }

  #reportCenterSettingsView .rcs-recipient-toolbar input {
    width: 100% !important;
    box-sizing: border-box;
  }

  #reportCenterSettingsView .rcs-recipient-columns {
    display: none !important;
  }

  #reportCenterSettingsView .rcs-recipient-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px;
  }

  #reportCenterSettingsView .rcs-section-row > div {
    min-width: 0;
  }

  #reportCenterSettingsView .rcs-section-row {
    gap: 8px;
  }

  .reporting-insight-hero__summary {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
  }

  .rc-radar-list .row > :first-child,
  .rc-section-head > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #estimatesView .est-tabs {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  #rainDayCenterView .card-body,
  #seasonProjectionBody,
  #seasonProjectionBody > div {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  #seasonProjectionBody > div[style*="display:grid"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #rainDayCenterView table button {
    min-width: 44px !important;
  }

  #sa5ChatbotView button {
    min-width: 44px;
    min-height: 44px !important;
  }

  #submissionsView .sub-filter-actions .btn {
    min-height: 44px !important;
  }

  #submissionsView .sub-table tbody tr {
    height: 44px;
  }

  #submissionsView .entity-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  #teamsView .team-member-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 600px) {
  .reporting-content-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #view-dashboard > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .season-phase-row {
    grid-template-columns: minmax(0, 1fr) 44px !important;
  }

  .season-phase-row > * {
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .season-phase-row > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: 52px;
  }

  .season-phase-row > :nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .season-phase-row > :nth-child(3) {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .season-phase-row > :nth-child(4) {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .season-phase-row > :nth-child(5) {
    grid-column: 1 / -1;
    grid-row: 5;
  }

  .season-phase-row > :nth-child(6) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  #opsReportingView .or-filter-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  #opsReportingView .or-period-toggle {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
  }

  #opsReportingView .or-filter-bar > .or-label-muted {
    display: none;
  }

  #opsReportingView .or-filter-bar :where(input[type="date"], select) {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #opsReportingView #or-companyFilter,
  #opsReportingView .or-apply-btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .ai-calls-outcome-bar {
    flex-wrap: wrap;
    overflow: visible;
  }

  #estimatesDashboardPanels .rc-filterbar {
    flex-wrap: wrap;
    align-items: stretch;
    min-width: 0;
  }

  #estimatesDashboardPanels .rc-filterbar > .label {
    flex: 1 0 100%;
  }

  #estimatesDashboardPanels .rc-filterbar > .seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
  }

  #estimatesDashboardPanels .rc-filterbar > .grow {
    display: none;
  }

  #estimatesDashboardPanels .rc-filterbar > [id^="company-toggle-"] {
    width: 100%;
    min-width: 0;
  }

  #estimatesDashboardPanels .rc-filterbar > [id^="company-toggle-"] .company-btn {
    min-width: 0 !important;
    padding-inline: 5px !important;
    font-size: 11px;
    white-space: normal;
  }

  #estimatesDashboardPanels .rc-filterbar > div:last-child {
    margin-left: auto;
  }

  #estFunnelContent .est-funnel-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px 10px !important;
  }

  #estFunnelContent .est-funnel-stage {
    grid-column: 1;
    grid-row: 1;
  }

  #estFunnelContent .est-funnel-count {
    grid-column: 2;
    grid-row: 1;
  }

  #estFunnelContent .est-funnel-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  #estFunnelContent .est-funnel-drop {
    grid-column: 1 / -1;
    grid-row: 3;
    min-width: 0;
    text-align: left !important;
  }

  #estFunnelContent .est-funnel-summary {
    flex-wrap: wrap;
    gap: 8px !important;
  }

  #estFunnelContent :where(.est-source-row, .est-loss-row) {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px 10px !important;
  }

  #estFunnelContent :where(.est-source-row, .est-loss-row) > :nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  #truckLoadRoutesContent .truck-load-route-header,
  #truckLoadIssuesContent .truck-load-issue-header {
    display: none !important;
  }

  #truckLoadRoutesContent .truck-load-route-row,
  #truckLoadIssuesContent :where(.truck-load-issue-row, .truck-load-wash-row) {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 7px 10px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 0;
  }

  #truckLoadRoutesContent .truck-load-route-row > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  #truckLoadRoutesContent .truck-load-route-row > :nth-child(5) {
    grid-column: 2;
    grid-row: 1;
  }

  #truckLoadRoutesContent .truck-load-route-row > :nth-child(2),
  #truckLoadRoutesContent .truck-load-route-row > :nth-child(3),
  #truckLoadRoutesContent .truck-load-route-row > :nth-child(4) {
    grid-column: 1 / -1;
  }

  #truckLoadRoutesContent .truck-load-route-row > :nth-child(2) {
    grid-row: 2;
  }

  #truckLoadRoutesContent .truck-load-route-row > :nth-child(3) {
    grid-row: 3;
  }

  #truckLoadRoutesContent .truck-load-route-row > :nth-child(4) {
    grid-row: 4;
  }

  #truckLoadRoutesContent .truck-load-route-row > :nth-child(4),
  #truckLoadIssuesContent .truck-load-issue-row > :nth-child(3) {
    text-align: left !important;
  }

  #truckLoadIssuesContent .truck-load-issue-row > :nth-child(1),
  #truckLoadIssuesContent .truck-load-wash-row > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  #truckLoadIssuesContent .truck-load-issue-row > :nth-child(4),
  #truckLoadIssuesContent .truck-load-wash-row > :nth-child(3) {
    grid-column: 2;
    grid-row: 1;
  }

  #truckLoadIssuesContent .truck-load-issue-row > :nth-child(2),
  #truckLoadIssuesContent .truck-load-issue-row > :nth-child(3),
  #truckLoadIssuesContent .truck-load-wash-row > :nth-child(2) {
    grid-column: 1 / -1;
  }
}

/* Shared keyboard visibility for legacy pages whose local styles hide controls
   or use visually hidden native inputs behind a larger label target. */
.skip-link {
  transition: none !important;
}

.skip-link:not(:focus):not(:focus-visible) {
  top: 0 !important;
  transform: translateY(-150%) !important;
  pointer-events: none !important;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  transform: none !important;
  pointer-events: auto !important;
  transition: none !important;
}

label:has(input[type="checkbox"]:focus),
label:has(input[type="radio"]:focus),
label:has(input[type="checkbox"]:focus-visible),
label:has(input[type="radio"]:focus-visible) {
  outline: 3px solid #075985 !important;
  outline-offset: 3px !important;
}

@media (max-width: 768px) {
  #teamDashboardView .td-table thead {
    top: calc(60px + max(env(safe-area-inset-top, 0px), 20px)) !important;
  }

  #teamDashboardView :where(.td-table th, .td-table button, .td-table tr) {
    scroll-margin-block: 96px;
  }

  .admin-portal-shell .top-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  .admin-portal-shell .top-header .header-left {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr);
    width: 100%;
    align-items: center;
    gap: 8px !important;
  }

  .admin-portal-shell .top-header .breadcrumb {
    min-width: 0;
  }

  .admin-portal-shell .top-header .header-right {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 8px !important;
  }

  .admin-portal-shell .top-header .header-right .btn {
    width: 100%;
    min-width: 0 !important;
    justify-content: center;
    padding-inline: 6px !important;
    box-sizing: border-box;
  }

  /* Sticky content may pass underneath the persistent bottom navigation while
     scrolling. Keep these compact-only elements in normal document flow. */
  #routeCompletionView[data-subview="followup"] .rc-toolbar,
  #routeCompletionView[data-subview="notes"] .rc-toolbar,
  #routeCompletionView .rc-subview-shell,
  #routeCompletionView .rc-subview-bar,
  #estimatesDashboardView .ed-table th {
    position: static !important;
  }
}

@media (max-width: 600px) {
  #teamDashboardView .td-th-sticky {
    position: static !important;
  }

  :where(
    #dailyTargetsContent,
    #lawnDeptContent,
    #liquidSoilDeptContent,
    #pestDeptContent,
    #treeDeptContent
  ) .rc-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  :where(
    #dailyTargetsContent,
    #lawnDeptContent,
    #liquidSoilDeptContent,
    #pestDeptContent,
    #treeDeptContent
  ) .rc-row > * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .rc-section-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #reportCenterSettingsView .rcs-section-row {
    align-items: flex-start !important;
  }
}

/* Nested-state hardening ---------------------------------------------------
   The state audit reaches management views that are rendered after login and
   after a tab/view switch. These final rules keep those generated surfaces on
   the same responsive contract as the top-level Portal. */

/* A few legacy admin themes never defined --accent. Give the selected tab a
   deterministic accessible surface instead of inheriting a near-white one. */
.admin-tab-btn.active {
  background: #166534 !important;
  color: #ffffff !important;
}

@media (max-width: 900px) {
  /* Shared reporting period/company/export bar. Allow the controls to form
     additional rows rather than placing a 600+px toolbar outside the view. */
  :where(
    #dailyTargetsContent,
    #lawnDeptContent,
    #liquidSoilDeptContent,
    #pestDeptContent,
    #treeDeptContent,
    #estimatesDashboardPanels
  ) .rc-filterbar {
    align-items: stretch;
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
  }

  :where(
    #dailyTargetsContent,
    #lawnDeptContent,
    #liquidSoilDeptContent,
    #pestDeptContent,
    #treeDeptContent,
    #estimatesDashboardPanels
  ) .rc-filterbar > .seg {
    flex: 1 1 294px;
    max-width: 100%;
    min-width: 0;
  }

  :where(
    #dailyTargetsContent,
    #lawnDeptContent,
    #liquidSoilDeptContent,
    #pestDeptContent,
    #treeDeptContent,
    #estimatesDashboardPanels
  ) .rc-filterbar > [id^="company-toggle-"] {
    flex: 1 1 239px;
    max-width: 100%;
    min-width: 0;
  }

  :where(
    #dailyTargetsContent,
    #lawnDeptContent,
    #liquidSoilDeptContent,
    #pestDeptContent,
    #treeDeptContent,
    #estimatesDashboardPanels
  ) .rc-filterbar .company-toggle {
    max-width: 100%;
  }

  /* Inventory actions are intentionally a compact toolbar. The title and
     explanatory copy get their own row; search/filter/actions wrap below. */
  #inventoryView #invItemsTab .card-header {
    align-items: flex-start !important;
    flex-wrap: wrap;
    gap: 10px;
  }

  #inventoryView #invItemsTab .card-header > h3,
  #inventoryView #invItemsTab .card-header > p {
    flex: 1 1 240px;
    min-width: 0;
  }

  #inventoryView #invItemsTab .card-header > div:last-child {
    display: flex !important;
    flex: 1 1 100%;
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
  }

  #inventoryView #invItemsTab .card-header :where(input, select) {
    flex: 1 1 180px;
    max-width: 100%;
    min-width: 0;
    width: auto !important;
  }

  #inventoryView #invItemsTab .card-header .btn {
    flex: 0 1 auto;
    min-width: 44px !important;
    width: auto;
  }

  /* A late desktop redesign in timeoff.css otherwise wins over its earlier
     responsive rule. Reassert the PTO attention panel after every theme. */
  #ptoManagementView .pm-attn {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100%;
    min-width: 0;
    padding: 20px !important;
  }

  #ptoManagementView .pm-attn .lead {
    border-right: 0 !important;
    grid-column: 1 / -1;
    min-width: 0;
    padding: 0 0 16px !important;
  }

  #ptoManagementView .pm-attn .stat {
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    min-width: 0;
    padding: 16px 0 0 !important;
  }

  #ptoManagementView .pm-attn :where(h2, p, .val, .meta, .lbl, .eyebrow) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  #scheduleView,
  #scheduleView :where(.sch-grid, .sch-rail, .sch-detail, .sch-detail-body, .sch-info-card) {
    max-width: 100%;
    min-width: 0;
  }

  #scheduleView .sch-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }

  /* The archive's desktop list/reader split is not useful below tablet width. */
  #executiveArchiveContent > div[style*="grid-template-columns:320px"],
  #executiveArchiveContent > div[style*="grid-template-columns: 320px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #executiveArchiveContent :where(#archiveDigestList, #archiveDigestReader) {
    max-width: 100%;
    min-width: 0;
    position: static !important;
  }

  #reportCenterSettingsView,
  #reportCenterSettingsView * {
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  /* Both standalone management portals use a fixed sidebar plus a flexing
     main region. Explicit zero minimums stop dynamic cards from widening that
     region after a state switch. */
  :where(.admin-portal-shell, .fleet-portal-shell) :where(
    .app-container,
    .main-wrapper,
    .main-content,
    .content-container,
    .view-container.active
  ) {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }

  :where(.admin-portal-shell, .fleet-portal-shell) .main-content {
    padding: 12px !important;
  }

  .fleet-portal-shell .app-container {
    height: 100dvh !important;
    max-height: 100dvh;
    min-height: 100svh;
    width: 100%;
  }

  .fleet-portal-shell .main-content {
    min-height: 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }

  .fleet-portal-shell .fleet-dashboard-overview {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100%;
    width: 100%;
  }

  .fleet-portal-shell .fleet-dashboard-overview > *,
  .fleet-portal-shell .fleet-dashboard-metrics,
  .fleet-portal-shell .fleet-dashboard-metrics > * {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  :where(.admin-portal-shell, .fleet-portal-shell) .content-container {
    padding: 0 !important;
    width: 100%;
  }

  :where(.admin-portal-shell, .fleet-portal-shell) .view-container.active :where(
    .card,
    .card-header,
    .card-body,
    .page-header,
    .page-actions
  ) {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }

  /* Admin content is server-configured and several views author desktop-only
     inline grid tracks. One readable column is the stable phone contract. */
  .admin-portal-shell .view-container.active [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-portal-shell .view-container.active [style*="display:flex"],
  .admin-portal-shell .view-container.active [style*="display: flex"] {
    max-width: 100%;
    min-width: 0;
  }

  .admin-portal-shell .view-container.active :where(
    .integration-header,
    .integration-info,
    .integration-status,
    .integration-footer,
    .page-actions,
    .card-header
  ) {
    flex-wrap: wrap;
    gap: 10px;
    max-width: 100%;
    min-width: 0;
  }

  .admin-portal-shell .view-container.active :where(input, select, textarea) {
    max-width: 100%;
    min-width: 0;
  }

  .admin-portal-shell #view-chrome-extensions > div {
    max-width: 100% !important;
    padding: 12px !important;
  }

  .admin-portal-shell #view-chrome-extensions [style*="padding:24px"][style*="display:flex"] {
    flex-wrap: wrap;
    padding: 16px !important;
  }

  .admin-portal-shell #view-tv-admin [style*="minmax(320px"],
  .admin-portal-shell #view-tv-calibration [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-portal-shell #view-tv-calibration .cal-card {
    max-width: 100%;
    min-width: 0;
    padding: 16px !important;
  }

  .admin-portal-shell #view-tv-calibration .cal-slider {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  /* Fleet cards and action bars use the same constrained main region. */
  .fleet-portal-shell .view-container.active :where(
    .vehicles-grid,
    .equipment-grid,
    .campaigns-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .fleet-portal-shell .view-container.active :where(
    .card,
    .card-header,
    .card-body,
    .toolbar-left,
    .company-pills,
    .fleet-page-toolbar
  ) {
    max-width: 100%;
    min-width: 0;
  }

  .fleet-portal-shell .toolbar-left,
  .fleet-portal-shell .fleet-page-toolbar {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .fleet-portal-shell .company-pills {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .fleet-portal-shell .company-pill {
    min-width: 0;
    padding-inline: 6px !important;
    white-space: normal;
  }

  .fleet-portal-shell #view-scheduler,
  .fleet-portal-shell #view-scheduler > *,
  .fleet-portal-shell #view-scheduler [style*="display: grid"],
  .fleet-portal-shell #view-scheduler [style*="display:grid"] {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }

  .fleet-portal-shell #view-scheduler .week-grid,
  .fleet-portal-shell #view-scheduler [style*="grid-template-columns: repeat(7"],
  .fleet-portal-shell #view-scheduler [style*="grid-template-columns:repeat(7"] {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    width: 100%;
  }

  .fleet-portal-shell #view-scheduler > div[style*="grid-template-columns: 280px"],
  .fleet-portal-shell #view-scheduler > div[style*="grid-template-columns:280px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .fleet-portal-shell #view-scheduler :where(.calendar-cell, .day-number) {
    max-width: 100%;
    min-width: 0;
  }

  .fleet-portal-shell #view-scheduler .day-number {
    font-size: 11px !important;
    overflow: hidden;
    text-align: center;
  }

  .fleet-portal-shell #view-settings [style*="grid-template-columns"],
  .fleet-portal-shell #view-ai-insights [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .fleet-portal-shell #view-activity [style*="display:flex"],
  .fleet-portal-shell #view-activity [style*="display: flex"] {
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 600px) {
  .fleet-portal-shell :where(#view-vehicles, #view-equipment) > div:first-child > div:last-child {
    display: flex !important;
    flex: 1 1 100%;
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .fleet-portal-shell :where(#view-vehicles, #view-equipment) > div:first-child > div:last-child > * {
    flex: 0 1 auto;
    min-width: 0;
  }

  .fleet-portal-shell :where(.vehicle-card, .equipment-card) .card-body > div:first-child {
    flex-wrap: wrap;
    gap: 10px;
  }

  .fleet-portal-shell :where(.vehicle-card, .equipment-card) .card-body > div:first-child > * {
    max-width: 100%;
    min-width: 0;
  }

  .fleet-portal-shell :where(.vehicle-card, .equipment-card) .card-body {
    overflow-wrap: anywhere;
  }

  /* Month/week calendars need real calendar-width cells. Keep that width in a
     local scroller rather than squeezing labels or widening the whole page. */
  .fleet-portal-shell #view-scheduler .card-body:has(> #schedulerCalendar) {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .fleet-portal-shell #view-scheduler #schedulerCalendar {
    min-width: 560px;
  }

  :where(
    #dailyTargetsContent,
    #lawnDeptContent,
    #liquidSoilDeptContent,
    #pestDeptContent,
    #treeDeptContent,
    #estimatesDashboardPanels
  ) .rc-filterbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
  }

  :where(
    #dailyTargetsContent,
    #lawnDeptContent,
    #liquidSoilDeptContent,
    #pestDeptContent,
    #treeDeptContent,
    #estimatesDashboardPanels
  ) .rc-filterbar > :where(.label, .seg, [id^="company-toggle-"]) {
    grid-column: 1 / -1;
    width: 100%;
  }

  :where(
    #dailyTargetsContent,
    #lawnDeptContent,
    #liquidSoilDeptContent,
    #pestDeptContent,
    #treeDeptContent,
    #estimatesDashboardPanels
  ) .rc-filterbar > .grow {
    display: none;
  }

  :where(
    #dailyTargetsContent,
    #lawnDeptContent,
    #liquidSoilDeptContent,
    #pestDeptContent,
    #treeDeptContent,
    #estimatesDashboardPanels
  ) .rc-filterbar > div:last-child {
    grid-column: 2;
    justify-self: end;
  }

  :where(
    #dailyTargetsContent,
    #lawnDeptContent,
    #liquidSoilDeptContent,
    #pestDeptContent,
    #treeDeptContent
  ) .rc-card {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  :where(
    #dailyTargetsContent,
    #lawnDeptContent,
    #liquidSoilDeptContent,
    #pestDeptContent,
    #treeDeptContent
  ) [style*="grid-template-columns:repeat(auto-fill,minmax(320px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #reportCenterSettingsView .company-toggle {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 100%;
    width: 100%;
  }

  #reportCenterSettingsView .company-btn {
    font-size: 11px !important;
    min-width: 0 !important;
    padding-inline: 5px !important;
    white-space: normal;
  }

  #reportCenterSettingsView .rcs-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
    padding: 4px !important;
  }

  #reportCenterSettingsView .rcs-tab {
    align-items: center;
    justify-content: center;
    min-width: 0 !important;
    padding: 8px 6px !important;
    text-align: center;
    white-space: normal !important;
    width: 100%;
  }

  #reportCenterSettingsView .rcs-tab > span:last-child:not(:first-child) {
    display: none;
  }

  #reportCenterSettingsView .rcs-schedule-row {
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
  }

  #reportCenterSettingsView .rcs-schedule-row--days {
    align-items: stretch !important;
    flex-direction: column;
  }

  #reportCenterSettingsView .rcs-send-days {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 100%;
    width: 100%;
  }

  #reportCenterSettingsView .rcs-send-days button {
    min-width: 0 !important;
    padding-inline: 3px !important;
  }

  #adminView .admin-stats-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #adminView .admin-stats-row .stat-mini,
  #adminView .admin-stats-row .stat-mini-content,
  #adminView .people-grid,
  #adminView .person-card,
  #adminView .person-details,
  #adminView .person-actions {
    max-width: 100%;
    min-width: 0;
  }

  #adminView .people-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #adminView .admin-tabs {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    width: 100%;
  }

  #adminView .admin-tab-btn {
    flex: 0 0 auto;
  }

  #adminView :where(.person-header, .person-actions, .filter-bar) {
    flex-wrap: wrap;
  }

  #leadershipView .console-header {
    align-items: stretch;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
    min-width: 0;
    padding: 16px;
  }

  #leadershipView .console-header :where(.header-left, .header-center, .header-right) {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  #leadershipView .console-header .company-toggle {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 100%;
    width: 100%;
  }

  #leadershipView .console-header .company-btn {
    min-width: 0 !important;
    padding-inline: 5px !important;
    white-space: normal;
  }

  #leadershipView .console-header .header-right {
    justify-content: space-between;
  }

  #leadershipView .console-header .datetime {
    min-width: 0;
    text-align: left;
  }

  #leadershipView .console-header .datetime .time {
    font-size: 1rem;
  }

  #ptoManagementView .pm-attn {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #ptoManagementView .pm-attn .lead {
    grid-column: 1;
  }

  #scheduleView .to-page-head {
    align-items: stretch !important;
    flex-direction: column;
    max-width: 100%;
    min-width: 0;
  }

  #scheduleView .to-page-head .right {
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  #scheduleView .to-page-head .right > * {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* A seven-day month grid remains more legible at calendar width. It is an
     explicit local scroller, so the page itself never clips or pans sideways. */
  #scheduleView .to-cal {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  #scheduleView .to-cal :where(.to-cal-head, .to-cal-grid) {
    min-width: 630px;
  }

  #scheduleView :where(.sch-detail-head, .sch-legend) {
    flex-wrap: wrap;
  }
}

@media (max-width: 900px) {
  .qrc-mix-rates-shell .section {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 360px) {
  /* This must remain after the broader Admin tablet grid. At 200% text the
     three utility buttons need full rows rather than three squeezed cells. */
  .admin-portal-shell .top-header .header-right {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Solid local surfaces make the authored contrast unambiguous to browsers and
   accessibility engines that cannot resolve text over CSS gradients. */
#sms-freshness {
  background-color: #166534 !important;
  color: #fff !important;
}

.qr-card li {
  background-color: #166534;
}

.category-bar .cat-count {
  background-color: #334155;
}

@media (max-width: 360px) {
  .yard-user-guide-shell .mobile-top-bar {
    align-items: flex-start;
    height: auto !important;
    min-height: 56px;
    padding-block: 10px;
  }

  .yard-user-guide-shell .mobile-title {
    flex: 1 1 0;
    width: 0;
  }

  .yard-user-guide-shell .main {
    padding-top: 96px;
  }

  html.mechanic-redesign-enabled .action-buttons {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html.mechanic-redesign-enabled .action-btn-label {
    display: none !important;
  }

  html.mechanic-redesign-enabled .bottom-nav {
    bottom: 0 !important;
    box-sizing: border-box;
    left: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    position: fixed !important;
    right: 0 !important;
    width: 100% !important;
  }
}