/* components.css — Карточки, блоки служб, KPI, метки статусов, таблицы. Порядок подключения файлов задан в app/web.py (CSS_FILES) и важен для каскада. */
/* ---------- карточки ---------- */
.grid{display:grid;gap:16px;align-items:start}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--surface);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);min-width:0}
.card .hd{display:flex;align-items:baseline;gap:10px;padding:16px 20px 0;flex-wrap:wrap}
.card .hd h3{margin:0;font-size:16px;font-weight:700;display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
.card .hd h3::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--brand);flex:none}
.card .hd .sub{color:var(--ink3);font-size:13px}
.card .hd .r{margin-left:auto;font-size:13px;color:var(--ink3)}
.card .bd{padding:12px 20px 18px}

/* ---------- раздел службы на сводке ---------- */
.svc{display:flex;align-items:center;gap:12px;margin:28px 0 14px;flex-wrap:wrap}
.svc h2{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em}
.svc .owner{font-size:13px;color:var(--ink3)}
.svc .line{flex:1;height:1px;background:var(--line)}
.svc:first-child{margin-top:0}
.soon{border-style:dashed;background:transparent;box-shadow:none;padding:18px 20px}
.soon h4{margin:0 0 4px;font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:10px}
.soon h4 .ic{width:32px;height:32px;border-radius:9px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:15px;flex:none}
.soon .own{font-size:12.5px;color:var(--ink3);margin-bottom:8px}
.soon p{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.5}
.soon .st{margin-top:10px}

/* ---------- KPI ---------- */
.kpis{margin-bottom:22px}
.kpi{padding:16px 20px 18px;border-top:4px solid var(--brand)}
.kpi.ok{border-top-color:var(--ok)}.kpi.warn{border-top-color:var(--warn)}.kpi.bad{border-top-color:var(--bad)}
.kpi .l{font-size:12.5px;color:var(--ink3);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.kpi .v{font-size:36px;font-weight:800;letter-spacing:-.03em;margin-top:4px;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--ink)}
.kpi .v small{font-size:15px;color:var(--ink3);font-weight:600;margin-left:6px;letter-spacing:0}
.kpi .d{font-size:13.5px;color:var(--ink2);margin-top:10px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.kpi .d b{color:var(--ink);font-weight:700}
.kpi .d .ok{color:var(--ok)}.kpi .d .bad{color:var(--bad)}.kpi .d .warn{color:var(--warn)}
.meter{height:6px;border-radius:3px;background:var(--muted-soft);overflow:hidden;flex:1;min-width:60px}
.meter i{display:block;height:100%;background:var(--brand)}
.meter.ok i{background:var(--ok)}.meter.warn i{background:var(--warn)}.meter.bad i{background:var(--bad)}

/* ---------- метки статусов ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:12.5px;font-weight:700;white-space:nowrap;line-height:1.4}
.pill:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.mut{background:var(--muted-soft);color:var(--ink2)}
.pill.acc{background:var(--brand-soft);color:var(--brand)}
.pill.sm{font-size:11.5px;padding:1px 8px;vertical-align:1px}

/* ---------- таблицы ---------- */
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface2)}
td{padding:11px 12px;border-bottom:1px solid var(--line2);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.mono{white-space:nowrap;font-size:13.5px}
tbody tr:hover td{background:var(--surface2)}
td.empty{color:var(--ink3);padding:18px 12px;font-style:italic}
#s-ops table{font-size:13.5px}
#s-ops th,#s-ops td{padding:9px 10px}
#s-ops td:nth-child(5){max-width:230px}
@media (max-width:1500px){ #s-ops th:nth-child(6),#s-ops td:nth-child(6){display:none} }
.plate{font-family:"JetBrains Mono",monospace;font-size:12.5px;background:var(--surface2);border:1px solid var(--line);border-radius:6px;padding:2px 7px;white-space:nowrap;color:var(--ink)}
.muted{color:var(--ink3)}
.ed{color:var(--ink3);font-size:12.5px;white-space:nowrap}