/*
 * Jobs mobile workspace
 * Compact the phone overview and restore native sideways board navigation
 * without changing desktop cards, stage actions, or drag-and-drop behavior.
 */
@media (max-width: 760px) {
  #app .premium-app .jobs-overview-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(100px, auto) !important;
    gap: 10px !important;
  }

  #app .premium-app .jobs-overview-card {
    min-width: 0 !important;
    min-height: 100px !important;
    padding: 12px 10px !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  #app .premium-app .jobs-overview-card .jobs-kpi-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 7px !important;
  }

  #app .premium-app .jobs-overview-card-copy {
    min-width: 0 !important;
  }

  #app .premium-app .jobs-overview-card-copy > span,
  #app .premium-app .jobs-overview-card-copy > strong,
  #app .premium-app .jobs-overview-card-copy > small {
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  #app .premium-app .jobs-overview-card-copy > span {
    font-size: 9px !important;
    line-height: 11px !important;
  }

  #app .premium-app .jobs-overview-card-copy > strong {
    font-size: 18px !important;
    line-height: 20px !important;
  }

  #app .premium-app .jobs-action-card .jobs-overview-card-copy > strong {
    font-size: 11px !important;
    line-height: 14px !important;
  }

  #app .premium-app .jobs-overview-card-copy > small {
    font-size: 9px !important;
    line-height: 12px !important;
  }

  #app .premium-app .jobs-overview-weather {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 12px !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #app .premium-app .jobs-overview-weather .job-list-weather-title {
    min-width: 0 !important;
  }

  #app .premium-app .jobs-overview-weather .job-list-weather-title small {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  #app .premium-app .jobs-overview-weather .job-list-weather-metrics {
    grid-column: 1 !important;
    grid-row: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  #app .premium-app .jobs-overview-weather .job-list-weather-metrics > .job-list-weather-metric {
    min-width: 0 !important;
    min-height: 78px !important;
    padding: 8px 4px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 4px !important;
    text-align: center !important;
  }

  #app .premium-app .jobs-overview-weather .job-list-weather-metrics > .job-list-weather-metric > svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
  }

  #app .premium-app .jobs-overview-weather .job-list-weather-metrics span {
    justify-items: center !important;
  }

  #app .premium-app .jobs-overview-weather .job-list-weather-metrics small {
    font-size: 8.5px !important;
    line-height: 11px !important;
    text-align: center !important;
    white-space: normal !important;
  }

  #app .premium-app .jobs-overview-weather .job-list-weather-details {
    width: 100% !important;
    min-height: 42px !important;
  }

  #app .premium-app .jobs-view-bar-v6 .job-view-tabs {
    touch-action: pan-x !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
  }

  #app .premium-app .jobs-production-board-scroll-v6 {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: auto !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x proximity !important;
  }

  #app .premium-app .jobs-production-board-scroll-v6 .job-board {
    width: max-content !important;
    min-width: max-content !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-columns: repeat(4, minmax(300px, 82vw)) !important;
    overflow: visible !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior-y: auto !important;
  }

  #app .premium-app .jobs-production-board-scroll-v6 .job-column {
    min-width: 300px !important;
    height: auto !important;
    max-height: none !important;
    scroll-snap-align: start !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior-y: auto !important;
  }

  #app .premium-app .jobs-production-board-scroll-v6 .job-column-body {
    height: auto !important;
    max-height: none !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    overscroll-behavior-y: auto !important;
  }

  #app .premium-app .jobs-production-board-scroll-v6 .job-column-body,
  #app .premium-app .jobs-production-board-scroll-v6 .job-column-empty-v6,
  #app .premium-app .jobs-production-board-scroll-v6 .job-card {
    touch-action: pan-x pan-y !important;
    overscroll-behavior-y: auto !important;
  }

  #app .premium-app .jobs-production-board-scroll-v6 .job-card {
    -webkit-user-drag: none !important;
  }

  #app .premium-app .jobs-production-board-scroll-v6 .job-card :is(button, a, summary) {
    touch-action: pan-x pan-y !important;
  }

  #app .premium-app .jobs-production-board-scroll-v6::-webkit-scrollbar {
    display: block !important;
    height: 12px !important;
  }
}

/* iPad landscape has a desktop-width viewport but a board that is narrower
   than its four columns. Give that middle range the same deliberate native
   horizontal pan contract as phones, without changing the desktop layout. */
@media (min-width: 761px) and (max-width: 1320px) {
  #app .premium-app .jobs-production-board-scroll-v6 {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: auto !important;
    scroll-snap-type: x proximity !important;
  }

  #app .premium-app .jobs-production-board-scroll-v6 .job-board {
    width: max-content !important;
    min-width: max-content !important;
    grid-template-columns: repeat(4, minmax(270px, 300px)) !important;
    touch-action: pan-x pan-y !important;
  }

  #app .premium-app .jobs-production-board-scroll-v6 .job-column {
    min-width: 270px !important;
    scroll-snap-align: start !important;
    touch-action: pan-x pan-y !important;
  }

  #app .premium-app .jobs-production-board-scroll-v6 :is(.job-column-body, .job-column-empty-v6, .job-card) {
    touch-action: pan-x pan-y !important;
    overscroll-behavior-y: auto !important;
  }
}

/* A production board is a free sideways workspace, not a slide deck.  Native
   horizontal panning must remain reversible at either edge on touch devices. */
@media (max-width: 1320px) {
  #app .premium-app .jobs-production-board-scroll-v6 {
    overscroll-behavior-x: auto !important;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
  }

  #app .premium-app .jobs-production-board-scroll-v6 .job-column {
    scroll-snap-align: none !important;
  }
}