/* ops2b.css — выбор операторов как у bsbord: панель с фильтрами БС/без БС,
   аккордеон по округам и пилюли операторов, снизу — чипы выбранного. Структура
   и имена классов повторяют оригинал (ops2b-*), но палитра НАША, синяя: весь
   акцент задаётся scoped-переменными --o-* внутри .ops2b, поэтому перекрасить
   всё можно одним блоком. Грузится после console.css. */

.ops2b {
  /* синий неон вместо зелёного оригинала */
  --o-panel: #0b0f16;
  --o-line: rgba(140, 170, 210, 0.10);
  --o-sep: rgba(140, 170, 210, 0.08);
  --o-row: #0d1220;
  --o-row-on: rgba(79, 140, 255, 0.06);
  --o-row-bc-on: rgba(79, 140, 255, 0.28);
  --o-chip: #0e1422;
  --o-chip-bc: #1b2537;
  --o-chip-on: rgba(79, 140, 255, 0.12);
  --o-chip-bc-on: rgba(79, 140, 255, 0.55);
  --o-neon: #4f8cff;
  --o-neon-dim: rgba(79, 140, 255, 0.10);
  --o-neon-br: rgba(79, 140, 255, 0.35);
  --o-fg: #e8eefc;
  --o-fg-on: #eaf1ff;
  --o-body: #c4d0ea;
  --o-mute: #8a97b8;
  --o-mute-2: #5e6b8a;
  --o-box-bc: #2a3550;
  --o-warn: #eab308;
  --o-warn-br: #3a3320;
  --o-down: #ef4444;
  --o-on-fg: #06121f;
  background: var(--o-panel);
  border: 1px solid var(--o-line);
  border-radius: 16px;
  padding: 16px;
  align-self: start;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.ops2b-row, .ops2b-ops, .ops2b-chips, .ops2b-head { min-width: 0; }

/* ── шапка: метка · счётчик · фильтры БС / без БС · сбросить ─────────────── */
.ops2b-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--o-sep);
}
.ops2b-lbl { font: 700 11px/1 var(--mono), monospace; letter-spacing: .14em; color: var(--o-mute-2); }
.ops2b-gap { flex: 1; }
.ops2b-count { font: 600 12px var(--mono), monospace; color: var(--o-mute); }
.ops2b-count b { color: var(--o-neon); font-weight: 700; }
.ops2b-preset, .ops2b-clear {
  border-radius: 8px; padding: 6px 10px; cursor: pointer;
  font: 600 12px Inter, system-ui, sans-serif;
}
.ops2b-preset {
  border: 1px solid var(--o-neon-br); background: var(--o-neon-dim);
  color: var(--o-neon); font-family: var(--mono), monospace; font-size: 11.5px;
}
.ops2b-preset:hover { border-color: var(--o-neon); }
.ops2b-preset.on { background: var(--o-neon); color: var(--o-on-fg); border-color: var(--o-neon); }
.ops2b-preset.nobs { border-color: var(--o-warn-br); background: none; color: var(--o-warn); }
.ops2b-preset.nobs:hover { border-color: var(--o-warn); }
.ops2b-preset.nobs.on { background: var(--o-warn); color: var(--o-on-fg); border-color: var(--o-warn); }
.ops2b-clear { border: 1px solid var(--o-chip-bc); background: transparent; color: var(--o-mute); }
.ops2b-clear:hover { color: var(--o-fg); border-color: var(--o-box-bc); }

/* ── строка округа: чекбокс + код + счётчик + пилюли ─────────────────────── */
.ops2b-row {
  display: grid; grid-template-columns: 78px minmax(0, 1fr);
  align-items: center; gap: 8px; padding: 9px 10px; margin-top: 6px;
  border-radius: 12px; background: var(--o-row); border: 1px solid var(--o-line);
}
.ops2b-row.on { background: var(--o-row-on); border-color: var(--o-row-bc-on); }
.ops2b-district {
  display: flex; align-items: center; gap: 5px; padding: 6px 2px;
  border: none; background: transparent; border-radius: 9px; cursor: pointer; text-align: left;
}
.ops2b-box {
  width: 17px; height: 17px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--o-box-bc); border-radius: 6px; background: transparent;
  color: var(--o-on-fg); font: 700 11px Inter, system-ui, sans-serif;
}
.ops2b-box.on { background: var(--o-neon); border-color: var(--o-neon); }
.ops2b-dcode { flex: none; font: 700 12px var(--mono), monospace; letter-spacing: .05em; color: var(--o-body); }
.ops2b-dcnt { font: 600 11px var(--mono), monospace; color: var(--o-mute-2); }
.ops2b-dcnt.on { color: var(--o-neon); }

/* ── пилюли операторов ──────────────────────────────────────────────────── */
.ops2b-ops { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.ops2b-op {
  display: flex; align-items: center; gap: 6px; padding: 5px 7px 5px 5px;
  border-radius: 9px; border: 1px solid var(--o-chip-bc); background: var(--o-chip);
  color: var(--o-body); cursor: pointer; min-width: 0;
}
.ops2b-op:hover { border-color: var(--o-chip-bc-on); }
.ops2b-op.on { border-color: var(--o-chip-bc-on); background: var(--o-chip-on); color: var(--o-fg-on); }
.ops2b-op.off { opacity: .42; cursor: not-allowed; }
.ops2b-op.off:hover { border-color: var(--o-chip-bc); }
.ops2b-op input { position: absolute; opacity: 0; pointer-events: none; }
.ops2b-oplogo { width: 20px; height: 20px; border-radius: 5px; object-fit: contain; flex: none; }
.ops2b-opname {
  flex: 1; text-align: left; font: 600 12.5px Inter, system-ui, sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit;
}
.ops2b-op .ops2b-nobs, .ops2b-op .ops2b-dot { margin-left: auto; }
.ops2b-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--o-neon); }
.ops2b-dot.down { background: var(--o-down); }
.ops2b-dot.wait { background: var(--o-mute-2); }
.ops2b-nobs {
  flex: none; font: 700 8.5px var(--mono), monospace; letter-spacing: .2px;
  color: var(--o-warn); border: 1px solid var(--o-warn-br); border-radius: 4px;
  padding: 1px 3px; white-space: nowrap;
}

/* ── чипы выбранного снизу ──────────────────────────────────────────────── */
.ops2b-chips {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--o-sep);
}
.ops2b-chip {
  display: flex; align-items: center; gap: 7px; padding: 4px 9px 4px 4px;
  border-radius: 999px; border: 1px solid var(--o-neon-br); background: var(--o-neon-dim);
  color: var(--o-fg-on); font: 600 12px Inter, system-ui, sans-serif; cursor: pointer;
}
.ops2b-chip:hover { border-color: var(--o-neon); }
.ops2b-chip .c { font: 500 11px var(--mono), monospace; color: var(--o-neon); }
.ops2b-chip .x { color: var(--o-mute); }
.ops2b-chip:hover .x { color: var(--o-down); }
.ops2b-empty { color: var(--o-mute-2); font-size: 12.5px; padding: 2px 0; }

/* светлая тема наследует наши общие правила фона; панель просто светлеет */
body.theme-light .ops2b {
  --o-panel: #ffffff; --o-line: #ccd4de; --o-sep: #e3e8ee; --o-row: #f7f9fc;
  --o-chip: #ffffff; --o-chip-bc: #d5dce4; --o-fg: #16202b; --o-fg-on: #10203f;
  --o-body: #3a4650; --o-mute: #64707c; --o-mute-2: #93a0ad; --o-box-bc: #b6c0cc;
}