/*
   Билайн Бизнес: маршруты
   */

/* Фирменный шрифт — Beeline Sans (файлы Onest, похожий гротеск).
   font-display: swap — пока шрифт грузится, браузер сразу показывает
   системный, не блокирует рендер текста. */
@font-face {
    font-family: "Beeline Sans";
    src: url("assets/fonts/Onest-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Beeline Sans";
    src: url("assets/fonts/Onest-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Beeline Sans";
    src: url("assets/fonts/Onest-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Beeline Sans";
    src: url("assets/fonts/Onest-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Beeline Sans";
    src: url("assets/fonts/Onest-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Beeline Sans";
    src: url("assets/fonts/Onest-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg-app: #F5F5F2;
    --bg-surface: #FFFFFF;
    --bg-surface-subtle: #F8F9F8;
    --bg-surface-hover: #F0F2EF;
    --bg-surface-active: #E8EAE6;

    --text-primary: #181A1B;
    --text-secondary: #697077;
    --text-muted: #586069;

    --border-color: #E4E6E3;
    --border-subtle: #ECEEEA;
    --border-input: #899198;
    --border-focus: #FFC72C;
    --focus-ink: #181A1B;
    --focus-ring: #FFBE00;

    --beeline-yellow: #FFC72C;
    --beeline-yellow-hover: #E0AC10;
    --beeline-yellow-tint: #FFFDF0;

    /* Полоса-акцент у поясняющих текстов (.case-source-notice и т.п.) —
       на светлом фоне чистый --beeline-yellow слишком бледный и почти
       теряется, поэтому в светлой теме берём отдельный доступный ссылочный
       --beeline-link; в тёмной теме (ниже) — обычный жёлтый, он
       там и так контрастный. */
    --beeline-link: #805500;
    --note-accent: var(--beeline-link);

    --status-success: #16A34A;
    --status-success-text: #15803D;
    --status-warning: #D97706;
    --status-warning-text: #B45309;
    --status-danger: #DC2626;
    --status-danger-text: #DC2626;

    /* Матовое стекло шапки — светлая тема. */
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-border: rgba(0, 0, 0, 0.06);

    --font-sans: 'Beeline Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --sidebar-width: 0px;
    --topbar-height: 64px;
    --header-toggle-height: 30px;
    --kpi-height: 42px;
    --engineers-width: 310px;
    /* Живая ширина панели бригад: 0 при скрытии ярлычком (шапка остаётся на --engineers-width). */
    --engineers-panel-width: var(--engineers-width);
    --drawer-width: 380px;
    /* Текущая высота футера-Ганта (свёрнут/развёрнут/тянут мышью) — держим
       в синхроне из JS (toggleGanttCollapse/updateGanttHeight/резайз-хендлер
       в app.js), чтобы .side-drawer (фикс. к вьюпорту) не наезжал на него. */
    --gantt-footer-height: 205px;

    /* Сколько места сверху всегда занято шапкой — карта затекает вверх
       ровно на эту величину, чтобы было видно матовое стекло шапки поверх
       живой карты (см. .map-section). Плавающая панель (кнопки/KPI/детали
       плана) в потоке не участвует — она абсолютно спозиционирована над
       картой, поэтому сюда не входит. */
    --chrome-reserved: var(--topbar-height);

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-drawer: -6px 0 20px rgba(0, 0, 0, 0.08);

    --transition: 140ms ease;

    color-scheme: light;
}

/* Тёмная тема — переопределяет только поверхности/текст/границы, не
   бренд-константы (--beeline-yellow остаётся жёлтым в любой теме).
   Переключается атрибутом data-theme на <html> (см. theme.js) — либо
   системной подсказкой prefers-color-scheme, пока пользователь ничего
   не выбрал явно. */
@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
        --bg-app: #1C1C1C;
        --bg-surface: #242424;
        --bg-surface-subtle: #2A2A2A;
        --bg-surface-hover: #333333;
        --bg-surface-active: #3A3A3A;

        --text-primary: #F2F2F2;
        --text-secondary: #B0B0B0;
        --text-muted: #A3ABB3;

        --border-color: #3D3D3D;
        --border-subtle: #333333;
        --border-input: #899198;
        --focus-ink: #FFFFFF;
        --focus-ring: #FFD54F;
        --beeline-link: #FFD54F;
        --status-success-text: #4ADE80;
        --status-warning-text: #FBBF24;
        --status-danger-text: #F87171;

        --glass-bg: rgba(20, 20, 20, 0.55);
        --glass-border: rgba(255, 255, 255, 0.08);
        --beeline-yellow-tint: #3A341F;
        --note-accent: var(--beeline-yellow);

        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
        --shadow-drawer: -6px 0 24px rgba(0, 0, 0, 0.45);

        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg-app: #1C1C1C;
    --bg-surface: #242424;
    --bg-surface-subtle: #2A2A2A;
    --bg-surface-hover: #333333;
    --bg-surface-active: #3A3A3A;

    --text-primary: #F2F2F2;
    --text-secondary: #B0B0B0;
    --text-muted: #A3ABB3;
    --beeline-link: #FFD54F;

    --border-color: #3D3D3D;
    --border-subtle: #333333;
    --border-input: #899198;
    --focus-ink: #FFFFFF;
    --focus-ring: #FFD54F;
    --status-success-text: #4ADE80;
    --status-warning-text: #FBBF24;
    --status-danger-text: #F87171;

    --glass-bg: rgba(20, 20, 20, 0.55);
    --glass-border: rgba(255, 255, 255, 0.08);
    --beeline-yellow-tint: #3A341F;
    --note-accent: var(--beeline-yellow);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
    --shadow-drawer: -6px 0 24px rgba(0, 0, 0, 0.45);

    color-scheme: dark;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-app);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

.current-date, .kpi-stat strong, .sim-clock, .time-card-val, .stop-number {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.planning-date {
    width: 124px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 12px;
}

.dataset-context {
    flex-shrink: 0;
    padding: 6px 14px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-surface-subtle);
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

#dataset-provenance { font-weight: 700; }
#dataset-warnings:not(:empty) { padding-left: 8px; margin: 8px 0; }
#plan-load-status { color: var(--text-secondary); }
.case-source-report { overflow-wrap: anywhere; }
.case-source-report h4 { margin: 16px 0 6px; }
.case-source-report p { margin: 10px 0; }
.case-source-report ul { padding-left: 20px; }
.case-source-report li { margin: 6px 0; }
.case-source-report small { display: block; color: var(--text-secondary); }
.case-source-report details { margin-top: 12px; }
/* Поясняющий текст с акцентной жёлтой полосой слева — язык для "заметок"
   (карточка кейса, причины отказа в очереди, детали плана). .reasoning-box
   и .why-not-box в этот язык НЕ входят — по просьбе вернули им старое
   оформление (коробка с фоном), см. ниже по файлам. */
.case-source-notice,
.unassigned-reason-box,
#dataset-warnings {
    border-left: 4px solid var(--note-accent);
    background: none;
    border-radius: 0;
    color: var(--text-primary);
}

.case-source-notice {
    padding: 4px 12px;
}

/* ACCESSIBILITY: SKIP LINKS & SCREEN-READER UTILITIES */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-links {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    pointer-events: none;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.skip-link {
    pointer-events: auto;
    position: absolute;
    top: -100px;
    background: #181A1B;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--beeline-yellow);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transition: top 120ms ease;
}

.skip-link:focus {
    top: 14px;
    outline: 2px solid var(--beeline-yellow);
    outline-offset: 3px;
}

:focus-visible {
    outline: 2px solid var(--focus-ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--focus-ring);
}

.engineer-row:focus-visible,
.gantt-header-strip:focus-visible,
.gantt-lane-label:focus-visible,
.gantt-bar:focus-visible,
.stress-card:focus-visible,
.unassigned-card:focus-visible,
.branch-pill:focus-visible,
.mini-pill:focus-visible,
.kpi-stat:focus-visible,
.map-btn:focus-visible,
.icon-btn-close:focus-visible {
    outline: 2px solid var(--focus-ink) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px var(--focus-ring) !important;
}

/* 1. APP SHELL — колонка: шапка на всю ширину сверху, тело (сайдбар+контент) снизу */
.app-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* Тело приложения — сайдбар и основной контент. Шапка position:fixed
   (вне потока), поэтому .app-body занимает всю высоту окна от самого
   верха — сайдбар/бригады резервируют место под шапку паддингом
   (см. .sidebar/.engineers-panel), карта — нет (см. .map-section). */
.app-body {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

/* SIDEBAR (64px) — без лого, оно теперь только в шапке. Шапка теперь
   position:fixed (вне потока), поэтому .sidebar своим верхним паддингом
   сам резервирует под неё место — иначе первая иконка нав-меню пряталась
   бы под шапкой. */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100%;
    background-color: var(--bg-surface);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--topbar-height) + 14px) 0 14px;
    z-index: 50;
}

/* Брендинг в шапке (top-bar): иконка + «waggle dance», двухцветное имя.
   В светлой теме оба слова чёрные (var(--text-primary)); в тёмной —
   «waggle» жёлтый, «dance» белый, а иконка получает белую круглую
   подложку (иначе тёмные детали пчелы теряются на тёмном стекле).

   Зафиксировано ровно над колонкой бригад (сайдбар + engineers-panel):
   margin-left выравнивает начало лого с текстом «Бригады» в
   .panel-header (72px сайдбара + 14px паддинга панели минус 18px
   собственного паддинга шапки), max-width не даёт «waggle dance»
   вылезти за правый край engineers-panel (310px минус те же 14px). */
.brand-logo {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: calc(var(--sidebar-width) - 4px);
    max-width: calc(var(--engineers-width) - 14px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    overflow: hidden;
}

.brand-name {
    display: block;
}

/* «билайн бизнес» — помельче и не в фирменных цветах waggle/dance,
   чтобы читалось как подпись, а не как второе название бренда. */
.brand-subtitle {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text-secondary);
    margin-top: 2px;
}

.brand-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin-right: 2px;
    transition: background-color var(--transition);
}

.brand-icon {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain;
}

:root[data-theme="dark"] .brand-icon-wrap {
    background: radial-gradient(circle at 60% 50%, #ffffff 0%, #ffffff 100%);
    border-radius: 50%;
}

.brand-waggle,
.brand-dance {
    display: inline-block;
    white-space: nowrap;
}

.brand-waggle {
    color: var(--beeline-yellow);
}

.brand-dance {
    color: #ffffff;
}

:root[data-theme="light"] .brand-waggle,
:root[data-theme="light"] .brand-dance {
    color: var(--text-primary);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 0 6px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 52px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

.nav-item:hover {
    background-color: var(--bg-surface-hover);
    color: var(--text-primary);
}

.nav-item.active {
    background-color: var(--bg-app);
    color: var(--text-primary);
    font-weight: 700;
}

.nav-item-primary {
    background: var(--beeline-yellow);
    color: #181A1B;
    font-weight: 700;
}

.nav-item-primary {
    transition: background-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}

/* Чуть приподнимается на наведении и держится, пока курсор над кнопкой
   (как .btn-primary); опускается обратным ходом того же transition. */
.nav-item-primary:hover {
    background: var(--beeline-yellow-hover);
    color: #181A1B;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}

.nav-item-action {
    background: var(--bg-surface-subtle);
    border: 1px solid var(--border-color);
}

.nav-item-action-last { margin-bottom: 8px; }

.nav-item:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.nav-icon {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.nav-label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
}

/* Текст этого пункта меняется по состоянию модельной смены ("Начать
   модельную смену" / "Модель смены активна" / "В смене · выдача
   подтверждена") — planning.js пишет его прямо в textContent кнопки,
   поэтому иконка живёт в ::before (обычный дочерний <svg> она бы стёрла),
   а подписи дано ужаться и перенестись на несколько строк вместо обрезки. */
.nav-item-sim {
    height: auto;
    min-height: 52px;
    padding: 6px 2px;
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
    word-break: break-word;
}

/* Модель смены активна и кликабельна для отмены — тёплая подсветка
   отличает это состояние от обычного невыделенного пункта. */
.nav-item-sim.sim-cancel-active {
    background-color: var(--beeline-yellow-tint, var(--bg-surface-hover));
    color: var(--beeline-yellow-hover, var(--text-primary));
}

.nav-item-sim.sim-cancel-active:hover {
    background-color: var(--beeline-yellow-tint, var(--bg-surface-hover));
}

.nav-item-sim::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 21px;
    height: 21px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='m12 14 4-4'/%3E%3Cpath d='M3.34 19a10 10 0 1 1 17.32 0'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='m12 14 4-4'/%3E%3Cpath d='M3.34 19a10 10 0 1 1 17.32 0'/%3E%3C/svg%3E") no-repeat center / contain;
}

.sidebar-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0 6px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background-color: var(--bg-surface-active);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
}

/* MAIN WRAPPER — теперь только рабочая область (бригады+карта) и Гант,
   сама шапка вынесена на уровень .app-shell (см. .top-bar ниже). */
.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* TOP BAR (58px, Quiet) — растянут на всю ширину экрана (прямой ребёнок
   .app-shell, НЕ внутри .app-body), поверх и сайдбара, и контента. */
/* position:fixed — как .app-header в прошлом проекте: шапка выходит из
   потока ПОЛНОСТЬЮ (не просто "выше" за счёт margin), поэтому .app-body
   рендерится от самого верха окна, а не от высоты шапки. За счёт этого
   под стеклом физически оказывается карта (когда сайдбар/бригады уже
   отступили под шапку паддингом, см. .sidebar/.engineers-panel) — блюр
   размывает настоящий контент, а не пустой фон, поэтому стекло не
   выглядит просто тёмной плашкой. */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    min-height: var(--topbar-height);
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    /* То же «жидкое стекло», что и у .floating-panel над картой: та же
       подложка/блюр/тень — отличается только отсутствием radius, т.к.
       шапка full-bleed (см. комментарий у .app-shell). border-bottom
       тоньше и мягче сплошной заливки — отделяет шапку от контента, не
       отрезая её. */
    background-color: var(--glass-bg);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 18px;
    z-index: 900;
}

/* Филиалы/дата/датасет/кнопка-панель — зафиксированы по X не относительно
   лого (его ширина "плавает" в зависимости от рендера шрифта), а
   абсолютно, ровно над кнопками масштабирования карты
   (.map-controls-clean, left:12px внутри .map-section, которая сама
   начинается после сайдбара и колонки бригад). .top-bar сам position:fixed,
   так что он и есть contaning block для этого absolute. */
/* flex-wrap: nowrap — раньше был wrap, и на экранах уже ~15" контент
   (филиалы/дата/датасет/кнопка) не помещался в одну строку и съезжал на
   вторую. Вместо переноса — ужимаем сами элементы через брейкпоинты ниже
   (меньше паддинги/шрифты, у кнопки прячется текстовая подпись).
   ВАЖНО: overflow здесь ставить нельзя (даже только overflow-x) — CSS
   промоутит второй axis тоже в clip-режим, а .top-bar-left это прямой
   предок #date-picker-popup (см. .date-stepper), который открывается НИЖЕ
   этого блока — overflow-контекст его обрежет, даже будучи position:absolute
   с собственным containing block'ом ниже по дереву. Проверено: без
   overflow всё и так помещается в одну строку до 1024px включительно. */
.top-bar-left {
    position: absolute;
    left: calc(var(--sidebar-width) + var(--engineers-width) + 12px);
    right: calc(var(--header-actions-width, 300px) + 64px);
    top: 0;
    bottom: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    min-width: 0;
}

.top-bar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.product-title-group {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.product-title {
    font-size: 16.5px;
    font-weight: 800;
    color: var(--text-primary);
}

.brand-tag-mini {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.top-divider {
    width: 1px;
    height: 22px;
    background-color: var(--border-color);
    margin: 0 4px;
}

/* Переключатель темы — чекбокс-сиблинг трека (не вложен внутрь),
   раскраска состояний идёт через input:checked ~ .theme-switch-track,
   доступно клавиатуре/скринридерам как обычный чекбокс. См. theme.js. */
.theme-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.theme-switch input[type="checkbox"] {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.theme-switch-track {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: rgba(24, 26, 27, 0.12);
    transition: background-color var(--transition), border-color var(--transition);
}

.theme-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--beeline-yellow);
    color: #181A1B;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    pointer-events: none;
}

.theme-switch-thumb svg {
    position: absolute;
    width: 12px;
    height: 12px;
    transition: opacity 0.3s ease, transform 0.4s ease;
}

.theme-switch-sun {
    opacity: 1;
    transform: rotate(0deg);
}

.theme-switch-moon {
    opacity: 0;
    transform: rotate(-90deg);
}

/* Тёмная тема = чекбокс отмечен: трек красится жёлтым (иначе на
   тёмном стекле шапки не видно, где сам переключатель), ползунок
   переезжает направо, солнце и луна докручиваются друг в друга. */
.theme-switch input:checked ~ .theme-switch-track {
    background: rgba(255, 199, 44, 0.18);
    border-color: var(--beeline-yellow);
}

.theme-switch input:checked ~ .theme-switch-track .theme-switch-thumb {
    transform: translateX(18px);
    background: var(--text-primary);
    color: var(--bg-surface);
}

.theme-switch input:checked ~ .theme-switch-track .theme-switch-sun {
    opacity: 0;
    transform: rotate(90deg);
}

.theme-switch input:checked ~ .theme-switch-track .theme-switch-moon {
    opacity: 1;
    transform: rotate(0deg);
}

/* Стрелка-переключатель сворачиваемой панели деталей плана — всегда
   видна между шапкой и KPI-полосой, сама панель (#header-details)
   показывается/прячется по клику (см. theme.js: toggleHeaderDetails). */
.header-details-toggle {
    width: 100%;
    height: var(--header-toggle-height);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: var(--bg-surface-subtle);
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    z-index: 40;
    transition: background-color var(--transition), color var(--transition);
}

.header-details-toggle:hover {
    background-color: var(--bg-surface-hover);
    color: var(--text-primary);
}

.header-details-arrow {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    transition: transform 0.2s ease;
}

.header-details-toggle[aria-expanded="true"] .header-details-arrow {
    transform: rotate(180deg);
}

/* Сама панель — просто группа из трёх уже существующих секций;
   display:contents избавляет от лишнего бокса-обёртки, так что они
   продолжают вести себя как обычные потоковые дети .floating-panel.
   Видимость своих детей (например #planning-preview-banner.hidden)
   эта обёртка не трогает — управляет только собой целиком. */
#header-details {
    display: none;
}

#header-details.is-open {
    display: contents;
}

/* Branch Segmented Pills */
.branch-pills {
    display: flex;
    background-color: var(--bg-surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 3px;
    gap: 2px;
}

.branch-pill {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 11px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

.branch-pill:hover {
    color: var(--text-primary);
}

.branch-pill.active {
    background-color: var(--beeline-yellow);
    color: #181A1B;
    box-shadow: var(--shadow-sm);
}

/* Date Stepper */
.date-stepper {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--bg-surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 3px 8px;
    gap: 6px;
}

.current-date {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Видимая замена нативного <input type="date"> — сам инпут теперь sr-only,
   см. комментарий у .date-stepper в index.html. Просто текстовая кнопка в
   формате ДД.ММ.ГГГГ, открывающая кастомный календарь ниже. */
.planning-date-trigger {
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: var(--radius-xs);
}

.planning-date-trigger:hover {
    color: var(--beeline-yellow-hover, var(--beeline-yellow));
}

.planning-date-trigger:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
}

.planning-date-trigger:focus-visible {
    outline: 2px solid var(--focus-ink);
    outline-offset: 2px;
}

/*
   Кастомный календарь: округлая карточка, дни не из текущего месяца —
   блёклые, выделение (сегодня/выбранная дата) — в жёлтых тонах Beeline.
   Нативный календарь <input type="date"> стилизовать нельзя (закрытый UA
   shadow root) — отсюда и весь этот виджет, см. theme.js.
   */
.date-picker-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 950;
    width: 264px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 12px;
}

.date-picker-popup.hidden {
    display: none;
}

.date-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.date-picker-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.date-picker-nav {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
}

.date-picker-nav:hover {
    background-color: var(--beeline-yellow-tint, var(--bg-surface-hover));
}

.date-picker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 2px;
}

.date-picker-weekdays span {
    text-align: center;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    padding-bottom: 4px;
}

.date-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.date-picker-day {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    background: none;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
}

.date-picker-day:hover {
    background-color: var(--beeline-yellow-tint, var(--bg-surface-hover));
}

/* Дни соседних месяцев — блёклые, но кликабельные (уводят и вид, и выбор
   в тот месяц), как принято в большинстве календарных виджетов. */
.date-picker-day.other-month {
    color: var(--text-muted);
    opacity: 0.55;
}

.date-picker-day.today:not(.selected) {
    border: 1px solid var(--beeline-yellow);
}

.date-picker-day.selected {
    background-color: var(--beeline-yellow);
    color: #181A1B;
    font-weight: 800;
}

.dataset-select {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    background-color: var(--bg-surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    cursor: pointer;
}

/* Status indicator */
.status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-secondary);
    padding: 0 6px;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    background-color: var(--status-success);
}

/* Database status badge */
.btn-db-badge {
    background-color: var(--bg-surface-subtle);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 11px;
    gap: 7px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
}

.btn-db-badge:hover {
    background-color: var(--bg-surface-hover);
    border-color: var(--border-focus);
}

.db-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    background-color: var(--status-warning);
    transition: background-color var(--transition);
}

.btn-db-badge.connected .db-dot {
    background-color: var(--status-success);
    box-shadow: 0 0 6px rgba(22, 163, 74, 0.4);
}

.btn-db-badge.offline .db-dot {
    background-color: var(--text-muted);
}

/* Clean Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 13px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    min-height: 40px;
    transition: all var(--transition);
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background-color: var(--beeline-yellow);
    color: #181A1B;
    border-color: var(--beeline-yellow);
    box-shadow: var(--shadow-sm);
}

/* Чуть приподнимается на наведении и держится в этом положении, пока
   курсор над ней (не подпрыгивает туда-сюда) — опускается сама, когда
   наведение снимается, это просто обратный ход того же transition. */
.btn-primary:hover {
    background-color: var(--beeline-yellow-hover);
    transform: translateY(-2px);
}

.btn-ghost {
    background-color: var(--bg-surface-subtle);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.btn-ghost:hover {
    background-color: var(--bg-surface-hover);
}

.floating-panel-toggle svg {
    margin-right: 5px;
}

.floating-panel-toggle.active {
    background-color: var(--beeline-yellow);
    border-color: var(--beeline-yellow);
    color: #181A1B;
}

.btn-danger {
    background-color: var(--status-danger);
    color: #FFFFFF;
}

.icon-btn-xs {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    border-radius: var(--radius-xs);
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    position: relative;
}

.icon-btn-xs::after {
    content: '';
    position: absolute;
    inset: -6px;
}

.icon-btn-xs:hover {
    color: var(--text-primary);
}

.icon-btn-close {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: var(--radius-xs);
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    position: relative;
}

.icon-btn-close::after {
    content: '';
    position: absolute;
    inset: -6px;
}

.icon-btn-close:hover {
    color: var(--text-primary);
}

/*
   2. CALM KPI METRICS STRIP (42px, Minimalist text ribbon)
   */

/* Внутри .floating-panel — карточка-полоса, не строка на всю ширину
   экрана: переносится, а не скроллится по горизонтали. */
.kpi-strip {
    display: flex;
    align-items: center;
}

/* Каждый показатель — отдельная карточка-чип, а не сплошная строка через
   точки-разделители: проще выхватить взглядом нужное число. */
.kpi-strip-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    width: 100%;
}

.kpi-stat {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
}

.kpi-stat strong {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 13px;
}

.kpi-dot {
    color: #D1D5DB;
    font-size: 8px;
}

/* .kpi-stat strong обычно красится в var(--text-primary) (см. выше) —
   внутри этих двух плашек своя, самодостаточная пара фон/текст, и число
   должно наследовать ЕЁ цвет, а не общий "числа в KPI-полосе всегда
   тёмные" — иначе в тёмной теме число становится почти белым поверх
   светло-жёлтого/оранжевого фона и пропадает. */
.unassigned-highlight strong,
.jeopardy-pill strong {
    color: inherit;
}

.unassigned-highlight {
    color: #B45309;
    background-color: #FEF3C7;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--beeline-yellow);
    font-size: 12.5px;
}

.jeopardy-pill {
    color: #991B1B;
    background-color: #FEE2E2;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    border: 1.5px solid #EF4444;
    font-weight: 600;
    font-size: 12.5px;
    transition: all var(--transition);
}

/* Тёмная тема: раньше обе плашки были почти неотличимым мутным ржаво-
   коричневым — плохо смотрелось и не давало отличить "просто очередь" от
   "риска" с одного взгляда. Теперь развели по смыслу и по фирменной
   палитре: очередь — не тревога, а счётчик, поэтому фирменный жёлтый
   (те же токены, что у бренда/hover-подсветки); риск — та же пара
   фон/текст, что у "перегруженной" зоны в аналитике (.an-zone.OVERLOADED),
   чтобы "опасный" красный был визуально одним и тем же везде в приложении. */
:root[data-theme="dark"] .unassigned-highlight {
    color: var(--beeline-yellow);
    background-color: var(--beeline-yellow-tint);
    border-color: var(--beeline-yellow);
}

:root[data-theme="dark"] .jeopardy-pill {
    color: #FECACA;
    background-color: #7F1D1D;
    border-color: #EF4444;
}

.jeopardy-pill:hover {
    background-color: #FECACA;
    border-color: #DC2626;
}

:root[data-theme="dark"] .jeopardy-pill:hover {
    background-color: #991B1B;
    border-color: #DC2626;
}

.jeopardy-pulse {
    animation: jeopardy-radar-pulse 2s infinite;
}

@keyframes jeopardy-radar-pulse {
    0% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(234, 88, 12, 0); }
    100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); }
}

.kpi-delta-subtle {
    font-size: 11.5px;
    color: #0369A1;
}

/*
   3. WORKSPACE: ENGINEERS PANEL + MAP + ON-DEMAND DRAWER
   */

.workspace {
    flex: 1;
    display: flex;
    min-height: 0;
    position: relative;
    overflow: clip;
    /* .workspace теперь и физически, и по layout начинается у самого
       верха (шапка над ней — отдельный fixed-слой), поэтому её
       getBoundingClientRect().top равен 0, а не высоте шапки. Учтено в
       availableGanttHeight() (app.js) явным вычитанием --topbar-height. */
}

/* Engineers panel (310px) */
/* Блок бригад начинается сразу под шапкой: шапка position:fixed (вне
   потока), поэтому сам резервируем под неё место сверху, а соседняя
   .map-section — нет, чтобы карта доходила до самого верха (см. ниже). */
.engineers-panel {
    width: var(--engineers-panel-width);
    min-width: var(--engineers-panel-width);
    transition: width 220ms ease, min-width 220ms ease;
    height: 100%;
    background-color: var(--bg-surface);
    border-right: 1px solid var(--border-color);
    padding-top: var(--topbar-height);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scroll-padding-top: var(--topbar-height);
    z-index: 20;
}

.panel-header {
    padding: 8px 12px 5px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.filter-pills-mini {
    display: flex;
    background-color: var(--bg-surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 1px;
    gap: 1px;
}

.mini-pill {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border: none;
    background: transparent;
    border-radius: 3px;
    color: var(--text-secondary);
    cursor: pointer;
}

.mini-pill.active {
    background-color: var(--bg-surface-active);
    color: var(--text-primary);
}

.search-wrap {
    padding: 0 10px 5px 10px;
}

.search-input-sleek {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 13px;
    background-color: var(--bg-surface-subtle);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    min-height: 32px;
    height: 32px;
    color: var(--text-primary);
}

.search-input-sleek:focus-visible {
    outline: 2px solid var(--focus-ink);
    outline-offset: 1px;
    box-shadow: 0 0 0 3px var(--focus-ring);
    border-color: var(--focus-ink);
    background-color: var(--bg-surface);
}

.dispatch-summary {
    display: grid;
    gap: 4px;
    margin: 6px 10px 8px;
    flex-shrink: 0;
}

/* Три плашки — тот же образ, что и у аналогичных плашек в "Действия и
   показатели" (.unassigned-highlight/.jeopardy-pill в шапке): округлая
   пилюля, яркая граница, приглушённая заливка. Назначено — зелёная (это
   не предупреждение, а нейтрально-позитивный статус), очередь — жёлтая,
   риск — красная. Очередь/риск дополнительно кликабельны — открывают те
   же шторки, что и одноимённые плашки в шапке. */
.dispatch-summary-pills {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.dispatch-summary-pills-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.dispatch-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    font-size: 11px;
    font-weight: 600;
}

.dispatch-pill strong { font-weight: 800; }
.dispatch-summary-scope { margin-bottom: 3px; font-size: 10.5px; color: var(--text-secondary); }
.dispatch-event-hint { padding: 4px 8px; margin: 0; font-size: 10.5px; flex-shrink: 0; overflow-wrap: anywhere; }

/* Светлая тема — как было исходно, у каждой свой пастельный тон (фон и
   текст — отдельная пара, без привязки к цвету обводки). Тёмная тема —
   другой принцип: заливка нейтральная (общая для всех трёх), а цвет
   текста равен цвету обводки — так эти плашки лучше читаются на тёмном
   фоне (это уже отдельная просьба, светлую тему она не касается). */
.dispatch-pill-assigned {
    background-color: #DCFCE7;
    color: #14532D;
    border-color: #22C55E;
}
:root[data-theme="dark"] .dispatch-pill-assigned {
    background-color: var(--bg-surface-subtle);
    color: #4ADE80;
    border-color: #4ADE80;
}

.dispatch-pill-queue {
    background-color: #FEF3C7;
    color: #B45309;
    border-color: var(--beeline-yellow);
    cursor: pointer;
}
:root[data-theme="dark"] .dispatch-pill-queue {
    background-color: var(--bg-surface-subtle);
    color: var(--beeline-yellow);
    border-color: var(--beeline-yellow);
}

.dispatch-pill-risk {
    background-color: #FEE2E2;
    color: #991B1B;
    border-color: #EF4444;
    cursor: pointer;
}
:root[data-theme="dark"] .dispatch-pill-risk {
    background-color: var(--bg-surface-subtle);
    color: #F87171;
    border-color: #F87171;
}

.dispatch-pill-p1 {
    background-color: #DBEAFE;
    color: #1D4ED8;
    border-color: #3B82F6;
    cursor: pointer;
}
:root[data-theme="dark"] .dispatch-pill-p1 {
    background-color: var(--bg-surface-subtle);
    color: #60A5FA;
    border-color: #60A5FA;
}

.dispatch-summary-revision { color: var(--text-secondary); font-size: 10px; }
.custom-map-stop.attention-muted, .radar-beacon.attention-muted, .gantt-bar.attention-muted { opacity: 0.22; }
.radar-beacon.attention-muted { animation: none; }
.gantt-lane.attention-muted .gantt-lane-label, .gantt-lane.attention-muted .bar-travel { opacity: 0.35; }

.attention-plan-meta { display: flex; justify-content: space-between; gap: 6px; color: var(--text-secondary); font-size: 10px; }

.engineers-list {
    flex: 1;
    min-height: 112px;
    overflow-y: auto;
    padding: 2px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Engineer row (50px) */
.engineer-row {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    min-height: 50px;
}

.engineer-row:hover {
    border-color: #BDBFB9;
    background-color: var(--bg-surface-hover);
}

.engineer-row.selected {
    border-color: var(--beeline-yellow);
    background-color: var(--beeline-yellow-tint);
}

.engineer-row.selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--beeline-yellow);
}

.row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.row-name-group {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.row-status-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.row-status-dot.active { background-color: var(--status-success); }
.row-status-dot.reserve { background-color: #94A3B8; }

.row-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-transport {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
}

.row-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
}

.row-progress-line {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: var(--beeline-yellow);
    transition: width 0.3s ease;
}

/*
   4. CENTER: EXPANSIVE MAP & CLEAN CONTROLS
   */

/* Никакого паддинга/отступа сверху: шапка position:fixed и лежит НАД
   картой отдельным слоем (z-index выше), поэтому карта естественным
   образом простирается от самого верха окна и видна (размыто) сквозь
   матовое стекло шапки — а не "накладывается" каким-то трюком. */
.map-section {
    flex: 1;
    position: relative;
    background-color: var(--bg-app);
    overflow: hidden;
}

/* Тёмная тема не подменяет тайлы карты — тот же слой (OSM/CartoDB),
   просто наложен ЧБ-фильтр поверх подложки. .leaflet-tile-pane —
   отдельная от overlay/marker-pane панель, поэтому под фильтр попадает
   только сама подложка, а маршруты/маркеры/плашки — нет. */
:root[data-theme="dark"] .leaflet-tile-pane {
    filter: grayscale(1) brightness(0.65) contrast(1.05);
}

@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) .leaflet-tile-pane {
        filter: grayscale(1) brightness(0.65) contrast(1.05);
    }
}

:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip {
    background: var(--bg-surface);
    color: var(--text-primary);
}

:root[data-theme="dark"] .leaflet-popup-close-button {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .leaflet-bar a {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

/* Подпись атрибуции (Leaflet/OpenStreetMap) — служебный текст с фиксированным
   видом, намеренно НЕ следует теме: остаётся как задал сам Leaflet. */
.leaflet-attribution-flag {
    display: none !important;
}

.map-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.map-fallback {
    width: 100%;
    height: 100%;
    min-height: 180px;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--bg-surface-subtle);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

/* Map controls */
.map-controls-clean {
    position: absolute;
    /* .map-section теперь физически выше на --chrome-reserved (см. выше),
       поэтому те же "визуальные" 12px под шапкой требуют этой поправки. */
    top: calc(var(--chrome-reserved) + 12px);
    left: 12px;
    display: flex;
    /* Раньше center — с вертикальным зумом (.map-btn-group-zoom, он теперь
       выше обычной кнопки в 2 раза) это опускало горизонтальные кнопки
       в середину, вровень с границей между "+" и "−", а не с самим "+".
       flex-start выравнивает по верху — вровень с "+", как просили. */
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    max-width: calc(100% - 24px);
    z-index: 400;
}

/* Обёртки для мобильной раскладки (см. mobile.css): на десктопе они не
   должны влиять на flex-разметку .map-controls-clean, поэтому "растворяются"
   через display:contents — дочерние .map-btn-group остаются прямыми детьми
   контейнера, как и раньше. */
.map-controls-stack,
.map-controls-row {
    display: contents;
}

.map-btn-group {
    display: flex;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.map-btn {
    height: 32px;
    min-width: 32px;
    padding: 0 10px;
    border: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color var(--transition);
}

.map-btn:hover {
    background-color: var(--bg-surface-hover);
}

.map-btn-group .map-btn:not(:last-child) {
    border-right: 1px solid var(--border-subtle);
}

/* Зум — вертикальный столбик (плюс сверху, минус снизу), а не горизонтальная
   пара: так привычнее и для десктопа, и для мобильной версии одинаково. */
.map-btn-group-zoom {
    flex-direction: column;
}

.map-btn-group-zoom .map-btn:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
}

.map-btn-text {
    font-size: 12px;
    padding: 0 11px;
}

.map-btn-text.active {
    background-color: var(--bg-surface-active);
    font-weight: 700;
}

/* ------------------------------------------------------------------
   Плавающая стеклянная панель над картой (top-right): действия плана
   (БД/Исходники/Стресс-тест/+Событие/Рассчитать), KPI-полоса и
   сворачиваемые по стрелке детали плана. Единственный, кроме шапки,
   элемент с матовым стеклом — .sidebar и .engineers-panel остаются
   непрозрачными сплошными панелями.
------------------------------------------------------------------- */
.floating-panel {
    position: absolute;
    top: calc(var(--chrome-reserved) + 12px);
    right: 12px;
    width: min(420px, calc(100% - 24px));
    max-height: calc(100% - var(--chrome-reserved) - 24px);
    display: flex;
    flex-direction: column;
    background-color: var(--glass-bg);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 450;
}

.floating-panel.hidden {
    display: none;
}

/* Позиция справа (top-right по умолчанию, вплотную слева от карточки
   бригады/наряда или боковой шторки, когда одна из них открыта) считается
   в JS инлайн-стилем — см. repositionFloatingPanel() в theme.js — а не
   CSS-классом: там же и MutationObserver, который пересчитывает её при
   каждом открытии/закрытии этих шторок, а не только в момент открытия
   самой панели. */

/* Затягивается перетаскиванием (см. initFloatingPanelDrag в theme.js) —
   пока панель перетягивается, отключаем плавный transition/скролл, чтобы
   она не "запаздывала" за курсором. */
.floating-panel.is-dragging {
    transition: none;
    user-select: none;
}

.floating-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 8px 8px 14px;
    border-bottom: 1px solid var(--glass-border);
    cursor: grab;
    flex-shrink: 0;
}

.floating-panel-header:active {
    cursor: grabbing;
}

.floating-panel-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.floating-panel-section {
    padding: 10px 12px;
}

.floating-panel-section + .floating-panel-section {
    border-top: 1px solid var(--glass-border);
}

.floating-panel-section-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.floating-panel-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Simulation Floating Banner */
/* То же матовое стекло, что у шапки/.floating-panel — см. комментарий там. */
.sim-banner {
    position: absolute;
    bottom: 12px;
    left: 198px; /* правее угловой док-панели (.corner-dock) */
    background-color: var(--glass-bg);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 7px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 450;
    /* Панель — управляющие элементы, а не текст для чтения/копирования:
       случайное выделение при клике/протяжке по бейджу, часам, кнопкам
       скорости или счётчику смотрится как баг. */
    user-select: none;
    -webkit-user-select: none;
}

.sim-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

.sim-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    background-color: var(--beeline-yellow);
}

.btn-sim-play {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    background-color: var(--beeline-yellow);
    color: #181A1B;
    border: none;
    cursor: pointer;
}

.sim-time-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sim-clock {
    font-size: 14px;
    font-weight: 700;
}

.sim-slider {
    width: 100px;
    accent-color: var(--beeline-yellow);
}

.sim-speeds {
    display: flex;
    gap: 2px;
}

.speed-btn {
    font-family: var(--font-sans);
    font-size: 11px;
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    background: transparent;
    cursor: pointer;
}

.speed-btn.active {
    background-color: var(--beeline-yellow);
    font-weight: 700;
}

.sim-counter {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Справочник нормативов — галочки допустимого транспорта жёлтые (акцент
   бренда), а не системный синий цвет чекбокса по умолчанию. */
#regulations-tbody input[type="checkbox"] {
    accent-color: var(--beeline-yellow);
}

/*
   5. SLIDE-OVER CONTEXT DRAWER (Appears on demand)
   */

.context-drawer {
    position: absolute;
    /* См. .map-controls-clean — та же поправка на возросшую высоту
       .map-section, иначе шапка налезала бы на заголовок карточки. */
    top: var(--chrome-reserved);
    right: 0;
    bottom: 0;
    width: var(--drawer-width);
    background-color: var(--bg-surface);
    border-left: 1px solid var(--border-color);
    box-shadow: var(--shadow-drawer);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    animation: drawer-slide 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes drawer-slide {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.context-drawer.hidden {
    display: none;
}

/* Заголовок дублировал .ticket-top (то же имя бригады/номер наряда) —
   визуально его больше нет: остаётся только доступное имя для
   aria-labelledby (см. .context-title ниже), а крестик закрытия
   переезжает в правый верхний угол самой панели, поверх прокрутки. */
.context-drawer-header {
    height: 0;
    padding: 0;
    border-bottom: none;
    position: relative;
}

.context-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.context-drawer-header .icon-btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    background: var(--bg-surface);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
}

.context-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 44px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Compact Ticket Details in Drawer */
.ticket-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.ticket-number {
    font-size: 17px;
    font-weight: 800;
}

.ticket-type {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Единый образ для всех статусных плашек в проекте (.badge-tag,
   .jeopardy-pill, .unassigned-highlight, .an-zone, .stress-card-badge,
   .planning-*-badge и т.п. — см. их ниже по файлам): округлая пилюля,
   яркая (насыщенная) граница по контуру, внутри — блёклая/приглушённая
   заливка того же цвета. Началось с .badge-tag-queue выше — теперь так
   везде, где раньше был плоский прямоугольник без единого правила. */
.badge-tag {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-full);
}

.badge-tag.p1 { background-color: #FEE2E2; color: #991B1B; border: 1.5px solid #EF4444; }
.badge-tag.normal { background-color: #DCFCE7; color: #15803D; border: 1.5px solid #22C55E; }
/* Плашка "риска" — красная (акцент тревоги), сама карточка (.jeopardy-card
   выше) — спокойный жёлтый: это очередь на внимание, а не сигнал тревоги
   целиком; красным остаётся только сам маркер. */
.badge-tag.jeopardy { background-color: #FEE2E2; color: #991B1B; border: 1.5px solid #EF4444; }

/* У этих трёх не было тёмного варианта вообще — бледные светлые плашки
   на тёмных карточках (см. .jeopardy-card выше) смотрелись как светящаяся
   наклейка. Теперь в тёмных, а не бледных тонах. */
:root[data-theme="dark"] .badge-tag.p1 { background-color: #7F1D1D; color: #FECACA; border-color: #EF4444; }
:root[data-theme="dark"] .badge-tag.normal { background-color: var(--bg-surface-subtle); color: #4ADE80; border-color: #4ADE80; }
:root[data-theme="dark"] .badge-tag.jeopardy { background-color: #7F1D1D; color: #FECACA; border-color: #EF4444; }

/* Плашка "В очереди" (шторка неназначенных нарядов) — округлая (пилюля):
   яркая граница, заливка внутри — блёклая. На CSS-переменных, поэтому
   тёмная тема подхватывается сама, без отдельного переопределения. */
.badge-tag-queue {
    background-color: var(--beeline-yellow-tint);
    color: var(--note-accent);
    border: 1.5px solid var(--beeline-yellow);
    border-radius: var(--radius-full);
}

.info-card {
    background-color: var(--bg-surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    font-size: 12.5px;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.time-card-val {
    font-size: 14px;
    font-weight: 700;
}

.time-card-val.success { color: var(--status-success-text); }
.time-card-val.jeopardy { color: #C2410C; }

/* Time Decomposition Card (VROOM / Timefold FSM Inspiration) */
.time-breakdown-card {
    background-color: var(--bg-surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 11px 13px;
}

.time-breakdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.time-breakdown-title {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.time-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.time-cell {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 6px 4px;
    text-align: center;
}

/* Раньше это был инлайн-стиль в app.js (background: #FFF7ED всегда, вне
   зависимости от темы) — в тёмной теме белый var(--text-primary) на этом
   светлом фоне пропадал. Тот же оранжевый чип, что и у .badge-tag.jeopardy
   рядом в той же карточке. */
.time-cell.jeopardy { border-color: #FB923C; background: #FFF7ED; }

:root[data-theme="dark"] .time-cell.jeopardy { border-color: #EA580C; background: #7C2D12; }

.time-cell-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.time-cell-val.jeopardy { color: #C2410C; }

:root[data-theme="dark"] .time-cell-val.jeopardy { color: #FED7AA; }

.time-cell-lbl {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Без рамки и заливки-«коробки» — только текст и ровная жёлтая полоса слева. */
.reasoning-box {
    border-left: 3px solid var(--note-accent);
    padding: 2px 0 2px 11px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-primary);
}

/* Каждая причина/фраза обоснования — своей строкой (см. splitReasoningLines
   в app.js), без завершающей пунктуации. */
.reasoning-line:not(:last-child) {
    margin-bottom: 4px;
}

/* Насыщенный, но не кричащий красный (rose-600) — самостоятельная пара
   фон/текст, читается одинаково в любой теме. */
.btn-quick-incident {
    width: 100%;
    margin-top: 10px;
    padding: 9px 13px;
    background-color: #E11D48;
    border: 1px solid #E11D48;
    color: #FFFFFF;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}

.btn-quick-incident:hover {
    background-color: #BE123C;
    border-color: #BE123C;
    transform: translateY(-1px);
}

/* Map marker in jeopardy halo */
.custom-map-stop.in-jeopardy {
    box-shadow: 0 0 0 3px #FB923C, 0 2px 4px rgba(0,0,0,0.2) !important;
    border-color: #EA580C !important;
}

.drawer-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

/*
   6. COLLAPSIBLE GANTT (Bottom Bar)
   */

.gantt-section {
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    z-index: 30;
    transition: height 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    height: 205px;
    max-height: calc(100vh - 150px);
    overflow: hidden;
    position: relative;
}

.gantt-section.collapsed {
    height: 38px !important;
}

.gantt-section.is-resizing {
    transition: none !important;
    user-select: none;
}

/* Draggable Splitter Handle */
.gantt-resize-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 7px;
    cursor: ns-resize;
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: background-color var(--transition);
}

.gantt-resize-handle:hover,
.gantt-section.is-resizing .gantt-resize-handle {
    background-color: var(--beeline-yellow);
}

.gantt-resize-handle:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: -2px;
    background-color: var(--beeline-yellow-tint);
}

.resize-handle-bar {
    width: 36px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--text-muted);
    opacity: 0.5;
    transition: opacity var(--transition);
}

.gantt-resize-handle:hover .resize-handle-bar {
    opacity: 1;
    background-color: #181A1B;
}

.gantt-section.collapsed .gantt-resize-handle {
    display: none;
}

.gantt-header-strip {
    height: 38px;
    min-height: 38px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bg-surface);
    cursor: pointer;
    border-bottom: 1px solid var(--border-subtle);
}

.gantt-strip-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gantt-toggle-icon {
    font-size: 11px;
    color: var(--text-secondary);
    transition: transform var(--transition);
}

.gantt-section.collapsed .gantt-toggle-icon {
    transform: rotate(180deg);
}

.gantt-title {
    font-size: 13px;
    font-weight: 700;
}

.gantt-summary {
    font-size: 12px;
    color: var(--text-secondary);
}

.gantt-legend-clean {
    display: flex;
    align-items: center;
    gap: 12px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-secondary);
}

.block-sample {
    width: 9px;
    height: 9px;
    border-radius: 2px;
}

.block-travel { background-color: #CBD5E1; }
.block-work { background-color: #0891B2; }
.block-route {
    background: linear-gradient(90deg, #0891B2 0 16%, #059669 16% 32%, #D97706 32% 48%, #7C3AED 48% 64%, #DB2777 64% 80%, #2563EB 80% 100%);
}
.block-lunch { background-color: #FDE68A; }
.block-locked { background-color: #10B981; }
.block-p1 { width: 21px; height: 14px; border: 2px solid #1F2937; background: #FFC72C; color: #1F2937; font-size: 9px; font-weight: 800; text-align: center; line-height: 10px; }
.block-risk { width: 15px; height: 14px; border: 2px dashed #1F2937; background: repeating-linear-gradient(135deg, #FFFFFF 0 5px, #CBD5E1 5px 8px); }
.block-sample.block-projection { width: 15px; height: 14px; border: 1.5px dashed #2563EB; background: rgba(37, 99, 235, 0.22); border-radius: 2px; box-sizing: border-box; }
:root[data-theme="dark"] .block-sample.block-projection { border-color: #60A5FA; background: rgba(96, 165, 250, 0.25); }

.gantt-strip-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gantt-action-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.gantt-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}

.gantt-ruler {
    height: 24px;
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-surface-subtle);
    scrollbar-gutter: stable;
}

.gantt-ruler-gutter {
    width: 150px;
    min-width: 150px;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    border-right: 1px solid var(--border-color);
}

.gantt-ruler-hours {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.gantt-ruler-hour {
    position: absolute;
    top: 3px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    transform: translateX(-50%);
    white-space: nowrap;
}

.gantt-ruler-hour:first-child {
    transform: translateX(0);
}

.gantt-ruler-hour:last-child {
    transform: translateX(-100%);
}

.gantt-lanes-wrap {
    flex: 1;
    overflow-y: auto;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 var(--bg-surface-subtle);
    scrollbar-gutter: stable;
}

.gantt-lanes-wrap::-webkit-scrollbar {
    width: 6px;
}

.gantt-lanes-wrap::-webkit-scrollbar-track {
    background: var(--bg-surface-subtle);
}

.gantt-lanes-wrap::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 3px;
}

.gantt-lanes-wrap::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

.gantt-lanes {
    display: flex;
    flex-direction: column;
}

.gantt-lane {
    display: flex;
    height: 32px;
    min-height: 32px;
    border-bottom: 1px solid var(--border-subtle);
    align-items: center;
}

.gantt-lane:hover {
    background-color: var(--bg-surface-hover);
}

.gantt-lane-label {
    width: 150px;
    min-width: 150px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    border-right: 1px solid var(--border-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}
.gantt-crew-swatch { width: 8px; height: 16px; border-radius: 2px; flex: none; }
.gantt-crew-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gantt-reserve-tag { color: var(--text-secondary); font-size: 9px; font-weight: 500; flex: none; }

.gantt-track {
    flex: 1;
    height: 100%;
    position: relative;
}

.gantt-bar {
    position: absolute;
    top: 4px;
    bottom: 9px;
    border-radius: var(--radius-xs);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--route-ink, #FFFFFF);
    cursor: pointer;
    overflow: hidden;
    padding: 0 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Переезд — тонкая полоса под основной зоной строки: не лежит на одном уровне с работой */
.gantt-bar.bar-travel { background-color: #CBD5E1; color: #334155; top: auto; bottom: 2px; height: 5px; padding: 0; font-size: 0; }
.gantt-bar.bar-work { background-color: #0891B2; color: var(--route-ink, #FFFFFF); }
.gantt-bar.bar-p1 { box-shadow: inset 0 0 0 2px #1F2937; }
/* Риск SLA — отдельный контур цвета ступени запаса (красный → оранжевый → янтарный), заливка бригады не трогается */
.gantt-bar.bar-risk:not(.bar-locked) { outline: 2px solid var(--risk-color, #F59E0B); outline-offset: 1px; }
.gantt-bar-slack { position: relative; z-index: 3; margin-left: 4px; padding: 0 3px; border-radius: 3px; background: var(--risk-color, #F59E0B); color: #FFFFFF; font-size: 10px; font-weight: 700; line-height: 1.3; }
.block-risk-sample { width: 15px; height: 14px; border: 2px solid var(--risk-color); background: transparent; }
.gantt-bar.bar-lunch { background-color: #FDE68A; color: #78350F; }
.gantt-bar.bar-warehouse { background-color: #BFDBFE; color: #1E3A8A; border: 1px solid #3B82F6; }
:root[data-theme="dark"] .gantt-bar.bar-warehouse { background-color: #1E3A8A; color: #BFDBFE; border-color: #3B82F6; }
.gantt-bar.bar-lunch-preview {
    background: repeating-linear-gradient(135deg, #FDE68A 0 5px, #FEF3C7 5px 10px);
    border: 1px dashed #B45309;
    color: #78350F;
}
.gantt-bar.bar-locked { background-color: #047857; color: #FFFFFF; }
.gantt-bar.selected {
    outline: 2px solid var(--beeline-yellow) !important;
    outline-offset: 1px;
    z-index: 25 !important;
    box-shadow: 0 0 6px rgba(255, 209, 0, 0.7);
}

/* Статичная отметка момента прошедшего события (авария/отмена/сход/факт) —
   в отличие от .gantt-time-needle (текущее время, двигается), эти линии
   фиксированы и копятся по одной на каждое событие принятой истории смены. */
.gantt-event-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed var(--text-muted);
    z-index: 15;
    pointer-events: none;
}

.gantt-ruler-event-marker {
    position: absolute;
    top: 17px;
    width: 6px;
    height: 6px;
    transform: translateX(-50%) rotate(45deg);
    background-color: var(--text-secondary);
    cursor: help;
}

.gantt-time-needle {
    position: absolute;
    top: 24px;
    bottom: 0;
    /* Безопасный дефолт на случай кадра до первого измерения из JS — сразу
       за 150px колонкой "Бригада", а не на нулевой left (см. app.js). */
    left: 150px;
    width: 2px;
    background-color: var(--beeline-yellow);
    z-index: 40;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(24, 26, 27, 0.16), 0 0 6px rgba(255, 209, 0, 0.55);
}

.time-needle-badge {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #181A1B;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 2px;
}

/*
   MODALS, DRAWERS & UTILITIES
   */

/* Начинается под шапкой (не inset:0) — иначе невидимый fullscreen-бэкдроп
   лежит поверх шапки (z-index 1000 > 900 у .top-bar) и перехватывает клики
   по её кнопкам, включая переключатель темы, хотя сама шапка в это время
   ничем не закрыта визуально. Шапка — постоянный глобальный chrome, а не
   часть затемняемого контента. */
.drawer-backdrop, .modal-backdrop {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(24, 26, 27, 0.35);
    z-index: 1000;
}

/* Та же вертикальная область, что у .context-drawer (карточка бригады/
   наряда) — не залезает ни под шапку (position:fixed, --topbar-height),
   ни на футер-Гант снизу (--gantt-footer-height, живой из JS). */
.side-drawer {
    position: fixed;
    top: var(--topbar-height);
    right: 0;
    bottom: var(--gantt-footer-height);
    width: 480px;
    max-width: 90vw;
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-drawer);
    z-index: 1010;
    display: flex;
    flex-direction: column;
}

.drawer-header {
    height: 56px;
    padding: 0 18px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.drawer-title { font-size: 16px; font-weight: 700; }
.drawer-subtitle { font-size: 12px; color: var(--text-secondary); }
.drawer-search { padding: 9px 18px; border-bottom: 1px solid var(--border-subtle); }
.drawer-body { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 9px; }

/* Яркая белая обводка — но в светлой теме карточка и подложка шторки
   одного цвета (обе var(--bg-surface), см. #unassigned-drawer), так что
   буквально белая граница там была бы попросту невидима (0 контраста).
   Поэтому white — только в тёмной теме, где она и даёт задуманный яркий
   контур; в светлой берём тёмный, но такой же чёткий контур того же
   назначения. */
.unassigned-card {
    background-color: var(--bg-surface);
    border: 1.5px solid var(--text-primary);
    border-radius: var(--radius-lg);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}

:root[data-theme="dark"] .unassigned-card {
    border-color: #FFFFFF;
}

.unassigned-reason-box {
    margin: 6px 0;
    padding: 4px 10px;
    font-size: 12px;
}

/* Без цветной (жёлтой) заливки — слишком бросалось в глаза. Тот же
   нейтральный образ, что и у .unassigned-card в меню очереди: обычный
   фон, яркий контур (белый в тёмной теме, тёмный в светлой — см. её
   комментарий выше). Цветным остаётся только маркер риска в углу
   (.badge-tag.jeopardy) — это и есть акцент. */
.jeopardy-card {
    width: 100%;
    border: 1.5px solid var(--text-primary);
    border-radius: var(--radius-lg);
    padding: 11px 12px;
    background: var(--bg-surface);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}

:root[data-theme="dark"] .jeopardy-card {
    border-color: #FFFFFF;
}

.jeopardy-card:hover,
.jeopardy-card:focus-visible {
    background: var(--bg-surface-hover);
    border-color: #EF4444;
    transform: translateY(-1px);
}

.jeopardy-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.jeopardy-card-address {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.jeopardy-card-meta {
    color: var(--text-secondary);
    font-size: 12px;
}

.jeopardy-empty {
    color: var(--text-secondary);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    padding: 16px 12px;
    text-align: center;
}

.jeopardy-drawer-actions {
    display: grid;
    gap: 6px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-surface);
    font-size: 11px;
    color: var(--text-secondary);
}
.jeopardy-drawer-actions .btn { justify-self: start; }

/* Modal Cards */
.modal-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    max-width: 92vw;
    max-height: 85vh;
    background-color: var(--bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    z-index: 1010;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-card-lg { width: 700px; }

/* «События» (окно добавления события ИЗ floating-панели), «Кеш» и
   «Исходные данные кейса» — то же матовое стекло, что у шапки/.floating-panel
   (см. выше): только оболочка, внутренние блоки (.modal-tabs и т.п.)
   остаются непрозрачными, как и у .floating-panel-section. #diff-modal —
   это и есть «События» из ЛЕВОГО бокового меню (кнопка #nav-btn-diff,
   aria-label «История и журнал событий»): другое окно с другим id, тот же
   .modal-card, тоже сюда. .stress-modal (тот же .modal-card) не трогаем —
   глассморфизм просили не для него. */
#events-modal,
#settings-modal,
#diff-modal,
#case-source-modal,
#regulations-modal,
#preset-modal,
#issuance-modal,
#planning-modal,
#constructor-modal {
    background-color: var(--glass-bg);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--glass-border);
}

#events-modal { width: min(760px, 92vw); }

/* Вкладки "Бригады (N)/Заявки (N)" в конструкторе — просили без сплошной
   тёмной подложки, тем же жидким стеклом, что и вся карточка модалки выше
   (сама .modal-tabs по умолчанию непрозрачная — см. комментарий над этим
   блоком, — но конкретно для конструктора это специально отменяем). */
#constructor-modal .modal-tabs {
    background: transparent;
    border-bottom-color: var(--glass-border);
}

/* Конструктор центрируется в безопасных границах viewport; на узких экранах
   mobile.css переводит его в полноэкранный лист с собственными отступами. */
#constructor-modal {
    box-sizing: border-box;
    max-width: min(1040px, calc(100vw - 24px));
    max-height: min(calc(85vh - 70px), calc(100vh - 24px));
    transform: translate(-50%, -50%);
}

.constructor-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.constructor-draft-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border: 1px solid var(--beeline-yellow-hover);
    border-radius: var(--radius-full);
    background: var(--beeline-yellow-tint);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

:root[data-theme="dark"] .constructor-draft-badge {
    background: var(--bg-surface-subtle);
    color: var(--beeline-yellow);
    border-color: var(--beeline-yellow);
}

.constructor-form-error {
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid var(--status-danger);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--status-danger) 9%, var(--bg-surface));
    color: var(--status-danger);
    font-size: 12px;
    font-weight: 600;
}

.constructor-form-error:not(.hidden) {
    display: block;
}

/* Перетаскивание за заголовок — см. window.makeModalDraggable в theme.js.
   Курсор только на этих id: .modal-header общий с #stress-modal,
   которое перетаскиванием не обвязано. */
#events-modal .modal-header,
#settings-modal .modal-header,
#diff-modal .modal-header,
#case-source-modal .modal-header,
#regulations-modal .modal-header,
#constructor-modal .modal-header {
    cursor: grab;
}

#events-modal .modal-header:active,
#settings-modal .modal-header:active,
#diff-modal .modal-header:active,
#case-source-modal .modal-header:active,
#regulations-modal .modal-header:active,
#constructor-modal .modal-header:active {
    cursor: grabbing;
}

#events-modal.is-dragging,
#settings-modal.is-dragging,
#diff-modal.is-dragging,
#case-source-modal.is-dragging,
#regulations-modal.is-dragging,
#constructor-modal.is-dragging {
    transition: none;
    user-select: none;
}

.c-item-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.c-item-card:hover {
    border-color: var(--border-focus);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Та же пилюля, что и .badge-tag/.why-not-dist: округлая, яркая граница,
   приглушённая заливка того же цвета — вместо плоского прямоугольного чипа. */
.c-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--radius-full);
    border: 1.5px solid transparent;
    letter-spacing: 0.02em;
}

.c-badge-vostok { background: #DCFCE7; color: #15803D; border-color: #22C55E; }
.c-badge-yugovostok { background: #CFFAFE; color: #0E7490; border-color: #06B6D4; }
.c-badge-yugocentr { background: #FEF3C7; color: #B45309; border-color: var(--beeline-yellow); }
:root[data-theme="dark"] .c-badge-vostok { background: var(--bg-surface-subtle); color: #4ADE80; border-color: #4ADE80; }
:root[data-theme="dark"] .c-badge-yugovostok { background: var(--bg-surface-subtle); color: #22D3EE; border-color: #22D3EE; }
:root[data-theme="dark"] .c-badge-yugocentr { background: var(--bg-surface-subtle); color: var(--beeline-yellow); border-color: var(--beeline-yellow); }

.c-badge-l1 { background: var(--bg-surface-subtle); color: var(--text-secondary); border-color: var(--text-muted); }
.c-badge-l2 { background: #E0E7FF; color: #3730A3; border-color: #6366F1; }
.c-badge-l3 { background: #FEE2E2; color: #B91C1C; border-color: #EF4444; }
:root[data-theme="dark"] .c-badge-l2 { background: var(--bg-surface-subtle); color: #A5B4FC; border-color: #818CF8; }
:root[data-theme="dark"] .c-badge-l3 { background: var(--bg-surface-subtle); color: #F87171; border-color: #EF4444; }

.c-badge-p1 { background: #FEE2E2; color: #991B1B; border-color: #EF4444; }
.c-badge-high { background: #FFEDD5; color: #C2410C; border-color: #F97316; }
.c-badge-normal { background: var(--bg-surface-subtle); color: var(--text-secondary); border-color: var(--text-muted); }
:root[data-theme="dark"] .c-badge-p1 { background: var(--bg-surface-subtle); color: #F87171; border-color: #EF4444; }
:root[data-theme="dark"] .c-badge-high { background: var(--bg-surface-subtle); color: #FB923C; border-color: #F97316; }

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.modal-title { font-size: 16.5px; font-weight: 700; }
.modal-desc { font-size: 12px; color: var(--text-secondary); }

.modal-tabs {
    display: flex;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
    gap: 8px;
    background-color: var(--bg-surface-subtle);
}

.modal-tab {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 6px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    min-height: 40px;
}

.modal-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--beeline-yellow);
}

.modal-content {
    padding: 18px 20px;
    overflow-y: auto;
    flex: 1;
}

.form-help { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
.form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-label { font-size: 12px; font-weight: 600; }
#events-modal .form-help {
    padding: 10px 12px;
    border-left: 3px solid var(--note-accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--bg-surface-subtle);
    line-height: 1.5;
}
#event-pane-emergency .form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px 12px;
}
#event-pane-emergency .form-group { min-width: 95px; margin-bottom: 0; }
#event-pane-emergency .address-picker-input-wrap { min-width: 220px; }
#events-modal .form-row + .form-row { margin-top: 12px !important; }
#events-modal .form-label { color: var(--text-primary); line-height: 1.3; }
#events-modal .text-input,
#events-modal .select-input { width: 100%; }
#events-modal .modal-actions {
    position: sticky;
    bottom: -18px;
    z-index: 2;
    background: var(--bg-surface);
    padding-bottom: 10px;
}
#event-pane-new-ticket .form-row:first-of-type {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#event-pane-new-ticket .form-row:nth-of-type(2) {
    grid-template-columns: minmax(180px, 2fr) minmax(72px, .65fr) minmax(72px, .65fr) minmax(110px, 1fr);
}
#event-pane-new-ticket .form-row:nth-of-type(3) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.event-derived-requirements {
    margin: 2px 0 12px;
    padding: 9px 11px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface-subtle);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}
.new-ticket-map-actions { justify-content: flex-end; align-self: end; }
#event-pane-new-ticket .form-row { align-items: end; }
#event-pane-new-ticket .modal-actions { margin-top: 4px; }

/* Формы добавления бригады/заявки в конструкторе — 3-5 полей в ряд с уже
   заданной шириной/flex на каждой .form-group (см. их inline-стили в
   index.html), рассчитанные на flex-строку. Общий .form-row — 2-колоночный
   grid (это верно для формы аварии выше, где ровно 2 поля без своей
   ширины) — со втрое-впятеро большим числом полей grid заворачивал лишние
   в новую неявную строку по 1fr, а inline width/flex внутри grid-ячейки
   ничего не значат: отсюда и разъезжающиеся по ширине блоки, и огромные
   пустые промежутки. Внутри конструктора переопределяем на flex, где
   inline-размеры полей наконец работают как задумано. */
#constructor-modal .form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    row-gap: 10px;
}
#constructor-modal .form-group {
    margin-bottom: 0;
}
#constructor-modal .form-group .text-input,
#constructor-modal .form-group .select-input { width: 100%; }

.text-input, .select-input {
    font-family: var(--font-sans);
    font-size: 14px;
    min-height: 40px;
    padding: 7px 11px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

.text-input:hover:not(:disabled):not([readonly]),
.select-input:hover:not(:disabled) { border-color: var(--text-secondary); }
.text-input:focus,
.select-input:focus {
    border-color: var(--border-focus);
    background: var(--bg-surface);
}
.text-input[aria-invalid="true"],
.select-input[aria-invalid="true"] { border-color: var(--status-danger); }
.text-input::placeholder { color: var(--text-secondary); opacity: 1; }

.address-picker-input-wrap { position: relative; }
.address-suggest-list {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
    background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md); max-height: 220px; overflow-y: auto; margin-top: 2px;
}
.address-suggest-item { padding: 7px 11px; font-size: 12.5px; cursor: pointer; border-bottom: 1px solid var(--border-subtle); }
.address-suggest-item:last-child { border-bottom: none; }
.address-suggest-item:hover, .address-suggest-item.active { background: var(--bg-surface-subtle); }
.address-suggest-empty { padding: 7px 11px; font-size: 12px; color: var(--text-secondary); }
.address-picker-coord[readonly] { background: var(--bg-surface-subtle); color: var(--text-secondary); cursor: not-allowed; }
.address-picker-manual-toggle {
    font-size: 12.5px; font-weight: 600; background: none; border: none; color: var(--beeline-link); cursor: pointer;
    padding: 0; text-decoration: underline; margin-top: 4px; display: block;
}
.address-picker-map { width: 100%; height: 220px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); }
.address-picker-map-lg { height: 60vh; min-height: 320px; }
.address-picker-map-wrap { position: relative; }
.address-map-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-secondary); z-index: 2000; }
.address-map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text-secondary); }
.address-map-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.address-map-legend .address-map-legend-depot-icon { width: 16px; height: 16px; display: inline-flex; vertical-align: middle; margin-right: 5px; }
.address-map-legend-pin { display: inline-flex; vertical-align: middle; margin-right: 5px; color: var(--text-primary); }

.modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}

/* Diff Table */
.diff-summary-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    background-color: var(--bg-surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px;
    margin-bottom: 12px;
}

.diff-metric-item { display: flex; flex-direction: column; }
.diff-metric-label { font-size: 11px; color: var(--text-secondary); }
.diff-metric-val { font-size: 14.5px; font-weight: 800; }

.diff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.diff-table th {
    text-align: left;
    padding: 7px 10px;
    background-color: var(--bg-surface-subtle);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.diff-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-subtle);
}

/* Map Markers */
.custom-map-stop {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background-color: #0891B2;
    color: var(--route-ink, #FFFFFF);
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform var(--transition);
}

@media (hover: hover) and (pointer: fine) {
    .custom-map-stop:hover {
        transform: scale(1.2);
        z-index: 1000 !important;
    }
}

.custom-map-stop.selected {
    outline: 2px solid var(--beeline-yellow);
    outline-offset: 2px;
    background-color: #181A1B !important;
    color: var(--beeline-yellow);
}

.custom-map-stop.completed:not(.selected) {
    background-color: #15803D;
    color: #FFFFFF;
}

.custom-map-stop.unassigned:not(.selected) {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border: 2px dashed var(--border-input);
}

.depot-marker-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-xs);
    background-color: #181A1B;
    border: 1.5px solid var(--beeline-yellow);
    color: var(--beeline-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}

/* Точка, где событие застало бригаду в пути — от неё на карте начинается
   выделенный отрезок оставшегося маршрута (см. renderMap в app.js). */
.live-position-marker {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--bg-surface);
    border: 3px solid var(--text-secondary);
    box-shadow: 0 0 0 2px var(--bg-surface);
}

/* Бригада сошла с линии: тот же маркер на месте события, но без цвета маршрута и
   пульсирующего вида активной позиции — чтобы не читалось как «всё ещё едет». */
.live-position-marker.live-position-marker-inactive {
    border-color: #94A3B8;
    border-style: dashed;
    background-color: #E2E8F0;
    box-shadow: 0 0 0 2px var(--bg-surface);
}

.radar-beacon {
    position: relative;
    width: 20px;
    height: 20px;
}

.radar-beacon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-full);
    background: rgba(220, 38, 38, 0.5);
    animation: radar-pulse 1.8s infinite;
}

.radar-beacon::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--status-danger);
    border: 1.5px solid #FFFFFF;
}

@keyframes radar-pulse {
    0% { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(3); opacity: 0; }
}

.radar-beacon.selected::after {
    outline: 2px solid var(--beeline-yellow);
    outline-offset: 2px;
}

.veh-marker-wrap {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
}

.vehicle-sim-marker {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full);
    background-color: #181A1B;
    border: 1.5px solid var(--beeline-yellow);
    color: var(--beeline-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    position: relative;
    z-index: 2;
}

.vehicle-sim-marker.is-moving {
    border-color: var(--beeline-yellow);
    box-shadow: 0 0 0 3px rgba(255, 190, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.45);
}

.vehicle-sim-marker.is-onsite {
    border-color: var(--status-success);
    color: var(--status-success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.4), 0 2px 6px rgba(0, 0, 0, 0.45);
}

.vehicle-sim-marker.is-onsite .transport-icon {
    stroke: var(--status-success);
}

.vehicle-sim-marker.is-lunch {
    border-color: #F59E0B;
    color: #F59E0B;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35), 0 2px 6px rgba(0, 0, 0, 0.45);
}

.vehicle-sim-marker.is-lunch .transport-icon {
    stroke: #F59E0B;
}

.veh-heading {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    margin-left: -18px;
    pointer-events: none;
    z-index: 1;
    transition: transform 0.08s linear;
}

.veh-heading-arrow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 7px solid var(--beeline-yellow);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.veh-name-tag {
    position: absolute;
    top: 29px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(24, 26, 27, 0.88);
    color: #FFFFFF;
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    z-index: 3;
}

/* Cache info box */
.cache-info-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: var(--bg-surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
}

.cache-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

/* Toasts & Spinner */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2000;
}

.toast {
    background-color: #181A1B;
    color: #FFFFFF;
    border-radius: var(--radius-sm);
    padding: 9px 14px;
    font-size: 13px;
    box-shadow: var(--shadow-md);
}

.toast-success { border-left: 3px solid var(--status-success); }
.toast-warning { border-left: 3px solid var(--beeline-yellow); }
.toast-error { border-left: 3px solid var(--status-danger); }

.loading-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(24, 26, 27, 0.18);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Размытие фона — отдельным слоем: backdrop-filter у предка отключил бы стекло у самой плашки. */
.loading-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    pointer-events: none;
}

/* То же матовое стекло, что у шапки/.floating-panel — см. комментарий там. */
.spinner-box {
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    position: relative;
    padding: 18px 26px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
}

:root[data-theme="dark"] .spinner-box { background-color: rgba(20, 20, 20, 0.38); border-color: rgba(255, 255, 255, 0.12); }

.spinner-ring {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--beeline-yellow);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.hidden { display: none !important; }
.cursor-pointer { cursor: pointer; }

.transport-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
}
.veh-div {
    will-change: transform;
    pointer-events: none;
}

.vehicle-sim-marker .transport-icon {
    width: 16px;
    height: 16px;
    stroke: var(--beeline-yellow);
}

/* Stress testing and chaos simulator */
/* Сплошной (не бледно-жёлтый) — бледная плашка терялась на полупрозрачном
   стекле .floating-panel, особенно в тёмной теме. Своя пара фон/текст,
   читается одинаково в любой теме и на любой подложке. */
.btn-stress {
    background-color: #B45309;
    color: #FFFFFF;
    border: 1px solid #D97706;
    font-weight: 600;
    font-size: 12.5px;
    padding: 7px 13px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
}
.btn-stress:hover {
    background-color: #92400E;
    border-color: #B45309;
}

.stress-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.stress-card {
    padding: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}
.stress-card:hover {
    border-color: var(--beeline-yellow);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.stress-card-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    margin-bottom: 6px;
}
.stress-card-badge.p1 { background: #FEE2E2; color: #991B1B; border: 1.5px solid #EF4444; }
.stress-card-badge.warning { background: #FEF3C7; color: #B45309; border: 1.5px solid var(--beeline-yellow); }
.stress-card-badge.info { background: #E0E7FF; color: #4338CA; border: 1.5px solid #6366F1; }

:root[data-theme="dark"] .stress-card-badge.p1 { background: #7F1D1D; color: #FECACA; border-color: #EF4444; }
:root[data-theme="dark"] .stress-card-badge.warning { background: var(--beeline-yellow-tint); color: var(--beeline-yellow); border-color: var(--beeline-yellow); }
:root[data-theme="dark"] .stress-card-badge.info { background: #312E81; color: #C7D2FE; border-color: #6366F1; }
.stress-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 4px;
}
.stress-card-desc {
    font-size: 12.5px;
    color: #64748B;
    line-height: 1.4;
    margin-bottom: 8px;
}
.stress-card-action {
    font-size: 12px;
    font-weight: 600;
    color: #0284C7;
}
.stress-footer-note {
    margin-top: 14px;
    font-size: 11.5px;
    color: #64748B;
    text-align: center;
}

/* Replan Telemetry Banner */
.replan-telemetry-banner {
    position: fixed;
    top: 66px;
    left: 50%;
    transform: translateX(-50%);
    background: #181A1B;
    color: #FFFFFF;
    padding: 9px 20px;
    border-radius: 20px;
    border: 1.5px solid var(--beeline-yellow);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 2500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.replan-telemetry-banner .telemetry-time {
    color: var(--beeline-yellow);
    font-weight: 700;
}

/* Why Not Alice? Counterfactual Analysis (HW-3) */
.why-not-box {
    margin-top: 12px;
    padding: 11px 13px;
    background: var(--bg-surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}
.why-not-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.why-not-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.why-not-item {
    padding: 3px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 12.5px;
}
.why-not-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.why-not-eng {
    display: flex;
    justify-content: space-between;
    /* Пилюля .why-not-dist из-за паддинга/рамки выше строки фамилии — без
       этого stretch-по-умолчанию тянет фамилию во всю высоту строки и её
       текст остаётся у верха, а низ пилюли утекает ниже фамилии. flex-end
       прижимает низ обоих элементов к одной линии. */
    align-items: flex-end;
    /* Заметный отступ до пояснения ниже — раньше было 2px, и текст почти
       слипался со строкой фамилии/плашки. */
    margin-bottom: 6px;
}
/* Та же пилюля, что и .badge-tag/.dispatch-pill-p1: округлая, яркая граница,
   приглушённая заливка того же цвета — вместо плоского серо-голубого чипа.
   Паддинг чуть меньше (2px вместо 3px) — так пилюля не намного выше строки
   фамилии, и лишнего пустого места над ней (из-за flex-end выше) меньше. */
.why-not-dist {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    background-color: #DBEAFE;
    color: #1D4ED8;
    border: 1.5px solid #3B82F6;
}
:root[data-theme="dark"] .why-not-dist {
    background-color: var(--bg-surface-subtle);
    color: #60A5FA;
    border-color: #60A5FA;
}
.why-not-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.3;
}
/* "Проверка альтернативных бригад" использует те же <p class="planning-hint">,
   что и остальной интерфейс (там — обычный некрупный текст-подсказка), из-за
   чего шрифт отличался от .reasoning-box рядом ("Обоснование алгоритма").
   Приводим к тем же размеру/интерлиньяжу/цвету. */
#assignment-explanation .planning-hint {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-primary);
}
.assignment-diagnostics { margin: 12px 0; overflow-x: auto; }
.drag-scroll { cursor: grab; user-select: none; }
.drag-scroll.dragging { cursor: grabbing; }
.assignment-diagnostic-table { width: auto; min-width: 100%; table-layout: auto; border-collapse: collapse; font-size: 11px; }
.assignment-diagnostic-table caption { text-align: left; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.assignment-diagnostic-table th, .assignment-diagnostic-table td { padding: 5px 8px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; white-space: nowrap; min-width: 100px; }
.assignment-diagnostic-table th:first-child, .assignment-diagnostic-table td:first-child { min-width: 150px; }
.assignment-diagnostic-table th { text-align: left; font-weight: 600; }
.assignment-diagnostic-table thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-surface); }
.assignment-diagnostic-cell { width: 100%; min-height: 44px; padding: 5px 3px; border: 1px solid var(--border-subtle); border-radius: var(--radius-xs); background: var(--bg-surface-subtle); color: var(--text-primary); font: inherit; text-align: center; white-space: nowrap; cursor: pointer; }
.assignment-diagnostic-pass { border-bottom: 3px solid #15803D; }
.assignment-diagnostic-fail { border-bottom: 3px solid #B45309; }
.assignment-diagnostic-unknown { border-style: dashed; }
.assignment-diagnostic-cell:focus-visible { outline: 2px solid var(--beeline-yellow); outline-offset: 2px; }
.assignment-diagnostic-detail { padding: 8px; background: var(--bg-surface-subtle); border-radius: var(--radius-xs); font-size: 12px; overflow-wrap: anywhere; }
:root[data-theme="dark"] .assignment-diagnostic-pass { border-bottom-color: #4ADE80; }
:root[data-theme="dark"] .assignment-diagnostic-fail { border-bottom-color: #FBBF24; }

/*
   RESPONSIVE MEDIA QUERIES (R1 Layout & Scaling)
   */

@media (max-width: 1500px) {
    .top-bar {
        padding: 0 10px;
    }
    .top-bar-left, .top-bar-right {
        gap: 6px;
    }
    .brand-tag-mini {
        display: none;
    }
    .status-indicator span:last-child {
        display: none;
    }
    .branch-pill {
        padding: 4px 7px;
        font-size: 11.5px;
    }
    .date-stepper {
        padding: 2px 4px;
        gap: 4px;
    }
    .planning-date {
        width: 104px;
    }
    .dataset-select {
        max-width: 155px;
        font-size: 11.5px;
        padding: 5px 6px;
    }
    .btn {
        padding: 6px 9px;
        font-size: 11.5px;
    }
    /* Ниже ~15" текст в кнопке — самый "тяжёлый" элемент строки; прячем его,
       оставляя иконку (aria-label на самой кнопке уже есть). */
    .floating-panel-toggle-label {
        display: none;
    }
    .kpi-strip-inner {
        gap: 10px;
        font-size: 12px;
    }
    .map-section:has(.context-drawer:not(.hidden)) .map-controls-clean {
        max-width: calc(100% - var(--drawer-width) - 20px);
    }
}

@media (max-width: 1100px) {
    .top-bar {
        padding: 0 8px;
    }
    .product-title-group {
        display: none;
    }
    .top-divider {
        display: none;
    }
    .status-indicator {
        display: none;
    }
    .top-bar-left {
        min-width: 0;
        flex-shrink: 1;
        gap: 4px;
    }
    .top-bar-right {
        flex-shrink: 0;
        gap: 4px;
    }
    .branch-pills {
        gap: 2px;
    }
    .branch-pill {
        padding: 3px 6px;
        font-size: 11px;
    }
    .dataset-select {
        max-width: 135px;
        font-size: 11px;
    }
    .current-date {
        font-size: 11px;
        padding: 0 4px;
    }
    .btn {
        padding: 5px 8px;
        font-size: 11px;
    }
    .btn-stress {
        padding: 5px 8px;
        font-size: 11px;
    }
    /* A focused drawer needs readable height when the Gantt is expanded. */
    .side-drawer { bottom: 0; }
}

@media (max-width: 940px) {
    :root { --topbar-height: 96px; }
    .top-bar { align-items: flex-start; padding-top: 6px; }
    /* .top-bar-left — nowrap (см. базовое правило выше): на "ноутбучных"
       ширинах это то, что просили — всегда одна строка. Но здесь, на
       по-настоящему тесных экранах, ужимать уже нечего — без wrap контент
       просто обрезался бы за правым краем без скролла (overflow там нельзя,
       см. комментарий у .top-bar-left, он обрежет и календарь). Поэтому
       именно тут возвращаем перенос — а высота шапки (--topbar-height)
       уже увеличена под вторую строку. */
    .top-bar-left {
        flex-wrap: wrap;
    }
}

@media (max-width: 850px) {
    :root { --topbar-height: 132px; }
}

@media (max-height: 700px) {
    .modal-card {
        max-height: 92vh;
        border-radius: var(--radius-md);
    }
    .modal-header {
        padding: 10px 14px;
    }
    .modal-content {
        padding: 12px 14px;
    }
    .modal-actions {
        margin-top: 10px;
        padding-top: 8px;
    }
    .an-modal {
        max-height: 94vh;
    }
    .an-header {
        padding: 12px 16px 10px;
    }
}

@media (min-width: 2560px) {
    :root {
        --sidebar-width: 0px;
        --engineers-width: 360px;
        --drawer-width: 440px;
        --topbar-height: 66px;
        --kpi-height: 48px;
    }
    html, body {
        font-size: 16.5px;
    }
    .product-title {
        font-size: 19px;
    }
    .btn {
        font-size: 14px;
        padding: 9px 18px;
    }
    .branch-pill {
        font-size: 14px;
        padding: 6px 14px;
    }
    .kpi-strip-inner {
        font-size: 14.5px;
        gap: 18px;
    }
    .gantt-section {
        max-height: calc(100vh - 180px);
    }
}

/*
   ACCESSIBILITY: REDUCED MOTION & HIGH CONTRAST (WCAG 2.3.3 & 1.4.11)
   */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .spinner-ring {
        animation: none !important;
        border-top-color: var(--beeline-yellow) !important;
        opacity: 0.85;
    }

    .replan-telemetry-banner {
        animation: none !important;
    }

    .custom-map-stop:hover {
        transform: none !important;
    }
}

@media (forced-colors: active) {
    :focus-visible,
    .engineer-row:focus-visible,
    .gantt-header-strip:focus-visible,
    .gantt-lane-label:focus-visible,
    .gantt-bar:focus-visible,
    .stress-card:focus-visible,
    .unassigned-card:focus-visible,
    .jeopardy-card:focus-visible,
    .branch-pill:focus-visible,
    .mini-pill:focus-visible,
    .kpi-stat:focus-visible,
    .map-btn:focus-visible,
    .icon-btn-close:focus-visible {
        outline: 3px solid Highlight !important;
        outline-offset: 2px !important;
    }

    .btn-primary,
    .branch-pill.active,
    .mini-pill.active {
        border: 2px solid Highlight !important;
    }
}

/* Scenario controls keep the selected source and proposal state visible. */
.planning-toolbar { padding: 5px 20px; border-bottom: 1px solid var(--border-subtle); font-size: 11px; flex-shrink: 0; }
.planning-actions { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 3px 0; }
.planning-actions .btn { padding: 4px 8px; font-size: 11px; }
.planning-priority { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 5px 0 2px; font-weight: 600; }
.planning-priority .select-input { min-height: 30px; max-width: 100%; padding: 4px 7px; font-size: 11px; }
.planning-priority-editor { margin-top: 7px; }
.planning-priority-editor ol { display: grid; gap: 4px; margin: 5px 0 0; padding-left: 23px; }
.planning-priority-editor li { padding: 3px 5px; border: 1px solid var(--border-subtle); border-radius: 6px; }
.planning-priority-editor li span { display: inline-block; min-width: 140px; }
.planning-priority-editor button { margin-left: 4px; min-width: 30px; min-height: 30px; }
#planning-status { font-weight: 700; overflow-wrap: anywhere; }
.planning-hint { color: var(--text-secondary); }
#planning-message:empty { display: none; }
.planning-what-if { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-subtle); }
.planning-what-if-header { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; font-size: 11px; }
.planning-what-if-badge { color: #0369A1; background: #E0F2FE; border: 1.5px solid #38BDF8; border-radius: 999px; padding: 2px 6px; font-size: 10px; font-weight: 700; }
.planning-what-if-form { display: grid; grid-template-columns: minmax(160px, 1.4fr) repeat(2, minmax(110px, .7fr)) auto; align-items: end; gap: 6px; }
.planning-what-if-field { display: grid; gap: 3px; color: var(--text-secondary); font-size: 10px; }
.planning-what-if-field .select-input, .planning-what-if-field .text-input { width: 100%; min-height: 28px; padding: 4px 7px; font-size: 11px; }
.planning-what-if-form > .btn { min-height: 28px; white-space: nowrap; }
.planning-what-if-result { margin-top: 7px; }
.what-if-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.what-if-metric-card { padding: 7px 9px; border: 1px solid var(--border-color); border-radius: var(--radius-xs); background: var(--bg-surface-subtle); }
.what-if-metric-card h4 { margin: 0 0 3px; font-size: 11px; }
.what-if-metric-card .planning-metrics { margin: 0; font-size: 10px; }
.what-if-metric-card .planning-metrics div { padding: 2px 0; }
.what-if-ticket-delta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 7px; font-size: 10px; }
.what-if-ticket-delta > div { display: grid; gap: 2px; padding: 6px 8px; border-radius: var(--radius-xs); background: var(--bg-surface-subtle); }
.what-if-ticket-delta span { overflow-wrap: anywhere; }
.what-if-readonly-note { margin: 6px 0 0; font-size: 10px; color: var(--text-secondary); }
/* Тот же принцип, что и у .dispatch-pill в тёмной теме: нейтральная
   заливка, цвет текста = цвет обводки. */
:root[data-theme="dark"] .planning-what-if-badge { color: #38BDF8; background: var(--bg-surface-subtle); border-color: #38BDF8; }
.planning-preview-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 7px 20px; background: var(--bg-surface); color: var(--text-primary); border-top: 1px solid var(--border-color); border-bottom: 3px solid var(--beeline-yellow); box-shadow: inset 5px 0 0 var(--beeline-yellow); font-size: 12px; flex-shrink: 0; }
.planning-preview-banner .btn { padding: 5px 8px; font-size: 12px; }
.planning-preview-banner #planning-preview-label { flex: 1; min-width: 100px; overflow-wrap: anywhere; }
.planning-preview-info { flex: 1; min-width: min(240px,100%); overflow-wrap: anywhere; }
#planning-preview-summary { display: block; margin-top: 3px; font-size: 11px; }
.planning-preview-outcome { display: block; margin-top: 4px; font-weight: 600; }
.planning-consequence-outcome { margin: 12px 0 5px; color: var(--text-primary); overflow-wrap: anywhere; }
.planning-consequence-cost { margin: 0 0 8px; color: var(--text-secondary); overflow-wrap: anywhere; }
.planning-consequence-link { margin: 0 6px 8px 0; text-decoration: underline; text-underline-offset: 3px; }
.block-client-window { background: var(--bg-surface-subtle); border: 1px dashed var(--text-secondary); }
.block-service-start { position: relative; background: transparent; }
.block-service-start::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--text-primary); }
@media (max-width: 600px) {
    .preview-changes-table-scroll .diff-table thead { display: none; }
    .preview-changes-table-scroll .diff-table tr { display: grid; grid-template-columns: minmax(0, 1fr); }
    .preview-changes-table-scroll .diff-table td { display: block; width: auto; white-space: normal; overflow-wrap: anywhere; }
    .preview-changes-table-scroll .diff-table td:nth-child(2)::before { content: 'До · принят: '; font-weight: 600; }
    .preview-changes-table-scroll .diff-table td:nth-child(3)::before { content: 'После · предложение: '; font-weight: 600; }
    .planning-consequence-link, #planning-preview-lost, #planning-preview-reassigned { min-height: 44px; }
}
.planning-preview-controls { display: flex; gap: 6px; flex-wrap: wrap; }
.planning-preview-controls .active { border-color: var(--beeline-yellow); background: var(--beeline-yellow); color: #181A1B; }
.planning-preview-uncertain { border-color: #DC2626; }
:root[data-theme="dark"] .planning-preview-banner { background: var(--bg-surface); color: var(--text-primary); border-bottom-color: var(--beeline-yellow); }
.preview-changes-table-scroll { overflow: auto; max-height: 60vh; }
.preview-change-link { border: 0; background: none; color: var(--text-primary); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.preview-changes-table-scroll td small { display: block; color: var(--text-secondary); margin-top: 4px; }
.custom-map-stop.preview-change:not(.selected), .radar-beacon.preview-change:not(.selected) { outline: 3px solid var(--change-accent, #0369A1); outline-offset: 2px; }
.custom-map-stop.preview-change-lost:not(.selected) { outline-style: dashed; }
.gantt-bar.preview-change { border-bottom: 3px solid #0369A1; }
/* Тень отрезка "в пути", по которому бригаду застало событие, до заявки,
   которая затем была переназначена другой бригаде (см. renderGantt в app.js). */

.preview-change-new { --change-accent: #15803D; --change-ink: #FFFFFF; }
.preview-change-reassigned { --change-accent: #6D28D9; --change-ink: #FFFFFF; }
.preview-change-shifted { --change-accent: #B45309; --change-ink: #FFFFFF; }
.preview-change-route_changed { --change-accent: #475569; --change-ink: #FFFFFF; }
.preview-change-lost { --change-accent: #B91C1C; --change-ink: #FFFFFF; }
.preview-change-cancelled { --change-accent: #7F1D1D; --change-ink: #FFFFFF; }
:root[data-theme="dark"] .preview-change-new { --change-accent: #4ADE80; --change-ink: #181A1B; }
:root[data-theme="dark"] .preview-change-reassigned { --change-accent: #C4B5FD; --change-ink: #181A1B; }
:root[data-theme="dark"] .preview-change-shifted { --change-accent: #FBBF24; --change-ink: #181A1B; }
:root[data-theme="dark"] .preview-change-route_changed { --change-accent: #CBD5E1; --change-ink: #181A1B; }
:root[data-theme="dark"] .preview-change-lost { --change-accent: #F87171; --change-ink: #181A1B; }
:root[data-theme="dark"] .preview-change-cancelled { --change-accent: #FDA4AF; --change-ink: #181A1B; }
@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) .preview-change-new { --change-accent: #4ADE80; --change-ink: #181A1B; }
    :root:where(:not([data-theme="light"])) .preview-change-reassigned { --change-accent: #C4B5FD; --change-ink: #181A1B; }
    :root:where(:not([data-theme="light"])) .preview-change-shifted { --change-accent: #FBBF24; --change-ink: #181A1B; }
    :root:where(:not([data-theme="light"])) .preview-change-route_changed { --change-accent: #CBD5E1; --change-ink: #181A1B; }
    :root:where(:not([data-theme="light"])) .preview-change-lost { --change-accent: #F87171; --change-ink: #181A1B; }
    :root:where(:not([data-theme="light"])) .preview-change-cancelled { --change-accent: #FDA4AF; --change-ink: #181A1B; }
}
.map-change-symbol, .map-diff-symbol { display: inline-flex; align-items: center; justify-content: center; background: var(--change-accent); color: var(--change-ink); font-weight: 800; line-height: 1; }
.map-change-symbol { position: absolute; top: -9px; right: -9px; width: 15px; height: 15px; border: 1px solid var(--bg-surface); border-radius: 4px; font-size: 11px; z-index: 3; pointer-events: none; }
.map-diff-panel { position: absolute; top: calc(var(--chrome-reserved) + 104px); left: 12px; z-index: 440; width: min(292px, calc(100% - 24px)); max-height: calc(100% - var(--chrome-reserved) - 116px); overflow: auto; background-color: var(--glass-bg); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); border: 1px solid var(--glass-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: 12px; }
.map-diff-panel > summary { padding: 10px 12px; min-height: 40px; font-weight: 700; cursor: pointer; }
.map-diff-panel > summary::marker { color: var(--text-secondary); }
.map-diff-body { padding: 0 12px 10px; }
.map-diff-route-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-secondary); }
.map-diff-line { width: 22px; height: 0; border-top: 3px solid #2563EB; }
.map-diff-line.before { border-top: 3px dashed #64748B; }
.preview-before-route { stroke: #334155; stroke-width: 4px; stroke-opacity: 1; filter: drop-shadow(1px 0 0 #FFFFFF) drop-shadow(-1px 0 0 #FFFFFF) drop-shadow(0 1px 0 #FFFFFF) drop-shadow(0 -1px 0 #FFFFFF); }
.map-diff-toggle { display: flex; align-items: center; gap: 7px; min-height: 40px; cursor: pointer; }
.map-diff-toggle input { accent-color: var(--beeline-yellow); }
.map-diff-note { margin: 0 0 8px; color: var(--text-secondary); line-height: 1.4; }
.map-diff-legend { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.map-diff-legend li { display: flex; align-items: center; gap: 7px; }
.map-diff-symbol { width: 20px; height: 20px; border-radius: 4px; font-size: 14px; flex-shrink: 0; }
.map-diff-kind-count { margin-left: auto; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.map-label-short { display: none; }
.planning-modal { width: min(1000px, calc(100vw - 32px)); }
.planning-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.planning-results.planning-results-case-proof { grid-auto-rows: max-content; align-content: start; }
.planning-card { min-width: 0; padding: 12px; border: 1px solid var(--border-color); border-radius: 8px; background-color: color-mix(in srgb, var(--bg-surface) 72%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.planning-case-proof { grid-column: 1 / -1; min-width: 0; min-height: max-content; overflow: visible; align-self: start; }
.planning-case-proof .planning-proof-assumptions dd { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.planning-proof-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.planning-proof-table-scroll .diff-table { min-width: 620px; }
.planning-case-proof details { min-width: 0; }
.planning-card h3 { margin: 0 0 8px; }
.planning-card p { margin: 8px 0; overflow-wrap: anywhere; }
.planning-card pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow-y: auto; font-size: 11px; }
.remedy-diagnosis { grid-column: 1 / -1; border-left: 4px solid var(--note-accent, #f5a623); }
.remedy-blockers { margin: 4px 0 8px; padding-left: 18px; }
.remedy-blockers li { margin: 4px 0; }
.remedy-meta { font-size: 12px; opacity: 0.75; }
.remedy-kind { margin: 0 0 4px !important; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; }
.remedy-option h3 { font-size: 15px; line-height: 1.35; }
.remedy-summary { font-weight: 600; }
.remedy-consent { font-size: 12px; padding: 6px 8px; border-radius: 6px; background: rgba(245, 166, 35, 0.12); }
.unassigned-remedy-btn { margin-top: 6px; }
.queue-resolve-btn { width: 100%; margin-bottom: 12px; }
.queue-summary { grid-column: 1 / -1; }
.queue-summary h3 { font-size: 20px; }
.queue-totals { font-size: 15px; }
.queue-steps { width: 100%; margin: 12px 0; }
.queue-steps td { vertical-align: top; }
.queue-step-left_in_queue td { opacity: 0.6; }
.fleet-picker { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; }
.fleet-picker .btn { min-width: 36px; padding: 4px 10px; }
.fleet-branch { margin: 12px 0; padding-top: 8px; border-top: 1px solid var(--border-color); }
.fleet-branch h4 { margin: 0 0 6px; }
.fleet-branch ol { margin: 4px 0; padding-left: 20px; }
.fleet-was { opacity: 0.7; font-size: 12px; }
.remedy-option .planning-metrics { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0 12px; }
.remedy-option .planning-metrics dt { opacity: 0.7; }
.remedy-option .planning-metrics dd { margin: 0; text-align: right; font-weight: 600; }
.unassigned-remedy-hint { margin: 6px 0; font-size: 12px; line-height: 1.4; opacity: 0.75; }
.unassigned-remedy-hint.is-found { opacity: 1; font-weight: 600; padding: 6px 8px; border-radius: 6px; background: rgba(46, 160, 67, 0.12); }
.reliability-summary { grid-column: 1 / -1; }
.reliability-kind { margin: 0 0 4px !important; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; }
.reliability-note { font-size: 12px; opacity: 0.75; }
.reliability-summary h4 { margin: 14px 0 4px; }
.reliability-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 12px; }
.reliability-tiles div { padding: 12px; border: 1px solid var(--border-color); border-radius: 8px; }
.reliability-tiles strong { display: block; font-size: 26px; line-height: 1.1; }
.reliability-tiles span { font-size: 12px; opacity: 0.75; }
.reliability-table { width: 100%; margin: 6px 0 14px; }
.reliability-bar { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: rgba(127, 127, 127, 0.2); vertical-align: middle; overflow: hidden; }
.reliability-bar span { display: block; height: 100%; background: var(--note-accent, #f5a623); }
@media (max-width: 700px) { .reliability-tiles { grid-template-columns: 1fr; } }
.planning-history-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.planning-history-card-head h3 { margin: 0; }
.planning-history-badge { color: #065F46; background: #D1FAE5; border: 1.5px solid #10B981; border-radius: 999px; padding: 2px 7px; font-size: 10px; font-weight: 700; }
.planning-history-card button { margin-top: 4px; }
.planning-history-back { grid-column: 1 / -1; justify-self: start; }
:root[data-theme="dark"] .planning-history-badge { color: #A7F3D0; background: #064E3B; border-color: #10B981; }
.planning-metrics { margin: 12px 0; font-size: 12px; }
.planning-metrics div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--border-subtle); }
.planning-metrics dd { margin: 0; font-weight: 700; text-align: right; }
.planning-card button { margin-top: 12px; }
.planning-replay-card { grid-column: 1 / -1; overflow-x: auto; }
.planning-replay-open { grid-column: 1 / -1; justify-self: start; }
button:disabled { cursor: not-allowed; opacity: 0.55; }

/* The roster window is a background constraint; only an explicit route slot is a break. */
.gantt-bar { z-index: 2; }
/* Окно обеда — собственная кликабельная полоса над основной зоной: рабочие полосы её не закрывают */
.gantt-bar.bar-lunch-preview { z-index: 3; top: 0; bottom: auto; height: 4px; padding: 0; font-size: 0; border-radius: 0; opacity: 0.95; cursor: pointer; }
.gantt-bar.bar-lunch { cursor: pointer; z-index: 3; }
.block-lunch-window { background: repeating-linear-gradient(135deg, #FDE68A 0 3px, #FEF3C7 3px 6px); border: 1px dashed #B45309; }
.block-locked { background-color: #047857; }
.gantt-ruler { flex-shrink: 0; scrollbar-gutter: auto; }
.gantt-track, .gantt-ruler-hours { min-width: 0; }
.gantt-header-strip { height: auto; min-height: 38px; gap: 8px; flex-shrink: 0; cursor: pointer; padding: 6px 12px; flex-wrap: wrap; }
.gantt-strip-left, .gantt-strip-right { min-width: 0; gap: 8px; }
.gantt-collapse-button { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.gantt-collapse-button:focus-visible { outline: 2px solid #2563EB; outline-offset: 3px; }
.gantt-legend-clean { gap: 8px; flex-wrap: wrap; }
.gantt-section.collapsed { height: auto !important; min-height: 38px; flex-shrink: 0; }
.gantt-section.collapsed .gantt-content { display: none; }
.gantt-summary { white-space: normal; }
.gantt-action-text { display: none; }
@media (max-width: 1180px) {
    .gantt-header-strip { gap: 5px; }
    .gantt-legend-clean { order: 3; flex-basis: 100%; justify-content: flex-start; }
    .gantt-strip-right { margin-left: auto; }
    .gantt-title { font-size: 12px; }
    .gantt-summary { font-size: 10px; }
    .planning-toolbar { padding: 4px 12px; }
    .planning-what-if-form { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
    .planning-what-if-form > .btn { justify-self: start; }
    .what-if-ticket-delta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.planning-modal-message { padding: 6px 20px; font-size: 12px; overflow-wrap: anywhere; }

.planning-choice-intro { grid-column: 1 / -1; margin: 0 0 10px; padding: 0 2px; color: var(--text-secondary); font-size: 12px; }
.planning-choice-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-subtle);
    padding: 10px 12px;
}
.planning-choice-card p {
    margin: 4px 0;
    font-size: 12px;
}
.planning-choice-card > button:last-child {
    margin-top: auto;
}
.planning-choice-card > .planning-consequence-link {
    margin: 3px 0;
    padding: 3px 8px;
    font-size: 11.5px;
}
.planning-choice-card-recommended {
    border-color: var(--beeline-yellow);
    box-shadow: 0 0 0 1.5px var(--beeline-yellow);
}
.planning-choice-heading { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.planning-choice-heading h3 { margin: 0; font-size: 14.5px; }
.planning-choice-badge {
    padding: 3px 8px;
    border-radius: var(--radius-full);
    background: var(--beeline-yellow);
    color: var(--text-primary);
    border: 1px solid var(--focus-ring);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.planning-choice-badge-review {
    padding: 3px 8px;
    border-radius: var(--radius-full);
    background: var(--bg-surface-subtle);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

:root[data-theme="dark"] .planning-choice-badge {
    background: var(--beeline-yellow);
    color: #181A1B;
    border-color: var(--focus-ring);
}
:root[data-theme="dark"] .planning-choice-badge-review {
    background: var(--bg-surface-subtle);
    color: var(--text-secondary);
    border-color: var(--border-color);
}
.planning-choice-metrics { margin: 6px 0; font-size: 11.5px; }
.planning-choice-metrics div { padding: 2px 0; }
.planning-choice-metrics dd {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.planning-choice-lost { max-width: 180px; margin-top: 3px; font-size: 11px; font-weight: 400; overflow-wrap: anywhere; }
.planning-choice-lost summary { cursor: pointer; color: var(--text-secondary); }

.diff-impact-summary { padding: 10px; margin-bottom: 10px; background: var(--bg-surface-subtle); font-size: 12px; overflow-wrap: anywhere; }
.diff-impact-summary p { margin: 4px 0; }

/* Client windows appear only for selected, changed, or at-risk visits. */
.gantt-client-window {
    position: absolute;
    top: 3px;
    bottom: 8px;
    z-index: 0;
    border: 1px solid #64748B;
    border-radius: var(--radius-xs);
    background: rgba(100, 116, 139, 0.14);
    pointer-events: none;
}
.gantt-client-window.gantt-client-window-risk {
    border-color: #B45309;
    background: repeating-linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0 3px, rgba(245, 158, 11, 0.06) 3px 6px);
}
.gantt-client-window.gantt-client-window-change { border-style: dashed; }
.gantt-client-window.selected { z-index: 5; background: transparent; border-color: var(--beeline-yellow); box-shadow: inset 0 0 0 1px var(--beeline-yellow); }
.gantt-window-slack {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 1px 3px;
    border-radius: 3px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.gantt-client-window.selected .gantt-window-slack { padding: 1px 3px; background: var(--bg-surface); color: var(--text-primary); }
.gantt-service-start-marker {
    position: absolute;
    top: 3px;
    bottom: 8px;
    width: 2px;
    z-index: 4;
    border-radius: 2px;
    background: #0F172A;
    pointer-events: none;
}
.gantt-service-start-marker.has-time-change {
    width: 3px;
    background: #1D4ED8;
    transform: translateX(-1px);
}
.gantt-start-change-label {
    position: absolute;
    top: 2px;
    left: 3px;
    padding: 1px 3px;
    border-radius: 3px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}
:root[data-theme="dark"] .gantt-client-window { border-color: #94A3B8; background: rgba(148, 163, 184, 0.18); }
:root[data-theme="dark"] .gantt-client-window.selected { border-color: var(--beeline-yellow); background: transparent; }
:root[data-theme="dark"] .gantt-client-window.gantt-client-window-risk { border-color: #F59E0B; }
:root[data-theme="dark"] .gantt-service-start-marker { background: #E2E8F0; }
:root[data-theme="dark"] .gantt-service-start-marker.has-time-change { background: #60A5FA; }

/* ==========================================================================
   Радиальное меню разделов (Наряды … Нормы): веер круглых кнопок вокруг
   кнопки «Разделы» в боковом меню. Позиции задаёт layoutRadialMenu (app.js).
   ========================================================================== */
.radial-menu.hidden { display: none; }

.radial-menu {
    position: fixed;
    inset: 0;
    z-index: 960;
    outline: none;
    /* Остальной фон размывается и слегка затемняется — меню лучше читается. */
    background: rgba(24, 26, 27, 0.22);
    opacity: 0;
    transition: opacity 160ms ease;
}

.radial-menu.open { opacity: 1; }

/* Размытие фона — на отдельном слое: backdrop-filter у предка отключил бы стекло у самих секторов. */
.radial-menu::before {
    content: "";
    position: fixed;
    inset: 0;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.radial-menu .nav-item {
    position: fixed;
    box-sizing: border-box;
    gap: 4px;
    border: 0;
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
    box-shadow: none;
    color: var(--text-primary);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 160ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1), background-color var(--transition);
}

.radial-menu .nav-item[hidden] { display: none !important; }

.radial-menu.open .nav-item {
    opacity: 1;
    transform: scale(1);
}

.radial-menu .nav-item:hover,
.radial-menu .nav-item:focus-visible { background-color: rgba(255, 255, 255, 0.32); }
:root[data-theme="dark"] .radial-menu .nav-item { background-color: rgba(20, 20, 20, 0.3); }
:root[data-theme="dark"] .radial-menu .nav-item:hover, :root[data-theme="dark"] .radial-menu .nav-item:focus-visible { background-color: rgba(20, 20, 20, 0.42); }

.radial-rims { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.radial-rims { opacity: 0; transition: opacity 160ms ease; }
.radial-menu.open .radial-rims { opacity: 1; }
.radial-rims path { fill: none; stroke: rgba(255, 255, 255, 0.95); stroke-width: 6; stroke-linecap: butt; transition: stroke 120ms ease; }
.radial-rims path.on { stroke: var(--beeline-yellow); }

.radial-menu .nav-label {
    font-size: 12px;
    text-align: center;
}

.radial-menu .nav-item-sim {
    min-height: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.radial-menu .nav-item-sim::before {
    width: 18px;
    height: 18px;
}

@media (prefers-reduced-motion: reduce) {
    .radial-menu .nav-item { transition: none; transform: none; }
}

/* ==========================================================================
   «?» со всплывашкой вместо крупных поясняющих текстов (см. collapseHelpTexts
   в app.js).
   ========================================================================== */
.help-collapsed { display: none !important; }

.help-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.help-row > :not(.help-tip-btn) { flex: 1; min-width: 0; margin-top: 0; }
.help-row > .help-tip-btn { margin-top: 1px; }
.help-tip-btn-solo {
    display: inline-flex;
    vertical-align: middle;
    margin: 0 0 6px 6px;
    align-self: flex-start;
}
.help-row-right { align-items: center; }
.help-row-right:has(select) { align-items: flex-end; }
.help-row-right > .help-tip-btn { margin-top: 0; }
.help-row-right > .why-not-title { margin-bottom: 0; }
.help-row-right:has(> .why-not-title) { margin-bottom: 8px; padding-right: 36px; }
.help-tip-btn-inline { display: inline-flex; vertical-align: middle; margin: 0 0 0 6px; }
caption > .help-tip-btn-inline { margin: 0 8px 0 0; }
.assignment-diagnostic-table caption { padding-top: 6px; padding-bottom: 6px; }

.help-tip-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: var(--radius-full);
    /* --note-accent: коричневый (#805500) в светлой теме, жёлтый в тёмной —
       та же вертикальная акцентная линия, что у пояснений. */
    border: 1.5px solid var(--note-accent);
    background: var(--bg-surface-subtle);
    color: var(--note-accent);
    font: 700 12px/1 var(--font-sans);
    cursor: pointer;
    flex-shrink: 0;
}

.help-tip-btn:hover,
.help-tip-btn[aria-expanded="true"] {
    border-color: var(--beeline-yellow);
    background: var(--beeline-yellow);
    color: #181A1B;
}

.help-tip-pop {
    position: fixed;
    z-index: 5000;
    padding: 10px 12px;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--note-accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 500;
    text-align: left;
}

.help-tip-part + .help-tip-part { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }

/* ==========================================================================
   Действия с планом в шапке (Расчёт / Событие / Сравнить) — компактно.
   ========================================================================== */
:root { --header-actions-width: 296px; }

.header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    margin-right: 10px;
    flex-shrink: 0;
}

.header-actions .nav-item {
    flex-direction: row;
    width: auto;
    height: 34px;
    padding: 0 11px;
    gap: 6px;
    margin: 0;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.header-actions .nav-icon { width: 17px; height: 17px; }
.header-actions .nav-label { font-size: 12px; font-weight: 700; }

@media (max-width: 1380px) {
    :root { --header-actions-width: 128px; }
    .header-actions .nav-item { width: 36px; padding: 0; justify-content: center; }
    .header-actions .nav-label { display: none; }
}

/* ==========================================================================
   Угловая док-панель слева снизу: демо, кеш, диспетчер.
   ========================================================================== */
.corner-dock {
    position: fixed;
    left: calc(var(--sidebar-width) + var(--engineers-panel-width) + 12px);
    bottom: calc(var(--gantt-footer-height, 38px) + 12px);
    z-index: 460;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    background-color: var(--glass-bg);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
}

.corner-dock .nav-item {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius-full);
}

.corner-dock .nav-label { display: none; }
.corner-dock .user-avatar { width: 36px; height: 36px; }


/* Плашка-счётчик «N нарядов» в карточке бригады. */
.badge-tag-count {
    display: inline-block;
    min-width: 22px;
    text-align: center;
    background-color: #DBEAFE;
    color: #1D4ED8;
    border: 1.5px solid #3B82F6;
}

:root[data-theme="dark"] .badge-tag-count { background-color: var(--bg-surface-subtle); color: #60A5FA; border-color: #60A5FA; }


/* Три действия с планом в радиальном меню (редактирование / пресет / расчёт). */

.preset-list { display: grid; gap: 8px; }

.preset-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition);
}

.preset-option span { font-size: 12px; color: var(--text-secondary); }
.preset-option:hover, .preset-option:focus-visible { border-color: var(--beeline-yellow); background: var(--bg-surface-hover); }

/* ==========================================================================
   Ярлычок со стрелкой: скрыть/показать список бригад.
   ========================================================================== */
body.panel-collapsed { --engineers-panel-width: 0px; }
body.panel-collapsed .engineers-panel { overflow: hidden; border-right: 0; }

.engineers-panel-tab {
    position: fixed;
    left: var(--engineers-panel-width);
    top: calc(50% + 24px);
    transform: translateY(-50%);
    z-index: 420;
    width: 20px;
    height: 56px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background-color: var(--glass-bg);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-left: 0;
    border-radius: 0 12px 12px 0;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: left 220ms ease, color var(--transition), background-color var(--transition);
}

.engineers-panel-tab:hover { color: var(--text-primary); background-color: var(--beeline-yellow); }
.engineers-panel-tab svg { width: 14px; height: 14px; transition: transform 220ms ease; }
body.panel-collapsed .engineers-panel-tab svg { transform: rotate(180deg); }

/* Неактивная «Расчёт» — заметно бледнее остальных disabled-кнопок, без подъёма на наведении. */
.nav-item-primary:disabled,
#radial-calc-plan:disabled {
    opacity: .3;
    filter: grayscale(.6);
    transform: none;
    box-shadow: none;
}

.nav-item-primary:disabled:hover { transform: none; box-shadow: none; background: var(--beeline-yellow); }

.help-row-inline { align-items: flex-start; gap: 8px; }
.help-row-inline > :not(.help-tip-btn) { flex: 0 1 auto; }

/* Пока открыт предпросмотр, плашка предпросмотра закрывает угловой док (демо/кэш/инициалы). */
body:has(#planning-preview-banner:not(.hidden)) .corner-dock { display: none; }

/* Редактор бригады: флаг «начинает из депо»; Нормы: депо по районам. */
.start-from-depot { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.start-from-depot input { accent-color: var(--beeline-yellow); width: 16px; height: 16px; }
.regulations-subtitle { margin: 14px 0 8px; font-size: 13px; font-weight: 700; }
.regulations-depots { border: 1px solid var(--border-color); border-radius: 6px; }
.regulations-reset { margin-right: auto; }

.address-map-selected { flex: 1; min-width: 0; margin-right: 12px; text-align: left; font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#address-map-modal .modal-actions { align-items: center; }
.text-input.is-locked { opacity: .6; cursor: not-allowed; }

/* Окно «Выдача» */
.issuance-lead { margin: 0 0 12px; color: var(--text-secondary); font-size: 13px; }
.issuance-kits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.issuance-card { padding: 12px; border: 1px solid var(--glass-border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--bg-surface) 60%, transparent); }
.issuance-card h4 { margin: 0; font-size: 14px; }
.issuance-card > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; cursor: pointer; list-style: none; }
.issuance-card > summary::-webkit-details-marker { display: none; }
.issuance-card > summary::before { content: "▸"; color: var(--text-secondary); transition: transform var(--transition, 120ms); }
.issuance-card[open] > summary::before { transform: rotate(90deg); }
.issuance-card[open] > summary { margin-bottom: 8px; }
.issuance-card > summary:focus-visible { outline: 2px solid var(--beeline-yellow); outline-offset: 2px; border-radius: 4px; }
.issuance-kit-hint { margin: 0 0 8px; font-size: 12px; color: var(--text-secondary); }
.issuance-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 8px; }
.issuance-table th, .issuance-table td { padding: 4px 6px; text-align: center; border-bottom: 1px solid var(--border-color); }
.issuance-table th:first-child, .issuance-table td:first-child { text-align: left; }
.issuance-table input, .issuance-check input { accent-color: var(--beeline-yellow); }
.issuance-stock-grid { display: grid; gap: 4px; }
.issuance-weight, .issuance-kit-weight { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.issuance-kit-weight { white-space: normal; }
.issuance-weight.is-overweight, .issuance-kit-weight.is-overweight { color: #B91C1C; font-weight: 700; }
:root[data-theme="dark"] .issuance-weight.is-overweight, :root[data-theme="dark"] .issuance-kit-weight.is-overweight { color: #FCA5A5; }
.issuance-stock { display: grid; grid-template-columns: 1fr 76px 22px; align-items: center; gap: 6px; font-size: 12px; }
.issuance-stock .text-input { padding: 3px 6px; }
.issuance-stock em { font-style: normal; color: var(--text-secondary); }
.issuance-kits-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.issuance-subtitle { margin: 16px 0 8px; font-size: 13px; font-weight: 700; }
.issuance-brigades { display: grid; gap: 6px; }
.issuance-brigade { padding: 8px 10px; border: 1px solid var(--glass-border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--bg-surface) 60%, transparent); }
.issuance-brigade.is-confirmed { border-color: var(--status-success, #00693a); }
.issuance-brigade-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.issuance-brigade-head strong { flex: 1; min-width: 120px; }
.issuance-brigade-head .select-input { width: 120px; }
.issuance-state { font-size: 12px; color: var(--text-secondary); }
.issuance-brigade.is-confirmed .issuance-state { color: var(--status-success, #00693a); }
.issuance-brigade-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.issuance-checks { display: grid; gap: 4px; align-content: start; }
.issuance-check { display: flex; align-items: center; gap: 6px; font-size: 12px; }
@media (max-width: 760px) { .issuance-kits, .issuance-brigade-edit { grid-template-columns: 1fr; } }
.issuance-stock .text-input { height: 30px; padding: 2px 8px; font-size: 12px; }
.issuance-restore { margin-top: 8px; font-size: 12px; padding: 4px 10px; }

/* ==========================================================================
   Спокойная карта и сводка: цвет и номера — только там, где они нужны.
   ========================================================================== */

/* Обзорный масштаб: остановки — точки без номеров. Номера остаются у бригады
   в фокусе, у выбранной заявки, в очереди и у изменений предпросмотра. */
.map-zoom-far .custom-map-stop:not(.is-focus):not(.selected):not(.unassigned):not(.preview-change):not(.preview-before-marker) {
    width: 10px;
    height: 10px;
    margin: 4px;
    font-size: 0;
    border-width: 1.5px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.map-zoom-far .custom-map-stop.in-jeopardy:not(.is-focus):not(.selected) {
    box-shadow: 0 0 0 2px #FB923C !important;
}

/* Фокус на бригаде (наведение в списке, выбор бригады или её заявки). */
.map-has-focus .custom-map-stop:not(.is-focus):not(.selected):not(.unassigned) { opacity: 0.22; }
.map-has-focus .radar-beacon:not(.is-focus):not(.selected) { opacity: 0.35; animation: none; }
.map-has-focus .custom-map-stop.is-focus { z-index: 1; transform: scale(1.08); }
.custom-map-stop { transition: transform var(--transition), opacity 160ms ease, width 160ms ease, height 160ms ease; }
@media (prefers-reduced-motion: reduce) {
    .custom-map-stop { transition: none; }
}

/* Видимый вход в радиальное меню разделов. */
.corner-dock .corner-dock-sections { position: relative; }
.corner-dock-kbd {
    position: absolute;
    right: -2px;
    bottom: -2px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 4px;
    background: var(--beeline-yellow);
    color: #000;
    font: 700 9px/14px inherit;
    font-family: inherit;
    text-align: center;
    pointer-events: none;
}

/* Подписи машин на обзорном масштабе — только при наведении или в фокусе:
   у офиса стоят несколько машин, и их подписи наслаиваются. */
.map-zoom-far .veh-div:not(:hover) .veh-marker-wrap:not(.is-focus) .veh-name-tag { display: none; }

/* ==========================================================================
   Помощник: «что дальше», палитра команд (Ctrl+K), тур.
   ========================================================================== */
.assistant-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 8px 0 11px;
    border: 1px solid var(--border-input, var(--border-subtle));
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.assistant-trigger:hover { color: var(--text-primary); border-color: var(--beeline-yellow); }
.assistant-trigger:focus-visible { outline: 2px solid var(--beeline-yellow); outline-offset: 2px; }
.assistant-trigger kbd,
.command-palette-foot kbd {
    font: inherit;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--bg-surface-subtle);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}
@media (max-width: 1600px) { .assistant-trigger-label { display: none; } }

.next-steps {
    display: grid;
    gap: 6px;
    margin: -6px 10px 12px;
    flex-shrink: 0;
}
.next-steps[hidden] { display: none; }
.next-step {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 8px 26px 8px 10px;
    border-left: 3px solid var(--border-subtle);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--bg-surface-subtle);
}
.next-step-action { border-left-color: var(--beeline-yellow); }
.next-step-urgent { border-left-color: #DC2626; }
.next-step p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--text-primary); }
.next-step-go {
    justify-self: start;
    padding: 3px 10px;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--beeline-yellow);
    color: #000;
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}
.next-step-calm .next-step-go {
    background: transparent;
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px var(--border-input, var(--border-subtle));
}
.next-step-go:focus-visible, .next-step-close:focus-visible { outline: 2px solid var(--beeline-yellow); outline-offset: 2px; }
.next-step-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}
.next-step-close:hover { color: var(--text-primary); background: var(--border-subtle); }

.command-palette {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 14vh 16px 16px;
    background: rgba(0, 0, 0, 0.35);
}
.command-palette.hidden { display: none; }
.command-palette-box {
    width: min(600px, 100%);
    background: var(--bg-surface);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}
#command-palette-input {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 18px;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 16px;
    outline: none;
}
.command-palette-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 50vh;
    overflow-y: auto;
}
.command-palette-option {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
}
.command-palette-option.active { background: #FFF4CC; }
:root[data-theme="dark"] .command-palette-option.active { background: rgba(255, 199, 44, 0.16); }
.command-palette-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.command-palette-hint { font-size: 12px; color: var(--text-secondary); text-align: right; }
.command-palette-empty { padding: 14px 12px; font-size: 13px; color: var(--text-secondary); }
.command-palette-foot {
    margin: 0;
    padding: 8px 14px;
    border-top: 1px solid var(--border-subtle);
    font-size: 11px;
    color: var(--text-secondary);
}

.assistant-tour { position: fixed; inset: 0; z-index: 3100; pointer-events: none; }
.assistant-tour-spot {
    position: fixed;
    border-radius: 10px;
    box-shadow: 0 0 0 2px var(--beeline-yellow), 0 0 0 9999px rgba(0, 0, 0, 0.45);
    transition: left 200ms ease, top 200ms ease, width 200ms ease, height 200ms ease;
}
.assistant-tour-bubble {
    position: fixed;
    pointer-events: auto;
    padding: 14px 16px 12px;
    background: var(--bg-surface);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}
.assistant-tour-text { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--text-primary); }
.assistant-tour-actions { display: flex; align-items: center; gap: 8px; }
.assistant-tour-count { margin-right: auto; font-size: 11.5px; color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .assistant-tour-spot { transition: none; } }

/* ==========================================================================
   R3: Unassigned Ticket Window Projection on Gantt Lanes
   ========================================================================== */
.gantt-unassigned-projection {
    position: absolute;
    top: 2px;
    bottom: 2px;
    z-index: 7;
    border-radius: var(--radius-xs, 4px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 4px;
    pointer-events: auto;
    cursor: pointer;
    box-sizing: border-box;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.gantt-unassigned-projection.is-free {
    border: 1.5px dashed #16A34A;
    background: rgba(22, 163, 74, 0.16);
}

.gantt-unassigned-projection.has-conflict {
    border: 1.5px dashed #DC2626;
    background: repeating-linear-gradient(
        135deg,
        rgba(239, 68, 68, 0.18) 0 4px,
        rgba(239, 68, 68, 0.06) 4px 8px
    );
}

:root[data-theme="dark"] .gantt-unassigned-projection.is-free {
    border-color: #4ADE80;
    background: rgba(74, 222, 128, 0.22);
}

:root[data-theme="dark"] .gantt-unassigned-projection.has-conflict {
    border-color: #F87171;
    background: repeating-linear-gradient(
        135deg,
        rgba(248, 113, 113, 0.24) 0 4px,
        rgba(248, 113, 113, 0.08) 4px 8px
    );
}

.gantt-projection-badge {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    padding: 1px 4px;
    border-radius: 3px;
    background: var(--bg-surface, #FFFFFF);
    color: var(--text-primary, #0F172A);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

:root[data-theme="dark"] .gantt-projection-badge {
    background: #1E293B;
    color: #F1F5F9;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.gantt-lane.gantt-lane-qualified {
    box-shadow: inset 3px 0 0 #2563EB;
}

:root[data-theme="dark"] .gantt-lane.gantt-lane-qualified {
    box-shadow: inset 3px 0 0 #60A5FA;
}

.gantt-lane.gantt-lane-unqualified {
    opacity: 0.42;
    filter: grayscale(35%);
}

.unassigned-card.is-projecting {
    border-color: #2563EB !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
}

:root[data-theme="dark"] .unassigned-card.is-projecting {
    border-color: #60A5FA !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.45);
}

/* Альтернативный план: старое распределение серое с контуром цвета бригады */
.gantt-lane-old { opacity: .92; }
.gantt-lane-old .gantt-lane-label { color: var(--text-secondary); }
.gantt-swatch-old { background: #CBD5E1; border: 2px solid transparent; box-sizing: border-box; }
.gantt-tag-new { color: var(--text-primary); font-weight: 700; }
.gantt-bar.bar-old { background: repeating-linear-gradient(135deg, #CBD5E1 0 4px, #F1F5F9 4px 8px); color: #334155; border: 2px solid #64748B; box-sizing: border-box; }
.gantt-bar.bar-old-travel { background-color: #E2E8F0; border: 0; }
.gantt-bar.bar-old.bar-old-warehouse { background-color: #E2E8F0; }
:root[data-theme="dark"] .gantt-bar.bar-old { background: repeating-linear-gradient(135deg, #475569 0 4px, #334155 4px 8px); color: #E2E8F0; }
:root[data-theme="dark"] .gantt-bar.bar-old-travel { background-color: #334155; }
.block-sample.block-old { background: #CBD5E1; border: 2px solid #64748B; box-sizing: border-box; }
.planning-alt-switch { display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: middle; }
.planning-alt-switch.hidden { display: none; }
.planning-alt-switch .btn { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 4px 10px; line-height: 1.2; }
.planning-alt-switch .btn small { font-size: 10px; font-weight: 400; opacity: .85; }
.planning-alt-switch .btn[aria-pressed="true"] { outline: 2px solid var(--beeline-yellow); outline-offset: 1px; }

.preview-view-switch { display: inline-flex; gap: 4px; margin-right: 8px; }
.preview-view-switch.hidden { display: none; }
.preview-view-switch .btn[aria-pressed="true"] { outline: 2px solid var(--beeline-yellow); outline-offset: 1px; }

.gantt-version-menu { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; font-size: 12px; color: var(--text-secondary); }
.gantt-version-menu select { font-size: 12px; padding: 2px 6px; border: 1px solid var(--border-color, #CBD5E1); border-radius: 6px; background: var(--bg-surface); color: var(--text-primary); max-width: 260px; }
.gantt-version-menu select:disabled { opacity: .6; }