/* Jobs Command Center interaction and readability contract — 20260803qa918
   Keeps the approved production layout while making every overview destination
   explicit, sentence-cased, and readable without transformed text. */

#app .premium-app .jobs-command-page :is(
  .jobs-overview-card,
  .job-list-weather-title,
  .job-list-weather-metric,
  .job-list-weather-details,
  .jobs-production-board-v6 .job-card
) {
  font-family: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
  text-shadow: none !important;
  filter: none !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: subpixel-antialiased !important;
  -moz-osx-font-smoothing: auto !important;
}

/* The visible labels are already written in sentence case in the runtime.
   Do not inherit the old all-caps treatment from the compact KPI system. */
#app .premium-app .jobs-overview-card-copy,
#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: visible !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  text-transform: none !important;
  white-space: normal !important;
}

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

#app .premium-app .jobs-command-page .jobs-production-board-v6 .job-board :where(h3, strong, span, small, button, label, time) {
  font-family: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
  font-synthesis: none !important;
}

#app .premium-app .jobs-command-page .jobs-production-board-v6 :is(
  .job-card-customer strong,
  .job-card-service,
  .job-card-facts > div > strong
) {
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

#app .premium-app .jobs-overview-card {
  min-height: 78px !important;
}

#app .premium-app .jobs-overview-card:hover,
#app .premium-app .jobs-overview-card:focus-visible {
  transform: none !important;
}

/* Weather is one destination with five clear entry points: summary, three
   status counts, and the full-view action. */
#app .premium-app .jobs-overview-weather .job-list-weather-title {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 5px 6px !important;
  appearance: none !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
}

#app .premium-app .jobs-overview-weather .job-list-weather-title-copy {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

#app .premium-app .jobs-overview-weather .job-list-weather-title:is(:hover, :focus-visible) {
  border-color: #bd69ff !important;
  background: rgba(189, 105, 255, .08) !important;
  outline: none !important;
}

#app .premium-app .jobs-overview-weather .job-list-weather-metric {
  --weather-action-color: #bd69ff;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  appearance: none !important;
  border: 1px solid #31465a !important;
  border-radius: 8px !important;
  background: #07131e !important;
  color: var(--weather-action-color) !important;
  text-align: left !important;
  cursor: pointer !important;
}

#app .premium-app .jobs-overview-weather .job-list-weather-metric.risk-high {
  --weather-action-color: #ff6d6d;
}

#app .premium-app .jobs-overview-weather .job-list-weather-metric.risk-watch {
  --weather-action-color: #ffc23d;
}

#app .premium-app .jobs-overview-weather .job-list-weather-metric.risk-clear {
  --weather-action-color: #57dc79;
}

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

#app .premium-app .jobs-overview-weather .job-list-weather-metric > span {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

#app .premium-app .jobs-overview-weather .job-list-weather-metric:is(:hover, :focus-visible) {
  border-color: var(--weather-action-color) !important;
  background: color-mix(in srgb, var(--weather-action-color) 9%, #07131e) !important;
  outline: none !important;
}

#app .premium-app .jobs-overview-weather .job-list-weather-details {
  border-color: #72429b !important;
  color: #f3dcff !important;
  transform: none !important;
}

#app .premium-app .jobs-overview-weather .job-list-weather-details:is(:hover, :focus-visible) {
  border-color: #bd69ff !important;
  background: rgba(189, 105, 255, .11) !important;
  color: #ffffff !important;
  outline: none !important;
}

@media (min-width: 761px) {
  #app .premium-app .jobs-overview-card {
    min-height: 82px !important;
    padding: 10px 12px !important;
  }

  #app .premium-app .jobs-overview-card-copy > span {
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
  }

  #app .premium-app .jobs-overview-card-copy > strong {
    font-size: 22px !important;
    line-height: 25px !important;
    font-weight: 750 !important;
  }

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

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

  #app .premium-app .jobs-overview-weather {
    min-height: 82px !important;
  }

  #app .premium-app .jobs-overview-weather .job-list-weather-title strong {
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 750 !important;
  }

  #app .premium-app .jobs-overview-weather .job-list-weather-title small {
    font-size: 12.5px !important;
    line-height: 17px !important;
    font-weight: 500 !important;
  }

  #app .premium-app .jobs-overview-weather .job-list-weather-metric strong {
    font-size: 17px !important;
    line-height: 19px !important;
    font-weight: 750 !important;
  }

  #app .premium-app .jobs-overview-weather .job-list-weather-metric small {
    font-size: 11.5px !important;
    line-height: 15px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  #app .premium-app .jobs-overview-weather .job-list-weather-details {
    min-height: 42px !important;
    padding: 9px 13px !important;
    font-size: 12.5px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
  }

  #app .premium-app .jobs-production-board-scroll-v6 .job-card-top h3 {
    font-size: 19px !important;
    line-height: 23px !important;
    font-weight: 750 !important;
  }

  #app .premium-app .jobs-production-board-scroll-v6 .job-card-customer strong {
    font-size: 14.5px !important;
    line-height: 19px !important;
    font-weight: 700 !important;
  }

  #app .premium-app .jobs-production-board-scroll-v6 .job-card-service {
    font-size: 12.5px !important;
    line-height: 17px !important;
    font-weight: 650 !important;
  }

  #app .premium-app .jobs-production-board-scroll-v6 .job-card-facts > div {
    min-height: 38px !important;
  }

  #app .premium-app .jobs-production-board-scroll-v6 .job-card-facts > div > span {
    font-size: 13px !important;
    line-height: 17px !important;
    font-weight: 550 !important;
  }

  #app .premium-app .jobs-production-board-scroll-v6 .job-card-facts > div > strong {
    font-size: 13.5px !important;
    line-height: 18px !important;
    font-weight: 650 !important;
  }
}

/* A 1280px browser leaves about 1160px beside the desktop navigation. The
   legacy five-track row measured the viewport instead of that usable content
   width, so Weather Intelligence could force the entire Jobs workspace wider
   than its panel. Keep the four quick destinations together, then give weather
   its own full-width row until the workspace is genuinely wide enough. */
@media (min-width: 1181px) and (max-width: 1500px) {
  #app .premium-app :is(
    .jobs-command-page,
    .jobs-command-overview,
    .jobs-overview-card-grid,
    .jobs-overview-weather
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #app .premium-app .jobs-command-page
  .jobs-command-overview > .jobs-overview-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #app .premium-app .jobs-command-page
  .jobs-command-overview > .jobs-overview-card-grid > .jobs-overview-weather {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    height: auto !important;
  }

  #app .premium-app .jobs-overview-weather :is(
    .job-list-weather-title,
    .job-list-weather-metrics,
    .job-list-weather-details
  ) {
    min-width: 0 !important;
  }
}

@media (max-width: 760px) {
  #app .premium-app :is(
    .jobs-command-page,
    .jobs-command-overview,
    .jobs-overview-card-grid,
    .jobs-overview-weather
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #app .premium-app .jobs-overview-card-copy > span {
    font-size: 10.5px !important;
    line-height: 14px !important;
    font-weight: 700 !important;
  }

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

  #app .premium-app .jobs-overview-card-copy > small {
    font-size: 10.5px !important;
    line-height: 14px !important;
    font-weight: 600 !important;
  }

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

  #app .premium-app .jobs-overview-weather .job-list-weather-title {
    padding: 6px !important;
  }

  #app .premium-app .jobs-overview-weather .job-list-weather-title strong {
    font-size: 16px !important;
    line-height: 20px !important;
  }

  #app .premium-app .jobs-overview-weather .job-list-weather-title small {
    font-size: 12px !important;
    line-height: 17px !important;
  }

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

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

  #app .premium-app .jobs-overview-weather .job-list-weather-metric strong {
    font-size: 17px !important;
    line-height: 19px !important;
  }

  #app .premium-app .jobs-overview-weather .job-list-weather-metric small {
    font-size: 10.5px !important;
    line-height: 14px !important;
    white-space: normal !important;
  }

  #app .premium-app .jobs-overview-weather .job-list-weather-details {
    min-height: 46px !important;
    font-size: 13px !important;
    line-height: 17px !important;
    font-weight: 700 !important;
  }

  #app .premium-app .jobs-production-board-scroll-v6 .job-card-top h3 {
    font-size: 18.5px !important;
    line-height: 23px !important;
  }

  #app .premium-app .jobs-command-page .jobs-production-board-v6 .job-card-identity {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
  }

  #app .premium-app .jobs-command-page .jobs-production-board-v6 .job-card-identity-divider {
    display: none !important;
  }

  #app .premium-app .jobs-command-page .jobs-production-board-v6 :is(
    .job-card-customer strong,
    .job-card-service,
    .job-card-facts > div > strong
  ) {
    max-width: 100% !important;
  }

  #app .premium-app .jobs-production-board-scroll-v6 .job-card-customer strong {
    font-size: 14px !important;
    line-height: 18px !important;
  }

  #app .premium-app .jobs-production-board-scroll-v6 .job-card-service,
  #app .premium-app .jobs-production-board-scroll-v6 .job-card-facts > div > span,
  #app .premium-app .jobs-production-board-scroll-v6 .job-card-facts > div > strong {
    font-size: 12.5px !important;
    line-height: 17px !important;
  }
}