/* components.css — UI Components v1.8 */
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px}
.stat-value{font-size:1.75rem;font-weight:700;line-height:1;margin-top:6px;font-variant-numeric:tabular-nums}
.stat-label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:500}
.stat-change{font-size:.75rem;margin-top:6px;display:flex;align-items:center;gap:3px}
.stat-up{color:var(--green)}.stat-down{color:var(--red)}
.metric-spark{height:36px;margin-top:10px}
table{width:100%;border-collapse:collapse;font-size:.8125rem}
thead tr{border-bottom:1px solid var(--border)}
th{padding:10px 14px;text-align:left;font-weight:500;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em}
td{padding:10px 14px;border-bottom:1px solid var(--border2);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--surface2)}
.progress-track{height:6px;background:var(--surface2);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;border-radius:3px;transition:width .6s ease}
.alert-item{padding:10px 14px;border-radius:var(--radius);font-size:.8125rem;margin-bottom:6px;border-left:3px solid transparent}
.alert-critical{background:rgba(239,68,68,.1);border-color:var(--red);color:#fca5a5}
.alert-warning{background:rgba(234,179,8,.1);border-color:var(--yellow);color:#fde68a}
.alert-info{background:rgba(59,130,246,.1);border-color:var(--blue);color:#93c5fd}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .12s;border:none}
.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{background:#2563eb}
.btn-ghost{background:var(--surface2);color:var(--subtle);border:1px solid var(--border)}.btn-ghost:hover{background:var(--border)}
.btn-sm{padding:5px 10px;font-size:.75rem}
.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.badge-green{background:#14532d;color:#86efac}.badge-red{background:#450a0a;color:#fca5a5}
.badge-yellow{background:#422006;color:#fde68a}.badge-blue{background:#1e3a5f;color:#93c5fd}
.badge-gray{background:var(--surface2);color:var(--subtle)}
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:500;background:var(--surface2);color:var(--subtle);border:1px solid var(--border)}
.tag-live{background:rgba(34,197,94,.15);color:var(--green);border-color:rgba(34,197,94,.3)}
.avatar{width:28px;height:28px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center}
.avatar-group{display:flex}.avatar-group .avatar{margin-left:-8px;border:2px solid var(--surface)}.avatar-group .avatar:first-child{margin-left:0}
.divider{height:1px;background:var(--border);margin:16px 0}
.empty{text-align:center;padding:32px;color:var(--muted);font-size:.875rem}
.tooltip{position:absolute;z-index:999;background:var(--surface);border:1px solid var(--border);padding:5px 10px;border-radius:var(--radius);font-size:.75rem;pointer-events:none;white-space:nowrap;box-shadow:var(--shadow)}