/* ============================================================
   DACHOST panel — page: Overview (/)
   Page-specific tweaks only; tokens, panels, tables, chips, kv and
   stats come from app.css. Every rule is scoped under .p-overview.
   ============================================================ */
.p-overview .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 1. attention notices: a stack, 8px apart, 20px before the stat strip */
.p-overview .ov-notices{display:grid;gap:8px;margin-bottom:20px}
.p-overview .ov-notices .notice b{font-weight:600}

/* 2. stat strip: tone on the secondary line (SPEC 1.4 / 5.2) */
.p-overview .stats{margin-bottom:28px}
.p-overview .stat .meta.is-warn{color:var(--warn-text)}
.p-overview .stat .meta.is-bad{color:var(--bad-text)}
.p-overview .stat .meta .link{color:inherit}
.p-overview .stat .kpi-sm.is-bad{color:var(--bad-text)}

/* 3a. onboarding checklist: 44px rows, check circle, chevron right; done rows struck in ok text */
.p-overview .ov-start{margin-bottom:28px}
.p-overview .ov-check{list-style:none;margin:0;padding:6px 8px}
.p-overview .ov-check li + li{border-top:1px solid var(--line-soft)}
.p-overview .ov-check a{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border-radius:var(--r-sm);font-size:var(--fs-135);color:var(--text)}
.p-overview .ov-check a:hover{background:var(--surface-2)}
.p-overview .ov-check-i{display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;height:22px;border:1.5px solid var(--line-2);border-radius:50%;color:var(--text-3)}
.p-overview .ov-check-i i{font:600 11px/1 var(--font);font-style:normal;font-variant-numeric:tabular-nums}
.p-overview .ov-check-t{flex:1;min-width:0}
.p-overview .ov-check-c{color:var(--text-4);flex:0 0 auto}
.p-overview .ov-check li.is-done .ov-check-i{border-color:var(--ok);background:var(--ok);color:#fff}
.p-overview .ov-check li.is-done .ov-check-t{color:var(--ok-text);text-decoration:line-through;text-decoration-color:var(--ok-line)}

/* 3b. servers preview table: no toolbar, no footer; copy button appears on hover (always on touch) */
.p-overview .ov-servers{margin-bottom:28px}
.p-overview .ov-servers .tbl{width:100%}
.p-overview .ov-servers .c-name .sub{display:block;font-size:var(--fs-12);font-weight:400;color:var(--text-3);line-height:1.3;margin-top:1px}
.p-overview .ov-servers .c-ip .copy{opacity:0;vertical-align:middle;margin-left:2px;transition:opacity var(--t-fast)}
.p-overview .ov-servers tr:hover .c-ip .copy,.p-overview .ov-servers .c-ip .copy:focus-visible{opacity:1}
@media (pointer:coarse){.p-overview .ov-servers .c-ip .copy{opacity:1}}
.p-overview .ov-servers .c-cpu{white-space:nowrap}
.p-overview .ov-servers td.c-cpu{text-align:right}
.p-overview .ov-servers .ov-spark{display:inline-block;width:72px;height:24px;vertical-align:middle;margin-right:10px;color:var(--ch-1)}
.p-overview .ov-servers .ov-spark svg{display:block;width:100%;height:100%;overflow:visible}
.p-overview .ov-servers th.c-cpu{text-align:right}
.p-overview .ov-more{padding:10px 16px;border-top:1px solid var(--line-soft);font-size:var(--fs-125);color:var(--text-3)}

/* 4a. recent activity: dense 10-row feed (time · sentence · server) */
.p-overview .ov-feed{list-style:none;margin:0;padding:4px 0}
.p-overview .ov-feed li{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:12px;min-height:40px;padding:6px 20px;border-top:1px solid var(--line-soft)}
.p-overview .ov-feed li:first-child{border-top:0}
.p-overview .ov-feed time{font-size:var(--fs-12);color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.p-overview .ov-feed-t{font-size:var(--fs-135);color:var(--text);min-width:0;overflow-wrap:anywhere}
.p-overview .ov-feed-t .mono{font-size:var(--fs-12)}
.p-overview .ov-feed-t .st-box{vertical-align:middle;margin-left:4px}
.p-overview .ov-feed-t .tag{vertical-align:middle;margin-left:4px}
.p-overview .ov-feed-s{font-size:var(--fs-125);color:var(--text-2);white-space:nowrap}
.p-overview .ov-feed-s:hover{text-decoration:underline;text-underline-offset:2px}
.p-overview .ov-feed li.is-failed{box-shadow:inset 3px 0 0 var(--bad)}
.p-overview .ov-empty{padding:32px 20px;font-size:var(--fs-13);color:var(--text-3)}

/* 4b. spending: bars 120px, then kv + a small line button */
.p-overview .ov-spend .panel-actions .tnum{font-size:var(--fs-135);font-weight:600}
.p-overview .ov-chart{height:120px;padding:12px 16px 8px}
.p-overview .ov-chart-empty{display:flex;align-items:center;justify-content:center;height:120px;padding:0 20px;text-align:center}
.p-overview .ov-spend .panel-body{padding:4px 20px 20px}
.p-overview .ov-spend .kv{margin-bottom:16px}
.p-overview .ov-spend .kv dd.is-bad{color:var(--bad-text)}

/* mobile */
@media (max-width:640px){
  .p-overview .ov-feed li{grid-template-columns:1fr auto;padding:8px 16px}
  .p-overview .ov-feed time{grid-column:1 / -1;order:-1}
  .p-overview .ov-servers .ov-spark{display:none}
  .p-overview .ov-empty{padding:24px 16px}
}