/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
* {
  box-sizing: border-box;
}

html {
  color: #172033;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.4;
}

body {
  background: #f5f7fb;
  margin: 0;
}

a {
  color: inherit;
}

.app-shell__header {
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid #dde3ee;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  min-height: 64px;
  padding: 0.85rem clamp(1rem, 3vw, 2rem);
  position: sticky;
  top: 0;
  z-index: 1200;
}

.brand {
  color: #172033;
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 760;
  text-decoration: none;
}

.header-actions {
  align-items: center;
  display: flex;
  gap: 1.1rem;
  justify-content: flex-end;
}

.top-nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.top-nav form {
  margin: 0;
}

.account-actions {
  border-left: 1px solid #d5dae3;
  padding-left: 1.1rem;
}

.account-actions form {
  margin: 0;
}

.module-cta {
  box-shadow: 0 8px 18px rgba(21, 94, 239, 0.18);
  white-space: nowrap;
}

.module-cta.is-active {
  background: #0f46c9;
  border-color: #0f46c9;
  color: #ffffff;
}

.top-nav a,
.button,
.tab {
  align-items: center;
  background: #ffffff;
  border: 1px solid #cfd8e6;
  border-radius: 6px;
  color: #344054;
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 650;
  min-height: 2.15rem;
  padding: 0.45rem 0.7rem;
  text-decoration: none;
}

.button {
  cursor: pointer;
}

.top-nav a.is-active,
.button.primary,
.tab.is-active {
  background: #155eef;
  border-color: #155eef;
  color: #ffffff;
}

.nav-button {
  cursor: pointer;
}

.logout-button {
  color: #667085;
}

.app-shell {
  margin: 0 auto;
  max-width: 1900px;
  padding: 1.25rem clamp(1rem, 3vw, 2rem) 2rem;
}

.flash {
  background: #ecfdf3;
  border-bottom: 1px solid #abefc6;
  color: #067647;
  padding: 0.7rem clamp(1rem, 3vw, 2rem);
}

.flash-alert,
.form-error {
  background: #fef3f2;
  color: #b42318;
}

.toast-stack {
  bottom: 1.25rem;
  display: grid;
  gap: 0.75rem;
  max-width: min(30rem, calc(100vw - 2rem));
  pointer-events: none;
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  z-index: 50;
}

.toast {
  align-items: start;
  background: #ffffff;
  border: 1px solid #fedf89;
  border-left: 4px solid #f79009;
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.18);
  color: #172033;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.85rem 0.9rem;
  pointer-events: auto;
}

.toast-title {
  font-size: 0.9rem;
  font-weight: 760;
  margin-bottom: 0.2rem;
}

.toast-message {
  color: #475467;
  font-size: 0.85rem;
  line-height: 1.4;
}

.toast-dismiss {
  background: transparent;
  border: 0;
  color: #155eef;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.1rem 0;
}

.page-header {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.page-title {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0;
}

.page-subtitle {
  color: #667085;
  margin: 0.3rem 0 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.confirmation-modal {
  background: transparent;
  border: 0;
  max-width: min(32rem, calc(100vw - 2rem));
  padding: 0;
  width: 100%;
}

.confirmation-modal::backdrop {
  background: rgba(23, 32, 51, 0.42);
}

.confirmation-modal-card {
  background: #ffffff;
  border: 1px solid #dde3ee;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(16, 24, 40, 0.24);
  overflow: hidden;
}

.confirmation-modal-header {
  align-items: center;
  border-bottom: 1px solid #e5eaf2;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.9rem 1rem;
}

.confirmation-modal-header h2 {
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
}

.confirmation-modal-close {
  align-items: center;
  background: transparent;
  border: 0;
  color: #667085;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 1.35rem;
  height: 2rem;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 2rem;
}

.confirmation-modal-body {
  color: #475467;
  display: grid;
  font-size: 0.9rem;
  gap: 0.65rem;
  padding: 1rem;
}

.confirmation-modal-body p {
  margin: 0;
}

.confirmation-modal-actions {
  align-items: center;
  background: #f8fafc;
  border-top: 1px solid #e5eaf2;
  display: flex;
  gap: 0.55rem;
  justify-content: flex-end;
  padding: 0.85rem 1rem;
}

.confirmation-modal-actions form {
  margin: 0;
}

.dashboard-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.dashboard-grid + .dashboard-grid {
  margin-top: 1rem;
}

.calculation-page-header .page-subtitle {
  max-width: 54rem;
}

.calculation-toolbar {
  margin-bottom: 1rem;
}

.calculation-filter-form {
  align-items: end;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(18rem, 1fr) minmax(13rem, 0.32fr) auto;
}

.calculation-filter-form label {
  color: #344054;
  display: block;
  font-size: 0.78rem;
  font-weight: 720;
  margin-bottom: 0.25rem;
}

.calculation-filter-actions {
  display: flex;
  gap: 0.45rem;
}

.calculation-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calculation-summary-card {
  color: inherit;
  display: grid;
  gap: 0.25rem;
  min-height: 8.5rem;
  text-decoration: none;
}

.calculation-summary-card:hover,
.calculation-summary-card:focus {
  border-color: #9db7ff;
  outline: 2px solid #dbe6ff;
  outline-offset: 1px;
}

.calculation-summary-copy {
  color: #667085;
  font-size: 0.88rem;
  line-height: 1.35;
}

.calculation-module-list {
  display: grid;
  gap: 1.25rem;
  margin-top: 1rem;
}

.calculation-module {
  min-width: 0;
}

.calculation-module-header {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.calculation-module-header p {
  color: #667085;
  margin: 0.25rem 0 0;
  max-width: 62rem;
}

.calculation-module-title {
  font-size: 1.35rem;
  line-height: 1.15;
  margin: 0;
}

.calculation-module-count {
  background: #edf2ff;
  border: 1px solid #cbd8ff;
  border-radius: 999px;
  color: #155eef;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 760;
  padding: 0.25rem 0.55rem;
}

.calculation-tab-group + .calculation-tab-group {
  margin-top: 1rem;
}

.calculation-tab-title {
  color: #344054;
  font-size: 0.95rem;
  letter-spacing: 0;
  margin: 0 0 0.55rem;
}

.calculation-card-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
}

.calculation-card {
  background: #ffffff;
  border: 1px solid #dde3ee;
  border-radius: 8px;
  display: grid;
  gap: 0.65rem;
  padding: 0.95rem;
}

.calculation-card-header {
  align-items: start;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.calculation-card-header h4 {
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
}

.calculation-card-header span {
  color: #667085;
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: 720;
}

.calculation-definition {
  color: #475467;
  margin: 0;
}

.calculation-detail-list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
}

.calculation-detail-list div {
  display: grid;
  gap: 0.15rem;
}

.calculation-detail-list dt {
  color: #667085;
  font-size: 0.75rem;
  font-weight: 760;
  text-transform: uppercase;
}

.calculation-detail-list dd {
  color: #172033;
  margin: 0;
}

.calculation-formula {
  background: #f8fafc;
  border: 1px solid #e5eaf2;
  border-radius: 6px;
  font-weight: 700;
  padding: 0.45rem 0.55rem;
}

.calculation-detail-list ul {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding-left: 1.1rem;
}

.metric-card,
.panel,
.filter-panel {
  background: #ffffff;
  border: 1px solid #dde3ee;
  border-radius: 8px;
  min-width: 0;
}

.metric-card {
  padding: 0.9rem;
}

.metric-label {
  color: #667085;
  font-size: 0.82rem;
  font-weight: 650;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-label-row {
  align-items: center;
  display: flex;
  gap: 0.35rem;
  min-width: 0;
}

.metric-help {
  align-items: center;
  background: #eef3fb;
  border: 1px solid #cfd8e6;
  border-radius: 999px;
  color: #667085;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 760;
  height: 1rem;
  justify-content: center;
  line-height: 1;
  cursor: help;
  position: relative;
  width: 1rem;
}

.metric-help[data-tooltip]::after {
  background: #172033;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.18);
  color: #ffffff;
  content: attr(data-tooltip);
  display: none;
  font-size: 0.82rem;
  font-weight: 650;
  left: 0;
  line-height: 1.35;
  max-width: min(20rem, calc(100vw - 3rem));
  min-width: min(15rem, calc(100vw - 3rem));
  opacity: 0;
  padding: 0.55rem 0.65rem;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 0.45rem);
  transform: translateY(-0.15rem);
  transition: opacity 140ms ease, transform 140ms ease;
  visibility: hidden;
  z-index: 2200;
}

.metric-help[data-tooltip]:hover::after,
.metric-help[data-tooltip]:focus::after {
  display: block;
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

.metric-value {
  font-size: 1.55rem;
  font-weight: 760;
  margin-top: 0.25rem;
}

.metric-value.xl {
  font-size: 2.55rem;
  letter-spacing: 0;
  line-height: 1.05;
  white-space: nowrap;
}

.section-title {
  color: #172033;
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.2;
  margin: 0 0 0.65rem;
}

.insight-card-section {
  margin-bottom: 1rem;
}

.chart-panel + .insight-card-section {
  margin-top: 1.5rem;
}

.insight-card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.insight-card {
  background: #ffffff;
  border: 1px solid #dde3ee;
  border-radius: 8px;
  min-width: 0;
  padding: 0.9rem;
  position: relative;
}

.insight-card:focus {
  outline: 2px solid #bfd0ff;
  outline-offset: 2px;
}

.insight-card-header {
  align-items: center;
  display: flex;
  gap: 0.45rem;
  justify-content: space-between;
  min-width: 0;
}

.insight-label {
  color: #667085;
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.insight-help {
  align-items: center;
  background: #eef2f7;
  border-radius: 999px;
  color: #475467;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 800;
  height: 1.25rem;
  justify-content: center;
  width: 1.25rem;
}

.insight-value {
  color: #172033;
  font-size: 1.45rem;
  font-weight: 780;
  line-height: 1.1;
  margin-top: 0.35rem;
  overflow-wrap: anywhere;
}

.insight-detail {
  color: #667085;
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.35;
  margin-top: 0.35rem;
}

.insight-tooltip {
  background: #172033;
  border-radius: 6px;
  bottom: calc(100% - 0.35rem);
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.18);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 650;
  left: 0.9rem;
  line-height: 1.35;
  max-width: min(18rem, calc(100vw - 3rem));
  opacity: 0;
  padding: 0.55rem 0.65rem;
  pointer-events: none;
  position: absolute;
  transform: translateY(0.35rem);
  transition: opacity 140ms ease, transform 140ms ease;
  visibility: hidden;
  z-index: 30;
}

.insight-card:hover .insight-tooltip,
.insight-card:focus .insight-tooltip,
.insight-card:focus-within .insight-tooltip {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.job-mix-card-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.job-mix-card {
  background: #ffffff;
  border: 1px solid #dde3ee;
  border-radius: 8px;
  min-width: 0;
  padding: 0.85rem;
}

.job-mix-card-header {
  align-items: start;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  min-width: 0;
}

.job-mix-card h3 {
  color: #172033;
  font-size: 0.95rem;
  font-weight: 760;
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}

.job-mix-total {
  color: #172033;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.job-mix-total span {
  display: block;
  font-size: 1.15rem;
  font-weight: 780;
  line-height: 1;
}

.job-mix-total small {
  color: #667085;
  display: block;
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.02em;
  margin-top: 0.15rem;
  text-transform: uppercase;
}

.job-mix-bar {
  background: #eef2f7;
  border-radius: 999px;
  display: flex;
  height: 0.55rem;
  margin: 0.75rem 0 0.65rem;
  overflow: hidden;
  width: 100%;
}

.job-mix-bar span {
  background: var(--job-mix-color);
  flex: 0 0 var(--job-mix-share);
  min-width: 0.2rem;
}

.job-mix-list {
  display: grid;
  gap: 0.32rem;
  margin: 0;
}

.job-mix-row {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.job-mix-row dt {
  align-items: center;
  color: #475467;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 700;
  gap: 0.4rem;
  min-width: 0;
}

.job-mix-row dd {
  color: #172033;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.job-mix-row dd span {
  color: #667085;
  font-weight: 700;
  margin-left: 0.25rem;
}

.job-mix-dot {
  background: var(--job-mix-color);
  border-radius: 999px;
  flex: 0 0 auto;
  height: 0.55rem;
  width: 0.55rem;
}

.panel {
  margin-top: 1rem;
  overflow: hidden;
}

.panel.has-title-tooltip {
  overflow: visible;
}

.panel-header {
  align-items: center;
  border-bottom: 1px solid #e5eaf2;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.8rem 0.95rem;
}

.panel-title-row {
  align-items: center;
  display: flex;
  gap: 0.45rem;
  min-width: 0;
}

.panel-title {
  font-size: 1rem;
  font-weight: 720;
  margin: 0;
}

.panel-body {
  padding: 0.95rem;
}

.report-layout {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: 340px 1fr;
  transition: grid-template-columns 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.report-layout:has(.filter-panel.is-collapsed) {
  grid-template-columns: 64px 1fr;
}

.report-content {
  container-type: inline-size;
  max-width: 100%;
  min-width: 0;
}

turbo-frame#route_results {
  display: block;
  max-width: 100%;
  min-width: 0;
}

.filter-panel {
  background: #eef1f7;
  border-color: #eef1f7;
  max-height: calc(100vh - 100px);
  overflow: hidden;
  padding: 0.9rem;
  position: sticky;
  top: 84px;
  transition:
    padding 260ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.filter-panel.is-collapsed {
  padding: 0.55rem;
}

.filter-summary {
  align-items: center;
  background: transparent;
  border: 0;
  color: #344054;
  cursor: pointer;
  display: flex;
  font-size: 0.88rem;
  font-weight: 760;
  gap: 0.55rem;
  justify-content: space-between;
  list-style: none;
  margin-bottom: 0.75rem;
  padding: 0;
  width: 100%;
}

.filter-panel.is-collapsed .filter-summary {
  justify-content: center;
  margin-bottom: 0;
}

.filter-label {
  max-width: 12rem;
  opacity: 1;
  overflow: hidden;
  transform: translateX(0);
  transition:
    max-width 240ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 160ms ease,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.filter-panel.is-collapsed .filter-label {
  max-width: 0;
  opacity: 0;
  transform: translateX(-0.4rem);
}

.filter-chevron {
  align-items: center;
  background: #ffffff;
  border: 1px solid #cfd8e6;
  border-radius: 6px;
  display: inline-flex;
  flex: 0 0 auto;
  height: 2rem;
  justify-content: center;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  width: 2rem;
}

.filter-chevron::before {
  border-right: 2px solid #344054;
  border-top: 2px solid #344054;
  content: "";
  height: 0.45rem;
  transform: rotate(-135deg);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  width: 0.45rem;
}

.filter-panel.is-collapsed .filter-chevron::before {
  transform: rotate(45deg);
}

.filter-content {
  max-height: calc(100vh - 10.75rem);
  opacity: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.15rem;
  scrollbar-color: rgba(102, 112, 133, 0.38) transparent;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
  transform: translateX(0);
  transition:
    max-height 340ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 180ms ease,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.filter-content::-webkit-scrollbar {
  width: 0.38rem;
}

.filter-content::-webkit-scrollbar-track {
  background: transparent;
}

.filter-content::-webkit-scrollbar-thumb {
  background: rgba(102, 112, 133, 0.34);
  border-radius: 999px;
}

.filter-content:hover::-webkit-scrollbar-thumb {
  background: rgba(102, 112, 133, 0.52);
}

.filter-panel.is-collapsed .filter-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-0.65rem);
}

.filter-content form {
  display: grid;
  gap: 0.78rem;
}

.filter-group {
  display: grid;
  gap: 0.42rem;
}

.filter-heading {
  color: #2d3140;
  font-size: 0.9rem;
  font-weight: 650;
}

.date-shortcuts {
  border: 1px solid #c8ced8;
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  width: 100%;
}

.date-shortcut,
.date-shortcut-placeholder {
  align-items: center;
  background: transparent;
  border: 0;
  display: inline-flex;
  min-height: 2.15rem;
  position: relative;
}

.date-shortcut {
  color: #2d3140;
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  justify-content: center;
  padding: 0.35rem;
  text-decoration: none;
}

.date-shortcut-placeholder {
  pointer-events: none;
}

.date-shortcut:not(:nth-child(3n + 1)),
.date-shortcut-placeholder:not(:nth-child(3n + 1)) {
  border-left: 1px solid #c8ced8;
}

.date-shortcut:nth-child(n + 4),
.date-shortcut-placeholder:nth-child(n + 4) {
  border-top: 1px solid #c8ced8;
}

.date-shortcut.is-active {
  background: #dfe7ff;
  color: #2563eb;
  z-index: 1;
}

.date-shortcut.is-active::after {
  border: 2px solid #2563eb;
  content: "";
  inset: -1px;
  pointer-events: none;
  position: absolute;
}

.date-shortcut:first-child.is-active::after {
  border-top-left-radius: 10px;
}

.date-shortcut:nth-child(3).is-active::after {
  border-top-right-radius: 10px;
}

.date-shortcut:nth-child(4).is-active::after {
  border-bottom-left-radius: 10px;
}

.date-shortcut:last-child.is-active::after {
  border-bottom-right-radius: 10px;
}

.date-range-control {
  align-items: center;
  background: #ffffff;
  border-radius: 8px;
  display: grid;
  column-gap: 0.25rem;
  grid-template-columns: minmax(0, 7.8rem) 0.8rem minmax(0, 7.8rem);
  justify-content: start;
  min-height: 2.8rem;
  padding: 0.45rem 0.65rem;
}

.date-range-input {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #2d3140;
  font-size: 0.76rem;
  min-width: 0;
  min-height: 2rem;
  padding: 0;
  width: 100%;
}

.date-range-input:focus {
  outline: 2px solid #bfd0ff;
  outline-offset: 2px;
}

.date-range-separator {
  color: #667085;
  font-weight: 700;
  justify-self: center;
  text-align: center;
}

.tag-select {
  background: #ffffff;
  border: 1px solid transparent;
  border-radius: 8px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.tag-select-summary {
  align-items: start;
  cursor: pointer;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: minmax(0, 1fr) auto;
  list-style: none;
  min-height: 2.9rem;
  min-width: 0;
  padding: 0.55rem 0.65rem;
}

.tag-select:has(.selected-tags .filter-tag.overflow) .tag-select-summary {
  align-items: start;
}

.tag-select[open],
.tag-select:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px #2563eb;
}

.tag-select-summary::-webkit-details-marker {
  display: none;
}

.tag-select-value {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
  overflow: visible;
}

.selected-tags {
  display: contents;
}

.selected-tags .filter-tag {
  flex: 0 1 auto;
  max-width: 100%;
}

.selected-tags .filter-tag.overflow {
  flex: 0 0 auto;
  max-width: none;
}

.filter-tag {
  align-items: center;
  background: #eef2f7;
  border: 0;
  border-radius: 6px;
  color: #344054;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  gap: 0.35rem;
  line-height: 1;
  max-width: 100%;
  min-width: 0;
  min-height: 1.8rem;
  padding: 0.35rem 0.45rem;
  text-decoration: none;
  width: auto;
}

.filter-tag.is-selected {
  background: #2563eb;
  color: #ffffff;
}

.filter-tag span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-tag.overflow {
  background: #344054;
  color: #ffffff;
}

.tag-placeholder {
  color: #667085;
  font-weight: 650;
}

.tag-search {
  appearance: none;
  background: transparent;
  border: 0;
  color: #2d3140;
  flex: 1 1 6.5rem;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.2;
  min-height: 1.8rem;
  min-width: 5.5rem;
  padding: 0.2rem 0;
  width: auto;
}

.tag-search.has-selection:not(.has-query) {
  flex-basis: 0.9rem;
  min-width: 0.9rem;
}

.tag-select-value:focus-within .tag-search.has-selection:not(.has-query) {
  flex-basis: 1.4rem;
  min-width: 1.4rem;
}

.tag-search:focus {
  outline: none;
}

.tag-search::placeholder {
  color: #8a90a0;
  font-weight: 650;
}

.tag-search::-webkit-search-cancel-button {
  display: none;
}

.tag-remove {
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
}

.tag-select-controls {
  align-items: center;
  align-self: start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.6rem;
  justify-self: end;
  margin-top: 0.25rem;
  min-width: max-content;
}

.tag-clear {
  align-items: center;
  background: #8b94a3;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 750;
  justify-content: center;
  line-height: 1;
  min-height: 1.25rem;
  min-width: 1.25rem;
  padding: 0;
}

.tag-clear:hover {
  background: #667085;
}

.tag-dropdown-chevron {
  border-right: 3px solid #2d3140;
  border-top: 3px solid #2d3140;
  display: inline-block;
  height: 0.5rem;
  transform: rotate(135deg);
  transition: transform 160ms ease;
  width: 0.5rem;
}

.tag-select[open] .tag-dropdown-chevron {
  transform: rotate(-45deg);
}

.tag-options {
  background: #ffffff;
  border-top: 1px solid #e5eaf2;
  border-radius: 0 0 8px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-height: 12rem;
  overflow: auto;
  padding: 0.55rem;
}

.tag-action {
  align-items: center;
  background: #ffffff;
  border: 1px dashed #9aa4b2;
  border-radius: 6px;
  color: #344054;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 750;
  min-height: 1.8rem;
  padding: 0.35rem 0.5rem;
}

.tag-action[hidden] {
  display: none;
}

.tag-empty-result {
  align-items: center;
  color: #667085;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 700;
  min-height: 1.8rem;
  padding: 0.35rem 0.15rem;
}

.tag-empty-result[hidden] {
  display: none;
}

.tag-options .filter-tag {
  background: #eef2f7;
  border-radius: 6px;
  min-height: 1.8rem;
  padding: 0.35rem 0.45rem;
  width: auto;
}

.tag-options .filter-tag[hidden] {
  display: none;
}

.tag-options .filter-tag:hover,
.tag-action:hover {
  background: #f1f5f9;
}

.tag-options .filter-tag.is-selected {
  background: #2563eb;
  color: #ffffff;
}

.tag-options .filter-tag.is-selected .tag-remove {
  color: #ffffff;
}

.field {
  margin-bottom: 0.75rem;
}

.field label {
  color: #344054;
  display: block;
  font-size: 0.78rem;
  font-weight: 720;
  margin-bottom: 0.25rem;
}

input,
select {
  background: #ffffff;
  border: 1px solid #cfd8e6;
  border-radius: 6px;
  color: #172033;
  font: inherit;
  min-height: 2.2rem;
  padding: 0.35rem 0.45rem;
  width: 100%;
}

select[multiple] {
  min-height: 7rem;
}

.checkbox-row {
  align-items: center;
  display: flex;
  gap: 0.45rem;
}

.checkbox-row input {
  min-height: 1rem;
  width: auto;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-bottom: 0.8rem;
}

.report-content > .tabs {
  border: 1px solid #d5dae3;
  border-radius: 8px;
  flex-wrap: nowrap;
  gap: 0;
  justify-content: stretch;
  margin-bottom: 1.35rem;
  overflow: hidden;
  width: 100%;
}

.report-content > .tabs .tab {
  border: 0;
  border-radius: 0;
  border-right: 1px solid #d5dae3;
  flex: 1 1 auto;
  font-size: 0.82rem;
  font-weight: 560;
  justify-content: center;
  line-height: 1.15;
  min-height: 2.35rem;
  min-width: 0;
  overflow: hidden;
  padding: 0.45rem 0.35rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-content > .tabs .tab:first-child {
  border-radius: 7px 0 0 7px;
}

.report-content > .tabs .tab:last-child {
  border-right: 0;
  border-radius: 0 7px 7px 0;
}

.report-content > .tabs .tab.is-active {
  background: #e8efff;
  box-shadow: inset 0 0 0 2px #2f63ff;
  color: #2f63ff;
  position: relative;
  z-index: 1;
}

.table-drawers {
  display: grid;
  gap: 0.7rem;
  margin-top: 1rem;
  min-width: 0;
}

.table-drawer {
  background: #ffffff;
  border: 1px solid #dde3ee;
  border-radius: 8px;
  min-width: 0;
  overflow: visible;
  position: relative;
}

.table-drawer:hover,
.table-drawer:focus-within {
  z-index: 30;
}

.table-drawer-summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  list-style: none;
  padding: 0.8rem 0.95rem;
}

.table-drawer-summary::-webkit-details-marker {
  display: none;
}

.table-drawer-title {
  color: #172033;
  display: block;
  font-size: 1rem;
  font-weight: 720;
}

.table-drawer-label {
  min-width: 0;
}

.table-drawer-heading {
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
}

.table-drawer-meta {
  color: #667085;
  display: block;
  font-size: 0.82rem;
  font-weight: 650;
  margin-top: 0.15rem;
}

.table-drawer-chevron {
  border-bottom: 2px solid #344054;
  border-right: 2px solid #344054;
  display: block;
  flex: 0 0 auto;
  height: 0.6rem;
  transform: rotate(45deg);
  transition: transform 140ms ease;
  width: 0.6rem;
}

.table-drawer[open] .table-drawer-chevron {
  transform: rotate(225deg);
}

.table-drawer > .panel {
  border: 0;
  border-radius: 0;
  margin-top: 0;
  max-width: 100%;
  min-width: 0;
}

.table-drawer > .panel .panel-body {
  border-top: 1px solid #e5eaf2;
  padding: 0.95rem;
}

.table-drawer .stable-table {
  font-size: 0.92rem;
}

.table-drawer .stable-table th,
.table-drawer .stable-table td {
  padding-inline: 0.45rem;
}

.quality-issue {
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
  min-width: 0;
}

.quality-issue-text {
  min-width: 0;
}

.quality-issue-help[data-tooltip]::after {
  max-width: min(26rem, calc(100vw - 3rem));
  min-width: min(20rem, calc(100vw - 3rem));
}

.table-wrap {
  max-width: 100%;
  min-width: 0;
  overscroll-behavior-x: contain;
  overflow-x: auto;
  width: 100%;
}

table {
  border-collapse: collapse;
  min-width: 760px;
  width: 100%;
}

.report-content .stable-table {
  margin-inline: auto;
  min-width: var(--table-min-width, 760px);
  table-layout: fixed;
  width: var(--table-width, 100%);
}

.report-content .stable-table .table-col-compact {
  width: 10rem;
}

.report-content .stable-table .table-col-code {
  width: 12rem;
}

.report-content .stable-table .table-col-datetime {
  width: 13rem;
}

.report-content .stable-table .table-col-money {
  width: 10rem;
}

.report-content .stable-table .table-col-number {
  width: 8rem;
}

.report-content .stable-table .table-col-percent {
  width: 8.5rem;
}

.report-content .stable-table .table-col-text {
  width: 13rem;
}

.report-content .stable-table .table-col-wide {
  width: 19rem;
}

th,
td {
  border-bottom: 1px solid #e5eaf2;
  padding: 0.55rem 0.65rem;
  text-align: left;
  vertical-align: top;
}

th {
  background: #f8fafc;
  color: #475467;
  font-size: 0.76rem;
  font-weight: 760;
  text-transform: uppercase;
}

.report-content .stable-table th,
.report-content .stable-table td {
  overflow-wrap: anywhere;
}

.report-content .stable-table .table-cell-code,
.report-content .stable-table .table-cell-compact,
.report-content .stable-table .table-cell-datetime,
.report-content .stable-table .table-cell-money,
.report-content .stable-table .table-cell-number,
.report-content .stable-table .table-cell-percent,
.report-content .stable-table .table-cell-nowrap {
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-content .stable-table .table-cell-wrap {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.report-content .stable-table .table-cell-full {
  overflow: visible;
  overflow-wrap: normal;
  text-overflow: clip;
  white-space: nowrap;
}

.report-content .stable-table.wrap-headers th {
  line-height: 1.15;
  overflow: visible;
  overflow-wrap: normal;
  text-overflow: clip;
  white-space: normal;
}

.report-content .stable-table.nowrap-headers th {
  font-size: 0.76rem;
  line-height: 1.1;
  overflow: visible;
  overflow-wrap: normal;
  text-overflow: clip;
  white-space: nowrap;
}

.number {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.bar-list {
  display: grid;
  gap: 0.45rem;
}

.bar-row {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(4.5rem, 9rem) minmax(8rem, 1fr) max-content;
}

.bar-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.bar-track {
  background: #eef2f7;
  border-radius: 999px;
  height: 0.8rem;
  overflow: hidden;
}

.bar-fill {
  background: linear-gradient(90deg, #2563eb, #155eef);
  border-radius: inherit;
  height: 100%;
}

.signals {
  border-left: 3px solid #155eef;
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding-left: 0.8rem;
}

.signals p {
  margin: 0;
}

.split {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
}

.source-chart-grid,
.source-comparison-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(22rem, 0.75fr) minmax(44rem, 1.55fr);
}

.source-chart-grid {
  align-items: start;
}

.source-comparison-layout {
  align-items: stretch;
}

.route-chart-grid {
  align-items: stretch;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(26rem, 0.8fr) minmax(44rem, 1.55fr);
  margin-top: 1rem;
}

.geography-rank-grid {
  align-items: stretch;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1rem;
}

.load-balance-chart-grid {
  align-items: stretch;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 1rem;
}

.customer-chart-grid {
  align-items: stretch;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1rem;
}

.customer-chart-grid .chart-panel:nth-child(3) {
  grid-column: 1 / -1;
}

.customer-insights-content .stable-table th,
.customer-insights-content .stable-table td {
  padding-inline: 0.4rem;
}

.source-chart-grid .chart-panel,
.source-comparison-layout .chart-panel,
.route-chart-grid .chart-panel,
.geography-rank-grid .chart-panel,
.load-balance-chart-grid .chart-panel,
.customer-chart-grid .chart-panel {
  margin-top: 0;
  min-width: 0;
}

.source-comparison-layout .chart-panel,
.route-chart-grid .chart-panel,
.geography-rank-grid .chart-panel,
.load-balance-chart-grid .chart-panel,
.customer-chart-grid .chart-panel {
  height: 100%;
}

.geography-rank-chart .chart-title {
  margin-bottom: 0.55rem;
}

.geography-rank-chart .chart-grid line {
  stroke: #edf1f7;
}

.geography-rank-chart .chart-grid text,
.geography-rank-chart .chart-axis text {
  fill: #667085;
  font-size: 13px;
  font-weight: 650;
}

.geography-rank-chart .horizontal-bar {
  fill: #2f6dcc;
}

.geography-rank-chart .horizontal-bar:hover,
.geography-rank-chart .horizontal-bar:focus {
  fill: #245ba9;
}

.geography-rank-chart .horizontal-bar-label {
  fill: #667085;
  font-size: 14px;
  font-weight: 720;
}

.load-balance-chart .chart-title {
  font-size: 1.45rem;
  margin-bottom: 0.45rem;
}

.load-balance-chart .chart-grid line {
  stroke: #edf1f7;
}

.load-balance-chart .chart-grid text,
.load-balance-chart .chart-axis text {
  fill: #667085;
  font-size: 14px;
  font-weight: 700;
}

.load-balance-chart .horizontal-bar-label,
.load-balance-chart .vertical-bar-label {
  fill: #667085;
  font-size: 15px;
  font-weight: 720;
}

.load-balance-chart .horizontal-bar-value,
.load-balance-chart .vertical-bar-value {
  fill: #344054;
  font-size: 15px;
  font-weight: 780;
  pointer-events: none;
}

.customer-habit-chart .chart-title {
  font-size: 1.25rem;
  margin-bottom: 0.45rem;
}

.customer-habit-chart .chart-grid line {
  stroke: #edf1f7;
}

.customer-habit-chart .chart-grid text,
.customer-habit-chart .chart-axis text {
  fill: #667085;
  font-size: 16px;
  font-weight: 700;
}

.customer-habit-chart .horizontal-bar-label {
  fill: #667085;
  font-size: 16px;
  font-weight: 720;
}

.customer-habit-chart .horizontal-bar-value {
  fill: #344054;
  font-size: 16px;
  font-weight: 780;
  pointer-events: none;
}

.customer-detail-drawers .table-drawer-title {
  font-size: 0.98rem;
}

.load-balance-review-stack {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.load-balance-review-stack .panel,
.driver-workload-heatmap-panel {
  min-width: 0;
}

.load-balance-day-panel,
.area-rebalance-card-panel,
.driver-workload-heatmap-panel {
  position: relative;
}

.load-balance-day-list {
  display: grid;
  gap: 0.55rem;
}

.load-balance-day-panel.is-strip .load-balance-day-list {
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
}

.load-balance-day-card {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #dde3ee;
  border-radius: 8px;
  cursor: help;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 2rem minmax(0, 1fr) max-content;
  min-width: 0;
  padding: 0.72rem;
}

.load-balance-day-panel.is-strip .load-balance-day-card {
  gap: 0.6rem;
  grid-template-columns: 1.75rem minmax(0, 1fr) max-content;
  padding: 0.68rem;
}

.load-balance-day-card:hover,
.load-balance-day-card:focus,
.area-rebalance-card:hover,
.area-rebalance-card:focus,
.workload-heatmap-cell:hover,
.workload-heatmap-cell:focus {
  outline: 2px solid #bfd0ff;
  outline-offset: 1px;
}

.load-balance-rank,
.area-rebalance-rank {
  align-items: center;
  background: #e8efff;
  border-radius: 999px;
  color: #155eef;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  height: 1.7rem;
  justify-content: center;
  width: 1.7rem;
}

.load-balance-day-main {
  min-width: 0;
}

.load-balance-day-main h3,
.area-rebalance-card h3 {
  color: #172033;
  font-size: 0.96rem;
  font-weight: 780;
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}

.load-balance-day-meta {
  color: #667085;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.78rem;
  font-weight: 680;
  gap: 0.3rem 0.65rem;
  line-height: 1.3;
  margin-top: 0.22rem;
}

.load-balance-day-panel.is-strip .load-balance-day-meta {
  gap: 0.18rem 0.45rem;
}

.load-balance-day-score,
.area-rebalance-score {
  color: #172033;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.load-balance-day-score strong,
.area-rebalance-score strong {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
}

.load-balance-day-score span,
.area-rebalance-score span {
  color: #667085;
  display: block;
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.02em;
  margin-top: 0.16rem;
  text-transform: uppercase;
}

.area-rebalance-card-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.area-rebalance-card {
  background: #f8fafc;
  border: 1px solid #dde3ee;
  border-radius: 8px;
  cursor: help;
  min-width: 0;
  padding: 0.78rem;
}

.area-rebalance-card-header {
  align-items: start;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.area-rebalance-card-header > div:first-child {
  display: grid;
  gap: 0.38rem;
  min-width: 0;
}

.area-rebalance-progress {
  background: #e4e8f0;
  border-radius: 999px;
  height: 0.5rem;
  margin: 0.72rem 0;
  overflow: hidden;
}

.area-rebalance-progress span {
  background: linear-gradient(90deg, #60a5fa, #155eef);
  border-radius: inherit;
  display: block;
  height: 100%;
}

.area-rebalance-stats {
  display: grid;
  gap: 0.45rem 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.area-rebalance-stats div {
  min-width: 0;
}

.area-rebalance-stats dt {
  color: #667085;
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.area-rebalance-stats dd {
  color: #172033;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  margin: 0.12rem 0 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.driver-workload-heatmap-panel {
  margin-top: 1rem;
  position: relative;
}

.workload-heatmap-scroll {
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.workload-heatmap {
  display: grid;
  gap: 0.18rem;
  grid-template-columns: minmax(8.5rem, 10rem) repeat(var(--workload-columns), minmax(1.1rem, 1fr));
  min-width: calc(10rem + (var(--workload-columns) * 1.1rem));
}

.workload-heatmap-driver-head,
.workload-heatmap-period,
.workload-heatmap-driver {
  color: #667085;
  font-size: 0.68rem;
  font-weight: 760;
}

.workload-heatmap-driver-head,
.workload-heatmap-period {
  align-items: end;
  background: #f8fafc;
  border: 1px solid #edf1f7;
  border-radius: 5px;
  display: flex;
  min-height: 2rem;
  padding: 0.32rem;
}

.workload-heatmap-period {
  justify-content: center;
  text-align: center;
  writing-mode: vertical-rl;
}

.workload-heatmap-driver {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #edf1f7;
  border-radius: 5px;
  color: #172033;
  display: flex;
  min-width: 0;
  overflow: hidden;
  padding: 0.32rem 0.45rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workload-heatmap-cell {
  align-items: center;
  background: rgba(21, 94, 239, var(--workload-alpha));
  border: 1px solid rgba(21, 94, 239, 0.18);
  border-radius: 5px;
  color: #172033;
  cursor: help;
  display: flex;
  font: inherit;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  justify-content: center;
  min-height: 1.65rem;
  padding: 0;
}

.workload-heatmap-cell.is-empty {
  background: #f2f4f7;
  border-color: #edf1f7;
}

.workload-heatmap-legend {
  align-items: center;
  color: #667085;
  display: flex;
  font-size: 0.78rem;
  font-weight: 700;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.7rem;
}

.workload-heatmap-gradient {
  background: linear-gradient(90deg, rgba(21, 94, 239, 0.12), rgba(21, 94, 239, 0.9));
  border: 1px solid rgba(21, 94, 239, 0.16);
  border-radius: 999px;
  display: inline-block;
  height: 0.7rem;
  width: 6rem;
}

.area-rebalance-chart .horizontal-bar {
  fill: #2f6dcc;
}

.area-rebalance-chart .horizontal-bar:hover,
.area-rebalance-chart .horizontal-bar:focus {
  fill: #245ba9;
}

.streamlit-overview {
  background: #ffffff;
  border: 1px solid #dde3ee;
  border-radius: 8px;
  padding: 1rem;
}

.streamlit-metrics {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.streamlit-metric {
  min-width: 0;
}

.streamlit-metric.wide {
  min-width: 20rem;
}

@media (min-width: 1200px) {
  .streamlit-metrics {
    grid-template-columns:
      minmax(9rem, 0.85fr)
      minmax(9rem, 0.85fr)
      minmax(21rem, 1.55fr)
      minmax(10rem, 0.9fr)
      minmax(12rem, 1fr);
  }

  .streamlit-metrics.route-metrics {
    grid-template-columns: repeat(6, minmax(8.5rem, 1fr));
  }
}

.chart-panel {
  background: #ffffff;
  border: 1px solid #dde3ee;
  border-radius: 8px;
  margin-top: 1rem;
  overflow: visible;
  padding: 0.75rem;
  position: relative;
}

.chart-title {
  align-items: center;
  color: #172033;
  display: flex;
  font-size: 1.35rem;
  font-weight: 760;
  gap: 0.45rem;
  line-height: 1.1;
  margin: 0 0 0.65rem;
}

.chart-title-help {
  transform: translateY(0.02rem);
}

.chart-title-help-wrap {
  display: inline-flex;
  flex: 0 0 auto;
  position: relative;
  z-index: 1500;
}

.chart-title-tooltip {
  background: #172033;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.18);
  color: #ffffff;
  display: none;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.35;
  max-width: var(--title-tooltip-max-width, min(34rem, calc(100vw - 3rem)));
  min-width: min(22rem, calc(100vw - 3rem));
  opacity: 0;
  padding: 0.55rem 0.65rem;
  pointer-events: none;
  left: 0;
  position: absolute;
  top: calc(100% + 0.45rem);
  transform: translateY(-0.15rem);
  transform-origin: top left;
  transition: opacity 140ms ease, transform 140ms ease;
  visibility: hidden;
  width: max-content;
  z-index: 1500;
}

.title-tooltips-bound .chart-title-tooltip {
  left: var(--title-tooltip-left, 1rem);
  position: fixed;
  top: var(--title-tooltip-top, 1rem);
}

.chart-title-help-wrap:hover .chart-title-tooltip,
.chart-title-help:focus + .chart-title-tooltip {
  display: block;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.pie-chart-panel {
  margin-top: 0;
  padding: 0.75rem;
}

.pie-chart {
  display: block;
  width: 100%;
}

.svg-chart-title {
  fill: #172033;
  font-size: 24px;
  font-weight: 760;
}

.pie-chart-slice {
  cursor: pointer;
  outline: none;
  transition: filter 160ms ease;
}

.pie-chart-slice:hover,
.pie-chart-slice:focus {
  filter: brightness(0.96);
}

.pie-chart-label {
  fill: #172033;
  font-size: 14px;
  font-weight: 650;
  pointer-events: none;
}

.pie-chart-label.is-light {
  fill: #ffffff;
}

.pie-chart-legend-title {
  fill: #667085;
  font-size: 14px;
  font-weight: 650;
}

.pie-chart-legend text {
  fill: #172033;
  font-size: 13px;
  font-weight: 600;
}

.vertical-chart-panel {
  padding: 0.75rem;
}

.horizontal-chart-panel {
  padding: 0.75rem;
}

.customer-continuity-grid {
  align-items: stretch;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
  margin-top: 1rem;
}

.customer-continuity-grid .chart-panel {
  height: 100%;
  margin-top: 0;
  min-width: 0;
}

.customer-continuity-grid .chart-grid text,
.customer-continuity-grid .chart-axis text {
  font-size: 16px;
  font-weight: 650;
}

.customer-continuity-grid .horizontal-bar-label,
.customer-continuity-grid .scatter-legend text,
.customer-continuity-grid .scatter-threshold-label {
  font-size: 15px;
  font-weight: 700;
}

.horizontal-bar-chart {
  display: block;
  width: 100%;
}

.horizontal-bar {
  fill: #0b72c9;
  outline: none;
}

.horizontal-bar:hover,
.horizontal-bar:focus {
  fill: #075faa;
}

.horizontal-bar-label {
  fill: #667085;
  font-size: 13px;
  font-weight: 650;
  pointer-events: none;
}

.horizontal-bar-value {
  fill: #344054;
  font-size: 12px;
  font-weight: 760;
  pointer-events: none;
}

.stacked-horizontal-bar-chart {
  display: block;
  width: 100%;
}

.stacked-horizontal-segment {
  outline: none;
}

.stacked-horizontal-segment:hover,
.stacked-horizontal-segment:focus {
  filter: brightness(0.95);
}

.stacked-chart-legend text {
  fill: #172033;
  font-size: 13px;
  font-weight: 650;
}

.driver-overlap-panel {
  padding: 0.75rem;
}

.driver-overlap-scroll {
  overflow-x: auto;
  padding-bottom: 0.15rem;
}

.driver-overlap-matrix {
  display: grid;
  gap: 0.24rem;
  min-width: max-content;
}

.driver-overlap-corner,
.driver-overlap-header,
.driver-overlap-row-header,
.driver-overlap-cell {
  border-radius: 6px;
  min-height: 2.7rem;
}

.driver-overlap-corner,
.driver-overlap-header,
.driver-overlap-row-header {
  background: #f8fafc;
  border: 1px solid #e5eaf2;
  color: #475467;
  font-size: 0.72rem;
  font-weight: 760;
  padding: 0.45rem;
}

.driver-overlap-corner {
  display: grid;
  gap: 0.12rem;
}

.driver-overlap-corner span:first-child {
  color: #172033;
}

.driver-overlap-header {
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
}

.driver-overlap-row-header {
  align-items: center;
  color: #172033;
  display: flex;
}

.driver-overlap-cell {
  background: rgba(21, 94, 239, var(--coverage-alpha, 0.2));
  border: 1px solid rgba(21, 94, 239, 0.18);
  color: #172033;
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 0.08rem;
  justify-items: center;
  padding: 0.38rem 0.3rem;
  text-align: center;
}

.driver-overlap-cell:hover,
.driver-overlap-cell:focus {
  outline: 2px solid #bfd0ff;
  outline-offset: 1px;
}

.driver-overlap-cell.is-strong {
  color: #ffffff;
}

.driver-overlap-cell.is-self {
  background: #eef2f7;
  border-color: #d0d5dd;
  color: #667085;
}

.driver-overlap-value {
  font-size: 0.86rem;
  font-weight: 780;
  line-height: 1.1;
}

.driver-overlap-fit {
  font-size: 0.6rem;
  font-weight: 760;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.driver-overlap-legend {
  align-items: center;
  color: #667085;
  display: flex;
  font-size: 0.78rem;
  font-weight: 700;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.65rem;
}

.driver-overlap-gradient {
  background: linear-gradient(90deg, rgba(21, 94, 239, 0.1), rgba(21, 94, 239, 0.72));
  border: 1px solid rgba(21, 94, 239, 0.16);
  border-radius: 999px;
  display: inline-block;
  height: 0.7rem;
  width: 6rem;
}

.pairwise-card-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}

.pairwise-card {
  background: #f8fafc;
  border: 1px solid #dde3ee;
  border-radius: 8px;
  min-width: 0;
  padding: 0.85rem;
}

.pairwise-card-header {
  align-items: start;
  display: flex;
  gap: 0.7rem;
  justify-content: space-between;
  min-width: 0;
}

.pairwise-card-title {
  color: #172033;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.98rem;
  font-weight: 780;
  gap: 0.3rem;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
}

.pairwise-card-versus {
  color: #667085;
  font-weight: 720;
}

.pairwise-fit {
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
  padding: 0.34rem 0.45rem;
  text-transform: uppercase;
}

.pairwise-fit.is-strong {
  background: #155eef;
  color: #ffffff;
}

.pairwise-fit.is-partial {
  background: #e8efff;
  color: #155eef;
}

.pairwise-fit.is-weak {
  background: #fff1f3;
  color: #b42318;
}

.pairwise-overlap {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  margin-top: 0.8rem;
}

.pairwise-overlap span,
.pairwise-stats dt {
  color: #667085;
  font-size: 0.74rem;
  font-weight: 760;
  text-transform: uppercase;
}

.pairwise-overlap strong {
  color: #172033;
  font-size: 1.35rem;
  font-weight: 780;
}

.pairwise-direction-list {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

.pairwise-direction-label {
  align-items: center;
  color: #475467;
  display: flex;
  font-size: 0.82rem;
  font-weight: 700;
  gap: 0.65rem;
  justify-content: space-between;
  line-height: 1.25;
}

.pairwise-direction-label span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pairwise-direction-label strong {
  color: #172033;
  flex: 0 0 auto;
}

.pairwise-bar-track {
  background: #e4e8f0;
  border-radius: 999px;
  height: 0.48rem;
  margin-top: 0.28rem;
  overflow: hidden;
}

.pairwise-bar-track span {
  background: linear-gradient(90deg, #3b82f6, #155eef);
  border-radius: inherit;
  display: block;
  height: 100%;
}

.pairwise-stats {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0.85rem 0 0;
}

.pairwise-stats div {
  min-width: 0;
}

.pairwise-stats dt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pairwise-stats dd {
  color: #172033;
  font-size: 1rem;
  font-weight: 780;
  margin: 0.18rem 0 0;
}

.area-coverage-map-panel {
  padding: 0.75rem;
}

.area-coverage-map {
  height: min(62vh, 620px);
}

.area-coverage-map-legend {
  align-items: center;
  color: #667085;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.78rem;
  font-weight: 700;
  gap: 0.5rem 1rem;
  justify-content: flex-end;
  margin-top: 0.65rem;
}

.area-coverage-leaflet-popup .leaflet-popup-content-wrapper {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.18);
}

.area-coverage-leaflet-popup .leaflet-popup-content {
  margin: 0;
  max-width: min(27rem, calc(100vw - 4rem));
  overflow: hidden;
}

.area-coverage-popup {
  background: #ffffff;
  max-height: min(58vh, 32rem);
  min-width: 0;
  overflow: auto;
  padding: 0.75rem 0.8rem;
  width: min(27rem, calc(100vw - 4rem));
}

.area-coverage-popup-title {
  color: #172033;
  font-size: 0.98rem;
  font-weight: 780;
  margin-bottom: 0.35rem;
}

.area-coverage-popup-meta {
  color: #667085;
  font-size: 0.8rem;
  font-weight: 650;
  margin-bottom: 0.2rem;
}

.area-coverage-popup-submeta {
  color: #475467;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
}

.area-coverage-popup-table {
  border-collapse: collapse;
  font-size: 0.78rem;
  min-width: 0;
  table-layout: fixed;
  width: 100%;
}

.area-coverage-popup-table th:first-child,
.area-coverage-popup-table td:first-child {
  width: 38%;
}

.area-coverage-popup-table th:not(:first-child),
.area-coverage-popup-table td:not(:first-child) {
  width: 20.666%;
}

.area-coverage-popup-table th,
.area-coverage-popup-table td {
  border-top: 1px solid #e4e8f0;
  padding: 0.26rem 0.28rem;
  text-align: right;
}

.area-coverage-popup-table th:first-child,
.area-coverage-popup-table td:first-child {
  text-align: left;
}

.vertical-bar-chart {
  display: block;
  width: 100%;
}

.vertical-bar {
  fill: var(--bar-fill, #2f6dcc);
  outline: none;
}

.vertical-bar:hover,
.vertical-bar:focus {
  filter: brightness(0.95);
}

.vertical-bar-label {
  fill: #667085;
  font-size: 12px;
  font-weight: 650;
  pointer-events: none;
}

.vertical-bar-value {
  fill: #344054;
  font-size: 12px;
  font-weight: 760;
  pointer-events: none;
}

.scatter-chart {
  display: block;
  width: 100%;
}

.scatter-point {
  cursor: pointer;
  fill: var(--point-fill, #2563eb);
  fill-opacity: 0.82;
  outline: none;
  stroke: #ffffff;
  stroke-width: 2;
  transition:
    fill-opacity 140ms ease,
    stroke 140ms ease,
    stroke-width 140ms ease;
}

.scatter-point:hover,
.scatter-point:focus {
  fill-opacity: 1;
  stroke: #172033;
  stroke-width: 2.5;
}

.scatter-threshold {
  stroke: #98a2b3;
  stroke-dasharray: 6 6;
  stroke-width: 1.5;
}

.scatter-threshold-label {
  fill: #667085;
  font-size: 13px;
  font-weight: 650;
}

.scatter-legend text {
  fill: #172033;
  font-size: 13px;
  font-weight: 650;
}

.vertical-chart-legend-title {
  fill: #667085;
  font-size: 14px;
  font-weight: 650;
}

.vertical-chart-legend text {
  fill: #172033;
  font-size: 14px;
  font-weight: 600;
}

.line-chart {
  display: block;
  min-width: 0;
  width: 100%;
}

.chart-grid line {
  stroke: #e5eaf2;
  stroke-width: 1;
}

.chart-grid text,
.chart-axis text {
  fill: #667085;
  font-size: 14px;
  font-weight: 600;
}

.chart-axis .line-chart-x-tick {
  font-size: 12px;
}

.line-chart-path {
  fill: none;
  stroke: #2f6dcc;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.line-chart-points circle {
  fill: #2f6dcc;
  outline: none;
  stroke: #2f6dcc;
}

.line-chart-points circle:focus,
.line-chart-points circle:hover {
  fill: #0b4fc4;
  stroke: #0b4fc4;
}

.chart-tooltip {
  background: #ffffff;
  border: 1px solid #cfd8e6;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
  color: #667085;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.35;
  max-width: 220px;
  padding: 0.45rem 0.55rem;
  pointer-events: none;
  position: absolute;
  z-index: 20;
}

.chart-tooltip-title {
  color: #172033;
  font-weight: 760;
  margin-bottom: 0.2rem;
}

.route-map {
  border-radius: 6px;
  height: min(62vh, 560px);
  min-height: 420px;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 0;
}

.route-map-panel {
  padding: 0.75rem;
}

.login-shell {
  display: grid;
  min-height: calc(100vh - 96px);
  place-items: center;
}

.login-panel {
  background: #ffffff;
  border: 1px solid #dde3ee;
  border-radius: 8px;
  max-width: 380px;
  padding: 1.25rem;
  width: 100%;
}

.login-title {
  font-size: 1.45rem;
  line-height: 1.1;
  margin: 0 0 1rem;
}

.login-button {
  cursor: pointer;
  justify-content: center;
  width: 100%;
}

.form-error {
  border: 1px solid #fecdca;
  border-radius: 6px;
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.65rem;
}

.peak-heatmap {
  border: 1px solid #e0e5ee;
  border-radius: 8px;
  margin-inline: auto;
  max-width: 100%;
  overflow: auto;
  width: fit-content;
}

.peak-grid {
  background: #ffffff;
  display: grid;
  grid-template-columns: 4rem repeat(7, 5.75rem);
  min-width: 0;
}

.peak-cell {
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid #e4e8f0;
  border-right: 1px solid #e4e8f0;
  color: #303545;
  display: flex;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  justify-content: flex-end;
  min-height: 2.35rem;
  padding: 0.42rem 0.65rem;
  text-align: right;
}

.peak-cell:nth-child(8n) {
  border-right: 0;
}

.peak-cell:nth-last-child(-n + 8) {
  border-bottom: 0;
}

.peak-head {
  background: #f8fafc;
  color: #737b8d;
  font-weight: 760;
  justify-content: center;
  text-align: center;
}

@media (max-width: 920px) {
  .app-shell__header,
  .page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .header-actions {
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .calculation-filter-form,
  .calculation-summary-grid {
    grid-template-columns: 1fr;
  }

  .calculation-filter-actions {
    flex-wrap: wrap;
  }

  .account-actions {
    border-left: 0;
    padding-left: 0;
  }

  .report-layout,
  .split,
  .geography-rank-grid,
  .load-balance-chart-grid,
  .customer-chart-grid,
  .customer-continuity-grid {
    grid-template-columns: 1fr;
  }

  .report-layout:has(.filter-panel.is-collapsed) {
    grid-template-columns: 1fr;
  }

  .streamlit-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .streamlit-metric.wide {
    min-width: 0;
  }

  .metric-value.xl {
    font-size: 2rem;
  }

  .filter-panel {
    max-height: none;
    position: static;
  }

  .filter-panel:not(.is-collapsed) .filter-content {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .bar-row {
    grid-template-columns: 1fr;
  }
}

@container (max-width: 860px) {
  .source-chart-grid,
  .source-comparison-layout,
  .route-chart-grid,
  .geography-rank-grid,
  .load-balance-chart-grid,
  .customer-chart-grid,
  .customer-continuity-grid {
    grid-template-columns: 1fr;
  }
}