/* QazUTM — консоль. Редизайн (этап core/ui-redesign, решение автора 31.10: гибрид
   «Госсервис для пилота» + тёмный рабочий экран оператора).
   Два режима одной системы компонентов через токены на <html data-mode>:
     light — пилот/эксплуатант, согласующий, администратор (спокойная госуслуга);
     dark  — оператор UTM, диспетчер ГЦ УВД, силовые и охрана объекта (рабочий экран).
   Режим ставит applyUiMode() по роли; операционные роли могут переключить тумблером.
   Технические имена (kazutm-*) не меняются. */

:root, html[data-mode="light"] {
  --bg: #f4f6f9;
  --panel: #ffffff;
  --panel-2: #eef2f7;
  --line: #d9e0ea;
  --text: #122033;
  --muted: #5b6b80;
  --accent: #0f2b5b;          /* navy госуслуги */
  --accent-ink: #ffffff;
  --accent-soft: #e4ebf7;
  --green: #1f8a4c;
  --red: #b3261e;
  --amber: #b7791f;
  --blue: #1f6fd0;
  --shadow: 0 6px 24px rgba(18, 32, 51, .08);
  --overlay: rgba(255, 255, 255, .94);
  --map-bg: #f2f3f0;   /* цвет суши схемы: при перезагрузке (смена языка) нет серой вспышки */
  --nav-bg: #0f2b5b;
  --nav-text: rgba(255, 255, 255, .82);
  --nav-muted: rgba(255, 255, 255, .55);
  --nav-active-bg: rgba(255, 255, 255, .14);
  --nav-active-text: #ffffff;
  --nav-line: rgba(255, 255, 255, .12);
  --gold: #d9a93b;
  color-scheme: light;
}
html[data-mode="dark"] {
  --bg: #0f1620;
  --panel: #192434;
  --panel-2: #141d2a;
  --line: #2b3b50;
  --text: #e8eef6;
  --muted: #a7b6c8;
  --accent: #2fc6e3;          /* бирюза QazUTM */
  --accent-ink: #06202a;
  --accent-soft: #163247;
  --green: #43d9a1;
  --red: #ff6b7a;
  --amber: #f5b544;
  --blue: #6aa8ff;
  --shadow: 0 8px 30px rgba(0, 0, 0, .45);
  --overlay: rgba(25, 36, 52, .94);
  --map-bg: #060a0f;
  --nav-bg: #121c2a;
  --nav-text: #a7b6c8;
  --nav-muted: #6f7f93;
  --nav-active-bg: #163247;
  --nav-active-text: #2fc6e3;
  --nav-line: #2b3b50;
  --gold: #f5b544;
  color-scheme: dark;
}
:root {
  --font-display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --nav-w: 232px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .brand { font-family: var(--font-display); }

button {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 13px; cursor: pointer; font-size: 13px; font-family: inherit;
  transition: border-color .12s, background .12s;
}
button:hover { border-color: var(--accent); }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent); }
button.primary:hover { filter: brightness(1.08); }
button.danger { border-color: var(--red); color: var(--red); }
button:disabled { opacity: .45; cursor: not-allowed; }
input, select, textarea {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font-size: 14px; width: 100%; font-family: inherit;
}
html[data-mode="dark"] input, html[data-mode="dark"] select, html[data-mode="dark"] textarea { background: var(--panel-2); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
label { display: block; margin: 10px 0 4px; color: var(--muted); font-size: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 7px 10px 7px 0; white-space: nowrap; }
th { color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); font-size: 12px; }
tr { border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
h3 { margin: 14px 0 8px; font-size: 15px; color: var(--text); font-weight: 700; }
.muted { color: var(--muted); }
.ok { color: var(--green); }
.err { color: var(--red); }
.warn { color: var(--amber); }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Индикаторы состояния — CSS-точки вместо эмодзи (одинаковы на любой ОС) */
.st { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: 0;
  margin-right: 5px; background: var(--muted); }
.st.green { background: var(--green); }
.st.yellow { background: var(--amber); }
.st.red { background: var(--red); }
.st.lg { width: 14px; height: 14px; }

/* знак бренда: квадрат с «Q» и золотой чертой (цвет флага) */
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; }
.brand .logo { width: 32px; height: 32px; border-radius: 9px; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-size: 16px; position: relative; flex: none; }
.brand .logo::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 5px; height: 2px; background: var(--gold); border-radius: 2px; }
.brand.light { color: #fff; }
.brand.light .logo { background: #fff; color: #0f2b5b; }
.mobile-only { display: none; }

/* ---- вход: слева — о системе (госсервис), справа — карточка входа ---- */
html.auth-pending #login-screen { visibility: hidden; }
#login-screen {
  position: fixed; inset: 0; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--bg); overflow: auto;
}
#login-screen .hero { background: linear-gradient(160deg, #0f2b5b 0%, #163c7a 60%, #1f4f9a 100%); color: #fff;
  padding: 56px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
#login-screen .hero::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 520px; height: 520px;
  border-radius: 50%; border: 60px solid rgba(255, 255, 255, .06); }
#login-screen .hero .brand { font-size: 22px; }
#login-screen .hero h2 { color: #fff; font-size: 34px; line-height: 1.15; margin: 22px 0 12px; font-weight: 800; }
#login-screen .hero p { color: rgba(255, 255, 255, .8); font-size: 16px; max-width: 460px; margin: 0; }
#login-screen .hero .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; max-width: 620px; }
#login-screen .hero .fact { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); border-radius: 12px; padding: 14px; }
#login-screen .hero .fact b { display: block; font-family: var(--font-display); font-size: 20px; }
#login-screen .hero .fact span { font-size: 12.5px; color: rgba(255, 255, 255, .75); }
#login-box {
  align-self: center; justify-self: center; width: calc(100% - 48px); max-width: 440px; margin: 24px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px 28px 22px; box-shadow: var(--shadow);
}
#login-box h1 { margin: 0 0 2px; font-size: 24px; letter-spacing: -.01em; color: var(--accent); }
#login-box .divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; margin: 10px 0; }
#login-box .divider::before, #login-box .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
#login-box .sub { color: var(--muted); font-size: 13px; margin-bottom: 18px; line-height: 1.4; }
#login-box input { padding: 11px 12px; font-size: 15px; }
#login-box button { padding: 11px 14px; font-size: 15px; border-radius: 10px; }
#login-error { color: var(--red); font-size: 12px; min-height: 16px; margin-top: 8px; }

/* ---- каркас: боковая навигация на широком экране, нижняя панель на телефоне ---- */
#app { display: none; height: 100%; }
#app.on { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "nav topbar" "nav main"; }
#tabs { grid-area: nav; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px;
  background: var(--nav-bg); border-right: 1px solid var(--nav-line); overflow-y: auto; }
#tabs .brand { font-size: 20px; color: var(--nav-active-text); letter-spacing: .3px; padding: 4px 10px 2px; }
html[data-mode="light"] #tabs .brand .logo, :root:not([data-mode]) #tabs .brand .logo { background: #fff; color: #0f2b5b; }
#tabs .brand-sub { color: var(--nav-muted); font-size: 11px; padding: 2px 10px 14px; line-height: 1.35; }
#tabs button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: none; background: none; color: var(--nav-text); padding: 10px 12px; border-radius: 10px; font-size: 14px; }
#tabs button:hover { background: var(--nav-active-bg); color: var(--nav-active-text); }
#tabs button.active { background: var(--nav-active-bg); color: var(--nav-active-text); font-weight: 600; }
#tabs .tab-ic { width: 20px; height: 20px; flex: none; display: inline-flex; }
#tabs .tab-ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#tabs .nav-foot { margin-top: auto; padding: 12px 10px 4px; border-top: 1px solid var(--nav-line); color: var(--nav-muted); font-size: 12px; line-height: 1.4;
  display: flex; gap: 10px; align-items: center; }
#tabs .nav-foot b { color: var(--nav-active-text); font-weight: 600; display: block; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-grid;
  place-items: center; font-weight: 700; font-size: 12px; flex: none; font-family: var(--font-display); }
#tabs .nav-foot .avatar { background: rgba(255, 255, 255, .16); color: #fff; }
html[data-mode="dark"] #tabs .nav-foot .avatar { background: var(--accent-soft); color: var(--accent); }

#topbar { grid-area: topbar; display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  background: var(--panel); border-bottom: 1px solid var(--line); min-height: 50px;
  min-width: 0; overflow: hidden; /* иначе длинное «кто вошёл» растягивает колонку сетки шире окна */ }
#topbar .brand { display: none; }
#topbar .crumbs { color: var(--muted); font-size: 13px; white-space: nowrap; }
#topbar .crumbs b { color: var(--text); font-weight: 600; }
#topbar .who { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto; max-width: 260px; display: inline-flex; align-items: center; gap: 8px; }
#topbar .who .avatar { width: 28px; height: 28px; font-size: 11px; flex: none; }
#topbar .who .who-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#topbar .right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }
#topbar .right button { white-space: nowrap; }

#main { grid-area: main; position: relative; overflow: hidden; min-width: 0; }
.tab-pane { position: absolute; inset: 0; display: none; overflow: auto; }
.tab-pane.active { display: block; }
.tab-pane.with-map { overflow: hidden; }
#map { position: absolute; inset: 0; background: var(--map-bg); }

.map-overlay {
  position: absolute; z-index: 10; background: var(--overlay);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow);
}
#track-panel { top: 10px; right: 10px; max-width: 520px; max-height: 55%; overflow: auto; }
/* Фильтр высоты — классом, не встроенным стилем: встроенный display:flex перебивал правило
   свёрнутой панели, и «Треки ▸» оставались с полями фильтра (замечание автора 03.11). */
#track-panel .alt-filter { display: flex; gap: 6px; align-items: center; font-size: 12px; margin-bottom: 6px; }
#track-count { font-weight: 400; font-size: 12px; }
#alerts-tray { top: 10px; left: 10px; max-width: 360px; max-height: 45%; overflow: auto; }
#alerts-tray .alert-item { border-left: 3px solid var(--amber); padding: 4px 8px; margin: 4px 0;
  font-size: 12px; background: var(--panel-2); border-radius: 0 6px 6px 0; }
#alerts-tray .alert-item.danger { border-left-color: var(--red); }

#legend-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 7px 14px; background: var(--overlay);
  border-top: 1px solid var(--line); font-size: 12px; color: var(--muted);
}
#legend-bar .li { display: flex; align-items: center; gap: 6px; }
.dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.35); display: inline-block; }
.sq { width: 11px; height: 11px; border-radius: 2px; display: inline-block; opacity: 0.8; }
.dash { width: 18px; border-top: 2px dashed var(--muted); display: inline-block; }

/* ---- контентные вкладки ---- */
.content { margin: 0 auto; padding: 20px 22px; }  /* на всю ширину окна во всех кабинетах (автор 02.11) */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 20px; margin-bottom: 16px; overflow-x: auto; box-shadow: var(--shadow); }
.card table td:first-child, .card table th:first-child { white-space: normal; min-width: 160px; }
/* Учётные записи администратора: восемь колонок не влезали в окно ноутбука — столбцы «Зоны»,
   «Статус» и кнопки действий уезжали за край карточки, прокрутка внизу длинного списка
   незаметна (проверка 01.11). Переносим текст и даём кнопкам переноситься. */
#pane-admin .card table td, #pane-admin .card table th { white-space: normal; }
#pane-admin .card table td:first-child, #pane-admin .card table th:first-child { min-width: 0; }
#pane-admin .card table td:last-child button { margin: 2px 2px 2px 0; }
@media (min-width: 1500px) { #pane-admin .card table td:first-child { white-space: nowrap; } }
/* «Мои борта»: кнопки справа обрезались прокруткой на ноутбуке — текст переносится, как у администратора. */
#pane-fleet .card table td, #pane-fleet .card table th { white-space: normal; }
#pane-fleet .card table td:first-child, #pane-fleet .card table th:first-child { min-width: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.badge { padding: 2px 9px; border-radius: 999px; font-size: 11px; border: 1px solid var(--line); background: var(--panel-2); }
.badge.green { color: var(--green); border-color: color-mix(in srgb, var(--green) 50%, transparent); }
.badge.red { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, transparent); }
.badge.amber { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 50%, transparent); }
.badge.blue { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 50%, transparent); }

#draw-hint { position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 20; background: color-mix(in srgb, var(--amber) 80%, transparent); color: #1a1403; padding: 7px 14px;
  border-radius: 8px; font-size: 13px; display: none; align-items: center; flex-wrap: wrap; gap: 4px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#draw-hint .dh-toggle { display: none; }
#draw-hint .dh-short { display: none; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(4, 10, 18, .55); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px;
  width: 100%; max-width: 520px; max-height: 90vh; overflow: auto; box-shadow: var(--shadow); }
.consent-text { max-height: 55vh; overflow: auto; font-size: 13px; line-height: 1.5; }
.consent-text h2 { font-size: 17px; margin: 0 0 8px; }
.consent-text h3 { font-size: 14px; margin: 12px 0 4px; }
.consent-text .lawyer { color: var(--amber); font-weight: 600; }
.kv { display: grid; grid-template-columns: 210px 1fr; gap: 6px 12px; font-size: 13px; }
.kv .k { color: var(--muted); }
.iin-mask { cursor: pointer; border-bottom: 1px dashed currentColor; }

#zones-stale { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 6;
  background: rgba(179, 38, 30, .92); color: #fff; padding: 6px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600; max-width: 80%; text-align: center; }

/* Карточка точки — полупрозрачная, карта под ней читается (замечание автора 01.11);
   размытие подложки — где поддерживается, иначе просто прозрачность. */
.maplibregl-popup-content { background: color-mix(in srgb, var(--panel) 84%, transparent); color: var(--text);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--line); max-height: 320px; overflow: auto; border-radius: 10px; box-shadow: var(--shadow); }
.maplibregl-popup-tip { border-top-color: var(--line) !important; border-bottom-color: var(--line) !important; }
.maplibregl-popup-close-button { color: var(--muted); }
.maplibregl-popup { z-index: 5; }

/* ---- мастер подачи заявки ---- */
.sf-step { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; background: var(--panel); }
.sf-step-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sf-no { display: inline-flex; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 13px;
  align-items: center; justify-content: center; flex: none; }
.sf-fleet { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-ac { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  cursor: pointer; min-width: 220px; line-height: 1.5; background: var(--panel-2); }
.sf-ac:hover { border-color: var(--accent); }
.sf-ac.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft) inset; background: var(--accent-soft); }
.sf-presets button { font-size: 12px; padding: 3px 9px; margin-left: 4px; }
.sf-checks { display: grid; gap: 3px; margin-top: 4px; }

/* ---- панель «Слои и время» ---- */
#layers-panel { right: 10px; top: 10px; left: auto; width: 250px; z-index: 11; }
#zones-time-badge { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 6; background: var(--accent); color: var(--accent-ink); padding: 5px 12px;
  border-radius: 8px; font-size: 12px; font-weight: 600; }

/* ---- фильтры журнала ---- */
.jf-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; }
.jf-row input, .jf-row select { width: auto; min-width: 120px; }
.jf-row label { display: flex; gap: 4px; align-items: center; text-transform: none; margin: 0; cursor: pointer; }
.jf-row label input { width: auto; min-width: 0; }

/* ---- модальное окно итога подачи ---- */
#sf-dialog { position: fixed; inset: 0; z-index: 50; background: rgba(4, 8, 14, .55);
  display: flex; align-items: center; justify-content: center; }
.sf-dialog-box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; max-width: 440px; width: calc(100% - 40px); box-shadow: var(--shadow); }

/* Панели карты сворачиваются заголовком; у тревог — «очистить» */
.map-overlay h3 { cursor: pointer; margin: 0 0 6px; user-select: none; }
.map-overlay h3::after { content: " ▾"; color: var(--muted); font-weight: 400; }
.map-overlay.collapsed h3::after { content: " ▸"; }
.map-overlay.collapsed > :not(h3) { display: none; }
.map-overlay h3 .ov-clear { float: right; font-size: 11px; padding: 1px 8px; min-height: 0;
  margin-left: 10px; font-weight: 400; }

/* ---- отдельная карта «Погода» ---- */
#wx-map { position: absolute; inset: 0; background: var(--map-bg); }
#wx-controls { top: 10px; left: 10px; right: auto; max-width: calc(100% - 20px); font-size: 12px;
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; z-index: 12; }
#wx-controls .wx-layers { display: flex; flex-wrap: wrap; gap: 4px; }
#wx-controls .wx-layers button { padding: 4px 10px; font-size: 12px; min-height: 0; }
#wx-controls .wx-layers button.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
#wx-controls select { width: auto; min-height: 0; padding: 3px 6px; font-size: 12px; }
#wx-controls input[type="range"] { width: 240px; min-height: 0; padding: 0; }
#wx-controls .wx-time { font-weight: 600; min-width: 150px; }
#wx-controls .wx-timerow { flex-basis: 100%; flex-wrap: wrap; }
#wx-controls .wx-note { margin-left: auto; }
#wx-controls .wx-alt select:disabled { opacity: .45; }
/* Сводка в точке: 11 строк — без общего лимита высоты карточки точки (на ПК обрезалась на «Облачность»). */
#wx-map .maplibregl-popup-content { max-height: none; }
.wx-pop { font-size: 12px; }
.wx-pop table { font-size: 12px; margin-top: 4px; border-collapse: collapse; }
.wx-pop td { padding: 1px 8px 1px 0; border: 0; line-height: 1.35; white-space: nowrap; }
#wx-legend { bottom: 40px; left: 10px; right: auto; width: 280px; font-size: 11px; z-index: 12; }
#wx-legend .bar { height: 10px; border-radius: 3px; margin: 4px 0 2px; }
#wx-legend .ticks { position: relative; height: 14px; color: var(--muted); }
#wx-legend .ticks span { position: absolute; top: 0; white-space: nowrap; }

/* ---- кабинет пилота (редизайн, этап 2): шапка страницы, показатели, чипы, карточки заявок,
   степпер мастера, вердикт оценки, карточка погоды ---- */
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.pagehead h1 { margin: 0; font-size: 24px; color: var(--accent); letter-spacing: -.01em; }
.pagehead p { margin: 4px 0 0; color: var(--muted); }
button.lg { padding: 12px 20px; font-size: 15px; border-radius: 12px; min-height: 48px; font-weight: 600; }
button.block { width: 100%; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); }
.kpi span { display: block; font-size: 12px; color: var(--muted); }
.kpi b { display: block; font-family: var(--font-display); font-size: 26px; color: var(--accent); margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .tr { font-size: 12px; margin-top: 2px; color: var(--muted); }
.kpi.ok b { color: var(--green); } .kpi.warn b { color: var(--amber); } .kpi.bad b { color: var(--red); } .kpi.info b { color: var(--blue); }
.op-card:hover, .qi:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap; background: var(--panel-2); color: var(--muted); }
.chip .st { margin-right: 0; background: currentColor; width: 8px; height: 8px; }
.chip.ok { background: color-mix(in srgb, var(--green) 16%, var(--panel)); color: var(--green); }
.chip.warn { background: color-mix(in srgb, var(--amber) 18%, var(--panel)); color: var(--amber); }
.chip.bad { background: color-mix(in srgb, var(--red) 14%, var(--panel)); color: var(--red); }
.chip.info { background: color-mix(in srgb, var(--blue) 14%, var(--panel)); color: var(--blue); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filters button { border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--muted); }
.filters button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ops-list { display: grid; gap: 12px; }
.op-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); }
.op-card .top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.op-card .id { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--accent); }
.op-card .top .chip { margin-left: auto; }
.op-card .fx { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px 14px; font-size: 13px; }
.op-card .fx span { display: block; color: var(--muted); font-size: 11px; }
.op-card .fx b { font-weight: 600; }
.op-card .more { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.op-card .more b { color: var(--text); }
.op-card .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.op-card.pending { border-left: 4px solid var(--amber); }
.op-card.flying { border-left: 4px solid var(--blue); }
.op-card.rejected { border-left: 4px solid var(--red); }
.op-card.ok { border-left: 4px solid var(--green); }
.stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 14px; }
.step { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; text-align: left; min-height: 0; }
.step .num { width: 30px; height: 30px; border-radius: 50%; background: var(--panel-2); color: var(--muted); display: grid; place-items: center; font-weight: 700; font-family: var(--font-display); flex: none; }
.step .lbl { min-width: 0; }
.step .lbl b { display: block; font-weight: 600; font-size: 13px; }
.step .lbl span { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.step.on .num { background: var(--accent); color: var(--accent-ink); }
.step.done .num { background: color-mix(in srgb, var(--green) 18%, var(--panel)); color: var(--green); }
.verdict { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); margin-bottom: 10px; }
.verdict .st { width: 18px; height: 18px; margin: 0; flex: none; }
.verdict b { display: block; font-family: var(--font-display); font-size: 15px; }
.verdict span { font-size: 12.5px; color: var(--muted); }
.verdict.ok { background: color-mix(in srgb, var(--green) 12%, var(--panel)); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.verdict.ok b { color: var(--green); }
.verdict.warn { background: color-mix(in srgb, var(--amber) 14%, var(--panel)); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.verdict.warn b { color: var(--amber); }
.verdict.bad { background: color-mix(in srgb, var(--red) 12%, var(--panel)); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.verdict.bad b { color: var(--red); }
.wx-card { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 10px 12px; margin-top: 6px; border-radius: 12px;
  border: 1px solid var(--line); background: linear-gradient(90deg, var(--accent-soft), var(--panel-2)); color: var(--text); }
.wx-card .t { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--accent); }
.wx-card .w { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }
.wx-card .w b { display: block; font-size: 13px; }
.wx-card .w span { color: var(--muted); font-size: 11.5px; }
.wx-card .src { flex-basis: 100%; font-size: 11px; color: var(--muted); }

/* ---- рабочий экран оператора UTM / диспетчера ГЦ УВД (редизайн, этап 3) ----
   Очередь без прокрутки страницы: показатели и фильтры сверху, список решений прокручивается
   внутри; таймеры «до полёта»; статусная строка в шапке (часы, ЭЦП, связь, треки, зоны). */
.opstatus { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--muted); white-space: nowrap;
  overflow: hidden; min-width: 0; flex: 1 1 auto; margin-left: 8px; }
.opstatus span { display: inline-flex; align-items: center; gap: 5px; }
.opstatus b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.opstatus i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); flex: none; }
.opstatus i.warn { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.opstatus i.bad { background: var(--red); box-shadow: 0 0 6px var(--red); }
.opstatus .clock { font-family: var(--font-mono); color: var(--text); }
#pane-queue, #pane-permits, #pane-ops { overflow: hidden; }
#pane-queue .content, #pane-permits .content, #pane-ops .content { height: 100%; max-width: none; display: flex; flex-direction: column; padding: 14px 18px 10px; min-height: 0; }
.q-head { flex: none; }
.q-head .pagehead { margin-bottom: 10px; }
.q-head .pagehead h1 { font-size: 20px; }
.q-head .kpis { margin-bottom: 10px; }
.q-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.q-tools select { width: auto; min-height: 34px; padding: 4px 8px; font-size: 13px; }
.q-tools button.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.q-list { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; gap: 10px; align-content: start; padding-right: 2px; }
.qi { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow);
  border-left: 4px solid var(--line); }
.qi.urgent { border-left-color: var(--red); }
.qi.soon { border-left-color: var(--amber); }
.qi.waiting { opacity: .8; }
.qi.live { border-left-color: var(--blue); }
.qi .top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.qi .top input[type="checkbox"] { width: 18px !important; height: 18px; min-height: 0; margin: 0; }
.qi .id { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--accent); }
.qi .sla { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.qi .sla.hot { color: var(--red); font-weight: 600; }
.qi .sla.live { color: var(--blue); font-weight: 600; }
.qi .ttl { font-weight: 600; font-size: 14px; }
.qi .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.qi .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.qi .chips .chip { white-space: normal; text-align: left; }
.qi .more { margin-top: 6px; font-size: 12px; color: var(--muted); }
.qi details { margin-top: 6px; font-size: 12px; }
.qi details summary { cursor: pointer; color: var(--muted); }
.qi .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.chip.gc { background: color-mix(in srgb, var(--blue) 16%, var(--panel)); color: var(--blue); }

/* ---- переключатель языка (қаз / рус / eng) ---- */
.lang-switch { display: inline-flex; gap: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.lang-switch button { border: none; background: none; color: var(--muted); font-size: 12px; padding: 4px 9px; border-radius: 999px; min-height: 0; }
.lang-switch button.on { background: var(--accent); color: var(--accent-ink); }
#login-box .login-lang { float: right; margin: -6px -6px 6px 0; }
/* в шапке — одна кнопка-список с текущим языком (замечание автора 01.11) */
.lang-sel { position: relative; }
.lang-sel .lang-btn { min-height: 32px; padding: 4px 10px; font-size: 12px; border-radius: 999px; }
.lang-sel .caret { color: var(--muted); margin-left: 2px; }
.lang-menu { display: none; position: fixed; right: 8px; top: 48px; min-width: 150px; padding: 4px; z-index: 60;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.lang-sel.open .lang-menu { display: grid; }
.lang-menu button { border: none; background: none; text-align: left; padding: 10px 12px; min-height: 40px; font-size: 14px; border-radius: 8px; color: var(--text); }
.lang-menu button.on { color: var(--accent); font-weight: 700; }
.lang-menu button:hover { background: var(--panel-2); }
.lang-sel { display: none; width: auto; min-height: 32px; padding: 0; font-size: 12px; border-radius: 999px;
  background: var(--panel-2); appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
#map-tools { display: none; }

/* ---- узкие экраны ---- */
.tab-ic { display: inline-flex; }
@media (max-width: 960px) {
  #app.on { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topbar" "main"; grid-template-rows: auto minmax(0, 1fr); }
  #topbar .brand { display: inline-flex; font-weight: 800; color: var(--accent); letter-spacing: .3px; font-size: 17px; }
  #topbar .brand .logo { width: 26px; height: 26px; font-size: 13px; border-radius: 7px; }
  #tabs .brand, #tabs .brand-sub, #tabs .nav-foot { display: none; }
  #tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; gap: 0; padding: 0;
    flex-direction: row; border-right: none; border-top: 1px solid var(--line); overflow-x: auto;
    overflow-y: hidden; padding-bottom: env(safe-area-inset-bottom); scrollbar-width: none; }
  #tabs::-webkit-scrollbar { display: none; }
  /* все вкладки умещаются на 375 px (до 7 штук), активная — подсвечена плашкой (замечание автора 01.11) */
  /* ширина по подписи, а не поровну: длинные казахские слова иначе наезжают на соседнюю вкладку */
  #tabs button { flex: 1 1 auto; min-width: min-content; width: auto; display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: 5px 1px; min-height: 54px; font-size: 9.5px; line-height: 1.1;
    border-radius: 10px; text-align: center; margin: 3px 1px; }
  /* нижний предел — на подписи: короткая «Карта» остаётся удобной для пальца, длинное слово не сжимается */
  #tabs button > span:not(.tab-ic) { min-width: 42px; }
  #tabs button.active { background: var(--nav-active-bg); color: var(--nav-active-text); font-weight: 700;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-active-text) 35%, transparent); }
  /* кнопки карты на телефоне — в самой карте, не в шапке */
  /* телефон, вариант А (выбор автора 01.11): одна круглая кнопка внизу справа над вкладками
     и всплывающий список; прежние кнопки скрыты */
  #map-tools { position: absolute; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 12; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
  #map-tools > button:not(.map-fab) { display: none !important; }
  .map-fab { width: 50px; height: 50px; border-radius: 50%; padding: 0; min-height: 0; display: grid; place-items: center;
    background: var(--overlay); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(4, 10, 20, .28); color: var(--text);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .map-fab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
  .map-fab.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .map-sheet { display: none; min-width: 200px; padding: 6px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line);
    box-shadow: 0 10px 28px rgba(4, 10, 20, .32); }   /* непрозрачный — читаемость (решение автора 01.11) */
  .map-sheet.open { display: grid; gap: 2px; }
  .map-sheet button { display: flex; align-items: center; gap: 10px; text-align: left; border: none; background: none; padding: 10px 12px;
    min-height: 46px; font-size: 14px; color: var(--text); border-radius: 11px; }
  .map-sheet button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; flex: none; }
  .map-sheet button span { flex: 1 1 auto; }
  .map-sheet button .st { width: 8px; height: 8px; margin: 0; background: var(--accent); }
  .map-sheet button.on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
  .maplibregl-ctrl-bottom-left { bottom: calc(8px + env(safe-area-inset-bottom)); }
  #main { margin-bottom: calc(55px + env(safe-area-inset-bottom)); }
  /* планшет и телефон: шапка не выходит за край — язык кнопкой-списком, подписи кнопок скрыты */
  #topbar .right { gap: 6px; flex: 1 1 auto; min-width: 0; justify-content: flex-end; overflow-x: auto; scrollbar-width: none; }
  #topbar .right::-webkit-scrollbar { display: none; }
  #topbar .right .lbl { display: none; }
  #topbar .lang-switch { display: none; }
  #topbar .lang-sel { display: inline-block; }
}
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px; min-height: 42px; }
  input[type="checkbox"], input[type="radio"] { min-height: 0; width: 20px !important; height: 20px; flex: none; }
  button { min-height: 40px; }
  #login-screen { grid-template-columns: 1fr; align-content: start; }
  #login-screen .hero { display: none; }
  .mobile-only { display: inline-flex; margin-bottom: 10px; }
  #login-box { padding: 20px; width: calc(100% - 24px); margin: 12px; }
  #login-box .login-lang { float: none; display: flex; justify-content: flex-end; margin: 0 0 10px; }
  #topbar .crumbs { display: none; }
  #topbar .who .avatar { display: none; }
  /* Кнопка в заголовке карточки («Подтянуть мои борта из реестра», «Обновить») на телефоне —
     под заголовком во всю ширину, а не впритык к краю (проверка 01.11). */
  .card h3 > button[style*="float:right"] { float: none !important; display: block; width: 100%; margin-top: 8px; }
  /* Телефон: приложение прибито к окну (100dvh + fixed — адресная строка iOS не режет низ) */
  #app.on { position: fixed; inset: 0; height: 100dvh; }
  #topbar { gap: 6px; padding: 6px 8px; padding-top: max(6px, env(safe-area-inset-top)); min-height: 44px; }
  #topbar .brand { flex: none; font-size: 17px; }
  /* Телефон: имя — в «Моих данных», кнопки шапки прокручиваются, ничего не выходит за край
     (замечание автора 01.11) */
  #topbar .who { display: none; }
  #topbar .right { gap: 4px; flex: 1 1 auto; min-width: 0; justify-content: flex-end; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #topbar .right::-webkit-scrollbar { display: none; }
  #topbar .right button { padding: 4px 7px; font-size: 12px; min-height: 32px; flex: none; }
  .kpis, .filters, .q-tools, .sf-presets { max-width: 100%; }
  .chip, .badge { max-width: 100%; white-space: normal; }
  .op-card .top, .qi .top { min-width: 0; }
  .op-card .top .chip, .qi .sla { margin-left: 0; }
  .card, .op-card, .qi, .kpi, .verdict, .wx-card { min-width: 0; max-width: 100%; }
  .map-overlay { max-width: calc(100% - 16px); }
  .content { padding: 10px; }
  .card { padding: 12px; margin-bottom: 10px; overflow-wrap: anywhere; }
  .grid2 { grid-template-columns: 1fr; gap: 0; }
  .kv { grid-template-columns: 1fr; gap: 0 0; }
  .kv .k { margin-top: 8px; font-size: 12px; }
  .sf-step { padding: 10px; }
  .sf-ac { min-width: 0; width: 100%; }
  .sf-presets { display: inline-flex; flex-wrap: wrap; gap: 4px; }
  .sf-presets button { margin-left: 0; min-height: 38px; padding: 4px 10px; font-size: 13px; }
  .jf-row input, .jf-row select { width: 100%; }
  .content table, .content tbody, .content tr, .content td { display: block; width: 100%; }
  .content thead { display: none; }
  .content tr { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
  .content td { white-space: normal; padding: 3px 0; min-width: 0 !important; overflow-wrap: anywhere; }
  .content td:empty { display: none; }
  .content td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 11px; }
  .map-overlay { padding: 8px 10px; }
  #alerts-tray { top: 8px; left: 8px; right: 8px; max-width: none; max-height: 30%; }
  #toasts { top: calc(8px + env(safe-area-inset-top)); right: 8px; width: calc(100% - 16px); }
  /* Баннер «зоны устарели» — над лотком тревог, а лоток под ним (иначе баннер был скрыт целиком). */
  #zones-stale { z-index: 12; }
  #pane-map.zones-stale #alerts-tray { top: 48px; }
  #alerts-tray.collapsed { right: auto; }
  /* Над круглой кнопкой карты (50 px) — свёрнутый заголовок «Треки ▸» прятался под ней. */
  #track-panel { top: auto; bottom: calc(74px + env(safe-area-inset-bottom)); left: 8px; right: 8px; max-width: none; max-height: 40%; }
  #track-panel.collapsed { left: auto; }
  #layers-panel { top: auto; left: 0; right: 0; bottom: calc(55px + env(safe-area-inset-bottom));
    width: auto; max-height: 65%; overflow: auto; border-radius: 12px 12px 0 0; z-index: 21; }
  /* телефон: подсказка свёрнута в «?» + кнопки, касание раскрывает (замечание автора 01.11) */
  #draw-hint { left: 8px; right: 8px; transform: none; text-align: left; }
  #draw-hint .dh-toggle { display: inline-grid; place-items: center; width: 30px; height: 30px; min-height: 0; padding: 0;
    border-radius: 50%; border: 1px solid rgba(26, 20, 3, .35); background: rgba(255, 255, 255, .35); color: #1a1403; font-weight: 800; flex: none; }
  #draw-hint .dh-text { flex: 1 1 100%; order: 9; margin-top: 4px; }
  #draw-hint.compact .dh-text { display: none; }
  #draw-hint.compact { left: 8px; right: auto; width: auto; }   /* слева — справа кнопки карты */
  #draw-hint.compact .dh-short { display: inline; font-weight: 700; margin-left: 4px; }
  #zones-stale { max-width: none; left: 8px; right: 8px; transform: none; }
  #zones-time-badge { bottom: 44px; white-space: nowrap; }
  #legend-bar { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; gap: 12px; padding: 6px 70px 6px 10px; }
  #legend-bar .li { flex: none; }
  /* Карточка точки на телефоне — шторкой во всю ширину над кнопкой карты: привязанная к точке
     карточка 320 px уезжала за край экрана (проверка 01.11). */
  #map .maplibregl-popup { position: absolute; left: 10px !important; right: 10px !important; top: auto !important;
    bottom: calc(74px + env(safe-area-inset-bottom)) !important; transform: none !important; max-width: none !important; }
  #map .maplibregl-popup-tip { display: none; }
  .maplibregl-popup-content { max-height: 40vh; }
  .sf-dialog-box { max-height: 85vh; overflow: auto; }
  #wx-controls { left: 8px; right: 8px; max-width: none; gap: 6px 10px; padding: 6px 8px; }
  #wx-controls select { font-size: 13px; min-height: 34px; }
  #wx-controls input[type="range"] { width: 100%; flex: 1; min-width: 0; }
  #wx-controls .wx-time { min-width: 0; white-space: nowrap; font-size: 12px; }
  #wx-controls .wx-alt { margin-left: auto !important; }
  /* Кнопки +/− прятались под панелью слоёв; на телефоне масштаб — щипком. */
  #wx-map .maplibregl-ctrl-top-right { display: none; }
  .wx-sheet { max-height: 55vh; overflow: auto; }
  #wx-legend { bottom: calc(55px + env(safe-area-inset-bottom)); left: 8px; width: auto; right: 8px;
    max-height: 55%; overflow: auto; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi b { font-size: 22px; }
  .pagehead { margin-bottom: 12px; }
  .pagehead button.lg { width: 100%; }          /* одна большая кнопка — «Подать заявку» */
  .stepper { gap: 6px; }
  .step { flex-direction: column; gap: 4px; text-align: center; padding: 8px 4px; }
  .step .lbl span { display: none; }
  .step .num { width: 26px; height: 26px; font-size: 13px; }
  #sf-submit { width: 100%; }
  .op-card .fx { grid-template-columns: 1fr 1fr; }
  .acts .primary { flex: 1 1 100%; }
  .opstatus { display: none !important; }
  #pane-queue .content, #pane-permits .content, #pane-ops .content { padding: 10px; }
  .q-head .pagehead h1 { font-size: 18px; }
  #pane-weather .maplibregl-ctrl-top-right { top: 110px; }
}
/* ---- карточка заявки и лента статуса (образец eGov) ---- */
.next { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.next b { color: var(--text); }
.op-card .next { margin-top: 8px; }
button.ghost { border-color: transparent; color: var(--muted); background: transparent; }
button.ghost:hover { color: var(--text); border-color: var(--line); }
.chip.more-chip { cursor: pointer; min-height: 0; }
.tl { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 0; }
.tl-step { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 0 0 12px; font-size: 13px; }
.tl-step .st { width: 12px; height: 12px; margin: 3px 0 0 3px; background: var(--panel-2); border: 2px solid var(--line); box-sizing: border-box; }
.tl-step:not(:last-child)::before { content: ""; position: absolute; left: 8px; top: 16px; bottom: -2px; width: 2px; background: var(--line); }
.tl-step.done .st { background: var(--green); border-color: var(--green); }
.tl-step.done::before { background: var(--green); }
.tl-step.done.yellow .st { background: var(--amber); border-color: var(--amber); }
.tl-step.on .st { background: var(--panel); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tl-step.wait .st { background: var(--amber); border-color: var(--amber); }
.tl-step.bad .st { background: var(--red); border-color: var(--red); }
.tl-step.skip, .tl-step.todo { color: var(--muted); }
.tl-step.skip .st, .tl-step.todo .st { background: transparent; }
.tl-step b { display: block; font-weight: 600; color: var(--text); }
.tl-step.todo b, .tl-step.skip b { color: var(--muted); font-weight: 500; }
.tl-step.on b { color: var(--accent); }
.tl-step.bad b { color: var(--red); }
.tl-step time { display: inline-block; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.tl-note { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
@media (prefers-reduced-motion: no-preference) {
  .tl-step.wait .st { animation: tl-pulse 1.6s ease-in-out infinite; }
  @keyframes tl-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 45%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
}
#op-detail { position: fixed; inset: 0; z-index: 45; display: none; }   /* ниже модалов (50): контакты пилота поверх панели */
/* Тосты служебных уведомлений поверх любой вкладки (лоток тревог живёт на карте и в «Очереди»,
   у согласующего и администратора его не видно). */
#toasts { position: fixed; top: 56px; right: 12px; z-index: 60; width: min(360px, calc(100% - 24px)); pointer-events: none;
  display: flex; flex-direction: column; gap: 6px; }
#toasts .toast { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-left: 3px solid var(--amber);
  border-radius: 8px; padding: 8px 10px; font-size: 13px; box-shadow: var(--shadow); pointer-events: auto; }
#toasts .toast.danger { border-left-color: var(--red); }
#op-detail.min .od-back, #op-detail.min .od-panel { display: none; }
#op-detail.min { inset: auto 16px 16px auto; }
.od-min-label { display: none; }
#op-detail.min .od-min-label { display: inline-flex; position: fixed; right: 16px; bottom: 16px; z-index: 46; box-shadow: var(--shadow); background: var(--panel); }
.od-form .err { min-height: 0; margin: 0 0 6px; }
button.ghost.od-more { min-height: 40px; }
.od-back { position: absolute; inset: 0; background: rgba(4, 8, 14, .45); }
.od-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: var(--bg); border-left: 1px solid var(--line);
  box-shadow: var(--shadow); display: flex; flex-direction: column; }
.od-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; }
.od-top .id { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--accent); }
.od-top .sla { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.od-top .sla.hot { color: var(--red); font-weight: 600; } .od-top .sla.live { color: var(--blue); font-weight: 600; }
.od-top .od-x { margin-left: auto; font-size: 16px; }
.od-back-btn { display: none; }
.od-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 16px; }
.od-body section { margin-top: 14px; }
.od-body .chip { white-space: normal; max-width: 100%; text-align: left; }
.od-body h4 { margin: 0 0 6px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.od-body h4 time { text-transform: none; letter-spacing: 0; font-family: var(--font-mono); margin-left: 6px; }
.kv2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 13px; }
.kv2 span { display: block; color: var(--muted); font-size: 11.5px; }
.od-body .chk { display: flex; gap: 8px; align-items: center; font-size: 13px; margin: 4px 0; }
.od-body .chk .st { flex: none; margin: 0; }
.od-hist div { display: flex; gap: 10px; font-size: 12.5px; padding: 3px 0; }
.od-hist time, .od-dec time { font-family: var(--font-mono); color: var(--muted); flex: none; font-size: 12px; }
.od-dec { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.od-dec:last-child { border-bottom: none; }
.od-form { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.od-form h4 { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text); }
.od-form textarea, .od-form input { width: 100%; margin-bottom: 8px; }
.od-form .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.od-actbar { flex: none; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--panel); }
.small { font-size: 11px; }
body.od-open { overflow: hidden; }
@media (max-width: 960px) { .od-panel { width: 60%; } }
@media (max-width: 768px) {
  .od-panel { width: 100%; border-left: none; height: 100dvh; padding-top: env(safe-area-inset-top); }
  .od-back-btn { display: inline-flex; }
  .od-top .od-x, .pc-only { display: none !important; }
  .od-actbar { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .od-actbar .primary { flex: 1 1 100%; min-height: 46px; font-size: 15px; }
  .kv2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* «Как поставить борт на учёт» в «Моих бортах» (03.11): спокойная подсказка, не тревога —
   борт без учёта не ошибка пилота, а шаг, который он ещё не прошёл. */
.reg-guide { margin-top: 12px; padding: 14px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--amber) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line)); transition: box-shadow .4s; }
.reg-guide h4 { margin: 0 0 6px; font-size: 15px; }
.reg-guide p { margin: 0 0 8px; font-size: 13px; line-height: 1.45; }
.reg-guide .reg-guide-why { font-weight: 600; }
.reg-guide ol { margin: 0 0 4px; padding-left: 20px; font-size: 13px; line-height: 1.5; }
.reg-guide ol li { margin-bottom: 4px; }
.reg-guide .reg-guide-mismatch { margin-top: 8px; }
.reg-guide.flash { box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 45%, transparent); }
.reg-guide-link { font-size: 12px; white-space: nowrap; }