html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: sans-serif;

  display: flex;
  flex-direction: column;
}

.layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

/* ============================
   Leaflet popup base
   ============================ */
.leaflet-popup-content {
  overflow: visible !important;
  margin: 10px 12px;
  line-height: 1.35;
}

.leaflet-popup-content a { text-decoration: none; }
.leaflet-popup-content a:hover { text-decoration: underline; }

/* Optional polish */
.leaflet-popup-content-wrapper { border-radius: 10px; }
.leaflet-popup-tip { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.12)); }

.live-on { color: #2ecc71; font-weight: bold; }
.live-off { color: #e74c3c; }

/* ============================
   Popup content
   ============================ */

.osr-popup {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
  max-width: 360px;
}


.osr-popup .hdr { font-weight: 700; font-size: 14px; margin-bottom: 2px; text-align: center; }
.osr-popup .sub { color: #444; margin-bottom: 6px; }

.osr-popup .sep { margin: 8px 0; border-top: 1px solid rgba(0,0,0,0.12); }

.osr-popup a { text-decoration: none; }
.osr-popup a:hover { text-decoration: underline; }

.osr-popup .muted { color: #666; }

/* ============================
   Key/value grid (updated)
   - makes values right-aligned and wraps long text nicely
   ============================ */
.osr-popup .grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr; /* label | value */
  column-gap: 10px;
  row-gap: 4px;
  align-items: start;
}

/* labels */
.osr-popup .lbl {
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* values */
.osr-popup .val {
  color: #111;
  text-align: right;
  overflow-wrap: anywhere; /* long serials, URLs */
  word-break: break-word;
}

/* ============================
   Status pill (kept from your original)
   ============================ */
.osr-popup .pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,0.15);
}
.osr-popup .pill.OK { background: rgba(0,128,0,0.12); }
.osr-popup .pill.WARN { background: rgba(255,165,0,0.18); }
.osr-popup .pill.DOWN { background: rgba(255,0,0,0.14); }
.osr-popup .pill.UNKNOWN { background: rgba(128,128,128,0.16); }
.osr-popup .pill.NORMAL  { background: rgba(0,128,0,0.12); }
.osr-popup .pill.WARNING { background: rgba(255,165,0,0.18); }
.osr-popup .pill.ERROR   { background: rgba(255,0,0,0.14); }

/* ============================
   Resources + details blocks
   ============================ */
.osr-popup .res { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,0.08); }
.osr-popup .res-name { font-weight: 700; margin-bottom: 4px; }
.osr-popup .res-attrs { margin-top: 2px; color: #222; overflow-wrap: anywhere; word-break: break-word; }

/* details/summary expanders (improved) */
.osr-popup details { margin-top: 6px; }
.osr-popup details > summary {
  cursor: pointer;
  user-select: none;
  color: #666;
  list-style: none;
}
.osr-popup details > summary::-webkit-details-marker { display: none; }
.osr-popup details > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  transform: translateY(-1px);
}
.osr-popup details[open] > summary::before { content: "▾"; }

/* ============================
   Optional: nicer scrollbars (Chrome/Edge/Safari)
   ============================ */
.osr-popup::-webkit-scrollbar { width: 10px; }
.osr-popup::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 10px;
}
.osr-popup::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.04); }

/* Make resource sections collapsible with a visible disclosure arrow */
.osr-popup details > summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.osr-popup details > summary::-webkit-details-marker {
  display: none; /* hide browser marker */
}

.osr-popup details > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  transform: translateY(-1px);
  color: #666;
}

.osr-popup details[open] > summary::before {
  content: "▾";
}

/* ----------------------------
   Pro pattern: popup "sheet"
   ---------------------------- */

/* Let Leaflet content area clip; scrolling happens inside our .osr-popup */
.leaflet-popup-content {
  overflow: hidden !important;  /* override your previous visible */
}

/* Base: normal compact popup */
.osr-popup {
  min-width: 280px;
  max-width: 420px;             /* helps avoid huge widths */
  overflow: visible;
}

.osr-popup.expanded {
  max-height: min(45vh, 360px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* (Optional) Make the wrapper also behave nicely */
.leaflet-popup-content-wrapper {
  max-height: none;             /* don't let wrapper clip our scroll area */
}

/* Sticky header row inside the sheet */
.osr-popup .hdr {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  padding: 6px 0 4px;
  margin: 0;                    /* override your margin-bottom */
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Put the "sub" under the sticky header; also sticky if you like */
.osr-popup .sub {
  position: sticky;
  top: 28px;                    /* below hdr; adjust if needed */
  z-index: 2;
  background: #fff;
  padding: 4px 0 6px;
  margin: 0 0 6px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Optional: sticky expand/collapse control row */
.osr-popup .expander-row {
  position: sticky;
  top: 58px;                    /* below hdr+sub; adjust as needed */
  z-index: 2;
  background: #fff;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Make details sections feel "inspector-like" */
.osr-popup details {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 6px 10px;
  margin: 8px 0;
  background: rgba(0,0,0,0.02);
}

.osr-popup details > summary {
  font-weight: 700;
  color: #444;
}

/* Keep your scrollbar polish (works when expanded) */
.osr-popup.expanded::-webkit-scrollbar { width: 10px; }
.osr-popup.expanded::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 10px;
}
.osr-popup.expanded::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.04); }

#map {
  width: 100%;
  height: 100%;
}

.map-panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

.map-panel #map {
  flex: 1 1 auto;
}

.table-panel {
  flex: 0 0 25%;
  width: 25%;
  min-width: 280px;
  max-width: 25%;
  border-right: 1px solid #ccc;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.table-panel-header {
  padding: 8px 10px;
  border-bottom: 1px solid #ccc;
  font-weight: 600;
  background: #f5f5f5;
}

.hidden {
  display: none;
}

#statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 4px 10px;
  background: #f5f5f5;
  font-size: 14px;

  border-top: 1px solid #ccc;

  flex: 0 0 auto;
}