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

/* 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 {
  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: 52px minmax(0, 1fr) 44px !important;
  }

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

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

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

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

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

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

  #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-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;
  }
}