/* Glassy backgrounds */
.bg-glass {
  background: rgba(16,22,48,.68) !important;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

/* Map */
#map{position:fixed; inset:0;}
.leaflet-container{background:#0b1020;}
.leaflet-control-attribution{background:rgba(0,0,0,.3)!important; color:#d1dcff!important}
.leaflet-control-container{ z-index: 1080; }
/* Leave room for navbar above map controls (JS sets --nav-h) */
:root { --nav-h: 56px; }
.leaflet-top { top: calc(var(--nav-h, 56px) + 8px) !important; }

/* Offcanvas: explicit background + blur (don't rely on --bs-offcanvas-bg) */
.offcanvas {
  background-color: rgb(33 37 41 / 100%) !important;
  color: var(--bs-body-color);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 16px 50px rgba(0,0,0,.55);
}

/* Narrower Devices panel (left) */
.offcanvas-start { --bs-offcanvas-width: 300px; }
@media (min-width: 1400px){
  .offcanvas-start { --bs-offcanvas-width: 320px; }
}

/* Right panel width (keep comfy) */
.offcanvas-end { --bs-offcanvas-width: 360px; }
@media (min-width: 1400px){
  .offcanvas-end { --bs-offcanvas-width: 400px; }
}

/* Bottom-sheet height (mobile) */
.offcanvas-bottom {
  --bs-offcanvas-height: 85vh;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* Bottom-sheet handle visibility */
.sheet-handle {
  position:absolute; left:50%; transform:translateX(-50%);
  top:8px; width:48px; height:4px; border-radius:999px; background:rgba(255,255,255,.22);
}

/* Device list */
#device-list .list-group-item {
  background: transparent;
  border-color: rgba(255,255,255,.08);
  position: relative;              /* allow absolute children (pill + pencil) */
  padding-right: 9rem;             /* reserve space so text never collides */
}
#device-list .list-group-item:hover { background: rgba(255,255,255,.06); }

.device-title { font-weight: 600; }
.device-meta { font-size: .82rem; opacity: .9; }

/* Status pill look */
.badge-soft {
  background: rgba(20,30,70,.45);
  color: #dce5ff;
  border-radius: 50rem;
}

/* Presence dot */
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:.4rem}
.dot.ok{background:#2ecc71} .dot.warn{background:#f1c40f} .dot.bad{background:#ff5c5c}

/* Pin the ONLINE/OFFLINE pill to the top-right */
#device-list .status-abs{
  position: absolute;
  top: .5rem;
  right: .5rem;
  white-space: nowrap;
  max-width: 11rem;                /* keep tidy on narrow panels */
  overflow: hidden;
  text-overflow: ellipsis;
}
#device-list .status-abs .dot { vertical-align: middle; margin-right: .4rem; }

/* Pin the pencil to the bottom-right (consistent alignment) */
#device-list .rename-abs-bottom{
  position: absolute;
  right: .5rem;
  bottom: .5rem;
}

/* Keep meta lines on one line; don't let long text wrap */
.device-meta .nowrap { white-space: nowrap; }

/* Status cards: one per line for clarity */
#status-cards .card { border: 1px solid rgba(255,255,255,.08); }
.card .kv { display:grid; grid-template-columns:auto 1fr; gap:.35rem .75rem; }
.card .kv .k{ color:#9db1ff; }
.card .kv .v{ color:#eaf1ff; }

/* Logs */
.logbox {
  min-height: 220px;
  max-height: 45vh;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
.logline .ts{color:#7ee787} .logline .imei{color:#79c0ff} .logline .hex{color:#c9d1d9}

/* Pulse marker */
.pulse{
  width:16px; height:16px; border-radius:50%;
  background:#5ea2ff; box-shadow:0 0 0 0 rgba(94,162,255,.7); animation:pulse 2s infinite;
  border:2px solid #fff;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(94,162,255,.7)}
  70%{box-shadow:0 0 0 14px rgba(94,162,255,0)}
  100%{box-shadow:0 0 0 0 rgba(94,162,255,0)}
}

/* Leaflet tooltip style */
.leaflet-tooltip.trk-label{
  background: rgba(7, 12, 28, 0.92);
  color: #e6ebff;
  border: 1px solid rgba(94,162,255,.35);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.leaflet-tooltip.trk-label.leaflet-tooltip-top:before   { border-top-color:   rgba(7,12,28,0.92); }
.leaflet-tooltip.trk-label.leaflet-tooltip-bottom:before{ border-bottom-color:rgba(7,12,28,0.92); }
.leaflet-tooltip.trk-label.leaflet-tooltip-left:before  { border-left-color:  rgba(7,12,28,0.92); }
.leaflet-tooltip.trk-label.leaflet-tooltip-right:before { border-right-color: rgba(7,12,28,0.92); }

/* Chart popover (mini charts) */
.popover.chart-popover{
  max-width: 360px;
  width: 320px;
  background: rgba(20,26,54,.95);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.popover.chart-popover .popover-header{
  background: transparent;
  color: #dfe8ff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.popover.chart-popover .popover-body{
  padding: .5rem .5rem .75rem;
}

/* Show sheet handle on small screens */
@media (max-width: 768px){
  .sheet-handle{ display:block !important; }
}

/* Settings / modal helpers */
#btn-settings { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#aliasesTable td, #aliasesTable th { vertical-align: middle; }
.badge-dtc { font-weight:700; border:1px solid rgba(255,255,255,.2); }

/* Put selected device's label above others */
.leaflet-tooltip.trk-label.is-top { z-index: 10000; }

/* Static (non-pulsing) colored marker for warn/offline */
.marker { width:16px; height:16px; border-radius:50%; border:2px solid #fff; }
.marker.ok   { background:#2ecc71; }   /* optional if you ever want static green */
.marker.warn { background:#f1c40f; }
.marker.bad  { background:#ff5c5c; }