.overview-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.overview-metric { min-height: 116px; padding: 18px; color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-top: 4px solid var(--green); border-radius: 13px; background: white; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease; }
.overview-metric:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0,0,0,.09); }
.overview-metric--critical { border-top-color: var(--red); }
.overview-metric--amber { border-top-color: #d89b22; }
.overview-metric--purple { border-top-color: var(--purple); }
.overview-metric--neutral { border-top-color: #64748b; }
.overview-metric--cpf { border-top-color: #c52828; }
.overview-metric span, .overview-metric small { display: block; color: var(--muted); }
.overview-metric strong { display: block; margin: 4px 0 1px; font-size: 30px; line-height: 1.1; }
.overview-metric small { font-size: 12px; }

.overview-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 16px; }
.overview-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: var(--shadow); }
.overview-card > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.overview-card h2 { margin: 0; font-size: 16px; }
.overview-card header p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.overview-card header a { color: #005bd3; text-decoration: none; font-weight: 650; }
.overview-list { min-height: 90px; }
.overview-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 68px; padding: 12px 20px; color: var(--ink); text-decoration: none; border-bottom: 1px solid #eceeef; }
.overview-row:last-child { border-bottom: 0; }
.overview-row:hover { background: #f8fbfa; }
.overview-row__signal, .activity-dot { width: 9px; height: 9px; border-radius: 50%; }
.overview-row__signal--critical { background: var(--red); box-shadow: 0 0 0 4px var(--red-bg); }
.overview-row__signal--warning { background: #c88916; box-shadow: 0 0 0 4px var(--amber-bg); }
.activity-dot { background: var(--green); box-shadow: 0 0 0 4px #e3f5ef; }
.overview-row__main, .overview-row__meta { min-width: 0; }
.overview-row__main strong, .overview-row__main small, .overview-row__meta strong, .overview-row__meta small { display: block; }
.overview-row__main small { overflow: hidden; margin-top: 2px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.overview-row__meta { text-align: right; }
.overview-row__meta strong { color: var(--green-dark); font-size: 12px; }
.overview-row__meta small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.overview-loading, .overview-empty { padding: 32px 20px; color: var(--muted); text-align: center; }

.team-row { padding: 13px 20px; border-bottom: 1px solid #eceeef; }
.team-row:last-child { border-bottom: 0; }
.team-row > div:first-child { display: flex; justify-content: space-between; gap: 12px; }
.team-row span { color: var(--muted); font-size: 12px; }
.team-bar { height: 6px; overflow: hidden; margin-top: 8px; border-radius: 999px; background: #edf0f2; }
.team-bar span { display: block; height: 100%; border-radius: inherit; background: var(--green); }

.health-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 15px 20px; border-bottom: 1px solid #eceeef; }
.health-row:last-child { border-bottom: 0; }
.health-dot { width: 9px; height: 9px; border-radius: 50%; }
.health-dot.is-online { background: var(--green); box-shadow: 0 0 0 4px #e3f5ef; }
.health-dot.is-offline { background: var(--red); box-shadow: 0 0 0 4px var(--red-bg); }
.health-row strong, .health-row small { display: block; }
.health-row small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.health-row b { color: var(--green-dark); font-size: 11px; }
.health-row:has(.is-offline) b { color: var(--red); }
.overview-updated { margin: 18px 0; color: var(--muted); font-size: 12px; text-align: center; }

.coming-soon { display: grid; justify-items: center; margin-top: 18px; padding: 72px 24px; text-align: center; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: var(--shadow); }
.coming-soon__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: #e3f5ef; color: var(--green-dark); font-size: 28px; }
.coming-soon h2 { margin: 18px 0 6px; }
.coming-soon p { max-width: 560px; margin: 0; color: var(--muted); }

@media (max-width: 1050px) {
  .overview-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-row { padding-inline: 14px; }
}
@media (max-width: 440px) {
  .overview-metrics { grid-template-columns: 1fr; }
}