

/* ═════════════ Account Overview: stable desktop grid ═════════════ */
#panel-overview .overview-metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.25vw, 18px) !important;
  align-items: stretch !important;
  margin: 18px 0 22px !important;
  width: 100% !important;
  max-width: 100% !important;
}

#panel-overview .overview-metric-card,
#panel-overview .overview-metric-card:nth-child(n+1),
#panel-overview .overview-metric-card:nth-child(1),
#panel-overview .overview-metric-card:nth-child(2),
#panel-overview .overview-metric-card:nth-child(n+6) {
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  grid-column: auto / span 2 !important;
  min-height: 116px !important;
  padding: clamp(16px, 1.25vw, 22px) !important;
  overflow: hidden !important;
}

/* First row: 3 balanced executive metrics. */
#panel-overview .overview-metric-card:nth-child(1),
#panel-overview .overview-metric-card:nth-child(2),
#panel-overview .overview-metric-card:nth-child(3) {
  grid-column: auto / span 4 !important;
  min-height: 138px !important;
}

/* Second row: useful compact operational cards, no blank desktop columns. */
#panel-overview .overview-metric-card:nth-child(4),
#panel-overview .overview-metric-card:nth-child(5) {
  grid-column: auto / span 3 !important;
}

#panel-overview .overview-metric-card:nth-child(6),
#panel-overview .overview-metric-card:nth-child(7),
#panel-overview .overview-metric-card:nth-child(8),
#panel-overview .overview-metric-card:nth-child(9) {
  grid-column: auto / span 2 !important;
}

#panel-overview .ov-value {
  max-width: 100% !important;
  font-size: clamp(25px, 2.05vw, 36px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#panel-overview .overview-metric-card:nth-child(1) .ov-value,
#panel-overview .overview-metric-card:nth-child(2) .ov-value {
  font-size: clamp(38px, 3.15vw, 58px) !important;
}

#panel-overview .overview-metric-card:nth-child(6) .ov-value,
#panel-overview .overview-metric-card:nth-child(7) .ov-value,
#panel-overview .overview-metric-card:nth-child(8) .ov-value,
#panel-overview .overview-metric-card:nth-child(9) .ov-value {
  font-size: clamp(23px, 1.9vw, 32px) !important;
}

#panel-overview .ov-label,
#panel-overview .ov-meta {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#panel-overview .alert-banner {
  max-width: 100% !important;
}

/* Overview adapts to actual panel width, not only viewport width. */
#panel-overview.is-narrow-panel .overview-metrics-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

#panel-overview.is-narrow-panel .overview-metric-card,
#panel-overview.is-narrow-panel .overview-metric-card:nth-child(n+1),
#panel-overview.is-narrow-panel .overview-metric-card:nth-child(n+6) {
  grid-column: auto / span 2 !important;
}

#panel-overview.is-narrow-panel .overview-metric-card:nth-child(1),
#panel-overview.is-narrow-panel .overview-metric-card:nth-child(2) {
  grid-column: auto / span 3 !important;
}

@media (max-width: 1240px) {
  #panel-overview .overview-metrics-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  #panel-overview .overview-metric-card,
  #panel-overview .overview-metric-card:nth-child(n+1),
  #panel-overview .overview-metric-card:nth-child(n+6) {
    grid-column: auto / span 2 !important;
  }

  #panel-overview .overview-metric-card:nth-child(1),
  #panel-overview .overview-metric-card:nth-child(2) {
    grid-column: auto / span 3 !important;
  }

  #panel-overview .overview-metric-card:nth-child(3) {
    grid-column: auto / span 2 !important;
  }
}

@media (max-width: 760px) {
  #panel-overview .overview-metrics-grid,
  #panel-overview.is-narrow-panel .overview-metrics-grid,
  #panel-overview.is-phone-panel .overview-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  #panel-overview .overview-metric-card,
  #panel-overview .overview-metric-card:nth-child(n+1),
  #panel-overview .overview-metric-card:nth-child(3),
  #panel-overview .overview-metric-card:nth-child(4),
  #panel-overview .overview-metric-card:nth-child(5),
  #panel-overview .overview-metric-card:nth-child(n+6) {
    grid-column: auto / span 1 !important;
    min-height: 112px !important;
  }

  #panel-overview .overview-metric-card:nth-child(1),
  #panel-overview .overview-metric-card:nth-child(2) {
    grid-column: 1 / -1 !important;
    min-height: 128px !important;
  }

  #panel-overview .ov-value,
  #panel-overview .overview-metric-card:nth-child(1) .ov-value,
  #panel-overview .overview-metric-card:nth-child(2) .ov-value {
    font-size: clamp(27px, 9vw, 42px) !important;
  }
}

@media (max-width: 420px) {
  #panel-overview .overview-metrics-grid,
  #panel-overview.is-phone-panel .overview-metrics-grid {
    grid-template-columns: 1fr !important;
  }

  #panel-overview .overview-metric-card,
  #panel-overview .overview-metric-card:nth-child(n+1) {
    grid-column: 1 / -1 !important;
  }
}

/* Narrow panels/mobile remain card-like and readable. */

