/* Custom navbar breakpoint: expand at 900px */
@media (min-width: 900px) {
  .navbar-expand-900 { flex-wrap: nowrap; justify-content: flex-start; }
  .navbar-expand-900 .navbar-nav { flex-direction: row; }
  .navbar-expand-900 .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x, 0.5rem);
    padding-left:  var(--bs-navbar-nav-link-padding-x, 0.5rem);
  }
  .navbar-expand-900 .navbar-nav .dropdown-menu { position: absolute; }
  .navbar-expand-900 .navbar-collapse { display: flex !important; flex-basis: auto; }
  .navbar-expand-900 .navbar-toggler  { display: none; }
}

/* Meyston Reed Monitor — Theme (inherited from EMS Platform) */

:root,
[data-bs-theme="dark"] {
  --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);
  --led-alarm:  #ff5252;
  --alarm-glow: rgba(255, 82, 82, 0.5);
  --border:     rgba(255,255,255,.08);
  --text-body:  #d0d4e0;
  --text-muted-custom: #6b7280;
}

[data-bs-theme="light"] {
  --bg-body:    #f0f2f5;
  --bg-card:    #ffffff;
  --bg-card2:   #f4f6f8;
  --accent:     #e65100;
  --led-on:     #00a846;
  --led-off:    #c8cdd6;
  --led-glow:   rgba(0, 168, 70, 0.4);
  --led-alarm:  #d32f2f;
  --alarm-glow: rgba(211, 47, 47, 0.4);
  --border:     rgba(0,0,0,.10);
  --text-body:  #1a1d2e;
  --text-muted-custom: #6b7280;
}

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

/* ── 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;
}
[data-bs-theme="light"] .card-header {
  background: rgba(0,0,0,.04);
}

/* ── 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: var(--text-muted-custom);
}

/* ── 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; }
.unit-mqtt-badge.status-online       { background: #1b4d2e; color: #00e676; }
.unit-mqtt-badge.status-stale        { background: #3a2510; color: #ffa726; }
[data-bs-theme="light"] .unit-mqtt-badge.status-connected    { background: #d4edda; color: #155724; }
[data-bs-theme="light"] .unit-mqtt-badge.status-disconnected { background: #f8d7da; color: #721c24; }
[data-bs-theme="light"] .unit-mqtt-badge.status-error        { background: #fff3cd; color: #856404; }
[data-bs-theme="light"] .unit-mqtt-badge.status-online       { background: #d4edda; color: #155724; }
[data-bs-theme="light"] .unit-mqtt-badge.status-stale        { background: #fff3cd; color: #856404; }

/* ── 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; }
[data-bs-theme="light"] #mqtt-status.status-connected    { background: #d4edda; color: #155724; }
[data-bs-theme="light"] #mqtt-status.status-disconnected { background: #f8d7da; color: #721c24; }
[data-bs-theme="light"] #mqtt-status.status-error        { background: #fff3cd; color: #856404; }

#unit-online-status {
  font-size: .75rem;
  border-radius: 1rem;
  padding: .25rem .6rem;
}
#unit-online-status.status-online  { background: #1b4d2e; color: #00e676; }
#unit-online-status.status-stale   { background: #3a2510; color: #ffa726; }
#unit-online-status.status-disconnected { background: #3a1a1a; color: #ef5350; }
[data-bs-theme="light"] #unit-online-status.status-online  { background: #d4edda; color: #155724; }
[data-bs-theme="light"] #unit-online-status.status-stale   { background: #fff3cd; color: #856404; }
[data-bs-theme="light"] #unit-online-status.status-disconnected { background: #f8d7da; color: #721c24; }

/* ── Alarm state (overrides .active) ─────────────────────────────────────── */

.led.alarm,
.mini-led.alarm {
  background: var(--led-alarm);
  box-shadow: 0 0 8px 2px var(--alarm-glow);
}
.input-card.alarm {
  border-color: var(--led-alarm);
  box-shadow: 0 0 0 1px var(--led-alarm) inset;
}
.input-state-text.alarm { color: var(--led-alarm); font-weight: 600; }

/* ── Bridge / node info ─────────────────────────────────────────────────── */

#bridge-status {
  font-size: .75rem;
  border-radius: 1rem;
  padding: .25rem .6rem;
  background: var(--bg-card2);
  color: var(--text-body);
  border: 1px solid var(--border);
}
.signal-bars { letter-spacing: -1px; }

.node-info dt { font-weight: 500; color: var(--text-muted-custom); font-size: .75rem; }
.node-info dd { font-size: .8rem; margin-bottom: .35rem; }

/* ── 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; }
[data-bs-theme="light"] .role-badge-eagle_micro  { background: #dbeafe; color: #1e40af; }
[data-bs-theme="light"] .role-badge-distributor  { background: #ede9fe; color: #6d28d9; }
[data-bs-theme="light"] .role-badge-client       { background: #d1fae5; color: #065f46; }
[data-bs-theme="light"] .role-badge-manager      { background: #fef3c7; color: #92400e; }
[data-bs-theme="light"] .role-badge-user         { background: #f3f4f6; color: #374151; }

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

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

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

[data-bs-theme="dark"] #units-table {
  --bs-table-bg: var(--bg-card);
  --bs-table-hover-bg: rgba(255,255,255,.04);
  --bs-table-border-color: var(--border);
  --bs-table-color: var(--text-body);
}

#units-table tbody tr { transition: opacity .15s; }
#units-table tbody td { font-size: .82rem; white-space: nowrap; }

/* ── Hierarchy Tree ──────────────────────────────────────────────────────── */

.unit-tree {
  padding: 0;
  list-style: none;
  margin: 0;
}

.unit-tree ul.tree-children {
  list-style: none;
  padding-left: 1.4rem;
  margin: .15rem 0 .15rem .6rem;
  border-left: 1px solid var(--border);
}

.tree-node {
  padding: .25rem .3rem;
  border-radius: .35rem;
  transition: background .15s;
}

.tree-node-label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .2rem;
  cursor: default;
  padding: .1rem 0;
}

.tree-node-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .2rem;
}

.tree-node-link:hover {
  color: var(--accent);
}

.tree-distributor > .tree-node-label { font-size: .9rem; }
.tree-client     > .tree-node-label  { font-size: .875rem; }
.tree-unit                           { font-size: .85rem; }
.tree-user                           { font-size: .8rem; }

/* Orphan device nodes */
.tree-orphan { font-size: .85rem; }
.tree-orphan .tree-node-label { cursor: grab; }
.tree-orphan .tree-node-label:active { cursor: grabbing; }

/* Draggable unit nodes (client role) */
.tree-unit[draggable="true"] .tree-node-link { cursor: grab; }
.tree-unit[draggable="true"] .tree-node-link:active { cursor: grabbing; }

/* Drop target highlight */
.tree-drop-active {
  background: rgba(255, 167, 38, .12) !important;
  outline: 1px dashed var(--accent);
  border-radius: .35rem;
}

[data-bs-theme="light"] .tree-drop-active {
  background: rgba(230, 81, 0, .08) !important;
}

/* Drop hints are hidden until tree view is active (toggled by JS) */
.tree-drop-hint {
  font-size: .7rem;
  opacity: .6;
  display: none;
}

/* ── User Hierarchy Tree (Admin → Users page) ────────────────────────────── */

.user-tree {
  padding: 0;
  list-style: none;
  margin: 0;
}

.user-tree-children {
  list-style: none;
  padding-left: 1.4rem;
  margin: .1rem 0 .1rem .6rem;
  border-left: 1px solid var(--border);
}

.user-node-label {
  transition: background .15s;
}
.user-node-label:hover {
  background: rgba(255, 255, 255, .04);
}
[data-bs-theme="light"] .user-node-label:hover {
  background: rgba(0, 0, 0, .04);
}

.user-node-actions {
  opacity: 0;
  transition: opacity .15s;
}
.user-node-label:hover .user-node-actions {
  opacity: 1;
}

.user-tree-node[draggable="true"] > .user-node-label {
  cursor: grab;
}
.user-tree-node[draggable="true"]:active > .user-node-label {
  cursor: grabbing;
}

.user-tree-node.user-drag-source {
  opacity: .4;
}

.user-tree-node.user-drop-active > .user-node-label {
  background: rgba(255, 167, 38, .12) !important;
  outline: 1px dashed var(--accent);
  border-radius: .35rem;
}
[data-bs-theme="light"] .user-tree-node.user-drop-active > .user-node-label {
  background: rgba(230, 81, 0, .08) !important;
}

/* Role left-border accents */
.user-tree-node.user-tree-distributor > .user-node-label { border-left: 3px solid #ce93d8; }
.user-tree-node.user-tree-client      > .user-node-label { border-left: 3px solid #66bb6a; }
.user-tree-node.user-tree-manager     > .user-node-label { border-left: 3px solid #ffd54f; }
.user-tree-node.user-tree-user        > .user-node-label { border-left: 3px solid #bdbdbd; }

[data-bs-theme="light"] .user-tree-node.user-tree-distributor > .user-node-label { border-left-color: #6d28d9; }
[data-bs-theme="light"] .user-tree-node.user-tree-client      > .user-node-label { border-left-color: #065f46; }
[data-bs-theme="light"] .user-tree-node.user-tree-manager     > .user-node-label { border-left-color: #92400e; }
[data-bs-theme="light"] .user-tree-node.user-tree-user        > .user-node-label { border-left-color: #374151; }