/* Раздел мониторинга (/monitor/) — закрытый фронтенд для мониторов. */
:root{
  --m-green:#6BCB77; --m-dark:#2E7D4F; --m-line:#E4EAE5; --m-bg:#F7FAF8;
  --m-card:#FFFFFF; --m-ink:#111; --m-muted:#5B6B62;
}
body.bcm-body{ margin:0; background:var(--m-bg); color:var(--m-ink);
  font-family:Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light; } /* нативные списки (datalist/select) — светлые, не из тёмной темы ОС */
.bcm-main{ max-width:1180px; margin:0 auto; padding:0 20px 48px; }

/* ---- Вход ---- */
.bcm-login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.bcm-login{ background:var(--m-card); border:1px solid var(--m-line); border-radius:18px;
  padding:32px; width:100%; max-width:380px; box-shadow:0 14px 40px rgba(20,68,43,.08); }
.bcm-login-title{ font-size:22px; font-weight:800; margin:0 0 6px; }
.bcm-login-sub{ color:var(--m-muted); margin:0 0 20px; font-size:15px; }
.bcm-login-err{ background:#fdeaea; color:#b3261e; border:1px solid #f3c7c4;
  border-radius:10px; padding:10px 12px; margin-bottom:16px; font-size:14px; }
.bcm-field{ display:block; margin-bottom:14px; }
.bcm-field span{ display:block; font-size:14px; font-weight:600; margin-bottom:6px; }
.bcm-field input{ width:100%; box-sizing:border-box; padding:10px 12px; font-size:16px;
  border:1px solid var(--m-line); border-radius:10px; background:#fff; }
.bcm-field input:focus{ outline:none; border-color:var(--m-dark); }
.bcm-pwd{ position:relative; display:block; }
.bcm-pwd input{ width:100%; box-sizing:border-box; padding:10px 44px 10px 12px; font-size:16px;
  border:1px solid var(--m-line); border-radius:10px; background:#fff; }
.bcm-pwd input:focus{ outline:none; border-color:var(--m-dark); }
.bcm-eye{ position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:0; background:transparent; cursor:pointer; padding:0; }
/* Одна иконка (src переключает JS): открытый/перечёркнутый глаз, уже тёмно-зелёные */
.bcm-eye-ic{ display:block; width:26px; height:26px; object-fit:contain; opacity:.9; }
.bcm-eye:hover .bcm-eye-ic{ opacity:1; }
.bcm-remember{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--m-muted); margin-bottom:18px; }
.bcm-remember input[type=checkbox]{ width:16px; height:16px; accent-color:var(--m-dark); }
.bcm-btn{ display:inline-block; width:100%; padding:12px 18px; border:0; border-radius:12px;
  background:var(--m-dark); color:#fff; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; }
.bcm-btn:hover{ filter:brightness(.95); }

/* ---- Верхняя панель (закреплена сверху при прокрутке) ---- */
.bcm-topbar{ display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px;
  padding:16px 0; border-bottom:1px solid var(--m-line); margin-bottom:24px;
  position:sticky; top:0; z-index:100; background:var(--m-bg);
  box-shadow:0 6px 16px -12px rgba(20,68,43,.35); }
.bcm-brand{ font-weight:800; font-size:18px; }
.bcm-tabs{ display:flex; gap:6px; flex:1 1 auto; }
.bcm-tab{ padding:8px 14px; border-radius:999px; text-decoration:none; color:var(--m-dark);
  font-size:15px; font-weight:700; }
.bcm-tab:hover{ background:#EAF6EE; }
.bcm-tab.is-active{ background:var(--m-dark); color:#fff; }
.bcm-user{ font-size:14px; color:var(--m-muted); }
.bcm-user a{ color:var(--m-dark); font-weight:700; text-decoration:none; }
.bcm-user a:hover{ text-decoration:underline; }

/* ---- Контент ---- */
.bcm-h2{ font-size:20px; font-weight:800; margin:32px 0 14px;
  border-top:1px solid var(--m-line); padding-top:26px; }
/* первый раздел на странице — без верхней линии (под фильтром) */
.bcm-main > .bcm-h2:first-of-type{ border-top:0; padding-top:0; margin-top:20px; }
.bcm-empty{ color:var(--m-muted); }
.bcm-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.bcm-stat{ background:var(--m-card); border:1px solid var(--m-line); border-radius:16px; padding:20px; }
.bcm-stat-val{ font-size:32px; font-weight:800; line-height:1.1; }
.bcm-stat-label{ color:var(--m-muted); font-size:14px; margin-top:6px; }

.bcm-card{ background:var(--m-card); border:1px solid var(--m-line); border-radius:16px; padding:20px; }
.bcm-card h2, .bcm-card h3{ margin:0 0 14px; }
.bcm-card h3{ font-size:16px; font-weight:800; }
.bcm-grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }

/* ---- Полосы ---- */
.bcm-bars{ display:flex; flex-direction:column; gap:10px; }
.bcm-bar-row{ display:grid; grid-template-columns:220px 1fr 56px; align-items:center; gap:10px; }
.bcm-bar-label{ font-size:14px; text-align:right; color:var(--m-ink); }
.bcm-bar-track{ height:18px; background:#eef2ef; border-radius:6px; overflow:hidden; }
.bcm-bar-track i{ display:block; height:100%; background:var(--m-dark); border-radius:6px; }
.bcm-bar-val{ font-size:15px; font-weight:700; text-align:right; }

/* Карточки-графики равной высоты (ряд «По батареям» / «По тестам»):
   полосы распределяются на всю высоту, промежутки одинаковые, без пустого места снизу. */
.bcm-card-eq{ display:flex; flex-direction:column; }
.bcm-card-eq .bcm-bars{ flex:1 1 auto; justify-content:space-between; }

/* «Широкие» полосы (узкие карточки: пол/возраст/устройства): подпись сверху слева,
   значение справа, полоса — на всю ширину ячейки под подписью. */
.bcm-bars-wide{ gap:16px; }
.bcm-bars-wide .bcm-bar-row{ grid-template-columns:1fr auto;
  grid-template-areas:"label val" "track track"; gap:6px 10px; }
.bcm-bars-wide .bcm-bar-label{ grid-area:label; text-align:left; font-weight:600; }
.bcm-bars-wide .bcm-bar-val{ grid-area:val; }
.bcm-bars-wide .bcm-bar-track{ grid-area:track; width:100%; }

/* ---- Таблица динамики по дням ---- */
.bcm-daytable{ background:var(--m-card); border:1px solid var(--m-line); border-radius:16px; overflow:hidden; }
.bcm-day-head, .bcm-day-row{ display:grid; grid-template-columns:120px 110px 90px 150px 1fr; align-items:center; gap:10px; padding:8px 16px; }
.bcm-day-head{ background:#f2f6f3; font-size:13px; font-weight:700; color:var(--m-muted); }
.bcm-day-row{ border-top:1px solid var(--m-line); font-size:14px; }
.bcm-day-bar{ height:14px; background:#eef2ef; border-radius:5px; overflow:hidden; }
.bcm-day-bar i{ display:block; height:100%; background:var(--m-green); }

/* ---- Фильтры / QC ---- */
.bcm-h3{ font-size:16px; font-weight:800; margin:22px 0 12px; }
.bcm-filter-title{ font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--m-muted); margin:6px 0 8px; }
.bcm-filters{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-bottom:8px; }
.bcm-filters label{ display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--m-muted); }
.bcm-filters select, .bcm-filters input[type=date], .bcm-filters input[type=text]{ padding:8px 10px; border:1px solid var(--m-line);
  border-radius:10px; font-size:15px; background:#fff; font-family:inherit; }
.bcm-filters input[type=text]{ min-width:200px; }
.bcm-filters input[type=text]::placeholder{ color:var(--m-ink); opacity:1; }
.bcm-filters input:focus, .bcm-filters select:focus{ outline:none; border-color:var(--m-dark); }
/* Кнопки «Применить»/«Сбросить» в строке фильтров (справа от дат), выровнены по низу как поля. */
.bcm-filters .bcm-filter-actions{ display:inline-flex; align-items:center; gap:10px; }
/* Принудительный перенос строки в flex: UUID+даты на отдельной строке */
.bcm-filter-break{ flex-basis:100%; width:100%; height:0; margin:0; padding:0; border:0; }

/* Комбобокс UUID: вид как select + панель с полем поиска */
.bcm-combo{ position:relative; display:inline-block; }
.bcm-combo-toggle{ padding:8px 30px 8px 10px; border:1px solid var(--m-line); border-radius:10px;
  font-size:15px; background:#fff; font-family:inherit; color:var(--m-ink); cursor:pointer;
  text-align:left; width:350px; max-width:100%; box-sizing:border-box;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; position:relative; }
.bcm-combo-toggle::after{ content:'▾'; position:absolute; right:11px; top:50%; transform:translateY(-50%);
  color:var(--m-muted); font-size:12px; pointer-events:none; }
.bcm-combo-toggle:focus{ outline:none; border-color:var(--m-dark); }
.bcm-combo.is-open .bcm-combo-toggle{ border-color:var(--m-dark); }
.bcm-combo-panel{ position:absolute; z-index:200; top:calc(100% + 4px); left:0; width:300px; max-width:80vw;
  background:#fff; border:1px solid var(--m-line); border-radius:10px; padding:8px;
  box-shadow:0 14px 34px rgba(20,68,43,.16); }
.bcm-combo-search{ width:100%; box-sizing:border-box; padding:8px 10px; border:1px solid var(--m-line);
  border-radius:8px; font-size:14px; font-family:inherit; margin:0 0 6px; }
.bcm-combo-search:focus{ outline:none; border-color:var(--m-dark); }
.bcm-combo-list{ display:block; max-height:240px; overflow-y:auto; }
.bcm-combo-opt{ display:block; padding:6px 8px; border-radius:6px; font-size:13px; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.bcm-combo-opt:hover, .bcm-combo-opt.is-active{ background:#EAF6EE; color:var(--m-dark); }
.bcm-combo-opt.is-hidden{ display:none; }
/* Множественный выбор: отмеченные UUID — фон + галочка слева. */
.bcm-combo-opt.is-selected{ background:#D8F2D7; color:var(--m-dark); font-weight:600; }
.bcm-combo-opt.is-selected::before{ content:'✓ '; }
.bcm-btn-sm{ width:auto; padding:9px 16px; font-size:15px; }
.bcm-ym-msg{ background:#eef7ee; color:#245a2e; border:1px solid #cfe6cf; border-radius:10px; padding:10px 12px; margin:0 0 12px; font-size:14px; }
.bcm-btn-ghost{ background:#fff; color:var(--m-dark); border:2px solid var(--m-dark); padding:7px 14px; }
.bcm-btn-ghost:hover{ background:#EAF6EE; filter:none; }
.bcm-ym-diag{ background:#0f1b14; color:#d6ecd9; border-radius:10px; padding:12px 14px; margin:0 0 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; line-height:1.5; white-space:pre-wrap; word-break:break-all; overflow-x:auto; }
.bcm-export-section{ background:var(--m-card); border:1px solid var(--m-line); border-radius:16px; padding:18px 20px; margin:0 0 16px; }
.bcm-export-section h2{ margin-top:0; }
/* В разделе «Выгрузка» — без серых разделителей у заголовков блоков */
.bcm-export-section .bcm-h2{ border-top:0; padding-top:0; margin-top:0; }
.bcm-export-sub{ font-size:13px; font-weight:700; color:var(--m-muted); margin:12px 0 6px; }
.bcm-export-btns{ display:flex; flex-wrap:wrap; gap:10px; }
.bcm-reset{ font-size:14px; color:var(--m-muted); text-decoration:none; }
.bcm-reset:hover{ text-decoration:underline; }
.bcm-note{ color:var(--m-muted); font-size:13px; margin:6px 0 18px; line-height:1.5; }
/* Описание таблицы + кнопка выгрузки CSV на одной строке (описание слева, кнопка справа) */
.bcm-note-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:6px 0 12px; }
.bcm-note-row .bcm-note{ margin:0; flex:1 1 auto; }
.bcm-note-row .bcm-csvbtn{ flex:0 0 auto; margin-top:2px; }
.bcm-csvbtn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border:1px solid var(--m-line); border-radius:9px; background:#fff;
  color:var(--m-dark); font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; }
.bcm-csvbtn:hover{ background:#EAF6EE; border-color:var(--m-dark); }
/* Короткий идентификатор (UUID/сессия) с копированием по клику */
.bcm-id{ cursor:pointer; border-bottom:1px dotted #9bb3a5; }
.bcm-id:hover{ color:var(--m-dark); border-bottom-color:var(--m-dark); }
.bcm-id.is-copied{ color:var(--m-dark); border-bottom-style:solid; }
.bcm-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.bcm-chip{ display:inline-block; padding:5px 11px; border-radius:999px; background:#EAF6EE;
  color:var(--m-dark); font-size:13px; font-weight:700; }
.bcm-table{ border-collapse:collapse; width:100%; background:var(--m-card); font-size:14px; }
.bcm-table th, .bcm-table td{ border:1px solid var(--m-line); padding:7px 12px; text-align:left; white-space:nowrap; }
.bcm-table th{ background:var(--m-dark); font-weight:800; color:#fff; }
.bcm-mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--m-muted); }
.bcm-table th.bcm-sortable{ cursor:pointer; user-select:none; }
.bcm-table th.bcm-sortable:hover{ color:#EAF6EE; }
.bcm-sort-ind{ color:#fff; font-size:11px; }
.bcm-table .bcm-filter-row th{ background:#fff; padding:4px 6px; }

/* Обёртка таблиц: ограниченная высота видимой области + скролл по обеим осям,
   чтобы горизонтальная прокрутка была доступна на любой высоте (не только внизу таблицы).
   Заголовки и строка поиска закреплены сверху при вертикальной прокрутке. */
.bcm-tablewrap{ max-height:72vh; overflow:auto; border-radius:12px; }
.bcm-tablewrap .bcm-table thead th{ position:sticky; z-index:5; }
.bcm-tablewrap .bcm-table thead tr:first-child th{ top:0; z-index:6; }
.bcm-tablewrap .bcm-table thead tr.bcm-filter-row th{ top:33px; }
.bcm-table .bcm-filter-row input{ width:100%; min-width:80px; box-sizing:border-box; padding:5px 8px;
  border:1px solid var(--m-line); border-radius:7px; font-size:13px; font-family:inherit; font-weight:400; }
.bcm-table .bcm-filter-row input:focus{ outline:none; border-color:var(--m-dark); }

.bcm-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px; }

/* ---- Кнопка «наверх» (как в Базе знаний) ---- */
.bcm-totop{ position:fixed; right:26px; bottom:26px; z-index:300; width:48px; height:48px; border-radius:50%;
  background:var(--m-dark); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px;
  text-decoration:none; box-shadow:0 8px 22px rgba(20,68,43,.30); }
.bcm-totop:hover{ filter:brightness(.95); }

/* ---- Срезы воронки: переключатель Абс./% и таблица ---- */
.bcm-toggle{ display:inline-flex; gap:0; border:1px solid var(--m-line); border-radius:10px; overflow:hidden; margin:0 0 12px; }
.bcm-toggle-btn{ border:0; background:#fff; color:var(--m-dark); font-weight:700; font-size:14px; font-family:inherit;
  padding:7px 16px; cursor:pointer; }
.bcm-toggle-btn + .bcm-toggle-btn{ border-left:1px solid var(--m-line); }
.bcm-toggle-btn.is-active{ background:var(--m-dark); color:#fff; }
.bcm-slice-tbl td.bcm-num{ text-align:right; font-variant-numeric:tabular-nums; }
.bcm-slice-tbl .bcm-slice-total td{ font-weight:800; border-top:2px solid var(--m-line); }

/* ---- Графики динамики (стиль Метрики) ---- */
.bcm-charts{ background:var(--m-card); border:1px solid var(--m-line); border-radius:16px; padding:16px; }
.bcm-ch-controls{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin:0 0 14px; }
.bcm-ch-btns{ display:inline-flex; border:1px solid var(--m-line); border-radius:10px; overflow:hidden; }
.bcm-ch-btn{ border:0; background:#fff; color:var(--m-dark); font-weight:700; font-size:13px; font-family:inherit;
  padding:6px 12px; cursor:pointer; }
.bcm-ch-btns .bcm-ch-btn + .bcm-ch-btn{ border-left:1px solid var(--m-line); }
.bcm-ch-btn.is-active{ background:var(--m-dark); color:#fff; }
.bcm-ch-lab{ font-size:13px; color:var(--m-muted); display:inline-flex; align-items:center; gap:6px; }
.bcm-ch-select{ padding:5px 8px; border:1px solid var(--m-line); border-radius:8px; font-family:inherit; font-size:13px; background:#fff; }
.bcm-ch-cols{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:13px; color:var(--m-muted); margin:0 0 10px; }
.bcm-ch-cols .bcm-ch-btn{ border:1px solid var(--m-line); border-radius:8px; padding:4px 10px; }

.bcm-ch-plot{ position:relative; }
.bcm-ch-svg{ width:100%; height:auto; display:block; }
.bcm-ch-grid{ stroke:#eef2ef; stroke-width:1; }
.bcm-ch-axis{ fill:var(--m-muted); font-size:11px; }
.bcm-ch-hover{ stroke:#b9c6bd; stroke-width:1; stroke-dasharray:3 3; }
.bcm-ch-tip{ position:absolute; z-index:5; pointer-events:none; background:#fff; border:1px solid var(--m-line);
  border-radius:10px; box-shadow:0 8px 22px rgba(20,68,43,.18); padding:8px 10px; font-size:12px; max-width:220px; }
.bcm-ch-tip b{ display:block; margin-bottom:4px; }
.bcm-ch-tip div{ display:flex; align-items:center; gap:6px; margin:2px 0; }
.bcm-ch-tip i{ width:10px; height:10px; border-radius:3px; display:inline-block; flex:0 0 auto; }

.bcm-ch-tablewrap{ margin-top:14px; overflow-x:auto; }
.bcm-ch-tbl td, .bcm-ch-tbl th{ padding:7px 10px; }
.bcm-ch-tbl td.bcm-num{ text-align:right; font-variant-numeric:tabular-nums; }
.bcm-ch-row{ cursor:pointer; }
.bcm-ch-row:hover{ background:#f2f6f3; }
.bcm-ch-row.is-on{ background:#eaf6ee; }
.bcm-ch-swatch{ display:inline-block; width:14px; height:14px; border-radius:4px; border:2px solid var(--m-dark); box-sizing:border-box; }
.bcm-ch-tbl .bcm-ch-total td{ font-weight:800; border-bottom:2px solid var(--m-line); background:#f7faf8; }

@media (max-width:900px){
  .bcm-cards{ grid-template-columns:repeat(2,1fr); }
  .bcm-grid2{ grid-template-columns:1fr; }
  .bcm-grid3{ grid-template-columns:1fr; }
  .bcm-bar-row{ grid-template-columns:140px 1fr 44px; }
  .bcm-day-head, .bcm-day-row{ grid-template-columns:96px 1fr 1fr; }
  .bcm-day-head span:nth-child(4), .bcm-day-row span:nth-child(4),
  .bcm-day-head .bcm-day-bar-h, .bcm-day-row .bcm-day-bar{ display:none; }
}