/* ═══════════════════════════════════════════════════
   DASHBOARD — Role-specific styles
   ═══════════════════════════════════════════════════ */

/* ── Role Badge & Switcher ── */
.role-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 8px; border-radius: 4px; font-family: var(--font-mono);
  background: rgba(59, 130, 246, 0.2); color: var(--accent-blue);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.role-switcher select {
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px 8px; font-size: 11px; font-family: var(--font-body);
  cursor: pointer; outline: none;
}
.role-switcher select:hover { border-color: var(--accent-blue); }
.role-switcher select:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.15);
}

/* ── Dashboard Title ── */
.dashboard-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--accent-cyan);
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ── KPI Row ── */
.kpi-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

.kpi-card {
  flex: 1; min-width: 70px; padding: 8px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-card); border: 1px solid var(--border);
  text-align: center;
}
.kpi-card .kv { font-size: 18px; font-weight: 700; font-family: var(--font-mono); }
.kpi-card .kl {
  font-size: 9px; color: var(--text-secondary); margin-top: 2px;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.kpi-card.blue .kv    { color: var(--accent-blue); }
.kpi-card.cyan .kv    { color: var(--accent-cyan); }
.kpi-card.emerald .kv { color: var(--accent-emerald); }
.kpi-card.amber .kv   { color: var(--accent-amber); }
.kpi-card.rose .kv    { color: var(--accent-rose); }
.kpi-card.violet .kv  { color: var(--accent-violet); }

/* ── Health Bar ── */
.health-bar {
  display: flex; height: 8px; border-radius: 4px;
  overflow: hidden; margin: 8px 0;
}
.health-bar .seg { transition: width 0.5s ease; }
.health-bar .seg.good     { background: var(--accent-emerald); }
.health-bar .seg.fair     { background: var(--accent-cyan); }
.health-bar .seg.poor     { background: var(--accent-amber); }
.health-bar .seg.critical { background: var(--accent-rose); }

/* ── Data Row ── */
.data-row {
  padding: 6px 8px; border-radius: var(--radius-sm); margin-bottom: 4px;
  background: var(--bg-card); border: 1px solid var(--border);
  font-size: 11px; display: flex;
  justify-content: space-between; align-items: center;
}
.data-row:hover { border-color: var(--accent-blue); background: var(--bg-card-hover); }
.data-row .dr-label { color: var(--text-primary); font-weight: 500; }
.data-row .dr-value { color: var(--text-secondary); font-family: var(--font-mono); font-size: 10px; }

.data-row .dr-badge {
  font-size: 9px; padding: 1px 6px; border-radius: 3px; font-weight: 600;
}
.dr-badge.good     { background: rgba(16, 185, 129, 0.15); color: var(--accent-emerald); }
.dr-badge.poor     { background: rgba(245, 158, 11, 0.15); color: var(--accent-amber); }
.dr-badge.critical { background: rgba(244, 63, 94, 0.15); color: var(--accent-rose); }