/* ============================================================================
   Mouse Company — Powersports Dark theme
   ============================================================================ */

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

/* ----------------------------------------------------------------------------
   Шрифты — свои файлы, не Google Fonts.
   ----------------------------------------------------------------------------
   Здесь стоял @import с fonts.googleapis.com — и он не работал: по стандарту
   @import обязан идти раньше любых правил, а выше него лежит `* {}`, поэтому
   браузер импорт молча выбрасывал. Проверено на проде 17.08.2026: document.fonts
   пуст, запросов к Google не было вовсе — весь сайт рисовался системным
   шрифтом, хотя дизайн-система построена на Manrope.

   Даже рабочий @import был бы плох: о шрифтах браузер узнавал бы только после
   загрузки и разбора всего style.css, потом шёл бы на fonts.googleapis.com за
   вторым CSS и лишь затем на fonts.gstatic.com за самими файлами — три
   последовательных обращения к двум чужим доменам до первой буквы на экране.

   Manrope и Inter — variable-версии: один файл на весь диапазон весов вместо
   пяти и четырёх статических. Разбивка по unicode-range оставлена как у
   Google: русской странице достаточно latin + cyrillic, остальное браузер
   не тронет.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/assets/fonts/manrope-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/assets/fonts/manrope-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/inter-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Tenor Sans — только логотип «Mouse Company», кириллица ему не нужна */
@font-face {
    font-family: 'Tenor Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/tenor-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Тёмная тема — база. Светлая включается классом body.light (см. ниже):
       механику переключения не меняем, только значения цветов. */
    --bg-primary: #05060f;
    --bg-secondary: #0f1220;
    --bg-tertiary: #14172a;
    --bg-hover: #1c2038;
    --border: rgba(186, 215, 247, 0.12);
    --border-light: rgba(186, 215, 247, 0.24);

    --text-primary: #ffffff;
    --text-secondary: #d1e4fa;
    --text-muted: #8b95a7;

    --accent: #663af3;
    --accent-hover: #8f70f7;
    --accent-dim: rgba(102, 58, 243, 0.15);
    --accent-tint: rgba(102, 58, 243, 0.18);
    --accent-tint2: rgba(102, 58, 243, 0.30);

    --success: #3ecf7a;
    --warning: #e2a03b;
    --info: #5aa0ff;
    --info-tint: rgba(59, 130, 246, 0.16);
    --danger: #f16a6a;
    --danger-hover: #ef4444;

    /* Текст и значки поверх цветной заливки — акцентной, красной, зелёной.
       Белый в обеих темах: заливка под ним тёмная и там, и там. Раньше по
       стилям было рассыпано полтора десятка голых #fff и white — сменить
       акцент разом было нельзя, приходилось искать их по одному. */
    --on-accent: #ffffff;

    /* Имена токенов из дизайн-системы редизайна — синонимы к тем, что уже
       разошлись по 4472 строкам стилей. Так новые компоненты пишутся на
       языке макета, а старые правила продолжают работать без переписывания. */
    --card: var(--bg-secondary);
    --line: var(--border);
    --ink: var(--text-primary);
    --muted: var(--text-muted);
    --accent-d: var(--accent-hover);
    --pos: var(--success);
    --pos-tint: var(--success-tint);
    --warn: var(--warning);
    --warn-tint: var(--warning-tint);
    --neg: var(--danger);
    --neg-tint: var(--danger-tint);
    --radius: 16px;
    --radius-sm: 11px;
    /* Шкала скруглений. Ступеней ровно пять — по ним и верстаем новое,
       промежуточных значений вроде 9px, 13px или 20px быть не должно:
       рядом стоящие элементы с разницей в пару пикселей читаются
       как случайность, а не как замысел. */
    --radius-pill: 999px;   /* кнопки, бэйджи, статусные пилюли */
    --radius-card: 16px;    /* карточки и модалки */
    --radius-block: 12px;   /* плитки внутри карточек */
    --radius-item: 10px;    /* строки списков, чипы-ссылки */
    --radius-input: 6px;    /* поля ввода и селекты */
    /* Подсветка строки под курсором: заметная, но не заливающая таблицу */
    --row-hover: rgba(102, 58, 243, 0.10);

    /* Frosted glass surfaces */
    --glass-fill: rgba(186, 214, 247, 0.03);
    --glass-fill-strong: rgba(186, 214, 247, 0.06);
    --glass-fill-heavy: rgba(186, 214, 247, 0.12);
    --luminous-fill: rgba(199, 211, 234, 0.06);

    /* Shadows — frosted layers */
    --shadow-glass: rgba(186, 214, 247, 0.06) 0 0 0 1px inset;
    --shadow-glass-strong: rgba(186, 215, 247, 0.12) 0 0 0 1px inset;
    --shadow: rgba(216, 236, 248, 0.15) 0 1px 1px 0 inset,
              rgba(0, 0, 0, 0.35) 0 8px 24px 0;
    --shadow-lg: rgba(216, 236, 248, 0.2) 0 1px 1px 0 inset,
                 rgba(168, 216, 245, 0.06) 0 24px 48px 0 inset,
                 rgba(0, 0, 0, 0.5) 0 20px 60px 0;
    /* Для filter: drop-shadow() — box-shadow туда не подставить */
    --shadow-float: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));

    /* Логотип входа. metal — лицо буквы (светлое на тёмном фоне),
       depth — тёмная боковина экструзии (вариант B, сильный объём). */
    --logo-metal: linear-gradient(175deg, #ffffff 0%, #c8d0de 38%, #8a93a6 62%, #5b6478 100%);
    --logo-metal-dim: linear-gradient(175deg, #dfe4ee 0%, #9aa2b4 100%);
    --logo-depth-base: #12141f;
    --logo-depth-shadow:
        1px 1px 0 #12141f, 2px 2px 0 #10131d, 3px 3px 0 #0e111b, 4px 4px 0 #0c0f18,
        5px 5px 0 #0b0d16, 6px 6px 0 #090b13, 7px 7px 0 #080a11, 8px 8px 0 #07080f,
        9px 9px 0 #05060c, 10px 10px 0 #04050a,
        12px 16px 20px rgba(0, 0, 0, 0.6);

    /* Manrope — интерфейс и заголовки, Inter — цифры, VIN, коды партий */
    --font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'Inter', ui-monospace, "SF Mono", Menlo, monospace;
    --font: var(--font-body);

    /* Полупрозрачные фоны статусов. Раньше RGB тёмной темы были вписаны
       в каждый бэйдж и алерт, поэтому в светлой теме тон фона не менялся
       вслед за --success/--warning/--danger. */
    --success-tint: rgba(22, 163, 74, 0.16);
    --success-tint-strong: rgba(62, 207, 122, 0.3);
    --warning-tint: rgba(217, 130, 10, 0.16);
    --warning-tint-strong: rgba(226, 160, 59, 0.3);
    --danger-tint: rgba(220, 38, 38, 0.16);
    --danger-tint-strong: rgba(241, 106, 106, 0.3);
}

/* Светлая версия AuthKit — глазурованное стекло на светлом полотне */
body.light {
    --bg-primary: #f5f7fc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #edf1f8;
    --bg-hover: #e1e7f2;
    --border: #eaeef4;
    --border-light: #dfe5ef;

    --text-primary: #1c2230;
    --text-secondary: #4a5566;
    --text-muted: #667085;

    --accent: #663af3;
    --accent-hover: #5024d6;
    --accent-dim: rgba(102, 58, 243, 0.10);
    --accent-tint: #efeafe;
    --accent-tint2: #e3daff;

    --success: #0f7a44;
    --warning: #96600e;
    --info: #2563eb;
    --info-tint: #e8f0fe;
    --danger: #dc2626;
    --danger-hover: #b91c1c;

    /* Тинты статусов для светлой темы: на белом фоне нужны свои RGB,
       иначе бэйджи и алерты остаются подкрашены «тёмными» оттенками */
    --success-tint: #e7f6ee;
    --success-tint-strong: rgba(22, 163, 74, 0.26);
    --warning-tint: #fdf1de;
    --warning-tint-strong: rgba(217, 130, 10, 0.26);
    --danger-tint: #fdeaea;
    --danger-tint-strong: rgba(220, 38, 38, 0.24);

    /* Алиасы объявлены заново: ссылка var(--bg-secondary) внутри переменной
       разрешается там, где переменная ОБЪЯВЛЕНА (:root), а не там, где
       используется. Без повтора светлая тема получала тёмные карточки. */
    --card: #ffffff;
    --line: #eaeef4;
    --ink: #1c2230;
    --muted: #667085;
    --accent-d: #5024d6;
    --pos: #0f7a44;
    --pos-tint: #e7f6ee;
    --warn: #96600e;
    --warn-tint: #fbf2df;
    --neg: #dc2626;
    --neg-tint: #fdeaea;
    --row-hover: #f4f2fd;

    --glass-fill: rgba(102, 58, 243, 0.02);
    --glass-fill-strong: rgba(102, 58, 243, 0.05);
    --glass-fill-heavy: rgba(102, 58, 243, 0.10);
    --luminous-fill: rgba(63, 73, 89, 0.04);

    --shadow-glass: rgba(63, 73, 89, 0.10) 0 0 0 1px inset;
    --shadow-glass-strong: rgba(63, 73, 89, 0.16) 0 0 0 1px inset;
    --shadow: rgba(63, 73, 89, 0.05) 0 1px 2px 0 inset,
              rgba(63, 73, 89, 0.08) 0 8px 24px 0;
    --shadow-lg: rgba(63, 73, 89, 0.05) 0 1px 2px 0 inset,
                 rgba(63, 73, 89, 0.15) 0 20px 60px 0;
    /* В светлой теме тени серо-синие, а не чёрные */
    --shadow-float: drop-shadow(0 10px 24px rgba(63, 73, 89, 0.22));

    /* На светлом фоне лицо тёмное, а боковина ещё темнее — объём читается
       как тень вниз. Падающая тень мягче, серо-синяя, не чёрная. */
    --logo-metal: linear-gradient(175deg, #3a4056 0%, #5b6478 45%, #8a93a6 100%);
    --logo-metal-dim: linear-gradient(175deg, #5b6478 0%, #8a93a6 100%);
    --logo-depth-base: #2a3040;
    --logo-depth-shadow:
        1px 1px 0 #2a3040, 2px 2px 0 #272d3c, 3px 3px 0 #242938, 4px 4px 0 #212634,
        5px 5px 0 #1e2330, 6px 6px 0 #1b1f2c, 7px 7px 0 #181c28, 8px 8px 0 #151824,
        9px 9px 0 #121520, 10px 10px 0 #0f121c,
        12px 16px 20px rgba(63, 73, 89, 0.35);
}

/* Blueprint grid + ambient violet glow на фоне */
body {
    position: relative;
    font-family: var(--font-body);
    letter-spacing: -0.16px;
    background: var(--bg-primary);
    min-height: 100vh;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(63, 73, 89, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(63, 73, 89, 0.15) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse at 50% 0%, black 0%, transparent 60%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, black 0%, transparent 60%);
}
body::after {
    content: '';
    position: fixed;
    top: -400px;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    height: 1200px;
    background: radial-gradient(circle, rgba(102, 58, 243, 0.15) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
}
body.light::before {
    background-image:
        linear-gradient(rgba(102, 58, 243, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(102, 58, 243, 0.06) 1px, transparent 1px);
}
body.light::after {
    background: radial-gradient(circle, rgba(102, 58, 243, 0.08) 0%, transparent 60%);
}

/* Заголовки — display шрифт */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
}

.app-content, main, .modal-content {
    position: relative;
    z-index: 1;
}
/* Шапка выше контента — иначе выпадашка навигации просвечивает сквозь KPI-карточки */
.app-header {
    position: relative;
    z-index: 100;
}
/* Модалки живут внутри main, а у него свой z-index — значит и слой модалки
   запирается внутри него, каким бы большим её z-index ни был. Из-за этого шапка
   (z-index 100) рисовалась поверх окна, и заголовок «Обещано людям» оказывался
   под ней срезанным. Поднимаем сам контекст, когда внутри открыта модалка. */
.app-content:has(.modal:not(.hidden)),
main:has(.modal:not(.hidden)) {
    z-index: 200;
}

html, body {
    height: 100%;
    /* Фон здесь НЕ задаём. Светлую тему включает класс на body, поэтому
       var(--bg-primary) на html всегда резолвился в тёмный, а фон корневого
       элемента растягивается на всю прокручиваемую страницу. Фон body при
       height:100% покрывает лишь первый экран — ниже вылезал тёмный html.
       Без фона у html браузер растягивает на страницу фон body, и светлая
       тема работает на всю длину. Сам фон задан в правиле body выше. */
    color: var(--text-primary);
    /* Шрифт берём из переменной: это правило идёт ниже body и раньше
       перебивало var(--font-body) системным стеком — Inter не применялся вообще */
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================================
   Экран входа (центрированная карточка)
   ============================================================================ */

.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 40px;
    box-shadow: var(--shadow-lg);
}

.login-card h1 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
    text-align: center;
}

/* Логотип в стиле December Hotel: крупное слово + мелкое вразрядку,
   объёмные буквы. Шрифт Tenor Sans подключён в index.html.
   Объём — два слоя: тёмная «боковина» (depth) уходит вниз-вправо
   каскадом теней, поверх лежит металлическое «лицо» (big). */
.login-logo {
    display: block;
    text-align: center;
    margin: 0 0 8px;
    font-weight: 400;
    line-height: 1;
}
.login-logo-row {
    position: relative;
    display: inline-block;
    line-height: 1;
}
.login-logo-big,
.login-logo-depth {
    font-family: 'Tenor Sans', var(--font-display);
    font-size: 54px;
    line-height: 1;
    text-transform: uppercase;
    display: block;
}
/* Лицо буквы — металл поверх боковины */
.login-logo-big {
    position: relative;
    z-index: 2;
    background: var(--logo-metal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.45));
}
/* Боковина — тёмная копия, смещена вниз-вправо, задаёт толщину */
.login-logo-depth {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
    color: var(--logo-depth-base);
    -webkit-text-fill-color: var(--logo-depth-base);
    text-shadow: var(--logo-depth-shadow);
}
.login-logo-small {
    display: block;
    margin-top: 12px;
    font-family: 'Tenor Sans', var(--font-display);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.42em;
    /* компенсируем трекинг последней буквы, чтобы слово стояло по центру */
    text-indent: 0.42em;
    background: var(--logo-metal-dim);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.login-card .subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 32px;
}

/* ============================================================================
   Форма
   ============================================================================ */

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.form-group input {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s ease;
}

.form-group input:focus {
    border-color: var(--accent);
}

.form-group input::placeholder {
    color: var(--text-muted);
}

/* ============================================================================
   Кнопки
   ============================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
    text-decoration: none;
    text-align: center;
    line-height: 1.2;
}

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

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: linear-gradient(180deg, var(--accent), var(--accent-d));
    color: white;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(102, 58, 243, 0.32);
}

.btn-primary:hover:not(:disabled) {
    filter: brightness(1.06);
}

/* Вторичная кнопка редизайна — обводка вместо заливки: полноцветный
   фиолетовый остаётся только у главного действия экрана */
.btn-ghost {
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
    font-weight: 700;
}

.btn-ghost:hover:not(:disabled) {
    border-color: var(--accent);
}

.btn-block {
    width: 100%;
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--bg-hover);
}

.btn-danger {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
}

.btn-danger:hover:not(:disabled) {
    background: var(--danger);
    color: white;
}

/* ============================================================================
   Уведомления (ошибки, успех)
   ============================================================================ */

.alert {
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.alert-error {
    background: var(--danger-tint);
    border-color: var(--danger-tint-strong);
    color: var(--danger);
}

.alert-success {
    background: var(--success-tint);
    border-color: var(--success-tint-strong);
    color: var(--success);
}

.alert:empty {
    display: none;
}

/* Плавающее уведомление страницы.
   Страницы длинные, и сообщение в потоке документа не видно, если
   пользователь прокрутил вниз — действие выглядит как «ничего не произошло».
   Модальные алерты (showModalAlert) имеют свои id и правилом не затрагиваются. */
#alert:not(:empty) {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 1100;
    max-width: 400px;
    margin-bottom: 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    filter: var(--shadow-float);
    animation: alertSlideIn 0.18s ease-out;
}

@keyframes alertSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    #alert:not(:empty) {
        top: 12px;
        left: 12px;
        right: 12px;
        max-width: none;
    }
}

/* ============================================================================
   Дашборд (шапка + контент)
   ============================================================================ */

.app-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-header .brand {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.app-header .user-info {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* ==== Постоянная навигация (инжектится в .app-header) ==== */
.app-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    margin: 0 20px;
}
.nav-link {
    padding: 8px 13px;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease;
}
.nav-link:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-link.active { background: var(--accent-dim); color: var(--accent); }
.nav-group { position: relative; }
.nav-group.active > .nav-group-btn { color: var(--accent); }
.nav-caret { font-size: 10px; opacity: 0.7; }
.nav-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 210px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    display: none;
    z-index: 60;
}
.nav-group.open .nav-dropdown { display: block; }
.nav-drop-link {
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}
.nav-drop-link:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-drop-link.active { color: var(--accent); background: var(--accent-dim); }
.nav-burger { display: none; }

@media (max-width: 900px) {
    .app-nav {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 264px;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 0;
        padding: 72px 12px 16px;
        background: var(--bg-secondary);
        border-right: 1px solid var(--border);
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        z-index: 200;
        overflow-y: auto;
    }
    .app-nav.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, 0.4); }
    /* .app-header стеклянный (backdrop-filter) — это создаёт для fixed-потомков
       свою систему координат вместо экрана, и .app-nav.open вместо шторки на весь
       экран схлопывается в высоту шапки. Снимаем blur на время, пока меню открыто. */
    .app-header:has(.app-nav.open) {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .nav-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: var(--text-primary);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        padding: 4px 12px 4px 0;
    }
    .nav-group { position: static; }
    .nav-dropdown {
        position: static;
        display: block;
        box-shadow: none;
        border: none;
        background: none;
        padding: 2px 0 6px 12px;
        min-width: 0;
    }
    .nav-caret { display: none; }
    .nav-group-btn {
        pointer-events: none;
        opacity: 0.6;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
}

.app-content {
    /* 1320, а не 1200: самая широкая таблица проекта — техника в партии,
       девять колонок. В 1200 она не помещалась, и кнопки действий уезжали
       на вторую строку либо появлялась прокрутка вбок. На ноутбучных 1366
       и уже разницы нет — там ширину и так задаёт экран. */
    max-width: 1320px;
    margin: 0 auto;
    padding: 32px 24px;
}

.app-content h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
}

.app-content p {
    color: var(--text-secondary);
    margin-bottom: 16px;
}

/* ============================================================================
   Утилиты
   ============================================================================ */

.text-muted {
    color: var(--text-muted);
}

.hidden {
    display: none !important;
}

/* ============================================================================
   Ссылки в шапке
   ============================================================================ */

.app-header .brand a {
    color: var(--text-primary);
    text-decoration: none;
}

.app-header .brand a:hover {
    color: var(--accent);
}

/* ============================================================================
   Карточки навигации (дашборд)
   ============================================================================ */

.section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 32px 0 12px;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.nav-card {
    display: block;
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease;
}
.nav-card-count {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-dim);
    padding: 2px 10px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.nav-card-count:empty { display: none; }

.nav-card:hover:not(.nav-card-disabled) {
    border-color: var(--accent);
    background: var(--bg-tertiary);
}

.nav-card:active:not(.nav-card-disabled) {
    transform: scale(0.99);
}

.nav-card-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.nav-card-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.nav-card-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

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

/* ============================================================================
   Заголовок страницы (с кнопкой действия)
   ============================================================================ */

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
/* Заголовок сжимается, кнопка-действие не выдавливается за край */
.page-header > :first-child { min-width: 0; }

.page-header h2 {
    margin-bottom: 4px;
}

.back-link {
    display: inline-block;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    margin-bottom: 8px;
}

.back-link:hover {
    color: var(--accent);
}

/* ============================================================================
   Таблица данных
   ============================================================================ */

.table-wrapper {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: auto;
    max-height: 74vh;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table thead {
    background: var(--bg-tertiary);
}

.data-table th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.data-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    /* Табличные цифры: одинаковая ширина знака, разряды выстраиваются
       в столбик при сравнении сумм сверху вниз */
    font-variant-numeric: tabular-nums;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background: var(--bg-tertiary);
}

/* Липкий заголовок при длинном списке (таблица скроллится внутри карточки) */
.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-tertiary);
}

.actions-cell {
    display: flex;
    gap: 6px;
}

/* ============================================================================
   Маленькие кнопки в таблицах
   ============================================================================ */

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 10px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

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

.btn-icon-danger:hover {
    background: var(--danger-tint);
    color: var(--danger);
    border-color: var(--danger);
}

/* ============================================================================
   Бэйджи (метки)
   ============================================================================ */

/* Единая форма статуса: пилюля с точкой цвета статуса. Семантика одна на весь
   проект: pos — доставлено/продано/приход, warn — в пути/подготовка,
   info — растаможена/в процессе, neg — расход/ошибка, neutral — закрыто/архив. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.badge-success,
.b-pos {
    background: var(--success-tint);
    color: var(--success);
}

.badge-muted,
.b-neutral {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border-color: var(--line);
}

.b-warn { background: var(--warning-tint); color: var(--warning); }
.b-info { background: var(--info-tint); color: var(--info); }
.b-neg  { background: var(--danger-tint); color: var(--danger); }

/* Пометка-ярлык (ОБЕЩАННОЕ, БРОНЬ) — без точки, акцентный тон */
.b-tag {
    background: var(--accent-tint);
    color: var(--accent-d);
    font-size: 10px;
}
.b-tag::before { display: none; }

/* Код-чип: партия M00x, VIN, номер инвойса — моноширинный, чтобы символы
   не плясали по ширине и одинаковые коды читались столбиком */
.chip-mono {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11.5px;
    background: var(--accent-tint);
    color: var(--accent-d);
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

/* ============================================================================
   Модальное окно
   ============================================================================ */

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

.modal-content {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-content h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.modal-actions .btn {
    width: auto;
    min-width: 120px;
}

/* ============================================================================
   Textarea + checkbox
   ============================================================================ */

.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    resize: vertical;
    min-height: 60px;
    transition: border-color 0.15s ease;
}

.form-group textarea:focus {
    border-color: var(--accent);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-primary);
    font-weight: normal !important;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
}

/* ============================================================================
   Загрузка и пустые состояния
   ============================================================================ */

.loading {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-secondary);
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: var(--text-muted);
}

/* ============================================================================
   Подсказки под полями формы + inline код
   ============================================================================ */

.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

code {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent);
}

/* ============================================================================
   Расширения: широкие модалки, формы в две колонки, инфо-карточки, фильтры
   ============================================================================ */

.modal-content.modal-wide {
    max-width: 720px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-row.form-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 640px) {
    .form-row { grid-template-columns: 1fr; }
}

/* ============================================================================
   Селекты (dropdown)
   ============================================================================ */

.form-group select {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s ease;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.form-group select:focus {
    border-color: var(--accent);
}

/* ============================================================================
   Фильтры (над таблицей)
   ============================================================================ */

.filters {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}

.filter-item label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.filter-item select {
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    padding-right: 32px;
}

/* ============================================================================
   Клик по строке таблицы
   ============================================================================ */

.clickable-row {
    cursor: pointer;
}

/* ============================================================================
   Инфо-карточки (карточка партии)
   ============================================================================ */

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.info-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
}

.info-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.info-value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    /* Курсы, суммы и даты в карточках — табличными цифрами */
    font-variant-numeric: tabular-nums;
}

.notes-block {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.notes-block .info-value {
    font-weight: normal;
    white-space: pre-wrap;
    margin-top: 6px;
}

/* ============================================================================
   Заголовок секции с кнопкой
   ============================================================================ */

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 32px 0 16px;
    gap: 16px;
    flex-wrap: wrap;
}
.section-header > :first-child { min-width: 0; }

.section-header h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

/* ============================================================================
   Группы чекбоксов (в модалках)
   ============================================================================ */

.checkbox-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* ============================================================================
   Дополнительные бэйджи
   ============================================================================ */

.badge-warning {
    background: var(--warning-tint);
    color: var(--warning);
}

.badge-info {
    background: rgba(74, 158, 255, 0.15);
    color: var(--accent);
}

/* ============================================================================
   Действия в модалке — две группы (удалить слева, отмена/сохранить справа)
   ============================================================================ */

.modal-actions {
    justify-content: space-between;
    align-items: center;
}

.modal-actions-right {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.modal-actions .btn {
    min-width: 100px;
}

/* ============================================================================
   Date input тёмная тема (браузеры показывают белую иконку по умолчанию)
   ============================================================================ */

.form-group input[type="date"] {
    color-scheme: dark;
}

/* ============================================================================
   Выравнивание в таблицах
   ============================================================================ */

.text-right {
    text-align: right;
    /* Правым краем выравнивают числовые колонки — им же нужны
       табличные цифры, иначе разряды «пляшут» */
    font-variant-numeric: tabular-nums;
}

.text-center {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.customs-total {
    margin: 4px 0 12px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

/* Плитка карточки, по клику открывающая детализацию (таможня/доставка) */
.info-card-clickable {
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.info-card-clickable:hover {
    border-color: var(--accent);
}

/* Финансовая сводка партии — крупные метрики */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.summary-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
}
.summary-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.summary-value {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.summary-sub {
    font-size: 12px;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.summary-card-accent {
    border-color: var(--accent);
}
.summary-card-accent .summary-value {
    color: var(--accent);
}

/* Кликабельная карточка метрики на главном дашборде */
.metric-clickable {
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}
.metric-clickable:hover {
    box-shadow: 0 0 0 1px var(--accent);
}
.modal-content-wide {
    max-width: 1040px;
    width: 94%;
}
/* Числа/статусы в детализациях не переносятся (₽ не убегает на строку ниже) */
.nowrap { white-space: nowrap; }

/* Поле ссылки на объявление Авито (позиции техники на Главной) */
.avito-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}
.avito-input {
    flex: 1;
    min-width: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
}
.avito-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* Скелетоны загрузки (мерцающие плейсхолдеры вместо «Загрузка…») */
@keyframes skeleton-shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
    /* блочный намеренно: заглушки ставятся и внутрь ячеек таблицы <span>-ом,
       а инлайновому элементу высота не задаётся и место не резервируется */
    display: block;
    background: var(--bg-tertiary);
    background-image: linear-gradient(90deg, var(--bg-tertiary) 0, var(--bg-hover) 40px, var(--bg-tertiary) 80px);
    background-size: 200px 100%;
    background-repeat: no-repeat;
    border-radius: 8px;
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
.skeleton-list { display: flex; flex-direction: column; gap: 10px; }
.skeleton-row { height: 52px; }
.skeleton-card { height: 96px; }

/* Прогресс реализации на KPI-плитке «Единиц техники» */
.dm-progress {
    height: 4px;
    background: var(--bg-hover);
    border-radius: 999px;
    margin-top: 8px;
    overflow: hidden;
}
.dm-progress-fill {
    height: 100%;
    background: var(--success);
    border-radius: 999px;
    width: 0;
    transition: width 0.3s ease;
}

/* На узких экранах (ноутбуки с масштабом, планшеты) таблицы поджимаем
   отступами — так широкие списки помещаются без горизонтальной прокрутки */
@media (max-width: 1000px) {
    .data-table th,
    .data-table td { padding-left: 10px; padding-right: 10px; }
}

/* ==== Мобильная адаптация (телефоны) ==== */
@media (max-width: 640px) {
    /* VIN на телефоне не помещается и распирает таблицу вбок —
       он остаётся на карточке единицы, куда ведёт клик по строке */
    .data-table .col-vin { display: none; }
    .app-content { padding: 18px 12px; }
    .app-header { padding: 10px 12px; gap: 8px; }
    .app-header .user-info { gap: 8px; min-width: 0; }
    /* Имя пользователя прячем — остаются тема, поиск, выход; шапка не переполняется */
    .app-header .user-info #userName { display: none; }
    /* На телефоне от поиска остаётся лупа: слово и хоткей занимали место,
       из-за которого шапка вылезала за экран и вся страница ездила вбок */
    .search-trigger-text,
    .search-trigger kbd { display: none; }
    .search-trigger { padding: 8px 10px; }
    /* Кнопка выхода компактнее, но остаётся удобной для пальца */
    .app-header .btn-danger { padding: 8px 12px; font-size: 12px; min-height: 36px; }
    /* Переключатель плотности на телефоне прячем: там и так компактная вёрстка,
       а место в шапке он занимал — из-за него кнопка выхода не помещалась */
    .app-header .density-toggle { display: none; }
    .app-header .brand { min-width: 0; overflow: hidden; }
    /* Тач-цели: 36px было впритык, у иконочных кнопок в таблицах промахивались */
    .btn-icon { min-height: 40px; }
    .page-header h2 { font-size: 18px; }
    .section-header h3, .app-content h3 { font-size: 15px; }
    /* KPI и сводки — компактная сетка, карточки-ссылки в один столбец */
    .dashboard-metrics,
    .summary-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
    .cards-grid { grid-template-columns: 1fr; }
    .nav-card { padding: 16px; }
    .nav-card-count { top: 12px; right: 12px; }
    /* Tap-таргеты не мельче ~44px */
    .btn { min-height: 42px; }
    .btn-icon { min-height: 36px; }
    /* Модалки — почти на весь экран */
    .modal-content, .modal-content-wide { width: 96%; max-width: 96%; }
}
@media (max-width: 380px) {
    .dashboard-metrics,
    .summary-grid { grid-template-columns: 1fr 1fr; }
}

/* SVG-иконки (единый набор mouseApp.icon) */
.icon {
    display: inline-block;
    vertical-align: -0.15em;
    flex-shrink: 0;
}
.vehicle-icon {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
}
.vehicle-icon .icon { vertical-align: middle; }
.nav-card-icon { color: var(--accent); }
.nav-burger .icon { vertical-align: middle; }

/* ============================================================================
   Документы (тех.паспорт, ФТС, ЭПСМ, фото) — цветные пилюли
   ============================================================================ */

.documents-card {
    padding: 14px 16px;
    margin-bottom: 20px;
}

.documents-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.doc-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 500;
    border: 1px solid transparent;
}

.doc-item.doc-ok {
    background: var(--success-tint);
    color: var(--success);
    border-color: var(--success-tint-strong);
}
.doc-item.doc-ok::before {
    content: '✓';
    font-weight: 700;
}

.doc-item.doc-off {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border-color: var(--border);
}
.doc-item.doc-off::before {
    content: '○';
}

/* ============================================================================
   Финансовая сводка
   ============================================================================ */

.finance-summary {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 20px;
}

.finance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    gap: 16px;
}

.finance-row:last-child {
    border-bottom: none;
}

.finance-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.finance-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.finance-row-total {
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid var(--border-light);
}

.finance-row-total .finance-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.finance-row-total .finance-value {
    font-size: 18px;
}

.finance-row-profit .finance-value {
    font-size: 22px;
}

.finance-warning {
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--warning-tint);
    border: 1px solid var(--warning-tint-strong);
    border-radius: 6px;
    color: var(--warning);
    font-size: 12px;
    line-height: 1.5;
}

/* ============================================================================
   Блок продажи
   ============================================================================ */

.sale-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 20px;
}

.sale-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.profit-block {
    background: var(--bg-primary);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.sale-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ============================================================================
   Модалка с прокруткой (для форм с много полей)
   ============================================================================ */

.modal-content.modal-tall {
    max-height: 92vh;
}

/* ============================================================================
   Компактная сводка (в модалке платежа)
   ============================================================================ */

.finance-summary.summary-compact {
    padding: 12px 16px;
    margin-bottom: 16px;
}

.finance-summary.summary-compact .finance-row {
    padding: 6px 0;
}

/* ============================================================================
   Строки аллокаций (в модалке платежа)
   ============================================================================ */

.allocations-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.alloc-row {
    display: grid;
    grid-template-columns: 1.4fr 1.6fr 1fr auto;
    gap: 8px;
    align-items: center;
}

.alloc-row select,
.alloc-row input {
    padding: 9px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
}

.alloc-row select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    padding-right: 30px;
    cursor: pointer;
}

.alloc-row select:focus,
.alloc-row input:focus {
    border-color: var(--accent);
}

.btn-icon-remove {
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    width: 36px;
    height: 36px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.btn-icon-remove:hover {
    background: var(--danger-tint);
    color: var(--danger);
    border-color: var(--danger);
}

/* ============================================================================
   Маленькая кнопка (для + Добавить строку)
   ============================================================================ */

.btn-small {
    padding: 8px 14px;
    font-size: 13px;
}

@media (max-width: 640px) {
    .alloc-row {
        grid-template-columns: 1fr 1fr auto;
    }
    .alloc-row .alloc-shipment {
        grid-column: 1 / -1;
    }
}

/* ============================================================================
   Дропзона для загрузки файлов
   ============================================================================ */

.dropzone {
    border: 2px dashed var(--border-light);
    border-radius: 12px;
    padding: 32px 20px;
    text-align: center;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.dropzone:hover, .dropzone-active {
    border-color: var(--accent);
    background: var(--bg-tertiary);
}

.dropzone-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.dropzone-text {
    font-size: 14px;
    line-height: 1.5;
}

.file-list {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
}

.file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================================
   Segmented control (radio buttons "переключатель")
   ============================================================================ */

.segmented {
    display: inline-flex;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    gap: 3px;
}

.segmented-item {
    position: relative;
    cursor: pointer;
}

.segmented-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.segmented-item span {
    display: block;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.15s ease;
}

.segmented-item input:checked + span {
    background: var(--accent);
    color: white;
}

/* Сам радио-инпут скрыт (opacity: 0), поэтому фокус рисуем на видимой
   подписи — иначе при навигации с клавиатуры обводка появлялась
   на невидимом элементе и переключатель выглядел мёртвым */
.segmented-item input:focus-visible + span {
    outline: 2px solid var(--accent-hover);
    outline-offset: 2px;
}

/* ============================================================================
   Прогресс распознавания
   ============================================================================ */

.parse-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 0;
}

.parse-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
}

.parse-status {
    margin-left: auto;
    font-size: 12px;
}

/* ============================================================================
   Инлайн-инпуты в таблице предпросмотра
   ============================================================================ */

.preview-input {
    width: 100%;
    padding: 6px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    outline: none;
}

.preview-input:focus {
    border-color: var(--accent);
}

/* ============================================================================
   Огромная модалка (для предпросмотра распознавания)
   ============================================================================ */

.modal-content.modal-huge {
    max-width: 1400px;
    width: 95vw;
    max-height: 92vh;
}

/* ============================================================================
   Убираем стрелки у number-полей в таблице предпросмотра
   ============================================================================ */

.preview-input[type="number"]::-webkit-outer-spin-button,
.preview-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.preview-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ============================================================================
   Список инвойсов (PDF файлов) на карточке единицы
   ============================================================================ */

.invoice-files-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.invoice-file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
}

.invoice-file-item .file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================================
   Warning для года при расхождении с VIN (в предпросмотре Заказов)
   ============================================================================ */

.year-cell {
    position: relative;
}

.year-warning {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--warning);
    font-size: 14px;
    cursor: help;
    pointer-events: auto;
}

/* Номер инвойса: если PDF прикреплён — открывает его, иначе обычный текст */
.invoice-num {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-family: var(--font-mono);
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    cursor: pointer;
}

.invoice-num:hover { color: var(--accent-hover); }
.invoice-num:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.invoice-num-empty {
    color: inherit;
    text-decoration: none;
    cursor: default;
}

/* Подпись под полем модели: откуда взято название — с завода по VIN или
   из инвойса — и кнопка переключиться на второй вариант */
.vin-note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
}

.vin-note-ok { color: var(--success); white-space: nowrap; }
.vin-note-warn { color: var(--warning); white-space: nowrap; }

.vin-swap {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--text-muted);
    text-align: left;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: pointer;
}

.vin-swap:hover { color: var(--accent); }
.vin-swap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ============================================================================
   Метрики (карточки со сводными числами)
   ============================================================================ */

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.metric-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
}

.metric-card-highlight {
    border-color: var(--accent-dim);
    background: linear-gradient(180deg, var(--bg-secondary), var(--bg-tertiary));
}

.metric-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.metric-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}

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

/* ============================================================================
   Маскот Джерри на странице входа
   ============================================================================ */


/* ============================================================================
   Джерри в шапке приложения — маленький анимированный маскот
   ============================================================================ */

/* Компактный логотип в шапке — тот же Tenor Sans, что на входе,
   но в одну строку: MOUSE акцентом внимания + COMPANY вразрядку. */
.brand-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    line-height: 1;
}
.brand-logo .bl-big {
    font-family: 'Tenor Sans', var(--font-display);
    font-size: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary);
    transition: color 0.15s ease;
}
.brand-logo .bl-small {
    font-family: 'Tenor Sans', var(--font-display);
    font-size: 12px;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    text-transform: uppercase;
    color: var(--accent);
    transition: color 0.15s ease;
}
.brand-logo:hover .bl-big { color: var(--accent); }
.brand-logo:hover .bl-small { color: var(--accent-hover); }

/* ============================================================================
   Инфо-карточка AWB (Airbill) с кнопкой прикрепления файла
   ============================================================================ */

.info-card-awb .awb-file-controls {
    margin-top: 8px;
}

.awb-file-attached {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    flex-wrap: wrap;
}

.awb-file-attached > span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================================
   Слоты для файлов паспорта (лицевая/оборотная)
   ============================================================================ */

.passport-slot {
    border: 2px dashed var(--border-light);
    border-radius: 10px;
    padding: 20px;
    background: var(--bg-secondary);
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.passport-slot-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

.passport-slot-attached {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    font-size: 13px;
}

.passport-slot-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Подзаголовок секции в модалках */
.section-subheader {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-top: 20px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

/* ============================================================================
   Кликабельные ячейки в таблицах и инфо-панелях
   ============================================================================ */

.cell-link {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.cell-link:hover {
    border-bottom-color: var(--accent);
}

.cell-link-muted {
    color: var(--text-secondary);
}

.cell-link-muted:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ============================================================================
   Inline-редактирование инфо-карточек
   ============================================================================ */

.info-card.editable {
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.info-card.editable:hover {
    border-color: var(--accent);
    background: var(--bg-tertiary);
}

.info-card.editable:hover .info-label::after {
    content: ' ✎';
    color: var(--accent);
    font-size: 10px;
    opacity: 0.7;
}

/* Подтверждение сохранения при inline-редактировании.
   !important — потому что .info-card ниже по файлу задаёт фон и border
   через !important, из-за чего вспышка не отрисовывалась вовсе
   и правка сохранялась молча, без обратной связи. */
.info-card.editable.flash-saved {
    background: var(--success-tint) !important;
    box-shadow: var(--success) 0 0 0 1px inset !important;
}

.inline-edit {
    width: 100%;
    padding: 4px 6px;
    background: var(--bg-primary);
    border: 1px solid var(--accent);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
    outline: none;
}

.inline-edit[type="number"]::-webkit-outer-spin-button,
.inline-edit[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.inline-edit[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ============================================================================
   Kanban-доска партий на дашборде
   ============================================================================ */

.kanban-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
    overflow-x: auto;
}

.kanban-column {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.kanban-column-header {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
}

.kanban-column-icon {
    font-size: 16px;
}

.kanban-column-title {
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    font-size: 11px;
}

.kanban-column-count {
    border-radius: 999px;
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    color: var(--text-muted);
    min-width: 24px;
    text-align: center;
}

.kanban-column-body {
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 100px;
    transition: background 0.15s ease;
}

.kanban-column-body.drop-hover {
    background: var(--accent-dim);
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
    border-radius: 6px;
}

.kanban-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kanban-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.kanban-card.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

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

.kanban-card-code {
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.kanban-card-code:hover {
    text-decoration: underline;
}

.kanban-card-count {
    border-radius: 999px;
    background: var(--bg-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}

.kanban-card-supplier {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.kanban-card-consignee {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-card-awb {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    padding-top: 2px;
}

/* Частичная приёмка: партия приехала не целиком — видно прямо на карточке */
.kanban-card-reception {
    font-size: 11px;
    color: var(--warning);
    padding-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* На узких экранах — стек с горизонтальной прокруткой */
@media (max-width: 900px) {
    .kanban-board {
        grid-auto-flow: column;
        grid-auto-columns: minmax(220px, 260px);
        grid-template-columns: none;
        /* По умолчанию grid растягивает все колонки по высоте самой длинной —
           пустые колонки («Запланирована», «Подготовка») превращались в пустые
           прямоугольники на пол-экрана. Каждая колонка — по своему контенту. */
        align-items: start;
    }
}

/* ============================================================================
   Аватары физиков и пользователей
   ============================================================================ */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    font-weight: 700;
    letter-spacing: -0.5px;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.avatar-empty {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    box-shadow: none;
}

.consignee-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.consignee-inline .avatar {
    flex-shrink: 0;
}

.consignee-inline span:not(.avatar) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================================
   Метрики на дашборде — компактный блок над Kanban
   ============================================================================ */

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}

.dm-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
}

.dm-card-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* Значение метрики. Размер сжимается на узких экранах, чтобы длинные суммы
   («27 021 832 ₽») помещались в карточку целиком, а не переносились и не
   вылезали за её край. Сама сумма не разрывается: пробел перед знаком валюты
   неразрывный (см. formatRub на страницах). */
.dm-card-value {
    font-size: clamp(17px, 1.55vw, 24px);
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    white-space: nowrap;
}

.dm-card-sub {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Строки «подпись — сумма» под значением метрики (касса: обещанное и дивиденды).
   Сумма прижата вправо и не разрывается: иначе «₽» уезжал на следующую строку,
   а подпись со значением склеивались в сплошной текст. */
.dm-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
}

.dm-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.dm-line-label {
    color: var(--text-muted);
}

.dm-line-value {
    white-space: nowrap;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.dm-line-value-ok { color: var(--success); }
.dm-line-value-warn { color: var(--warning); }

/* Строка-кнопка: сумму можно раскрыть и посмотреть, из чего она сложилась.
   Кнопка, а не div — ради клавиатуры и нормальной тач-цели; отрицательные
   поля возвращают её к общей левой границе карточки. */
.dm-line-btn {
    width: calc(100% + 12px);
    margin: 0 -6px;
    padding: 4px 6px;
    background: none;
    border: none;
    border-radius: 8px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.dm-line-btn:hover,
.dm-line-btn:focus-visible {
    background: var(--glass-fill-strong);
}

/* На телефоне строка — единственная тач-цель в карточке, поэтому выше */
@media (max-width: 640px) {
    .dm-line-btn { padding: 8px 6px; }
}

.dm-line-btn .dm-line-label {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

/* Знак «?» у суммы — намёк, что это не просто цифра, а ссылка на разбор */
.dm-line-more {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--glass-fill-heavy);
    vertical-align: middle;
}

/* Сумма внутри текста, которую можно раскрыть (на кассе — «обещано N ₽») */
.link-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--warning);
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.link-btn:hover,
.link-btn:focus-visible { text-decoration-style: solid; }

/* Разбивка «обещано людям» в модалке */

/* Внутри модалки прокрутка уже есть у самой модалки — без этого таблицы
   получают вторую полосу прокрутки внутри первой (скролл в скролле) */
.obl-table { max-height: none; }

.obl-section-title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 18px 0 8px;
}

.obl-section-title:first-child { margin-top: 0; }

.obl-totals {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.obl-total-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-muted);
    font-size: 14px;
}

.obl-total-value {
    white-space: nowrap;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.obl-total-line:last-child {
    color: var(--text-primary);
    font-weight: 600;
}

.obl-total-value-warn {
    color: var(--warning);
    font-size: 18px;
}

/* Заголовок группы строк — в стиле остальных лейблов системы */
.dm-lines-group {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 8px;
    margin-bottom: 2px;
}

/* ============================================================================
   Цветные бэйджи партий
   ============================================================================ */

.shipment-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    color: white;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.02em;
    line-height: 1.4;
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    vertical-align: middle;
    text-decoration: none;
}

.shipment-badge:hover {
    filter: brightness(1.15);
}

.shipment-badge-sm {
    padding: 1px 6px;
    font-size: 11px;
}

.shipment-badge-lg {
    padding: 3px 10px;
    font-size: 14px;
}

.shipment-badge-empty {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    box-shadow: none;
}

/* Иконки типов техники */
.vehicle-icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    margin-right: 4px;
}

/* Название техники с иконкой типа. Длинные названия («Outlander MAX
   Backcountry 1000R Multicam Dark Camo 2026») переносятся на вторую строку —
   иначе ячейка распирает таблицу и появляется горизонтальная прокрутка.
   Иконка при переносе остаётся у первой строки и не сжимается. */
.vehicle-inline {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
    white-space: normal;
    overflow-wrap: break-word;
}

.vehicle-inline > .icon,
.vehicle-inline > svg,
.vehicle-inline > .vehicle-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

/* Колонка модели в детализациях: длинные названия («Outlander MAX Backcountry
   1000R Multicam Dark Camo 2026») распирали таблицу вбок и включали
   горизонтальную прокрутку. Обрезаем многоточием — полное название в title
   и на карточке единицы, куда ведёт клик по строке. */
.data-table td.col-model .vehicle-inline {
    display: flex;
    align-items: center;
    max-width: 100%;
}

.data-table td.col-model .vehicle-inline > span:not(.vehicle-icon) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* «Техника на складе»: шесть колонок в модалке. Раскладка фиксированная —
   при auto-layout проценты считаются от желаемой ширины таблицы, а не от
   контейнера, и таблица всё равно уезжает вбок. */
.data-table.table-instock {
    table-layout: fixed;
    width: 100%;
}

/* Ширины в процентах, в сумме ровно 100 — в пикселях сумма на пару единиц
   расходилась с контейнером и снизу вылезала полоса прокрутки */
.data-table.table-instock .col-model { width: 30%; }
.data-table.table-instock .col-inv { width: 9%; }
.data-table.table-instock .col-vin { width: 17%; }
.data-table.table-instock .col-ship { width: 7%; }
.data-table.table-instock .col-cost { width: 14%; }
.data-table.table-instock .col-rrp { width: 13%; }
.data-table.table-instock .col-margin { width: 10%; }

/* На телефоне под таблицу остаётся ~260px: модель ужимаем, а партию и
   себестоимость прячем совсем. Оба значения есть на карточке единицы,
   куда ведёт клик по строке. */
@media (max-width: 640px) {
    /* Модалка на телефоне отдаёт таблице каждый пиксель: без этого под
       название модели остаётся 100px и все строки выглядят как «BRP CA…» */
    .modal-content-wide { padding: 20px 12px; }
    .modal-content-wide .data-table th,
    .modal-content-wide .data-table td { padding-left: 8px; padding-right: 8px; }

    .data-table.table-instock .col-model { width: 45%; }
    /* В 130 пикселей многоточие оставляет «CAN-AM Outl…» у половины строк —
       на телефоне название переносим целиком, пусть строка станет выше */
    .data-table.table-instock td.col-model .vehicle-inline { align-items: flex-start; }
    .data-table.table-instock td.col-model .vehicle-inline > span:not(.vehicle-icon) {
        white-space: normal;
        overflow: visible;
        overflow-wrap: anywhere;
    }
    /* Номер инвойса короткий и полезнее VIN — на телефоне остаётся он */
    .data-table.table-instock .col-model { width: 40%; }
    .data-table.table-instock .col-inv { width: 16%; }
    .data-table.table-instock .col-rrp { width: 25%; }
    .data-table.table-instock .col-margin { width: 19%; }
    .data-table .col-ship,
    .data-table .col-cost {
        display: none;
    }
}

/* ============================================================================
   Индикатор маршрута партии
   ============================================================================ */

.route-indicator {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
    gap: 6px;
    overflow-x: auto;
}

.route-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 100px;
    padding: 0 4px;
    flex-shrink: 0;
}

.route-step-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border);
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.route-step-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    text-align: center;
}

.route-step-date {
    font-size: 10px;
    color: var(--text-muted);
}

.route-step.done .route-step-icon {
    background: var(--success);
    border-color: var(--success);
    color: white;
}
.route-step.done .route-step-label {
    color: var(--text-secondary);
}

.route-step.current .route-step-icon {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
    /* Было rgba(233,119,6,.3) — оранжевый остался от прежней темы
       и не читался как акцент. Теперь через переменную */
    box-shadow: 0 0 0 4px var(--accent-dim);
    animation: route-pulse 1.5s ease-in-out infinite;
}

.route-step.current .route-step-label {
    color: var(--accent);
}

@keyframes route-pulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--accent-dim); }
    50%      { box-shadow: 0 0 0 8px var(--accent-dim); }
}

.route-connector {
    flex: 1;
    height: 2px;
    background: var(--border);
    min-width: 20px;
    margin-bottom: 24px;
    transition: background 0.2s ease;
}

.route-connector.done {
    background: var(--success);
}

/* ============================================================================
   Компактный режим таблиц и списков
   ============================================================================ */

.density-toggle {
    font-size: 16px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.density-toggle:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

body.dense .data-table th,
body.dense .data-table td {
    padding: 6px 10px;
    font-size: 12px;
}

body.dense .kanban-card {
    padding: 6px 10px;
    gap: 2px;
}
body.dense .kanban-card-supplier,
body.dense .kanban-card-consignee { font-size: 11px; }
body.dense .kanban-card-awb { font-size: 10px; }

body.dense .info-card { padding: 8px 12px; }
body.dense .info-label { font-size: 10px; }
body.dense .info-value { font-size: 13px; }

body.dense .dm-card { padding: 10px 14px; }
body.dense .dm-card-value { font-size: 20px; }

body.dense .cards-grid { gap: 8px; }
body.dense .nav-card { padding: 12px 14px; }
body.dense .nav-card-icon { font-size: 20px; }
body.dense .nav-card-title { font-size: 13px; }
body.dense .nav-card-desc { font-size: 11px; }

/* ============================================================================
   Глобальный поиск (Ctrl+K)
   ============================================================================ */

.search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s ease;
}

.search-trigger:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.search-trigger kbd {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-family: inherit;
    color: var(--text-muted);
}

.search-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
}
.search-modal.open { display: block; }

.search-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
}

.search-container {
    position: relative;
    max-width: 640px;
    margin: 80px auto 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    max-height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
}

.search-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
}

.search-icon { font-size: 18px; }

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 16px;
    font-family: inherit;
}

.search-esc {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--text-muted);
    font-family: inherit;
}

.search-results {
    overflow-y: auto;
    max-height: calc(100vh - 260px);
}

.search-hint, .search-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    cursor: pointer;
    border-left: 3px solid transparent;
}

.search-item.selected {
    background: var(--bg-tertiary);
    border-left-color: var(--accent);
}

.search-item-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.search-item-body {
    flex: 1;
    overflow: hidden;
}

.search-item-title {
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-item-sub {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-item-kind {
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

/* ============================================================================
   Sparkline графики в метриках
   ============================================================================ */

.sparkline {
    display: block;
    margin-top: 6px;
    color: var(--accent);
}

/* График идёт отдельной строкой под суммой: рядом с длинными суммами
   («13 184 680 ₽») он не помещался и выдавливал знак валюты на новую строку */
.dm-card-value .sparkline-inline {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
}

/* ============================================================================
   Навигационные стрелки между партиями/единицами
   ============================================================================ */

.nav-arrows {
    display: inline-flex;
    gap: 4px;
    margin-left: 8px;
    vertical-align: middle;
}

.nav-arrow {
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s ease;
}

.nav-arrow:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: scale(1.05);
}

.nav-arrow.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================================
   Быстрая продажа (inline-форма на карточке единицы)
   ============================================================================ */

.quick-sell-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto auto;
    gap: 8px;
    padding: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    align-items: end;
    margin-top: 10px;
}

@media (max-width: 700px) {
    .quick-sell-form { grid-template-columns: 1fr; }
}

/* ============================================================================
   Фильтр периода на странице Финансы
   ============================================================================ */

.period-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.period-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.period-buttons {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.period-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.period-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.period-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.period-custom {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.period-custom input[type="date"] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-input);
    padding: 4px 8px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12px;
}

/* На телефоне две даты и кнопка в одну строку не встают: блок вылезал за
   правый край, и вся страница уезжала вбок. Переносим на следующую строку
   и растягиваем поля по ширине — попадать пальцем тоже проще. */
@media (max-width: 640px) {
    .period-custom {
        margin-left: 0;
        flex-wrap: wrap;
        width: 100%;
    }
    .period-custom input[type="date"] { flex: 1 1 120px; min-width: 0; }
    .period-custom .btn { flex: 1 1 100%; }
}

/* ============================================================================
   Блок прогноза
   ============================================================================ */

.forecast-block {
    background: linear-gradient(135deg, rgba(102, 58, 243, 0.08), rgba(102, 58, 243, 0.03));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.forecast-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.forecast-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--text-primary);
}

.forecast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.forecast-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
}

.forecast-card-highlight {
    border-color: var(--accent);
}

.forecast-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.forecast-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.forecast-sub {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* ============================================================================
   История изменений (audit-log) на карточке
   ============================================================================ */

.history-block {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-item);
    margin-top: 32px;
    overflow: hidden;
}

/* Полоса фильтров над таблицей: период, выпадающие списки и поиск в одной
   карточке, чтобы читались как один орган управления, а не как россыпь. */
.filters-block {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 14px 16px;
    margin-bottom: 16px;
}
.filters-block .period-bar { margin-bottom: 12px; }
.filters-block .filters { margin-bottom: 0; }

/* Итог по отобранному: сколько операций и на какие суммы. Остаток кассы сюда
   не попадает намеренно — он всегда считается по всем операциям. */
.filters-summary {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.filters-summary .fs-sep { color: var(--text-muted); }

.history-toggle {
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    transition: background 0.15s ease;
}

.history-toggle:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.history-chevron {
    margin-left: auto;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.history-list {
    max-height: 400px;
    overflow-y: auto;
    border-top: 1px solid var(--border);
}

.history-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.history-item {
    display: flex;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
}

.history-item:last-child { border-bottom: none; }

.history-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.history-body {
    flex: 1;
    min-width: 0;
}

.history-main {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
}

.history-old {
    color: var(--danger);
    text-decoration: line-through;
    opacity: 0.7;
}

.history-new {
    color: var(--success);
    font-weight: 600;
}

.history-notes {
    color: var(--text-muted);
    font-size: 12px;
}

.history-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Toolbar модалки (для кнопки "Скопировать из") */
.modal-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

/* ============================================================================
   ГТД — блок на карточке партии
   ============================================================================ */

.gtd-block {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 24px;
}

.gtd-empty {
    text-align: center;
    padding: 20px;
}

.gtd-empty p { margin: 0 0 12px 0; }

.gtd-file-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.gtd-file-info {
    flex: 1;
    font-size: 14px;
    min-width: 200px;
}

.gtd-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.gtd-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 12px;
    flex-wrap: wrap;
}

.gtd-buttons {
    margin-left: auto;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.gtd-report {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 16px;
}

@media (max-width: 700px) {
    .gtd-report { grid-template-columns: 1fr; }
}

.gtd-report-section {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 12px 14px;
}

.gtd-report-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.gtd-report-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    flex-wrap: wrap;
}

.gtd-vehicles-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gtd-vehicles-list li {
    font-size: 12px;
    padding: 4px 0;
    line-height: 1.4;
}

.gtd-ok { color: var(--text-primary); }
.gtd-mismatch { color: var(--danger); }
/* Цвет несёт сам значок, а не строка целиком: так «сошлось» видно с одного
   взгляда, а текст рядом остаётся обычным и читается спокойно */
.gtd-ok .gtd-check-icon { color: var(--success); }
.gtd-mismatch .gtd-check-icon { color: var(--danger); }

.gtd-alert {
    color: var(--danger);
    font-weight: 600;
}

.gtd-mismatches {
    list-style: disc;
    padding-left: 20px;
    margin: 6px 0 0 0;
    font-size: 11px;
    color: var(--danger);
}

/* Построчный статус сверки паспортных полей с ГТД.
   Показываем и совпадения тоже — иначе не отличить «сверено и сошлось»
   от «не сверялось, потому что поля не было». */
.gtd-checks {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gtd-check {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 11px;
    line-height: 1.5;
}

.gtd-check-icon {
    flex: 0 0 auto;
    width: 12px;
    text-align: center;
    font-weight: 600;
}

.gtd-check-label {
    flex: 0 0 auto;
    min-width: 96px;
    color: var(--text-secondary);
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gtd-check-detail {
    color: var(--text-primary);
    word-break: break-word;
}

.gtd-check-ok .gtd-check-icon { color: var(--success); }
.gtd-check-mismatch .gtd-check-icon { color: var(--danger); }
.gtd-check-mismatch .gtd-check-detail { color: var(--danger); }
/* warn — расхождение, на которое стоит взглянуть, но вердикт оно не роняет */
.gtd-check-warn .gtd-check-icon { color: var(--warning); }
.gtd-check-warn .gtd-check-detail { color: var(--warning); }
.gtd-check-absent .gtd-check-icon,
.gtd-check-absent .gtd-check-detail { color: var(--text-muted); }

.gtd-extra {
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

/* ============================================================================
   Тех паспорт — блок в карточке единицы
   ============================================================================ */

.tech-passport-ocr {
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

/* ============================================================================
   Причёсанные фильтры (селекты + поле поиска)
   ============================================================================ */

.filters-clean {
    display: grid;
    grid-template-columns: repeat(3, 200px) 1fr;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 20px;
    align-items: end;
}

.filters-clean .filter-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.filters-clean .filter-item label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0;
}

.filters-clean select {
    height: 36px;
    padding: 0 30px 0 12px;
    background: var(--bg-tertiary) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23888' d='M6 8L2 4h8z'/></svg>") no-repeat right 10px center;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.filters-clean select:hover {
    border-color: var(--accent);
}

.filters-clean select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.filter-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.filter-search-icon {
    position: absolute;
    left: 12px;
    font-size: 14px;
    color: var(--text-muted);
    pointer-events: none;
}

.filter-search-wrap input[type="search"] {
    width: 100%;
    height: 36px;
    padding: 0 36px 0 36px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.filter-search-wrap input[type="search"]::-webkit-search-decoration,
.filter-search-wrap input[type="search"]::-webkit-search-cancel-button,
.filter-search-wrap input[type="search"]::-webkit-search-results-button,
.filter-search-wrap input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

.filter-search-wrap input[type="search"]::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.filter-search-wrap input[type="search"]:hover {
    border-color: var(--accent);
}

.filter-search-wrap input[type="search"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.filter-search-clear {
    position: absolute;
    right: 8px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    transition: background 0.15s ease, color 0.15s ease;
}

.filter-search-clear:hover {
    background: var(--danger);
    color: white;
}

/* Мобильный: колонки в стек */
@media (max-width: 900px) {
    .filters-clean {
        grid-template-columns: 1fr 1fr;
    }
    .filters-clean .filter-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 500px) {
    .filters-clean {
        grid-template-columns: 1fr;
    }
}

/* Плотный режим */
body.dense .filters-clean { padding: 10px 12px; gap: 8px; }
body.dense .filters-clean select,
body.dense .filter-search-wrap input[type="search"] { height: 32px; font-size: 12px; }

/* Полупрозрачные акценты и dark-only тени для светлой темы */
body.light .kanban-column-body.drop-hover {
    background: var(--accent-dim);
    outline-color: var(--accent);
}
body.light .route-step.current .route-step-icon {
    box-shadow: 0 0 0 4px var(--accent-dim);
}
body.light .search-backdrop {
    background: rgba(20, 22, 34, 0.35);
}
body.light .forecast-block {
    background: linear-gradient(135deg, rgba(102, 58, 243, 0.06), rgba(102, 58, 243, 0.03));
}
body.light .filters-clean select:focus,
body.light .filter-search-wrap input[type="search"]:focus {
    box-shadow: 0 0 0 3px var(--accent-dim);
}
body.light .inline-edit {
    background: white;
}

/* Кнопка переключения темы */
.theme-toggle {
    font-size: 15px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}
.theme-toggle:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--accent);
}

/* ============================================================================
   AuthKit — унификация скруглений, теней, стеклянных поверхностей
   ============================================================================ */

/* Кнопки — pill 999px, стеклянный фон */
.btn,
button.btn-icon,
.btn-primary,
.btn-secondary,
.btn-danger,
.density-toggle,
.theme-toggle,
.search-trigger,
.period-btn {
    border-radius: 999px !important;
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: -0.14px;
    transition: all 0.15s ease;
}

.btn-primary {
    background: var(--accent) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 0 20px rgba(102, 58, 243, 0.25) !important;
}
.btn-primary:hover {
    background: var(--accent-hover) !important;
    box-shadow: 0 0 28px rgba(102, 58, 243, 0.4) !important;
}

.btn-secondary,
.btn-icon,
.density-toggle,
.theme-toggle,
.search-trigger,
.period-btn {
    background: var(--glass-fill-strong) !important;
    color: var(--text-primary) !important;
    border: none !important;
    box-shadow: var(--shadow-glass) !important;
}
.btn-secondary:hover,
.btn-icon:hover,
.density-toggle:hover,
.theme-toggle:hover,
.search-trigger:hover,
.period-btn:hover {
    background: var(--glass-fill-heavy) !important;
    box-shadow: var(--shadow-glass-strong) !important;
}
.period-btn.active {
    background: rgba(102, 58, 243, 0.2) !important;
    color: var(--accent) !important;
    box-shadow: rgba(102, 58, 243, 0.4) 0 0 0 1px inset !important;
}

.btn-danger {
    background: var(--danger-tint) !important;
    color: var(--danger) !important;
    border: none !important;
    box-shadow: var(--danger-tint-strong) 0 0 0 1px inset !important;
}
.btn-danger:hover {
    background: var(--danger-tint-strong) !important;
}

/* Карточки — 16px радиус, стеклянные */
.info-card,
.metric-card,
.dm-card,
.kanban-column,
.forecast-card,
.gtd-block,
.notes-block,
.history-block,
.table-wrapper,
.summary-card,
.sale-card,
.finance-summary,
.login-card {
    border-radius: 16px !important;
    background: var(--glass-fill) !important;
    box-shadow: var(--shadow-glass) !important;
    border: none !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.info-card.editable:hover {
    background: var(--glass-fill-strong) !important;
    box-shadow: var(--shadow-glass-strong) !important;
}

/* Kanban карточки поменьше — 12px */
.kanban-card {
    border-radius: 12px !important;
    background: var(--glass-fill-strong) !important;
    box-shadow: var(--shadow-glass) !important;
    border: none !important;
}
.kanban-card:hover {
    background: var(--glass-fill-heavy) !important;
    box-shadow: var(--shadow-glass-strong) !important;
    transform: translateY(-2px);
}

/* Модалки — 16px */
.modal-content {
    border-radius: 16px !important;
    background: rgba(5, 6, 15, 0.85) !important;
    box-shadow: var(--shadow-lg) !important;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: none !important;
}
body.light .modal-content {
    background: rgba(255, 255, 255, 0.95) !important;
}
.modal-backdrop {
    background: rgba(5, 6, 15, 0.7) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Поля ввода — 6px */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="search"],
select,
textarea,
.inline-edit {
    border-radius: 6px !important;
    /* background-color, а не background: сокращённая запись сбрасывала
       background-image и убивала стрелку выпадающего списка у select */
    background-color: var(--luminous-fill) !important;
    color: var(--text-primary) !important;
    border: none !important;
    box-shadow: var(--shadow-glass) !important;
    font-family: var(--font-body) !important;
    letter-spacing: -0.14px;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus,
.inline-edit:focus {
    /* Кольцо фокуса рисуем настоящим outline снаружи поля.
       Было: полупрозрачная внутренняя тень 1px — контраст к фону ~1.6:1
       при норме 3:1, с клавиатуры почти не видно, куда попал фокус. */
    outline: 2px solid var(--accent-hover) !important;
    outline-offset: 2px !important;
    box-shadow: rgba(102, 58, 243, 0.5) 0 0 0 1px inset !important;
}

/* Бэйджи — 6px */
.badge,
.shipment-badge,
.mock-badge {
    border-radius: 6px !important;
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.03em;
    font-size: 11px;
}

/* Приглушённая палитра для бэйджей партий — все с одинаковой тональностью */
.shipment-badge {
    background: rgba(102, 58, 243, 0.15) !important;
    color: var(--accent) !important;
    box-shadow: rgba(102, 58, 243, 0.3) 0 0 0 1px inset !important;
    text-shadow: none;
    font-weight: 600;
}

/* Аватары остаются цветными - для узнавания физиков */

/* Статусы */
.badge-success {
    background: var(--success-tint) !important;
    color: var(--success) !important;
    box-shadow: var(--success-tint-strong) 0 0 0 1px inset !important;
}
.badge-warning {
    background: var(--warning-tint) !important;
    color: var(--warning) !important;
    box-shadow: var(--warning-tint-strong) 0 0 0 1px inset !important;
}
.badge-info {
    background: rgba(102, 58, 243, 0.15) !important;
    color: var(--accent) !important;
    box-shadow: rgba(102, 58, 243, 0.3) 0 0 0 1px inset !important;
}
.badge-danger {
    background: var(--danger-tint) !important;
    color: var(--danger) !important;
    box-shadow: var(--danger-tint-strong) 0 0 0 1px inset !important;
}
.badge-muted {
    background: var(--luminous-fill) !important;
    color: var(--text-muted) !important;
    box-shadow: var(--shadow-glass) !important;
}

/* Хедер приложения — стеклянный, pill-round */
.app-header {
    background: var(--glass-fill-strong) !important;
    box-shadow: var(--shadow-glass) !important;
    border: none !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* Route indicator — стеклянный + фиолетовое свечение current stage */
.route-indicator {
    background: var(--glass-fill) !important;
    box-shadow: var(--shadow-glass) !important;
    border: none !important;
    border-radius: 16px !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
/* Этапы маршрута: кружок с обводкой на фоне карточки. Обводка, а не заливка —
   так видно и цвет статуса, и что этап это точка на линии пути. */
.route-step-icon {
    background: var(--card) !important;
    box-shadow: none !important;
    border: 2px solid var(--line) !important;
    color: var(--text-muted);
}
/* Пройденные шаги — спокойные, без свечения: светится только текущий,
   иначе взгляд не находит, где партия сейчас */
.route-step.done .route-step-icon {
    background: var(--success-tint) !important;
    border-color: var(--success) !important;
    color: var(--success) !important;
    box-shadow: none !important;
}
.route-step.current .route-step-icon {
    background: var(--accent-tint) !important;
    border-color: var(--accent) !important;
    color: var(--accent-d) !important;
    box-shadow: 0 0 0 5px var(--accent-tint) !important;
}
.route-connector { background: var(--border) !important; }
.route-connector.done {
    background: var(--success-tint-strong) !important;
}

/* Метрики - без хардкода правил */
.dm-card-highlight,
.metric-card-highlight,
.forecast-card-highlight {
    box-shadow: rgba(102, 58, 243, 0.3) 0 0 0 1px inset,
                rgba(102, 58, 243, 0.15) 0 0 40px 0 inset !important;
}

/* Прогноз-блок — стеклянный + внутренний фиолетовый glow */
.forecast-block {
    background: linear-gradient(135deg, rgba(102, 58, 243, 0.08), rgba(102, 58, 243, 0.03)) !important;
    box-shadow: rgba(102, 58, 243, 0.15) 0 0 0 1px inset !important;
    border-radius: 16px !important;
    border: none !important;
}

/* Таблицы */
.data-table,
table {
    background: var(--glass-fill) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-glass) !important;
    border: none !important;
    /* overflow здесь не ставим: он ломает залипание шапки таблицы при
       прокрутке длинного списка. Углы обрезает .table-wrapper. */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.data-table thead,
table thead {
    background: var(--luminous-fill) !important;
}
.data-table th,
table th {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--border) !important;
}
.data-table td,
table td {
    border-bottom: 1px solid var(--border) !important;
}
.data-table tr:last-child td,
table tr:last-child td {
    border-bottom: none !important;
}
.clickable-row:hover {
    background: var(--glass-fill-strong) !important;
}

/* Labels в стиле mono eyebrow */
.info-label,
.metric-label,
.dm-card-label,
.forecast-label,
.kanban-column-title,
.filter-item label,
.filters-clean label,
.filter-search-icon,
.section-title,
.period-label,
.form-group label {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
}

/* Значения в карточках белые крупнее */
.info-value {
    color: var(--text-primary);
    font-weight: 500;
    letter-spacing: -0.14px;
}

/* Kanban колонки */
.kanban-column-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border) !important;
}

/* Модалка глобального поиска */
.search-container {
    background: rgba(5, 6, 15, 0.85) !important;
    box-shadow: var(--shadow-lg) !important;
    border: none !important;
    border-radius: 16px !important;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}
body.light .search-container {
    background: rgba(255, 255, 255, 0.95) !important;
}
.search-input {
    background: transparent !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}
.search-item {
    border-left-color: transparent !important;
}
.search-item.selected {
    background: var(--glass-fill-heavy) !important;
    border-left-color: var(--accent) !important;
}

/* Фильтры clean — стеклянный контейнер */
.filters-clean {
    background: var(--glass-fill) !important;
    box-shadow: var(--shadow-glass) !important;
    border: none !important;
    border-radius: 16px !important;
}

/* История - каждая запись */
.history-item {
    border-bottom-color: var(--border) !important;
}

/* Ссылки */
a, .cell-link {
    color: var(--accent) !important;
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover, .cell-link:hover {
    color: var(--accent-hover) !important;
}

/* Периодная панель */
.period-bar {
    background: var(--glass-fill) !important;
    box-shadow: var(--shadow-glass) !important;
    border: none !important;
    border-radius: 16px !important;
}

/* Заказы — фильтры (страницы кроме Финансов) */
.filters {
    background: var(--glass-fill) !important;
    box-shadow: var(--shadow-glass) !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 14px 16px;
}

/* Nav карточки на дашборде */
.nav-card {
    background: var(--glass-fill) !important;
    box-shadow: var(--shadow-glass) !important;
    border: none !important;
    border-radius: 16px !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.15s ease;
}
.nav-card:hover {
    background: var(--glass-fill-strong) !important;
    box-shadow: var(--shadow-glass-strong) !important;
    transform: translateY(-2px);
}

/* Empty state */
.empty-state {
    background: var(--glass-fill) !important;
    box-shadow: var(--shadow-glass) !important;
    border: none !important;
    border-radius: 16px !important;
}

/* Alert */
.alert {
    border-radius: 12px !important;
    border: none !important;
}
.alert-success {
    background: var(--success-tint) !important;
    color: var(--success) !important;
    box-shadow: var(--success-tint-strong) 0 0 0 1px inset !important;
}
.alert-error, .alert-danger {
    background: var(--danger-tint) !important;
    color: var(--danger) !important;
    box-shadow: var(--danger-tint-strong) 0 0 0 1px inset !important;
}

/* Убираем backdrop-blur в лайт-теме, где он делает всё замыленным */
body.light .info-card,
body.light .metric-card,
body.light .dm-card,
body.light .kanban-column,
body.light .kanban-card,
body.light .forecast-card,
body.light .gtd-block,
body.light .history-block,
body.light .app-header,
body.light .route-indicator,
body.light .filters-clean,
body.light .filters,
body.light .period-bar,
body.light .nav-card,
body.light .empty-state,
body.light .data-table,
body.light table {
    background: var(--bg-secondary) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Кнопки на светлой теме — понятные */
body.light .btn-secondary,
body.light .btn-icon,
body.light .density-toggle,
body.light .theme-toggle,
body.light .search-trigger,
body.light .period-btn {
    background: white !important;
    color: var(--text-primary) !important;
}

/* Brand — display шрифт */
.brand a, .brand {
    font-family: var(--font-display);
    font-weight: 500;
}

/* Заголовки страниц побольше и с display шрифтом */
.page-header h2 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
}

/* ============================================================================
   Виджет "Требует внимания" на дашборде
   ============================================================================ */

.attention-block {
    background: linear-gradient(135deg, var(--warning-tint), var(--danger-tint)) !important;
    box-shadow: var(--warning-tint-strong) 0 0 0 1px inset !important;
    border-radius: 16px !important;
    padding: 20px 24px;
    margin-bottom: 24px;
}

.attention-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.attention-header h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 18px;
    color: var(--text-primary);
    flex: 1;
}

.attention-icon {
    font-size: 20px;
    color: var(--warning);
}

.attention-count {
    background: var(--warning-tint-strong);
    color: var(--warning);
    box-shadow: var(--warning-tint-strong) 0 0 0 1px inset;
    padding: 2px 10px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
}

.attention-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.attention-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--glass-fill) !important;
    box-shadow: var(--shadow-glass) !important;
    border-radius: 10px !important;
    color: var(--text-primary) !important;
    text-decoration: none;
    transition: all 0.15s ease;
    font-size: 13px;
}

.attention-item:hover {
    background: var(--glass-fill-strong) !important;
    transform: translateX(4px);
}

.attention-item-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.attention-item-text {
    flex: 1;
    color: var(--text-primary) !important;
}

.attention-item-arrow {
    color: var(--text-muted);
    font-size: 16px;
    flex-shrink: 0;
}

.attention-item:hover .attention-item-arrow {
    color: var(--accent);
}

body.light .attention-block {
    background: linear-gradient(135deg, rgba(202, 138, 4, 0.06), rgba(220, 38, 38, 0.03)) !important;
    box-shadow: rgba(202, 138, 4, 0.30) 0 0 0 1px inset !important;
}

/* ============================================================================
   PWA — баннер установки
   ============================================================================ */

.pwa-install-banner {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(5, 6, 15, 0.9);
    box-shadow: rgba(102, 58, 243, 0.4) 0 0 0 1px inset,
                rgba(0, 0, 0, 0.4) 0 8px 24px 0;
    border-radius: 999px !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    animation: slideInPwa 0.3s ease;
    max-width: calc(100vw - 32px);
}

@keyframes slideInPwa {
    from { transform: translateY(100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.pwa-install-banner img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pwa-install-banner-text {
    line-height: 1.3;
    min-width: 0;
}

.pwa-install-banner-title {
    font-weight: 500;
    color: var(--text-primary);
}

.pwa-install-banner-sub {
    font-size: 11px;
    color: var(--text-muted);
}

.pwa-install-banner-install {
    background: var(--accent) !important;
    color: white !important;
    border: none !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer;
    flex-shrink: 0;
}

.pwa-install-banner-close {
    background: transparent !important;
    color: var(--text-muted) !important;
    border: none !important;
    padding: 4px 8px !important;
    cursor: pointer;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: none !important;
}

body.light .pwa-install-banner {
    background: rgba(255, 255, 255, 0.95);
}

@media (max-width: 500px) {
    .pwa-install-banner {
        bottom: 8px;
        right: 8px;
        left: 8px;
    }
}

/* ============================================================================
   Доступность: системная настройка «меньше движения»
   ============================================================================
   В системе 5 анимаций (пульс текущего шага маршрута, всплытие уведомления
   и т.д.). Если пользователь отключил анимации на уровне ОС — уважаем это. */

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

/* ============================================================================
   Сортировка таблиц по клику на заголовок
   ============================================================================
   Логика в supabase-client.js → initTableSort(). Класс .sortable вешается
   только на колонки без кнопок — «Действия» кликабельными не становятся. */

.data-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 24px !important;
    transition: color 0.12s ease;
}

.data-table th.sortable:hover {
    color: var(--text-secondary) !important;
}

/* Нейтральная стрелка — подсказка, что колонку можно сортировать */
.data-table th.sortable::after {
    content: '↕';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    opacity: 0.3;
}

.data-table th.sortable:hover::after {
    opacity: 0.65;
}

/* Активная колонка — направление и цвет акцента */
.data-table th.sortable[data-sort-dir]::after {
    opacity: 1;
    color: var(--accent);
}
.data-table th.sortable[data-sort-dir="asc"]::after  { content: '↑'; }
.data-table th.sortable[data-sort-dir="desc"]::after { content: '↓'; }

.data-table th.sortable[data-sort-dir] {
    color: var(--text-secondary) !important;
}

/* Заголовок получает фокус с клавиатуры — сортировка доступна без мыши */
.data-table th.sortable:focus-visible {
    outline: 2px solid var(--accent-hover);
    outline-offset: -2px;
    border-radius: 4px;
}

/* Рублёвая подпись под долларовой суммой в таблице смет партии */
.cost-rub {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.cost-rub-empty {
    color: var(--text-muted);
    font-style: italic;
}

/* ============================================================================
   Редизайн Главной (эталон mouse-dashboard-redesign.html)
   Композиция: касса-герой + два финансовых KPI со спарклайнами, ровный ряд
   плиток, воронка партий, объявления, операционка. Всё на токенах — светлая
   и тёмная темы получаются без отдельных оверрайдов.
   ============================================================================ */

/* Полоса «Требует внимания» — чипы проблем сразу под шапкой. Показывается
   только когда есть о чём предупредить. */
.attn-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 6px;
    margin-bottom: 16px;
    scrollbar-width: none;
}
.attn-bar::-webkit-scrollbar { display: none; }

.attn-lead {
    flex: 0 0 auto;
    font: 700 11px var(--font);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.attn-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 999px;
    padding: 7px 12px;
    font-weight: 700;
    font-size: 12px;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.attn-chip:hover { border-color: var(--accent); }

.attn-chip .n {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    color: #fff;
    display: inline-grid;
    place-items: center;
    font-size: 11px;
}
.attn-chip.warn { background: var(--warning-tint); border-color: var(--warning-tint-strong); color: var(--warning); }
.attn-chip.warn .n { background: var(--warning); }
.attn-chip.danger { background: var(--danger-tint); border-color: var(--danger-tint-strong); color: var(--danger); }
.attn-chip.danger .n { background: var(--danger); }

/* Верхний блок: касса шире, два KPI равными */
.overview {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.dcard {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.dcap {
    font: 700 10.5px var(--font);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 7px;
}
.dcap .icon { color: var(--accent); }

/* Касса — единственная акцентная карточка на экране */
.cash-hero {
    padding: 20px;
    background: linear-gradient(180deg, var(--accent-tint), var(--card));
    border-color: var(--accent-tint2);
    cursor: pointer;
}
.cash-hero .dcap { color: var(--accent-d); }
.cash-hero-value {
    font-size: clamp(22px, 2.4vw, 34px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 8px 0 2px;
    white-space: nowrap;
}
.cash-hero-sub { color: var(--muted); font-size: 12px; }
.cash-rows {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.cash-row {
    background: var(--bg-primary);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
}
.cash-row .k {
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cash-row .v {
    font-size: clamp(13px, 1.1vw, 16px);
    font-weight: 800;
    margin-top: 4px;
    white-space: nowrap;
    /* Цвет обязателен: строка кассы — это <button>, а кнопка не наследует цвет
       страницы, у неё свой чёрный по умолчанию. Без этой строки «Уже выведено»
       и «Вложено в непроданное» рисовались чёрным по тёмному фону. Цветные
       варианты ниже не страдали — они цвет задают сами. */
    color: var(--ink);
}
.cash-row .v.pos { color: var(--success); }
.cash-row .v.warn { color: var(--warning); }

/* Полоса выделенного в «Заказах поставщику»: сумма отмеченного и оплата */
.select-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding: 14px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--accent);
    background: var(--accent-dim);
}
.select-bar-sum {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.select-bar-cap {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.select-bar-value {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 800;
    color: var(--ink);
}

/* Строка «оплатил размещение» под таблицей долгов */
.obl-add-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0 4px;
    font-size: 12px;
}

/* Ввод суммы выплаты прямо в строке долга — вместо системного prompt(),
   который браузер глушит после нескольких диалогов подряд */
.pay-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.pay-input {
    width: 92px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--accent);
    background: var(--bg-primary);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 13px;
    text-align: right;
}
.pay-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-tint);
}

/* Значок «?» с пояснением показателя.
   Это <span>, а не <button>: значок стоит внутри кликабельных плиток, которые
   сами являются кнопками, а кнопку в кнопку вкладывать нельзя — браузер рвёт
   разметку при разборе, и карточка кассы рассыпается. */
.hint-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    user-select: none;
    vertical-align: middle;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.hint-btn:hover,
.hint-btn:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
}

.hint-pop {
    position: absolute;
    z-index: 120;
    width: min(340px, calc(100vw - 24px));
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--bg-tertiary);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
}
.hint-pop-title {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}
.hint-pop-body b { color: var(--ink); }
.hint-pop-body code {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent);
}
.hint-pop-body p { margin: 0 0 8px; }
.hint-pop-body p:last-child { margin-bottom: 0; }
.hint-pop-body .hint-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    border-bottom: 1px dashed var(--line);
}
.hint-pop-body .hint-row:last-of-type { border-bottom: none; }
.hint-pop-body .hint-row b { white-space: nowrap; }

/* На телефоне пояснение с формулой и так во всю ширину экрана: строку
   «что считаем — как считаем» разворачиваем в две, иначе левая половина
   переносится, а правая висит одна и читается как отдельная мысль. */
@media (max-width: 520px) {
    .hint-pop-body .hint-row {
        flex-direction: column;
        gap: 2px;
    }
    .hint-pop-body .hint-row b { padding-left: 10px; }
}

/* KPI со спарклайном на всю ширину карточки */
.dkpi {
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    min-height: 148px;
    cursor: pointer;
}
.dkpi-value {
    font-size: clamp(19px, 2vw, 30px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-top: 8px;
    line-height: 1;
    white-space: nowrap;
}
.dkpi-sub { color: var(--muted); font-size: 12px; margin-top: 8px; }
.dkpi .spark-wide {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46px;
    pointer-events: none;
}
.dkpi .spark-wide svg { width: 100%; height: 100%; display: block; }

.delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 999px;
}
.delta.up { color: var(--success); background: var(--success-tint); }
.delta.down { color: var(--danger); background: var(--danger-tint); }

/* Ровный ряд плиток — без «сиротского» хвоста в одну карточку */
.dtiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.dtile { padding: 16px 18px; cursor: pointer; }
.dtile-value {
    font-size: clamp(18px, 1.7vw, 24px);
    font-weight: 800;
    margin-top: 6px;
    white-space: nowrap;
}
.dtile-sub { color: var(--muted); font-size: 12px; margin-top: 6px; }
.dtile-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--line);
    margin-top: 10px;
    overflow: hidden;
}
.dtile-bar > i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
}

/* Заголовок секции: иконка + название + приглушённая подсказка */
.sec-h {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 30px 2px 14px;
    font-weight: 800;
    font-size: 15px;
}
.sec-h .icon { color: var(--accent); }
.sec-h .hint {
    font: 700 10.5px var(--font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Воронка партий: пять колонок, пустые — с пунктирной плашкой */
.pipe {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.pipe-col {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-block);
    display: flex;
    flex-direction: column;
    min-height: 210px;
    overflow: hidden;
}
.pipe-col.drag-over {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint2);
}
.pipe-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    font-weight: 700;
    font-size: 12.5px;
}
.pipe-head .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pipe-head .n {
    margin-left: auto;
    font-weight: 800;
    background: var(--bg-primary);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 12px;
    color: var(--muted);
}
.pipe-col.has-items .pipe-head .n { background: var(--accent-tint); color: var(--accent-d); }
.pipe-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.pipe-empty {
    margin: auto;
    width: 100%;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
    padding: 16px;
    border: 1px dashed var(--line);
    border-radius: 10px;
}

/* Карточка партии в воронке */
.pcard {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 11px;
    background: var(--card);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.pcard:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: var(--accent-tint2);
}
.pcard.dragging { opacity: 0.45; }
.pcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pcard-units { font-size: 11px; color: var(--muted); font-weight: 700; }
.pcard-name { font-weight: 800; font-size: 13.5px; margin-top: 9px; }
.pcard-cust {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    font-size: 12px;
    color: var(--muted);
}
.pcard-awb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    font: 600 11.5px var(--font-mono);
    color: var(--muted);
}

/* Ссылка на объявление Авито: чип с фавиконом + кнопка перехода */
.linkchip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: var(--radius-item);
    padding: 6px 10px;
    font-size: 12px;
    color: var(--ink);
    text-decoration: none;
    background: var(--card);
    max-width: 230px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.linkchip:hover { border-color: var(--accent); }
.linkchip .fav {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: var(--success);
    flex: 0 0 auto;
}
.addlink {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-item);
    padding: 7px 12px;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
    background: none;
    font-family: inherit;
}
.addlink:hover { border-color: var(--accent); color: var(--ink); }

/* Операционка — четыре быстрых перехода */
.ops-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.op-card {
    padding: 18px;
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.op-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: var(--accent-tint2);
}
.op-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--accent-tint);
    color: var(--accent-d);
    display: grid;
    place-items: center;
    margin-bottom: 12px;
}
.op-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--accent-tint);
    color: var(--accent-d);
    font-weight: 800;
    font-size: 12px;
    border-radius: 999px;
    padding: 3px 10px;
}
.op-title { font-weight: 800; font-size: 15px; }
.op-desc { color: var(--muted); font-size: 12.5px; margin-top: 4px; }

/* Планшет: воронка и плитки уже, касса на всю ширину */
@media (max-width: 1100px) {
    .overview { grid-template-columns: 1fr 1fr; }
    .cash-hero { grid-column: 1 / -1; }
    .pipe { grid-template-columns: repeat(3, 1fr); }
    .ops-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    .overview { grid-template-columns: 1fr; }
    .dtiles { grid-template-columns: 1fr 1fr; }
    .pipe { grid-template-columns: 1fr; }
    .pipe-col { min-height: 0; }
    .pipe-col.is-empty { display: none; }
    .ops-grid { grid-template-columns: 1fr 1fr; }
    .dkpi { min-height: 120px; }
}

/* Знак вопроса у «Обещано людям» — подсказка, из чего сложилась сумма */
.hint-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--line);
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    display: inline-grid;
    place-items: center;
    cursor: help;
    flex-shrink: 0;
}

/* Внутри модалки вертикально скроллится сама модалка. Своя полоса у таблицы
   давала две прокрутки рядом: пользователь тянет одну, а список стоит. */
.modal-content .table-wrapper {
    max-height: none;
    overflow-y: visible;
    overflow-x: auto;
}

/* Плитки в карточке кассы кликабельны: у каждой цифры есть расчёт */
.cash-row {
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.1s ease;
    text-align: left;
    width: 100%;
    font-family: inherit;
    position: relative;
}
.cash-row:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
/* Стрелка вынута из потока: невидимая, она всё равно занимала место в подписи,
   и «Вложено в непроданное» вместе со значком «?» переставало влезать в строку —
   подпись переносилась, а плитка становилась выше соседних. */
.cash-row .k::after {
    content: "→";
    position: absolute;
    right: 13px;
    top: 11px;
    opacity: 0;
    transition: opacity 0.15s ease;
    font-weight: 700;
}
.cash-row:hover .k::after { opacity: 0.6; }

/* Модалка: экономим высоту, чтобы список влезал на ноутбуке целиком,
   а не прятался за прокруткой */
.modal-content {
    padding: 24px;
    max-height: 92vh;
}

/* Широкие модалки-детализации: заголовок и кнопки стоят на месте, прокручивается
   только содержимое. Раньше прокручивалось окно целиком — на длинном списке
   («Обещано людям» с тремя таблицами) заголовок уезжал за верхний край экрана,
   а кнопка «Закрыть» пряталась внизу, и было непонятно, что вообще открыто. */
.modal-content-wide {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-content-wide > h3,
.modal-content-wide > .modal-actions {
    flex: none;
}
.modal-content-wide > .modal-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    /* без этого flex-элемент не даёт себя сжать и прокрутка не включается */
    min-height: 0;
    margin: 0 -4px;
    padding: 0 4px;
}
.modal-content h3 {
    font-size: 17px;
    margin-bottom: 14px;
}
.modal-content .data-table td { padding: 9px 14px; }
.modal-content .data-table th { padding: 9px 14px; }
.modal-content .modal-actions { margin-top: 14px; }

/* Расчёт «откуда взялась цифра»: строки «из чего» и итог под чертой */
.calc-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}
.calc-row:last-child { border-bottom: none; }
.calc-row .lbl { color: var(--muted); font-size: 13px; }
.calc-row .val { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-total {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 2px solid var(--line);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    font-size: 15px;
    font-weight: 800;
}
.calc-total .val { color: var(--accent-d); white-space: nowrap; }
.calc-note { color: var(--muted); font-size: 12.5px; margin-top: 10px; line-height: 1.5; }

/* ============================================================================
   Вход — единственный экран без шапки (макет mouse-login.html)
   ============================================================================ */

/* Мягкое брендовое свечение по углам: экран не должен быть пустым полотном */
.login-wrapper {
    /* колонка — под карточкой стоит подпись, в строку они встали бы рядом */
    flex-direction: column;
    background-image:
        radial-gradient(700px 380px at 15% 0%, var(--accent-dim), transparent 60%),
        radial-gradient(600px 400px at 100% 100%, var(--accent-dim), transparent 55%);
}

.login-card {
    border-radius: var(--radius-card);
    padding: 32px 28px;
}

.login-card .form-group label {
    font: 700 11px var(--font);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.login-card .form-group input {
    padding: 13px 14px;
    border-radius: 12px;
    background: var(--card);
    font-weight: 500;
    font-size: 14.5px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-card .form-group input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-tint);
}

.login-card .btn-block {
    border-radius: 12px;
    padding: 14px;
    font-size: 15px;
    margin-top: 4px;
}

/* Подпись под карточкой — чтобы низ экрана не обрывался пустотой */
.login-foot {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    margin-top: 18px;
}
.login-foot b { color: var(--ink); font-weight: 700; }

/* ============================================================================
   Карточка партии — эталон внутренних страниц (макет mouse-shipment-card.html)
   ============================================================================ */

.route-indicator {
    border-radius: var(--radius);
    padding: 22px 26px;
}

/* Кружки этапов крупнее; линии между ними рисует .route-connector из разметки */
.route-step { position: relative; min-width: 110px; }

.route-step-icon {
    width: 44px;
    height: 44px;
    background: var(--card);
    border: 2px solid var(--line);
    position: relative;
    z-index: 2;
}

/* Пройденный этап — зелёным контуром, а не заливкой: заливка притягивала
   взгляд к прошлому, хотя важнее, где партия сейчас */
.route-step.done .route-step-icon {
    background: var(--success-tint);
    border-color: var(--success);
    color: var(--success);
}
.route-step.current .route-step-icon {
    background: var(--accent-tint);
    border-color: var(--accent);
    color: var(--accent-d);
    box-shadow: 0 0 0 5px var(--accent-tint);
}
.route-step.current .route-step-label { color: var(--accent-d); }

/* Финансы партии: ровная сетка без сиротского хвоста */
.summary-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.summary-card {
    border-radius: var(--radius-sm);
    padding: 15px 16px;
}
.summary-label {
    font: 700 10.5px var(--font);
    letter-spacing: 0.09em;
}
.summary-value {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
/* Прогноз прибыли — единственная акцентная карточка блока */
.summary-card-accent {
    border-color: var(--accent-tint2);
    background: linear-gradient(180deg, var(--accent-tint), var(--card));
}
.summary-card-accent .summary-value { color: var(--accent-d); }

/* Параметры партии карточками одного вида с остальными */
.info-card {
    border-radius: var(--radius-sm);
    padding: 14px 15px;
}
.info-label {
    font: 700 10.5px var(--font);
    letter-spacing: 0.09em;
}

@media (max-width: 1100px) {
    .summary-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .summary-grid { grid-template-columns: 1fr 1fr; }
    .route-step { min-width: 92px; }
    .route-step:not(:last-child)::after { display: none; }
}

/* ============================================================================
   Общий вид страниц-списков: Партии, Заказы, Касса, Платежи, справочники
   ============================================================================ */

/* Шапка страницы: заголовок слева, действия справа одной линией */
.page-header h2 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* Панель фильтров — одна карточка, а не набор разрозненных полей */
.filters,
.filters-clean {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    align-items: flex-end;
}

.filter-item label,
.filters label {
    font: 700 10.5px var(--font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Поля и селекты фильтров: одинаковые скругления и акцентное кольцо фокуса */
.filters select,
.filters input,
.filters-clean select,
.filters-clean input,
.period-bar select,
.period-bar input {
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.filters select:focus,
.filters input:focus,
.filters-clean select:focus,
.filters-clean input:focus,
.period-bar select:focus,
.period-bar input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
    outline: none;
}

.period-bar { border-radius: var(--radius); }

/* Заголовки таблиц — мелким капсом; шапка залипает при прокрутке списка */
.data-table th {
    font: 700 10.5px var(--font) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}
.table-wrapper { border-radius: var(--radius); }

/* Строки, ведущие в карточку, подсвечиваются целиком одним тоном.
   !important — потому что фон ячеек задают и старые правила строки, и
   закреплённая колонка: без него подсветка ложилась двумя разными цветами. */
.clickable-row { cursor: pointer; }
.data-table tbody tr:hover td { background: var(--row-hover) !important; }
/* Закреплённая колонка должна оставаться непрозрачной, иначе сквозь неё
   просвечивают уезжающие вбок ячейки */
.finance-table tbody tr:hover td:first-child { background: var(--bg-tertiary) !important; }

/* ============================================================================
   Финансы: ровная сетка метрик + широкая таблица с закреплённой колонкой
   ============================================================================ */

/* Семь метрик в авто-сетке давали ряд 4 + сиротский ряд 3 (или 5 + 2).
   Фиксируем четыре в ряд: 4 + 3 читается как таблица, а не как обрывок. */
.metrics-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.metric-card {
    border-radius: var(--radius-sm);
    padding: 15px 16px;
}
/* Выделенные метрики (Чистая прибыль, Ожидаемая прибыль) — акцентом */
.metric-card-highlight {
    border-color: var(--accent-tint2) !important;
    background: linear-gradient(180deg, var(--accent-tint), var(--card)) !important;
}

/* Широкая таблица по единицам: первая колонка (партия) остаётся на месте при
   горизонтальной прокрутке — иначе, уехав вправо, не понять, чья это строка */
.finance-table th:first-child,
.finance-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--bg-secondary);
}
.finance-table thead th:first-child { z-index: 4; }
.finance-table tbody tr:hover td:first-child { background: var(--bg-tertiary); }

@media (max-width: 1100px) {
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .metrics-grid { grid-template-columns: 1fr 1fr; }
}

/* На телефоне таблица не должна скроллиться отдельно от страницы: две
   вертикальные прокрутки рядом — палец тянет одну, а список стоит. */
@media (max-width: 640px) {
    .table-wrapper {
        max-height: none;
        overflow-y: visible;
    }
}

/* Поле правки РРЦ прямо в списке склада */
.rrp-input {
    width: 118px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 9px;
    font: 700 12.5px var(--font-mono);
    text-align: right;
    color: var(--ink);
    background: var(--card);
    font-variant-numeric: tabular-nums;
}
.rrp-input::placeholder { color: var(--muted); font-weight: 500; }
.rrp-input:hover { border-color: var(--accent-tint2); }
.rrp-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}
.rrp-input:disabled { opacity: 0.5; }


/* Название техники не сжимается в колонку шириной в слово: при десятке колонок
   таблица отбирала у модели всё место, и «Defender Limited HD11 Color: Tan»
   вставало в семь строк. */
/* Ширину держит сама ячейка, а не обёртка внутри неё. При box-sizing:
   border-box отступы ячейки (16px + 16px) входят в эти 190px; если то же
   ограничение повесить на внутренний <span>, колонка становится шире
   на величину отступов — и таблица уезжает за край с прокруткой вбок. */
.data-table td.vehicle-inline,
.data-table td:has(> .vehicle-inline) { min-width: 190px; }
@media (max-width: 900px) {
    .data-table td.vehicle-inline,
    .data-table td:has(> .vehicle-inline) { min-width: 140px; }
}

/* Пустая колонка воронки не должна занимать экран: высота под содержимое,
   плашка «Нет партий» компактная */
.pipe-col { min-height: 0; }
.pipe-col.has-items { min-height: 210px; }
.pipe-col.is-empty .pipe-body { padding: 10px; }
.pipe-empty { padding: 10px; margin: 0; }

/* KPI со спарклайном: карточка ниже, график тоньше — середина не пустует */
.dkpi { min-height: 124px; }
.dkpi .spark-wide { height: 38px; }

/* Вход по макету: плашка-логотип над карточкой, поля с иконками */
.login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.login-mark {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-block);
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    display: grid;
    place-items: center;
    color: var(--on-accent);
    font: 800 20px var(--font);
    box-shadow: 0 10px 24px rgba(102, 58, 243, 0.4);
}
.login-brand-name {
    font: 800 18px var(--font);
    letter-spacing: 0.02em;
    color: var(--ink);
}
.login-brand-name span { color: var(--accent); }

.login-card h1 {
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 4px;
}
.login-card .subtitle {
    color: var(--muted);
    font-size: 13px;
    text-align: center;
    margin-bottom: 22px;
}

/* Поле с иконкой справа: у пароля это кнопка «показать» */
.login-field { position: relative; }
.login-field input { padding-right: 44px !important; }
.login-field-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    background: none;
    border: none;
    padding: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    line-height: 0;
}
button.login-field-icon:hover { color: var(--accent); }

.login-row {
    display: flex;
    justify-content: flex-end;
    margin: 6px 0 18px;
}

/* Счётчик единиц в таблице Авито — бейджем, как в эталоне макета */
.u-badge {
    display: inline-block;
    background: var(--bg-primary);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 3px 9px;
    font-weight: 800;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Главная и шапка ближе к эталону: липкая полупрозрачная панель, активный
   пункт — пилюля, действия справа одной группой
   ============================================================================ */
.app-header {
    position: sticky;
    top: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
/* Фон шапки задаётся ниже одним правилом на обе темы — здесь его больше нет:
   раньше тут стояла полупрозрачная заливка, а ниже плотная, и какая победит,
   зависело от порядка строк в файле */

.nav-link {
    border-radius: 10px;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--muted);
}
.nav-link:hover { background: var(--bg-primary); color: var(--ink); }
.nav-link.active {
    background: var(--accent-tint);
    color: var(--accent-d);
}

/* Кнопка выхода — красным тинтом, а не сплошной заливкой */
.app-header .btn-danger {
    background: var(--danger-tint);
    border-color: var(--danger-tint-strong);
    color: var(--danger);
    border-radius: 10px;
    font-weight: 700;
    padding: 8px 14px;
    font-size: 13px;
}
.app-header .btn-danger:hover:not(:disabled) {
    background: var(--danger);
    color: #fff;
}

/* Заголовок страницы — как в эталоне: крупный, подзаголовок приглушён */
.app-content > .page-header h2 { font-size: 22px; }


/* Облегчённая типографика (эталон «Главная, облегчённая»): числа и подписи
   перестали быть жирными — экран читается спокойнее, акцент держат цвет и
   размер, а не толщина. */
.cash-hero-value, .dkpi-value, .dtile-value, .summary-value, .metric-value { font-weight: 600 !important; }
.dcap, .summary-label, .info-label, .data-table th { font-weight: 600 !important; }
.sec-h, .page-header h2, .op-title { font-weight: 700; }
.badge, .u-badge, .chip-mono, .pcard-name, .pipe-head { font-weight: 600; }
.cash-row .v { font-weight: 600; }
.attn-chip { font-weight: 600; }

/* Кнопка перехода на объявление — контурная: сплошной фиолетовый в таблице
   спорил с акцентом карточек */
.avito-cell .btn-primary {
    background: var(--card);
    color: var(--accent-d);
    border: 1px solid var(--accent);
    box-shadow: none;
}
.avito-cell .btn-primary:hover { background: var(--accent-tint); filter: none; }

/* Колонки воронки ниже — как в эталоне */
.pipe-col.has-items { min-height: 150px; }

/* KPI тянутся по высоте карточки кассы, поэтому график, прижатый к низу
   фиксированной высотой, оставлял пустую полосу посередине. Теперь он
   занимает весь низ карточки — сколько бы та ни выросла. */
.dkpi .spark-wide {
    height: auto;
    top: 50%;
}
.dkpi .spark-wide svg { height: 100%; }

/* Шапка липкая, поэтому её фон должен быть плотным: через полупрозрачный
   просвечивал заголовок страницы, и казалось, что текст «прячется» за ней.
   Размытие оставляем — оно работает по краям, но читаемость держит фон. */
.app-header {
    background: var(--bg-secondary) !important;
}
/* Отдельного правила для светлой темы тут нет: --bg-secondary сам меняется
   вслед за темой, а раньше рядом лежал дубль с вписанным #ffffff */

/* График снова невысокой полосой у нижнего края: растянутый на пол-карточки
   он превращал один всплеск продаж в огромный горб */
.dkpi .spark-wide { height: 44px; top: auto; }

/* KPI не тянутся под высоту кассы: у карточки кассы четыре плитки, и соседи,
   растянутые до неё, пустовали в середине. Теперь каждая по своему содержимому. */
.overview { align-items: start; }
.dkpi { min-height: 0; padding-bottom: 52px; }

/* Иконки из спрайта: контур наследует цвет текста, толщина одна на весь набор */
.ic {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Шапка снова прокручивается вместе со страницей. Липкой она держаться не
   может: у html/body задана высота, и sticky в такой раскладке просто уезжает
   вверх — со стороны выглядит как «шапка пропала». */
.app-header {
    position: relative;
    top: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Возврат к общей высоте: KPI снова тянутся под карточку кассы, а график
   занимает весь низ — с накопительным рядом линия растёт плавно и пустоты
   в середине не оставляет. */
.overview { align-items: stretch; }
.dkpi { min-height: 0; padding-bottom: 20px; }
.dkpi .spark-wide { height: auto; top: 55%; }
.dkpi .spark-wide svg { height: 100%; }

/* Спарклайны убраны. За полгода у бизнеса две даты продаж — любой честный
   график из таких данных выглядит ступенькой и только портит карточку.
   Вернём, когда продаж станет достаточно для настоящей линии. */
.dkpi .spark-wide { display: none; }
.overview { align-items: start; }
.dkpi { padding-bottom: 20px; }

/* ============================================================================
   Доступность и отклик (ревью по UI/UX-чек-листу)
   ============================================================================ */

/* Фокус с клавиатуры виден на всём, что кликается. Раньше кольцо было только
   у части элементов: пройти форму или таблицу с клавиатуры вслепую нельзя. */
.cash-row:focus-visible,
.attn-chip:focus-visible,
.dcard:focus-visible,
.op-card:focus-visible,
.clickable-row:focus-visible,
.linkchip:focus-visible,
.addlink:focus-visible,
.rrp-input:focus-visible,
.avito-edit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-tint);
    border-color: var(--accent);
}

/* Тач-цели на телефоне не мельче пальца */
@media (max-width: 640px) {
    .cash-row { min-height: 60px; }
    .attn-chip { min-height: 40px; }
    .addlink,
    .avito-edit { min-height: 40px; }
    .rrp-input { min-height: 40px; }
}

/* Кому неприятно движение — статичный интерфейс: карточки перестают
   подпрыгивать, переходы становятся мгновенными */
@media (prefers-reduced-motion: reduce) {
    .pcard:hover,
    .op-card:hover,
    .cash-row:hover { transform: none; }
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Компактный режим для блоков редизайна: раньше плотность знала только про
   старые таблицы, поэтому кнопка в шапке почти ничего не меняла */
body.dense .cash-hero { padding: 14px 16px; }
body.dense .cash-hero-value { font-size: clamp(20px, 2vw, 26px); margin: 6px 0 0; }
body.dense .cash-rows { margin-top: 10px; gap: 8px; }
body.dense .cash-row { padding: 8px 10px; }
body.dense .dkpi { padding: 13px 16px; }
body.dense .dkpi-value { font-size: clamp(18px, 1.7vw, 24px); margin-top: 5px; }
body.dense .dkpi-sub,
body.dense .dtile-sub { margin-top: 5px; }
body.dense .dtile { padding: 12px 14px; }
body.dense .dtile-value { font-size: clamp(17px, 1.5vw, 21px); margin-top: 4px; }
body.dense .overview,
body.dense .dtiles,
body.dense .ops-grid { gap: 10px; }
body.dense .sec-h { margin: 18px 2px 10px; }
body.dense .pipe { gap: 8px; }
body.dense .pipe-head { padding: 9px 12px; }
body.dense .pipe-body { padding: 9px; gap: 8px; }
body.dense .pcard { padding: 9px; }
body.dense .pcard-name { margin-top: 6px; }
body.dense .op-card { padding: 13px; }
body.dense .op-icon { width: 32px; height: 32px; margin-bottom: 8px; }
body.dense .summary-card,
body.dense .info-card,
body.dense .metric-card { padding: 11px 13px; }
body.dense .table-wrapper + .sec-h { margin-top: 16px; }

/* Таблица техники партии: без внутренней прокрутки — список листается вместе
   со страницей. Колонки разведены по важности, чтобы десять единиц влезали
   в экран: служебные номера ужаты, модель получила место, цвет и статус
   не переносятся на три строки. */
.table-flat { max-height: none; overflow-y: visible; }


/* Содержимое ячеек по центру строки: у статуса две строки, у модели — две,
   у сумм одна; без общего выравнивания они «плавали» по высоте */
.data-table td,
.data-table th { vertical-align: middle; }


/* Таблица техники партии: ширины считает браузер (жёсткая раскладка давала
   наложение колонок), а высоту строк держим в узде — название максимум в две
   строки, цвет в одну, дальше многоточие. Полные значения — в подсказке. */
.units-table td .vehicle-inline > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.units-table th, .units-table td { padding: 9px 12px; }
/* Девять колонок в одной таблице — самая плотная в проекте. Заголовкам из
   двух слов разрешаем встать в две строки: «РОЗНИЧНАЯ ЦЕНА» в одну строку
   занимала 148px и отбирала место у кнопок, из-за чего таблица не влезала
   в колонку контента и появлялась прокрутка вбок. Шапка чуть выше — зато
   строки данных прежней высоты и кнопки стоят в один ряд. */
.units-table th { white-space: normal; }
/* Поля хватает на «2 571 000» — больше в РРЦ не вводят. Лишние пиксели тут
   отбирались у колонки действий, и кнопки уезжали на вторую строку. */
.units-table .rrc-input { width: 96px; }

/* Строки таблицы техники одной высоты: у одних название в две строки, у других
   в одну, у части заполнен цвет — из-за этого список выглядел рваным */
.units-table tbody td { height: 56px; }
.units-table td .vehicle-inline > span { line-height: 1.25; }

/* Класс vehicle-inline часто висит прямо на <td>. Из-за display:inline-flex
   ячейка переставала быть ячейкой таблицы: нижняя граница рисовалась по ширине
   текста (обрывки линий под названием), а колонки разъезжались.
   Ячейка остаётся ячейкой, а иконка с названием выравниваются внутри. */
.data-table td.vehicle-inline {
    display: table-cell;
    vertical-align: middle;
}
.data-table td.vehicle-inline > .vehicle-icon {
    display: inline-flex;
    vertical-align: -3px;
    margin-right: 6px;
}

/* Общее правило для всех таблиц проекта, а не только .data-table:
   ячейка обязана оставаться ячейкой. Любой flex-класс, повешенный на <td>,
   ломает границы и раскладку колонок — выравниваем содержимое внутри. */
table td.vehicle-inline,
table th.vehicle-inline,
table td.consignee-inline,
table td.model-inline,
table td.actions-cell,
table th.actions-cell {
    display: table-cell;
    vertical-align: middle;
}

/* Кнопки в колонке действий раньше выстраивались flex'ом прямо на <td> — та же
   ошибка, что с vehicle-inline: ячейка переставала быть ячейкой и, как только
   в соседней колонке текст переносился на вторую строку, кнопки вылезали за
   границы таблицы поверх других строк. Ячейку вернули, зазор между кнопками
   держим отступом. */
table td.actions-cell {
    white-space: nowrap;
}

table td.actions-cell > * + * {
    margin-left: 6px;
}

/* Название категории и пометка рядом с ним — одной строкой. Без этого пометка
   переносится под текст у одних строк и остаётся рядом у других, отчего
   высота строк в таблице скачет и колонка читается рваной.

   Пометка прижата к правому краю колонки, а не идёт сразу за названием:
   названия разной длины, и пометки вслед за ними вставали лесенкой. Прижатые
   к краю, они выстраиваются в один столбик и читаются как отдельный признак. */
.cat-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    white-space: nowrap;
}
/* Пометка не сжимается и не съезжает: у длинных названий она выдавливалась
   влево, и столбик снова шёл лесенкой. Ужимается название, а не признак. */
.cat-cell .badge { flex: 0 0 auto; }
.cat-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Заметка — одной строкой, хвост многоточием, целиком видно по наведению.
   Длинные пояснения («Оплата техники деньгами собственника. Заведено…»)
   разворачивали строку на три, и таблица шла ступеньками.

   Обрезка в таблице работает только при фиксированной раскладке: иначе
   колонка растягивается под самый длинный текст, и вместо многоточия
   получается прокрутка вбок. Поэтому таблице кассы задан table-layout:
   fixed — ширины берутся из шапки, остаток достаётся заметке. */
.cash-table { table-layout: fixed; }
.note-cell {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Правильная разметка колонки действий: класс на обёртке, а не на ячейке.
   Ячейка остаётся ячейкой сама по себе, без страховки выше, а кнопки внутри
   выстраивает flex — так задумано, и так верстаем новое. */
table td.actions-cell-td {
    vertical-align: middle;
}
/* Кнопки переносятся, когда места на них не хватает, — иначе колонка держит
   свою ширину любой ценой и вся таблица уезжает за край с прокруткой вбок.
   Пока место есть, вид прежний: кнопки стоят в один ряд. */
table td.actions-cell-td > .actions-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
/* Разрывать надписи внутри кнопок нельзя: «Изме-нить» в две строки выглядит
   поломкой. Переносим кнопки целиком, а не текст в них. */
table td.actions-cell-td .btn,
table td.actions-cell-td .btn-icon {
    white-space: nowrap;
}

/* Заголовки колонок — по центру своей колонки во всех таблицах проекта.
   Данные выравниваются по смыслу (текст влево, деньги вправо), а шапка
   стоит ровно посередине — так столбцы читаются как столбцы. */
/* Заголовок стоит там же, где данные под ним: текст слева, деньги справа,
   пометки по центру. Раньше шапка была принудительно по центру при любых
   данных — над колонкой с текстом это читалось как перекос: подпись посреди
   ячейки, значения прижаты к левому краю. */
.data-table th,
table th { text-align: left; }
.data-table th.text-right { text-align: right; }
.data-table th.text-center { text-align: center; }
.data-table th.text-left { text-align: left; }

/* Шапки колонок воронки — по центру, счётчик прижат к правому краю:
   раньше название жалось влево, а колонки читались вразнобой */
.pipe-head {
    position: relative;
    justify-content: center;
    padding-right: 44px;
    padding-left: 44px;
}
.pipe-head .n {
    margin-left: 0;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}


/* Справочная строка расхода: сумма уже сидит внутри цены инвойса и в
   себестоимость не идёт — отличаем её приглушённым фоном. Отступ слева не
   ставим: название съезжает относительно соседних строк, и колонка выглядит
   кривой ради подсказки, которая и так написана в самом названии. */
.data-table tr.cost-info-row > td {
    background: var(--bg-hover);
}


/* Фото техники на карточке единицы: сетка превью, которая сама подстраивается
   под ширину — на телефоне остаётся два снимка в ряд */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.photo-tile {
    position: relative;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-hover);
    aspect-ratio: 4 / 3;
}

.photo-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s ease;
}

.photo-tile:hover img { transform: scale(1.04); }

.photo-tile .photo-del {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    border-radius: 999px;
    padding: 2px 8px;
    opacity: 0;
    transition: opacity .15s ease;
}

.photo-tile:hover .photo-del,
.photo-tile:focus-within .photo-del { opacity: 1; }

/* На тач-экранах наведения нет — кнопку показываем сразу */
@media (hover: none) {
    .photo-tile .photo-del { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .photo-tile img { transition: none; }
}