/* collector_map.css — styles for the collector-network dot-matrix map and the
   global/region/custom assignment selector on /manage/monitors. */

/* --- Dot-matrix network map (ported wrapper from marketing-site) --- */
.cs-map-wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-header, #0b1020);
}
.cs-map-wrap canvas { display: block; width: 100%; }
.cs-map-tip {
  position: absolute;
  z-index: 5;
  min-width: 120px;
  max-width: 200px;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-size: 0.72rem;
  line-height: 1.25;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.cs-map-tip strong { display: block; font-size: 0.8rem; }
.cs-map-tip span { display: block; color: #7ef0c0; }
.cs-map-tip em { display: block; font-style: normal; color: #9aa7bd; font-size: 0.66rem; margin-top: 2px; }
.cs-map-legend { font-size: 0.72rem; color: var(--text-secondary); margin-top: 6px; }

/* --- Collector scope selector --- */
.cs-scope-global-row { display: block; margin: 6px 0; }
.cs-scope-regions {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px 8px;
  max-height: 240px;
  overflow: auto;
}
.cs-region { padding: 3px 0; border-bottom: 1px solid rgba(127, 127, 127, 0.12); }
.cs-region:last-child { border-bottom: 0; }
.cs-region-head { display: flex; align-items: center; gap: 8px; }
.cs-region-label { margin: 0; flex: 1 1 auto; }
.cs-region-custom { font-size: 0.72rem; text-decoration: underline; cursor: pointer; }
.cs-region-collapse { cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); }
.cs-region-locs { margin: 4px 0 6px 22px; display: flex; flex-direction: column; gap: 2px; }
.cs-loc { margin: 0; }