:root{
    --c-sip:#2b78ff; --c-vols:#22aa22; --c-kfvf:#8b5cf6; --c-poi:#ff7a00; --c-kto:#ff2b7a;
  }
  *{box-sizing:border-box}
  body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--tx); background:var(--bg); }
  header { padding:12px; border-bottom:1px solid #eee; display:grid; gap:12px; align-items:start; }
  @media (min-width: 1024px){
    header{ grid-template-columns: 440px 1fr; }
  }
  @media (max-width: 1023.98px){
    header{ grid-template-columns: 1fr; }
  }

  .search-col{ display:flex; flex-direction:column; gap:6px; }
  .right-col{ display:flex; flex-direction:column; gap:6px; }

  /* одинаковая ширина поисковых элементов */
  .search-col input[type="text"], .search-col select{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Prevent route select from expanding due to long text */
  #routeSelect {
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
  }
  
  #routeSelect option {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
  }
  
  /* Force all selects in search column to stay within bounds */
  .search-col select {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Clickable РЭС names - subtle hover effect */
  .region-name-clickable {
    transition: background-color 0.2s;
    padding: 2px 4px;
    border-radius: 4px;
  }
  
  .region-name-clickable:hover {
    background-color: #f3f4f6;
  }
  
  /* Equipment count filter - hover and active states */
  .equipment-count-filter:hover {
    background-color: #f3f4f6;
  }
  
  .equipment-count-filter.active-filter {
    background-color: #dbeafe;
    border: 1px solid #3b82f6;
    font-weight: 600;
  }
  
  /* Collapsible section styles */
  .stats-section-header:hover {
    background-color: #f9fafb;
  }
  
  .collapse-icon {
    transition: transform 0.2s;
    font-size: 10px;
    color: #6b7280;
  }
  
  .stats-section-content {
    transition: all 0.2s ease-in-out;
  }

  label, .lbl{ font-size:13px; color:var(--muted); }
  input[type="text"], select{
    padding:6px 8px; font-size:13px; border:1px solid var(--bd); border-radius:8px; outline:none; background:#fff;
  }
  input[type="text"]:focus, select:focus{ border-color:#c5d7ff; box-shadow:0 0 0 3px #e9f1ff; }

  /* легенда чипами */
  .legend{ display:flex; gap:4px; flex-wrap:wrap; align-items:center; margin-bottom:6px; }
  .chip { display:inline-block; padding:2px 6px; border-radius:999px; font-size:11px; color:#fff; }
  .chip.s { background:var(--c-sip); }
  .chip.v { background:var(--c-vols); }
  .chip.k { background:var(--c-kfvf); }
  .chip.u { background:var(--c-poi); }
  .chip.t { background:var(--c-kto); }

  /* чекбоксы типов */
  .types{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  .types label{ display:flex; align-items:center; gap:4px; font-size:13px; color:#333; }

  .hint { color:#888; font-size:11px; }
  .muted { color:#555; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; white-space:pre; }
  .statline{ font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; color:#333; white-space:pre-wrap; }

  /* блок про договоры */
  .contracts-box{ padding:6px 8px; border:1px solid #eee; border-radius:8px; background:#fdfdfd; margin-top:6px; }
  .contracts-box h4{ margin:0 0 4px 0; font-size:13px; color:#333; }
  .contracts-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px; }
  .contracts-list li{ font-size:12px; }
  .contracts-list button{
    border:0; background:transparent; padding:0; font:inherit; text-align:left; cursor:pointer;
  }
  .contracts-list li.active > button { font-weight:700; text-decoration:underline; }
  .danger{ color:var(--danger); font-weight:600; }
  .active-contract{ font-size:13px; margin-top:6px; display:none; align-items:center; gap:8px; }
  .active-contract .chip{ padding:2px 8px; border-radius:999px; background:#eee; color:#222; }
  .active-contract .clear{ border:0; background:transparent; color:#555; cursor:pointer; text-decoration:underline; }

  #map { width:100%; height: calc(100vh - 210px); }

  .balloon-head { height:6px; width:100%; }

  /* ссылки: аккуратные, без синевы и слева */
  .aslink{
		color: inherit;
		text-decoration: underline;
		cursor: pointer;
		background: transparent;
		border: 0;
		padding: 0;
		font: inherit;
		text-align: left;
  }
  .aslink:hover{ opacity:.85; }
  .aslink:focus{
		outline: 2px solid #e9f1ff;
		outline-offset: 2px;
  }

  /* чипы-кнопки (СИП/ВОЛС/КФВФ/Указатель) */
  .chip.aslink{
		text-decoration: none;
		color: #fff;
		display: inline-block;
		line-height: 1.2;
		padding: 1px 8px;
		margin: 2px 4px 2px 0;
		max-width: 200px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		vertical-align: baseline;
		text-align: left;
  }

  /* базовый чип — компактнее */
  .chip{
		border-radius: 999px;
		font-size: 12px;
  }

  /* аккуратнее контент балуна */
  .balloon{ font:14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial; }
  .balloon .row{ margin-top:4px; }
  .balloon ul{
		margin: 2px 0 0 14px;
		padding: 0;
		list-style-type: disc;
  }
  .balloon li{ margin: 0; padding: 0; }