.status {
    margin: 10px;
    padding: 10px 10px;
    border-radius: 6px;
    font-size: 12px;
}

.ok { background: #14532d; color: #22c55e; }
.fail { background: #450a0a; color: #ef4444; }

/* ── LAYOUT ── */
.layout { display:grid; grid-template-columns:240px 1fr; min-height:100vh; margin-top: 50px;}
@media(max-width:800px){ .layout { grid-template-columns:1fr; } }

/* ── SIDEBAR ── */
.sidebar {
  background:var(--bg2); border-right:1px solid var(--border2);
  padding:24px 16px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
@media(max-width:800px){ .sidebar { display:none; } }
.brand {
  font-family:var(--fh); font-size:1.1rem; font-weight:800;
  color:var(--text); padding:0 8px 20px; border-bottom:1px solid var(--border2); margin-bottom:20px;
}
.brand span { color:var(--cyan); }
.brand sub { font-family:var(--fm); font-size:0.55rem; color:var(--subtle); display:block; letter-spacing:0.08em; text-transform:uppercase; margin-top:2px; }

.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:20px; padding-top:20px; border-top:1px solid var(--border2); }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 10px; text-align:center; }
.stat-val { font-family:var(--fh); font-size:1.4rem; font-weight:800; line-height:1; margin-bottom:3px; }
.stat-lbl { font-size:0.64rem; color:var(--subtle); font-family:var(--fm); letter-spacing:0.07em; text-transform:uppercase; }
.sv-c { color:var(--cyan); }
.sv-o { color:var(--coral); }
.sv-g { color:var(--green); }
.sv-y { color:var(--yellow); }


.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.card {
  background: #1e293b;
  padding: 15px;
  border-radius: 8px;
}

.value {
  font-size: 22px;
  margin-top: 10px;
}

.chart-row {
    margin-top: 20px;
}

.chart-card {
    width: 100%;
}

.chart-title {
    margin-bottom: 15px;
    font-size: 14px;
    opacity: 0.8;
}

.table-panel {
    width: 100%;
}

table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
  background: #1e293b;
  border-radius: 8px;
  overflow: hidden;
}

th, td {
  padding: 10px;
  border-bottom: 1px solid #334155;
}

tr:hover {
  background: #334155;
  cursor: pointer;
}

.selected-row {
  background: #ff6b47 !important; /* coral orange */
  color: #0f172a;
}

.selected-row:hover {
  background: #ff6b47 !important;
}
tr {
  transition: background 0.2s ease, color 0.2s ease;
}

/* Selection highlight (coral orange) */
.selected-row {
  background: #ff6b47 !important;
  color: #0f172a;
}

/* Status colors */
.status-healthy {
  color: #00e5a0;
}

.status-warning {
  color: #ffd166;
}

.status-critical {
  color: #ff4d6d;
}

/* Right panel */
.table-details-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 15px;
  margin-top: 20px;
}

.side-panel {
  background: #1e293b;
  padding: 15px;
  border-radius: 8px;
  min-height: 200px;
}

.side-title {
  font-size: 14px;
  opacity: 0.7;
}

.compare-box {
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.8;
}