* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #1a1d21; color: #e8eaed; overflow: hidden; }

#sentry-app { display: grid; grid-template-rows: 56px 1fr 160px; height: 100vh; }

.topbar { display: flex; align-items: center; gap: 16px; padding: 0 16px; background: #0f1115; border-bottom: 1px solid #2a2f37; }
.topbar h1 { font-size: 16px; font-weight: 600; letter-spacing: 0.5px; }
.topbar .conn { font-size: 12px; opacity: 0.85; }
.topbar .conn.up { color: #4ade80; }
.topbar .conn.down { color: #ef4444; }
.topbar .spacer { flex: 1; }
.topbar select, .topbar button { background: #1a1d21; color: #e8eaed; border: 1px solid #2a2f37; padding: 4px 10px; border-radius: 4px; font-size: 12px; cursor: pointer; }
.topbar button:hover { border-color: #3a4048; }

.main { display: grid; grid-template-columns: 1fr 360px; min-height: 0; }

#map { height: 100%; background: #2a2f37; }

.right-panel { background: #14171c; border-left: 1px solid #2a2f37; overflow-y: auto; padding: 16px; }
.right-panel h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; opacity: 0.65; margin-bottom: 12px; }
.sensor-list { display: flex; flex-direction: column; gap: 8px; }
.sensor-item { padding: 12px; background: #1a1d21; border: 1px solid #2a2f37; border-radius: 6px; cursor: pointer; transition: border-color 0.15s; }
.sensor-item:hover { border-color: #3a4048; }
.sensor-item h3 { font-size: 14px; margin-bottom: 4px; }
.sensor-item .badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge { font-size: 10px; padding: 2px 6px; border-radius: 3px; background: #2a2f37; }
.badge.present { background: #2563eb; }
.badge.intruder { background: #dc2626; }
.badge.connected { background: #059669; }
.badge.offline { background: #4b5563; }

.detail-panel { padding: 16px 0; }
.detail-panel h3 { font-size: 16px; margin-bottom: 12px; }
.detail-panel canvas { display: block; margin: 12px 0; background: #0f1115; border-radius: 6px; }
.detail-panel table { width: 100%; font-size: 12px; }
.detail-panel td { padding: 4px 0; }
.detail-panel td:first-child { opacity: 0.65; }

.movement-log { background: #0f1115; border-top: 1px solid #2a2f37; overflow-y: auto; padding: 8px 16px; font-family: 'Cascadia Code', 'Consolas', monospace; font-size: 11px; }
.movement-log .entry { padding: 4px 0; opacity: 0.85; }
.movement-log .entry.alert-warning { color: #fbbf24; }
.movement-log .entry.alert-critical { color: #ef4444; font-weight: 600; }

/* Leaflet overrides */
.leaflet-container { background: #1a1d21; }
.sentry-pin { display: flex; align-items: center; justify-content: center; }
.target-marker { stroke: #fff; stroke-width: 1.5; }

/* Floor-plan calibration UI */
.floorplan-upload { font-size: 12px; max-width: 200px; }
.floorplan-calibrate-btn { background: #f59e0b; color: #0f1115; font-weight: 600; }

/* ----- Flipper Field Kit topbar button ----- */
/* Active state matches the Batcave amber accent used by flipper_kit.js. */
.flipper-btn-active { background: #F7B32B !important; color: #0a0d12 !important; font-weight: 700 !important; border-color: #F7B32B !important; letter-spacing: 0.05em; }