* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: system-ui, sans-serif; }
body { display: flex; }

#sidebar {
  width: 300px; min-width: 300px; height: 100%;
  display: flex; flex-direction: column;
  background: #1e2330; color: #e6e9ef; border-right: 1px solid #11141d;
}
#sidebar header { padding: 16px; border-bottom: 1px solid #11141d; }
#sidebar h1 { font-size: 16px; margin: 0 0 6px; }
.status { font-size: 12px; color: #8b93a7; }
.status.online { color: #4caf50; }
.status.offline { color: #e57373; }

#devices { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
#devices li {
  padding: 10px 16px; border-bottom: 1px solid #161a26; cursor: pointer;
}
#devices li:hover { background: #262c3b; }
#devices li.selected { background: #2f3850; }
#devices .name { font-weight: 600; font-size: 14px; }
#devices .meta { font-size: 12px; color: #8b93a7; margin-top: 2px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dot.online { background: #4caf50; }
.dot.offline { background: #e57373; }

#sidebar footer { padding: 12px 16px; border-top: 1px solid #11141d; }
#sidebar footer small { display: block; margin-top: 8px; color: #8b93a7; font-size: 11px; }
button {
  background: #3a4252; color: #e6e9ef; border: 1px solid #11141d;
  padding: 6px 12px; border-radius: 4px; cursor: pointer;
}
button:hover { background: #475063; }

#map { flex: 1; height: 100%; }