/* ================================================================
   Skladnyk — головний стиль (без Bootstrap)
   Горизонтальна навігація у стилі MoySklad

   Стиль один: колишній ре-скін v2 влитий сюди, перемикача
   стилів і файла app-v2.css більше немає. Токени нижче — це
   токени v2; компонентні правила v2 — в останній секції файла.
   ================================================================ */

/* ---------- CSS custom properties ---------- */
:root {
    /* Рідні контроли (чекбокси, радіо, скрол, календар) слідують темі */
    color-scheme: light;

    /* Поверхні й текст */
    --km-bg: #f5f6f8;
    --km-bg-card: #ffffff;
    --km-text: #101828;
    --km-text-muted: #667085;
    --km-border: #e4e7ec;

    /* Шеврон для маркерів згортання: маска, тож колір бере від тексту
       і не потребує окремого значення для темної теми */
    --km-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.29 6.71a1 1 0 0 1 1.42 0l4.58 4.58a1 1 0 0 1 0 1.42l-4.58 4.58a1 1 0 1 1-1.42-1.42L13.17 12 9.29 8.12a1 1 0 0 1 0-1.41z"/></svg>');

    /* Акцент (він же колір посилань) */
    --km-primary: #2563eb;
    --km-primary-hover: #1d4ed8;
    --km-primary-text: #ffffff;

    /* Семантика */
    --km-danger: #d92d20;
    --km-danger-hover: #b42318;
    --km-success: #067647;
    --km-warning: #b54708;
    --km-info: #0b6bcb;

    /* Навбар — світлий, як частина робочої поверхні */
    --km-nav-bg: #ffffff;
    --km-nav-text: #475467;
    --km-nav-active-text: #101828;
    --km-nav-hover-bg: #f2f4f7;
    --km-nav-height: 56px;

    /* Підменю */
    --km-sub-bg: #ffffff;
    --km-sub-text: #475467;
    --km-sub-active-text: #2563eb;
    --km-sub-active-border: transparent;
    --km-sub-height: 46px;

    /* Таблиці */
    --km-row-hover: #f5f8ff;
    --km-row-stripe: #f9fafb;

    /* Форма */
    --km-radius: 12px;
    --km-radius-sm: 8px;
    --km-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    --km-shadow-lg: 0 12px 24px -8px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .05);
    --km-transition: .16s cubic-bezier(.4, 0, .2, 1);

    /* Похідні від акценту */
    --km-accent-light: #eff6ff;
    --km-primary-rgb: 37, 99, 235;
    --km-primary-bg: rgba(37, 99, 235, .10);

    --km-doc-badge-h: var(--km-control-h, 30px);

    /* --- Додаткові токени оформлення --- */
    /* Другорядна поверхня: шапки таблиць, підкладки полів, вкладені блоки */
    --km-v2-surface: #f9fafb;
    --km-v2-surface-strong: #f2f4f7;
    /* Розділювач у світлому навбарі */
    --km-v2-nav-border: #e4e7ec;
    /* Кільце фокуса */
    --km-v2-ring: 0 0 0 1px rgba(37, 99, 235, .18);
    --km-v2-ring-danger: 0 0 0 1px rgba(217, 45, 32, .16);
    /* Підкладки семантичних кольорів */
    --km-v2-danger-soft: rgba(217, 45, 32, .08);
    --km-v2-success-soft: rgba(6, 118, 71, .10);
    --km-v2-warning-soft: rgba(181, 71, 8, .10);
    --km-v2-info-soft: rgba(11, 107, 203, .10);
    /* Текст на суцільному небезпечному тлі */
    --km-v2-on-danger: #ffffff;
    /* Затемнення під модалками */
    --km-v2-scrim: rgba(16, 24, 40, .45);
    /* Колонка сум: прибуток / видаток */
    --km-v2-in: #067647;
    --km-v2-out: #c01048;
    /* Чат: тло бульбашок (своя, чужа) і полотно стрічки */
    --km-chat-bubble-own: #e4eeff;
    --km-chat-bubble-in: #f2f4f7;
    --km-chat-canvas: #f9fafb;
    /* Наведення на «небезпечні» пункти меню */
    --km-v2-shadow-pop: 0 16px 32px -12px rgba(16, 24, 40, .22), 0 2px 8px rgba(16, 24, 40, .06);

    /* Шрифт */
    --km-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --km-font-mono: "JetBrains Mono", "Fira Code", monospace;

    /* Синоніми, що трапляються в стилях. Без них змінна не визначена,
       і колір мовчки падає на світлий фолбек — на темній темі це давало
       білі модалки й нечитабельні написи. */
    --km-card-bg: var(--km-bg-card);
    --km-text-secondary: var(--km-text-muted);
    --km-muted: var(--km-text-muted);
    --km-hover: var(--km-row-hover);
    --km-bg-muted: var(--km-row-stripe);
    --km-accent: var(--km-primary);
}

/* ---------- Темна тема ---------- */
/* Системна перевага діє, поки користувач явно не обрав тему
   (атрибут data-theme виставляє Theme в app.js). */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
    color-scheme: dark;
    --km-bg: #0e1116;
    --km-bg-card: #161a21;
    --km-text: #e6e8ec;
    --km-text-muted: #98a2b3;
    --km-border: #272c36;

    --km-primary: #7ba7f7;
    --km-primary-hover: #a3c1fa;
    --km-primary-text: #0b1220;

    --km-danger: #ff8078;
    --km-danger-hover: #ffa39c;
    --km-success: #6ee7b7;
    --km-warning: #fbbf24;
    --km-info: #7dd3fc;

    --km-nav-bg: #12161c;
    --km-nav-text: #98a2b3;
    --km-nav-active-text: #f2f4f7;
    --km-nav-hover-bg: #1d222b;

    --km-sub-bg: #12161c;
    --km-sub-text: #98a2b3;
    --km-sub-active-text: #a3c1fa;

    --km-row-hover: #1b2029;
    --km-row-stripe: #12161c;

    --km-shadow: 0 1px 2px rgba(0, 0, 0, .40);
    --km-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, .60), 0 2px 6px rgba(0, 0, 0, .35);

    --km-accent-light: #182335;
    --km-primary-rgb: 123, 167, 247;
    --km-primary-bg: rgba(123, 167, 247, .14);

    --km-v2-surface: #12161c;
    --km-v2-surface-strong: #1b2029;
    --km-v2-nav-border: #272c36;
    --km-v2-ring: 0 0 0 1px rgba(123, 167, 247, .22);
    --km-v2-ring-danger: 0 0 0 1px rgba(255, 128, 120, .20);
    --km-v2-danger-soft: rgba(255, 128, 120, .12);
    --km-v2-success-soft: rgba(110, 231, 183, .12);
    --km-v2-warning-soft: rgba(251, 191, 36, .12);
    --km-v2-info-soft: rgba(125, 211, 252, .12);
    --km-v2-on-danger: #2b0907;
    --km-v2-scrim: rgba(5, 8, 12, .62);
    --km-v2-in: #6ee7b7;
    --km-v2-out: #ff9db1;
    --km-chat-bubble-own: #1e3152;
    --km-chat-bubble-in: #1b2029;
    --km-chat-canvas: #0e1116;
    --km-v2-shadow-pop: 0 16px 32px -12px rgba(0, 0, 0, .70), 0 2px 8px rgba(0, 0, 0, .40);
    }
}
[data-theme="dark"] {
color-scheme: dark;
--km-bg: #0e1116;
--km-bg-card: #161a21;
--km-text: #e6e8ec;
--km-text-muted: #98a2b3;
--km-border: #272c36;

--km-primary: #7ba7f7;
--km-primary-hover: #a3c1fa;
--km-primary-text: #0b1220;

--km-danger: #ff8078;
--km-danger-hover: #ffa39c;
--km-success: #6ee7b7;
--km-warning: #fbbf24;
--km-info: #7dd3fc;

--km-nav-bg: #12161c;
--km-nav-text: #98a2b3;
--km-nav-active-text: #f2f4f7;
--km-nav-hover-bg: #1d222b;

--km-sub-bg: #12161c;
--km-sub-text: #98a2b3;
--km-sub-active-text: #a3c1fa;

--km-row-hover: #1b2029;
--km-row-stripe: #12161c;

--km-shadow: 0 1px 2px rgba(0, 0, 0, .40);
--km-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, .60), 0 2px 6px rgba(0, 0, 0, .35);

--km-accent-light: #182335;
--km-primary-rgb: 123, 167, 247;
--km-primary-bg: rgba(123, 167, 247, .14);

--km-v2-surface: #12161c;
--km-v2-surface-strong: #1b2029;
--km-v2-nav-border: #272c36;
--km-v2-ring: 0 0 0 1px rgba(123, 167, 247, .22);
--km-v2-ring-danger: 0 0 0 1px rgba(255, 128, 120, .20);
--km-v2-danger-soft: rgba(255, 128, 120, .12);
--km-v2-success-soft: rgba(110, 231, 183, .12);
--km-v2-warning-soft: rgba(251, 191, 36, .12);
--km-v2-info-soft: rgba(125, 211, 252, .12);
--km-v2-on-danger: #2b0907;
--km-v2-scrim: rgba(5, 8, 12, .62);
--km-v2-in: #6ee7b7;
--km-v2-out: #ff9db1;
--km-chat-bubble-own: #1e3152;
--km-chat-bubble-in: #1b2029;
--km-chat-canvas: #0e1116;
--km-v2-shadow-pop: 0 16px 32px -12px rgba(0, 0, 0, .70), 0 2px 8px rgba(0, 0, 0, .40);
}

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

html {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
    /* scroll-behavior: smooth тут не ставимо: браузер проганяє через smooth-аніматор
       і перетягування повзунка, тому вміст рухається ривками — лише коли відпустиш
       мишу. Плавну прокрутку вмикаємо точково в JS: scrollIntoView/scrollBy
       з behavior: "smooth" */
    /* Смуга прокрутки завжди займає своє місце: інакше блокування прокрутки
       під панелями (overflow: hidden) зсувало б усю сторінку вбік */
    scrollbar-gutter: stable;
}
body {
    font-family: var(--km-font);
    color: var(--km-text);
    background: var(--km-bg);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

a { color: var(--km-primary); text-decoration: none; transition: color var(--km-transition); }
/* Наведення не підкреслює посилання — лише змінює колір (пункт 29 плану):
   підкреслення в меню, підменю, табах, таблицях і пагінації рябіло інтерфейс. */
a:hover { color: var(--km-primary-hover); text-decoration: none; }

img, svg { display: block; max-width: 100%; }

/* Focus-visible for accessibility */
:focus-visible {
    outline: 2px solid var(--km-primary);
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--km-primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--km-primary-hover); }

/* Selection */
::selection { background: rgba(25,118,210,.2); color: var(--km-text); }

/* ---------- Навбар (верхня панель) ---------- */
.km-navbar {
    display: flex;
    align-items: center;
    height: var(--km-nav-height);
    background: var(--km-nav-bg);
    color: var(--km-nav-text);
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 1000;
    gap: 0;
    flex-shrink: 0;
}
.km-navbar__brand {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--km-nav-active-text);
    margin-right: 24px;
    white-space: nowrap;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.km-navbar__brand:hover { text-decoration: none; color: var(--km-nav-active-text); }

.km-navbar__menu {
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: 0;
    list-style: none;
    flex: 1;
    min-width: 0;
}
.km-navbar__item {
    position: relative;
    display: flex;
    align-items: center;
}
.km-navbar__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 100%;
    color: var(--km-nav-text);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: background var(--km-transition), color var(--km-transition);
    text-decoration: none;
    border: none;
    background: none;
}
.km-navbar__link:hover,
.km-navbar__item.is-active .km-navbar__link {
    background: var(--km-nav-hover-bg);
    color: var(--km-nav-active-text);
    text-decoration: none;
}

/* Правий блок навбару */
.km-navbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.km-navbar__icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--km-nav-text);
    cursor: pointer;
    transition: background var(--km-transition);
    border: none;
    background: none;
}
.km-navbar__icon-btn:hover {
    background: var(--km-nav-hover-bg);
    color: var(--km-nav-active-text);
}
.km-navbar__user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,.15);
    margin-left: 4px;
}
.km-navbar__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--km-primary);
    color: var(--km-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .75rem;
    flex-shrink: 0;
}
.km-navbar__user-name {
    font-size: .8125rem;
    color: var(--km-nav-text);
    line-height: 1.2;
}
.km-navbar__user-login {
    font-size: .7rem;
    color: var(--km-text-muted);
}

/* ---------- Панель підменю ---------- */
.km-submenu {
    display: flex;
    align-items: stretch;
    height: var(--km-sub-height);
    background: var(--km-sub-bg);
    padding: 0 16px;
    gap: 0;
    position: sticky;
    top: var(--km-nav-height);
    z-index: 999;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.km-submenu::-webkit-scrollbar { display: none; }
/* Немає активного розділу (напр. налаштування) — підменю приховане */
.km-submenu.is-empty { display: none; }

.km-submenu__link {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 100%;
    color: var(--km-sub-text);
    font: inherit;
    font-size: .8125rem;
    white-space: nowrap;
    text-decoration: none;
    /* Пункт «Чати» - кнопка (відкриває шухляду), тож прибираємо
       браузерні рамку й тло, щоб він не відрізнявся від посилань */
    background: transparent;
    border: 0;
    border-bottom: 4px solid transparent;
    transition: color var(--km-transition), border-color var(--km-transition);
    cursor: pointer;
}
.km-submenu__link:hover {
    color: var(--km-sub-active-text);
    text-decoration: none;
}
.km-submenu__link.is-active {
    color: var(--km-sub-active-text);
    border-bottom-color: var(--km-sub-active-border);
}
.km-submenu__link.is-stub {
    opacity: .5;
    cursor: default;
}
.km-submenu__link.is-stub:hover {
    color: var(--km-sub-text);
}

/* ---------- Основний контент ---------- */
.km-main {
    flex: 1;
    padding: 20px 24px;
    width: 100%;
}

/* ---------- Page header ---------- */
.km-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}
.km-page-actions--inline {
    margin-left: 12px;
}
.km-page-header:has(.km-page-actions--inline) {
    justify-content: flex-start;
}
.km-page-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--km-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.km-page-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    font-size: .7rem;
    font-weight: 600;
    border-radius: 12px;
    background: var(--km-primary);
    color: var(--km-primary-text);
    font-variant-numeric: tabular-nums;
}
.km-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- Breadcrumbs ---------- */
.km-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    color: var(--km-text-muted);
    margin-bottom: 12px;
    list-style: none;
}
.km-breadcrumb a { color: var(--km-primary); }
.km-breadcrumb__sep { color: var(--km-text-muted); }

/* ---------- Buttons ---------- */
.km-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: .8125rem;
    font-weight: 500;
    font-family: inherit;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-sm);
    background: var(--km-bg-card);
    color: var(--km-text);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--km-transition), border-color var(--km-transition), box-shadow var(--km-transition);
    line-height: 1.4;
}
.km-btn:hover {
    border-color: var(--km-primary);
    box-shadow: var(--km-shadow);
    text-decoration: none;
}
.km-btn--primary {
    background: var(--km-primary);
    color: var(--km-primary-text);
    border-color: var(--km-primary);
}
.km-btn--primary:hover {
    background: var(--km-primary-hover);
    border-color: var(--km-primary-hover);
}
/* Приглушений текст усередині залитої кнопки (напр. «−20%» у виборі
   періоду підписки): сірий колір підказки на синьому тлі нечитний. */
.km-btn--primary .km-form-hint,
.km-btn--danger .km-form-hint {
    color: rgba(255, 255, 255, .78);
}
.km-btn--danger {
    background: var(--km-danger);
    color: #fff;
    border-color: var(--km-danger);
}
.km-btn--danger:hover { background: var(--km-danger-hover); border-color: var(--km-danger-hover); }
.km-btn--secondary {
    background: var(--km-bg-muted);
    border-color: var(--km-border);
    color: var(--km-text);
}
.km-btn--secondary:hover {
    background: var(--km-hover);
    border-color: var(--km-primary);
    box-shadow: none;
}
.km-btn--sm { padding: 4px 10px; font-size: .75rem; }
.km-btn--icon {
    padding: 6px;
    min-width: 32px;
    min-height: 32px;
}

/* Індикатори виконання документа у списку (як у МойСклад):
   ненульові суми «Виставлено/Оплачено/Відвантажено/Зарезервовано»
   заливаються світло-зеленим */
td.km-cell--progress {
    background: #e3f2e6;
    color: #1b5e20;
}
[data-theme="dark"] td.km-cell--progress {
    background: #1d3323;
    color: #9ccc9f;
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) td.km-cell--progress {
        background: #1d3323;
        color: #9ccc9f;
    }
}

/* Модалка «Масове редагування» */
.km-bulk-edit { max-height: 60vh; overflow-y: auto; }
.km-bulk-edit__row {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 10px;
    align-items: center;
    padding: 5px 0;
}
.km-bulk-edit__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: .8125rem;
}
.km-bulk-edit__value .km-select,
.km-bulk-edit__value .km-input { width: 100%; }
.km-bulk-edit__value [disabled] { opacity: .5; }

/* Утиліти замість інлайн-стилів (CLAUDE.md, правило 9) */
.km-card--stack { margin-bottom: 20px; }
.km-form-hint--right { margin-left: auto; }
.km-icon-danger { color: var(--km-danger); }
.km-card--attached-top { margin-top: 16px; }
.km-table-wrap--flush { border: none; border-radius: 0; }
.km-pos-sum-strong { font-weight: 600; }

/* Групові дії над позиціями документа */
.km-pos-bulkbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    margin-bottom: 8px;
    background: var(--km-accent-light);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-sm);
    font-size: .8125rem;
}
.km-pos-bulkbar__count { font-weight: 500; }
.km-pos-bulkbar__discount {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--km-text-muted);
}
.km-pos-bulkbar__discount .km-input { width: 70px; }

/* Режим «Замінити» позицію */
.km-positions__row.is-replacing td { background: var(--km-accent-light); }
.km-pos-replace-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    color: var(--km-primary);
}

/* Щільність рядків таблиць: перемикач у панелі налаштувань списку */
.km-density {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.km-density__label { font-size: .8125rem; color: var(--km-text-muted); }
.km-density__group { display: inline-flex; gap: 4px; }
/* Активний варіант підсвічується від класу на <html> — без JS-синхронізації */
html:not(.km-density-compact) .km-density [data-density="comfort"],
html.km-density-compact .km-density [data-density="compact"] {
    background: var(--km-primary);
    border-color: var(--km-primary);
    color: var(--km-primary-text);
}
.km-density-compact .km-table th,
.km-density-compact .km-table td {
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: .78rem;
}

/* Баланс контрагента під полем «Контрагент» у шапці документа */
/* Проміжок між основним полем клітинки і підлеглим під ним
   (організація - її рахунок, контрагент - його рахунок, каса) */
.km-doc-field-stack { display: flex; flex-direction: column; min-width: 0; gap: 4px; }

/* ---------- Cards ---------- */
.km-card {
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius);
    box-shadow: var(--km-shadow);
}
.km-card__header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--km-border);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.km-card__body { padding: 16px; }

/* ---------- Toolbar (фільтри + пошук) ---------- */
.km-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.km-search {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 320px;
    flex: 1;
    position: relative;
}
.km-search__icon {
    color: var(--km-text-muted);
    flex-shrink: 0;
}
/* Кнопка очищення пошуку — всередині поля, у кінці */
.km-search:has(.km-search__clear) .km-input { padding-right: 30px; }
.km-search__clear {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: .72rem;
    color: var(--km-text-muted);
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--km-transition), color var(--km-transition);
    text-decoration: none;
    flex-shrink: 0;
}
.km-search__clear:hover {
    background: var(--km-danger);
    color: #fff;
    text-decoration: none;
}

/* ---------- Form inputs ---------- */
.km-input,
.km-select,
.km-textarea {
    width: 100%;
    padding: 7px 10px;
    font-size: .875rem;
    font-family: inherit;
    color: var(--km-text);
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-sm);
    transition: border-color var(--km-transition), box-shadow var(--km-transition);
    line-height: 1.4;
}
/* Довгий текст у текстовому полі обрізаємо з «…» (поки поле не у фокусі),
   щоб було видно, що відображено не весь введений текст. */
input.km-input { text-overflow: ellipsis; }
.km-input:focus,
.km-select:focus,
.km-textarea:focus {
    outline: none;
    border-color: var(--km-primary);
    box-shadow: 0 0 0 1px rgba(25,118,210,.15);
}
.km-select { appearance: auto; }
.km-textarea { min-height: 80px; resize: vertical; }
/* Числові поля — без стрілок-спінерів збільшення/зменшення значення */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.km-checkbox {
    accent-color: var(--km-primary);
    cursor: pointer;
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    vertical-align: middle;
}

.km-form-group {
    margin-bottom: 14px;
}
/* Клік по назві поля не фокусує поле - в усіх формах проєкту.
   <label for> лишається для читачів екрана, а клік крізь нього не
   проходить. Винятки: label із галочкою чи радіо (у т.ч. тумблери
   .km-switch) перемикаються кліком по тексту, як і раніше; кнопки й
   посилання всередині підпису (знак «?» додаткового поля) приймають
   кліки самі. */
label { pointer-events: none; }
label:has(input[type="checkbox"], input[type="radio"]) { pointer-events: auto; }
/* Галочка й підпис - сусіди в одній групі (label for + .km-checkbox
   поруч: «Без закриваючих документів», сторінки інтеграцій) */
:is(.km-form-group, .km-doc-field):has(input[type="checkbox"], input[type="radio"]) label {
    pointer-events: auto;
}
label :is(button, a) { pointer-events: auto; }

.km-form-label {
    display: block;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--km-text);
    margin-bottom: 4px;
}
/* Checkbox inline layout */
.km-form-group:has(.km-checkbox) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.km-form-group:has(.km-checkbox) .km-form-label {
    margin-bottom: 0;
    cursor: pointer;
    font-weight: 400;
}
.km-form-hint { font-size: .75rem; color: var(--km-text-muted); margin-top: 2px; }
.km-form-error {
    font-size: .75rem;
    color: var(--km-danger);
    margin-top: 2px;
}
.km-form-error--block {
    padding: 10px 14px;
    background: #ffebee;
    border: 1px solid var(--km-danger);
    border-radius: var(--km-radius-sm);
    margin-bottom: 16px;
}
[data-theme="dark"] .km-form-error--block {
    background: rgba(211, 47, 47, .1);
}
.km-form-required {
    color: var(--km-danger);
    margin-left: 2px;
}
.km-form-group.is-error .km-input,
.km-form-group.is-error .km-select,
.km-form-group.is-error .km-textarea,
.km-form-group.is-error .ts-control {
    border-color: var(--km-danger);
}
.km-form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--km-border);
}
.km-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0 20px;
}

/* ---------- Document Positions ---------- */
.km-positions {
    margin-top: 0;
    padding-top: 0;
}
.km-positions__wrap {
    border: none;
    border-radius: 0;
    box-shadow: none;
}
/* Дозволяємо випадаючому меню дій виходити за межі таблиці (не обрізатись).
   Специфічність вища за .km-table-wrap, щоб перекрити overflow-x: auto. */
.km-positions .km-positions__wrap {
    overflow: visible;
}
/* На вузьких екранах пріоритет — доступність правих колонок:
   повертаємо горизонтальний скрол таблиці позицій. */
@media (max-width: 768px) {
    .km-positions .km-positions__wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .km-positions__table {
        min-width: 720px;
    }
}
.km-positions__table .km-input,
.km-positions__table .km-select {
    padding: 4px 6px;
    font-size: .8125rem;
    /* Видима рамка, щоб одразу було зрозуміло, що це редаговане поле */
    border: 1px solid var(--km-border);
    background: var(--km-bg-card);
    border-radius: var(--km-radius-sm);
    transition: border-color var(--km-transition), background var(--km-transition);
}
.km-positions__table .km-input:focus,
.km-positions__table .km-select:focus {
    border-color: var(--km-primary);
    background: var(--km-bg-card);
    box-shadow: 0 0 0 2px rgba(25,118,210,.12);
}
.km-positions__table .km-input:hover,
.km-positions__table .km-select:hover {
    border-color: var(--km-border);
    background: var(--km-bg-card);
}
.km-positions__table input[type="number"] {
    width: 100%;
    min-width: 60px;
    text-align: right;
}
.km-positions__table select {
    min-width: 160px;
}
.km-positions__num {
    text-align: center;
    color: var(--km-text-muted);
    font-size: .75rem;
    width: 36px;
}
.km-positions__sum {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.km-positions__actions {
    text-align: center;
    width: 36px;
}
.km-positions__row.is-deleted {
    display: none;
}
.km-positions__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--km-text-muted);
    cursor: pointer;
    border-radius: 50%;
    transition: all var(--km-transition);
    padding: 0;
}
.km-positions__remove:hover {
    color: var(--km-danger);
    background: rgba(211, 47, 47, .08);
}
.km-positions__row {
    transition: background var(--km-transition);
}
.km-positions__row:hover {
    background: var(--km-row-hover);
}
.col-pos-num { width: 36px; text-align: center; }
.col-pos-name { min-width: 200px; }
.col-pos-qty { width: 92px; }
.col-pos-price { width: 120px; }
.col-pos-discount { width: 80px; }
.col-pos-vat { width: 68px; }
.col-pos-vat-sum { width: 110px; text-align: right; }
.col-pos-sum { width: 150px; text-align: right; }
.col-pos-act { width: 36px; }
/* Зображення позиції: мініатюра основного зображення товару */
.col-pos-image { width: 40px; padding-left: 4px; padding-right: 4px; }
.km-pos-thumb {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--km-border);
    background: var(--km-bg-card);
}
/* Залишки в позиціях: лише читання, вузькі числові колонки */
.col-pos-stock {
    width: 84px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--km-text-muted);
}
.km-positions__table th.col-pos-stock { text-align: right; }
/* «Доступно» в замовленні покупця: вистачає / вистачить з очікуванням / бракує */
.km-positions__table td.km-pos-avail--ok {
    background: var(--km-v2-success-soft, rgba(31, 138, 76, .14));
    color: var(--km-text);
}
.km-positions__table td.km-pos-avail--wait {
    background: var(--km-v2-warning-soft, rgba(217, 139, 0, .20));
    color: var(--km-text);
}
.km-positions__table td.km-pos-avail--short {
    background: var(--km-v2-danger-soft, rgba(217, 45, 32, .14));
    color: var(--km-text);
}
.km-doc-totals__value.is-negative { color: var(--km-danger); }
.km-positions__table .km-pos-cost-input { width: 100%; min-width: 70px; }
/* Накладні витрати в підсумках документа: спосіб розподілу і сума */
.km-doc-overhead { align-items: center; gap: 8px; }
.km-doc-overhead__controls { display: flex; align-items: center; gap: 6px; }
.km-doc-overhead .km-doc-totals__label { white-space: nowrap; }
.km-doc-overhead__controls .ts-wrapper,
.km-doc-overhead__mode { width: 104px; }
.km-doc-overhead__sum { width: 84px; text-align: right; }
/* Меню шестерні колонок позицій */
/* z-index вищий за селекти в підсумках документа під таблицею */
.km-pos-cols { min-width: 190px; padding: 6px; gap: 2px; z-index: 200; }
.km-pos-cols__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 6px;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--km-text);
    white-space: nowrap;
}
.km-pos-cols__item:hover { background: var(--km-row-hover); }

/* Заголовки числових колонок — праворуч, як значення в клітинках */
.km-positions__table th.col-pos-qty,
.km-positions__table th.col-pos-price,
.km-positions__table th.col-pos-discount,
.km-positions__table th.col-pos-vat,
.km-positions__table th.col-pos-vat-sum,
.km-positions__table th.col-pos-sum {
    text-align: right;
}

/* Числові поля позицій — вирівнювання праворуч, табличні цифри */
.km-positions__table .km-pos-num-input {
    width: 100%;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* Кількість = 0 (у т.ч. авто після порожнього поля) — червона підсвітка */
.km-positions__table .km-pos-num-input.is-zero {
    border-color: var(--km-danger);
    color: var(--km-danger);
}
/* Сума: обмежена ширина; задовге число обрізається з «…» */
/* Поля з обмеженою довжиною: задовге число обрізається з «…» (повне — у tooltip).
   Кількість — приблизно 8 знаків; ціна/сума — по ширині колонки. */
.km-positions__table .km-pos-money-input,
.km-positions__table .km-pos-qty-input {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.km-positions__table .km-pos-sum-input {
    font-weight: 600;
}
/* Сума ПДВ — нередагована клітинка з обрізанням «…» та tooltip.
   Фіксований max-width (а не 100%) потрібен, бо за auto table-layout текст
   інакше розширює колонку замість обрізатись. */
.km-positions__vat-sum .km-pos-ellipsis {
    display: inline-block;
    max-width: 86px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Меню дій позиції (три крапки) */
.km-pos-menu {
    position: relative;
    display: inline-flex;
}
.km-pos-menu__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--km-text-muted);
    cursor: pointer;
    border-radius: 50%;
    transition: all var(--km-transition);
    padding: 0;
}
.km-pos-menu__btn:hover {
    color: var(--km-text);
    background: var(--km-row-hover);
}
.km-pos-menu__dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 60;
    min-width: 150px;
    margin-top: 2px;
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-sm);
    box-shadow: var(--km-shadow-lg);
    padding: 4px;
    display: flex;
    flex-direction: column;
}
.km-pos-menu__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    font-size: .8125rem;
    font-family: inherit;
    border: none;
    background: none;
    color: var(--km-text);
    cursor: pointer;
    border-radius: 4px;
}
.km-pos-menu__item:hover:not(:disabled) {
    background: var(--km-row-hover);
}
.km-pos-menu__item:disabled {
    color: var(--km-text-muted);
    cursor: not-allowed;
    opacity: .6;
}
.km-pos-menu__item--danger {
    color: var(--km-danger);
}
.km-pos-menu__item--danger:hover {
    background: rgba(211, 47, 47, .08);
}

/* Positions: Add bar */
.km-positions__add-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--km-border);
}
.km-positions__picker-btn {
    flex-shrink: 0;
}
.km-positions__add-bar .km-pos-search {
    flex: 1;
    min-width: 0;
}

/* Positions: Search autocomplete */
[x-cloak] { display: none !important; }

.km-pos-search {
    position: relative;
    flex: 1;
}
.km-pos-search__input {
    width: 100%;
    padding: 7px 12px;
    font-size: .8125rem;
    font-family: inherit;
    color: var(--km-text);
    background: var(--km-bg-card);
    border: 1px dashed var(--km-primary);
    border-radius: var(--km-radius-sm);
    outline: none;
    transition: border var(--km-transition);
    box-sizing: border-box;
}
.km-pos-search__input:focus {
    border-style: solid;
    border-color: var(--km-primary);
}
.km-pos-search__input::placeholder {
    color: var(--km-text-muted);
}
.km-pos-search__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-sm);
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    max-height: 280px;
    overflow-y: auto;
}
.km-pos-search__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: .8125rem;
    transition: background var(--km-transition);
}
.km-pos-search__item:hover,
.km-pos-search__item.is-active {
    background: var(--km-hover);
}
.km-pos-search__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.km-pos-search__meta {
    color: var(--km-text-muted);
    font-size: .75rem;
    white-space: nowrap;
}
.km-pos-search__price {
    margin-left: auto;
    font-weight: 500;
    white-space: nowrap;
}
/* Доступно на складі документа (пункт 15 плану розвитку) */
.km-pos-search__available {
    margin-left: 16px;
    min-width: 120px;
    text-align: right;
    color: var(--km-text-muted);
    font-size: .75rem;
    white-space: nowrap;
}
.km-pos-search__available.is-negative {
    color: var(--km-danger);
    font-weight: 600;
}
.km-pos-search__empty {
    padding: 12px;
    text-align: center;
    color: var(--km-text-muted);
    font-size: .8125rem;
}

/* Positions: Clickable product link */
.km-pos-product-link {
    color: var(--km-primary);
    text-decoration: none;
    cursor: pointer;
    font-size: .8125rem;
}
.km-pos-product-link:hover {
    color: var(--km-primary-hover);
    text-decoration: none;
}
/* Позиція без картки товару (рядок ще без асортименту) — не посилання */
.km-pos-product-link--empty,
.km-pos-product-link--empty:hover {
    color: var(--km-text-muted);
    cursor: default;
}

/* ===== Document Form Layout ===== */
.km-doc-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    margin-bottom: 8px;
    gap: 8px;
    position: sticky;
    top: calc(var(--km-nav-height) + var(--km-sub-height));
    z-index: 100;
    background: transparent;
}
/* Коли підменю приховане (.is-empty), sticky-панель кнопок липне одразу
   під навбаром — без порожньої смуги на висоту підменю. */
.km-submenu.is-empty ~ .km-main .km-doc-bar {
    top: var(--km-nav-height);
}
.km-doc-bar__left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.km-doc-bar__right {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Меню «Змінити» відокремлене від кнопок збереження/закриття */
.km-doc-bar__change {
    margin-left: 12px;
}

/* Dropdown */
.km-dropdown {
    position: relative;
}
.km-dropdown__menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    min-width: 180px;
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    padding: 4px 0;
}
.km-dropdown.is-open .km-dropdown__menu {
    display: block;
}
.km-dropdown__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    font-size: .8125rem;
    color: var(--km-text);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.km-dropdown__item:hover {
    background: var(--km-hover);
}
.km-dropdown__item--danger {
    color: var(--km-danger, #d32f2f);
}
.km-dropdown__item--danger:hover {
    background: rgba(211,47,47,.08);
}
.km-dropdown__menu--right {
    left: auto;
    right: 0;
}
/* Форма імпорту у випадному меню */
.km-dropdown__menu--pad {
    min-width: 280px;
    padding: 12px 14px;
    right: 0;
    left: auto;
}
.km-import-hint {
    margin: 0 0 8px;
    font-size: .75rem;
    color: var(--km-text-muted, #6b7280);
    line-height: 1.4;
}
.km-import-file {
    display: block;
    width: 100%;
    margin-bottom: 8px;
}
.km-dropdown__divider {
    height: 1px;
    margin: 4px 0;
    background: var(--km-border);
}
.km-navbar__user-dropdown .km-navbar__user {
    cursor: pointer;
    border: none;
    background: none;
    padding: 4px 8px;
    border-radius: 6px;
}
.km-navbar__user-dropdown .km-navbar__user:hover {
    background: rgba(255,255,255,.1);
}
.km-navbar__user-chevron {
    opacity: .6;
    transition: transform .2s;
    flex-shrink: 0;
}
.km-navbar__user-dropdown.is-open .km-navbar__user-chevron {
    transform: rotate(180deg);
}

/* Button outline variant */
.km-btn--outline {
    background: transparent;
    border: 1px solid var(--km-border);
    color: var(--km-text);
}
.km-btn--outline:hover {
    background: var(--km-hover);
}

/* Modal */
.km-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,.4);
    align-items: center;
    justify-content: center;
}
.km-modal-overlay.is-open {
    display: flex;
}
/* Базовий блок .km-modal один - нижче (разом із __title і __close);
   ширини модифікаторів - зі специфічністю :root, щоб базовий max-width
   їх не перебивав (аудит 03.10.2026, п. 4.3) */
:root .km-modal--wide {
    min-width: 480px;
    max-width: 640px;
    width: 100%;
}
.km-modal--wide .km-modal__header {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Модалка «Видалення неможливе»: перелік місць використання запису */
:root .km-modal--usage {
    min-width: 420px;
    max-width: 560px;
}
.km-modal--usage .km-modal__body {
    max-height: 60vh;
    overflow-y: auto;
}
.km-usage-intro {
    margin: 0 0 12px;
    color: var(--km-text-secondary);
}
.km-usage-subject {
    margin: 0 0 6px;
    font-weight: 600;
}
.km-usage-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.km-usage-group__title {
    font-weight: 600;
    margin-bottom: 4px;
}
.km-usage-group__items {
    list-style: none;
    margin: 0;
    padding: 0 0 0 12px;
    border-left: 2px solid var(--km-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.km-usage-group__items a {
    color: var(--km-accent);
    text-decoration: none;
}
.km-usage-group__items a:hover {
    text-decoration: underline;
}
.km-usage-group__more,
.km-usage-more {
    color: var(--km-text-secondary);
    font-size: .8125rem;
}
.km-usage-more {
    margin: 12px 0 0;
}

.km-modal__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--km-text-secondary);
    padding: 0 4px;
    line-height: 1;
}
.km-modal__close:hover {
    color: var(--km-text);
}
.km-modal__loading {
    padding: 40px 0;
    text-align: center;
    color: var(--km-text-secondary);
    font-size: .875rem;
}
.km-doc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 12px;
}
.km-doc-header__main {
    display: contents;
}
.km-doc-header__eyebrow {
    font-size: .75rem;
    font-weight: 600;
    color: var(--km-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.km-doc-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.km-doc-title {
    font-size: 0.75rem;
    font-weight: 650;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-sm);
    padding: 5px 10px;
    background: var(--km-bg-card);
    color: var(--km-text);
    outline: none;
    flex: 0 0 auto;
    min-width: 60px;
    font-family: inherit;
    transition: border-color var(--km-transition), box-shadow var(--km-transition);
    line-height: 1.4;
}
.km-doc-title:focus {
    border-color: var(--km-primary);
    box-shadow: 0 0 0 1px rgba(25,118,210,.15);
}
.km-doc-title.is-error {
    border-color: var(--km-danger);
}
.km-doc-date-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.km-doc-date-control__label {
    color: var(--km-text-muted);
    font-size: .8125rem;
}
.km-doc-date-control .km-input {
    width: auto;
    min-width: 0;
    padding: 5px 8px;
    font-size: .8125rem;
}
.km-doc-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.km-doc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    /* Усі блоки рядка (проведення, статус, оплата) — однієї висоти */
    height: var(--km-doc-badge-h);
}
.km-doc-badge .km-checkbox,
.km-doc-badge input[type="checkbox"] {
    margin: 0;
}
.km-doc-badge--check {
    cursor: pointer;
    user-select: none;
}
.km-doc-badge--check input[type="checkbox"] {
    accent-color: var(--km-primary);
}
/* «Проведено» — тумблер: сам чекбокс невидимий і на всю площу перемикача */
.km-doc-badge--check .km-switch input[type="checkbox"] {
    width: 100%;
    height: 100%;
}
.km-doc-badge--state .km-select {
    padding: 3px 8px;
    font-size: .8125rem;
    min-width: 120px;
}
/* Статус оплати документа */
.km-doc-pay-status {
    display: inline-flex;
    align-items: center;
    height: var(--km-doc-badge-h);
    padding: 0 12px;
    border-radius: calc(var(--km-doc-badge-h) / 2);
    font-size: .8125rem;
    font-weight: 500;
}
.km-doc-pay-status--paid {
    background: color-mix(in srgb, var(--km-success) 15%, transparent);
    color: var(--km-success);
}
.km-doc-pay-status--partial {
    background: color-mix(in srgb, var(--km-warning) 18%, transparent);
    color: var(--km-warning);
}
.km-doc-pay-status--unpaid {
    background: color-mix(in srgb, var(--km-danger) 12%, transparent);
    color: var(--km-danger);
}
.km-doc-header__owner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    margin-left: auto;
}
.km-owner-card {
    position: relative;
}
.km-owner-card__toggle,
.km-doc-history-chip {
    width: auto;
    text-align: left;
    border: 1px solid var(--km-border);
    background: linear-gradient(180deg, rgba(25,118,210,.04), rgba(25,118,210,0));
    border-radius: 999px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--km-text);
    white-space: nowrap;
}
.km-owner-card__label,
.km-doc-history-chip__label {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--km-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.km-owner-card__name,
.km-doc-history-chip__value {
    font-size: .8125rem;
    font-weight: 600;
}
.km-owner-card__meta,
.km-doc-history-chip__meta {
    font-size: .75rem;
    color: var(--km-text-muted);
}
.km-owner-card__menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 100%;
    min-width: 280px;
    padding: 12px;
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: 12px;
    box-shadow: var(--km-shadow-lg);
    z-index: 20;
}
.km-owner-card.is-open .km-owner-card__menu {
    display: grid;
    gap: 10px;
}
.km-owner-card__field {
    display: grid;
    gap: 4px;
}
.km-owner-card__field label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--km-text-muted);
}
.km-owner-card__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
}

.km-doc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.km-doc-layout__main {
    min-width: 0;
}

/* Floating audit panel — appears over the page */
.km-audit-panel {
    display: none;
    pointer-events: none;
}
.km-audit-panel.is-open {
    display: block;
    pointer-events: auto;
}
.km-audit-panel__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .28);
    z-index: 590;
}
.km-doc-sidebar-card {
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: 14px;
    box-shadow: var(--km-shadow-lg);
    overflow: hidden;
}
.km-audit-panel .km-doc-sidebar-card {
    position: fixed;
    top: 96px;
    right: 0;
    bottom: 0;
    width: 780px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border-right: none;
    z-index: 600;
}
.km-audit-panel .km-doc-sidebar-card__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Догортавши журнал до кінця, колесо не «перекидається» на сторінку */
    overscroll-behavior: contain;
}
/* Поки журнал відкритий, сторінка під ним не прокручується. Прив'язка через
   :has() до самої панелі: якщо SPA замінить контент разом із панеллю,
   блокування зникає само собою. Місце під смугу прокрутки зарезервоване
   в html (scrollbar-gutter), тому контент не смикається вбік при відкритті. */
body:has(.km-audit-panel.is-open) {
    overflow: hidden;
}
.km-doc-sidebar-card__header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--km-border);
    position: sticky;
    top: 0;
    background: var(--km-bg-card);
    z-index: 1;
}
.km-doc-sidebar-card__header h2 {
    font-size: 1rem;
}
.km-doc-sidebar-card__eyebrow {
    font-size: .72rem;
    font-weight: 700;
    color: var(--km-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.km-doc-sidebar-card__close {
    display: block;
    border: none;
    background: transparent;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: var(--km-text-muted);
    flex-shrink: 0;
}
.km-doc-sidebar-card__close:hover {
    color: var(--km-text);
}
.km-doc-sidebar-card__body {
    padding: 16px;
}
.km-doc-sidebar-card__empty {
    font-size: .875rem;
    color: var(--km-text-muted);
}

/* Журнал змін: список подій у панелі km-doc-sidebar-card */
.km-audit-log {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}
.km-audit-log__item {
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius);
    padding: 0;
}
.km-audit-log__action {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--km-text-muted);
}
.km-audit-log__action--create {
    color: var(--km-success);
}
.km-audit-log__action--delete {
    color: var(--km-danger);
}
.km-audit-log__moment {
    font-size: .75rem;
    color: var(--km-text-muted);
    white-space: nowrap;
}

/* Document card with two-column fields */
.km-doc-card {
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius);
    box-shadow: var(--km-shadow);
    padding: 16px 20px;
    margin-bottom: 0;
}
.km-doc-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px 32px;
}
/* Row-based layout */
.km-doc-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Семантична група полів документа */
.km-doc-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.km-doc-group + .km-doc-group {
    margin-top: 10px;
}
.km-doc-group__title {
    font-size: .75rem;
    font-weight: 600;
    color: var(--km-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.km-doc-row {
    display: grid;
    gap: 4px 24px;
}
.km-doc-row--1 { grid-template-columns: 1fr; }
.km-doc-row--2 { grid-template-columns: 1fr 1fr; }
.km-doc-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.km-doc-row--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
/* Ряд із самих чекбоксів: завжди 4 колонки, скільки б галочок у ньому не було */
.km-doc-row--checks { grid-template-columns: repeat(4, 1fr); }
.km-doc-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px 0;
}
.km-doc-field__labelrow {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.km-doc-field__label {
    font-size: .75rem;
    font-weight: 500;
    color: var(--km-text);
    text-transform: uppercase;
    letter-spacing: .03em;
}
/* Підпис поруч із показником (баланс контрагента) стискається першим:
   показник має лишатися видимим цілком */
.km-doc-field__labelrow:has(.km-doc-field__note) .km-doc-field__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.km-doc-field__note {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 400;
    color: var(--km-text-muted);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
.km-doc-field__note.is-negative { color: var(--km-danger); }
.km-doc-field__control {
    min-width: 0;
}
.km-doc-field__control .km-input,
.km-doc-field__control .km-select {
    padding: 5px 8px;
    font-size: .8125rem;
}
.km-doc-field__control .km-textarea {
    padding: 5px 8px;
    font-size: .8125rem;
    min-height: 60px;
}
.km-doc-field__control .km-checkbox {
    margin-top: 4px;
    cursor: pointer;
}
/* Checkbox inline layout in document fields */
.km-doc-field:has(.km-checkbox) {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.km-doc-field:has(.km-checkbox) .km-doc-field__control {
    order: 0;
    margin-top: 2px;
}
.km-doc-field:has(.km-checkbox) .km-doc-field__labelrow { order: 1; }
.km-doc-field:has(.km-checkbox) .km-doc-field__label {
    text-transform: none;
    letter-spacing: 0;
    font-size: .8125rem;
    font-weight: 400;
    color: var(--km-text);
    cursor: pointer;
}
.km-doc-field.is-error .km-input,
.km-doc-field.is-error .km-select,
.km-doc-field.is-error .km-textarea {
    border-color: var(--km-danger);
}

/* Document Tabs */
.km-doc-tabs {
    display: flex;
    border-bottom: 2px solid var(--km-border);
    margin-top: 16px;
    gap: 0;
}
.km-doc-tabs__btn {
    padding: 10px 20px;
    font-size: .875rem;
    font-family: inherit;
    font-weight: 500;
    color: var(--km-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color var(--km-transition), border-color var(--km-transition);
}
.km-doc-tabs__btn:hover {
    color: var(--km-text);
}
.km-doc-tabs__btn.is-active {
    color: var(--km-primary);
    border-bottom-color: var(--km-primary);
}
.km-doc-tab-panel {
    display: none;
    padding-top: 0;
}
.km-doc-tab-panel.is-active {
    display: block;
}

@media (max-width: 1100px) {
    .km-doc-header__owner {
        margin-left: 0;
    }
}

/* Document bottom: comment + totals */
.km-doc-bottom {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    padding: 16px 0 8px;
    border-top: 1px solid var(--km-border);
    margin-top: 8px;
}
.km-doc-bottom__comment .km-textarea,
.km-doc-bottom__comment textarea {
    width: 100%;
    min-height: 80px;
    resize: vertical;
    padding: 8px 10px;
    font-size: .8125rem;
    font-family: inherit;
    color: var(--km-text);
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-sm);
}
.km-doc-bottom__totals {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.km-doc-totals {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.km-doc-totals__vat-check {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8125rem;
    color: var(--km-text);
    cursor: pointer;
    padding: 2px 0;
}
.km-doc-totals__vat-check input[type="checkbox"] {
    accent-color: var(--km-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.km-doc-totals__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .875rem;
}
.km-doc-totals__label {
    color: var(--km-text-muted);
    font-weight: 500;
}
.km-doc-totals__value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 80px;
    text-align: right;
}
.km-doc-totals__row--final {
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--km-border);
}
.km-doc-totals__value--big {
    font-size: 1.25rem;
    font-weight: 700;
}
.km-doc-totals__row--count {
    font-size: .75rem;
    color: var(--km-text-muted);
}
.km-doc-totals__row--count .km-doc-totals__value {
    font-weight: 500;
}

/* Related documents placeholder */
.km-doc-related-empty {
    padding: 40px;
    text-align: center;
    color: var(--km-text-muted);
}

/* ======== Related Documents Flowchart ======== */
.km-flowchart {
    padding: 24px 16px;
    overflow-x: auto;
}
.km-flowchart__canvas {
    position: relative;
    display: inline-block;
    min-height: 100%;
}
.km-flowchart__svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}
.km-flowchart__edge {
    fill: none;
    stroke: var(--km-primary);
    stroke-width: 1.5;
    opacity: .45;
}
.km-flowchart__nodes {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
    padding-right: 8px;
}
.km-flowchart__level {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.km-flowchart__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 160px;
    max-width: 240px;
    padding: 12px 18px;
    border: 1.5px solid var(--km-border);
    border-radius: 10px;
    background: var(--km-bg-card);
    text-decoration: none;
    color: var(--km-text);
    box-shadow: var(--km-shadow);
    transition: border-color .2s, box-shadow .2s, transform .15s;
    cursor: pointer;
    text-align: center;
}
.km-flowchart__node:hover {
    border-color: var(--km-primary);
    box-shadow: var(--km-shadow-lg);
    transform: translateX(2px);
    text-decoration: none;
}
.km-flowchart__node--current {
    border-color: var(--km-primary);
    background: color-mix(in srgb, var(--km-primary) 8%, var(--km-bg-card));
    box-shadow: 0 2px 8px rgba(25,118,210,.18);
}
.km-flowchart__node-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--km-text-muted);
    margin-bottom: 4px;
}
.km-flowchart__node--current .km-flowchart__node-label {
    color: var(--km-primary);
}
.km-flowchart__node-name {
    font-weight: 600;
    font-size: .88rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.km-flowchart__node-meta {
    font-size: .78rem;
    color: var(--km-text-muted);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

/* Create document button */
.km-btn--create-child {
    background: var(--km-accent-light, #e8f0fe);
    color: var(--km-accent, #1a73e8);
    border-color: var(--km-accent, #1a73e8);
}
.km-btn--create-child:hover {
    background: var(--km-accent, #1a73e8);
    color: #fff;
}

/* Unsaved changes modal */
.km-modal-overlay--unsaved {
    z-index: 10001;
}
.km-unsaved-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Responsive for document form */
@media (max-width: 900px) {
    .km-doc-fields {
        grid-template-columns: 1fr;
    }
    .km-doc-row--3,
    .km-doc-row--4,
    .km-doc-row--checks {
        grid-template-columns: 1fr 1fr;
    }
    .km-doc-bottom {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
    .km-doc-row {
        grid-template-columns: 1fr !important;
    }
    .km-doc-field__label {
        font-size: .7rem;
    }
}

/* ---------- Tables ---------- */
.km-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius);
    background: var(--km-bg-card);
}
.km-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
}
.km-table th {
    position: sticky;
    top: 0;
    background: var(--km-bg-card);
    border-bottom: 2px solid var(--km-border);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: .75rem;
    color: var(--km-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
    z-index: 1;
}
.km-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--km-border);
    vertical-align: middle;
}
.km-table tbody tr:hover { background: var(--km-row-hover); }
.km-table tbody tr:nth-child(even) { background: var(--km-row-stripe); }
.km-table tbody tr:nth-child(even):hover { background: var(--km-row-hover); }
.km-table__row--clickable { cursor: pointer; }

/* Колонки */
/* Колонки .col-id немає: внутрішній ідентифікатор в інтерфейс не виходить */
.col-xs { width: 60px; text-align: center; }
.col-sm { width: 100px; }
.col-md { width: 160px; }
.col-num { width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.col-actions { width: 80px; text-align: center; }

.km-table__link {
    color: var(--km-primary);
    font-weight: 500;
}
.km-table__link:hover { color: var(--km-primary-hover); text-decoration: none; }

/* Sort headers */
.km-sort {
    color: var(--km-text-muted);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.km-sort:hover { color: var(--km-text); }
.km-sort--asc, .km-sort--desc { color: var(--km-primary); }

/* ---------- Badges ---------- */
.km-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: .7rem;
    font-weight: 600;
    border-radius: 10px;
    white-space: nowrap;
}
.km-badge--success { background: #e8f5e9; color: #2e7d32; }
/* #8a5300 на #fff8e1 — ~6:1 (попередній #f57f17 давав ~3:1, нижче AA) */
.km-badge--warning { background: #fff8e1; color: #8a5300; }
.km-badge--danger { background: #ffebee; color: #c62828; }
.km-badge--info { background: #e3f2fd; color: #1565c0; }
.km-badge--neutral { background: #eeeeee; color: #616161; }

[data-theme="dark"] .km-badge--success { background: #1b5e2055; color: #66bb6a; }
[data-theme="dark"] .km-badge--warning { background: #f57f1733; color: #fdd835; }
/* #ff9d99 на темній підкладці — ~5:1 (попередній #ef5350 давав ~3.4:1) */
[data-theme="dark"] .km-badge--danger  { background: #c6282833; color: #ff9d99; }
[data-theme="dark"] .km-badge--info    { background: #1565c033; color: #42a5f5; }
[data-theme="dark"] .km-badge--neutral { background: #42424255; color: #bdbdbd; }

/* Валюта та курс документа: компактний блок у кінці рядка шапки
   (селект + підпис курсу з олівцем) */
.km-doc-header__currency {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
@media (max-width: 1100px) {
    .km-doc-header__currency { margin-left: 0; }
}
/* Стала ширина: Tom Select ховає чип обраної валюти при відкритті списку,
   і блок без ширини стискався б до порожнього інпута (стрибок ширини) */
.km-doc-currency__select { flex: 0 0 120px; width: 120px; }
.km-doc-currency__select .ts-wrapper { width: 100%; }
.km-doc-currency__select .km-doc-field { margin: 0; }
.km-doc-currency__select .km-select,
.km-doc-currency__select .ts-wrapper .ts-control {
    min-height: var(--km-control-h);
    max-height: var(--km-control-h);
}
.km-doc-header__currency.is-error .ts-control,
.km-doc-header__currency.is-error .km-select { border-color: var(--km-danger); }
/* Заблокована валюта: селект не приймає кліків, клік ловить сам блок
   і показує пояснення сповіщенням (forms/currency.js) */
.km-doc-header__currency.is-locked { cursor: not-allowed; }
.km-doc-header__currency.is-locked .km-doc-currency__select {
    pointer-events: none;
    opacity: .6;
}
.km-doc-currency__rate {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: var(--km-text-muted);
    white-space: nowrap;
}
.km-doc-currency__edit {
    padding: 2px;
    line-height: 1;
    color: var(--km-text-muted);
}
.km-doc-currency__edit:hover { color: var(--km-primary); }
/* Валюта обліку: курс завжди 1, олівець редагування ховається
   (display у .km-btn інакше перекриває атрибут hidden) */
.km-doc-currency__edit[hidden] { display: none; }

/* Швидкий вибір валюти ISO 4217 у картці нової валюти */
.km-currency-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.km-currency-picker .km-select { min-width: 260px; }
.km-currency-picker__note {
    font-size: .78rem;
    color: var(--km-text-muted);
}

/* Модалка «Курс валюти документа»: вибір між курсом довідника і власним */
.km-rate-choice {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.km-rate-choice__option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}
.km-rate-choice__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.km-rate-choice__formula {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: .875rem;
}
.km-rate-choice__note {
    font-size: .78rem;
    color: var(--km-text-muted);
}
.km-input--inline { width: 120px; }

/* Блок «Курс» у картці валюти: формула курсу й кнопка оновлення з НБУ */
.km-currency-rate { margin-top: 10px; }
.km-currency-rate.is-empty { display: none; }
.km-currency-rate__line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 28px;
}
.km-currency-rate__formula {
    font-size: .9rem;
    color: var(--km-text);
}
.km-currency-rate__formula:empty { display: none; }
.km-currency-rate__note {
    margin: 6px 0 0;
    font-size: .78rem;
    color: var(--km-text-muted);
}
/* hidden на полях блока курсу й на кнопці оновлення: display у .km-doc-field
   і .km-btn інакше перекриває атрибут hidden */
.km-doc-field[hidden] { display: none; }
.km-currency-rate .km-btn[hidden] { display: none; }

/* Рядок-бейдж над карткою (наприклад, «Валюта обліку») */
.km-badge-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    flex-wrap: wrap;
}
.km-badge-row__note {
    font-size: .78rem;
    color: var(--km-text-muted);
}
/* Основне питання модалки. Потрібен саме абзац: тіло модалки —
   flex-колонка, і без обгортки inline-елементи речення (<strong> з
   назвою об'єкта) стають окремими рядками, а знак питання з'їжджає
   на третій рядок. */
.km-modal__text {
    margin: 0;
}
/* Пояснення в тілі модалки (дрібним, під основним питанням) */
.km-modal__note {
    margin-top: 8px;
    font-size: .8rem;
    color: var(--km-text-muted);
}

/* ---------- Payment type label (text-only colour) ---------- */
.km-type-label          { font-size: .8125rem; white-space: nowrap; }
.km-type-label--in      { color: #2e7d32; }
.km-type-label--out     { color: #c62828; }
[data-theme="dark"] .km-type-label--in  { color: #66bb6a; }
[data-theme="dark"] .km-type-label--out { color: #ef5350; }

/* ---------- Pagination ---------- */
.km-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 0;
}
.km-pagination__link,
.km-pagination__current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: .8125rem;
    border-radius: var(--km-radius-sm);
    transition: background var(--km-transition);
}
.km-pagination__link {
    color: var(--km-primary);
    cursor: pointer;
    text-decoration: none;
}
.km-pagination__link:hover { background: var(--km-row-hover); text-decoration: none; }
.km-pagination__link.is-disabled {
    color: var(--km-text-muted);
    opacity: .5;
    cursor: default;
    pointer-events: none;
}
.km-pagination__current {
    background: var(--km-primary);
    color: var(--km-primary-text);
    font-weight: 600;
}
.km-pagination__dots { color: var(--km-text-muted); padding: 0 4px; }

/* ---------- Detail table ---------- */
.km-detail-table {
    width: 100%;
    border-collapse: collapse;
}
.km-detail-table th {
    text-align: left;
    padding: 8px 12px;
    font-weight: 500;
    color: var(--km-text-muted);
    font-size: .8125rem;
    width: 220px;
    white-space: nowrap;
    border-bottom: 1px solid var(--km-border);
}
.km-detail-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--km-border);
}

/* ---------- Empty state ---------- */
.km-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--km-text-muted);
}
.km-empty__icon { font-size: 2.5rem; margin-bottom: 12px; opacity: .5; }
/* Скидання робить svg блочним, тож text-align: center на .km-empty його
   не центрує — іконка порожнього стану притискалась до лівого краю. */
.km-empty__icon > svg,
.km-stub__icon > svg { margin-left: auto; margin-right: auto; }
.km-empty__title { font-size: 1rem; font-weight: 600; margin-bottom: 6px; color: var(--km-text); }
.km-empty__text { font-size: .875rem; }

/* ---------- Theme toggle ---------- */
.km-theme-toggle {
    cursor: pointer;
    color: var(--km-nav-text);
    transition: color var(--km-transition);
}
.km-theme-toggle:hover { color: var(--km-nav-active-text); }

/* ---------- SPA fade ---------- */
.km-page-content {
    transition: opacity .15s ease;
}
.km-page-content.is-loading { opacity: .4; pointer-events: none; }

/* ---------- Toast notifications ---------- */
.km-toast-container {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
    max-width: 400px;
}
.km-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--km-radius);
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    box-shadow: var(--km-shadow-lg);
    font-size: .8125rem;
    color: var(--km-text);
    pointer-events: auto;
    animation: km-toast-in .25s ease forwards;
    cursor: pointer;
}
.km-toast.is-hiding {
    animation: km-toast-out .2s ease forwards;
}
.km-toast--success { border-left: 3px solid var(--km-success); }
.km-toast--error   { border-left: 3px solid var(--km-danger); }
.km-toast--warning { border-left: 3px solid var(--km-warning); }
.km-toast--info    { border-left: 3px solid var(--km-info); }
.km-toast__icon { font-size: 1.1rem; flex-shrink: 0; }
.km-toast__text { flex: 1; }
@keyframes km-toast-in {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes km-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(30px); }
}

/* ---------- Spinner ---------- */
.km-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--km-border);
    border-top-color: var(--km-primary);
    border-radius: 50%;
    animation: km-spin .6s linear infinite;
}
@keyframes km-spin { to { transform: rotate(360deg); } }

/* ---------- Footer ---------- */
.km-footer {
    padding: 10px 24px;
    font-size: .75rem;
    color: var(--km-text-muted);
    text-align: center;
    border-top: 1px solid var(--km-border);
    flex-shrink: 0;
    /* Підсумки й пагінація завжди на очах — футер липне до низу вікна
       (як панель підсумків у МойСклад) */
    position: sticky;
    bottom: 0;
    z-index: 90;
    background: var(--km-bg-card);
}

/* ---------- Settings layout ---------- */
.km-settings-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.km-settings-nav {
    width: 220px;
    flex-shrink: 0;
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius);
    padding: 4px 0;
}
.km-settings-nav__item {
    display: block;
    padding: 10px 16px;
    font-size: .875rem;
    color: var(--km-text);
    text-decoration: none;
    transition: background var(--km-transition);
}
.km-settings-nav__item:hover {
    background: var(--km-hover);
}
.km-settings-nav__item.is-active {
    color: var(--km-primary);
    font-weight: 600;
    background: rgba(25,118,210,.06);
}
.km-settings-nav__item--danger {
    color: var(--km-danger, #d32f2f);
}
.km-settings-nav__item--danger:hover {
    background: rgba(211,47,47,.06);
}
.km-settings-nav__separator {
    padding: 8px 16px 4px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--km-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    border-top: 1px solid var(--km-border);
    margin-top: 4px;
}
.km-settings-nav__separator:empty {
    padding: 0;
    margin-top: 4px;
}
/* Заголовок розділу меню з кнопкою («Довідники» + «Довідник») */
.km-settings-nav__separator--actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.km-settings-nav__add {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
/* Панель додаткового довідника (бічна панель налаштувань) */
.km-ce-panel__form { display: flex; flex-direction: column; gap: 12px; }
.km-ce-panel__subtitle { margin-top: 4px; }
.km-ce-panel__actions { margin-top: 8px; }
.km-ce-panel__delete { margin-left: auto; }
/* Radio group */
.km-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.km-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: .875rem;
    color: var(--km-text);
}
.km-radio-label input[type="radio"] {
    accent-color: var(--km-primary);
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}
.km-settings-content {
    flex: 1;
    min-width: 0;
}
.km-settings-dir-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.km-settings-dir-item {
    display: block;
    padding: 8px 12px;
    font-size: .875rem;
    color: var(--km-text);
    text-decoration: none;
    border-radius: var(--km-radius-sm);
    transition: background var(--km-transition);
}
.km-settings-dir-item:hover {
    background: var(--km-hover);
}

/* ---------- Mobile hamburger ---------- */
.km-hamburger {
    display: none;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--km-nav-text);
    cursor: pointer;
    margin-right: 8px;
}


/* ---------- Catalog layout ---------- */
.km-catalog {
    display: flex;
    align-items: flex-start;
    gap: 0;
    min-height: 0;
}
.km-catalog__sidebar {
    width: 220px;
    flex-shrink: 0;
    border-right: 1px solid var(--km-border);
    align-self: stretch;
    min-height: calc(100vh - var(--km-nav-height) - 48px);
}
/* Дерево груп липне під шапкою й підменю, а не під верхом
   вікна: з top: 12px верхні групи заїжджали під підменю (воно
   стоїть над ними за z-index) і просто зникали з очей. */
.km-catalog__sidebar-inner {
    padding: 8px 0;
    position: sticky;
    top: calc(var(--km-nav-height) + var(--km-sub-height) + 12px);
}
/* Без підменю (.is-empty) дерево липне одразу під навбаром -
   так само, як панель кнопок документа (.km-doc-bar) */
.km-submenu.is-empty ~ .km-main .km-catalog__sidebar-inner {
    top: calc(var(--km-nav-height) + 12px);
}
.km-catalog__folder {
    display: block;
    padding: 6px 16px;
    font-size: .875rem;
    color: var(--km-text);
    text-decoration: none;
    border-radius: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background var(--km-transition), color var(--km-transition);
}
.km-catalog__folder:hover {
    background: var(--km-row-hover);
    color: var(--km-primary);
    text-decoration: none;
}
.km-catalog__folder.is-active {
    background: var(--km-primary-bg, rgba(var(--km-primary-rgb, 37,99,235), .1));
    color: var(--km-primary);
    font-weight: 500;
}
.km-catalog__folder--empty {
    color: var(--km-text-muted);
    font-style: italic;
    cursor: default;
}
.km-catalog__folder--empty:hover {
    background: none;
    color: var(--km-text-muted);
}
.km-catalog__folder-wrap {
    display: flex;
    align-items: center;
    position: relative;
}
.km-catalog__folder-wrap .km-catalog__folder {
    flex: 1;
    min-width: 0;
}
.km-catalog__folder-edit {
    display: none;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 3px 4px;
    margin-right: 4px;
    cursor: pointer;
    color: var(--km-text-muted);
    border-radius: var(--km-radius-sm);
    line-height: 0;
    transition: color var(--km-transition), background var(--km-transition);
}
.km-catalog__folder-wrap:hover .km-catalog__folder-edit {
    display: inline-flex;
    align-items: center;
}
.km-catalog__folder-edit:hover {
    color: var(--km-primary);
    background: var(--km-row-hover);
}

/* Modal */
.km-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.km-modal {
    background: var(--km-bg-card);
    border-radius: var(--km-radius);
    box-shadow: var(--km-shadow-lg);
    width: 100%;
    min-width: 360px;
    max-width: 480px;
    padding: 0;
    overflow: hidden;
}
.km-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--km-border);
}
.km-modal__title {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--km-text);
}
.km-modal__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--km-text-muted);
    font-size: 1rem;
    padding: 2px 6px;
    border-radius: var(--km-radius-sm);
    transition: color var(--km-transition);
}
.km-modal__close:hover { color: var(--km-text); }
.km-modal__body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.km-modal__error {
    font-size: .8125rem;
    color: var(--km-danger);
    margin: 0;
}
.km-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--km-border);
}
.km-input--full { width: 100%; box-sizing: border-box; }
[x-cloak] { display: none !important; }
.km-catalog__main {
    flex: 1;
    min-width: 0;
    padding: 0 0 0 24px;
}

/* Archived rows */
.km-table__row--archived td {
    color: var(--km-text-muted);
    opacity: .65;
}

/* Позначка архівного запису: сіра літера «А» біля назви (як у МойСклад) */
.km-archived-mark {
    display: inline-block;
    min-width: 15px;
    padding: 0 3px;
    margin-left: 5px;
    border-radius: 3px;
    background: var(--km-border);
    color: var(--km-text-muted);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 15px;
    text-align: center;
    vertical-align: middle;
}
.km-pos-product-link.is-archived,
td.is-archived {
    color: var(--km-text-muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .km-main { padding: 16px; }
}

@media (max-width: 768px) {
    .km-hamburger { display: flex; }

    .km-navbar__menu {
        display: none;
        position: absolute;
        top: var(--km-nav-height);
        left: 0;
        right: 0;
        background: var(--km-nav-bg);
        flex-direction: column;
        height: auto;
        padding: 8px 0;
        box-shadow: var(--km-shadow-lg);
        z-index: 1001;
    }
    .km-navbar__menu.is-open { display: flex; }

    .km-navbar__item { height: auto; }
    .km-navbar__link { padding: 10px 20px; height: auto; }

    .km-submenu { padding: 0 8px; }
    .km-submenu__link { padding: 0 10px; font-size: .75rem; }

    .km-main { padding: 12px; }
    .km-page-header { flex-direction: column; align-items: flex-start; }

    .km-navbar__user-name,
    .km-navbar__user-login { display: none; }

    .km-settings-layout { flex-direction: column; }
    .km-settings-nav { width: 100%; }
}

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

/* ================================================================
   Прогрес-бар SPA-навігації
   ================================================================ */
.km-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--km-primary);
    z-index: 3000;
    opacity: 0;
    transition: width .25s ease, opacity .2s ease;
    pointer-events: none;
}
.km-progress.is-active {
    opacity: 1;
}

/* ================================================================
   Числові колонки: табличні цифри, вирівнювання праворуч
   ================================================================ */
.km-table .col-num,
.km-positions__sum,
.km-positions__vat-sum,
.km-doc-totals__value {
    font-variant-numeric: tabular-nums;
}
.km-table td.col-num,
.km-table th.col-num {
    text-align: right;
}

/* ================================================================
   Tom Select — темізація під km-змінні
   ================================================================ */
.ts-wrapper {
    min-width: 0;
}
/* TomSelect переносить class вихідного <select>/<input> (km-select/km-input)
   на .ts-wrapper, тож обгортка успадковує рамку/фон/радіус/падінг від .km-select
   і навколо поля з'являється зайва зовнішня рамка (подвійний бокс). Прибираємо
   оформлення з обгортки — видиме поле малює лише .ts-control. */
.ts-wrapper.km-select,
.ts-wrapper.km-input {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.ts-wrapper.single .ts-control,
.ts-wrapper .ts-control {
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-sm);
    color: var(--km-text);
    font-size: .8125rem;
    padding: 5px 8px;
    /* Фіксована висота, щоб поле не «стрибало» при фокусі/введенні тексту */
    min-height: 32px;
    box-sizing: border-box;
    align-items: center;
    flex-wrap: nowrap;
    box-shadow: none;
    transition: border-color var(--km-transition);
}
.ts-wrapper.focus .ts-control {
    border-color: var(--km-primary);
    box-shadow: none;
}
/* Стрілка (каретка) у кінці кожного селект-поля.
   Вендорений білд Tom Select її не малює — додаємо власний шеврон.
   Праве відступ-поле контрол формує зі змінної --ts-pr-caret (Tom Select
   задає padding-right через неї з !important), щоб стрілка не зливалася
   з текстом. Для селектів з кнопкою очищення (×) вона за цією ж змінною
   стає ліворуч від стрілки. */
.ts-wrapper.single .ts-control {
    --ts-pr-caret: 26px;
}
.ts-wrapper.single .ts-control::after {
    content: "";
    position: absolute;
    right: 11px;
    top: calc(50% - 3px);
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--km-text-muted);
    border-bottom: 1.5px solid var(--km-text-muted);
    transform: rotate(45deg);
    pointer-events: none;
    margin: 0;
}
/* Під час редагування тексту в одиночному селекті ховаємо «чип» вибраного
   значення, щоб текст не дублювався (ми показуємо його в полі введення).
   Виняток — «прості» селекти без поля пошуку (.ts-plain, напр. ставка ПДВ):
   там нема куди вводити текст, тож значення має лишатися видимим при фокусі. */
.ts-wrapper.single.input-active.has-items:not(.ts-plain) .ts-control > .item {
    display: none;
}
.ts-control input {
    color: var(--km-text);
    font-size: .8125rem;
}
.ts-control input::placeholder {
    color: var(--km-text-muted);
}
.ts-dropdown {
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-sm);
    box-shadow: var(--km-shadow-lg);
    color: var(--km-text);
    font-size: .8125rem;
    z-index: 1100;
    margin: 2px 0 0;
}
.ts-dropdown .option {
    padding: 6px 10px;
}
.ts-dropdown .active {
    background: var(--km-row-hover);
    color: var(--km-text);
}
.ts-dropdown .no-results,
.ts-dropdown .loading-more-results {
    padding: 8px 10px;
    color: var(--km-text-muted);
}
.ts-dropdown-content {
    max-height: 260px;
}
/* Кнопка очищення поля у кінці селекта.
   Іконка — власний гліф віджета (⨯); вендорний стиль лишає його без розмірів
   і зони натискання й показує лише при наведенні на поле, тож у нього важко
   влучити. Тут: квадрат 22x22 з гліфом по центру (flex, гліф стає анонімним
   елементом розкладки) і постійна видимість, поки в полі є значення.
   --ts-pr-clear-button — ширина, яку Tom Select резервує в падінгу контрола
   (padding-right: max(--ts-pr-min, --ts-pr-clear-button + --ts-pr-caret)),
   тож текст значення не заходить ні під хрестик, ні під стрілку. */
.ts-wrapper.plugin-clear_button {
    --ts-pr-clear-button: 26px;
}
.ts-wrapper.plugin-clear_button .clear-button {
    right: calc(var(--ts-pr-caret) - 2px);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    border-radius: var(--km-radius-sm);
    color: var(--km-text-muted);
    transition: background var(--km-transition), color var(--km-transition);
}
/* km-has-value ставить syncClearButton у static/js/app.js: власний клас
   Tom Select has-items тут не годиться, бо з allowEmptyOption порожня
   опція теж рахується «елементом» і хрестик висів би на порожньому полі */
.ts-wrapper.plugin-clear_button.km-has-value .clear-button {
    opacity: 1;
}
/* На порожньому полі хрестика немає навіть при наведенні чи фокусі: вендорні
   правила показують його для будь-якого «елемента», зокрема порожньої опції.
   Специфічність тут така сама, як у них, а app.css підключений пізніше. */
.ts-wrapper.plugin-clear_button:not(.km-has-value):not(.disabled) .clear-button {
    opacity: 0;
    pointer-events: none;
}
/* Тло перебиває вендорне background: transparent !important */
.ts-wrapper.plugin-clear_button .clear-button:hover {
    background: var(--km-hover) !important;
    color: var(--km-text);
}
/* Довге значення обрізається трикрапкою, а не заповзає під кнопки */
.ts-wrapper.single .ts-control > .item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Кнопка видалення в «чипах» мультиселекта — вигляд плагіна remove_button
   Tom Select: хрестик у правій частині чипа, відділений вертикальною
   лінією, з підсвіткою фону при наведенні. Вендорні правила задають ці
   кольори жорстко (#d0d0d0, rgba(0,0,0,.05), #fff у disabled) і в темній
   темі виглядають чужорідно, тож перевизначаємо їх km-змінними; геометрію
   (padding-right: 0 у чипа, відступ і рамка ліворуч) лишаємо вендорну. */
.ts-wrapper.plugin-remove_button .ts-control > .item {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
}
/* Довгий лейбл скорочується трикрапкою, а не виштовхує хрестик за межі
   чипа: сам текст обгорнуто у span (render.item у static/js/app.js) —
   голий текстовий вузол стає анонімним flex-елементом, до якого CSS не
   застосувати, і кнопку видалення зрізало полем з overflow: hidden. */
.ts-wrapper.plugin-remove_button .ts-control > .item .km-ts-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.ts-wrapper.plugin-remove_button .ts-control > .item .km-state-dot {
    flex-shrink: 0;
}
/* Кілька значень переносяться на новий рядок (як у стандартному Tom Select),
   а не тягнуться в один рядок за межі поля. Панель фільтрів — виняток:
   там поле фіксованої висоти з горизонтальним скролом (див. нижче). */
.ts-wrapper.multi .ts-control {
    flex-wrap: wrap;
    height: auto;
}
.ts-wrapper.plugin-remove_button .ts-control > .item .remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 18px;
    padding: 0 5px;
    color: var(--km-text-muted);
    font-size: .9375rem;
    line-height: 1.3;
    text-decoration: none;
    border-radius: 0 var(--km-radius-sm) var(--km-radius-sm) 0;
    transition: background var(--km-transition), color var(--km-transition);
}
.ts-wrapper.plugin-remove_button:not(.rtl) .ts-control > .item .remove {
    margin-left: 6px;
    border-left: 1px solid color-mix(in srgb, var(--km-primary) 28%, transparent);
}
.ts-wrapper.plugin-remove_button .ts-control > .item .remove:hover {
    background: color-mix(in srgb, var(--km-primary) 18%, transparent);
    color: var(--km-text);
}
.ts-wrapper.plugin-remove_button:not(.rtl).disabled .ts-control > .item .remove {
    border-left-color: var(--km-border);
    color: var(--km-text-muted);
}
.km-doc-field.is-error .ts-control {
    border-color: var(--km-danger);
}
/* ===== Картка товару (товар / послуга / комплект / модифікація) ===== */
.km-goods-name {
    margin: 16px 0 0;
}
.km-goods-name__label {
    display: block;
    font-size: .75rem;
    font-weight: 500;
    color: var(--km-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 4px;
}
.km-goods-name .km-input {
    width: 100%;
    font-size: 1.125rem;
    font-weight: 600;
    padding: 10px 12px;
}
.km-goods-name.is-error .km-input {
    border-color: var(--km-danger);
}
.km-goods-layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    margin-top: 16px;
}
.km-goods-layout__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.km-goods-layout__main {
    min-width: 0;
}
/* Ліва колонка картки товару — по одному полю в рядок */
.km-goods-layout__side .km-doc-row {
    grid-template-columns: 1fr;
}
.km-goods-layout__main .km-doc-tabs {
    margin-top: 0;
}
.km-employee-layout .km-employee-section + .km-employee-section {
    margin-top: 16px;
}
.km-employee-updated {
    color: var(--km-text-muted);
    font-size: .8125rem;
}
.km-readonly-value {
    min-height: 30px;
    display: flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-sm);
    background: var(--km-bg);
    color: var(--km-text-muted);
}
.km-radio-label.is-disabled {
    opacity: .58;
    pointer-events: none;
}
.km-employee-access {
    text-align: center;
    font-weight: 700;
}
.km-employee-access__enabled { color: var(--km-success); }
.km-employee-access__disabled { color: var(--km-text-muted); }
/* Галочка-ознака в списку (валюта обліку) */
.km-flag-check { color: var(--km-success); font-weight: 600; }
.km-employee-name {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.km-employee-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}
/* Модалка запрошення співробітника по email (сторінка створення) */
.km-invite-email {
    margin: 10px 0 14px;
    font-weight: 600;
    word-break: break-all;
}
/* Заголовок списку на вкладці налаштувань (менший за сторінковий) */
.km-settings-list-header {
    margin-bottom: 16px;
}
.km-settings-list-title {
    font-size: 1.125rem;
}
.km-list-help {
    margin: -8px 0 12px;
    font-size: .8125rem;
}
.km-list-help-card {
    margin-top: 16px;
}

/* Пояснення над списком (наприклад, про валюту обліку) */
.km-list-note {
    margin: -4px 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius);
    background: var(--km-bg-card);
    font-size: .8125rem;
    color: var(--km-text-muted);
}
.km-list-note p { margin: 0; }
.km-list-note p + p { margin-top: 6px; }
.km-goods-block__title {
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: 10px;
}
.km-goods-tab-card {
    margin-top: 12px;
}
.km-goods-placeholder,
.km-goods-hint {
    font-size: .8125rem;
    color: var(--km-text-muted);
}
.km-goods-tab-actions {
    margin-top: 12px;
}
/* Показники картки контрагента: плитки значень за групами (пункт 11 плану) */
.km-cp-group + .km-cp-group {
    margin-top: 20px;
}
.km-cp-group__title {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--km-text-muted);
    margin-bottom: 8px;
}
.km-cp-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
.km-cp-tile {
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius);
    padding: 10px 12px;
    background: var(--km-bg);
}
.km-cp-tile__value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--km-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.km-cp-tile__unit {
    font-size: .8125rem;
    font-weight: 400;
    color: var(--km-text-muted);
}
.km-cp-tile__label {
    margin-top: 2px;
    font-size: .75rem;
    color: var(--km-text-muted);
}
/* Від'ємний баланс і збиток — акцентним кольором */
.km-cp-tile--negative .km-cp-tile__value {
    color: var(--km-danger);
}
.km-cp-balance {
    max-width: 480px;
}
.km-goods-prices__value {
    width: 240px;
}
.km-goods-prices td .km-input {
    max-width: 220px;
}
.km-goods-components__qty {
    width: 160px;
}
.km-goods-components__del {
    width: 90px;
    text-align: center;
}
.km-goods-components td .km-input {
    max-width: 140px;
}
.km-goods-components td .ts-wrapper {
    min-width: 240px;
}

/* Зображення картки товару */
.km-goods-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.km-goods-image {
    margin: 0;
    text-align: center;
}
.km-goods-image img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--km-border);
    display: block;
}
.km-goods-image--main {
    grid-column: 1 / -1;
}
.km-goods-image--main img {
    height: 200px;
    object-fit: contain;
    background: var(--km-bg);
}
.km-goods-image__delete {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    color: var(--km-text-muted);
    margin-top: 4px;
    cursor: pointer;
}
.km-goods-upload {
    font-size: .8125rem;
    margin-bottom: 8px;
}
/* Вибір файлів: нативний контрол не темізується й підписаний мовою
   браузера, тож ховаємо його за міткою-кнопкою (components/file_upload.html) */
.km-file-upload {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    cursor: pointer;
}
.km-file-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.km-file-upload__btn {
    pointer-events: none;
}
.km-file-upload:hover .km-file-upload__btn {
    background: var(--km-bg-hover);
}
.km-file-upload input[type="file"]:focus-visible + .km-file-upload__btn {
    outline: 2px solid var(--km-primary);
    outline-offset: 2px;
}
.km-file-upload__names {
    font-size: .8125rem;
    color: var(--km-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 340px;
}
.km-file-upload.is-filled .km-file-upload__names {
    color: var(--km-text);
}

/* Таби «Упаковки», «Залишки», «Історія», «Файли» */
.km-goods-packs__qty {
    width: 180px;
}
.km-goods-packs__del,
.km-goods-files__del {
    width: 90px;
    text-align: center;
}
.km-goods-packs td .km-input {
    max-width: 200px;
}
.km-goods-packs td .ts-wrapper {
    min-width: 200px;
}
.km-goods-stock__total td {
    font-weight: 600;
    border-top: 2px solid var(--km-border);
}
.km-goods-stock + .km-goods-hint,
.km-goods-files + .km-goods-upload {
    margin-top: 10px;
}

/* Звіти: перемикач варіантів у шапці (по товарах / по складах) */
.km-report-variants {
    display: inline-flex;
    border: 1px solid var(--km-border);
    border-radius: 6px;
    overflow: hidden;
}
.km-report-variants__btn {
    padding: 6px 14px;
    font-size: .8125rem;
    color: var(--km-text);
    background: var(--km-bg-card);
    text-decoration: none;
    border-right: 1px solid var(--km-border);
    white-space: nowrap;
}
.km-report-variants__btn:last-child {
    border-right: none;
}
.km-report-variants__btn:hover {
    background: var(--km-row-hover);
    text-decoration: none;
}
.km-report-variants__btn.is-active {
    background: var(--km-accent);
    color: #fff;
}

/* Звіт «Залишки» */
.km-stock-report__toggle {
    width: 32px;
    padding-right: 0;
}
.km-stock-report__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    color: var(--km-text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: transform .15s ease;
}
.km-stock-report__chevron:hover {
    background: var(--km-row-hover);
    color: var(--km-text);
}
.km-stock-report__chevron.is-open {
    transform: rotate(90deg);
}
.km-stock-report__store-row td {
    background: var(--km-bg);
    font-size: .8125rem;
    color: var(--km-text-muted);
}
.km-stock-report__store-name {
    padding-left: 24px;
}
.km-stock-report__negative {
    color: var(--km-danger);
}
.km-stock-report__total td {
    font-weight: 600;
    border-top: 2px solid var(--km-border);
}

/* Майстер імпорту довідника */
.km-import-steps {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    counter-reset: km-import-step;
}
.km-import-steps li {
    counter-increment: km-import-step;
    padding: 6px 14px;
    border: 1px solid var(--km-border);
    border-radius: 6px;
    color: var(--km-text-muted);
    font-size: .8125rem;
}
.km-import-steps li::before {
    content: counter(km-import-step) ". ";
}
.km-import-steps li.is-active {
    border-color: var(--km-primary);
    color: var(--km-text);
    font-weight: 600;
}
.km-import-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 16px;
    border: 2px dashed var(--km-border);
    border-radius: var(--km-radius);
    background: var(--km-bg-card);
    cursor: pointer;
    text-align: center;
}
.km-import-drop.is-over {
    border-color: var(--km-primary);
    background: var(--km-primary-bg);
}
.km-import-drop input[type="file"] {
    display: none;
}
.km-import-drop__title {
    font-weight: 600;
}
.km-import-drop__hint,
.km-import-drop__file {
    color: var(--km-text-muted);
    font-size: .8125rem;
}
.km-import-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.km-import-preview th {
    vertical-align: top;
    min-width: 180px;
}
.km-import-preview__head {
    font-weight: 600;
    margin-bottom: 6px;
}
.km-import-params {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.km-import-progress {
    margin-bottom: 16px;
}
.km-import-progress__bar {
    height: 8px;
    border-radius: 4px;
    background: var(--km-row-stripe);
    overflow: hidden;
}
.km-import-progress__fill {
    height: 100%;
    width: 0;
    background: var(--km-primary);
    transition: width .3s ease;
}
.km-import-progress__text {
    margin-top: 6px;
    color: var(--km-text-muted);
    font-size: .8125rem;
}
.km-import-errors {
    margin-top: 20px;
}

/* База знань */
.km-help__empty {
    padding: 8px 12px;
}
.km-help__summary {
    color: var(--km-text-muted);
    margin-bottom: 12px;
}
.km-help__body h2 {
    font-size: 1.25rem;
    margin: 0 0 12px;
}
.km-help__body h3 {
    font-size: 1rem;
    margin: 20px 0 8px;
}
.km-help__body p {
    margin-bottom: 10px;
    line-height: 1.55;
}
.km-help__body ul {
    margin: 0 0 12px 20px;
}
.km-help__body li {
    margin-bottom: 4px;
    line-height: 1.5;
}
.km-help__body code {
    background: var(--km-row-stripe);
    padding: 1px 4px;
    border-radius: 3px;
}
.km-help__body .km-table-wrap {
    margin-bottom: 12px;
}
.km-help__body ol {
    margin: 0 0 12px 22px;
}
.km-help__body ol li {
    padding-left: 2px;
}
.km-help__figure {
    margin: 12px 0 18px;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius);
    background: var(--km-bg-card);
    overflow: hidden;
}
.km-help__figure img {
    display: block;
    width: 100%;
    height: auto;
}
.km-help__figure figcaption {
    padding: 8px 12px;
    font-size: .8125rem;
    color: var(--km-text-muted);
    border-top: 1px solid var(--km-border);
    background: var(--km-row-stripe);
}
.km-help__note {
    padding: 10px 14px;
    border-radius: 8px;
    margin: 4px 0 14px;
    background: var(--km-v2-info-soft, rgba(11, 107, 203, .10));
    border: 1px solid var(--km-v2-info-soft, rgba(11, 107, 203, .20));
    border-left: 3px solid var(--km-info, #0b6bcb);
}
.km-help__note p {
    margin: 0;
}
@media (max-width: 900px) {
    .km-help {
        grid-template-columns: 1fr;
    }
}

/* Лічильник непрочитаних згадок у шапці */
.km-navbar__icon-btn--badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.km-navbar__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--km-danger);
    color: #fff;
    font-size: .6875rem;
    line-height: 16px;
    text-align: center;
}

/* Бічна шухляда - спільна оболонка панелі інтеграцій і панелі чату
   (docs/plan_chat_panel.md). Тут геометрія й поведінка; вміст - у
   km-ig-panel__* і km-chat-*. Одна шухляда на екрані: відкриття однієї
   закриває другу (static/ts/core/drawer.js).

   Підкладки немає жодної: шухляда не затемнює сторінку і не
   блокує її прокрутку. Затемнення все одно виходило частковим
   (шапка й підменю лежать над нею за z-index), а з рейкою інтеграцій
   підкладку все одно доводилося ховати. Закривають шухляду «×» і Esc. */
.km-drawer {
    display: none;
    pointer-events: none;
}
.km-drawer.is-open {
    display: block;
    pointer-events: auto;
}
.km-drawer__card {
    position: fixed;
    top: var(--km-ig-top, 102px);
    right: 0;
    bottom: 0;
    width: 440px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--km-bg-card);
    border-left: 1px solid var(--km-border);
    box-shadow: var(--km-shadow-lg);
    overflow: hidden;
    z-index: 600;
}
/* З рейкою шухляда виїжджає поруч із нею і документ не затемнює */
body.has-ig-rail .km-drawer__card {
    right: 52px;
}
.km-drawer__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
@media (max-width: 640px) {
    .km-drawer__card {
        top: auto;
        right: 0;
        left: 0;
        width: auto;
        max-height: 85vh;
        border-radius: 14px 14px 0 0;
    }
    /* Рейка лежить поверх шухляди, тож на вузькому екрані шухляда
       не доходить до краю - інакше рейка ріже час у бульбашках */
    body.has-ig-rail .km-drawer__card { right: 52px; }
}
/* Чат у шухляді: вигляд Telegram (docs/plan_chat_panel.md).
   Дві панелі - список чатів і стрічка - показуються по черзі в тій самій
   шухляді, що й інтеграції. Бульбашки, аватари, розділювачі дат і поле
   введення повторюють месенджер, але кольорами й радіусами проєкту. */

/* Аватар: фото співробітника або ініціали; колір - із палітри за його id,
   тому інлайн-стилів не потрібно (правило 9) */
.km-avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: .8125rem;
    font-weight: 650;
    color: #fff;
    background: var(--km-text-muted);
    user-select: none;
}
.km-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.km-avatar--lg { width: 40px; height: 40px; font-size: 1rem; }
.km-avatar--sm { width: 26px; height: 26px; font-size: .7rem; }
/* Хто ще дивиться картку: аватари внапуск праворуч у панелі дій */
.km-doc-viewers { display: inline-flex; align-items: center; margin-right: 8px; }
.km-doc-viewers .km-avatar { border: 2px solid var(--km-bg-card); box-shadow: var(--km-shadow); }
.km-doc-viewers .km-avatar + .km-avatar { margin-left: -8px; }
.km-doc-viewers__more { background: var(--km-v2-surface-strong); color: var(--km-text-muted); }
/* Шапка «Мого профілю»: аватар, ім'я і логін праворуч у панелі дій */
.km-profile-head { display: flex; align-items: center; gap: 10px; }
.km-profile-head__name { font-weight: 600; line-height: 1.2; }
.km-profile-head__login { font-size: .78rem; color: var(--km-text-muted); }
.km-profile-security { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.km-avatar--1 { background: #2563eb; }
.km-avatar--2 { background: #0e9384; }
.km-avatar--3 { background: #c11574; }
.km-avatar--4 { background: #b54708; }
.km-avatar--5 { background: #6938ef; }
.km-avatar--6 { background: #067647; }
.km-avatar--7 { background: #c01048; }
.km-avatar--8 { background: #0b6bcb; }

/* Шапка обох панелей шухляди */
.km-chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--km-border);
}
.km-chat-head__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--km-text-muted);
    cursor: pointer;
}
.km-chat-head__back:hover {
    background: var(--km-v2-surface-strong);
    color: var(--km-text);
}
.km-chat-head__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.km-chat-head__title {
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.km-chat-head__sub {
    font-size: .75rem;
    color: var(--km-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.km-chat-head .km-modal__close { margin-left: auto; }

/* Пошук і фільтри списку */
.km-chat-tools {
    padding: 12px 16px;
    border-bottom: 1px solid var(--km-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.km-chat-search { position: relative; }
.km-chat-search__icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--km-text-muted);
    pointer-events: none;
}
/* Місце під лупу зліва. Селектор із :root - бо тему задає
   `:root .km-input { padding: 7px 11px }` нижче за файлом, і коротший
   селектор програв би йому за порядком */
:root .km-chat-search .km-chat-search__input {
    width: 100%;
    padding-left: 32px;
    border-radius: 999px;
}
.km-chat-filters {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.km-chat-filters::-webkit-scrollbar { display: none; }
.km-chat-filters__btn {
    border: 0;
    border-radius: 999px;
    padding: 4px 10px;
    font: inherit;
    font-size: .75rem;
    white-space: nowrap;
    cursor: pointer;
    color: var(--km-text-muted);
    background: var(--km-v2-surface-strong);
}
.km-chat-filters__btn:hover { color: var(--km-text); }
.km-chat-filters__btn.is-active {
    background: var(--km-primary);
    color: var(--km-primary-text);
}

/* Список чатів */
.km-chat-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.km-chat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: 0;
    border-bottom: 1px solid var(--km-border);
    background: transparent;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.km-chat-row:hover { background: var(--km-v2-surface); }
.km-chat-row__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.km-chat-row__line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.km-chat-row__title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.km-chat-row__time {
    flex: 0 0 auto;
    font-size: .6875rem;
    color: var(--km-text-muted);
}
.km-chat-row__preview {
    flex: 1;
    min-width: 0;
    font-size: .8125rem;
    color: var(--km-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.km-chat-row__author { color: var(--km-text); }
.km-chat-row__badge {
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--km-primary);
    color: var(--km-primary-text);
    font-size: .6875rem;
    font-weight: 650;
    line-height: 18px;
    text-align: center;
}
.km-chat-row.is-unread .km-chat-row__title { font-weight: 700; }
.km-chat-row.is-unread .km-chat-row__preview { color: var(--km-text); }
.km-chat-more {
    display: block;
    width: 100%;
    padding: 10px;
    border: 0;
    background: transparent;
    color: var(--km-primary);
    font: inherit;
    font-size: .8125rem;
    cursor: pointer;
}
.km-chat-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--km-text-muted);
    font-size: .8125rem;
}

/* Стрічка повідомлень */
.km-chat-feed {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 14px 12px;
    background: var(--km-chat-canvas);
    display: flex;
    flex-direction: column;
}
/* Коротке листування тулиться до низу, як у месенджері; при
   переповненні auto-відступ зникає і прокрутка працює звично */
.km-chat-feed > :first-child { margin-top: auto; }
.km-chat-day {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding: 6px 0;
}
.km-chat-day__label {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--km-v2-surface-strong);
    color: var(--km-text-muted);
    font-size: .6875rem;
}
.km-chat-new {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 4px;
    color: var(--km-primary);
    font-size: .6875rem;
}
.km-chat-new::before,
.km-chat-new::after {
    content: "";
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--km-primary) 35%, transparent);
}
.km-chat-group {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 8px;
}
.km-chat-group--own { flex-direction: row-reverse; }
.km-chat-group__stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    max-width: 78%;
}
.km-chat-group--own .km-chat-group__stack { align-items: flex-end; }
.km-chat-group__author {
    padding-left: 10px;
    font-size: .6875rem;
    font-weight: 650;
    color: var(--km-text-muted);
}
.km-chat-bubble {
    padding: 7px 11px 5px;
    border-radius: 14px;
    background: var(--km-chat-bubble-in);
    font-size: .875rem;
    overflow-wrap: anywhere;
}
.km-chat-bubble--own { background: var(--km-chat-bubble-own); }
/* Хвостик у останньої бульбашки групи - як у месенджері */
.km-chat-group__stack > .km-chat-bubble:last-child { border-bottom-left-radius: 4px; }
.km-chat-group--own .km-chat-group__stack > .km-chat-bubble:last-child {
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 4px;
}
.km-chat-bubble__tag {
    display: inline-block;
    margin-bottom: 2px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--km-v2-surface-strong);
    color: var(--km-text-muted);
    font-size: .6875rem;
}
.km-chat-bubble__text { white-space: normal; }
.km-chat-bubble__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 2px;
    color: var(--km-text-muted);
    font-size: .625rem;
}
.km-chat-tick { opacity: .75; }
.km-chat-tick--read {
    color: var(--km-primary);
    opacity: 1;
}
.km-chat-tick--failed {
    color: var(--km-danger);
    opacity: 1;
}
.km-chat-bubble__error {
    margin-top: 2px;
    color: var(--km-danger);
    font-size: .6875rem;
}
.km-chat-bubble__files {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}
.km-chat-file {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 10px;
    background: var(--km-bg-card);
    color: var(--km-text);
    font-size: .8125rem;
    text-decoration: none;
}
.km-chat-file:hover { color: var(--km-primary); }
.km-chat-file__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.km-chat-image img {
    display: block;
    max-width: 100%;
    border-radius: 10px;
}

/* Кнопка «до останніх повідомлень» */
.km-chat-jump {
    position: absolute;
    right: 18px;
    bottom: 96px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--km-border);
    border-radius: 50%;
    background: var(--km-bg-card);
    box-shadow: var(--km-shadow);
    color: var(--km-text-muted);
    cursor: pointer;
}
.km-chat-jump:hover { color: var(--km-text); }
/* Клас задає display, тож типове правило [hidden] без цього програє */
.km-chat-jump[hidden],
.km-chat-jump__count[hidden] { display: none; }
.km-chat-jump__count {
    position: absolute;
    top: -6px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--km-primary);
    color: var(--km-primary-text);
    font-size: .625rem;
    font-weight: 650;
    line-height: 17px;
}

/* Поле введення */
.km-chat-composer {
    border-top: 1px solid var(--km-border);
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--km-bg-card);
}
.km-chat-direction {
    align-self: flex-start;
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: var(--km-v2-surface-strong);
}
.km-chat-direction__item input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.km-chat-direction__item {
    position: relative;
    display: inline-flex;
}
.km-chat-direction__item span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .6875rem;
    line-height: 1.2;
    color: var(--km-text-muted);
    cursor: pointer;
}
.km-chat-direction__item input:checked + span {
    background: var(--km-bg-card);
    border-color: var(--km-border);
    color: var(--km-text);
    box-shadow: var(--km-shadow);
}
.km-chat-direction__item input:focus-visible + span { box-shadow: var(--km-v2-ring); }
.km-chat-composer__row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}
.km-chat-composer__attach {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--km-text-muted);
    cursor: pointer;
}
.km-chat-composer__attach:hover {
    background: var(--km-v2-surface-strong);
    color: var(--km-text);
}
.km-chat-composer__attach input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.km-chat-composer__input {
    flex: 1;
    box-sizing: border-box;
    min-height: 30px;
    max-height: 140px;
    padding: 5px 12px;
    border: 1px solid var(--km-border);
    border-radius: 17px;
    background: var(--km-bg-card);
    color: var(--km-text);
    font: inherit;
    font-size: .875rem;
    line-height: 1.35;
    resize: none;
    overflow-y: auto;
}
/* Підказка не має лізти другим рядком на вузькому екрані */
.km-chat-composer__input::placeholder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.km-chat-composer__input:focus {
    outline: none;
    border-color: var(--km-primary);
    box-shadow: var(--km-v2-ring);
}
.km-chat-composer__send {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--km-primary);
    color: var(--km-primary-text);
    cursor: pointer;
}
.km-chat-composer__send:hover { background: var(--km-primary-hover); }
.km-chat-composer__send:disabled {
    opacity: .6;
    cursor: default;
}
.km-chat-composer__files {
    font-size: .6875rem;
    color: var(--km-text-muted);
}
.km-chat-composer__files:empty { display: none; }

/* Панель інтеграцій у картці документа (docs/plan_integration_panel.md).
   Колір бренду рішення - змінна --km-ig-brand, її виставляє
   IntegrationPanel.applyBrand з атрибута data-ig-brand */
.km-ig-rail {
    position: fixed;
    /* Нижній край шапки міряє IntegrationPanel.syncTop: над шапкою буває
       смуга попередження акаунта, яка зникає при прокручуванні */
    top: var(--km-ig-top, 102px);
    right: 0;
    bottom: 0;
    z-index: 610;
    width: 52px;
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--km-bg-card);
    border-left: 1px solid var(--km-border);
}
body.has-ig-rail .km-main {
    padding-right: 76px;
}
.km-ig-rail__btn {
    position: relative;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}
/* Чат стоїть у рейці першим і має бути такого ж розміру, як плитки
   рішень: у них усередині іконка 32 px плюс рамка кнопки */
.km-ig-rail__btn--chat {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--km-text-muted);
}
.km-ig-rail__btn--chat:hover { color: var(--km-text); }
.km-ig-rail__btn--chat.is-active { color: var(--km-primary); }
.km-ig-rail__btn.is-active {
    border-color: var(--km-primary);
}
.km-ig-rail__dot {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--km-success);
    border: 2px solid var(--km-bg-card);
}
.km-ig-rail__more {
    width: 30px;
    height: 30px;
    font: inherit;
    font-size: 1rem;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    border: 1px dashed var(--km-border);
    border-radius: 7px;
    color: var(--km-text-muted);
    text-decoration: none;
}
.km-ig-panel__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--km-border);
}
.km-ig-panel__head--brand {
    background: color-mix(in srgb, var(--km-ig-brand, var(--km-text-muted)) 12%, var(--km-bg-card));
}
.km-ig-panel__head .km-modal__close {
    margin-left: auto;
}
.km-ig-panel__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}
/* Смуга прокрутки завжди видима: довга форма ТТН не вміщається в панель,
   і без смуги незрозуміло, що нижче є ще поля й кнопки */
.km-ig-panel__content {
    flex: 1;
    min-height: 0;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--km-text-muted) 55%, transparent) transparent;
    overscroll-behavior: contain;
    padding: 16px 18px 0;
}
.km-ig-panel__content > :last-child {
    margin-bottom: 16px;
}
/* Кнопки форми рішення закріплені внизу панелі, поля прокручуються над ними */
.km-ig-form__actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px -18px 0;
    padding: 12px 18px;
    background: var(--km-bg-card);
    border-top: 1px solid var(--km-border);
}
.km-ig-search {
    width: 100%;
    margin-bottom: 12px;
}
.km-ig-group {
    margin-bottom: 14px;
}
.km-ig-group__title {
    margin-bottom: 6px;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--km-text-muted);
}
.km-ig-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 6px;
    padding: 10px 12px;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--km-ig-brand, var(--km-text-muted)) 25%, var(--km-border));
    background: color-mix(in srgb, var(--km-ig-brand, var(--km-text-muted)) 12%, var(--km-bg-card));
    transition: transform var(--km-transition), box-shadow var(--km-transition);
}
.km-ig-item:hover {
    transform: translateX(-2px);
    box-shadow: var(--km-shadow-lg);
}
.km-ig-icon {
    flex: none;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 9px;
    background: var(--km-ig-brand, var(--km-text-muted));
    color: var(--km-ig-brand-fg, #fff);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: -.02em;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.km-ig-icon--sm {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: .6875rem;
}
.km-ig-icon--logo {
    box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .35);
}
.km-ig-icon--logo svg {
    width: 100%;
    height: 100%;
    display: block;
}
.km-ig-item__main {
    flex: 1;
    min-width: 0;
}
.km-ig-item__name {
    display: block;
    font-weight: 600;
}
.km-ig-item__sub {
    display: block;
    font-size: .75rem;
    color: var(--km-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.km-ig-item__partner {
    padding: 1px 6px;
    border: 1px solid var(--km-border);
    border-radius: 4px;
    background: var(--km-bg-card);
    color: var(--km-text-muted);
    font-size: .625rem;
    font-weight: 600;
    text-transform: uppercase;
}
.km-ig-item__chev {
    flex: none;
    color: var(--km-text-muted);
}
.km-ig-more {
    display: block;
    padding: 10px;
    text-align: center;
    border: 1px dashed var(--km-border);
    border-radius: 10px;
    font-weight: 500;
    text-decoration: none;
}
.km-ig-empty {
    color: var(--km-text-muted);
    text-align: center;
}
.km-ig-back {
    display: grid;
    padding: 4px;
    border: 0;
    background: transparent;
    color: var(--km-text-muted);
    cursor: pointer;
}
.km-ig-result,
.km-ig-soon {
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid var(--km-border);
    border-radius: 10px;
    background: var(--km-v2-surface);
}
.km-ig-soon p {
    margin: 10px 0 0;
    color: var(--km-text-muted);
}
.km-ig-result__id {
    margin-top: 10px;
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.km-ig-result__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.km-ig-result__url {
    width: 100%;
    margin: 10px 0 6px;
    font-family: var(--km-font-mono);
    font-size: .75rem;
}
.km-ig-result--compact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}
.km-ig-result__line {
    font-size: .8125rem;
    color: var(--km-text-muted);
}
.km-ig-history-title {
    margin-top: 18px;
}
.km-ig-form .km-input,
.km-ig-form .km-select {
    width: 100%;
}
.km-ig-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
}
.km-ig-form__title {
    margin: 6px 0 10px;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--km-text-muted);
}
.km-ig-form__check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 22px;
}
.km-ig-form__check .km-form-label {
    margin: 0;
}
.km-ig-seat {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-sm);
}
.km-ig-seat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.km-ig-seat__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}
.km-ig-seat__grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.km-ig-seat__grid .km-input {
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
}
.km-ig-seat__add {
    margin: 10px 0 14px;
}
.km-ig-estimate {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: .8125rem;
}
.km-ig-service {
    border-color: var(--km-primary);
}
/* Статус приходить текстом зовнішнього сервісу і буває довгим:
   бейдж переноситься по словах і не виходить за картку */
.km-ig-result .km-badge,
.km-ig-soon .km-badge {
    display: inline-block;
    max-width: 100%;
    height: auto;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: left;
}
.km-ig-result--muted {
    opacity: .7;
}
.km-ig-toolbar {
    margin: 0 0 14px;
}
.km-ig-details__summary {
    padding: 10px 0;
    font-weight: 600;
    cursor: pointer;
}
.km-ig-add { margin-bottom: 12px; }
.km-ig-deleted { margin-top: 8px; }
.km-ig-deleted .km-ig-result { margin-top: 8px; }
.km-np-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
:root .km-table--list td.km-np-cell {
    white-space: normal;
    overflow: visible;
}
.km-np-cell .km-btn {
    display: flex;
    margin-top: 4px;
}
.km-np-status {
    white-space: normal;
    height: auto;
    line-height: 1.35;
    padding-top: 3px;
    padding-bottom: 3px;
}
.km-np-account {
    margin: 14px 0;
    padding: 12px 14px;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-sm);
}
.km-np-account__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-weight: 600;
}
.km-np-account__head .km-btn {
    margin-left: auto;
}
.km-ig-from-doc {
    white-space: nowrap;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--km-accent-light);
    color: var(--km-primary);
    font-size: .625rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
.km-ig-badge {
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--km-v2-surface-strong);
    color: var(--km-text);
}
.km-ig-badge--success { background: var(--km-v2-success-soft); color: var(--km-success); }
.km-ig-badge--warning { background: var(--km-v2-warning-soft); color: var(--km-warning); }
.km-ig-badge--info { background: var(--km-v2-info-soft); color: var(--km-info); }
.km-ig-badge--danger { background: var(--km-v2-danger-soft); color: var(--km-danger); }

/* Майстер перенесення з МойСклад */
.km-migration-token .km-input--full,
.km-migration-run .km-input {
    max-width: 520px;
}
.km-migration-errors {
    margin: 0;
    padding-left: 20px;
    color: var(--km-text-muted);
    font-size: .8125rem;
}
.km-migration-errors li + li {
    margin-top: 4px;
}

/* Показники: перемикач періоду, плитки, графіки, колонки */
.km-indicators-range {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.km-indicators-range .km-input {
    width: auto;
}
.km-indicators-block {
    margin-top: 24px;
}
.km-indicators-block__title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.km-indicators-block__sum,
.km-indicators-col__sum {
    color: var(--km-text-muted);
    font-weight: 500;
}
.km-indicator-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.km-indicator-tile {
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius);
    padding: 14px 16px;
}
.km-indicator-tile__value {
    font-size: 1.5rem;
    font-weight: 600;
}
.km-indicator-tile__label {
    color: var(--km-text-muted);
    font-size: .8125rem;
    margin-top: 4px;
}
.km-indicators-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.km-indicators-col__title {
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.km-chart {
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius);
    padding: 8px;
    margin-bottom: 8px;
}
.km-chart__svg {
    width: 100%;
    height: 220px;
    display: block;
}
.km-chart__empty {
    color: var(--km-text-muted);
    text-align: center;
    padding: 24px 0;
}
.km-chart__axis {
    stroke: var(--km-border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
.km-chart__line {
    fill: none;
    stroke: var(--km-primary);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}
.km-chart__area {
    fill: var(--km-primary);
    opacity: .12;
    stroke: none;
}
.km-chart__dot {
    fill: var(--km-primary);
}
.km-chart__label {
    fill: var(--km-text-muted);
    font-size: 11px;
}

/* Звіт «Обороти» */
.km-turnover-report__groups th {
    text-align: center;
    font-weight: 600;
    border-bottom: 1px solid var(--km-border);
}
.km-turnover-report__groups th + th {
    border-left: 1px solid var(--km-border);
}
.km-turnover-report__row {
    cursor: pointer;
}
.km-turnover-detail__head {
    padding: 4px 0 12px;
    font-weight: 600;
}
.km-turnover-detail__meta {
    display: flex;
    gap: 16px;
    font-weight: 400;
    font-size: .8125rem;
    color: var(--km-text-muted);
    margin-top: 4px;
}
.km-turnover-detail__totals {
    margin-bottom: 16px;
}
.km-pagination__info {
    color: var(--km-text);
    font-size: .8125rem;
    padding: 0 8px;
    white-space: nowrap;
}

/* Модалка масового створення модифікацій */
.km-mass-variants__head {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--km-text-muted);
    margin: 10px 0 4px;
}
.km-mass-variants__row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
    margin-bottom: 8px;
}
.km-mass-variants__row + .km-btn {
    margin-top: 4px;
}

@media (max-width: 1100px) {
    .km-goods-layout {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   Панель фільтрів списків (за зразком МойСклад)
   ================================================================ */
.km-page-header .km-search--header {
    margin-left: auto;
    max-width: 320px;
    flex: 1;
}

/* Кнопка «Фільтр» у шапці */
.km-filter-toggle__chevron {
    transition: transform var(--km-transition);
}
.km-filter-toggle.is-open .km-filter-toggle__chevron {
    transform: rotate(180deg);
}
.km-filter-toggle.is-open {
    border-color: var(--km-primary);
    color: var(--km-primary);
}
.km-filter-toggle__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    padding: 0;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 50%;
    background: var(--km-primary);
    color: var(--km-primary-text);
    font-variant-numeric: tabular-nums;
}

/* Панель */
.km-filter-panel {
    display: none;
    position: relative;
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius);
    box-shadow: var(--km-shadow);
    padding: 12px 14px;
    margin-bottom: 12px;
}
.km-filter-panel.is-open { display: block; }

.km-filter-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px 10px;
    align-items: start;
}
@media (max-width: 1400px) { .km-filter-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .km-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .km-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .km-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .km-filter-grid { grid-template-columns: 1fr; } }

.km-filter-cell--actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 6px;
    padding-bottom: 2px;
    /* Чотири кнопки не вміщалися в одну колонку сітки, і шестірня
       переносилася на другий рядок (аудит 03.10.2026, п. 6.6) */
    grid-column: span 2;
}

/* Поле фільтра */
.km-filter-field.is-hidden { display: none; }
.km-filter-field__head {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 18px;
    margin-bottom: 2px;
    font-size: .75rem;
    color: var(--km-text);
    border-radius: var(--km-radius-sm);
    padding: 1px 3px 1px 1px;
}
.km-filter-field__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.km-filter-dot {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

/* Позначки умов фільтрації */
.km-op-mark {
    display: inline-block;
    box-sizing: border-box;
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    position: relative;
}
/* dot — звичайна крапка (умова за замовчуванням) */
.km-op-mark--dot::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--km-text-muted);
}
.km-filter-dot:hover .km-op-mark--dot::before { background: var(--km-primary); }
/* empty — пусте коло (не заповнено) */
.km-op-mark--empty {
    border: 1.5px solid var(--km-text-muted);
    border-radius: 50%;
}
/* filled — заповнене коло (заповнено) */
.km-op-mark--filled {
    background: var(--km-text);
    border-radius: 50%;
}
/* x — «×» у чорному колі (заперечення) */
.km-op-mark--x {
    background: var(--km-text);
    border-radius: 50%;
}
.km-op-mark--x::before,
.km-op-mark--x::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 6px; height: 1.5px;
    background: var(--km-bg-card);
    border-radius: 1px;
}
.km-op-mark--x::before { transform: translate(-50%, -50%) rotate(45deg); }
.km-op-mark--x::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Активне поле фільтра: нестандартна умова АБО заповнене значення.
   Один спільний фон охоплює і назву, і поле вводу; за рахунок padding + рівного
   негативного margin він виходить на 2px за межі поля, не зсуваючи сусідні поля. */
.km-filter-field.is-active {
    background: color-mix(in srgb, var(--km-primary) 12%, transparent);
    border-radius: var(--km-radius-sm);
    padding: 4px;
    margin: -4px;
}
.km-filter-field.is-active .km-op-mark--dot::before {
    background: var(--km-primary);
}
.km-filter-field.is-noval .km-filter-field__control { opacity: .55; }
.km-filter-field.is-dep-disabled .km-filter-field__control { opacity: .55; }

.km-filter-panel .km-input { padding: 4px 6px; font-size: .8125rem; }
/* Текст, що не вміщається у поле, обрізаємо з «…» (видно, що є ще) */
.km-filter-panel input.km-input { text-overflow: ellipsis; }
.km-filter-range {
    display: flex;
    align-items: center;
    gap: 6px;
}
.km-filter-range .km-input { min-width: 0; }
.km-filter-range__dash { color: var(--km-text-muted); }

/* Селект-поля фільтра: статична висота, компактні відступи */
.km-filter-panel .ts-wrapper .ts-control {
    min-height: 28px;
    padding: 3px 6px;
    max-height: 28px;
    overflow: hidden;
}
/* Мультиселект (FK): чипи з кнопкою видалення; при переповненні —
   поле не росте, а показує внутрішній горизонтальний скрол як натяк, що
   вибрано більше, ніж вміщається. */
.km-filter-panel .ts-wrapper.multi .ts-control {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 3px;
}
.km-filter-panel .ts-wrapper.multi .ts-control::-webkit-scrollbar { display: none; }
.km-filter-panel .ts-wrapper.multi .ts-control > .item {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    max-width: 140px;
    padding: 1px 4px 1px 6px;
    background: color-mix(in srgb, var(--km-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--km-primary) 30%, transparent);
    border-radius: 10px;
    font-size: .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Компактні чипи фільтра: хрестик той самий, що й у решті мультиселектів
   (див. .ts-wrapper.plugin-remove_button вище), лише вужчий */
.km-filter-panel .ts-wrapper.plugin-remove_button .ts-control > .item .remove {
    min-width: 16px;
    padding: 0 4px;
    font-size: .875rem;
}
.km-filter-panel .ts-wrapper.plugin-remove_button:not(.rtl) .ts-control > .item .remove {
    margin-left: 4px;
}
/* Пусте значення в селектах фільтра — така сама висота, як інші варіанти */
.km-filter-panel .ts-dropdown .option { min-height: 30px; }

/* Швидкі періоди дат */
.km-filter-quick {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 2px;
    white-space: nowrap;
}
.km-filter-quick i { font-style: normal; color: var(--km-text-muted); }
.km-filter-quick button {
    border: none;
    background: transparent;
    padding: 0 1px;
    font-size: .72rem;
    color: var(--km-primary);
    cursor: pointer;
}
.km-filter-quick button:hover { color: var(--km-primary-hover); text-decoration: none; }

/* Меню умов фільтрації */
.km-filter-ops {
    position: absolute;
    z-index: 60;
    min-width: 190px;
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    padding: 4px;
}
.km-filter-ops__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    background: transparent;
    font-size: .8125rem;
    color: var(--km-text);
    text-align: left;
    cursor: pointer;
    border-radius: var(--km-radius-sm);
}
.km-filter-ops__item:hover { background: var(--km-row-hover); }
.km-filter-ops__mark {
    flex-shrink: 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 1.5px solid var(--km-text-muted);
}
.km-filter-ops__item.is-current .km-filter-ops__mark {
    background: var(--km-primary);
    border-color: var(--km-primary);
}

/* Шестерня: налаштування полів фільтра */
.km-filter-gear { position: relative; }
.km-filter-gear__menu {
    position: absolute;
    z-index: 60;
    top: calc(100% + 4px);
    left: 0;
    min-width: 260px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    padding: 6px;
}
.km-filter-gear__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    font-size: .8125rem;
    color: var(--km-text);
    border-radius: var(--km-radius-sm);
    cursor: pointer;
}
.km-filter-gear__row:hover { background: var(--km-row-hover); }
.km-filter-gear__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Тумблер */
.km-switch {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 30px; height: 17px;
}
.km-switch input {
    position: absolute;
    opacity: 0;
    width: 100%; height: 100%;
    margin: 0;
    cursor: pointer;
}
.km-switch__slider {
    position: absolute;
    inset: 0;
    background: var(--km-border);
    border-radius: 17px;
    transition: background var(--km-transition);
    pointer-events: none;
}
.km-switch__slider::before {
    content: "";
    position: absolute;
    width: 13px; height: 13px;
    left: 2px; top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--km-transition);
}
.km-switch input:checked + .km-switch__slider { background: var(--km-primary); }
.km-switch input:checked + .km-switch__slider::before { transform: translateX(13px); }

/* Збережені фільтри (закладки) */
.km-filter-saved {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--km-border);
}
.km-filter-saved.is-empty { display: none; }
.km-filter-saved__arrow {
    flex-shrink: 0;
    width: 24px; height: 24px;
    padding: 0;
    border: 1px solid var(--km-border);
    border-radius: 50%;
    background: var(--km-bg-card);
    color: var(--km-text-muted);
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
}
.km-filter-saved__arrow:hover { border-color: var(--km-primary); color: var(--km-primary); }
.km-filter-saved__scroll {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
    min-width: 0;
}
.km-filter-saved__scroll::-webkit-scrollbar { display: none; }
.km-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 3px 8px;
    border: 1px solid var(--km-border);
    border-radius: 999px;
    background: var(--km-bg);
    font-size: .78rem;
    white-space: nowrap;
}
.km-filter-chip a { color: var(--km-text); text-decoration: none; }
.km-filter-chip:hover { border-color: var(--km-primary); }
.km-filter-chip:hover a { color: var(--km-primary); }
.km-filter-chip__del {
    border: none;
    background: transparent;
    padding: 0;
    width: 14px; height: 14px;
    line-height: 1;
    font-size: .85rem;
    color: var(--km-text-muted);
    cursor: pointer;
}
.km-filter-chip__del:hover { color: var(--km-danger); }

/* ── Сторінка «Платежі»: зведення, баланси, суми, масові дії ── */
.km-amount { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.km-amount--in  { color: #2e7d32; }
.km-amount--out { color: #c62828; }
[data-theme="dark"] .km-amount--in  { color: #66bb6a; }
[data-theme="dark"] .km-amount--out { color: #ef5350; }

.km-bulkbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    background: var(--km-bg-card);
    border: 1px solid var(--km-primary);
    border-radius: var(--km-radius-sm);
    box-shadow: var(--km-shadow);
}
.km-bulkbar__count { font-size: .8125rem; font-weight: 600; margin-right: 4px; }

.km-table th.col-check, .km-table td.col-check { width: 34px; text-align: center; }
.km-table__row--muted { opacity: .55; }

/* ── Реєстр платежів: підсумки прибуток/видаток та залишки ── */
.km-pay-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 12px 0;
}
.km-pay-summary__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    border: 1px solid var(--km-border);
    border-radius: 8px;
    background: var(--km-bg-card);
    min-width: 140px;
}
.km-pay-summary__label {
    font-size: .75rem;
    color: var(--km-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.km-pay-summary__value { font-size: 1.05rem; font-weight: 600; }
.km-pay-summary__item--in .km-pay-summary__value  { color: #2e7d32; }
.km-pay-summary__item--out .km-pay-summary__value { color: #c62828; }
[data-theme="dark"] .km-pay-summary__item--in .km-pay-summary__value  { color: #66bb6a; }
[data-theme="dark"] .km-pay-summary__item--out .km-pay-summary__value { color: #ef5350; }

.km-pay-balances {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 14px;
}
.km-pay-balances__group {
    flex: 1 1 240px;
    border: 1px solid var(--km-border);
    border-radius: 8px;
    padding: 10px 14px;
    background: var(--km-bg-card);
}
.km-pay-balances__title {
    font-size: .75rem;
    color: var(--km-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 6px;
}
.km-pay-balances__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: .8125rem;
}
.km-pay-balances__value { font-weight: 600; }

/* ===== Сторінка «Налаштування прав доступу» ролі ===== */
.km-role-permissions {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
    align-items: start;
}
.km-role-permissions .km-settings-nav {
    position: sticky;
    top: 16px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--km-border);
    border-radius: 8px;
    background: var(--km-bg-card);
    overflow: hidden;
    padding: 6px 0;
}
.km-role-permissions .km-settings-nav__item {
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}
.km-role-permissions__head {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.km-permissions-table {
    width: 100%;
    border-collapse: collapse;
}
.km-permissions-table th {
    font-size: .625rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--km-text-muted);
    font-weight: 600;
    padding: 6px 6px;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid var(--km-border);
}
.km-permissions-table td {
    padding: 4px 6px;
    text-align: center;
    border-bottom: 1px solid var(--km-border);
    vertical-align: middle;
}
.km-permissions-table__object {
    text-align: left !important;
    font-size: .8125rem;
    min-width: 180px;
}
.km-permissions-table tbody tr:hover {
    background: var(--km-hover);
}
.km-permissions-scope {
    width: 140px;
    min-width: 110px;
    font-size: .75rem;
    padding: 4px 6px;
    border: 1px solid var(--km-border);
    border-radius: 6px;
    background: var(--km-bg-card);
    color: var(--km-text);
}
.km-permissions-scope:disabled,
.km-permissions-table input[type="checkbox"]:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.km-roleperms-modal {
    width: 96vw;
    max-width: 1160px;
    min-width: 0;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}
.km-roleperms-modal .km-modal__body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    gap: 10px;
}
.km-roleperms-rolerow {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.km-roleperms-rolerow .km-doc-field__label {
    text-transform: uppercase;
    font-size: .6875rem;
    letter-spacing: .03em;
    color: var(--km-text-muted);
    font-weight: 600;
}
.km-role-permissions--modal {
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: stretch;
}
.km-role-permissions--modal .km-settings-nav {
    position: static;
    height: 100%;
}
.km-role-permissions--modal .km-role-permissions__main .km-doc-card {
    border: 1px solid var(--km-border);
    border-radius: 8px;
    background: var(--km-bg-card);
    padding: 14px 16px;
    height: 100%;
}
.km-role-permissions--modal .km-permissions-table {
    width: 100%;
}
.km-role-permissions--modal .km-goods-block__title {
    margin-bottom: 8px;
}
.km-employee-role-picker .km-employee-role-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}
@media (max-width: 900px) {
    .km-role-permissions { grid-template-columns: 1fr; }
    .km-role-permissions .km-settings-nav { position: static; }
}

/* ===== Картка організації (та сама сітка — у картці співробітника
   та в картках «налаштувальних» довідників) ===== */
.km-org-layout,
.km-employee-layout,
.km-settings-form-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    max-width: 1100px;
}
@media (max-width: 900px) {
    .km-org-layout,
    .km-employee-layout,
    .km-settings-form-layout { grid-template-columns: 1fr; }
}
.km-org-cashboxes__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    font-size: .8125rem;
    border-bottom: 1px solid var(--km-border);
}
.km-org-cashboxes__row:last-child { border-bottom: none; }
.km-org-cashboxes__balance { font-weight: 600; white-space: nowrap; }
.km-org-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: .6875rem;
    color: var(--km-text-muted);
    border: 1px solid var(--km-border);
}
.km-org-bank {
    border: 1px solid var(--km-border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    /* Фон трохи темніший за картку блоку, темізується (світла/темна тема) */
    background: var(--km-row-stripe);
}
.km-org-bank__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}
.km-org-bank__default {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    cursor: pointer;
}
.km-inline-form { display: inline; }
/* Кошик: підказка над таблицею і колонка дій рядка */
.km-trash-hint { margin-bottom: 14px; }
.km-trash-actions,
.km-row-actions { white-space: nowrap; text-align: right; }
/* Небезпечна дія (видалення акаунту) — картка з акцентною рамкою */
.km-card--danger { border-color: var(--km-danger); }
.km-card__header--danger { color: var(--km-danger); }
.km-hint--spaced { margin-bottom: 14px; }
.km-org-switch-field {
    display: flex;
    align-items: center;
    gap: 12px;
}
.km-org-switch-field .km-doc-field__label { margin: 0; }
/* Textarea з авто-висотою (data-autogrow): без скролу та ручного resize */
textarea[data-autogrow] {
    overflow: hidden;
    resize: none;
    min-height: 0;
    box-sizing: border-box;
}

/* ===== Бічна панель налаштувань (шестерня у списках) ===== */
.km-side-panel {
    display: none;
    pointer-events: none;
}
.km-side-panel.is-open {
    display: block;
    pointer-events: auto;
}
.km-side-panel__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .28);
    z-index: 1005;
}
/* Широка панель — деталізація звітів (таблиця документів на 8 колонок) */
.km-side-panel--wide .km-side-panel__card {
    width: 900px;
}
/* Панель на всю висоту екрана: накриває навбар і підменю, як і широка */
.km-side-panel__card {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--km-bg-card);
    border-left: 1px solid var(--km-border);
    box-shadow: var(--km-shadow-lg);
    z-index: 1010;
}
.km-side-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--km-border);
    flex-shrink: 0;
}
.km-side-panel__title {
    font-size: 1rem;
    font-weight: 600;
}
.km-side-panel__close {
    border: none;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--km-text-muted);
}
.km-side-panel__close:hover { color: var(--km-text); }
.km-side-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
}
.km-side-panel__loading {
    color: var(--km-text-muted);
    font-size: .8125rem;
    padding: 12px 0;
}
.km-side-panel__footer {
    display: flex;
    gap: 8px;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--km-border);
    position: sticky;
    bottom: 0;
    background: var(--km-bg-card);
}

/* ===== Вкладки бічної панелі налаштувань ===== */
.km-panel-tabs__nav {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--km-border);
    margin-bottom: 14px;
}
.km-panel-tabs__btn {
    border: none;
    background: transparent;
    font: inherit;
    font-size: .8125rem;
    color: var(--km-text-muted);
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.km-panel-tabs__btn:hover { color: var(--km-text); }
.km-panel-tabs__btn.is-active {
    color: var(--km-text);
    border-bottom-color: var(--km-primary);
    font-weight: 600;
}

/* ===== Секція «Колонки таблиці» в панелі ===== */
.km-columns__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--km-border);
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--km-bg);
    cursor: grab;
}
.km-columns__row.is-dragging { opacity: .5; }
.km-columns__row.is-over { border-color: var(--km-primary); }
.km-columns__handle {
    color: var(--km-text-muted);
    display: inline-flex;
    flex-shrink: 0;
}
.km-columns__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}
.km-columns__label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.km-columns__badge {
    font-size: .6875rem;
    color: var(--km-text-muted);
    border: 1px solid var(--km-border);
    border-radius: 6px;
    padding: 1px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.km-columns__actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

/* Посилання на пов'язаний об'єкт у рядку списку (контрагент, склад):
   виглядає як текст, підкреслюється лише під курсором */
.km-table__link--related {
    color: inherit;
    text-decoration: none;
}
.km-table__link--related:hover {
    color: var(--km-primary);
    text-decoration: underline;
}

/* Перелік у бічній панелі (типи цін у шестерні каталогу) */
.km-attrs__list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.km-attrs__item { padding: 6px 8px; border: 1px solid var(--km-border); border-radius: var(--km-radius-sm); }

/* ===== Штрихкоди в картці товару ===== */
.km-barcodes { display: grid; gap: 6px; }
.km-barcodes__row {
    display: grid;
    grid-template-columns: 110px minmax(120px, 1fr) 30px;
    gap: 6px;
    align-items: center;
}
.km-barcodes__remove { min-width: 30px; padding: 0; }
.km-barcodes__actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ===== Своя кнопка: перелік типів записів прапорцями ===== */
.km-check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; list-style: none; margin: 0; padding: 0; }
.km-check-list label { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; }
.km-check-list input[type=checkbox] { width: 16px; height: 16px; }
.km-custom-buttons .km-inline-form { display: block; }
.km-custom-buttons .km-dropdown__item { width: 100%; text-align: left; }

/* ===== Характеристики модифікації ===== */
.km-charrows { display: grid; gap: 6px; }
.km-charrows__row {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) 30px;
    gap: 6px;
    align-items: center;
}
.km-charrows__remove { min-width: 30px; padding: 0; }
.km-charrows__actions { display: flex; gap: 6px; }

/* ===== Зміна ширини колонки в шапці таблиці ===== */
.km-table th[data-column] { position: relative; }
.km-col-resize {
    position: absolute;
    top: 0;
    right: 0;
    width: 9px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
    z-index: 2;
}
/* Межа завжди видима: лінія малюється всередині комірки (у th
   overflow: hidden, тож усе за правим краєм зрізалося б) */
.km-col-resize::after {
    content: "";
    position: absolute;
    top: 25%;
    bottom: 25%;
    right: 0;
    width: 1px;
    background: color-mix(in srgb, var(--km-text-muted) 45%, transparent);
}
.km-col-resize:hover::after,
.km-col-resize.is-active::after {
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--km-primary);
}
body.km-col-resizing { cursor: col-resize; user-select: none; }

/* ===== Секція «Додаткові поля» в панелі ===== */
.km-attrs__head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.km-attrs__title {
    font-size: .875rem;
    font-weight: 600;
}
.km-attrs__counter {
    font-size: .75rem;
    color: var(--km-text-muted);
    white-space: nowrap;
}
.km-attrs__row {
    border: 1px solid var(--km-border);
    border-radius: 10px;
    margin-bottom: 8px;
    background: var(--km-bg);
}
.km-attrs__row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
}
.km-attrs__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: .8125rem;
    color: var(--km-text);
    text-align: left;
    cursor: pointer;
    padding: 0;
}
.km-attrs__toggle span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.km-attrs__chevron {
    flex-shrink: 0;
    color: var(--km-text-muted);
    transition: transform var(--km-transition);
}
.km-attrs__chevron.is-open { transform: rotate(180deg); }
.km-attrs__row-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.km-attrs__icon-btn {
    border: none;
    background: transparent;
    color: var(--km-text-muted);
    font-size: .875rem;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
}
.km-attrs__icon-btn:hover:not(:disabled) {
    background: var(--km-row-hover);
    color: var(--km-text);
}
.km-attrs__icon-btn:disabled { opacity: .35; cursor: default; }
.km-attrs__icon-btn--danger:hover:not(:disabled) { color: var(--km-danger); }
.km-attrs__row-body {
    padding: 4px 10px 12px;
    border-top: 1px solid var(--km-border);
}
.km-attrs__check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    margin-bottom: 8px;
    cursor: pointer;
}
.km-attrs__empty {
    color: var(--km-text-muted);
    font-size: .8125rem;
    padding: 8px 0 12px;
}
.km-attrs__add { margin-top: 4px; }

/* ===== Блок «Додаткові поля» в картці об'єкта ===== */
.km-extra-fields { margin-top: 0; }
/* Знак «?» стоїть поруч із label, а не всередині: наведення на label
   браузер переносить на пов'язане поле (:hover), і рамка поля
   підсвічувалась би від наведення на знак */
.km-extra-field__label-row {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    margin-bottom: 4px;
}
.km-extra-field__label-row .km-form-label { margin-bottom: 0; }
/* Знак «?» - кнопка: опис відкривається кліком (widgets/hint.js),
   а не через title із затримкою наведення. Гліф оптично сидить вище
   центру, тому знизу 1px відступу */
.km-extra-field__hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 1px 0 0;
    border-radius: 50%;
    border: 1px solid var(--km-border);
    background: none;
    color: var(--km-text-muted);
    font: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.km-extra-field__hint:hover,
.km-extra-field__hint:focus-visible,
.km-extra-field__hint[aria-expanded="true"] {
    color: var(--km-primary);
    border-color: var(--km-primary);
}
/* Спливаюча підказка над знаком «?»: бульбашка в кольорах активної
   вкладки документа (.km-doc-tabs__btn.is-active - --km-primary на
   --km-primary-bg), стрілка під знаком - його центр у --km-hint-x
   (виставляє hint.js). Стрілці потрібен непрозорий колір, тому
   напівпрозорий --km-primary-bg змішується з фоном картки через
   color-mix; так само бульбашка сама підлаштовується під темну тему */
.km-hint-pop {
    --km-hint-x: 8px;
    --km-hint-bg: color-mix(in srgb, var(--km-primary) 10%, var(--km-bg-card));
    --km-hint-border: color-mix(in srgb, var(--km-primary) 35%, var(--km-bg-card));
    --km-hint-fg: var(--km-text);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 0;
    z-index: 50;
    max-width: 300px;
    min-width: 96px;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid var(--km-hint-border);
    background: var(--km-hint-bg);
    box-shadow: var(--km-shadow-lg);
    color: var(--km-hint-fg);
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    cursor: default;
    animation: km-hint-in .15s ease-out;
}
.km-hint-pop::after {
    content: "";
    position: absolute;
    top: 100%;
    left: var(--km-hint-x);
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--km-hint-border);
}
/* Друга стрілка на 1px вище перекриває рамку - лишається лише її контур */
.km-hint-pop::before {
    content: "";
    position: absolute;
    top: calc(100% - 1px);
    left: var(--km-hint-x);
    transform: translateX(-50%);
    z-index: 1;
    border: 6px solid transparent;
    border-top-color: var(--km-hint-bg);
}
@keyframes km-hint-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.km-extra-field__file {
    font-size: .8125rem;
    margin-bottom: 4px;
}

/* ===== Статуси: крапка, бейдж, модалка налаштування =====
   Колір статусу задає користувач, тож він приходить у --km-state-color
   з JS (data-color), а не інлайн-стилем у шаблоні. */
.km-state-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
    background: var(--km-state-color, var(--km-text-muted));
}
.km-state-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 22px;
    padding: 0 10px;
    border-radius: 11px;
    font-size: .75rem;
    line-height: 1;
    text-align: center;
    background: var(--km-state-color, var(--km-border));
    color: var(--km-state-fg, var(--km-text));
}
/* Поле статусу в картці: пігулка + випадаючий список */
.km-state-select--hidden {
    display: none !important;
}
.km-state-pill {
    position: relative;
    display: inline-flex;
}
.km-state-pill__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--km-doc-badge-h);
    padding: 0 12px;
    border: none;
    border-radius: calc(var(--km-doc-badge-h) / 2);
    background: var(--km-state-color, var(--km-border));
    color: var(--km-state-fg, var(--km-text));
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    cursor: pointer;
}
.km-state-pill__btn:focus-visible {
    outline: 2px solid var(--km-primary);
    outline-offset: 1px;
}
.km-state-pill__caret {
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
}
.km-state-pill.is-empty .km-state-pill__btn {
    background: transparent;
    color: var(--km-text-muted);
    border: 1px dashed var(--km-border);
}
.km-state-pill__menu {
    display: none;
    position: absolute;
    z-index: 60;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius);
    box-shadow: var(--km-shadow-lg);
}
.km-state-pill.is-open .km-state-pill__menu {
    display: block;
}
.km-state-pill__item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 10px;
    border: none;
    border-radius: var(--km-radius-sm);
    background: none;
    color: var(--km-text);
    font-family: inherit;
    font-size: .8125rem;
    text-align: left;
    cursor: pointer;
}
.km-state-pill__item:hover {
    background: var(--km-row-hover);
}
.km-state-pill__item.is-current {
    font-weight: 600;
}
.km-state-pill__item--settings {
    margin-top: 4px;
    border-top: 1px solid var(--km-border);
    border-radius: 0;
    color: var(--km-primary);
}
.km-states__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.km-states__counter {
    font-size: .75rem;
    color: var(--km-text-muted);
    white-space: nowrap;
}
.km-states__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.km-states__row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.km-states__order {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.km-states__icon-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--km-radius-sm);
    color: var(--km-text-muted);
    cursor: pointer;
    font-size: .75rem;
    line-height: 1;
    padding: 2px 5px;
}
.km-states__icon-btn:hover:not(:disabled) {
    border-color: var(--km-border);
    color: var(--km-text);
}
.km-states__icon-btn:disabled {
    opacity: .35;
    cursor: default;
}
.km-states__icon-btn--danger {
    font-size: 1.125rem;
}
.km-states__icon-btn--danger:hover {
    color: var(--km-danger);
}
.km-states__color {
    position: relative;
}
.km-states__swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--km-border);
    cursor: pointer;
    padding: 0;
    background: var(--km-state-color, var(--km-text-muted));
}
.km-states__palette {
    position: absolute;
    z-index: 5;
    top: 24px;
    left: 0;
    display: grid;
    grid-template-columns: repeat(8, 18px);
    gap: 6px;
    padding: 8px;
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius);
    box-shadow: var(--km-shadow-lg);
}
.km-states__name {
    flex: 1 1 auto;
    min-width: 120px;
}
.km-states__type {
    flex: 0 0 190px;
}
.km-states__empty {
    padding: 12px 0;
    font-size: .8125rem;
    color: var(--km-text-muted);
}
.km-states__add {
    margin-top: 10px;
}
/* Вкладена модалка (підтвердження видалення статусу) — поверх основної */
.km-modal-overlay--nested {
    z-index: 1030;
}

/* ===== Сторінка «Аудит» ===== */
.km-audit-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 16px;
}
.km-audit-filters__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
}
.km-audit-filters__field .km-form-label {
    margin: 0;
}
.km-audit-filters__actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}
/* Дії журналу, яких не було в картці */
.km-audit-log__action--login,
.km-audit-log__action--import { color: var(--km-info); }
.km-audit-log__action--logout { color: var(--km-text-muted); }
.km-audit-log__action--export,
.km-audit-log__action--print { color: var(--km-warning); }
.km-audit-log__action--restore { color: var(--km-success); }

/* ================================================================
   Картка сутності в модальному вікні (KMEntityModal)
   Широке вікно (~1100 px) з тим самим вмістом, що й сторінка картки:
   всередині — панель дій «Зберегти / Закрити» і сама форма.
   ================================================================ */
.km-modal--entity {
    width: 92vw;
    max-width: 1100px;
    height: 90vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.km-modal--entity .km-modal__header {
    flex-shrink: 0;
}
.km-modal__body--entity {
    flex: 1;
    padding: 12px 20px 20px;
    overflow-y: auto;
    display: block;
}
/* Панель дій усередині вікна липне до його верху, а не до навбару сторінки */
.km-modal__body--entity .km-doc-bar {
    top: 0;
    padding-top: 0;
    background: var(--km-bg-card);
}
.km-modal__body--entity .km-doc-card {
    background: var(--km-bg-card);
}

/* ================================================================
   Картка довідника з декларативною розкладкою
   (групи товарів, договори, склади — front/reference_layout.py)
   ================================================================ */
.km-reference-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

/* ================================================================
   Дерево груп товарів у каталозі (пункт 23 плану розвитку)
   Щільніший вертикальний ритм, шеврон згортання гілки, відступ рівня
   з data-depth (інлайн-стилів у шаблоні немає).
   ================================================================ */
.km-catalog__folder-wrap[data-depth="1"] { padding-left: 14px; }
.km-catalog__folder-wrap[data-depth="2"] { padding-left: 28px; }
.km-catalog__folder-wrap[data-depth="3"] { padding-left: 42px; }
.km-catalog__folder-wrap[data-depth="4"] { padding-left: 56px; }
.km-catalog__folder-wrap[data-depth="5"] { padding-left: 70px; }
.km-catalog__folder-wrap[data-depth="6"] { padding-left: 84px; }
/* Глибше шостого рівня відступ не росте — сайдбар лишається читабельним */
.km-catalog__folder-wrap[data-depth="7"],
.km-catalog__folder-wrap[data-depth="8"],
.km-catalog__folder-wrap[data-depth="9"] { padding-left: 98px; }
.km-catalog__folder-wrap.is-hidden { display: none; }
.km-catalog__chevron {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 4px;
    border: none;
    background: none;
    color: var(--km-text-muted);
    cursor: pointer;
    border-radius: var(--km-radius-sm);
    transition: transform var(--km-transition), color var(--km-transition);
}
.km-catalog__chevron:hover {
    color: var(--km-text);
    background: var(--km-row-hover);
}
.km-catalog__chevron[aria-expanded="true"] {
    transform: rotate(90deg);
}
.km-catalog__chevron--empty {
    cursor: default;
    background: none;
}

/* ================================================================
   Футер списку: пагінація на початку смуги, підсумки - під своїми
   колонками таблиці (ставить static/ts/pages/list-footer.js). Підсумок
   без колонки лишається в рядку з підписом.
   ================================================================ */
.km-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
    text-align: left;
}
.km-list-footer__totals {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.km-list-footer__label {
    color: var(--km-text-muted);
}
.km-list-footer__value {
    color: var(--km-text);
    font-weight: 600;
}
.km-list-footer__pages {
    padding: 0;
    order: -1;
}
.km-list-footer__totals {
    position: relative;
    flex: 1 1 auto;
    align-self: stretch;
}
.km-list-footer__total.is-aligned {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    background: var(--km-bg-card);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
}
.km-list-footer__total.is-aligned .km-list-footer__label { display: none; }
.km-list-footer__total--negative .km-list-footer__value { color: var(--km-danger); }

/* ================================================================
   Кнопки «+» і «олівець» біля FK-селекта (пункт 18 плану розвитку)
   ================================================================ */
.km-fk-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.km-fk-row > .ts-wrapper,
.km-fk-row > select {
    flex: 1;
    min-width: 0;
}
.km-fk-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.km-fk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-sm);
    background: var(--km-bg-card);
    color: var(--km-text-muted);
    cursor: pointer;
    transition: color var(--km-transition), border-color var(--km-transition);
}
.km-fk-btn:hover {
    color: var(--km-primary);
    border-color: var(--km-primary);
}
.km-fk-btn[hidden] {
    display: none;
}
/* Кнопка «+» біля рахунку без вибраної організації: додавати рахунок
   нікуди, тож вона лишається на місці (щоб поле не стрибало), але
   вимкнена; причину називає title */
.km-fk-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.km-fk-btn:disabled:hover {
    color: var(--km-text-muted);
    border-color: var(--km-border);
}

/* ================================================================
   Вікно вибору товарів із довідника (пункт 16 плану розвитку)
   ================================================================ */
.km-picker {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}
.km-picker__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}
.km-picker__search {
    flex: 1;
    max-width: 420px;
}
.km-picker__body {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.km-picker__tree {
    border-right: 1px solid var(--km-border);
    padding-right: 8px;
    max-height: 60vh;
    overflow-y: auto;
}
.km-picker__list {
    min-width: 0;
}
.km-picker__table .km-picker__row.is-selected {
    background: var(--km-row-hover);
}
.km-picker__available.is-negative {
    color: var(--km-danger);
    font-weight: 600;
}
.km-picker__qty-col {
    width: 150px;
}
.km-picker__qty {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}
.km-picker__qty-input {
    width: 64px;
    text-align: right;
    padding: 4px 6px;
}
.km-picker__step {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-sm);
    background: var(--km-bg-card);
    color: var(--km-text);
    cursor: pointer;
    line-height: 1;
}
.km-picker__step:hover {
    border-color: var(--km-primary);
    color: var(--km-primary);
}
.km-picker__footer {
    border-top: 1px solid var(--km-border);
    align-items: center;
}
.km-picker__count {
    margin-right: auto;
    font-size: .8125rem;
    color: var(--km-text-muted);
}
.km-picker__pages {
    justify-content: flex-start;
}

/* Прапорець «Встановлювати фактичні залишки» біля кнопок інвентаризації */
.km-positions__inventory-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    color: var(--km-text-muted);
    white-space: nowrap;
    cursor: pointer;
}

/* Пагінація таблиці позицій документа */
.km-positions__pages {
    justify-content: flex-start;
    gap: 4px;
    padding: 8px 12px;
    border-top: 1px solid var(--km-border);
}
.km-positions__pages-info {
    margin-right: 12px;
    font-size: .8125rem;
    color: var(--km-text-muted);
}

/* ---------- Картка додаткового довідника: елементи ---------- */
.km-ce-elements__row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
}
.km-ce-elements__row .km-doc-row {
    flex: 1 1 auto;
    margin: 0;
}
.km-ce-elements__row .km-attrs__row-actions {
    padding-top: 26px;
}

/* ---------- Сторінка підписки: додаткові опції тарифу ---------- */
.km-subscription-subtitle {
    margin: 18px 0 10px;
    font-size: .9375rem;
}
.km-option-active-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: .875rem;
    color: var(--km-text-muted);
}
.km-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin: 10px 0 14px;
}
.km-option-row {
    border: 1px solid var(--km-border);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.km-option-row__main {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.km-option-row__title {
    font-weight: 600;
    font-size: .9rem;
    flex: 1;
}
.km-option-row__qty {
    width: 80px;
}
.km-option-total {
    font-weight: 600;
    margin: 0 0 14px;
}

/* ---------- Сторінка підписки (тарифи) — стилі, перенесені з інлайнів ---------- */
.km-status-text--ok { color: var(--km-success); }
.km-status-text--danger { color: var(--km-danger); }
.km-autorenew-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.km-autorenew-row__state { margin: 0 0 4px; }
.km-autorenew-label { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; cursor: pointer; }
.km-tariff-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.km-period-toggle { display: inline-flex; gap: 4px; background: var(--km-bg); padding: 4px; border-radius: 8px; }
.km-tariff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.km-tariff-card { margin: 0; }
.km-tariff-card--current { border-color: var(--km-primary); }
.km-tariff-card__body { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.km-tariff-card__title { font-weight: 600; font-size: 1.05rem; }
.km-tariff-card__price { font-size: 1.5rem; font-weight: 700; }
.km-tariff-card__features {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
    font-size: .875rem; color: var(--km-text-muted); flex: 1;
}

/* ---------- Утиліти видимості (замість інлайн display) ---------- */
.km-hidden { display: none !important; }
.km-inline-row { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.km-inline-row-sm { display: flex; gap: .5rem; }
.km-input--narrow { max-width: 320px; }
.km-input--w240 { max-width: 240px; }
.km-check-row { display: flex; align-items: flex-start; gap: 10px; }
.km-form-label--tight { margin-bottom: 0; }
.km-doc-field__label--tight { margin: 0; }
.km-td-actions { white-space: nowrap; text-align: right; }
.km-card--highlight { margin-bottom: 14px; border-color: var(--km-primary); }
.km-code-selectable { user-select: all; word-break: break-all; }

/* ---------- Вебхуки: зведення підписки й журнал доставок ---------- */
.km-props {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 6px 16px;
    margin: 0;
}
.km-props dt { color: var(--km-text-muted); }
.km-props dd { margin: 0; word-break: break-all; }
/* URL вебхука довгий і не має розсувати таблицю */
.km-cell-url { word-break: break-all; max-width: 320px; }
/* Текст помилки доставки: показуємо початок, решта — в title */
.km-cell-error {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--km-text-muted);
}
.km-employee-role-actions--offset { margin-left: 1.5rem; }

/* Підменю: групи показуються лише для активного розділу (перемикає Menu в
   app.js класом is-active; раніше — інлайн style="display:none") */
.km-submenu__group { display: none; }
.km-submenu__group.is-active { display: contents; }

/* ---------- Мобільна адаптація (≤480px) ---------- */
@media (max-width: 480px) {
    .km-page-actions { flex-wrap: wrap; gap: 8px; }
    .km-list-footer { flex-wrap: wrap; gap: 8px; justify-content: center; }
    .km-modal { width: calc(100vw - 24px); max-width: none; }
    /* Таблиці лишаються читабельними: колонки не стискаються, а список
       прокручується горизонтально всередині .km-table-wrap */
    .km-table-wrap .km-table { min-width: 640px; }
    .km-tariff-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   Новий стиль (колишній app-v2.css)

   Правила нижче раніше були скоуплені під html[data-ui="v2"] і
   вмикалися перемикачем. Тепер стиль єдиний: префікс замінено на
   html:root / :root — специфічність і порядок ті самі, тож правила
   так само перекривають базові вище по файлу.
   ================================================================ */

/* ================================================================
   1. База: типографіка, скрол, виділення, фокус
   ================================================================ */
html:root body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -.005em;
}
:root ::selection {
    background: var(--km-primary-bg);
    color: var(--km-text);
}
:root ::-webkit-scrollbar { width: 10px; height: 10px; }
:root ::-webkit-scrollbar-thumb {
    background: var(--km-primary);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}
:root ::-webkit-scrollbar-thumb:hover {
    background: var(--km-primary-hover);
    background-clip: content-box;
}
:root * {
    scrollbar-color: var(--km-primary) transparent;
}
:root :focus-visible {
    outline: 2px solid var(--km-primary);
    outline-offset: 2px;
}
/* Поля вводу мають власну рамку фокусу (border + box-shadow ring),
   тому загальний outline для них вимикається - інакше подвійна рамка. */
:root .km-input:focus-visible,
:root .km-select:focus-visible,
:root .km-textarea:focus-visible,
:root .km-doc-title:focus-visible,
:root .km-pos-search__input:focus-visible,
:root .km-chat-composer__input:focus-visible,
:root .ts-control input:focus-visible {
    outline: none;
}

/* ================================================================
   2. Навбар
   ================================================================ */
:root .km-navbar {
    background: var(--km-nav-bg);
    border-bottom: 1px solid var(--km-v2-nav-border);
    padding: 0 20px;
    gap: 4px;
}
:root .km-navbar__brand {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.02em;
    gap: 10px;
    margin-right: 20px;
    color: var(--km-nav-active-text);
}
:root .km-navbar__brand svg {
    color: var(--km-primary);
}
:root .km-navbar__menu {
    align-items: center;
    height: auto;
    gap: 2px;
    /* Пункти не переносяться: на середніх ширинах вони налазили на блок
       іконок праворуч. Замість накладання — власна горизонтальна
       прокрутка без видимої смуги (як у підменю) */
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
}
:root .km-navbar__menu::-webkit-scrollbar { display: none; }
:root .km-navbar__item { flex-shrink: 0; }
:root .km-navbar__link {
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--km-nav-text);
}
:root .km-navbar__link:hover {
    background: var(--km-nav-hover-bg);
    color: var(--km-nav-active-text);
}
:root .km-navbar__item.is-active .km-navbar__link {
    background: var(--km-primary-bg);
    color: var(--km-primary);
    font-weight: 600;
}
:root .km-navbar__right { gap: 2px; }
:root .km-navbar__icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: var(--km-nav-text);
}
:root .km-navbar__icon-btn:hover {
    background: var(--km-nav-hover-bg);
    color: var(--km-nav-active-text);
}
:root .km-navbar__badge {
    background: var(--km-danger);
    color: var(--km-v2-on-danger);
    font-weight: 600;
    top: 0;
    right: 0;
    box-shadow: 0 0 0 2px var(--km-nav-bg);
}
:root .km-navbar__user {
    border-left: 1px solid var(--km-v2-nav-border);
    margin-left: 8px;
    padding-left: 10px;
}
:root .km-navbar__user-dropdown .km-navbar__user {
    border-radius: 8px;
    padding: 4px 8px 4px 10px;
}
:root .km-navbar__user-dropdown .km-navbar__user:hover {
    background: var(--km-nav-hover-bg);
}
:root .km-navbar__avatar {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: .8125rem;
    background: var(--km-primary);
    color: var(--km-primary-text);
}
:root .km-navbar__user-name {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--km-nav-active-text);
}
:root .km-navbar__user-login {
    font-size: .6875rem;
    color: var(--km-text-muted);
}
:root .km-hamburger {
    border-radius: 8px;
    color: var(--km-nav-text);
}
:root .km-hamburger:hover { background: var(--km-nav-hover-bg); }

/* ================================================================
   3. Підменю — пігулки замість підкреслення
   ================================================================ */
:root .km-submenu {
    background: var(--km-sub-bg);
    border-bottom: 1px solid var(--km-v2-nav-border);
    padding: 0 20px;
    gap: 2px;
    align-items: center;
}
:root .km-submenu__link {
    height: 32px;
    padding: 0 12px;
    border-bottom: none;
    border-radius: 8px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--km-sub-text);
}
:root .km-submenu__link:hover {
    background: var(--km-nav-hover-bg);
    color: var(--km-nav-active-text);
}
:root .km-submenu__link.is-active {
    background: var(--km-primary-bg);
    color: var(--km-sub-active-text);
    font-weight: 600;
}
:root .km-submenu__link.is-stub {
    opacity: 1;
    color: var(--km-text-muted);
}
:root .km-submenu__link.is-stub:hover {
    background: transparent;
    color: var(--km-text-muted);
}

/* ================================================================
   4. Каркас сторінки, заголовок, хлібні крихти
   ================================================================ */
:root .km-main { padding: 24px 28px 28px; }
:root .km-page-header {
    margin-bottom: 20px;
    gap: 12px;
}
:root .km-page-title {
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.25;
}
:root .km-page-count {
    height: 22px;
    border-radius: 7px;
    background: var(--km-primary-bg);
    color: var(--km-primary);
    font-weight: 600;
}
:root .km-breadcrumb {
    font-size: .8125rem;
    margin-bottom: 14px;
}

/* ================================================================
   5. Кнопки
   ================================================================ */
:root .km-btn {
    min-height: 36px;
    padding: 0 14px;
    border-radius: var(--km-radius-sm);
    font-size: .8125rem;
    font-weight: 550;
    border: 1px solid var(--km-border);
    background: var(--km-bg-card);
    color: var(--km-text);
    box-shadow: var(--km-shadow);
    transition: background var(--km-transition), border-color var(--km-transition),
                color var(--km-transition), box-shadow var(--km-transition);
}
:root .km-btn:hover {
    background: var(--km-v2-surface-strong);
    border-color: var(--km-border);
    box-shadow: var(--km-shadow);
}
:root .km-btn:active { transform: translateY(1px); }
:root .km-btn:disabled,
:root .km-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}
:root .km-btn--primary {
    background: var(--km-primary);
    border-color: var(--km-primary);
    color: var(--km-primary-text);
}
:root .km-btn--primary:hover {
    background: var(--km-primary-hover);
    border-color: var(--km-primary-hover);
    color: var(--km-primary-text);
}
:root .km-btn--danger {
    background: var(--km-danger);
    border-color: var(--km-danger);
    color: var(--km-v2-on-danger);
}
/* Небезпечна дія в одному ряду зі звичайними кнопками: та сама рамка, фон
   і тінь, що в сусідів, червоний лише текст. Суцільно червона кнопка поруч
   із білими оптично здається вищою, хоча висота та сама */
:root .km-btn--danger-soft {
    color: var(--km-danger);
}
:root .km-btn--danger-soft:hover {
    background: var(--km-v2-danger-soft);
    border-color: color-mix(in srgb, var(--km-danger) 35%, var(--km-border));
    color: var(--km-danger);
}
:root .km-btn--danger:hover {
    background: var(--km-danger-hover);
    border-color: var(--km-danger-hover);
    color: var(--km-v2-on-danger);
}
:root .km-btn--secondary {
    background: var(--km-v2-surface);
    border-color: var(--km-border);
}
:root .km-btn--secondary:hover {
    background: var(--km-v2-surface-strong);
    border-color: var(--km-border);
}
:root .km-btn--outline {
    background: transparent;
    box-shadow: none;
}
:root .km-btn--outline:hover { background: var(--km-v2-surface-strong); }
:root .km-btn--create-child {
    background: var(--km-accent-light);
    border-color: transparent;
    color: var(--km-primary);
    box-shadow: none;
}
:root .km-btn--create-child:hover {
    background: var(--km-primary);
    border-color: var(--km-primary);
    color: var(--km-primary-text);
}
:root .km-btn--sm {
    min-height: 30px;
    padding: 0 10px;
    font-size: .75rem;
}
:root .km-btn--icon {
    min-width: 34px;
    min-height: 34px;
    padding: 0;
}
:root .km-btn--block { width: 100%; }

/* ================================================================
   6. Поля вводу й форми
   ================================================================ */
:root .km-input,
:root .km-select,
:root .km-textarea {
    min-height: 36px;
    padding: 7px 11px;
    font-size: .8125rem;
    border-radius: var(--km-radius-sm);
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    transition: border-color var(--km-transition), box-shadow var(--km-transition),
                background var(--km-transition);
}
:root .km-input::placeholder,
:root .km-textarea::placeholder { color: var(--km-text-muted); }
:root .km-input:hover,
:root .km-select:hover,
:root .km-textarea:hover { border-color: var(--km-text-muted); }
:root .km-input:focus,
:root .km-select:focus,
:root .km-textarea:focus {
    border-color: var(--km-primary);
    box-shadow: var(--km-v2-ring);
}
:root .km-input:disabled,
:root .km-select:disabled,
:root .km-textarea:disabled {
    background: var(--km-v2-surface);
    color: var(--km-text-muted);
    cursor: not-allowed;
}
:root .km-textarea { min-height: 88px; }
:root .km-form-group { margin-bottom: 16px; }
:root .km-form-label {
    font-size: .8125rem;
    font-weight: 550;
    margin-bottom: 6px;
    color: var(--km-text);
}
:root .km-form-hint {
    font-size: .75rem;
    margin-top: 5px;
    line-height: 1.45;
}
:root .km-form-error { margin-top: 5px; }
:root .km-form-error--block {
    background: var(--km-v2-danger-soft);
    border: 1px solid transparent;
    border-left: 3px solid var(--km-danger);
    border-radius: var(--km-radius-sm);
    color: var(--km-text);
    padding: 12px 14px;
}
:root .km-form-group.is-error .km-input,
:root .km-form-group.is-error .km-select,
:root .km-form-group.is-error .km-textarea,
:root .km-form-group.is-error .ts-control {
    border-color: var(--km-danger);
}
:root .km-form-group.is-error .km-input:focus,
:root .km-form-group.is-error .km-textarea:focus {
    box-shadow: var(--km-v2-ring-danger);
}
:root .km-form-actions {
    margin-top: 24px;
    padding-top: 18px;
}
:root .km-readonly-value {
    min-height: 36px;
    background: var(--km-v2-surface);
    border-radius: var(--km-radius-sm);
}
:root .km-radio-label input[type="radio"] { width: 17px; height: 17px; }

/* Тумблер */
:root .km-switch { width: 34px; height: 20px; }
:root .km-switch__slider { border-radius: 999px; }
:root .km-switch__slider::before {
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .25);
}
:root .km-switch input:checked + .km-switch__slider::before {
    transform: translateX(14px);
}

/* ================================================================
   7. Пошук і тулбар
   ================================================================ */
:root .km-toolbar { gap: 8px; margin-bottom: 14px; }
:root .km-search .km-input { padding-left: 11px; }
:root .km-search__icon { color: var(--km-text-muted); }
:root .km-search__clear {
    right: 7px;
    width: 20px;
    height: 20px;
    border-radius: 6px;
}
:root .km-search__clear:hover {
    background: var(--km-v2-danger-soft);
    color: var(--km-danger);
}

/* ================================================================
   8. Картки
   ================================================================ */
:root .km-card {
    border-radius: var(--km-radius);
    box-shadow: var(--km-shadow);
}
:root .km-card__header {
    padding: var(--km-card-head-pad, 10px 14px);
    font-weight: 650;
    font-size: .875rem;
    letter-spacing: -.01em;
}
:root .km-card__body { padding: var(--km-card-pad, 12px 14px); }
:root .km-card--danger { border-color: var(--km-danger); }
:root .km-card--highlight { border-color: var(--km-primary); }

/* ================================================================
   9. Таблиці — без зебри, з тихою шапкою й підсвіткою рядка
   ================================================================ */
:root .km-table-wrap {
    border-radius: var(--km-radius);
    box-shadow: var(--km-shadow);
}
:root .km-table { font-size: .8125rem; }
:root .km-table th {
    background: var(--km-v2-surface);
    border-bottom: 1px solid var(--km-border);
    padding: 10px 14px;
    font-size: .6875rem;
    font-weight: 650;
    letter-spacing: .04em;
    color: var(--km-text-muted);
}
:root .km-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--km-border);
}
:root .km-table tbody tr:last-child td { border-bottom: none; }
:root .km-table tbody tr:nth-child(even) { background: transparent; }
:root .km-table tbody tr:hover,
:root .km-table tbody tr:nth-child(even):hover {
    background: var(--km-row-hover);
}
:root .km-table__link {
    font-weight: 550;
    color: var(--km-primary);
}
:root .km-table__link:hover { text-decoration: underline; }
:root .km-table__row--archived td { opacity: .55; }
:root .km-sort:hover { color: var(--km-primary); }
:root td.km-cell--progress {
    background: var(--km-v2-success-soft);
    color: var(--km-success);
    font-weight: 550;
}
:root .km-detail-table th,
:root .km-detail-table td { padding: 10px 14px; }
:root .km-detail-table tr:last-child th,
:root .km-detail-table tr:last-child td { border-bottom: none; }

/* Компактна щільність лишається доступною і в новому стилі */
:root.km-density-compact .km-table th,
:root.km-density-compact .km-table td {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: .78rem;
}

/* ================================================================
   10. Пагінація й футер списку
   ================================================================ */
:root .km-pagination__link,
:root .km-pagination__current {
    min-width: 32px;
    height: 32px;
    border-radius: var(--km-radius-sm);
    font-weight: 550;
}
:root .km-pagination__link {
    color: var(--km-text);
    border: 1px solid transparent;
}
:root .km-pagination__link:hover {
    background: var(--km-v2-surface-strong);
    border-color: var(--km-border);
}
:root .km-pagination__current {
    background: var(--km-primary);
    color: var(--km-primary-text);
}
:root .km-footer {
    background: var(--km-bg-card);
    border-top: 1px solid var(--km-border);
    padding: 10px 28px;
}
:root .km-list-footer__value { font-weight: 650; }

/* ================================================================
   11. Порожні стани
   ================================================================ */
:root .km-empty,
:root .km-stub { padding: 64px 24px; }
:root .km-empty__title,
:root .km-stub__title {
    font-weight: 650;
    letter-spacing: -.01em;
}
:root .km-empty__icon,
:root .km-stub__icon { opacity: .35; }

/* ================================================================
   12. Бейджі, статуси, суми
   ================================================================ */
:root .km-badge {
    padding: 3px 9px;
    border-radius: 7px;
    font-size: .6875rem;
    font-weight: 650;
    letter-spacing: .01em;
}
:root .km-badge--success,
:root[data-theme="dark"] .km-badge--success {
    background: var(--km-v2-success-soft);
    color: var(--km-success);
}
:root .km-badge--warning,
:root[data-theme="dark"] .km-badge--warning {
    background: var(--km-v2-warning-soft);
    color: var(--km-warning);
}
:root .km-badge--danger,
:root[data-theme="dark"] .km-badge--danger {
    background: var(--km-v2-danger-soft);
    color: var(--km-danger);
}
:root .km-badge--info,
:root[data-theme="dark"] .km-badge--info {
    background: var(--km-v2-info-soft);
    color: var(--km-info);
}
:root .km-badge--neutral,
:root[data-theme="dark"] .km-badge--neutral {
    background: var(--km-v2-surface-strong);
    color: var(--km-text-muted);
}
:root .km-amount--in,
:root[data-theme="dark"] .km-amount--in,
:root .km-type-label--in,
:root[data-theme="dark"] .km-type-label--in,
:root .km-pay-summary__item--in .km-pay-summary__value,
:root[data-theme="dark"] .km-pay-summary__item--in .km-pay-summary__value {
    color: var(--km-v2-in);
}
:root .km-amount--out,
:root[data-theme="dark"] .km-amount--out,
:root .km-type-label--out,
:root[data-theme="dark"] .km-type-label--out,
:root .km-pay-summary__item--out .km-pay-summary__value,
:root[data-theme="dark"] .km-pay-summary__item--out .km-pay-summary__value {
    color: var(--km-v2-out);
}
:root .km-state-badge,
:root .km-state-pill__btn { border-radius: 8px; }
:root .km-state-pill__menu {
    border-radius: var(--km-radius);
    box-shadow: var(--km-v2-shadow-pop);
    padding: 6px;
}
:root .km-state-pill__item { border-radius: 6px; padding: 7px 10px; }
:root .km-flag-check { color: var(--km-success); }

/* ================================================================
   13. Випадні меню
   ================================================================ */
:root .km-dropdown__menu {
    border-radius: var(--km-radius);
    box-shadow: var(--km-v2-shadow-pop);
    padding: 6px;
    min-width: 200px;
}
:root .km-dropdown__item {
    border-radius: 8px;
    padding: 8px 10px;
    font-size: .8125rem;
    font-weight: 500;
}
:root .km-dropdown__item:hover { background: var(--km-v2-surface-strong); }
:root .km-dropdown__item--danger { color: var(--km-danger); }
:root .km-dropdown__item--danger:hover { background: var(--km-v2-danger-soft); }
:root .km-dropdown__divider { margin: 6px 4px; }
:root .km-dropdown__menu--pad { padding: 14px; }

/* ================================================================
   14. Модальні вікна
   ================================================================ */
:root .km-modal-overlay,
:root .km-modal-backdrop {
    background: var(--km-v2-scrim);
    backdrop-filter: blur(3px);
    padding: 20px;
}
:root .km-modal {
    border-radius: var(--km-radius);
    border: 1px solid var(--km-border);
    box-shadow: var(--km-v2-shadow-pop);
    overflow: hidden;
}
:root .km-modal__header {
    padding: 18px 22px 14px;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -.01em;
}
:root .km-modal__title { font-size: 1rem; font-weight: 650; }
:root .km-modal__body { padding: 18px 22px; }
:root .km-modal__footer { padding: 14px 22px 18px; }
:root .km-modal__close {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.25rem;
    color: var(--km-text-muted);
    transition: background var(--km-transition), color var(--km-transition);
}
:root .km-modal__close:hover {
    background: var(--km-v2-surface-strong);
    color: var(--km-text);
}
:root .km-modal--entity { border-radius: var(--km-radius); }
:root .km-modal__note { font-size: .8125rem; line-height: 1.5; }

/* ================================================================
   15. Бічна панель і плаваючі панелі
   ================================================================ */
:root .km-side-panel__backdrop {
    background: var(--km-v2-scrim);
    backdrop-filter: blur(2px);
}
/* Підложка журналу змін — лише затемнення, без розмиття сторінки */
:root .km-audit-panel__backdrop {
    background: var(--km-v2-scrim);
}
:root .km-side-panel__card {
    border-left: 1px solid var(--km-border);
    box-shadow: var(--km-v2-shadow-pop);
}
:root .km-side-panel__header { padding: 16px 20px; }
:root .km-side-panel__title { font-weight: 650; letter-spacing: -.01em; }
:root .km-side-panel__close {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background var(--km-transition), color var(--km-transition);
}
:root .km-side-panel__close:hover {
    background: var(--km-v2-surface-strong);
    color: var(--km-text);
}
:root .km-side-panel__body { padding: 18px 20px; }
/* Липкий футер панелі перекриває нижній padding тіла, інакше під ним
   визирає смуга контенту заввишки з цей padding */
:root .km-side-panel__footer {
    margin: 16px -20px -18px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--km-border);
    /* Липка позиція рахується від контентного краю тіла панелі, тому
       від'ємний зсув на висоту нижнього padding притискає футер до низу */
    bottom: -18px;
}
:root .km-doc-sidebar-card {
    border-radius: var(--km-radius);
    box-shadow: var(--km-v2-shadow-pop);
}
:root .km-audit-panel .km-doc-sidebar-card {
    top: calc(var(--km-nav-height) + var(--km-sub-height));
    border-radius: 0;
}
:root .km-panel-tabs__nav { gap: 2px; }
:root .km-panel-tabs__btn {
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 6px 12px;
    font-weight: 550;
}
:root .km-panel-tabs__btn:hover { background: var(--km-v2-surface); }
:root .km-panel-tabs__btn.is-active {
    background: var(--km-primary-bg);
    color: var(--km-primary);
    border-bottom: none;
}

/* ================================================================
   16. Тости, спінер, прогрес
   ================================================================ */
:root .km-toast {
    border-radius: var(--km-radius);
    box-shadow: var(--km-v2-shadow-pop);
    padding: 13px 16px;
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: var(--km-border);
}
:root .km-toast--success { border-left-color: var(--km-success); }
:root .km-toast--error { border-left-color: var(--km-danger); }
:root .km-toast--warning { border-left-color: var(--km-warning); }
:root .km-toast--info { border-left-color: var(--km-info); }
:root .km-toast-container { bottom: 20px; right: 20px; }
:root .km-progress { height: 3px; }
:root .km-spinner { border-width: 2px; }

/* ================================================================
   17. Панель фільтрів
   ================================================================ */
:root .km-filter-panel {
    border-radius: var(--km-radius);
    padding: 14px 16px;
    box-shadow: var(--km-shadow);
}
:root .km-filter-toggle.is-open {
    background: var(--km-primary-bg);
    border-color: transparent;
    color: var(--km-primary);
}
:root .km-filter-toggle__count {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: var(--km-primary);
    color: var(--km-primary-text);
}
:root .km-filter-panel .km-input {
    min-height: 30px;
    padding: 4px 8px;
}
:root .km-filter-field.is-active {
    background: var(--km-primary-bg);
    border-radius: var(--km-radius-sm);
}
:root .km-filter-ops,
:root .km-filter-gear__menu {
    border-radius: var(--km-radius);
    box-shadow: var(--km-v2-shadow-pop);
    padding: 6px;
}
:root .km-filter-ops__item,
:root .km-filter-gear__row { border-radius: 8px; padding: 7px 9px; }
:root .km-filter-ops__item:hover,
:root .km-filter-gear__row:hover { background: var(--km-v2-surface-strong); }
:root .km-filter-chip {
    border-radius: 8px;
    padding: 4px 9px;
    background: var(--km-v2-surface);
}
:root .km-filter-chip:hover {
    border-color: var(--km-primary);
    background: var(--km-primary-bg);
}
:root .km-filter-saved__arrow {
    border-radius: 8px;
    width: 26px;
    height: 26px;
}
:root .km-filter-saved__arrow:hover {
    background: var(--km-v2-surface-strong);
    border-color: var(--km-primary);
}
:root .km-bulkbar {
    border-radius: var(--km-radius);
    border-color: transparent;
    background: var(--km-primary-bg);
    box-shadow: none;
    padding: 10px 14px;
}
:root .km-pos-bulkbar {
    border-radius: var(--km-radius-sm);
    border-color: transparent;
    background: var(--km-primary-bg);
}
:root .km-density__group .km-btn { min-height: 30px; }

/* ================================================================
   18. Tom Select
   ================================================================ */
/* Tom Select переносить class вихідного <select>/<input> (km-select /
   km-input) на .ts-wrapper, тож обгортка успадковує оформлення поля з
   розділу 8 і навколо контрола зʼявляється друга рамка з власним фоном,
   радіусом і падінгами. Базовий розділ знімає це правилом тієї самої
   специфічності, тож контекстні правила нижче (позиції документа, панель
   фільтрів, поля картки) знову повертали б рамку — тому знімаємо
   оформлення обгортки ще раз, а префікс html:root піднімає специфічність
   над ними незалежно від порядку у файлі. Видиме поле малює лише
   .ts-control. */
html:root .ts-wrapper.km-select,
html:root .ts-wrapper.km-input,
html:root .ts-wrapper.km-textarea,
html:root .ts-wrapper.km-select:hover,
html:root .ts-wrapper.km-input:hover,
html:root .ts-wrapper.km-textarea:hover {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    min-height: 0;
}

:root .ts-wrapper.single .ts-control,
:root .ts-wrapper .ts-control {
    min-height: 36px;
    padding: 6px 10px;
    border-radius: var(--km-radius-sm);
    border: 1px solid var(--km-border);
    background: var(--km-bg-card);
    font-size: .8125rem;
    transition: border-color var(--km-transition), box-shadow var(--km-transition);
}
:root .ts-wrapper:not(.disabled):not(.focus) .ts-control:hover {
    border-color: var(--km-text-muted);
}
:root .ts-wrapper.focus .ts-control {
    border-color: var(--km-primary);
    box-shadow: var(--km-v2-ring);
}
:root .ts-wrapper.disabled .ts-control {
    background: var(--km-v2-surface);
    opacity: 1;
    color: var(--km-text-muted);
}
:root .ts-wrapper.single .ts-control::after {
    right: 12px;
    width: 6px;
    height: 6px;
    border-right-width: 1.5px;
    border-bottom-width: 1.5px;
    border-color: var(--km-text-muted);
}
:root .ts-control input { font-size: .8125rem; }
:root .ts-dropdown {
    border-radius: var(--km-radius);
    box-shadow: var(--km-v2-shadow-pop);
    padding: 5px;
    margin-top: 5px;
    overflow: hidden;
}
:root .ts-dropdown .option {
    padding: 7px 10px;
    border-radius: 7px;
}
:root .ts-dropdown .active {
    background: var(--km-primary-bg);
    color: var(--km-text);
}
:root .ts-dropdown .optgroup-header {
    padding: 6px 10px;
    font-size: .6875rem;
    font-weight: 650;
    letter-spacing: .04em;
    color: var(--km-text-muted);
    text-transform: uppercase;
    background: transparent;
}
:root .ts-wrapper.multi .ts-control > .item {
    border-radius: 6px;
    background: var(--km-primary-bg);
    color: var(--km-text);
    border: none;
    padding: 2px 7px;
}
/* Компактні розміри задаються контролу, а не обгортці: у полях документа
   й у шапці розміри полів менші за загальні */
:root .km-doc-field__control .ts-wrapper .ts-control {
    min-height: 34px;
    padding: 5px 10px;
}
:root .km-doc-badge--state .ts-wrapper .ts-control {
    min-height: 30px;
    padding: 4px 9px;
}
:root .km-filter-panel .ts-wrapper .ts-control {
    min-height: 30px;
    max-height: 30px;
    padding: 3px 8px;
}
:root .km-filter-panel .ts-wrapper.multi .ts-control > .item {
    border-radius: 6px;
    border: none;
    background: var(--km-primary-bg);
}
:root .km-fk-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--km-radius-sm);
}
:root .km-fk-btn:hover {
    background: var(--km-primary-bg);
    border-color: transparent;
    color: var(--km-primary);
}

/* ================================================================
   19. Форма документа
   ================================================================ */
:root .km-doc-bar {
    background: transparent;
    padding: 12px 0;
    margin-bottom: 12px;
}
:root .km-doc-card {
    border-radius: var(--km-radius);
    padding: 18px 20px;
    box-shadow: var(--km-shadow);
}
:root .km-doc-title {
    font-size: .8125rem;
    font-weight: 650;
    min-height: 34px;
    padding: 6px 11px;
    border-radius: var(--km-radius-sm);
}
:root .km-doc-title:focus {
    border-color: var(--km-primary);
    box-shadow: var(--km-v2-ring);
}
:root .km-doc-header__eyebrow,
:root .km-doc-group__title,
:root .km-doc-sidebar-card__eyebrow {
    font-size: .6875rem;
    font-weight: 650;
    letter-spacing: .06em;
}
:root .km-doc-field__label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--km-text-muted);
}
:root .km-doc-field__control .km-input,
:root .km-doc-field__control .km-select {
    min-height: 34px;
    padding: 6px 10px;
}
:root .km-doc-field__control .km-textarea {
    min-height: 68px;
    padding: 7px 10px;
}
:root .km-doc-field:has(.km-checkbox) .km-doc-field__label {
    font-size: .8125rem;
    font-weight: 450;
    letter-spacing: 0;
    color: var(--km-text);
}
:root .km-doc-tabs {
    border-bottom: 1px solid var(--km-border);
    gap: 2px;
    margin-top: 20px;
}
:root .km-doc-tabs__btn {
    padding: 9px 14px;
    font-size: .8125rem;
    font-weight: 550;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    margin-bottom: -1px;
}
:root .km-doc-tabs__btn:hover {
    background: var(--km-v2-surface);
    color: var(--km-text);
}
:root .km-doc-tabs__btn.is-active {
    color: var(--km-primary);
    background: var(--km-primary-bg);
    border-bottom-color: var(--km-primary);
}
:root .km-doc-badge--state .km-select { min-height: 30px; padding: 4px 9px; }
:root .km-doc-pay-status { border-radius: 8px; font-weight: 600; }
:root .km-doc-pay-status--paid {
    background: var(--km-v2-success-soft);
    color: var(--km-success);
}
:root .km-doc-pay-status--partial {
    background: var(--km-v2-warning-soft);
    color: var(--km-warning);
}
:root .km-doc-pay-status--unpaid {
    background: var(--km-v2-danger-soft);
    color: var(--km-danger);
}
:root .km-owner-card__toggle,
:root .km-doc-history-chip {
    background: var(--km-v2-surface);
    border-radius: var(--km-radius-sm);
    padding: 6px 12px;
    transition: background var(--km-transition), border-color var(--km-transition);
}
:root .km-owner-card__toggle:hover,
:root .km-doc-history-chip:hover {
    background: var(--km-v2-surface-strong);
    border-color: var(--km-text-muted);
}
:root .km-owner-card__menu {
    border-radius: var(--km-radius);
    box-shadow: var(--km-v2-shadow-pop);
    padding: 14px;
}
:root .km-doc-totals__value--big {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.02em;
}
:root .km-doc-bottom__comment .km-textarea,
:root .km-doc-bottom__comment textarea {
    border-radius: var(--km-radius-sm);
    padding: 9px 11px;
}
:root .km-audit-log__item { padding-left: 0; }
:root .km-audit-log__action { font-weight: 650; letter-spacing: .05em; }

/* ================================================================
   20. Таблиця позицій документа
   ================================================================ */
:root .km-positions__table .km-input,
:root .km-positions__table .km-select {
    min-height: 30px;
    padding: 4px 8px;
    border-radius: 7px;
}
:root .km-positions__table .km-input:focus,
:root .km-positions__table .km-select:focus {
    border-color: var(--km-primary);
    box-shadow: var(--km-v2-ring);
}
:root .km-positions__table .km-input:hover,
:root .km-positions__table .km-select:hover {
    border-color: var(--km-text-muted);
}
:root .km-positions__table .ts-wrapper .ts-control {
    min-height: 30px;
    padding: 3px 8px;
}
:root .km-positions__remove:hover {
    color: var(--km-danger);
    background: var(--km-v2-danger-soft);
}
:root .km-positions__remove,
:root .km-pos-menu__btn { border-radius: 7px; }
:root .km-pos-menu__btn:hover { background: var(--km-v2-surface-strong); }
:root .km-pos-menu__dropdown {
    border-radius: var(--km-radius);
    box-shadow: var(--km-v2-shadow-pop);
    padding: 6px;
}
:root .km-pos-menu__item { border-radius: 7px; padding: 7px 10px; }
:root .km-pos-menu__item:hover:not(:disabled) { background: var(--km-v2-surface-strong); }
:root .km-pos-menu__item--danger:hover { background: var(--km-v2-danger-soft); }
:root .km-positions__add-bar { padding: 10px 14px; }
:root .km-pos-search__input {
    min-height: var(--km-control-h);
    padding: 4px 10px;
    border-radius: var(--km-radius-sm);
    border-style: dashed;
}
:root .km-pos-search__input:focus { box-shadow: var(--km-v2-ring); }
:root .km-pos-search__dropdown {
    border-radius: var(--km-radius);
    box-shadow: var(--km-v2-shadow-pop);
    padding: 5px;
}
:root .km-pos-search__item { border-radius: 8px; padding: 8px 10px; }
:root .km-pos-search__item:hover,
:root .km-pos-search__item.is-active { background: var(--km-primary-bg); }
:root .km-positions__row.is-replacing td { background: var(--km-primary-bg); }
:root .km-positions__table .km-pos-num-input.is-zero {
    border-color: var(--km-danger);
    background: var(--km-v2-danger-soft);
}
/* Заголовки колонок позицій: дрібніший шрифт і завжди в один рядок -
   колонок багато (залишки, собівартість, прибуток), довга назва не
   має робити шапку двоповерховою */
:root .km-positions__table th,
:root.km-density-compact .km-positions__table th {
    font-size: .625rem;
    white-space: nowrap;
}

/* ================================================================
   21. Вікно вибору товарів
   ================================================================ */
:root .km-picker__step {
    border-radius: 7px;
    width: 26px;
    height: 26px;
}
:root .km-picker__step:hover {
    background: var(--km-primary-bg);
    border-color: transparent;
}
:root .km-picker__qty-input {
    min-height: 30px;
    padding: 4px 8px;
}
:root .km-picker__table .km-picker__row.is-selected { background: var(--km-primary-bg); }

/* ================================================================
   22. Флоучарт повʼязаних документів
   ================================================================ */
:root .km-flowchart__node {
    border-width: 1px;
    border-radius: var(--km-radius);
    padding: 14px 18px;
    box-shadow: var(--km-shadow);
    transition: border-color var(--km-transition), box-shadow var(--km-transition),
                transform var(--km-transition);
}
:root .km-flowchart__node:hover {
    border-color: var(--km-primary);
    box-shadow: var(--km-v2-shadow-pop);
    transform: translateY(-2px);
}
:root .km-flowchart__node--current {
    border-color: var(--km-primary);
    background: var(--km-primary-bg);
    box-shadow: var(--km-shadow);
}
:root .km-flowchart__node-label { font-weight: 650; letter-spacing: .05em; }
:root .km-flowchart__edge { stroke: var(--km-primary); opacity: .35; }

/* ================================================================
   23. Каталог товарів
   ================================================================ */
:root .km-catalog__sidebar {
    border-right: 1px solid var(--km-border);
    padding-right: 10px;
}
:root .km-catalog__main { padding-left: 26px; }
:root .km-catalog__folder {
    border-radius: 8px;
    padding: 5px 10px 5px 6px;
    font-size: .8125rem;
}
:root .km-catalog__folder:hover {
    background: var(--km-v2-surface-strong);
    color: var(--km-text);
}
:root .km-catalog__folder.is-active {
    background: var(--km-primary-bg);
    color: var(--km-primary);
    font-weight: 600;
}
:root .km-catalog__chevron { border-radius: 6px; }
:root .km-catalog__chevron:hover { background: var(--km-v2-surface-strong); }
:root .km-catalog__folder-edit { border-radius: 6px; }
:root .km-catalog__folder-edit:hover {
    background: var(--km-primary-bg);
    color: var(--km-primary);
}

/* ================================================================
   24. Налаштування, права ролей
   ================================================================ */
:root .km-settings-nav {
    border-radius: var(--km-radius);
    padding: 6px;
    box-shadow: var(--km-shadow);
}
:root .km-settings-nav__item {
    border-radius: 8px;
    padding: 9px 12px;
    font-size: .8125rem;
    font-weight: 500;
}
:root .km-settings-nav__item:hover { background: var(--km-v2-surface-strong); }
:root .km-settings-nav__item.is-active {
    background: var(--km-primary-bg);
    color: var(--km-primary);
}
:root .km-settings-nav__item--danger { color: var(--km-danger); }
:root .km-settings-nav__item--danger:hover { background: var(--km-v2-danger-soft); }
:root .km-settings-nav__separator {
    font-size: .6875rem;
    font-weight: 650;
    letter-spacing: .05em;
    padding: 12px 12px 6px;
}
:root .km-settings-dir-item {
    border-radius: 8px;
    padding: 9px 12px;
    font-size: .8125rem;
}
:root .km-settings-dir-item:hover { background: var(--km-v2-surface-strong); }
:root .km-settings-list-title { font-size: 1rem; font-weight: 650; }
:root .km-permissions-table th {
    font-size: .625rem;
    font-weight: 650;
    letter-spacing: .04em;
    padding: 8px 6px;
}
:root .km-permissions-table td { padding: 6px; }
:root .km-permissions-table tbody tr:hover { background: var(--km-row-hover); }
:root .km-permissions-scope {
    border-radius: 7px;
    min-height: 30px;
    background: var(--km-bg-card);
}

/* ================================================================
   25. Панелі: колонки, додаткові поля, статуси
   ================================================================ */
:root .km-columns__row {
    border-radius: var(--km-radius-sm);
    background: var(--km-v2-surface);
    padding: 8px 10px;
}
:root .km-columns__row.is-over {
    border-color: var(--km-primary);
    background: var(--km-primary-bg);
}
:root .km-columns__badge { border-radius: 6px; }
:root .km-attrs__row {
    border-radius: var(--km-radius-sm);
    background: var(--km-v2-surface);
}
:root .km-attrs__icon-btn { border-radius: 7px; }
:root .km-attrs__icon-btn:hover:not(:disabled) { background: var(--km-v2-surface-strong); }
:root .km-attrs__icon-btn--danger:hover:not(:disabled) {
    background: var(--km-v2-danger-soft);
    color: var(--km-danger);
}
:root .km-states__icon-btn { border-radius: 7px; }
:root .km-states__icon-btn:hover:not(:disabled) {
    background: var(--km-v2-surface-strong);
    border-color: transparent;
}
:root .km-states__icon-btn--danger:hover {
    background: var(--km-v2-danger-soft);
    color: var(--km-danger);
}
:root .km-states__palette {
    border-radius: var(--km-radius);
    box-shadow: var(--km-v2-shadow-pop);
}
:root .km-states__swatch { border-radius: 6px; }
:root .km-extra-field__hint { border-radius: 6px; }

/* ================================================================
   26. Картка товару, контрагента, організації
   ================================================================ */
:root .km-goods-name__label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
}
:root .km-goods-name .km-input {
    font-size: 1.125rem;
    font-weight: 650;
    letter-spacing: -.02em;
    min-height: 46px;
    padding: 10px 14px;
}
:root .km-goods-image img { border-radius: var(--km-radius-sm); }
:root .km-goods-block__title { font-size: .8125rem; font-weight: 650; }
:root .km-cp-group__title {
    font-size: .6875rem;
    font-weight: 650;
    letter-spacing: .05em;
}
:root .km-cp-tile {
    border-radius: var(--km-radius);
    background: var(--km-v2-surface);
    padding: 12px 14px;
}
:root .km-cp-tile__value { font-weight: 650; letter-spacing: -.02em; }
:root .km-org-bank {
    border-radius: var(--km-radius);
    background: var(--km-v2-surface);
    padding: 12px 14px;
}
:root .km-org-badge { border-radius: 6px; }
:root .km-employee-avatar { border-radius: 8px; }
:root .km-employee-access__enabled { color: var(--km-success); }
:root .km-ce-elements__row {
    border-radius: var(--km-radius-sm);
    background: var(--km-v2-surface);
}

/* ================================================================
   27. Показники й графіки
   ================================================================ */
:root .km-indicator-tile {
    border-radius: var(--km-radius);
    padding: 16px 18px;
    box-shadow: var(--km-shadow);
}
:root .km-indicator-tile__value {
    font-size: 1.625rem;
    font-weight: 650;
    letter-spacing: -.025em;
}
:root .km-indicators-block__title { font-weight: 650; letter-spacing: -.01em; }
:root .km-chart {
    border-radius: var(--km-radius);
    padding: 12px;
    box-shadow: var(--km-shadow);
}
:root .km-chart__line { stroke-width: 2.5; }
:root .km-chart__area { opacity: .10; }

/* ================================================================
   28. Звіти
   ================================================================ */
:root .km-report-variants {
    border-radius: var(--km-radius-sm);
    border-color: var(--km-border);
    background: var(--km-v2-surface);
    padding: 3px;
    gap: 2px;
}
:root .km-report-variants__btn {
    border-right: none;
    border-radius: 6px;
    background: transparent;
    padding: 6px 12px;
    font-weight: 550;
}
:root .km-report-variants__btn:hover { background: var(--km-v2-surface-strong); }
:root .km-report-variants__btn.is-active {
    background: var(--km-primary);
    color: var(--km-primary-text);
}
:root .km-stock-report__chevron { border-radius: 6px; }
:root .km-stock-report__chevron:hover { background: var(--km-v2-surface-strong); }
:root .km-stock-report__store-row td { background: var(--km-v2-surface); }
:root .km-stock-report__total td,
:root .km-goods-stock__total td {
    border-top: 1px solid var(--km-text-muted);
    font-weight: 650;
}
:root .km-pay-summary__item {
    border-radius: var(--km-radius);
    padding: 12px 16px;
    box-shadow: var(--km-shadow);
}
:root .km-pay-summary__label,
:root .km-pay-balances__title {
    font-size: .6875rem;
    font-weight: 650;
    letter-spacing: .05em;
}
:root .km-pay-summary__value { font-size: 1.125rem; font-weight: 650; }
:root .km-pay-balances__group {
    border-radius: var(--km-radius);
    padding: 12px 16px;
    box-shadow: var(--km-shadow);
}

/* ================================================================
   29. Майстер імпорту, перенесення з МойСклад
   ================================================================ */
:root .km-import-steps li {
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 500;
}
:root .km-import-steps li.is-active {
    background: var(--km-primary-bg);
    border-color: transparent;
    color: var(--km-primary);
    font-weight: 600;
}
:root .km-import-drop {
    border-radius: var(--km-radius);
    border-width: 1.5px;
    padding: 36px 20px;
    background: var(--km-v2-surface);
    transition: border-color var(--km-transition), background var(--km-transition);
}
:root .km-import-drop:hover { border-color: var(--km-primary); }
:root .km-import-drop.is-over {
    border-color: var(--km-primary);
    background: var(--km-primary-bg);
}
:root .km-import-drop__title { font-weight: 650; }
:root .km-import-progress__bar {
    height: 8px;
    border-radius: 999px;
    background: var(--km-v2-surface-strong);
}
:root .km-import-progress__fill { border-radius: 999px; }

/* ================================================================
   30. База знань, чати, кошик, підписка
   ================================================================ */
:root .km-help__body code {
    background: var(--km-v2-surface-strong);
    border-radius: 5px;
    padding: 2px 5px;
    font-family: var(--km-font-mono);
    font-size: .875em;
}
:root .km-tariff-card { border-radius: var(--km-radius); }
:root .km-tariff-card--current {
    border-color: var(--km-primary);
    box-shadow: var(--km-v2-ring);
}
:root .km-tariff-card__price { font-weight: 700; letter-spacing: -.03em; }
:root .km-period-toggle {
    background: var(--km-v2-surface);
    border-radius: var(--km-radius-sm);
    padding: 3px;
}
:root .km-option-row {
    border-radius: var(--km-radius);
    padding: 12px 14px;
}
:root .km-audit-filters__field .km-form-label { margin: 0; }

/* ================================================================
   30a. Розподіл платежу: вкладка «Оплачені документи» і вікно привʼязки
   ================================================================ */
.km-paylinks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.km-paylinks__toolbar {
    display: flex;
    margin-top: 12px;
    gap: 8px;
    flex-wrap: wrap;
}
/* «Оплачено з цього платежу» - найдовший заголовок таблиці: у типову
   ширину числової колонки (120px) не вміщався й обрізався трьома крапками */
:root .km-paylinks__table.km-table--list th.km-paylinks__col-own { width: 220px; }
/* Поле суми - того ж розміру, що поле «Сума» в таблиці позицій документа
   (.km-pos-sum-input: 130x30, відступи 4px 8px, скруглення 7px); колонка
   ширша за поле через довгий заголовок, тому поле притиснуте праворуч */
:root .km-paylinks__table .km-input.km-paylinks__sum {
    display: block;
    width: 130px;
    min-height: 30px;
    margin-left: auto;
    padding: 4px 8px;
    border-radius: 7px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.km-paylinks__applied {
    color: var(--km-success);
    font-weight: 600;
}
.km-paylinks__remove {
    color: var(--km-text-muted);
}
.km-paylinks__remove:hover {
    color: var(--km-danger);
    border-color: var(--km-danger);
}
.km-paylinks__empty {
    color: var(--km-text-muted);
    font-size: .875rem;
    margin: 0;
}
.km-paylinks__totals {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 260px;
}
.km-paylinks__total {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    font-size: .9375rem;
}
.km-paylinks__total.is-negative,
.km-paylinks__total.is-negative strong {
    color: var(--km-danger);
}

.km-paylink-picker {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Фільтр вікна - та сама панель, що у списках документів
   (.km-filter-panel); у вікні вона завжди відкрита й без нижнього відступу */
.km-paylink-picker__panel { margin-bottom: 0; }
.km-paylink-picker__hint,
.km-paylink-picker__empty {
    margin: 0;
    font-size: .875rem;
    color: var(--km-text-muted);
}
.km-paylink-picker__hint--warn {
    color: var(--km-warning);
}
.km-paylink-picker__list {
    max-height: 52vh;
    overflow-y: auto;
}

/* ---- Вкладка «Пов'язані документи»: схема, статус у вузлі, розрив зв'язку ----
   Блоки розставляє JS (pages/flowchart.js): місце блоку залежить від
   ланцюжка документів, а не від відкритої картки */
:root .km-flowchart__canvas { display: block; }
:root .km-flowchart__nodes {
    display: block;
    position: static;
    padding: 0;
    /* Шар вузлів накриває всю схему: курсор має діставати до ліній під ним */
    pointer-events: none;
}
:root .km-flowchart__node {
    position: absolute;
    width: 200px;
    min-width: 0;
    max-width: none;
    align-items: flex-start;
    padding: 10px 14px;
    pointer-events: auto;
}
:root .km-flowchart__node:hover { transform: none; }
:root .km-flowchart__node--current {
    border-color: var(--km-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--km-primary) 35%, transparent);
}
.km-flowchart__node-applied {
    margin-right: 5px;
    color: var(--km-success);
    font-weight: 700;
}
:root .km-flowchart__node-state { margin-top: 6px; }
:root .km-flowchart__edge {
    stroke: var(--km-edge-color, var(--km-text-muted));
    stroke-width: 1.25;
    opacity: .55;
}
.km-flowchart__edge-dot {
    fill: var(--km-edge-color, var(--km-text-muted));
    opacity: .8;
}
.km-flowchart__edge-group--multi .km-flowchart__edge { opacity: .9; }
:root .km-flowchart__edge-group.is-hover .km-flowchart__edge {
    opacity: 1;
    stroke-width: 2.5;
}
.km-flowchart__edge-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 14;
    pointer-events: stroke;
    cursor: pointer;
}
.km-flowchart__actions {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.km-flowchart__unlink {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    padding: 0;
    border: 1px solid var(--km-danger);
    border-radius: 50%;
    background: var(--km-bg-card);
    color: var(--km-danger);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--km-transition), background var(--km-transition),
                color var(--km-transition);
}
.km-flowchart__unlink.is-visible,
.km-flowchart__unlink:focus-visible {
    opacity: 1;
    pointer-events: auto;
}
.km-flowchart__unlink:hover {
    background: var(--km-danger);
    color: #fff;
}
/* Швидкі періоди у фільтрі вікна прив'язки документа */
.km-doclink-periods {
    display: inline-flex;
    gap: 5px;
    margin-left: 6px;
}
.km-doclink-periods__btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--km-primary);
    font: inherit;
    font-size: .75rem;
    cursor: pointer;
}
.km-doclink-periods__btn:hover { text-decoration: underline; }
.km-filter-field__head:has(.km-doclink-periods) .km-filter-field__label { flex: none; }
/* Десять колонок мають уміститись у вікно без горизонтальної прокрутки */
:root .km-table.km-table--list.km-doclink-picker__table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
}
:root .km-table.km-table--list.km-doclink-picker__table th:not(.col-check) { width: auto; }

/* ================================================================
   32. Доступність: анімації за згодою користувача
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    :root *,
    :root *::before,
    :root *::after {
        animation-duration: .01ms;
        animation-iteration-count: 1;
        transition-duration: .01ms;
        scroll-behavior: auto;
    }
    :root .km-btn:active { transform: none; }
    :root .km-flowchart__node:hover { transform: none; }
}

/* ================================================================
   Компактна розкладка інтерфейсу та однорядкові значення в таблицях

   Секція йде останньою у файлі, тож за однакової специфічності
   перекриває правила вище. Токени висот навбару, підменю й футера
   перевизначені тут, щоб від них автоматично перерахувались усі
   sticky-прив'язки (панель дій документа, бічні панелі).
   ================================================================ */
:root {
    --km-nav-height: 46px;
    --km-sub-height: 36px;
    --km-footer-height: 40px;
    /* Єдина висота інтерактивних елементів: кнопки, поля, селекти */
    --km-control-h: 30px;
    /* Одна система карток: тіло, шапка і відстань між блоками однакові
       для карток сутностей (.km-doc-card), сторінок налаштувань та
       інтеграцій (.km-card). Раніше було 10px 12px проти 18px і вісім
       різних проміжків між блоками (аудит 03.10.2026, п. 6.1-6.2). */
    --km-card-pad: 12px 14px;
    --km-card-head-pad: 10px 14px;
    --km-block-gap: 16px;
}

/* ---------- Каркас сторінки ---------- */
:root .km-main { padding: 10px; }
:root .km-page-header { margin-bottom: 10px; gap: 8px; }
:root .km-page-title { font-size: 1.125rem; }
:root .km-breadcrumb { margin-bottom: 8px; }
:root .km-toolbar { margin-bottom: 8px; }

/* ---------- Навбар ---------- */
:root .km-navbar { padding: 0 10px; }
:root .km-navbar__brand { font-size: 1rem; margin-right: 14px; gap: 8px; }
:root .km-navbar__link { height: var(--km-control-h); padding: 0 10px; }
:root .km-navbar__icon-btn {
    width: var(--km-control-h);
    height: var(--km-control-h);
}
:root .km-navbar__avatar { width: 26px; height: 26px; border-radius: 8px; }
:root .km-navbar__user { margin-left: 6px; padding-left: 8px; }
:root .km-navbar__user-dropdown .km-navbar__user { padding: 2px 6px 2px 8px; }
:root .km-hamburger { width: var(--km-control-h); height: var(--km-control-h); }

/* ---------- Підменю ---------- */
:root .km-submenu { padding: 0 10px; }
:root .km-submenu__link { height: 26px; padding: 0 10px; }

/* ---------- Футер: фіксована висота незалежно від пагінації ---------- */
:root .km-footer {
    height: var(--km-footer-height);
    min-height: var(--km-footer-height);
    padding: 5px 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow: hidden;
}
/* Сторінки без підсумків і пагінації (картки) порожньої смуги не показують */
:root .km-footer:empty { display: none; }
:root .km-list-footer {
    flex-wrap: nowrap;
    gap: 12px;
    min-width: 0;
    height: 100%;
    justify-content: flex-start;
}
:root .km-list-footer__totals {
    flex-wrap: nowrap;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
:root .km-list-footer__pages { flex-shrink: 0; }
:root .km-pagination { padding: 0; gap: 2px; }
:root .km-pagination__link,
:root .km-pagination__current {
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
}

/* ---------- Кнопки: єдина висота 30px ---------- */
:root .km-btn,
:root .km-btn--sm,
:root .km-btn--secondary,
:root .km-btn--primary,
:root .km-btn--danger,
:root .km-btn--outline {
    height: var(--km-control-h);
    min-height: var(--km-control-h);
    padding: 0 12px;
    line-height: 1;
}
/* --sm: той самий кегль і висота, вужчий падінг (ряд кнопок однієї висоти) */
:root .km-btn--sm { padding: 0 10px; font-size: .8125rem; }
:root .km-btn--icon {
    width: var(--km-control-h);
    height: var(--km-control-h);
    min-width: var(--km-control-h);
    min-height: var(--km-control-h);
    padding: 0;
}
:root .km-btn--block { width: 100%; }
:root .km-btn > svg { flex-shrink: 0; }
/* Залита кнопка в одному ряду з білими: фон не заходить під рамку, тож
   кольорова пляма має ті самі 28px, що й біла заливка сусідів. Без цього
   синя й червона кнопки оптично здаються вищими за тих самих 30px */
:root .km-btn--primary,
:root .km-btn--danger,
:root .km-btn--primary:hover,
:root .km-btn--danger:hover {
    border-color: transparent;
    background-clip: padding-box;
}

/* ---------- Поля вводу: та сама висота, що у фільтрах ---------- */
:root .km-input,
:root .km-select {
    min-height: var(--km-control-h);
    padding: 4px 10px;
}
:root .km-textarea { min-height: 60px; padding: 5px 10px; }
:root .ts-wrapper.single .ts-control,
:root .ts-wrapper .ts-control,
:root .km-doc-field__control .ts-wrapper .ts-control {
    min-height: var(--km-control-h);
    padding: 3px 9px;
}
:root .km-readonly-value { min-height: var(--km-control-h); }
:root .km-form-group { margin-bottom: 10px; }
:root .km-form-actions { margin-top: 14px; padding-top: 12px; }

/* ---------- Таблиці списків: одне значення — один рядок ----------
   Розкладка fixed потрібна двічі: щоб трикрапка взагалі працювала в
   клітинці й щоб зміна ширини однієї колонки не рухала сусідні. */
:root .km-table--list { table-layout: fixed; }
:root .km-table--list th,
:root .km-table--list td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* У table-layout: fixed колонка без заданої ширини отримує лише залишок
   вільного місця — а коли його немає (широкий список), стискається в нуль.
   Тому ширину має кожен вид колонки, а не лише ті, що мали клас col-*. */
:root .km-table--list th { width: 200px; }
:root .km-table--list th.col-check { width: 36px; }
/* Клітинка з чекбоксом: без трикрапки (16px чекбокс + падінг не має
   обрізатися як текст) */
:root .km-table--list th.col-check,
:root .km-table--list td.col-check,
:root .km-table th:has(> .km-checkbox),
:root .km-table td:has(> .km-checkbox) {
    padding-left: 8px;
    padding-right: 8px;
    overflow: visible;
    text-overflow: clip;
}
:root .km-table--list th.km-stock-report__toggle { width: 32px; padding-right: 0; }
:root .km-table--list th.col-xs { width: 60px; }
:root .km-table--list th.col-sm { width: 110px; }
:root .km-table--list th.col-md { width: 160px; }
:root .km-table--list th.col-num { width: 120px; }
:root .km-table--list th.col-actions { width: 80px; }
:root .km-table--list th.km-col-spacer { width: 0; }
:root .km-table--list.is-cols-frozen th.km-col-spacer { width: auto; }
:root .km-table th { padding: 6px 10px; }
:root .km-table td { padding: 6px 10px; }
:root.km-density-compact .km-table th,
:root.km-density-compact .km-table td { padding-top: 3px; padding-bottom: 3px; }
/* Колонка-заповнювач: поки ширини колонок не зафіксовані, вона нульова
   (щоб не забирала місце в решти), а після фіксації — єдина «гумова»,
   тож вільне місце йде в неї, а не розподіляється між сусідами. */
:root .km-table th.km-col-spacer,
:root .km-table td.km-col-spacer {
    min-width: 0;
    padding: 0;
}

/* ---------- Статус у списку: ширина за вмістом, довге — з трикрапкою ---------- */
:root .km-state-badge {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    height: 20px;
    line-height: 20px;
    padding: 0 8px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    text-align: center;
}

/* ---------- Панель дій картки: блок власника праворуч ---------- */
:root .km-doc-bar { padding: 8px 0; margin-bottom: 8px; }
:root .km-doc-bar__right {
    margin-left: auto;
    min-width: 0;
}
:root .km-doc-bar__right .km-doc-header__owner { margin-left: 0; }
:root .km-doc-bar__change { margin-left: 8px; }

/* ---------- Картка документа: щільніші відступи ---------- */
:root .km-doc-header { margin-bottom: 10px; padding-bottom: 8px; gap: 10px; }
:root .km-doc-card { padding: var(--km-card-pad); }
:root .km-doc-layout { gap: var(--km-block-gap); }
:root .km-doc-row { gap: 4px 16px; }
:root .km-doc-rows { gap: 4px; }
/* Кнопка серед полів (напр. «Скинути пароль») не розтягується на всю колонку */
:root .km-doc-rows > .km-btn { align-self: flex-start; }
:root .km-doc-group + .km-doc-group { margin-top: 8px; }
:root .km-doc-field { padding: 0; }
:root .km-doc-field__control .km-input,
:root .km-doc-field__control .km-select {
    min-height: var(--km-control-h);
    padding: 4px 9px;
}
:root .km-doc-field__control .km-textarea { min-height: 56px; padding: 5px 9px; }
:root .km-doc-title { min-height: var(--km-control-h); padding: 4px 9px; }
:root .km-doc-tabs { margin-top: 10px; }
:root .km-doc-tabs__btn { padding: 6px 12px; }
:root .km-doc-bottom { padding: 10px 0 6px; margin-top: 6px; gap: 16px; }
:root .km-owner-card__toggle,
:root .km-doc-history-chip {
    height: var(--km-control-h);
    padding: 0 10px;
}
:root .km-doc-badge { height: var(--km-control-h); }
:root .km-doc-pay-status { height: var(--km-control-h); }
:root .km-state-pill__btn { height: var(--km-control-h); }
:root .km-doc-badge--state .km-select,
:root .km-doc-badge--state .ts-wrapper .ts-control {
    min-height: var(--km-control-h);
    max-height: var(--km-control-h);
}

/* ---------- Файли документа: окремий блок під підсумками ---------- */
.km-doc-files {
    margin-top: 10px;
}
.km-doc-files__title {
    font-size: .8125rem;
    font-weight: 650;
    margin-bottom: 8px;
}
.km-doc-files__empty {
    color: var(--km-text-muted);
    font-size: .8125rem;
    margin: 0 0 8px;
}

/* ---------- Журнал змін: панель на всю висоту вікна ----------
   Разом із top: 0 панель має підніматися над навбаром і підменю (ті самі
   рівні, що й у бічної панелі налаштувань), інакше її шапка з кнопкою
   закриття ховається під навігацією. */
:root .km-audit-panel .km-doc-sidebar-card {
    top: 0;
    z-index: 1010;
}
:root .km-audit-panel__backdrop { z-index: 1005; }

/* ---------- Картка сутності в модальному вікні ---------- */
:root .km-modal--entity {
    width: 90vw;
    max-width: 90vw;
    height: 90vh;
    max-height: 90vh;
}

/* ---------- Широка бічна панель (деталізація звітів) ---------- */
:root .km-side-panel--wide .km-side-panel__card {
    width: 70vw;
    max-width: 70vw;
    top: 0;
}
/* У панелі місця менше, ніж на сторінці, тож колонка за замовчуванням вужча */
:root .km-side-panel .km-table--list th { width: 140px; }

/* ---------- Масові дії: випадаюче меню замість окремої панелі ---------- */
.km-bulk-menu__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 2px;
    border-radius: 6px;
    background: var(--km-primary);
    color: var(--km-primary-text);
    font-size: .6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ---------- Модифікація: посилання на базовий товар ---------- */
.km-goods-parent {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 10px;
    font-size: .8125rem;
}
.km-goods-parent__label { color: var(--km-text-muted); }

@media (max-width: 1100px) {
    :root .km-doc-bar { flex-wrap: wrap; }
    :root .km-doc-bar__right { margin-left: 0; }
    :root .km-modal--entity,
    :root .km-side-panel--wide .km-side-panel__card {
        width: 100vw;
        max-width: 100vw;
    }
}


/* ===== Сторінки автентифікації =====
   Раніше жили інлайновим <style> у auth_base.html і атрибутами style=
   у восьми шаблонах (порушення правила 9 CLAUDE.md). */
.km-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--km-bg);
}
.km-auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius);
    box-shadow: var(--km-shadow-lg);
    padding: 40px 32px;
}
.km-auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--km-text);
    margin-bottom: 8px;
}
.km-auth-subtitle {
    text-align: center;
    color: var(--km-text-muted);
    font-size: .875rem;
    margin-bottom: 28px;
}
.km-auth-footer {
    text-align: center;
    margin-top: 20px;
    font-size: .8125rem;
    color: var(--km-text-muted);
}
.km-auth-footer a { color: var(--km-primary); }

/* Пояснення під заголовком картки входу */
.km-auth-note {
    text-align: center;
    color: var(--km-text-muted);
    font-size: .8125rem;
    margin-bottom: 20px;
}
.km-auth-note--tight { margin-bottom: 12px; }
.km-auth-note--last { margin-bottom: 0; }

/* Помилка над формою входу — на всю ширину картки й по центру */
.km-form-error--auth {
    margin-bottom: 16px;
    text-align: center;
}

/* Підказка під полем форми */
.km-auth-hint {
    font-size: .75rem;
    color: var(--km-text-muted);
    margin-top: 4px;
}
/* Те саме, але як підсумок уведеного (складений логін при реєстрації) */
.km-auth-hint--accent {
    font-size: .8rem;
    color: var(--km-primary);
    font-weight: 500;
    margin-top: 6px;
}
.km-auth-hint--inline { margin-top: 0; }

/* Рядок «Забули пароль?» */
.km-auth-aside {
    text-align: right;
    margin-bottom: 12px;
}
.km-auth-aside a {
    color: var(--km-primary);
    font-size: .8125rem;
}

/* Два поля в рядок (імʼя та прізвище) */
.km-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Головна кнопка картки входу - на всю ширину (лише сторінки входу:
   глобальна версія ламала кнопки підписки, аудит 03.10.2026, п. 4.5) */
.km-auth-card .km-btn--block {
    width: 100%;
    margin-top: 8px;
    display: block;
    text-align: center;
    box-sizing: border-box;
}

/* Інформаційний банер сторінки (аудит: «дані станом на», лаг реплікації) */
.km-alert {
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 13px;
}
.km-alert--info {
    background: var(--km-v2-info-soft, rgba(11, 107, 203, .10));
    color: var(--km-info, #0b6bcb);
    border: 1px solid var(--km-v2-info-soft, rgba(11, 107, 203, .20));
}

/* Вкладка «Закритий період» у панелі налаштувань списку (Е5, п. 5.2) */
.km-period-lock {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

/* Розпірки віконного рендера таблиці позицій (Е7): тримають місце
   рядків, яких зараз немає в DOM. Висоту виставляє x-effect, тож власних
   відступів і меж у них бути не може. Селектор із :root обов'язковий -
   інакше його перебиває `:root .km-table td` (падінг і нижня межа),
   і порожній рядок малює смужку в першій колонці (клітинка в ньому одна)
   та забирає ще 13 px під шапкою. Самі розпірки ставляться в DOM
   лише при віконному рендері (`x-if="virtualized"` у шаблонах): без цього
   останній товар переставав бути `:last-child` і зберігав нижню межу. */
:root .km-positions__spacer,
:root .km-positions__spacer > td {
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    font-size: 0;
}

/* Останній товар не малює нижню межу, як і в решті таблиць.
   `:last-child` тут не працює: останній вузол tbody - це <template>
   від x-if/x-for, а при віконному рендері ще й розпірка. З :last-of-type
   межа зникає саме тоді, коли нижче справді нічого немає: у віконному
   режимі останній tr - це розпірка, і рядок над нею межу зберігає. */
:root .km-positions__table tbody tr.km-positions__row:last-of-type td {
    border-bottom: none;
}

/* Смуга «підтвердіть адресу» над навбаром (Р0.5). Кольори — з токенів
   теми, тож у темній вона не світиться білим. */
.km-verify-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 16px;
    background: color-mix(in srgb, var(--km-warning) 12%, var(--km-bg-card));
    border-bottom: 1px solid var(--km-border);
    color: var(--km-text);
    font-size: 13px;
}

.km-verify-bar__text {
    max-width: 900px;
}

/* Рядок сторінки «Аудит» — речення з частин: дієслово, тип, об'єкт,
   підпис документа, джерело, клієнт (як у МойСклад) */
.km-audit-row__event {
    line-height: 1.4;
}
.km-audit-row__verb {
    font-weight: 600;
}
.km-audit-row__type,
.km-audit-row__caption,
.km-audit-row__source {
    color: var(--km-text);
}
.km-audit-row__caption {
    color: var(--km-text-muted);
}
.km-audit-row__client {
    color: var(--km-text-muted);
    font-size: .8125rem;
}
.km-audit-row.is-open > td {
    background: var(--km-bg-hover, rgba(0, 0, 0, .04));
}
.km-audit-row__object {
    font-weight: 600;
}

/* Панель «Історія змін»: заголовок контексту та події з таблицею
   «Поле · Було · Стало» */
.km-audit-context__meta {
    font-size: .8125rem;
    color: var(--km-text-muted);
    margin-top: 2px;
}
.km-audit-panel__backdrop[href] {
    display: block;
}
/* Запис журналу: заголовок-кнопка згортає таблицю дифу під ним */
.km-audit-event__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 5px 8px;
    border: 0;
    border-radius: var(--km-radius);
    background: transparent;
    color: var(--km-text);
    font: inherit;
    font-size: .8125rem;
    text-align: left;
    cursor: pointer;
}
button.km-audit-event__title:hover { background: var(--km-v2-surface); }
.km-audit-event__chevron {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--km-text-muted);
    cursor: pointer;
    position: relative;
}
.km-audit-event__chevron::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 3px;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .12s ease;
}
.km-audit-event.is-open .km-audit-event__chevron::before { transform: rotate(45deg); }
.km-audit-event__count {
    margin-left: auto;
    min-width: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--km-v2-surface-strong);
    color: var(--km-text-muted);
    font-size: .6875rem;
    line-height: 18px;
    text-align: center;
}
.km-audit-event__body { padding: 0 8px 6px; }
.km-audit-tools {
    display: inline-flex;
    gap: 2px;
    margin-left: auto;
    margin-right: 4px;
}
.km-audit-tools__btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius);
    background: var(--km-bg-card);
    color: var(--km-text-muted);
    cursor: pointer;
}
.km-audit-tools__btn:hover { color: var(--km-text); background: var(--km-v2-surface); }
.km-audit-event__who {
    font-weight: 600;
}
.km-audit-event__source {
    color: var(--km-text-muted);
}
.km-audit-event__link {
    font-size: .8125rem;
}
.km-audit-log--context .km-audit-log__action {
    text-transform: none;
    letter-spacing: 0;
    font-size: .8125rem;
    color: var(--km-text);
}
.km-audit-diff {
    width: 100%;
    margin-top: 2px;
    border-collapse: collapse;
    font-size: .78rem;
    table-layout: fixed;
}
.km-audit-diff th,
.km-audit-diff td {
    padding: 3px 6px;
    border-bottom: 1px solid var(--km-border);
    text-align: left;
    vertical-align: top;
    word-break: break-word;
}
.km-audit-diff th {
    font-weight: 600;
    color: var(--km-text-muted);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.km-audit-diff__field {
    width: 32%;
    color: var(--km-text-muted);
}
.km-audit-diff__old {
    color: var(--km-text-muted);
}
.km-audit-diff__new {
    font-weight: 600;
}
.km-audit-diff__row--position td {
    font-size: .78rem;
}
.km-audit-context__pages {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.km-audit-context__range {
    font-size: .8125rem;
    color: var(--km-text-muted);
}
.km-audit-log__more {
    list-style: none;
    display: flex;
    justify-content: center;
}
.km-audit-log__action--trash,
.km-audit-log__action--archive { color: var(--km-warning); }
.km-audit-log__action--untrash,
.km-audit-log__action--unarchive { color: var(--km-success); }
.km-audit-log__action--bulk,
.km-audit-log__action--token,
.km-audit-log__action--register { color: var(--km-info); }

/* ================================================================
   Інтеграції: каталог рішень і картка рішення (як «Решения» в
   МойСкладі): категорії ліворуч, вкладки, пошук, сітка карток
   ================================================================ */
/* Каталог і картка рішення - вітринні сторінки, а не робочі списки: на
   відміну від решти інтерфейсу вони не тягнуться на всю ширину, а мають
   бічні відступи й обмежену ширину, як розділ «Решения» МойСклада. */
.km-apps-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 4px 40px 40px;
}
/* Картка рішення вужча за каталог: 880px тексту плюс ті самі бічні
   відступи, тож блок стоїть по центру сторінки */
.km-apps-page--narrow { max-width: 960px; }
.km-apps__header {
    display: flex;
    align-items: center;
    gap: 28px;
    border-bottom: 1px solid var(--km-border);
    margin-bottom: 22px;
}
.km-apps {
    display: grid;
    grid-template-columns: minmax(200px, 250px) 1fr;
    gap: 32px;
    align-items: start;
}
.km-apps__heading {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0;
}
.km-apps__nav {
    position: sticky;
    top: 12px;
}
.km-apps__nav-item {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--km-text);
    font-size: .875rem;
    text-decoration: none;
}
.km-apps__nav-item:hover { background: var(--km-row-hover); text-decoration: none; }
.km-apps__nav-item.is-active {
    background: var(--km-primary-bg);
    color: var(--km-primary);
    font-weight: 600;
}
.km-apps__nav-title {
    margin: 16px 10px 6px;
    font-weight: 700;
    font-size: .9375rem;
}
.km-apps__tabs {
    display: flex;
    gap: 4px;
    align-self: stretch;
}
.km-apps__tab {
    display: flex;
    align-items: center;
    padding: 14px 12px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--km-text);
    font-size: .9375rem;
    text-decoration: none;
}
.km-apps__tab:hover { text-decoration: none; color: var(--km-primary); }
.km-apps__tab.is-active {
    color: var(--km-primary);
    border-bottom-color: var(--km-primary);
    font-weight: 600;
}
.km-apps__search {
    max-width: 260px;
    width: 100%;
    margin-left: auto;
}
.km-apps__section-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 14px;
}
.km-apps__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.km-app-card {
    display: flex;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius);
    background: var(--km-bg-card);
    box-shadow: var(--km-shadow);
    color: var(--km-text);
    text-decoration: none;
    transition: box-shadow var(--km-transition), border-color var(--km-transition);
}
.km-app-card:hover {
    text-decoration: none;
    border-color: var(--km-primary);
    box-shadow: var(--km-v2-shadow-pop, var(--km-shadow));
}
.km-app-card__icon,
.km-app__logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--km-primary);
    background: var(--km-primary-bg);
    border-radius: 12px;
}
.km-app-card__icon { width: 52px; height: 52px; }
.km-app-card__icon svg { width: 34px; height: 34px; }
.km-app-card__main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.km-app-card__title { font-weight: 700; font-size: 1rem; }
.km-app-card__vendor { font-size: .8125rem; color: var(--km-text-muted); }
.km-app-card__text {
    margin-top: 6px;
    font-size: .875rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.km-app-card__badges { margin-top: auto; padding-top: 10px; }

.km-app { max-width: 880px; margin: 0 auto; }
.km-app__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .875rem;
    margin-bottom: 18px;
}
.km-app__head {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}
.km-app__logo { width: 140px; height: 140px; border-radius: 24px; }
.km-app__logo svg { width: 84px; height: 84px; }
/* Фірмовий логотип заповнює всю плитку: власні кольори замість синьої
   підкладки, скруглення дає сам контейнер через overflow. Сірий обідок
   напівпрозорий, тож помітний і на світлій плитці (ПриватБанк), і на
   майже чорній (Monobank) у темній темі */
.km-app-card__icon--brand,
.km-app__logo--brand {
    background: none;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .35);
}
.km-app-card__icon--brand svg,
.km-app__logo--brand svg {
    width: 100%;
    height: 100%;
}
.km-app__summary { flex: 1; min-width: 0; }
.km-app__title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 8px 0 4px;
}
.km-app__vendor { font-size: .9375rem; margin-bottom: 8px; }
.km-app__meta-line {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .8125rem;
    color: var(--km-text-muted);
}
.km-app__actions { margin-top: 16px; }
.km-app__props {
    display: flex;
    flex-wrap: wrap;
    gap: 28px 40px;
    margin: 28px 0 0;
}
.km-app__prop dt {
    font-size: .8125rem;
    color: var(--km-text-muted);
    margin-bottom: 6px;
}
.km-app__prop dd { margin: 0; font-size: .9375rem; }
.km-app__section { margin-top: 32px; }
.km-app__section-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 12px;
}
.km-app__text {
    margin: 0 0 12px;
    max-width: 640px;
    line-height: 1.5;
}
.km-app__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 0;
    color: var(--km-text);
    font: inherit;
    cursor: pointer;
    text-decoration: underline dotted;
}
.km-app__toggle svg { transition: transform var(--km-transition); }
.km-app__toggle svg.is-open { transform: rotate(180deg); }
.km-app__access {
    margin: 12px 0 0;
    padding-left: 18px;
    line-height: 1.7;
}

@media (max-width: 1200px) {
    .km-apps-page { padding: 4px 24px 32px; }
}
@media (max-width: 900px) {
    .km-apps-page { padding: 4px 12px 24px; }
    .km-apps { grid-template-columns: 1fr; }
    .km-apps__nav { position: static; }
    .km-apps__header {
        flex-wrap: wrap;
        gap: 8px 20px;
        padding-bottom: 10px;
    }
    .km-apps__tabs { order: 3; width: 100%; }
    .km-apps__tab { padding: 8px 12px; margin-bottom: -11px; }
    .km-apps__search { max-width: none; }
    .km-app__head { flex-direction: column; gap: 16px; }
    .km-app__logo { width: 96px; height: 96px; }
    .km-app__logo svg { width: 60px; height: 60px; }
}

/* ---------- Банківські інтеграції: згортані блоки форми підключення ---------- */
.km-details { margin-top: 18px; }
/* Маркер згортання - шеврон тим самим кольором, що й заголовок, а не
   символи "\25B8"/"\25BE": типографські трикутнички дрібні, різні за
   формою у різних шрифтах і на екрані читаються як пляма */
.km-details > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
}
.km-details > summary::-webkit-details-marker { display: none; }
.km-details > summary::before {
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--km-chevron-right) center / 18px 18px no-repeat;
    mask: var(--km-chevron-right) center / 18px 18px no-repeat;
    transition: transform var(--km-transition);
}
.km-details[open] > summary::before { transform: rotate(90deg); }
.km-details > .km-form-hint { margin: 6px 0 12px; }

/* ============================================================
   Онбординг нового акаунта: опитування (/app/onboarding/) і
   віджет «Перші кроки» (components/first_steps.html)
   ============================================================ */
.km-onboarding {
    display: flex;
    justify-content: center;
    padding: 48px 16px;
}
.km-onboarding__card {
    width: 100%;
    max-width: 840px;
    padding: 28px 32px 24px;
}
.km-onboarding__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 4px;
}
.km-onboarding__subtitle {
    color: var(--km-text-muted);
    margin: 0 0 20px;
}
.km-onboarding__options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 32px;
}
.km-onboarding__option {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--km-border);
    border-radius: 8px;
    background: var(--km-bg-card);
    color: var(--km-text);
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.km-onboarding__option:hover { border-color: var(--km-primary); }
.km-onboarding__option.is-selected {
    border-color: var(--km-primary);
    box-shadow: 0 0 0 1px var(--km-primary) inset;
}
.km-onboarding__option-radio {
    width: 16px;
    height: 16px;
    border: 1px solid var(--km-border);
    border-radius: 50%;
    flex: none;
    box-sizing: border-box;
}
.km-onboarding__option.is-selected .km-onboarding__option-radio {
    border: 5px solid var(--km-primary);
}
.km-onboarding__footer {
    display: flex;
    gap: 12px;
    align-items: center;
}

.km-first-steps {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 900;
    width: 360px;
    max-width: calc(100vw - 32px);
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.km-first-steps__head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 12px 8px 16px;
}
.km-first-steps__toggle {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.km-first-steps__title { font-weight: 600; }
.km-first-steps__subtitle { font-size: .8rem; color: var(--km-text-muted); }
.km-first-steps__close {
    background: none;
    border: 0;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--km-text-muted);
    cursor: pointer;
    padding: 0 4px;
}
.km-first-steps__close:hover { color: var(--km-text); }
.km-first-steps__body {
    border-top: 1px solid var(--km-border);
    padding: 12px 16px 16px;
}
.km-first-steps__list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.km-first-steps__item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--km-text-muted);
    font-size: .875rem;
}
.km-first-steps__item.is-current { color: var(--km-text); font-weight: 600; }
.km-first-steps__item.is-done { color: var(--km-success); }
.km-first-steps__num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--km-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    flex: none;
}
.km-first-steps__item.is-current .km-first-steps__num {
    border-color: var(--km-primary);
    color: var(--km-primary);
}
.km-first-steps__item.is-done .km-first-steps__num {
    border-color: var(--km-success);
    color: var(--km-success);
}
.km-first-steps__current {
    border-top: 1px solid var(--km-border);
    padding-top: 12px;
}
.km-first-steps__current-title { font-weight: 600; margin-bottom: 4px; }
.km-first-steps__text { font-size: .875rem; color: var(--km-text-muted); margin: 0 0 10px; }
.km-first-steps__form { display: flex; flex-direction: column; gap: 8px; }
.km-first-steps__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* ================================================================
   База знань: публічна /help/ (застосунок helpcenter, власна шапка й
   підвал) і кабінетна /app/help/. Структура спільна, як у МойСклад:
   дерево розділів ліворуч, вміст посередині, зміст статті праворуч.
   Текст статті - km-help__body.
   ================================================================ */
.km-kb-body {
    background: var(--km-bg);
    color: var(--km-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.km-kb-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.km-kb-header {
    background: var(--km-nav-bg);
    border-bottom: 1px solid var(--km-border);
    position: sticky;
    top: 0;
    z-index: 10;
}
.km-kb-header__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 60px;
    flex-wrap: wrap;
    padding: 8px 24px;
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
}
.km-kb-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--km-text);
    text-decoration: none;
}
.km-kb-brand:hover { text-decoration: none; }
.km-kb-brand__sub { font-weight: 500; color: var(--km-text-muted); }
.km-kb-search { margin-left: auto; width: 260px; }
.km-kb-actions { display: flex; gap: 8px; }

/* Каркас: дерево | вміст | зміст сторінки */
.km-kb-shell {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    align-items: start;
}
.km-kb-shell--toc { grid-template-columns: 264px minmax(0, 1fr) 248px; }
.km-kb-shell--public {
    flex: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}
.km-kb-shell--app {
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius);
    box-shadow: var(--km-shadow);
}
.km-kb-side {
    position: sticky;
    top: 61px;
    max-height: calc(100vh - 61px);
    display: flex;
    flex-direction: column;
}
.km-kb-shell--public .km-kb-side { height: calc(100vh - 61px); }
/* У кабінеті над каркасом липка шапка застосунку (46px) */
.km-kb-shell--app { scroll-margin-top: 110px; }
.km-kb-shell--app .km-kb-side,
.km-kb-shell--app .km-kb-onpage {
    top: 46px;
    max-height: calc(100vh - 46px);
}
.km-kb-side__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 16px;
    padding: 12px 0;
    border-top: 1px solid var(--km-border);
}
.km-kb-langs { display: flex; gap: 2px; }
.km-kb-langs__item {
    font-size: .8571rem;
    font-weight: 600;
    padding: 4px 6px;
    border-radius: 6px;
    color: var(--km-text-muted);
    text-decoration: none;
}
.km-kb-langs__item:hover { background: var(--km-row-hover); text-decoration: none; }
.km-kb-langs__item.is-active { background: var(--km-primary-bg); color: var(--km-primary); }
.km-kb-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--km-text-muted);
    cursor: pointer;
}
.km-kb-iconbtn:hover { background: var(--km-row-hover); color: var(--km-text); }

/* Дерево розділів: розділ -> підрозділ -> стаття */
.km-kb-tree {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: grid;
    gap: 2px;
    align-content: start;
}
.km-kb-tree__node { display: block; }
.km-kb-tree__link,
.km-kb-tree__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    color: var(--km-text-muted);
    text-decoration: none;
    line-height: 1.4;
    cursor: pointer;
    word-break: break-word;
}
.km-kb-tree__summary { list-style: none; }
.km-kb-tree__summary::-webkit-details-marker { display: none; }
.km-kb-tree__title {
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
.km-kb-tree__title:hover { text-decoration: none; }
.km-kb-tree__link:hover,
.km-kb-tree__summary:hover {
    background: var(--km-row-hover);
    color: var(--km-text);
    text-decoration: none;
}
.km-kb-tree__link.is-active,
.km-kb-tree__summary.is-active {
    background: var(--km-primary-bg);
    color: var(--km-primary);
    font-weight: 600;
}
.km-kb-tree__chevron { flex: none; transition: transform .15s ease; }
.km-kb-tree__node[open] > .km-kb-tree__summary .km-kb-tree__chevron { transform: rotate(90deg); }
.km-kb-tree__children {
    display: grid;
    gap: 2px;
    margin: 2px 0 2px 12px;
    padding-left: 12px;
    border-left: 1px solid var(--km-border);
}

/* Вміст */
.km-kb-content { min-width: 0; padding: 24px 48px 48px; }
.km-kb-page { max-width: 880px; }
.km-kb-page__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.km-kb-title {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0 0 12px;
}
.km-kb-shell--app .km-kb-title { font-size: 1.7143rem; }
.km-kb-lead {
    color: var(--km-text-muted);
    line-height: 1.6;
    margin: 0 0 24px;
}
.km-kb-shell--public .km-kb-lead { font-size: 1.0714rem; }
.km-kb-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    margin-top: 6px;
    padding: 4px 10px;
    border: 1px solid var(--km-border);
    border-radius: 6px;
    background: transparent;
    color: var(--km-text-muted);
    font: inherit;
    font-size: .9286rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}
.km-kb-copy:hover { background: var(--km-row-hover); color: var(--km-text); }
.km-kb-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .9286rem;
    color: var(--km-text-muted);
    margin-bottom: 12px;
}
.km-kb-crumbs__sep { color: var(--km-border); }
.km-kb-crumbs__current { color: var(--km-text); }

/* Стартова сторінка: картки розділів */
.km-kb-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}
.km-kb-cardlink {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--km-border);
    border-radius: 12px;
    background: var(--km-bg-card);
    box-shadow: var(--km-shadow);
    color: var(--km-text);
    text-decoration: none;
    transition: border-color .15s ease;
}
.km-kb-cardlink:hover { border-color: var(--km-primary); text-decoration: none; }
.km-kb-cardlink__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--km-primary-bg);
    color: var(--km-primary);
}
.km-kb-cardlink__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.km-kb-cardlink__title { font-weight: 600; line-height: 1.35; }
.km-kb-cardlink__summary { color: var(--km-text-muted); font-size: .9286rem; line-height: 1.4; }

/* Сторінка розділу: статті колонками за підрозділами */
.km-kb-cols { columns: 3 220px; column-gap: 32px; }
.km-kb-cols__group { margin-bottom: 20px; break-inside: avoid; }
.km-kb-cols__title {
    font-size: 1.1429rem;
    font-weight: 700;
    margin: 0 0 8px;
    break-after: avoid;
}
.km-kb-cols__list { list-style: none; margin: 0; padding: 0; }
.km-kb-cols__list li { padding: 5px 0; line-height: 1.35; break-inside: avoid; }
.km-kb-cols__list a { color: var(--km-text); text-decoration: none; }
.km-kb-cols__list a:hover { color: var(--km-primary); text-decoration: none; }

/* Результати пошуку */
.km-kb-results { list-style: none; margin: 8px 0 0; padding: 0; }
.km-kb-results__item { padding: 10px 0; border-top: 1px solid var(--km-border); }
.km-kb-results__item:first-child { border-top: 0; }
.km-kb-results__link { font-weight: 600; }
.km-kb-results__summary { color: var(--km-text-muted); margin: 4px 0 0; line-height: 1.5; }

/* Текст статті в базі знань: великі заголовки розділів із лінією */
.km-kb-article .km-help__body { line-height: 1.7; }
.km-kb-shell--public .km-kb-article .km-help__body { font-size: 1.0714rem; }
.km-kb-article .km-help__body h3 {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 36px 0 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--km-border);
    scroll-margin-top: 76px;
}
.km-kb-article .km-help__body h4 { font-size: 1.2rem; margin: 24px 0 8px; }
.km-kb-article .km-help__body p { margin-bottom: 14px; line-height: 1.7; }
.km-kb-article .km-help__body li { line-height: 1.6; margin-bottom: 6px; }

/* Зміст статті праворуч */
.km-kb-onpage {
    position: sticky;
    top: 61px;
    max-height: calc(100vh - 61px);
    overflow-y: auto;
    padding: 24px 16px;
    box-sizing: border-box;
}
.km-kb-onpage__title { font-weight: 600; margin: 0 0 10px; }
.km-kb-onpage__list { list-style: none; margin: 0; padding: 0; }
.km-kb-onpage__link {
    display: block;
    padding: 4px 0;
    color: var(--km-text-muted);
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}
.km-kb-onpage__link:hover { color: var(--km-text); text-decoration: none; }
.km-kb-onpage__top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--km-border);
    font-size: .8571rem;
    font-weight: 500;
    color: var(--km-text-muted);
    text-decoration: none;
}
.km-kb-onpage__top:hover { color: var(--km-text); text-decoration: none; }

.km-kb-footer {
    border-top: 1px solid var(--km-border);
    background: var(--km-nav-bg);
    padding: 24px 0;
}
.km-kb-cta {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 24px;
}
.km-kb-cta__title { font-size: 1.25rem; font-weight: 700; margin: 0 0 8px; }
.km-kb-cta__text { color: var(--km-text-muted); line-height: 1.55; margin: 0 0 16px; }
.km-kb-footer__row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    font-size: .9286rem;
    color: var(--km-text-muted);
}
@media (max-width: 1150px) {
    .km-kb-shell--toc { grid-template-columns: 264px minmax(0, 1fr); }
    .km-kb-onpage { display: none; }
}
@media (max-width: 900px) {
    .km-kb-search { margin-left: 0; width: auto; max-width: none; flex-basis: 100%; }
    .km-kb-shell,
    .km-kb-shell--toc { grid-template-columns: minmax(0, 1fr); }
    .km-kb-content { padding: 16px 16px 32px; }
    .km-kb-title { font-size: 1.7143rem; }
    .km-kb-page__head { flex-wrap: wrap; }
    /* На вузьких екранах спершу вміст, потім дерево розділів */
    .km-kb-side,
    .km-kb-shell--public .km-kb-side,
    .km-kb-shell--app .km-kb-side {
        position: static;
        order: 2;
        height: auto;
        max-height: none;
        border-top: 1px solid var(--km-border);
    }
}

/* Картка в режимі «тільки перегляд»: співробітник має право переглядати,
   але не редагувати. Поля форми сервер вимикає (disabled), а кнопки
   збереження та дій над записом і редагування позицій ховаються тут,
   щоб не дублювати умову в кожному шаблоні картки. */
.km-form-readonly-notice { margin-bottom: 12px; }
.km-form--readonly button[type="submit"],
.km-form--readonly [data-delete-check],
.km-form--readonly [data-archive-url],
.km-form--readonly [data-create-child],
.km-form--readonly .km-doc-bar__change,
.km-form--readonly .km-form-hint--right,
.km-form--readonly .km-positions__add-bar,
.km-form--readonly .km-positions__actions,
.km-form--readonly .km-goods-tab-actions,
.km-form--readonly .km-attrs__add,
.km-form--readonly .km-paylinks__remove { display: none !important; }
.km-form--readonly input:not([type="hidden"]),
.km-form--readonly select,
.km-form--readonly textarea,
.km-form--readonly .ts-wrapper,
.km-form--readonly .km-doc-header label,
.km-form--readonly .km-doc-header [x-data] button:not([data-close-card]) { pointer-events: none; }
.km-form--readonly .km-positions__table input,
.km-form--readonly .km-positions__table select,
.km-form--readonly .km-positions__table button { pointer-events: none; }

/* ---------- Службова панель (/platform/) ---------- */
.km-navbar__brand-tag {
    font-size: .7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .7;
    margin-left: 6px;
}
.km-verify-bar--staff {
    background: color-mix(in srgb, var(--km-primary) 14%, var(--km-bg-card));
}
.km-indicator-tile--link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.km-indicator-tile--link:hover { border-color: var(--km-primary); }
.km-indicator-tile__sub {
    font-size: .875rem;
    font-weight: 400;
    color: var(--km-text-muted);
}
.km-bo-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius);
}
.km-bo-filters__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}
.km-bo-filters__item .km-form-label { margin: 0; }
.km-bo-filters__actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}
.km-bo-dl {
    display: grid;
    grid-template-columns: minmax(160px, 220px) 1fr;
    gap: 8px 16px;
    margin: 0;
}
.km-bo-dl dt { color: var(--km-text-muted); font-size: .875rem; }
.km-bo-dl dd { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.km-bo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.km-bo-grid .km-card { margin: 0; }
.km-bo-inline-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.km-bo-inline-form .km-input { max-width: 360px; }
.km-bo-card-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.km-bo-row-actions {
    white-space: nowrap;
    text-align: right;
}
.km-bo-row-actions .km-btn + .km-btn,
.km-bo-row-actions .km-btn + .km-inline-form,
.km-bo-row-actions .km-inline-form + .km-btn { margin-left: 4px; }
.km-bo-form-card { max-width: 860px; }
.km-bo-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8125rem;
}
.km-bo-payload__item { display: inline-block; margin-right: 12px; }
.km-bo-progress {
    width: 140px;
    height: 8px;
    vertical-align: middle;
    margin-right: 8px;
    accent-color: var(--km-primary);
}
.km-bo-progress.is-over { accent-color: var(--km-danger); }
.km-form-group--promo { max-width: 280px; margin-bottom: 18px; }
.km-card__header .km-inline-form { float: right; }

/* Друковані форми панелі (рахунок, акт) */
.km-print-body { background: var(--km-bg); }
.km-print-page {
    max-width: 800px;
    margin: 24px auto;
    padding: 32px 40px;
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius);
    color: var(--km-text);
}
.km-print-toolbar { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 16px; }
.km-print-title { font-size: 1.25rem; margin: 0 0 20px; }
.km-print-parties { width: 100%; margin-bottom: 20px; border-collapse: collapse; }
.km-print-parties th { text-align: left; width: 160px; padding: 6px 0; color: var(--km-text-muted); vertical-align: top; }
.km-print-parties td { padding: 6px 0; }
.km-print-table { width: 100%; margin-bottom: 16px; }
.km-print-note { margin: 8px 0; }
.km-print-sign { width: 100%; margin-top: 40px; }
.km-print-sign td { padding: 8px 0; }
@media print {
    .km-print-body { background: #fff; }
    .km-print-page { border: 0; margin: 0; padding: 0; max-width: none; }
    .km-print-toolbar { display: none; }
}
.km-bo-hint { margin: 0 0 14px; }
.km-bo-check { margin: 0 0 10px; }

/* ================================================================
   Шаблони друку (Е8, п. 8.4): меню «Друк» і сторінка шаблонів
   ================================================================ */
/* Пункт меню з кількома діями: назва шаблону і формати виводу */
.km-dropdown__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 10px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--km-text);
    white-space: nowrap;
}
.km-dropdown__row-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}
.km-dropdown__row-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }
.km-dropdown__chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border: 1px solid var(--km-border);
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 500;
    color: var(--km-text);
    text-decoration: none;
    background: var(--km-bg);
}
.km-dropdown__chip:hover {
    border-color: var(--km-primary);
    color: var(--km-primary);
}
button.km-dropdown__chip { cursor: pointer; font-family: inherit; }
/* Підпис групи пунктів у меню */
.km-dropdown__caption {
    padding: 4px 10px 2px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--km-text-muted);
}
/* Колонка дій у простих таблицях сторінок налаштувань */
.km-table__actions { text-align: right; white-space: nowrap; }
.km-table__actions .km-inline-row-sm { justify-content: flex-end; }
.km-table .km-inline-row-sm { align-items: center; }
.km-table form { margin: 0; }
/* Тумблер як кнопка форми: стан змінює сервер, а не чекбокс */
.km-switch-btn {
    display: inline-flex;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}
.km-switch-btn .km-switch { pointer-events: none; }
.km-print-template-row[draggable="true"] .km-columns__handle { cursor: grab; }
.km-print-template-row.is-dragging { opacity: .5; }
.km-print-template-row.is-over td { box-shadow: inset 0 2px 0 var(--km-primary); }
.km-print-var-title {
    margin: 18px 0 8px;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--km-text-muted);
}
.km-print-var { width: 46%; }
.km-print-var code { white-space: pre-wrap; word-break: break-word; font-size: .8125rem; }
/* Сторінки друку: завдання масового друку і лист із документом */
.km-print-job p { margin: 0 0 12px; }
.km-print-job p:last-child { margin-bottom: 0; }
.km-print-email { max-width: 640px; }
.km-input--copies { width: 72px; }

/* Вихід - POST-форма в меню користувача: кнопка виглядає як пункт меню */
.km-dropdown__form { margin: 0; }
button.km-dropdown__item {
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}


/* ================================================================
   Утиліти відступів підказок і дрібні перевизначення
   Стоять після `:root .km-form-hint` (margin-top: 5px), інакше втрачали
   силу (аудит 03.10.2026, п. 4.4).
   ================================================================ */
:root .km-hint-gap-below { margin-bottom: 14px; }
:root .km-hint-gap-below-sm { margin-bottom: 8px; }
:root .km-hint-gap-above { margin-top: 10px; }
:root .km-hint-gap-sm { margin-top: 8px; }
:root .km-hint-gap-lg { margin-top: 14px; }
:root .km-hint-gap-xs { margin-top: 4px; }
:root .km-form-hint--tight { margin: 0; }
:root .km-help__updated { margin-top: 20px; }
:root .km-tariff-card__per { font-size: .8rem; font-weight: 400; }
:root .km-btn--lg {
    height: auto;
    min-height: 38px;
    padding: 0 20px;
    font-size: 1rem;
}
:root .km-period-toggle { padding: 2px; }

/* Нативне поле файлу - кнопка в стилі проєкту замість системної
   (картка товару, співробітника, профіль; аудит 03.10.2026, п. 5.5) */
:root .km-input[type="file"] {
    padding: 2px 10px 2px 2px;
    cursor: pointer;
}
:root .km-input[type="file"]::file-selector-button {
    height: 24px;
    margin-right: 10px;
    padding: 0 10px;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-sm);
    background: var(--km-bg-card);
    color: var(--km-text);
    font: inherit;
    font-size: .8125rem;
    font-weight: 550;
    cursor: pointer;
}
:root .km-input[type="file"]::file-selector-button:hover {
    background: var(--km-hover);
}

/* ================================================================
   31. Адаптивність
   Секція стоїть у самому кінці файлу: компактна розкладка (вище) має
   ту саму специфічність `:root .x`, і до перенесення сюди перекривала
   всі мобільні правила на будь-якій ширині (аудит 03.10.2026, п. 4.1).
   ================================================================ */
@media (max-width: 1024px) {
    :root .km-catalog__main { padding-left: 16px; }
}
@media (max-width: 768px) {
    html:root { --km-nav-height: 52px; --km-sub-height: 42px; }
    :root .km-main { padding: 10px 8px 14px; }
    :root .km-footer { padding: 8px; }
    :root .km-navbar__menu {
        top: var(--km-nav-height);
        padding: 8px;
        gap: 2px;
        overflow-x: visible;
        mask-image: none;
        border-bottom: 1px solid var(--km-border);
        box-shadow: var(--km-v2-shadow-pop);
    }
    :root .km-navbar__item { width: 100%; }
    :root .km-navbar__link {
        width: 100%;
        height: 40px;
        padding: 0 12px;
        font-size: .9375rem;
    }
    :root .km-submenu__link { padding: 0 10px; font-size: .78125rem; }
    :root .km-page-header { gap: 10px; }
    :root .km-page-actions { width: 100%; flex-wrap: wrap; }
    :root .km-page-header .km-search--header { max-width: none; width: 100%; }
    :root .km-card__body { padding: 10px 12px; }
    /* Чіпи власника й останньої зміни в шапці документа не переносяться
       (nowrap) і виштовхували сторінку в горизонтальний скрол */
    :root .km-doc-header__owner {
        flex-wrap: wrap;
        margin-left: 0;
        width: 100%;
    }
    :root .km-owner-card,
    :root .km-owner-card__toggle,
    :root .km-doc-history-chip {
        max-width: 100%;
        min-width: 0;
    }
    :root .km-owner-card__toggle,
    :root .km-doc-history-chip {
        flex-wrap: wrap;
        white-space: normal;
    }
    :root .km-owner-card__menu {
        left: 0;
        right: auto;
        min-width: 0;
    }
    /* У колонці картка налаштувань бере ширину вмісту (align-items:
       flex-start) і витягала сторінку в горизонтальний скрол */
    :root .km-settings-layout { gap: 16px; align-items: stretch; }
    :root .km-settings-content { width: 100%; }
    /* Бічна панель на весь екран — 420px не влазять у мобільний */
    :root .km-side-panel__card,
    :root .km-side-panel--wide .km-side-panel__card {
        width: 100%;
        top: 0;
        border-left: none;
    }
    :root .km-audit-panel .km-doc-sidebar-card {
        top: 0;
        width: 100%;
        border-left: none;
    }
    :root .km-toast-container {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }
}
@media (max-width: 600px) {
    /* Невеликі модалки — нижній лист по ширині екрана; великі (картка
       сутності, права ролі, широкі) — на весь екран */
    :root .km-modal-overlay,
    :root .km-modal-backdrop { padding: 0; align-items: flex-end; }
    :root .km-modal,
    :root .km-modal--wide,
    :root .km-modal--usage {
        width: 100%;
        max-width: none;
        min-width: 0;
        max-height: 92vh;
        border: none;
        border-radius: 16px 16px 0 0;
        display: flex;
        flex-direction: column;
    }
    :root .km-modal--wide,
    :root .km-modal--entity,
    :root .km-roleperms-modal {
        height: 100%;
        max-height: none;
        border-radius: 0;
    }
    :root .km-modal__body,
    :root .km-modal__body--entity {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
    :root .km-modal__header,
    :root .km-modal__footer { flex-shrink: 0; }
    :root .km-doc-bar__left,
    :root .km-doc-bar__right { flex-wrap: wrap; }
    :root .km-form-actions { flex-wrap: wrap; }
}
@media (max-width: 600px) {
    /* Сім іконок праворуч + блок користувача не вміщаються у вузький екран:
       стискаємо кнопки, інакше сторінка отримує горизонтальний скрол */
    :root .km-navbar__icon-btn { width: 32px; height: 32px; }
    :root .km-navbar__right { gap: 0; }
    :root .km-navbar__user { padding-left: 6px; margin-left: 4px; }
    :root .km-navbar__user-dropdown .km-navbar__user { padding: 4px 4px 4px 6px; }
}
@media (max-width: 480px) {
    :root .km-main { padding: 8px 6px 12px; }
    :root .km-navbar { padding: 0 8px; }
    /* Логотип лишається, словесний знак ховається (font-size: 0 прибирає
       текстовий вузол, у SVG розміри задані атрибутами) */
    :root .km-navbar__brand {
        font-size: 0;
        gap: 0;
        margin-right: 6px;
    }
    :root .km-navbar__icon-btn { width: 30px; height: 30px; }
    :root .km-navbar__icon-btn svg { width: 17px; height: 17px; }
    :root .km-navbar__avatar { width: 28px; height: 28px; }
    :root .km-navbar__user-chevron { display: none; }
    :root .km-hamburger { width: 32px; margin-right: 2px; }
    :root .km-submenu { padding: 0 8px; }
    /* Тап-зона на телефоні: вище за десктопні 30px */
    :root .km-btn { height: 38px; min-height: 38px; }
    :root .km-input,
    :root .km-select,
    :root .ts-wrapper .ts-control { min-height: 38px; }
    :root .km-catalog { flex-direction: column; }
    :root .km-catalog__sidebar {
        width: 100%;
        min-height: 0;
        border-right: none;
        border-bottom: 1px solid var(--km-border);
        padding-right: 0;
        padding-bottom: 8px;
        margin-bottom: 12px;
    }
    :root .km-catalog__sidebar-inner { position: static; }
    :root .km-catalog__main { padding-left: 0; }
    :root .km-indicator-tiles,
    :root .km-cp-tiles,
    :root .km-options-grid { grid-template-columns: 1fr; }
    :root .km-pay-summary__item,
    :root .km-pay-balances__group { flex: 1 1 100%; }
}


/* ================================================================
   Загальна оболонка для розділу інтеграцій, звітів і карток
   (аудит 03.10.2026, пп. 6.2-6.7, 7.1-7.5)
   ================================================================ */
/* Відстані між блоками - один токен */
:root .km-card--stack { margin-bottom: var(--km-block-gap); }
:root .km-indicators-block { margin-top: var(--km-block-gap); }
:root .km-details { margin-top: var(--km-block-gap); }
:root .km-goods-layout,
:root .km-goods-layout__side,
:root .km-reference-layout { gap: var(--km-block-gap); }
:root .km-employee-layout .km-employee-section + .km-employee-section {
    margin-top: var(--km-block-gap);
}
:root .km-goods-layout__main > .km-doc-card + .km-doc-card { margin-top: var(--km-block-gap); }
/* Блок додаткових полів у картці: ті самі підписи, що й у решти полів */
:root .km-extra-fields .km-form-label {
    font-size: .6875rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--km-text-muted);
}
:root .km-extra-fields .km-form-grid { gap: 0 16px; }
:root .km-extra-fields .km-form-group { margin-bottom: 8px; }

/* Робочі сторінки інтеграцій - у тій самій оболонці, що й решта
   кабінету: без власних бічних відступів і без великих заголовків */
:root .km-apps-page { max-width: none; padding: 0 0 16px; }
:root .km-apps-page--narrow { max-width: 960px; margin: 0 auto; }
:root .km-apps__heading { font-size: 1.125rem; }
:root .km-apps__tab { padding: 8px 12px; font-size: .875rem; }
:root .km-app__title { font-size: 1.25rem; margin: 6px 0 2px; }
:root .km-apps__section-title { font-size: 1rem; }
/* Заголовок блоку всередині картки - як шапка картки */
:root .km-card__body > .km-indicators-block__title { font-size: .875rem; margin: 0 0 10px; }
:root .km-card__body > .km-indicators-block__title:not(:first-child) { margin-top: var(--km-block-gap); }
/* Підказка першим рядком тіла картки (налаштування акаунту) без
   верхнього відступу абзацу: інакше перший блок виглядав «пухкішим» */
:root .km-card__body > p:first-child,
:root .km-card__body > .km-form-hint:first-child { margin-top: 0; }
/* Секції без картки (перенесення з МойСклад) отримують картку */
:root .km-apps-page > .km-indicators-block {
    background: var(--km-bg-card);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius);
    box-shadow: var(--km-shadow);
    padding: var(--km-card-pad);
}
:root .km-apps-page > .km-indicators-block > .km-indicators-block__title { font-size: .875rem; margin: 0 0 10px; }

/* Звіти: колонка назви не стискається, таблиця прив'язок платежу
   бере ширину за вмістом, а не 200px на колонку */
:root .km-table--list th.col-name { width: 260px; }
:root .km-paylinks .km-table--list { table-layout: auto; }
:root .km-paylinks .km-table--list th { width: auto; }

/* Рейка інтеграцій у картці документа на телефоні: нижня панель замість
   колонки праворуч. Збоку вона забирала 76px і стискала таблицю позицій.
   Шухляда рішення стає над панеллю і на всю ширину. */
@media (max-width: 768px) {
    :root .km-ig-rail {
        top: auto;
        left: 0;
        width: auto;
        height: calc(52px + env(safe-area-inset-bottom, 0px));
        padding: 0 12px env(safe-area-inset-bottom, 0px);
        flex-direction: row;
        gap: 10px;
        border-left: 0;
        border-top: 1px solid var(--km-border);
        overflow-x: auto;
    }
    :root .km-ig-rail > * { flex: 0 0 auto; }
    :root body.has-ig-rail .km-main {
        padding-right: 8px;
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    }
    :root body.has-ig-rail .km-drawer__card {
        right: 0;
        bottom: calc(52px + env(safe-area-inset-bottom, 0px));
    }
}
@media (max-width: 480px) {
    :root body.has-ig-rail .km-main { padding-right: 6px; }
}

/* Футер списку на телефоні: суми в один рядок обрізалися пагінацією
   («До о...»). Тепер суми переносяться у свій рядок над пагінацією,
   а смуга футера росте за вмістом. */
@media (max-width: 600px) {
    :root .km-footer:has(.km-list-footer__totals) {
        height: auto;
        padding: 6px 8px;
    }
    :root .km-list-footer {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 2px 12px;
    }
    :root .km-list-footer {
        height: auto;
    }
    /* Підсумки під колонками стоять абсолютно - рядку потрібна висота;
       overflow лишається прихованим, щоб вони не виходили за смугу */
    :root .km-list-footer__totals {
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 2px 12px;
        white-space: normal;
        min-height: 22px;
    }
}

/* Телефон: панель фільтрів і каталог не ширші за екран. Комірки фільтра
   з grid-column: span 2 створювали другу, неявну колонку поза екраном;
   колонка каталогу у вертикальному flex бралася за шириною таблиці. */
@media (max-width: 480px) {
    :root .km-filter-grid > * {
        grid-column: 1 / -1;
        min-width: 0;
    }
}
@media (max-width: 768px) {
    :root .km-catalog__main {
        align-self: stretch;
        width: 100%;
        min-width: 0;
    }
}