/* Styles of p-overview.js only. Shared pieces live in style.css. */
.ov-kpis { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ov-kpi { display: flex; align-items: center; gap: 12px; padding: 16px 20px; color: inherit; text-decoration: none; }
a.ov-kpi:hover { text-decoration: none; border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.ov-tile { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.ov-tile.warning { background: color-mix(in srgb, var(--warning) 10%, transparent); color: var(--warning); }
.ov-tile.info { background: color-mix(in srgb, var(--info) 10%, transparent); color: var(--info); }
.ov-tile.destructive { background: color-mix(in srgb, var(--destructive) 10%, transparent); color: var(--destructive); }
.ov-tile.primary { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.ov-kl { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-fg); }
.ov-kv { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--foreground); }
.ov-pri { color: var(--primary); }
.card-h.ov-ch { padding-bottom: 12px; }
.ov-empty { display: flex; align-items: center; justify-content: center; min-height: 128px; margin: 0; text-align: center; font-size: 14px; }

/* charts: one series in --primary, grid and axes recessive */
.ov-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ov-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; }
.ov-ax { fill: var(--muted-fg); font-size: 11px; font-variant-numeric: tabular-nums; }
.ov-bar { fill: var(--primary); }
.ov-hit:hover .ov-bar { fill: color-mix(in srgb, var(--primary) 80%, var(--foreground)); }
.ov-area { fill: color-mix(in srgb, var(--primary) 18%, transparent); stroke: none; }
.ov-line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; }
rect.ov-hit:hover { fill: color-mix(in srgb, var(--foreground) 6%, transparent); }

/* list rows like the reference's "Top 10" rows */
.ov-line-item { display: flex; align-items: center; gap: 12px; min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  color: inherit; text-decoration: none; transition: border-color .15s; }
a.ov-line-item:hover { text-decoration: none; border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
a.ov-line-item > .truncate { flex: 1 1 auto; }
.ov-acc { flex-wrap: wrap; gap: 6px 12px; }
.ov-n { min-width: 28px; font-weight: 600; font-size: 14px; }
.ov-lane { font-size: 13px; gap: 12px; flex-wrap: nowrap; }
.ov-lane > span:first-child { flex: none; max-width: 55%; }
.ov-cols { align-items: start; }

@media (max-width: 1279px) { .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .ov-charts, .ov-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .ov-kpis { grid-template-columns: minmax(0, 1fr); } .ov-kpi { padding: 12px 16px; } }