/* ============================================================
   ALPR-RU — Reusable components (vanilla CSS, no build)
   Зависит от tokens.css. Подключайте после него.
   ============================================================ */

/* ---------- Госномер РФ (plate badge) ---------- */
.alpr-plate {
  --ph:26px; --pmf:12.5px; --prf:7.5px; --ppx:7px; --prpx:4px; --prus:5px; --pfw:8px;
  display:inline-flex; align-items:stretch;
  background:#f3f4f1; border:1.5px solid #11161f; border-radius:5px;
  height:var(--ph); overflow:hidden; font-family:var(--font-mono);
  box-shadow:0 1px 3px rgba(0,0,0,.3); vertical-align:middle;
}
.alpr-plate--md { --ph:40px; --pmf:19px; --prf:11px; --ppx:11px; --prpx:7px; --prus:7px; --pfw:12px; }
.alpr-plate--lg { --ph:58px; --pmf:28px; --prf:15px; --ppx:16px; --prpx:11px; --prus:9.5px; --pfw:17px; }
.alpr-plate__main {
  display:flex; align-items:center; padding:0 var(--ppx);
  color:#11161f; font-weight:700; font-size:var(--pmf); letter-spacing:1px;
}
.alpr-plate__region {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-left:1.5px solid #11161f; padding:0 var(--prpx);
}
.alpr-plate__region-num { color:#11161f; font-weight:700; font-size:var(--prf); line-height:1; letter-spacing:.5px; }
.alpr-plate__rusrow { display:flex; align-items:center; gap:2px; margin-top:1px; }
.alpr-plate__rus { font-size:var(--prus); font-weight:600; color:#11161f; letter-spacing:.2px; }
.alpr-plate__flag { width:var(--pfw); height:calc(var(--pfw) * .66); border:.5px solid #c4c8cf; border-radius:1px; overflow:hidden; line-height:0; }
.alpr-plate__flag i { display:block; height:34%; background:#fff; }
.alpr-plate__flag i:nth-child(2) { height:33%; background:#0a3bce; }
.alpr-plate__flag i:nth-child(3) { height:33%; background:#d4202a; }

/* ---------- Чипы статусов ----------
   Цвет задаётся переменными --c (текст) и --cs (фон).
   Хелпер chip(label, color) в components.js проставляет их.
   a8n.bolder.1: bolder weight + a touch more padding so a status reads as
   a deliberate badge, not a faint label that happens to have a tint. */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:var(--r-xs);
  font-size:11.5px; font-weight:700; letter-spacing:.01em; white-space:nowrap;
  color:var(--c, var(--text-2)); background:var(--cs, var(--surface-3));
  border:1px solid color-mix(in srgb, var(--c, var(--border)) 22%, transparent);
}
.chip svg { width:13px; height:13px; }
.chip--lg { padding:5px 12px; font-size:12.5px; font-weight:700; }

/* удобные пресеты по семантике (см. spec Color Status Reference) */
.chip--green  { --c:var(--green);  --cs:var(--green-soft); }
.chip--red    { --c:var(--red);    --cs:var(--red-soft); }
.chip--amber  { --c:var(--amber);  --cs:var(--amber-soft); }
.chip--accent { --c:var(--accent); --cs:var(--accent-soft); }
.chip--violet { --c:var(--violet); --cs:var(--violet-soft); }
.chip--muted  { --c:var(--text-2); --cs:var(--surface-3); border-color:var(--border); }

/* точка-индикатор (онлайн/офлайн) */
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; background:var(--muted); }
.dot--green { background:var(--green); }
.dot--red   { background:var(--red); }
.dot--amber { background:var(--amber); }
.dot--live  { animation:alprPulse 1.8s infinite; }

/* ---------- Карточки ---------- */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--panel-shadow);
}
.card__head {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 15px; border-bottom:1px solid var(--border-2);
  font-size:13px; font-weight:700;
}
.card__body { padding:15px; }

/* ============================================================
   Buttons — the ONE canonical definition (a8n.bolder.1).
   Previously split between this file and main.css, which merged into an
   unintentional hybrid. This is now the single source; main.css does not
   redeclare .btn/.icon-btn.
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:38px; padding:0 16px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--text);
  font-family:var(--font-sans); font-size:12.5px; font-weight:700;
  cursor:pointer; white-space:nowrap;
  transition:background .12s ease, border-color .12s ease, filter .12s ease, transform .08s ease;
}
.btn:hover { background:var(--surface-3); border-color:color-mix(in srgb, var(--accent) 25%, var(--border)); }
.btn:active { transform:translateY(1px); }
.btn:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.btn[disabled] { opacity:.45; cursor:not-allowed; transform:none; }

.btn--primary { border-color:transparent; background:var(--accent); color:#fff; }
.btn--primary:hover { filter:brightness(1.08); background:var(--accent); }

.btn--success { border-color:transparent; background:var(--green); color:#04130a; }
.btn--success:hover { filter:brightness(1.06); }

.btn--danger  { border-color:color-mix(in srgb, var(--red) 55%, var(--border)); background:var(--red-soft); color:var(--red); }
.btn--danger:hover { background:color-mix(in srgb, var(--red) 16%, var(--red-soft)); }

.btn--ghost { border-color:transparent; background:transparent; color:var(--text-2); }
.btn--ghost:hover { background:var(--surface-2); color:var(--text); }

.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; min-height:38px; padding:0;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--text-2);
  cursor:pointer; transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.icon-btn:hover { background:var(--surface-3); color:var(--text); }
.icon-btn:focus-visible { outline:none; box-shadow:var(--focus-ring); }

/* ============================================================
   Segmented control & filter groups (a8n.bolder.1)
   One structural pattern for "pick one of N related options," used by
   Monitor's stream-mode/layout controls today and any filter bar going
   forward — replaces ad-hoc rows of individually bordered pill buttons.
   ============================================================ */
.segmented {
  display:inline-flex; align-items:stretch; gap:2px;
  padding:3px; border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface-2);
}
.segmented__btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:32px; padding:0 12px; border:0; border-radius:calc(var(--r-sm) - 3px);
  background:transparent; color:var(--text-2);
  font-family:var(--font-sans); font-size:12px; font-weight:700;
  cursor:pointer; white-space:nowrap;
  transition:background .12s ease, color .12s ease;
}
.segmented__btn:hover { color:var(--text); }
.segmented__btn:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.segmented__btn.is-active { background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.25); }

.filter-group {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:4px; border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface-2);
}
.filter-group__label {
  padding:0 6px; color:var(--muted); font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
}

/* ---------- Монитор: тайл камеры + bbox-оверлеи (базовая сцена-заглушка) ---------- */
.cam-tile { background:#0a0e15; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--panel-shadow); }
.cam-tile__view { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#080b11; }
/* враппер сцены — двигайте его transform'ом, bbox и сцена едут вместе */
.cam-tile__frame { position:absolute; inset:0; transform-origin:center; }
.cam-scene { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 32%,#1a2333,#070a10 78%); }
.cam-scene--off { filter:grayscale(.75) brightness(.55); }
.cam-scene__noise { position:absolute; inset:0; background:repeating-linear-gradient(180deg,transparent 0 21px,rgba(255,255,255,.018) 21px 22px); }
.cam-scene__car { position:absolute; left:16%; top:24%; width:68%; height:56%; border-radius:16px 16px 20px 20px;
  background:linear-gradient(165deg,#36445f,#141a25 72%); box-shadow:inset 0 7px 20px rgba(130,160,210,.2), inset 0 -12px 22px rgba(0,0,0,.55); }
.cam-scene__glass { position:absolute; left:27%; top:29%; width:46%; height:19%; border-radius:10px 10px 4px 4px;
  background:linear-gradient(180deg,rgba(160,190,225,.34),rgba(40,55,80,.2)); }
.cam-scene__light { position:absolute; top:71%; width:11%; height:8%; border-radius:50%;
  background:radial-gradient(circle,#fff4c4,rgba(255,228,140,0) 68%); }
.cam-scene__plate { position:absolute; left:50%; top:62%; transform:translateX(-50%) scale(.78); }

.cam-bbox { position:absolute; border-radius:4px; box-shadow:0 0 0 1px rgba(0,0,0,.5); pointer-events:none; }
.cam-bbox--car   { border:2px solid var(--green); }
.cam-bbox--plate { border:2px solid var(--accent); }
.cam-bbox__tag { position:absolute; top:-17px; left:-2px; font-family:var(--font-mono);
  font-size:9px; font-weight:700; padding:1px 6px; border-radius:3px; white-space:nowrap; }
.cam-bbox--car   .cam-bbox__tag { background:var(--green); color:#04130a; }
.cam-bbox__ocr { position:absolute; bottom:-20px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:#fff; font-family:var(--font-mono);
  font-size:10.5px; font-weight:700; padding:1px 8px; border-radius:3px; white-space:nowrap; }
.cam-quad { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:4; }
.cam-quad polygon { fill:rgba(245,158,11,.10); stroke:var(--amber); stroke-width:.006; vector-effect:non-scaling-stroke; stroke-dasharray:.025 .018; }
.cam-quad--rectified polygon { fill:rgba(34,197,94,.10); stroke:var(--green); stroke-dasharray:none; }
.cam-track { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:5; }
.cam-track polyline { fill:none; stroke:var(--accent); stroke-width:.006; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; filter:drop-shadow(0 1px 2px rgba(0,0,0,.65)); }
.cam-track circle { fill:var(--surface); stroke:var(--accent); stroke-width:.004; vector-effect:non-scaling-stroke; }
.cam-track circle.is-last { fill:var(--green); stroke:#fff; }
.cam-track__label { position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:6;
  background:var(--accent); color:#fff; font-family:var(--font-mono); font-size:10px; font-weight:800;
  padding:2px 8px; border-radius:4px; white-space:nowrap; box-shadow:0 1px 4px rgba(0,0,0,.38); }

.cam-tile__tl { position:absolute; top:8px; left:9px; display:flex; align-items:center; gap:6px; color:#e3eaf3; font-size:11.5px; font-weight:600; text-shadow:0 1px 3px #000; }
.cam-tile__tr { position:absolute; top:8px; right:9px; display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:10px; color:#b3bdcc; text-shadow:0 1px 2px #000; }
.cam-tile__rec { display:flex; align-items:center; gap:3px; color:#f4626d; }
.cam-tile__br { position:absolute; bottom:8px; right:9px; }
.cam-tile__off { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:rgba(0,0,0,.62); color:var(--amber); font-family:var(--font-mono);
  font-size:11px; font-weight:700; padding:6px 13px; border-radius:7px; letter-spacing:.5px; }
.cam-tile__bar { display:flex; gap:6px; padding:9px 11px; border-top:1px solid var(--border-2); background:var(--surface); flex-wrap:wrap; align-items:center; }

/* ---------- Тост / модалка подтверждения ---------- */
.toast { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent);
  border-radius:11px; padding:12px 15px; box-shadow:var(--shadow); display:flex; align-items:center; gap:11px; min-width:260px; max-width:380px; }
.toast--success { border-left-color:var(--green); }
.toast--warn    { border-left-color:var(--amber); }

.modal-backdrop { position:fixed; inset:0; background:rgba(5,9,16,.55); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px; width:400px; box-shadow:var(--shadow); }