* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #222; }

#app { display: flex; flex-direction: column; height: 100dvh; }

header {
  padding: 10px 14px;
  border-bottom: 1px solid #e3e6e9;
  background: #fafbfc;
  flex: 0 0 auto;
}
header .top {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
header h1 {
  margin: 0; font-size: 19px; color: #1f7a32; flex: 0 0 auto;
}

.searchwrap {
  display: flex; gap: 6px;
  flex: 1 1 360px; min-width: 240px;
}
#q {
  flex: 1 1 auto; padding: 9px 12px; font-size: 16px;
  border: 1px solid #c4c9ce; border-radius: 6px; background: #fff;
}
#q:focus { outline: 2px solid #1f9d3c; border-color: #1f9d3c; }

header button {
  padding: 9px 14px; font-size: 15px;
  border-radius: 6px; border: 1px solid #c4c9ce;
  background: #fff; color: #222; cursor: pointer;
  white-space: nowrap;
}
header button:hover { background: #f0f2f4; }
#geocode { background: #1f9d3c; color: #fff; border-color: #1f9d3c; }
#geocode:hover { background: #17782e; }

/* статистика-фильтр */
#stats {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 13px; margin-top: 8px;
  color: #5a6066;
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: #f0f2f4; color: #444;
  border: 1px solid transparent;
  cursor: pointer; user-select: none;
  font-size: 13px;
  transition: background .1s, border-color .1s;
}
.pill:hover { background: #e6e9ec; }
.pill.active { border-color: #1f9d3c; background: #e3f5e8; color: #1f7a32; }
.pill.total.active { border-color: #5a6066; background: #e6e9ec; color: #222; }
.pill .dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.pill.st-online .dot      { background: #1f9d3c; }
.pill.st-maintenance .dot { background: #d68b00; }
.pill.st-unknown .dot     { background: #8a9099; }

main { flex: 1 1 auto; display: flex; min-height: 0; }
#map { flex: 1 1 auto; background: #e8eef2; }

#side {
  flex: 0 0 360px; max-width: 360px;
  border-left: 1px solid #e3e6e9; background: #fff;
  overflow-y: auto;
}
#list { list-style: none; padding: 0; margin: 0; }
#list li {
  padding: 11px 14px; border-bottom: 1px solid #eef0f2;
  cursor: pointer; transition: background .1s;
}
#list li:hover { background: #f5f7f9; }
#list li.active {
  background: #e3f5e8;
  border-left: 3px solid #1f9d3c;
  padding-left: 11px;
}
#list .line1 {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; line-height: 1.3;
}
#list .line1 .dot {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
}
#list .line1 .name { font-weight: 700; color: #222; }
#list .addr { font-size: 13px; color: #222; margin-top: 2px; }
#list .meta { font-size: 12px; color: #5a6066; margin-top: 3px; }
#list .note { font-size: 12px; color: #5a6066; margin-top: 3px; font-style: italic; }
#list .dist { font-size: 12px; color: #845800; margin-top: 3px; font-weight: 600; }
#list .empty { padding: 24px 16px; text-align: center; color: #8a9099; font-size: 14px; }

/* содержимое балуна Яндекс.Карт */
.bln-status     { font-weight: 700; }
.bln-status.online      { color: #1f9d3c; }
.bln-status.maintenance { color: #d68b00; }
.bln-status.unknown     { color: #8a9099; }
.bln-section    { margin-top: 6px; line-height: 1.4; }
.bln-section.muted { color: #5a6066; }
.bln-section.note  { font-style: italic; color: #5a6066; }
.bln-img        { display: block; margin-top: 8px; max-width: 260px; max-height: 200px; border-radius: 6px; }
.bln-ids        { font-size: 12px; color: #5a6066; }

@media (max-width: 780px) {
  main { flex-direction: column; }
  #map { flex: 0 0 55vh; }
  #side { flex: 1 1 auto; max-width: none; border-left: 0; border-top: 1px solid #e3e6e9; }
  header h1 { font-size: 17px; }
}