/* ================================================================
   MONITORING — Ruhiges Betreiber-Control-Center
   Prinzip: Pro Komponente nur EIN Warnsignal. Mehr Weißraum.
   Gelb/Rot nur als Punkt, dünne Border oder einzelnes Label.
   ================================================================ */

/* ── Page Shell ─────────────────────────────────────────────────── */
.cc-page {
  min-height: 100%;
  background: #f5f6f8;
  padding: 0 0 80px;
}

/* ── Header Bar ─────────────────────────────────────────────────── */
.cc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px 16px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  position: sticky;
  top: 0;
  z-index: 10;
}
.cc-header-left { display: flex; align-items: center; gap: 12px; }
.cc-header-right { display: flex; align-items: center; gap: 8px; }

.cc-status-pulse {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.cc-status-pulse[data-state="ok"] { background: #22c55e; }
.cc-status-pulse[data-state="warn"] { background: #f59e0b; }
.cc-status-pulse[data-state="critical"] { background: #ef4444; }
.cc-status-pulse[data-state="ok"]::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%; background: rgba(34,197,94,0.25);
  animation: pulse-ring 2s ease-out infinite;
}
.cc-status-pulse[data-state="warn"]::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%; background: rgba(245,158,11,0.25);
  animation: pulse-ring 2s ease-out infinite;
}
.cc-status-pulse[data-state="critical"]::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%; background: rgba(239,68,68,0.3);
  animation: pulse-ring 1.2s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(0.9); opacity: 0.8; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

.cc-header-title {
  font-size: 15px;
  font-weight: 700;
  color: #0d1117;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
}
.cc-header-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 3px;
  flex-wrap: wrap;
}
.cc-header-summary-text {
  font-size: 13px;
  color: #444d56;
  font-weight: 400;
}
.cc-header-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #b0b8c4;
}
.cc-sep { opacity: 0.5; }
.cc-state-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.01em;
}
.cc-state-badge[data-state="ok"]       { background: #dcfce7; color: #15803d; }
.cc-state-badge[data-state="warn"]     { background: #fff7ed; color: #9a3412; }
.cc-state-badge[data-state="critical"] { background: #fee2e2; color: #dc2626; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.cc-btn-ghost {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500;
  color: #57606a; background: none;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 7px; padding: 6px 12px;
  cursor: pointer; transition: all 0.12s;
  white-space: nowrap;
}
.cc-btn-ghost:hover { background: #f7f8fa; color: #0d1117; border-color: rgba(0,0,0,0.18); }

.cc-btn-primary {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  color: #fff; background: #2563eb;
  border: none; border-radius: 7px; padding: 7px 14px;
  cursor: pointer; transition: background 0.12s;
}
.cc-btn-primary:hover { background: #1d4ed8; }

.cc-icon-btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px; cursor: pointer; color: #8b949e;
  transition: all 0.12s;
}
.cc-icon-btn:hover { background: #f7f8fa; color: #0d1117; }

/* ── Priority Strip — eine ruhige Zeile ─────────────────────────── */
.cc-priority {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 28px;
  font-size: 12px;
  border-bottom: 1px solid transparent;
}
.cc-priority-ok {
  background: #f6fdf8; color: #15803d;
  border-color: rgba(34,197,94,0.12);
}
.cc-priority-ok svg { color: #22c55e; flex-shrink: 0; opacity: 0.8; }
.cc-priority-issues {
  background: #fff;
  border-color: rgba(0,0,0,0.06);
}
.cc-priority-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.cc-priority-dot[data-sev="critical"] { background: #ef4444; }
.cc-priority-dot[data-sev="warn"]     { background: #f59e0b; }
.cc-priority-text {
  font-size: 12px; color: #57606a;
}

/* ── Inner Layout ───────────────────────────────────────────────── */
.cc-inner {
  padding: 24px 28px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── KPI Row ─────────────────────────────────────────────────────── */
.cc-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 1100px) { .cc-kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .cc-kpi-row { grid-template-columns: repeat(2, 1fr); } }

.cc-kpi {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 12px;
  padding: 16px 18px;
  transition: box-shadow 0.15s;
}
.cc-kpi:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.05); }

.cc-kpi-top {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 4px;
}
.cc-kpi-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
}
.cc-kpi-dot[data-state="critical"] { background: #ef4444; }
.cc-kpi-dot[data-state="warn"]     { background: #f59e0b; }

.cc-kpi-val {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.03em; color: #0d1117;
  line-height: 1.1;
}
.cc-kpi-lbl  { font-size: 11px; color: #8b949e; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.cc-kpi-sub  { font-size: 11px; color: #b0b8c4; margin-top: 2px; }

/* ── Main 2-col Grid ────────────────────────────────────────────── */
.cc-main-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) { .cc-main-grid { grid-template-columns: 1fr; } }

/* ── Cards ───────────────────────────────────────────────────────── */
.cc-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 14px;
  overflow: hidden;
}

.cc-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  gap: 10px; flex-wrap: wrap;
}
.cc-card-title {
  display: flex; align-items: center; gap: 8px;
}
.cc-card-actions {
  display: flex; align-items: center; gap: 6px;
}

.cc-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #8b949e;
}

.cc-count-badge {
  font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 20px;
  line-height: 1.5;
}
.cc-count-badge[data-sev="critical"] { background: #fee2e2; color: #dc2626; }
.cc-count-badge[data-sev="warn"]     { background: #fef9c3; color: #a16207; }

.cc-card-foot {
  padding: 8px 16px;
  font-size: 11px; color: #8b949e;
  border-top: 1px solid rgba(0,0,0,0.05);
  background: #fafafa;
}

/* ── Select ─────────────────────────────────────────────────────── */
.cc-select {
  font-size: 11px; color: #57606a;
  background: #f7f8fa; border: 1px solid rgba(0,0,0,0.1);
  border-radius: 6px; padding: 4px 8px;
  cursor: pointer; outline: none;
}
.cc-select:focus { border-color: #2563eb; }

/* ── Incident List ───────────────────────────────────────────────── */
.cc-incident-list {
  display: flex; flex-direction: column;
  max-height: 520px;
  overflow-y: auto;
}

.cc-incident {
  display: flex;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: background 0.1s;
}
.cc-incident:last-child { border-bottom: none; }
.cc-incident:hover { background: #fafbfc; }
.cc-incident[data-acked] { opacity: 0.4; }

/* Scanner-Gruppe: dezent abgesetzt, kein voller gelber Hintergrund */
.cc-incident-scanner {
  background: #fafbfc;
}
.cc-incident-scanner:hover { background: #f5f6f8; }

.cc-incident-bar {
  width: 3px; flex-shrink: 0;
}
.cc-incident-bar[data-sev="critical"] { background: #ef4444; }
.cc-incident-bar[data-sev="error"]    { background: #f97316; }
.cc-incident-bar[data-sev="warn"]     { background: #e8a000; }

.cc-incident-body {
  flex: 1; padding: 10px 14px; min-width: 0;
}
.cc-incident-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 3px; gap: 8px;
}
.cc-incident-left {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.cc-sev-pill {
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.07em; padding: 2px 6px;
  border-radius: 4px;
}
.cc-sev-pill[data-sev="critical"] { background: #fee2e2; color: #dc2626; }
.cc-sev-pill[data-sev="error"]    { background: #ffedd5; color: #c2410c; }
.cc-sev-pill[data-sev="warn"]     { background: #f1f3f5; color: #57606a; }

.cc-incident-code   { font-size: 11px; font-weight: 600; color: #444d56; font-family: 'SF Mono', 'Fira Code', monospace; }
.cc-incident-count  { font-size: 10px; color: #8b949e; background: #f1f3f5; padding: 1px 6px; border-radius: 10px; }
.cc-incident-time   { font-size: 11px; color: #b0b8c4; flex-shrink: 0; white-space: nowrap; }
.cc-incident-title  { font-size: 13px; color: #0d1117; font-weight: 500; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-incident-meta   { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #8b949e; }
.cc-incident-sep    { opacity: 0.3; }
.cc-incident-path   { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 10px; color: #b0b8c4; }

.cc-incident-actions { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.cc-act-ack {
  font-size: 11px; color: #57606a; background: none;
  border: 1px solid rgba(0,0,0,0.1); border-radius: 5px;
  padding: 3px 9px; cursor: pointer; transition: all 0.1s;
}
.cc-act-ack:hover { background: #f7f8fa; border-color: rgba(0,0,0,0.16); }
.cc-act-res {
  font-size: 11px; color: #15803d; background: none;
  border: 1px solid rgba(34,197,94,0.25); border-radius: 5px;
  padding: 3px 9px; cursor: pointer; transition: all 0.1s;
}
.cc-act-res:hover { background: #f0fdf4; }
.cc-act-sm { padding: 2px 7px; }
.cc-acked-label { font-size: 11px; color: #b0b8c4; }

/* ── Empty State ─────────────────────────────────────────────────── */
.cc-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 40px 20px;
  color: #8b949e; font-size: 13px; text-align: center;
}
.cc-empty svg { opacity: 0.35; }

/* ── Side Column ─────────────────────────────────────────────────── */
.cc-side-col { display: flex; flex-direction: column; gap: 14px; }

/* ── Service List — tabellarisch, keine Icons ────────────────────── */
.cc-svc-list { padding: 2px 0; }
.cc-svc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 12px;
}
.cc-svc-row:last-child { border-bottom: none; }
.cc-svc-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cc-svc-dot[data-status="operational"] { background: #22c55e; }
.cc-svc-dot[data-status="degraded"]    { background: #f59e0b; }
.cc-svc-dot[data-status="down"]        { background: #ef4444; }
.cc-svc-name { flex: 1; color: #444d56; font-weight: 400; }
.cc-svc-status { font-size: 11px; font-weight: 500; }
.cc-svc-status[data-status="operational"] { color: #8b949e; }
.cc-svc-status[data-status="degraded"]    { color: #a16207; }
.cc-svc-status[data-status="down"]        { color: #dc2626; }

/* ── Security Checks — tabellarisch ─────────────────────────────── */
.cc-sec-list { padding: 2px 0; }
.cc-sec-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; font-size: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.cc-sec-row:last-child { border-bottom: none; }
.cc-sec-pip {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.cc-sec-pip[data-ok="true"]  { background: #22c55e; }
.cc-sec-pip[data-ok="false"] { background: #ef4444; }
.cc-sec-lbl { flex: 1; color: #444d56; }
.cc-sec-val { font-size: 11px; font-weight: 500; }
.cc-sec-val[data-ok="true"]  { color: #8b949e; }
.cc-sec-val[data-ok="false"] { color: #dc2626; }
.cc-sec-score {
  font-size: 12px; font-weight: 600; padding: 2px 8px;
  border-radius: 20px;
}
.cc-sec-score[data-ok="true"]  { background: #f0fdf4; color: #15803d; }
.cc-sec-score[data-ok="false"] { background: #fff1f0; color: #dc2626; }

/* ── Bottom Grid ─────────────────────────────────────────────────── */
.cc-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) { .cc-bottom-grid { grid-template-columns: 1fr; } }

/* ── Mandant Control Grid — kein gelber Hintergrund ─────────────── */
.cc-mandanten-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid rgba(0,0,0,0.05);
}
@media (max-width: 1100px) { .cc-mandanten-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .cc-mandanten-grid { grid-template-columns: repeat(2, 1fr); } }

.cc-mandant-cell {
  padding: 16px 18px;
  border-right: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: background 0.1s;
}
.cc-mandant-cell:hover { background: #fafbfc; }
.cc-mandant-val {
  display: flex; align-items: center; gap: 6px;
  font-size: 22px; font-weight: 700; color: #0d1117;
  letter-spacing: -0.03em; line-height: 1; margin-bottom: 4px;
}
.cc-mandant-pip {
  width: 7px; height: 7px; border-radius: 50;
  background: #f59e0b; flex-shrink: 0; margin-top: 3px;
  border-radius: 50%;
}
.cc-mandant-lbl { font-size: 11px; font-weight: 500; color: #444d56; }
.cc-mandant-sub { font-size: 11px; color: #b0b8c4; margin-top: 1px; }

/* ── Activity Feed ───────────────────────────────────────────────── */
.cc-activity-list { max-height: 280px; overflow-y: auto; }
.cc-activity-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 16px; border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 12px;
}
.cc-activity-row:last-child { border-bottom: none; }
.cc-activity-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); flex-shrink: 0; margin-top: 4px;
}
.cc-activity-content { flex: 1; min-width: 0; }
.cc-activity-actor { font-weight: 600; color: #0d1117; }
.cc-activity-action { color: #57606a; }
.cc-activity-time { font-size: 11px; color: #8b949e; white-space: nowrap; flex-shrink: 0; }

/* ── Owner Section ───────────────────────────────────────────────── */
.cc-owner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(0,0,0,0.05);
}
@media (max-width: 800px) { .cc-owner-grid { grid-template-columns: 1fr; } }

.cc-owner-col { padding: 18px 20px; border-right: 1px solid rgba(0,0,0,0.05); }
.cc-owner-col:last-child { border-right: none; }
.cc-owner-section-label { font-size: 10px; font-weight: 700; color: #8b949e; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; }

.cc-owner-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; border-bottom: 1px solid rgba(0,0,0,0.04); }
.cc-owner-row:last-child { border-bottom: none; }
.cc-owner-row span { color: #8b949e; }
.cc-owner-row strong { color: #0d1117; font-weight: 600; }
.cc-ok { color: #15803d !important; }

.cc-admin-form { display: flex; flex-direction: column; gap: 8px; }
.cc-admin-form input, .cc-admin-form select {
  font-size: 12px; padding: 7px 10px;
  border: 1px solid rgba(0,0,0,0.1); border-radius: 7px;
  background: #f7f8fa; color: #0d1117; outline: none;
  transition: border-color 0.12s;
}
.cc-admin-form input:focus, .cc-admin-form select:focus { border-color: #2563eb; background: #fff; }

.cc-admin-list { display: flex; flex-direction: column; gap: 4px; }
.cc-admin-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 0; border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 12px;
}
.cc-admin-row:last-child { border-bottom: none; }
.cc-admin-av {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #2563eb);
  color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cc-admin-info { flex: 1; min-width: 0; }
.cc-admin-info span { display: block; color: #0d1117; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-admin-info small { color: #8b949e; }
.cc-owner-tag { font-size: 10px; font-weight: 700; color: #7c3aed; background: #ede9fe; padding: 2px 8px; border-radius: 10px; }

/* ── Uptime Strip ────────────────────────────────────────────────── */
.cc-uptime-strip {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-top: 1px solid rgba(0,0,0,0.05);
  font-size: 11px; color: #b0b8c4;
  background: #fafbfc;
}

/* ── Skeleton ────────────────────────────────────────────────────── */
.cc-skeleton-page { padding: 20px 28px; display: flex; flex-direction: column; gap: 16px; }
.cc-skel {
  background: linear-gradient(90deg, #f0f1f3 25%, #e8e9ec 50%, #f0f1f3 75%);
  background-size: 200% 100%;
  animation: skeleton-sweep 1.4s ease-in-out infinite;
  border-radius: 12px;
}
@keyframes skeleton-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Scrollbar ───────────────────────────────────────────────────── */
.cc-incident-list::-webkit-scrollbar,
.cc-activity-list::-webkit-scrollbar { width: 4px; }
.cc-incident-list::-webkit-scrollbar-track,
.cc-activity-list::-webkit-scrollbar-track { background: transparent; }
.cc-incident-list::-webkit-scrollbar-thumb,
.cc-activity-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }

/* ── Badge (Sidebar) ─────────────────────────────────────────────── */
#monitoring-nav-badge {
  border-radius: 10px;
  padding: 2px 7px;
  font-size: 10px; font-weight: 700;
  line-height: 1.4; min-width: 20px; text-align: center;
  color: #fff; margin-left: auto;
}
#monitoring-nav-badge[data-severity="critical"] { background: #ef4444; }
#monitoring-nav-badge[data-severity="warn"]     { background: #f59e0b; }