/* Overview home (/platform.html) — page-scoped layout only. Tokens: /style.css + platform.css. */

.ov-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ov-kpi-slot { min-width: 0; display: flex; }
.ov-kpi-slot > .pc-kpi { flex: 1; min-width: 0; }
.ov-sk-value { width: 56%; height: 22px; border-radius: 6px; }
.ov-sk-sub { width: 72%; }
.ov-kpi-unavailable { font-size: 15px; font-weight: 600; color: var(--gray-400); letter-spacing: 0; padding: 4px 0 3px; }

.ov-retry {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-700);
  font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; flex: none;
}
.ov-retry:hover { background: var(--gray-50); border-color: var(--gray-400); }
.ov-retry i { font-size: 13px; }

.ov-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.ov-grid .pc-card + .pc-card { margin-top: 0; }
.ov-counts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ov-head-note { font-size: 12px; }

.ov-list { list-style: none; margin: 0; padding: 0; }
.ov-list > li + li { border-top: 1px solid var(--gray-100); }

/* Attention item */
.pc .ov-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: inherit; text-decoration: none; }
.ov-item:hover { background: var(--pc-row-hover); }
.ov-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ov-item-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: 17px; }
.ov-item[data-sev="high"] .ov-item-icon { background: var(--red-bg); color: var(--pc-red-ink); }
.ov-item[data-sev="medium"] .ov-item-icon { background: var(--yellow-bg); color: var(--pc-amber-ink); }
.ov-item[data-sev="low"] .ov-item-icon { background: var(--gray-100); color: var(--gray-500); }
.ov-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ov-item-title { font-size: 13.5px; font-weight: 600; color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-item-reason { font-size: 12.5px; color: var(--gray-500); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ov-item-meta { display: flex; align-items: center; gap: 8px; flex: none; }
.ov-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--gray-500); background: var(--gray-100); border-radius: 5px; padding: 2px 7px; }
.ov-item-chev { font-size: 16px; color: var(--gray-300); }
.ov-item:hover .ov-item-chev { color: var(--gray-500); }

/* Pending / failed source rows */
.ov-status-row { display: flex; align-items: center; gap: 10px; padding: 11px 16px; font-size: 12.5px; color: var(--gray-600); }
.ov-status-text { flex: 1; min-width: 0; }
.ov-status-row > i { font-size: 16px; color: var(--gray-400); }
.ov-status-row--error > i { color: var(--pc-red-ink); }
.ov-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gray-200); border-top-color: var(--primary); animation: ov-spin 0.8s linear infinite; flex: none; }
@keyframes ov-spin { to { transform: rotate(360deg); } }

.ov-clear { display: flex; align-items: center; gap: 12px; padding: 28px 16px; }
.ov-clear-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--green-bg); color: var(--pc-green-ink); display: grid; place-items: center; font-size: 20px; flex: none; }
.ov-clear strong { color: var(--gray-900); font-size: 14px; }
.ov-clear .pc-muted { font-size: 12.5px; }

/* Recent sign-ins */
.pc .ov-act-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: inherit; text-decoration: none; }
a.ov-act-row:hover { background: var(--pc-row-hover); }
.ov-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--blue-light); color: var(--pc-blue-ink); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.ov-avatar--sk { background: var(--gray-100); }
.ov-act-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ov-act-name { font-size: 13px; font-weight: 600; color: var(--gray-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-act-clinic { font-size: 12px; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-act-time { font-size: 12px; color: var(--gray-400); white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; }
.ov-sk-line { width: 70%; }
.ov-sk-line--short { width: 45%; }

@media (max-width: 1180px) {
  .ov-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ov-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-kpi-slot:last-child { grid-column: 1 / -1; }
  .pc .ov-item { padding: 12px; align-items: flex-start; }
  .ov-item-title { white-space: normal; }
  .ov-item-meta .ov-tag { display: none; }
  .ov-item-chev { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ov-spinner { animation: none; }
}