/* EMS Platform — Dark Theme */

:root {
  --bg-body:    #0f1117;
  --bg-card:    #1a1d2e;
  --bg-card2:   #1e2130;
  --accent:     #ffa726;
  --led-on:     #00e676;
  --led-off:    #2a2f44;
  --led-glow:   rgba(0, 230, 118, 0.45);
  --border:     rgba(255,255,255,.08);
}

body {
  background: var(--bg-body);
  color: #d0d4e0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: .6rem;
}

.card-header {
  background: rgba(0,0,0,.2);
  border-bottom: 1px solid var(--border);
  letter-spacing: .05em;
  font-size: .75rem;
}

/* ── Unit card (units list) ──────────────────────────────────────────────── */

.unit-card {
  transition: border-color .2s, box-shadow .2s;
}
.unit-card:hover {
  border-color: rgba(255,167,38,.35);
  box-shadow: 0 0 12px rgba(255,167,38,.12);
}

/* ── LED (unit view — full size) ─────────────────────────────────────────── */

.led {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--led-off);
  border: 2px solid rgba(255,255,255,.1);
  transition: background .25s, box-shadow .25s;
}

.led.active {
  background: var(--led-on);
  box-shadow: 0 0 8px 2px var(--led-glow);
}

/* ── Input card ──────────────────────────────────────────────────────────── */

.input-card {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: .5rem;
  transition: border-color .2s;
}
.input-card.active {
  border-color: rgba(0, 230, 118, .45);
}

/* ── Mini LEDs (units list) ──────────────────────────────────────────────── */

.mini-led-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.mini-led-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.mini-led {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--led-off);
  border: 1px solid rgba(255,255,255,.1);
  transition: background .25s, box-shadow .2s;
}

.mini-led.active {
  background: var(--led-on);
  box-shadow: 0 0 5px 1px var(--led-glow);
}

.mini-led-label {
  font-size: .6rem;
  color: #6b7280;
}

/* ── MQTT status badge (unit card mini) ──────────────────────────────────── */

.unit-mqtt-badge {
  font-size: .7rem;
  border-radius: 1rem;
}
.unit-mqtt-badge.status-connected    { background: #1b4d2e; color: #00e676; }
.unit-mqtt-badge.status-disconnected { background: #3a1a1a; color: #ef5350; }
.unit-mqtt-badge.status-error        { background: #3a2510; color: #ffa726; }

/* ── MQTT status badge (unit view) ──────────────────────────────────────── */

#mqtt-status {
  font-size: .75rem;
  border-radius: 1rem;
  padding: .25rem .6rem;
}
#mqtt-status.status-connected    { background: #1b4d2e; color: #00e676; }
#mqtt-status.status-disconnected { background: #3a1a1a; color: #ef5350; }
#mqtt-status.status-error        { background: #3a2510; color: #ffa726; }

/* ── Relay card & switch ─────────────────────────────────────────────────── */

.relay-card {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: .5rem;
  transition: border-color .2s;
}
.relay-card.active {
  border-color: rgba(255,167,38,.5);
}

.form-check-input.relay-switch {
  width: 2.2em;
  height: 1.2em;
  cursor: pointer;
}
.form-check-input.relay-switch:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}
.form-check-input.relay-switch:focus {
  box-shadow: 0 0 0 .2rem rgba(255,167,38,.35);
}

/* Read-only relay indicator */
.relay-indicator {
  font-size: 1.2rem;
  line-height: 1.5;
  color: #4a5070;
}
.relay-indicator .relay-icon.active {
  color: var(--accent);
}

/* ── Role badges ─────────────────────────────────────────────────────────── */

.role-badge-eagle_micro  { background: #1a3a5c; color: #64b5f6; }
.role-badge-distributor  { background: #2a1f5c; color: #ce93d8; }
.role-badge-client       { background: #1a4a2e; color: #66bb6a; }
.role-badge-manager      { background: #3a3010; color: #ffd54f; }
.role-badge-user         { background: #2a2a2a; color: #bdbdbd; }

/* ── Typography helpers ──────────────────────────────────────────────────── */

.x-small { font-size: .7rem; }

/* ── Tables ──────────────────────────────────────────────────────────────── */

.table-dark {
  --bs-table-bg: var(--bg-card);
  --bs-table-hover-bg: rgba(255,255,255,.04);
  --bs-table-border-color: var(--border);
}