/* ============================================================
 * CRM-ALL Platform — components.css
 *
 * ЗАКОН платформи: всі модулі використовують ці класи.
 * Bootstrap .btn-* у модулях — заборонені.
 *
 * Підключається ПІСЛЯ Bootstrap CSS і design-tokens.css,
 * ПЕРЕД модульними CSS.
 *
 * Структура:
 *   1. RESET + BASE
 *   2. .btn-thin           (кнопки)
 *   3. .input-thin / .select-thin / .textarea-thin + .form-* (inputs/forms)
 *   4. .chip               (chips)
 *   5. .so-sec / .so-row / .so-contact-row / .so-svc-row / .so-fin-* (slide-over)
 *   6. .mt-item            (mini-timeline)
 *   7. .deal-card / .kb-board (Kanban)
 *   8. .slide-over         (responsive)
 *   9. SPACING helpers
 *  10. PWA — safe-area, touch, scroll
 * ============================================================ */

/* ============================================================
 * 1. RESET + BASE
 * ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}
body {
    font-family: var(--font-family, var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif));
    font-size: 14px;
    line-height: 1.5;
    /* Виразніший, «яскравіший» текст (типографіка-аудит 2026-07): чіткіший рендер
       замість стоншувального antialiased/grayscale + variable-вага 430 + optical sizing.
       Затверджено на тесті сторінки Угод → розкочено глобально. */
    font-weight: 430;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
}
/* iOS zoom prevention — ЛИШЕ мобільний: iOS зумить сторінку при фокусі інпута з
   font-size < 16px. На десктопі це правило РОЗДУВАЛО всі інпути (перебивало
   задизайнені 12-13px, напр. .cfp-input=12px → 16px) — дати періоду в журналах
   виглядали «чужим шрифтом» поруч із дрібними лейблами. */
@media (max-width: 768px) {
    /* Було 16px !important (анти-zoom iOS) — юзер: «шрифти для мобільної
       великі». Тепер авто-zoom вимкнено viewport maximum-scale=1 → інпути
       нормального розміру. 14px — читабельно і не «гігант» поруч з 11-12px
       лейблами. */
    input, select, textarea {
        font-size: 14px !important;
    }
}
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary, #d1cfc8);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-border-primary, #b4b2a9); }

/* ============================================================
 * 2. BUTTONS — .btn-thin
 * ============================================================ */
.btn-thin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 16px;
    min-height: 34px;
    border: 0.5px solid var(--color-border-secondary, #d1cfc8);
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-secondary, #6b6963);
    font-size: 13px;
    font-family: inherit;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.btn-thin:hover {
    background: var(--color-background-secondary, #f7f6f3);
    border-color: var(--color-border-secondary, #d1cfc8);
}
.btn-thin:active { opacity: .85; }
.btn-thin:focus-visible {
    outline: 2px solid #378ADD;
    outline-offset: 2px;
}
.btn-thin:disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-thin.primary {
    background: var(--color-background-info, #E6F1FB);
    border-color: transparent;
    color: var(--color-text-info, #0C447C);
}
.btn-thin.primary:hover { background: #d4e8f8; border-color: transparent; }
.btn-thin.success {
    background: var(--color-background-success, #E1F5EE);
    border-color: transparent;
    color: var(--color-text-success, #085041);
}
.btn-thin.success:hover { background: #cff0e6; border-color: transparent; }
.btn-thin.danger {
    background: var(--color-background-danger, #FCEBEB);
    border-color: transparent;
    color: var(--color-text-danger, #791F1F);
}
.btn-thin.danger:hover { background: #fad9d9; border-color: transparent; }
.btn-thin.warning {
    background: var(--color-background-warning, #FAEEDA);
    border-color: transparent;
    color: var(--color-text-warning, #633806);
}

.btn-thin.lg { padding: 10px 20px; min-height: 42px; font-size: 14px; border-radius: 10px; }
.btn-thin.sm { padding: 4px 12px;  min-height: 28px; font-size: 12px; border-radius: 6px; }
.btn-thin.xs { padding: 2px 8px;   min-height: 22px; font-size: 11px; border-radius: 5px; }
.btn-thin.icon-only      { padding: 7px; min-width: 34px; gap: 0; }
.btn-thin.icon-only.sm   { padding: 4px; min-width: 26px; }
.btn-thin.full           { width: 100%; justify-content: center; }

.btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.btn-group.compact { gap: 6px; }

@media (max-width: 768px) {
    .btn-thin       { min-height: 44px; padding: 10px 18px; font-size: 14px; border-radius: 10px; }
    .btn-thin.sm    { min-height: 38px; padding: 8px 14px;  font-size: 13px; }
    .btn-thin.xs    { min-height: 34px; padding: 6px 12px;  font-size: 12px; }
    .btn-group      { gap: 10px; }
}

[data-bs-theme="dark"] .btn-thin {
    border-color: rgba(255,255,255,.12);
    color: #94a3b8;
}
[data-bs-theme="dark"] .btn-thin:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.18);
}
[data-bs-theme="dark"] .btn-thin.primary { background: rgba(55,138,221,.20); color: #93c5fd; }
[data-bs-theme="dark"] .btn-thin.success { background: rgba(29,158,117,.20); color: #6ee7b7; }
[data-bs-theme="dark"] .btn-thin.danger  {
    background: var(--color-background-danger);
    color: var(--color-text-danger);
    border-color: var(--color-border-danger);   /* рамка — інакше зливається з чорним */
}
[data-bs-theme="dark"] .btn-thin.danger:hover { background: rgba(226,75,74,.30); color: #fdb9b9; }
[data-bs-theme="dark"] .btn-thin.warning { background: rgba(239,159,39,.20); color: #fde68a; }

/* ============================================================
 * 3. INPUTS — .input-thin / .select-thin / .textarea-thin
 * ============================================================ */
/* ГЛОБАЛЬНО: підказки (placeholder) у всіх полях — менший шрифт + прозоріший
   текст. Колір задають конкретні правила (.input-thin тощо); тут — лише розмір
   і прозорість, тож не конфліктує (нижча специфічність, інші властивості). */
::placeholder {
    font-size: 0.875em;
    opacity: 0.6;
}
.input-thin {
    border: none;
    border-bottom: 1px solid var(--color-border-secondary, #e5e4df);
    border-radius: 0;
    background: transparent;
    padding: 10px 0 8px;
    /* +font-add: поля вводу МУСЯТЬ слухатись налаштування «Розмір шрифту»
       нарівні з контентом (скарга 2026-07-05: «в полях шрифт інший»). */
    font-size: calc(16px + var(--font-add, 0) * 1px);
    font-family: inherit;
    color: var(--color-text-primary, #1a1915);
    width: 100%;
    outline: none;
    transition: border-color .15s ease, background .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.input-thin::placeholder { color: var(--color-text-tertiary, #9b9890); }
.input-thin:focus {
    border-bottom-color: #378ADD;
    background: rgba(55,138,221,.04);
}
.input-thin:focus::placeholder { color: var(--color-text-tertiary); }

/* Стан «ЗАПОВНЕНО» (без фокусу): раніше поле з даними виглядало так само, як
   порожнє — була лише пара порожньо/фокус, і людина не бачила, де вже є
   значення. ПАСТКА: :not(:placeholder-shown) хибно спрацьовує на полях, у
   яких placeholder відсутній ЗОВСІМ (псевдоклас ніколи не збігається → not
   завжди істинний), тому кожне редаговане .input-thin мусить мати placeholder
   (хоч технічний " "). Селекти свідомо поза скоупом — <select> не підтримує
   :placeholder-shown.
   Селектор саме `input.` — клас .input-thin у CRM висить і на <button>
   (кнопка-дропдаун категорій у Бенчмаркінгу), а в кнопки placeholder'а не
   буває взагалі → без цього звуження вона діставала фон «заповнено» назавжди.
   ЧОМУ НЕ ТОКЕН --color-background-secondary (як планувалось): у ТЕМНІЙ темі
   він дорівнює кольору самої панелі (#26272a), тобто контраст 1.00 — стан
   невидимий (заміряно). Опаковий токен завжди залежить від поверхні, на якій
   лежить поле (панель / модалка / body — різні). Нейтральний напівпрозорий
   шар дає однаковий крок на БУДЬ-ЯКОМУ фоні й у будь-якій темі. */
input.input-thin:not(:placeholder-shown):not(:focus) {
    background: rgba(128, 128, 128, .09);
}

/* Стан «ТІЛЬКИ ЧИТАННЯ». Оголошено ПІСЛЯ «заповнено» навмисно: селектори
   рівної специфічності, а readonly-поле технічно завжди «заповнене» — виграти
   має саме цей стан. Без opacity: текст лишається повної яскравості (це
   довідка, яку читають), а «не редагується» показують зниклa лінія і фон.
   cursor: default, не not-allowed — це не заборонена дія, а інформація.
   ПАСТКА: flatpickr тримає readonly на полях ДАТ увесь час, доки поле не в
   фокусі (анти-автофіл Chrome, layout.php) — без винятку нижче всі календарі
   CRM виглядали б як «тільки читання». .flatpickr-input — оригінал,
   .fp-alt — видимий altInput. */
.input-thin[readonly]:not(.flatpickr-input):not(.fp-alt) {
    border-bottom-color: transparent;
    background: rgba(128, 128, 128, .16);   /* на крок помітніше за «заповнено» */
    cursor: default;
}

.input-thin.invalid { border-bottom-color: #E24B4A; }
.input-thin.invalid::placeholder { color: #E24B4A; }
.input-error {
    color: #E24B4A;
    font-size: 11px;
    margin-top: 4px;
    line-height: 1.3;
    animation: inputErrorIn .15s ease-out;
}
@keyframes inputErrorIn {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}
.input-thin.saved {
    border-bottom-color: #1D9E75;
    animation: inputSavedReset 1.5s ease forwards;
}
@keyframes inputSavedReset {
    0%   { border-bottom-color: #1D9E75; }
    70%  { border-bottom-color: #1D9E75; }
    100% { border-bottom-color: var(--color-border-secondary, #e5e4df); }
}
.input-thin:disabled { opacity: .5; cursor: not-allowed; }

.input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
/* КАНОНІЧНИЙ підпис поля. 13px-база + --font-add: підпис росте разом зі
   значенням (.input-thin = 16px + font-add), тож пара тримається ≈16:13 на
   будь-якому масштабі шрифту. Раніше тут був хардкод 12px — при збільшеному
   масштабі значення ставало 18px, а підпис лишався 12px (1.5:1), звідси
   «гігантський» текст у полі проти дрібного підпису. */
.input-label {
    font-size: calc(13px + var(--font-add, 0) * 1px);
    color: var(--color-text-secondary, #6b6963);
    line-height: 1.4;
}
.input-label.required::after { content: ' *'; color: #E24B4A; }
.input-hint {
    font-size: 11px;
    color: var(--color-text-tertiary, #9b9890);
    line-height: 1.4;
}
.input-hint.error   { color: #E24B4A; }
.input-hint.success { color: #1D9E75; }

.select-thin {
    border: none;
    border-bottom: 1px solid var(--color-border-secondary, #e5e4df);
    border-radius: 0;
    background: transparent;
    padding: 10px 24px 8px 0;
    font-size: calc(16px + var(--font-add, 0) * 1px);   /* +font-add, як .input-thin */
    font-family: inherit;
    color: var(--color-text-primary, #1a1915);
    width: 100%;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239b9890' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    transition: border-color .15s ease;
}
.select-thin:focus { border-bottom-color: #378ADD; outline: none; }

.textarea-thin {
    border: none;
    border-bottom: 1px solid var(--color-border-secondary, #e5e4df);
    border-radius: 0;
    background: transparent;
    padding: 10px 0 8px;
    font-size: calc(16px + var(--font-add, 0) * 1px);   /* +font-add, як .input-thin */
    font-family: inherit;
    color: var(--color-text-primary, #1a1915);
    width: 100%;
    outline: none;
    resize: vertical;
    min-height: 72px;
    transition: border-color .15s ease;
    line-height: 1.6;
}
.textarea-thin::placeholder { color: var(--color-text-tertiary, #9b9890); }
.textarea-thin:focus { border-bottom-color: #378ADD; }

.form-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
/* Утиліта «поле на всю ширину рядка» — загальна для будь-якого споживача
   .form-row (раніше жила локально як .cp-form-grid .cp-span2). */
.form-row .span2 { grid-column: 1 / -1; }
.form-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 0.5px solid var(--color-border-tertiary, #f0eeea);
}

@media (max-width: 768px) {
    .form-row     { grid-template-columns: 1fr; gap: 12px; }
    .form-actions { flex-direction: column; gap: 10px; }
    .form-actions .btn-thin { width: 100%; }
}

[data-bs-theme="dark"] .input-thin,
[data-bs-theme="dark"] .select-thin,
[data-bs-theme="dark"] .textarea-thin {
    border-bottom-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}
[data-bs-theme="dark"] .input-thin::placeholder,
[data-bs-theme="dark"] .textarea-thin::placeholder { color: var(--color-text-tertiary); }
[data-bs-theme="dark"] .input-thin:focus,
[data-bs-theme="dark"] .select-thin:focus,
[data-bs-theme="dark"] .textarea-thin:focus {
    border-bottom-color: var(--color-info);
    background: rgba(77,143,204,.08);
}
[data-bs-theme="dark"] .select-thin {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
[data-bs-theme="dark"] .input-label { color: #94a3b8; }
[data-bs-theme="dark"] .input-hint  { color: #475569; }

/* ============================================================
 * 4. CHIPS — .chip
 * ============================================================ */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 20px;
    border: 0.5px solid var(--color-border-secondary, #e5e4df);
    background: transparent;
    color: var(--color-text-secondary, #6b6963);
    font-size: 12px;
    font-family: inherit;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    text-decoration: none;
}
.chip:hover { background: var(--color-background-secondary, #f7f6f3); }
.chip:focus-visible {
    outline: 2px solid #378ADD;
    outline-offset: 2px;
}

.chip .chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.chip.lg .chip-dot { width: 7px; height: 7px; }
.chip.sm .chip-dot { width: 5px; height: 5px; }

.chip.active, .chip.a-dark { background: #1a1915; border-color: #1a1915; color: #ffffff; }
.chip.a-blue   { background: #E6F1FB; border-color: #378ADD; color: #0C447C; }
.chip.a-green  { background: #E1F5EE; border-color: #1D9E75; color: #085041; }
.chip.a-amber  { background: #FAEEDA; border-color: #EF9F27; color: #633806; }
.chip.a-red    { background: #FCEBEB; border-color: #E24B4A; color: #791F1F; }
.chip.a-purple { background: #EEEDFE; border-color: #7F77DD; color: #3C3489; }

.chip.won      { background: #1D9E75; border-color: transparent; color: #fff; font-weight: 500; }
.chip.lost     { background: #E24B4A; border-color: transparent; color: #fff; font-weight: 500; }
.chip.deferred { background: #EF9F27; border-color: transparent; color: #fff; font-weight: 500; }
.chip.tender   { background: #FAEEDA; border-color: #BA7517; color: #633806; }

.chip.svc          { background: var(--color-background-secondary); border-color: var(--color-border-tertiary); color: var(--color-text-secondary); }
.chip.svc.signed   { background: #E1F5EE; border-color: #9FE1CB; color: #085041; }
.chip.svc.nego     { background: #E6F1FB; border-color: #85B7EB; color: #0C447C; }
.chip.svc.idea     { background: var(--color-background-secondary); border-color: var(--color-border-tertiary); color: var(--color-text-tertiary); }
.chip.svc.rejected { background: #FCEBEB; border-color: #F7C1C1; color: #791F1F; }

.chip.lg { padding: 7px 18px; font-size: 13px; }
.chip.sm { padding: 3px 10px; font-size: 11px; }
.chip.xs { padding: 1px 8px;  font-size: 10px; border-radius: 12px; }

.chip-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.chip-group.no-wrap {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.chip-group.no-wrap::-webkit-scrollbar { display: none; }

@media (max-width: 768px) {
    .chip          { min-height: 36px; padding: 8px 16px; font-size: 13px; }
    .chip.sm       { min-height: 32px; padding: 6px 12px; font-size: 12px; }
    .chip-group    { gap: 8px; }
    .chip-group.filter-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 4px 0 8px;
        scrollbar-width: none;
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .chip-group.filter-row::-webkit-scrollbar { display: none; }
}

/* Dark mode — "замшевий" v2 (cool blue-grey): матові solid фони + тонкі solid
   borders в тон до пігулки. Borders повертаємо (раніше transparent) — щоб
   на cool-blue текстурі фону пігулка читалась як окремий об'єкт.
   Усі кольори через токени з design-tokens.css. */
[data-bs-theme="dark"] .chip {
    border-color: var(--color-border-muted);
    color: var(--color-text-secondary);
}
[data-bs-theme="dark"] .chip:hover { background: var(--color-background-secondary); }
[data-bs-theme="dark"] .chip.active,
[data-bs-theme="dark"] .chip.a-dark { background: #dde4ed; border-color: #dde4ed; color: #0f1923; }
[data-bs-theme="dark"] .chip.a-blue   { background: var(--color-background-info);    border-color: var(--color-border-info);    color: var(--color-text-info); }
[data-bs-theme="dark"] .chip.a-green  { background: var(--color-background-success); border-color: var(--color-border-success); color: var(--color-text-success); }
[data-bs-theme="dark"] .chip.a-amber  { background: var(--color-background-warning); border-color: var(--color-border-warning); color: var(--color-text-warning); }
[data-bs-theme="dark"] .chip.a-red    { background: var(--color-background-danger);  border-color: var(--color-border-danger);  color: var(--color-text-danger); }
[data-bs-theme="dark"] .chip.a-purple { background: var(--color-background-purple);  border-color: var(--color-border-purple);  color: var(--color-text-purple); }
[data-bs-theme="dark"] .chip.svc      { background: var(--color-background-muted);   border-color: var(--color-border-muted);   color: var(--color-text-muted); }

/* ============================================================
 * 5. SLIDE-OVER SECTIONS — .so-sec / .so-row / .so-contact-row / .so-svc-row / .so-fin-*
 * ============================================================ */
.so-sec { margin-bottom: 0; }
.so-sec + .so-sec {
    border-top: 0.5px solid var(--color-border-tertiary, #f0eeea);
    padding-top: 14px;
    margin-top: 14px;
}

.so-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0 10px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    gap: 8px;
}
.so-sec-head:hover .so-sec-toggle { color: var(--color-text-secondary); }
.so-sec-title {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-tertiary, #9b9890);
    text-transform: uppercase;
    letter-spacing: .06em;
    flex: 1;
}
.so-sec-count {
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin-left: 4px;
}
.so-sec-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.so-sec-toggle {
    font-size: 11px;
    color: var(--color-text-tertiary);
    transition: color .12s, transform .15s;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}
.so-sec-toggle.collapsed { transform: rotate(-90deg); }

.so-sec-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    font-size: 14px;
    transition: background .12s, color .12s;
    flex-shrink: 0;
}
.so-sec-settings:hover {
    background: var(--color-background-secondary);
    color: var(--color-text-secondary);
}

.so-sec-body { padding-bottom: 4px; }

.so-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 0.5px solid var(--color-border-tertiary, #f0eeea);
    min-height: 36px;
}
.so-row:last-child { border-bottom: none; }
.so-row .so-label {
    font-size: 13px;
    color: var(--color-text-tertiary, #9b9890);
    flex-shrink: 0;
    min-width: 80px;
}
.so-row .so-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #1a1915);
    text-align: right;
    flex: 1;
}
.so-row .so-value.muted   { font-weight: 400; color: var(--color-text-secondary); }
.so-row .so-value.success { color: #1D9E75; }
.so-row .so-value.danger  { color: #E24B4A; }
.so-row .so-value.info    { color: #378ADD; }
.so-row .so-value.link    { color: #378ADD; text-decoration: none; cursor: pointer; }
.so-row .so-value.link:hover { text-decoration: underline; }

.editable {
    cursor: text;
    border-radius: 4px;
    padding: 1px 4px;
    margin: -1px -4px;
    transition: background .12s;
    min-width: 80px;
    text-align: right;
}
.editable:hover { background: var(--color-background-secondary); }
.editable:focus {
    outline: none;
    background: var(--color-background-secondary);
    box-shadow: 0 0 0 2px rgba(55,138,221,.15);
    border-radius: 4px;
}
.editable.saved { color: #1D9E75; }

/* ============================================================
 * Inline-edit hover-афорданс.
 *  • Картка клієнта (.cl-field-val[data-client-field]) — SVG-олівець inline
 *    після значення. SVG (а не гліф шрифту) → НЕ залежить від завантаження
 *    bootstrap-icons; рендериться завжди.
 *  • Деали (.editable) — гліф bi-pencil справа (static-вигляд slide-over не
 *    міняється, §12). Виключено .editable-block (нотатки); .so-tags-editor і
 *    поля-форми не мають .editable → не зачеплені.
 * ВАЖЛИВО: ::after БЕЗ пробілу перед ним (інакше — нащадковий селектор і для
 * текстових полів без дітей олівець не з'явиться).
 * ============================================================ */

/* Деали (slide-over) — SVG-олівець ЗЛІВА від значення (::before; рішення
 * 2026-07-05: маркер редагованого поля — ліворуч, глобально в обох варіантах).
 * Ширина резервується завжди (opacity 0→.6) → значення не стрибає на hover.
 * Виключено .editable-block (нотатки); .so-tags-editor без .editable → не зачеплено. */
.editable[data-field]:not(.editable-block) {
    position: relative;
    cursor: pointer !important;
    user-select: none;
    border-radius: 4px;
    transition: background .12s;
}
.editable[data-field]:not(.editable-block):hover {
    background: var(--color-background-secondary);
    outline: max(1px, 0.5px) solid var(--color-border-secondary);
}
.editable[data-field]:not(.editable-block)::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2364748b' d='M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    transition: opacity .15s;
}
.editable[data-field]:not(.editable-block):hover::before { opacity: .6; }
.editable[data-field]:not(.editable-block):focus-within::before { display: none; }

/* Картка клієнта — SVG-олівець ПРАВОРУЧ через flex space-between: значення
 * ліворуч, олівець на правому краю; gap + word-break → БЕЗ накладання (текст
 * переноситься, не лізе під олівець). Без шрифту (inline SVG).
 * 2026-07-05: олівець переїхав ЛІВОРУЧ від значення (::before, перший
 * flex-елемент; justify-content: flex-start замість space-between) — єдиний
 * глобальний стандарт маркера редагованого поля (як в Огляді угоди). */
.cl-field-val[data-client-field] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    cursor: pointer !important;
    user-select: none;
    border-radius: 4px;
    padding: 1px 6px;
    margin: -1px -6px;
    transition: background .12s;
}
.cl-field-val[data-client-field]:hover {
    background: var(--color-background-secondary);
    outline: max(1px, 0.5px) solid var(--color-border-secondary);
}
.cl-field-val[data-client-field]::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2364748b' d='M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    transition: opacity .15s;
}
.cl-field-val[data-client-field]:hover::before { opacity: .6; }
.cl-field-val[data-client-field]:focus-within::before { display: none; }  /* під час редагування — прибрати */

/* ============================================================
 * IndustryDD — кастомний dropdown поля «Напрямок» (заміна нативного <datalist>).
 * Floating на <body> (position:fixed, координати від інпута) → не клипається
 * slide-over'ом; делегування у platform.js. Токени → dark mode автоматично.
 * ============================================================ */
.crm-industry-dd {
    position: fixed;
    background: var(--color-background-primary);
    border: max(1px, 0.5px) solid var(--color-border-secondary);
    border-radius: var(--border-radius-md, 8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
    z-index: 9999;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 0;
}
.crm-industry-item {
    padding: 7px 12px;
    font-size: max(13px, calc(13px + var(--font-add, 0) * 1px));
    color: var(--color-text-primary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crm-industry-item:hover { background: var(--color-background-secondary); }
.crm-industry-empty {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.so-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 0.5px solid var(--color-border-tertiary, #f0eeea);
}
.so-contact-row:last-child { border-bottom: none; }
.so-contact-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}
.so-contact-info { flex: 1; min-width: 0; }
.so-contact-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.so-contact-pos {
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin-top: 1px;
}
.so-contact-role {
    font-size: 10px;
    color: var(--color-text-info);
    margin-left: 4px;
}
.so-contact-actions {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}
.so-contact-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 0.5px solid var(--color-border-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    color: var(--color-text-secondary);
    background: transparent;
    transition: background .12s;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.so-contact-btn:hover { background: var(--color-background-secondary); }

.so-svc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}
.so-svc-row:last-child { border-bottom: none; }
.so-svc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.so-svc-name {
    flex: 1;
    font-size: 13px;
    color: var(--color-text-primary);
}
.so-svc-amount {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    min-width: 60px;
    text-align: right;
}
.so-svc-amount.muted { color: var(--color-text-tertiary); font-weight: 400; }

.so-fin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}
.so-fin-card {
    background: var(--color-background-secondary, #f7f6f3);
    border-radius: 8px;
    padding: 9px 11px;
}
.so-fin-label {
    font-size: 10px;
    color: var(--color-text-tertiary);
    margin-bottom: 4px;
    line-height: 1.3;
}
.so-fin-val {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.3;
}
.so-fin-val.info { color: #0C447C; }
.so-fin-val.sm   { font-size: 12px; }
.so-fin-sub {
    font-size: 10px;
    color: var(--color-text-tertiary);
    margin-top: 2px;
}
@media (max-width: 480px) {
    .so-fin-grid { grid-template-columns: 1fr 1fr; }
}

.so-settings-panel {
    background: var(--color-background-secondary);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.so-settings-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--color-text-secondary);
    padding: 5px 0;
    cursor: pointer;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    user-select: none;
}
.so-settings-row:last-child { border-bottom: none; }
.so-settings-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #378ADD;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .so-row             { min-height: 44px; padding: 10px 0; }
    .so-row .so-label   { font-size: 14px; min-width: 100px; }
    .so-row .so-value   { font-size: 14px; }
    .so-contact-row     { padding: 12px 0; }
    .so-contact-btn     { width: 36px; height: 36px; font-size: 16px; }
    .so-contact-av      { width: 38px; height: 38px; font-size: 13px; }
}

[data-bs-theme="dark"] .so-sec + .so-sec    { border-top-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .so-row              { border-bottom-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .so-row .so-label    { color: #475569; }
[data-bs-theme="dark"] .so-row .so-value    { color: #f1f5f9; }
[data-bs-theme="dark"] .so-row .so-value.muted { color: #94a3b8; }
[data-bs-theme="dark"] .so-contact-row      { border-bottom-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .so-contact-btn      { border-color: rgba(255,255,255,.12); color: #94a3b8; }
[data-bs-theme="dark"] .so-contact-btn:hover{ background: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .so-svc-row          { border-bottom-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .so-fin-card         { background: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .so-fin-val          { color: #f1f5f9; }
[data-bs-theme="dark"] .so-fin-val.info     { color: #93c5fd; }
[data-bs-theme="dark"] .so-settings-panel   { background: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .so-settings-row     { color: #94a3b8; border-bottom-color: rgba(255,255,255,.06); }

/* ============================================================
 * 6. MINI TIMELINE — .mt-*
 * ============================================================ */
.mt-items { display: flex; flex-direction: column; }

.mt-item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 0.5px solid var(--color-border-tertiary, #f0eeea);
    position: relative;
}
.mt-item:last-child { border-bottom: none; }

.mt-line {
    position: absolute;
    left: 13px;
    top: 34px;
    bottom: -8px;
    width: 1px;
    background: var(--color-border-tertiary, #f0eeea);
}
.mt-item:last-child .mt-line { display: none; }

.mt-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.mt-icon.t-call    { background: #E6F1FB; color: #0C447C; }
.mt-icon.t-email   { background: #f7f6f3; color: #6b6963; }
.mt-icon.t-meeting { background: #E1F5EE; color: #085041; }
.mt-icon.t-note    { background: #FAEEDA; color: #633806; }
.mt-icon.t-task    { background: #f7f6f3; color: #6b6963; }
.mt-icon.t-stage   { background: #f7f6f3; color: #9b9890; font-size: 11px; font-weight: 500; }
.mt-icon.t-won     { background: #E1F5EE; color: #085041; }
.mt-icon.t-lost    { background: #FCEBEB; color: #791F1F; }
.mt-icon.t-system  { background: #f7f6f3; color: #9b9890; font-size: 10px; }

.mt-main { flex: 1; min-width: 0; }
.mt-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mt-body {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 2px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mt-meta {
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin-top: 3px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.mt-author { font-weight: 500; color: var(--color-text-secondary); }
.mt-all {
    font-size: 12px;
    color: #378ADD;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.mt-all:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .mt-item  { padding: 10px 0; gap: 12px; }
    .mt-icon  { width: 32px; height: 32px; font-size: 15px; border-radius: 10px; }
    .mt-line  { left: 16px; top: 42px; }
    .mt-title { font-size: 14px; white-space: normal; }
    .mt-body  { font-size: 13px; }
    .mt-meta  { font-size: 12px; }
}

[data-bs-theme="dark"] .mt-item            { border-bottom-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .mt-line            { background: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .mt-icon.t-call     { background: rgba(55,138,221,.20);  color: #93c5fd; }
[data-bs-theme="dark"] .mt-icon.t-email    { background: rgba(255,255,255,.06); color: #94a3b8; }
[data-bs-theme="dark"] .mt-icon.t-meeting  { background: rgba(29,158,117,.20);  color: #6ee7b7; }
[data-bs-theme="dark"] .mt-icon.t-note     { background: rgba(239,159,39,.20);  color: #fde68a; }
[data-bs-theme="dark"] .mt-icon.t-task     { background: rgba(255,255,255,.06); color: #94a3b8; }
[data-bs-theme="dark"] .mt-icon.t-stage    { background: rgba(255,255,255,.06); color: #475569; }
[data-bs-theme="dark"] .mt-icon.t-won      { background: rgba(29,158,117,.20);  color: #6ee7b7; }
[data-bs-theme="dark"] .mt-icon.t-lost     { background: rgba(226,75,74,.20);   color: #fca5a5; }
[data-bs-theme="dark"] .mt-title           { color: #f1f5f9; }
[data-bs-theme="dark"] .mt-body            { color: #94a3b8; }
[data-bs-theme="dark"] .mt-meta            { color: #475569; }
[data-bs-theme="dark"] .mt-author          { color: #94a3b8; }

/* ============================================================
 * 7. KANBAN — .deal-card / .kb-board
 * ============================================================ */
.kb-board {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 12px;
}
.kb-board.with-deferred { grid-template-columns: repeat(6, 1fr); }

.kb-col-head {
    background: rgba(0,0,0,.02);
    border: 0.5px solid rgba(0,0,0,.06);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.kb-col-bar    { height: 1.5px; border-radius: 1px; margin-top: 8px; }
.kb-col-name   { font-size: 13px; font-weight: 500; color: var(--color-text-primary); }
.kb-col-count  { font-size: 11px; color: var(--color-text-tertiary); }
.kb-col-amount { font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; }

.deal-card {
    background: var(--color-background-primary);
    border-radius: 10px;
    padding: 11px 13px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    transition: box-shadow .15s ease;
    margin-bottom: 6px;
}
.deal-card:hover  { box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.deal-card:active { box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.deal-card.overdue   { border-left: 2px solid #E24B4A; border-radius: 0 10px 10px 0; }
.deal-card.tender    { border-left: 2px solid #BA7517; border-radius: 0 10px 10px 0; }
.deal-card.returning { border-left: 2px solid #1D9E75; border-radius: 0 10px 10px 0; }

.add-card {
    border: 0.5px dashed var(--color-border-tertiary);
    border-radius: 10px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    color: var(--color-text-tertiary);
    font-size: 12px;
    background: transparent;
    width: 100%;
    font-family: inherit;
    transition: box-shadow .15s, color .12s;
    -webkit-tap-highlight-color: transparent;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.add-card:hover {
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    color: var(--color-text-secondary);
}

@media (max-width: 768px) {
    .kb-board,
    .kb-board.with-deferred { grid-template-columns: 1fr; gap: 16px; }
    .kb-col      { width: 100% !important; }
    .deal-card   { padding: 14px 16px; }
    .add-card    { min-height: 44px; font-size: 14px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .kb-board                 { grid-template-columns: repeat(3, 1fr); }
    .kb-board.with-deferred   { grid-template-columns: repeat(3, 1fr); }
}

/* Dark mode (cool "замша" v2): картки канбану з solid blue-grey фоном +
   border у тон, замість white-overlay. Hover — м'який синій акцент. */
[data-bs-theme="dark"] .deal-card {
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-secondary);
    box-shadow: 0 2px 8px rgba(0,0,0,.20);
}
[data-bs-theme="dark"] .deal-card:hover {
    border-color: var(--color-info);
    box-shadow: 0 4px 16px rgba(0,0,0,.30);
}
[data-bs-theme="dark"] .kb-col {
    background: rgba(255,255,255,.02);
    border-color: var(--color-border-secondary);
}
[data-bs-theme="dark"] .kb-col-head {
    background: rgba(255,255,255,.03);
    border-color: var(--color-border-secondary);
}
[data-bs-theme="dark"] .add-card { border-color: var(--color-border-tertiary); }

/* ============================================================
 * 8. SLIDE-OVER — responsive
 * ============================================================ */
.slide-over {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;   /* реальний мобільний: 100vh не враховує адресний рядок */
    width: 500px;
    min-width: 320px;
    max-width: 85vw;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1045;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .slide-over { width: 60vw; min-width: 360px; }
}

@media (max-width: 768px) {
    .slide-over {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        top: 0;
        bottom: 0;
        height: 100%;
        height: 100dvh;
        border-radius: 0 !important;
    }
    .so-resize-handle { display: none; }
    .so-footer .btn-thin { min-height: 48px; font-size: 14px; }
    .slide-over-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .slide-over-tabs::-webkit-scrollbar { display: none; }
    .slide-over-tabs .nav-link {
        white-space: nowrap;
        min-height: 44px;
        padding: 10px 14px;
    }
    .so-badges { flex-wrap: wrap; gap: 6px; }
    .act-add-btn { min-height: 44px; font-size: 14px; }
}

/* ============================================================
 * 9. SPACING helpers (ЗОЛОТЕ ПРАВИЛО)
 *   Секції: 14px | Поля форми: 16px | Кнопки: 8px | Чіпи: 6px
 *   Картка: 11×13 | Slide-over body: 14×18 | Секція: 10×0
 *   Radius картки: 10px | Кнопки: 8px | Чіпа: 20px
 * ============================================================ */
.gap-4  { gap: 4px; }
.gap-6  { gap: 6px; }
.gap-8  { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }

.mt-8   { margin-top: 8px; }
.mt-12  { margin-top: 12px; }
.mt-16  { margin-top: 16px; }
.mb-8   { margin-bottom: 8px; }
.mb-12  { margin-bottom: 12px; }
.mb-16  { margin-bottom: 16px; }

.p-thin  { padding: 10px 0; }
.p-card  { padding: 11px 13px; }
.p-panel { padding: 14px 18px; }

/* ============================================================
 * 10. PWA — safe-area, touch, scroll
 * ============================================================ */
.slide-over {
    padding-top:    env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}
.so-footer {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.kb-board *                     { -webkit-user-select: none; user-select: none; }
.kb-board input,
.kb-board textarea              { -webkit-user-select: text; user-select: text; }

html      { scroll-behavior: smooth; }
.so-body  { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }

body      { overscroll-behavior: none; }
.so-body  { overscroll-behavior: contain; }

* { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"] { -webkit-tap-highlight-color: rgba(55,138,221,.10); }

:focus:not(:focus-visible) { outline: none; }
:focus-visible             { outline: 2px solid #378ADD; outline-offset: 2px; }
/* Thin-line inputs мають власний focus-state (border-bottom) — глобальний outline не потрібен */
.input-thin:focus-visible,
.textarea-thin:focus-visible,
.select-thin:focus-visible { outline: none; }

/* =========================================================================
 * NOTIFY — toast stack (bottom-right). Контролюється public/assets/platform/notify.js
 * ===================================================================== */
.notify-stack {
    position: fixed;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    z-index: 9999;
    pointer-events: none;
    max-width: calc(100vw - 32px);
}
.notify-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 260px;
    max-width: 420px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--color-surface, #fff);
    color: var(--color-text-primary, #29251e);
    border: 1px solid var(--color-border-secondary, #e5e4df);
    border-left: 3px solid var(--notify-accent, #6b6963);
    box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
    font-size: 13px;
    line-height: 1.4;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity .18s ease, transform .18s ease;
}
.notify-toast.notify-show {
    opacity: 1;
    transform: translateX(0);
}
.notify-toast.notify-hide {
    opacity: 0;
    transform: translateX(20px);
}
.notify-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--notify-accent, #6b6963);
}
.notify-msg {
    flex: 1 1 auto;
    word-break: break-word;
}
.notify-close {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 2px 4px;
    margin: -2px -4px -2px 0;
    color: var(--color-text-tertiary, #9b9890);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    border-radius: 4px;
    flex-shrink: 0;
}
.notify-close:hover { color: var(--color-text-primary, #29251e); background: rgba(0,0,0,.04); }

.notify-error   { --notify-accent: #E24B4A; }
.notify-success { --notify-accent: #1D9E75; }
.notify-warning { --notify-accent: #D58A1F; }
.notify-info    { --notify-accent: #378ADD; }

[data-bs-theme="dark"] .notify-toast {
    background: var(--color-surface, #1e1c18);
    color: var(--color-text-primary, #f0ece2);
    border-color: var(--color-border-secondary, #3a3631);
    box-shadow: 0 8px 24px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.30);
}

/* =========================================================================
 * NOTIF BELL — in-app сповіщення (дзвоник у хедері + dropdown panel)
 * Контролюється public/assets/platform/notifications.js
 * ===================================================================== */
.notif-bell {
    position: relative;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: background .12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.notif-bell:hover { background: var(--bg-soft, #f7f6f3); }
.notif-bell .bi-bell { font-size: 18px; color: var(--color-text-secondary, #6b6963); }

.notif-badge {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 16px; height: 16px;
    background: #E24B4A;
    color: #fff;
    font-size: 9px; font-weight: 700;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 1.5px solid var(--color-surface, #fff);
}

.notif-panel {
    position: fixed;
    top: 52px;
    right: 12px;
    width: 340px;
    max-height: 480px;
    /* Раніше тут було var(--color-surface, #fff) — токен --color-surface
       ніколи не визначений у design-tokens (є тільки --surface), тому fallback
       #fff завжди → біла панель у dark mode. Виправлено на --color-background-primary. */
    background: var(--color-background-primary, #fff);
    color: var(--color-text-primary, #0a0908);
    border: 1px solid var(--color-border-tertiary, #d8d6d0);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.notif-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-tertiary, #f0eeea);
    font-size: 13px;
    font-weight: 600;
}
.notif-mark-all {
    font-size: 11px;
    color: #378ADD;
    background: none;
    border: none;
    cursor: pointer;
}
.notif-mark-all:hover { text-decoration: underline; }

.notif-list { overflow-y: auto; flex: 1; }
.notif-item {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border-tertiary, #f0eeea);
    transition: background .1s;
}
.notif-item:hover { background: var(--color-background-secondary, #f7f6f3); }
.notif-item.unread { background: #f0f6ff; }
.notif-item.unread:hover { background: #e6f1fb; }
.notif-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #378ADD;
    flex-shrink: 0;
    margin-top: 4px;
    opacity: 0;
}
.notif-item.unread .notif-dot { opacity: 1; }
/* Іконка типу сповіщення (замість крапки; unread показує фон .notif-item.unread) */
.notif-ico {
    flex-shrink: 0;
    width: 18px;
    margin-top: 1px;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    color: var(--color-text-tertiary, #9b9890);
}
.notif-content { min-width: 0; flex: 1; }
.notif-title { font-size: calc(12px * var(--font-scale, 1)); font-weight: 500; color: var(--color-text-primary, #0f0e0b); }
.notif-body  { font-size: calc(11px * var(--font-scale, 1)); color: var(--color-text-secondary, #6b6963); margin-top: 2px; word-break: break-word; }
.notif-time  { font-size: calc(10px * var(--font-scale, 1)); color: var(--color-text-tertiary, #9b9890); margin-top: 3px; }
.notif-empty { padding: 24px; text-align: center; font-size: 12px; color: var(--color-text-tertiary, #9b9890); }

[data-bs-theme="dark"] .notif-item.unread { background: rgba(55, 138, 221, .12); }
[data-bs-theme="dark"] .notif-item.unread:hover { background: rgba(55, 138, 221, .18); }

/* =========================================================================
 * CRM SHELL — Sidebar + Topbar layout (PROMPT_sidebar.md)
 * Принцип "ширяння": кожен блок як окрема карта з повітрям навколо.
 * ===================================================================== */
:root {
    /* Глобальні множники (керуються settings-panel JS) */
    --font-scale: 1;   /* DEPRECATED — лишається на 1 для backward-compat. Phase 11 → --font-add. */
    --font-add:   0;   /* Phase 11: дискретний крок +Npx. -1=Маленький, 0=Нормальний, 1=Більший, 2=Великий */
    --density:    1;   /* 0.75 = compact, 1 = normal, 1.3 = spacious */

    /* Sidebar */
    --sb-width:           240px;
    --sb-width-collapsed:  56px;
    --sb-bg:              #15171e;
    --sb-radius:          12px;
    --sb-margin:           8px;

    /* Topbar */
    --tb-height:          52px;
    --tb-radius:          12px;
    --tb-margin-top:       8px;
    --tb-margin-x:         8px;
    --tb-bg:              #ffffff;
    --tb-border:          rgba(0,0,0,.07);

    /* Board */
    --board-bg:           #f0efe9;
    --board-padding:      12px;

    /* Card */
    --card-bg:            #ffffff;
    --card-border:        rgba(0,0,0,.07);
    --card-radius:        10px;

    /* Accent */
    --accent:             #378ADD;
}
[data-theme="corporate"] { --sb-bg: #0d1f3c; --board-bg: #e8eef8; --accent: #185FA5; }
[data-theme="spring"]    { --sb-bg: #1a2e1a; --board-bg: #edf7ed; --accent: #1D9E75; }
[data-theme="pink"]      { --sb-bg: #c23b80; --board-bg: #fce4ef; --accent: #db2777; }
[data-bs-theme="dark"]   {
    --tb-bg:    #1c1c1e;
    --card-bg:  #1c1c1e;
    --board-bg: #1a1b1d;   /* нейтралізовано (було warm #161412) — синхр з themes.css */
    --tb-border: rgba(255,255,255,.08);
}

/* ===== SHELL ============================================================ */
/* Fix 3: scroll policy — body не скролиться, тільки .crm-main */
body.crm-body {
    background: var(--board-bg);
    overflow: hidden;
    height: 100vh;
}
.crm-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
    gap: 0;
}

/* ===== SIDEBAR ========================================================== */
.crm-sidebar {
    position: relative;
    width: var(--sb-width, 240px);
    flex-shrink: 0;
    padding: var(--sb-margin, 8px);
    height: 100vh;
    overflow-y: auto;            /* sidebar сам скролиться якщо nav довгий */
    overflow-x: hidden;
    transition: width .2s ease;
    z-index: 200;
}
.crm-sidebar.collapsed { width: var(--sb-width-collapsed, 56px); }

/* Anti-flash: коли HTML тегне sb-pre-collapsed (бут-script у <head>), миттєво
   звужуємо sidebar до того як JS виставить .collapsed на елементі. !important —
   щоб перебити inline-стили чи later cascade. JS-init знімає клас одразу після
   виставлення .collapsed, тож тут не виникає конфлікту з runtime-станом. */
html.sb-pre-collapsed .crm-sidebar { width: var(--sb-width-collapsed, 56px) !important; }
html.sb-pre-collapsed .crm-sidebar .crm-sb-brand-text,
html.sb-pre-collapsed .crm-sidebar .crm-sb-new span,
html.sb-pre-collapsed .crm-sidebar .crm-sb-item span,
html.sb-pre-collapsed .crm-sidebar .crm-sb-badge { display: none !important; }
/* Секції — ТОЧНО як .crm-sidebar.collapsed .crm-sb-section (height:0, НЕ display:none):
   display:none прибирав їх повністю, а .collapsed лишає їм ~1px → після handoff всі
   пункти зсувались на +1px за кожну пройдену секцію (мікро-здвиг іконок на Cmd+R). */
html.sb-pre-collapsed .crm-sidebar .crm-sb-section { height: 0 !important; padding: 0 !important; opacity: 0 !important; overflow: hidden !important; }
/* Повна геометрія згорнутого стану у ПРЕ-фазі = 1-в-1 з .crm-sidebar.collapsed,
   інакше іконки стрибають (ліво→центр) на handoff sb-pre-collapsed → .collapsed. */
html.sb-pre-collapsed .crm-sidebar .crm-sb-item    { justify-content: center; padding: 9px 0; }
html.sb-pre-collapsed .crm-sidebar .crm-sb-item .bi { width: auto; }
html.sb-pre-collapsed .crm-sidebar .crm-sb-new     { justify-content: center; padding: 8px; }
.crm-sidebar-inner {
    background: var(--sb-bg, #15171e);  /* hard-fallback темний — щоб карта була видима */
    border-radius: var(--sb-radius, 12px);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    padding: 8px 0;
}
.crm-sidebar-inner::-webkit-scrollbar { display: none; }

.crm-sb-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 12px;
    border-bottom: 0.5px solid rgba(255,255,255,.07);
    margin-bottom: 6px;
    overflow: hidden;
}
.crm-sb-logo {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 13px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
/* Лого компанії-тенанта (2026-07-12): реальні логотипи часто темні на
   прозорому фоні — на темному сайдбарі були б невидимі. Світлий «чіп»
   під зображенням; contain (НЕ cover — логотип не можна кропити). */
.crm-sb-logo-img { background: #fff; padding: 4px; }
.crm-sb-logo-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.crm-sb-brand-text { display: flex; flex-direction: column; overflow: hidden; }
.crm-sb-name   { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9); white-space: nowrap; }
.crm-sb-tenant { font-size: 10px; color: rgba(255,255,255,.35); white-space: nowrap; }
.crm-sidebar.collapsed .crm-sb-brand-text { display: none; }
/* Згорнутий сайдбар: квадрат з лого центрується (як іконки .crm-sb-item). */
.crm-sidebar.collapsed .crm-sb-brand,
html.sb-pre-collapsed .crm-sidebar .crm-sb-brand { justify-content: center; padding-left: 0; padding-right: 0; }

.crm-sb-new {
    margin: 6px 8px 8px;
    padding: 8px 10px;
    background: var(--sb-active, rgba(55,138,221,.12));
    border: 0.5px solid var(--sb-active, rgba(55,138,221,.25));
    border-radius: 8px;
    color: var(--sb-active-c, #60aaee);
    font-size: 12px; font-weight: 500;
    cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    white-space: nowrap; overflow: hidden;
    transition: background .12s;
}
.crm-sb-new:hover { background: var(--sb-active, rgba(55,138,221,.2)); }
.crm-sb-new .bi { font-size: 14px; flex-shrink: 0; }
.crm-sidebar.collapsed .crm-sb-new span { display: none; }
.crm-sidebar.collapsed .crm-sb-new { justify-content: center; padding: 8px; }

.crm-sb-nav { flex: 1; padding: 0 6px; }
.crm-sb-section {
    font-size: calc(9px * var(--font-scale, 1));
    font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.42);   /* насиченіше (типографіка-аудит): секції-роздільники читабельніші */
    padding: 10px 8px 3px;
    white-space: nowrap; overflow: hidden;
}
.crm-sidebar.collapsed .crm-sb-section { height: 0; padding: 0; opacity: 0; }

.crm-sb-item {
    display: flex; align-items: center;
    gap: 9px;
    padding: calc(7px * var(--density, 1)) 8px;
    margin: 1px 0;
    border-radius: 7px;
    font-size: calc(12px * var(--font-scale, 1));
    color: rgba(255,255,255,.62);   /* насиченіше (типографіка-аудит): пункти нав читабельніші */
    text-decoration: none;
    white-space: nowrap; overflow: hidden;
    transition: background .1s, color .1s;
}
.crm-sb-item:hover  { background: rgba(255,255,255,.07); color: rgba(255,255,255,.9); }
.crm-sb-item.active { background: var(--sb-active, rgba(55,138,221,.18)); color: var(--sb-active-c, #60aaee); }
.crm-sb-item .bi    { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.crm-sidebar.collapsed .crm-sb-item span   { display: none; }
.crm-sidebar.collapsed .crm-sb-item        { justify-content: center; padding: 9px 0; }
.crm-sidebar.collapsed .crm-sb-item .bi    { width: auto; }

.crm-sb-badge {
    margin-left: auto;
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 20px;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.45);
    flex-shrink: 0;
}
.crm-sb-badge.danger { background: rgba(226,75,74,.2); color: #f09595; }
.crm-sidebar.collapsed .crm-sb-badge { display: none; }

.crm-sb-divider {
    height: 0.5px;
    background: rgba(255,255,255,.07);
    margin: 5px 8px;
}

.crm-sb-collapse-btn {
    margin: auto 8px 8px;
    padding: 7px 8px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.3);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: background .1s, color .1s;
    width: calc(100% - 16px);
}
.crm-sb-collapse-btn:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.6); }

/* ===== CONTENT ZONE ===================================================== */
.crm-content {
    flex: 1;
    min-width: 0;
    height: 100vh;
    overflow: hidden;
    display: flex; flex-direction: column;
    /* padding: top керує .crm-topbar; right керується ним же.
       Тут оголошуємо тільки right margin sidebar-стороні (нічого) */
}

/* ===== TOPBAR =========================================================== */
/* position:fixed + анімація left на GPU-composited layer (translateZ + backface-
   hidden). max-width НЕ анімуємо — це layout property яка дає jank на macOS
   Chrome inertial scroll. left на fixed елементі обробляється виключно compositor
   thread'ом → smooth навіть на 120Hz ProMotion. Архітектура з референсу
   (insurance app main.php) — підтверджено working на всіх трьох (Win Chrome /
   Mac Chrome / Mac Safari). */
.crm-topbar {
    position: fixed;
    top: var(--tb-margin-x);
    /* Initial narrow state — лівий край ~38vw, прилягає до правого краю контенту.
       right враховує scrollbar width — щоб правий край топбару співпадав з правим
       краєм kanban-board (інакше scrollbar з'їдає ~12px справа у .crm-main). */
    left: 38vw;
    right: calc(var(--tb-margin-x) + var(--scrollbar-w, 0px));
    height: var(--tb-height);
    /* Visual styling переїхав з .crm-topbar-inner — топбар тепер ОДИН візуальний
       блок, .crm-topbar-inner став прозорим контейнером для контенту. */
    background: var(--tb-bg, #ffffff);
    border-radius: 12px;
    border: 0.5px solid var(--tb-border);
    box-shadow: 0 4px 24px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
    z-index: 100;
    /* GPU composite layer — критично для smooth left transition. Без translateZ
       Mac Chrome обробляє left на main thread (jank); з translateZ — на compositor. */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Анімуємо ТІЛЬКИ composite-safe properties: left, right, box-shadow.
       border-radius теж OK (на fixed elements). 0.35s cubic-bezier дає smooth-curve
       UX навіть при binary class toggle (на 8px threshold). */
    transition: left .35s cubic-bezier(.4, 0, .2, 1),
                right .35s cubic-bezier(.4, 0, .2, 1),
                border-radius .3s cubic-bezier(.4, 0, .2, 1),
                box-shadow .3s ease;
}
.crm-topbar.scrolled {
    /* Expand state: left = sidebar-width + tb-margin-x. Це точне положення лівого
       краю kanban-board (.crm-main padding-left = --tb-margin-x). Раніше було
       * 2 — топбар виявлявся на 8px правіше за board → візуально "коротший зліва". */
    left: calc(var(--sb-width, 240px) + var(--tb-margin-x));
    box-shadow: var(--shadow-md);
}
.crm-sidebar.collapsed ~ .crm-content .crm-topbar.scrolled {
    left: calc(var(--sb-width-collapsed, 56px) + var(--tb-margin-x));
}

/* ── Сайдбар РОЗГОРНУТИЙ → топбар повноширинний, заголовок УСЕРЕДИНІ топбару ──────
 * (Повернення фічі 2026-07 ПІСЛЯ знаходження справжніх коренів колишніх багів;
 *  верифіковано headless-скріншотами обох станів + релоадів.)
 * Взаємовиключність заголовків: розгорнутий → ховаємо ВЕСЬ .kb-page-top (як робить
 * скрол-правило kanban-board.css) і показуємо server-rendered #crm-tb-page-info.
 * Guard html:not(.sb-pre-collapsed) — анти-flash фаза складеного сайдбару (клас
 * .collapsed ставиться JS пізніше) не вмикає правила хибно. Desktop-only. */
@media (min-width: 769px) {
    html:not(.sb-pre-collapsed) .crm-sidebar:not(.collapsed) ~ .crm-content .crm-topbar {
        left: calc(var(--sb-width, 240px) + var(--tb-margin-x));
        box-shadow: var(--shadow-md);
    }
    html:not(.sb-pre-collapsed) .crm-sidebar:not(.collapsed) ~ .crm-content .crm-tb-page-info {
        display: flex;
    }
    html:not(.sb-pre-collapsed) .crm-sidebar:not(.collapsed) ~ .crm-content .kb-page-top {
        opacity: 0;
        pointer-events: none;
    }
}

/* ============================================================
 * Dark mode "замша" v2 — Glass effect для sidebar+topbar
 * Frosted blur + saturate → ефект скла поверх board-фону. Specific
 * data-theme (corporate/canvas) перебиває це через вищу специфічність.
 * ============================================================ */
[data-bs-theme="dark"] .crm-sidebar-inner {
    background: var(--color-sidebar-bg, rgba(10,16,28,.94));
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid var(--color-border-tertiary);
    box-shadow: 4px 0 24px rgba(0,0,0,.3);
}
[data-bs-theme="dark"] .crm-topbar {
    /* Тематичний --tb-bg (Corporate/Spring/Pink) має пріоритет, інакше fallback
       на --color-topbar (базова "замша"). Без цього Corporate dark не отримував
       свій тематичний фон і виглядав generic. */
    background: var(--tb-bg, var(--color-topbar, rgba(20,30,46,.96)));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: var(--tb-border, var(--color-border-tertiary));
    box-shadow: 0 4px 24px rgba(0,0,0,.24);
}
[data-bs-theme="dark"] .crm-topbar.scrolled {
    box-shadow: 0 6px 32px rgba(0,0,0,.30);
}


/* .crm-topbar-inner — прозорий flex-контейнер для контенту, fills the fixed wrapper.
   Усе візуальне styling переїхало на .crm-topbar. */
.crm-topbar-inner {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0;
    max-width: none;
}

/* ============================================================
 * Masks — solid background overlay над контентом який скролиться,
 * щоб контент не "просвічувався" крізь glass blur топбару під час scroll.
 * z-index 99 — менший за топбар (100), більший за .crm-main контент (auto).
 * ::before — основна маска над top zone (від top:0 до bottom топбара).
 * ::after — маска під rounded-corners топбара (висота border-radius + offset).
 * ============================================================ */
.crm-content::before {
    content: '';
    position: fixed;
    top: 0;
    left: var(--sb-width, 240px);
    right: var(--scrollbar-w, 0px);
    height: calc(var(--tb-margin-x) * 2 + var(--tb-height));
    /* Mask color пріоритет themed --board-bg (Corporate/Spring/Pink overrides) →
       --kb-bg-board (sales kanban) → базова --color-background-board. Інакше на
       Corporate-темі mask мав mismatching color і показував "полосу" поряд з топбаром. */
    background: var(--board-bg, var(--kb-bg-board, var(--color-background-board)));
    z-index: 99;
    pointer-events: none;
}
.crm-content::after {
    content: '';
    position: fixed;
    top: calc(var(--tb-margin-x) + var(--tb-height) - 12px);
    left: var(--sb-width, 240px);
    right: var(--scrollbar-w, 0px);
    height: calc(var(--tb-margin-x) + 12px);
    background: var(--board-bg, var(--kb-bg-board, var(--color-background-board)));
    z-index: 99;
    pointer-events: none;
}
.crm-sidebar.collapsed ~ .crm-content::before,
.crm-sidebar.collapsed ~ .crm-content::after {
    left: var(--sb-width-collapsed, 56px);
}

/* Mobile — топбар на весь екран (без narrow state), masks не потрібні. */
@media (max-width: 768px) {
    .crm-topbar,
    .crm-topbar.scrolled,
    .crm-sidebar.collapsed ~ .crm-content .crm-topbar.scrolled {
        left: var(--tb-margin-x);
        right: var(--tb-margin-x);
    }
    .crm-content::before,
    .crm-content::after,
    .crm-sidebar.collapsed ~ .crm-content::before,
    .crm-sidebar.collapsed ~ .crm-content::after {
        left: 0;
    }

    /* v273: topbar mobile fixes — search inline (не absolute), right-zone не перекривається.
     * ROOT: .crm-tb-search мав position:absolute + width:min(380px,40%) у desktop layout.
     * На mobile 40% × 390px ≈ 156px overlay'ило іконки settings/bell. */
    .crm-tb-search-wrap {
        position: static;       /* reset desktop wrapper для absolute search */
        flex: 1 1 auto;
        min-width: 0;           /* щоб flex-дитина не overflow'ила */
        display: flex;
        align-items: center;
    }
    .crm-tb-search {
        position: static;       /* з absolute → flex flow */
        transform: none;
        left: auto;
        top: auto;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 34px;
    }
    .crm-tb-search input {
        font-size: 14px;        /* iOS не зумить при focus якщо ≥16px, але 14 ОК */
        min-width: 0;
    }
    /* Right-зона: вужче gap, менші btn, прибрати декоративні роздільники */
    .crm-tb-right { gap: 2px; flex-shrink: 0; }
    .crm-tb-right .crm-tb-sep { display: none; }
    .crm-tb-btn { width: 30px; height: 30px; }
    /* Лого трохи менше + burger завжди flex-shrink:0 (його ширина не зменшується) */
    .crm-tb-logo-img { width: 28px; height: 28px; }
    .crm-tb-burger { flex-shrink: 0; }
    /* Page-info у scrolled topbar — приховати на mobile (є нижче у .kb-page-top).
     * v277: !important бо desktop rule на line ~1633 (.crm-topbar.scrolled
     * .crm-tb-page-info { display: flex }) йде ПІСЛЯ цього @media блоку у файлі —
     * без !important пізніше правило виграє за CSS cascade order. */
    .crm-topbar.scrolled .crm-tb-page-info { display: none !important; }
}

.crm-tb-logo-wrap   { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.crm-tb-logo-mark {
    /* Текстовий fallback (якщо img не використовується) */
    width: 28px; height: 28px;
    border-radius: 7px;
    background: var(--accent);
    color: #fff;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.crm-tb-logo-img {
    width: 32px; height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    object-fit: cover;
}
.crm-tb-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    overflow: hidden;
}
.crm-tb-brand-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    display: block;
    line-height: 1.2;
    white-space: nowrap;
}
.crm-tb-brand-tenant {
    font-size: 10px;
    color: var(--color-text-secondary);
    display: block;
    white-space: nowrap;
}
/* При скролі топбар стає компактним — приховуємо brand-text (показується page-info) */
.crm-topbar.scrolled .crm-tb-brand-text { display: none; }

.crm-tb-page-info { display: none; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; }
/* Phase 10.2: page-info прихований за замовч; на СКРОЛІ з'являється у flex-потоці
   ПОРУЧ з логотипом (зліва, до search-wrap). Search не ховаємо. */
.crm-topbar.scrolled .crm-tb-page-info { display: flex; }
.crm-tb-page-name { font-size: calc(13px * var(--font-scale, 1)); font-weight: var(--fw-title); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); }
.crm-tb-page-sep  { color: var(--color-text-tertiary); font-size: calc(13px * var(--font-scale, 1)); }
.crm-tb-page-sub  { font-size: calc(12px * var(--font-scale, 1)); color: var(--color-text-secondary); }

/* search-wrap — порожній flex:1 спейсер, що тримає логотип/page-info зліва і right-блок справа
   розведеними. Сама пошукова смужка позиціонується абсолютно по центру топбара. */
.crm-tb-search-wrap {
    flex: 1;
}
.crm-tb-search {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 8px;
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 8px;
    padding: 0 12px;
    height: 32px;
    width: min(380px, 40%);
}
.crm-tb-search .bi    { font-size: 12px; color: var(--color-text-tertiary); }
.crm-tb-search input  {
    flex: 1;
    border: none;
    background: transparent;
    /* 14px явно: раніше глобальний 16px !important маскував ці 12px; після скоупу
       iOS-правила на mobile пошук просів би до 12px — замалий для головного поля. */
    font-size: calc(14px * var(--font-scale, 1));
    color: var(--color-text-primary);
    outline: none;
}
.crm-tb-search input::placeholder { color: var(--color-text-tertiary); }

.crm-tb-right { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
/* Контекстна «+ Створити» у топбарі (Нова угода / Новий клієнт) — варіант B уніфікації. */
.crm-tb-new {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 14px; margin-right: 4px;
    border: 0; border-radius: 9px; cursor: pointer;
    background: var(--color-primary, #2563eb); color: #fff;
    font-size: 13px; font-weight: 600; white-space: nowrap;
    transition: filter .12s;
}
.crm-tb-new:hover { filter: brightness(1.07); }
.crm-tb-new .bi { font-size: 14px; }
@media (max-width: 720px) { .crm-tb-new span { display: none; } .crm-tb-new { padding: 0 9px; } }
.crm-tb-sep {
    width: 0.5px; height: 16px;
    background: var(--color-border-tertiary);
    margin: 0 3px;
}
.crm-tb-btn {
    width: 30px; height: 30px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    position: relative;
    transition: background .12s;
}
.crm-tb-btn:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }
.crm-tb-badge {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 14px; height: 14px;
    background: #E24B4A;
    color: #fff;
    font-size: 8px; font-weight: 700;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    border: 1.5px solid var(--tb-bg);
}

/* (Font switcher винесено у settings-panel — .crm-sp-seg) */

/* Language dropdown у топбарі (PROMPT — компактна кнопка з прапором + dropdown) */
.crm-tb-lang { position: relative; }
.crm-tb-lang-current {
    height: 30px;
    padding: 0 8px;
    border-radius: 7px;
    border: 0.5px solid var(--color-border-tertiary);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 1;
    color: var(--color-text-secondary);
    transition: background .12s;
}
.crm-tb-lang-current:hover { background: var(--color-background-secondary); }
.crm-tb-lang-current .bi   { color: var(--color-text-tertiary); }

.crm-tb-lang-dd {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 8px;
    overflow: hidden;
    min-width: 140px;
    z-index: 1020;
    box-shadow: 0 6px 16px rgba(0,0,0,.1);
}
.crm-lang-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: background .1s;
    white-space: nowrap;
}
.crm-lang-opt:hover  { background: var(--color-background-secondary); }
.crm-lang-opt.active { font-weight: 500; color: var(--accent, #378ADD); }

[data-bs-theme="dark"] .crm-tb-lang-dd { background: #1c1c1e; border-color: rgba(255,255,255,.1); }

/* Phase 18.19: avatar-only wrapper. Імʼя/посада прибрані, тільки avatar-кнопка. */
.crm-tb-user {
    position: relative;
    display: flex; align-items: center;
}
.crm-tb-avatar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 2px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s;
}
.crm-tb-avatar-btn:hover  { box-shadow: 0 0 0 2px var(--color-info, #4d8fcc); }
.crm-tb-avatar-btn:active { transform: scale(.95); }
.crm-tb-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #E6F1FB;
    color: #0C447C;
    font-size: 11px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    border: 0.5px solid #b5d4f4;
}
.crm-tb-avatar.lg { width: 40px; height: 40px; font-size: 14px; }
/* Фото профілю (Етап 3): cover — портрет кропиться в коло (очікувано для
   обличчя, на відміну від лого-документа з contain). */
.crm-tb-avatar-img { overflow: hidden; padding: 0; }
.crm-tb-avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

.crm-tb-user-dd {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
    min-width: 280px;
    max-width: 300px;
    z-index: 1020;
    overflow: hidden;
}
.crm-tb-user-dd.open { display: block; }
.crm-tb-user-dd-head     { display: flex; gap: 12px; align-items: center; padding: 14px 14px 12px; }
.crm-tb-user-dd-meta     { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.crm-tb-user-dd-meta .crm-tb-user-name { font-size: calc(13px * var(--font-scale, 1)); font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-tb-user-dd-meta .crm-tb-user-role { font-size: calc(11px * var(--font-scale, 1)); color: var(--color-text-secondary); text-transform: capitalize; }
.crm-tb-user-dd-divider  { height: 0.5px; background: var(--color-border-tertiary); }

.crm-tb-user-dd-item {
    display: flex; align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: background .1s;
}
.crm-tb-user-dd-item:hover         { background: var(--color-background-secondary); }
.crm-tb-user-dd-item.active        { font-weight: 500; }
.crm-tb-user-dd-item.danger        { color: #E24B4A; }
.crm-tb-user-dd-item.danger:hover  { background: #fdecea; }

.crm-tb-user-dd-section-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--color-text-tertiary);
    padding: 10px 14px 6px;
    font-weight: 600;
}
.crm-tb-section-count { font-weight: 400; letter-spacing: 0; }
.crm-tb-online-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #1D9E75;
    box-shadow: 0 0 0 2px rgba(29,158,117,.20);
}

.crm-tb-user-list {
    max-height: 180px;
    overflow-y: auto;
    padding: 0 6px 4px;
}
.crm-tb-team-list { max-height: 220px; }
.crm-tb-user-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    transition: background .1s;
}
.crm-tb-user-row:hover { background: var(--color-background-secondary); }
.crm-tb-user-row.is-me { background: rgba(77, 143, 204, .08); }
.crm-tb-user-row.is-me::after { content: 'ви'; margin-left: auto; font-size: 10px; color: var(--color-info, #4d8fcc); font-weight: 600; }
.crm-tb-mini-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--color-background-secondary);
    color: var(--color-text-primary);
    font-size: 9px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.crm-tb-mini-name { flex: 1; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-tb-mini-role { font-size: 10px; color: var(--color-text-tertiary); text-transform: capitalize; flex-shrink: 0; }
.crm-tb-empty { font-size: 12px; color: var(--color-text-tertiary); padding: 8px 14px; text-align: center; }

/* Avatar palette colors (для mini-avatar у списку команди) */
.crm-tb-mini-avatar.av-blue   { background: #E6F1FB; color: #0C447C; }
.crm-tb-mini-avatar.av-green  { background: #DCF5E8; color: #14704F; }
.crm-tb-mini-avatar.av-yellow { background: #FFF1CC; color: #936606; }
.crm-tb-mini-avatar.av-red    { background: #FCE4E4; color: #A93131; }
.crm-tb-mini-avatar.av-gray   { background: #ECECEC; color: #4A4A4A; }

@media (max-width: 768px) {
    .crm-tb-user-dd { min-width: 260px; max-width: calc(100vw - 24px); right: -4px; }
    .crm-tb-user-list { max-height: 140px; }
    .crm-tb-team-list { max-height: 160px; }
}

/* ===== PAGE HEAD ======================================================== */
.crm-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 4px var(--tb-margin-x) 8px;
    transition: height .2s, opacity .2s, padding .2s;
    overflow: hidden;
}
.crm-page-head.hidden { height: 0; opacity: 0; padding: 0; pointer-events: none; }
.crm-page-title    { font-size: calc(20px * var(--font-scale, 1)); font-weight: 600; color: var(--color-text-primary); margin: 0; }
.crm-page-subtitle { font-size: 12px; color: var(--color-text-secondary); margin: 2px 0 0; }
.crm-page-actions  { display: flex; gap: 8px; }

/* ===== MAIN ============================================================= */
.crm-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;   /* Fix 3: тільки тут скрол */
    overflow-x: hidden;
    scrollbar-gutter: stable;
    /* padding-top резервує місце під fixed-positioned топбар (висота + 2× sb-m
       щоб співпасти з top:8px топбара + 8px margin знизу). Раніше топбар був
       flex-child і займав місце у потоці — після переходу на position:fixed
       reserved space потрібен явно. */
    padding: calc(var(--tb-height) + var(--tb-margin-x) * 2) var(--tb-margin-x) var(--tb-margin-x);
}

/* ===== SETTINGS PANEL (заміна старого theme-panel) ===================== */
.crm-settings-panel {
    position: fixed;
    top: 64px;
    right: 16px;
    width: 280px;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 1020;
}
.crm-sp-title {
    font-size: calc(13px * var(--font-scale, 1));
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}
.crm-sp-section {
    font-size: calc(10px * var(--font-scale, 1));
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin-top: 12px;
    margin-bottom: 6px;
}
.crm-sp-section:first-of-type { margin-top: 0; }
.crm-sp-row    { display: flex; flex-wrap: wrap; gap: 4px; }
/* Theme pills — 2-колоночна grid: 4 пігулки симетрично 2x2 однакової ширини. */
.crm-sp-pills  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.crm-sp-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 9px;
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 999px;
    background: var(--color-background-primary);
    color: var(--color-text-primary);
    font-size: calc(11px * var(--font-scale, 1));
    cursor: pointer;
    transition: background .12s, border-color .12s;
    min-width: 0;                      /* дозволяє пігулці звужуватись у grid */
    text-decoration: none;             /* якщо <a> — без underline */
}
.crm-sp-pill:hover  { background: var(--color-background-secondary); }
.crm-sp-pill.active { background: var(--color-background-secondary); border-color: var(--accent, #378ADD); font-weight: 500; }
.crm-sp-segments {
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 6px;
    padding: 2px;
    gap: 1px;
    width: 100%;
}
.crm-sp-seg {
    flex: 1;
    padding: 5px 6px;
    border: none;
    background: transparent;
    border-radius: 4px;
    font-size: calc(11px * var(--font-scale, 1));
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    transition: background .12s, color .12s;
    text-decoration: none;             /* lang seg — це <a>, без underline */
}
.crm-sp-seg:hover  { color: var(--color-text-primary); }
.crm-sp-seg.active {
    background: var(--color-background-primary);
    color: var(--color-text-primary);
    font-weight: 500;
}
.crm-theme-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }

[data-bs-theme="dark"] .crm-settings-panel { background: var(--color-background-tertiary); border-color: var(--color-border-secondary); }
[data-bs-theme="dark"] .crm-sp-pill        { background: transparent; }
[data-bs-theme="dark"] .crm-sp-pill.active { background: rgba(255,255,255,.06); border-color: var(--color-info); }
[data-bs-theme="dark"] .crm-sp-segments    { background: rgba(255,255,255,.04); border-color: var(--color-border-secondary); }
[data-bs-theme="dark"] .crm-sp-seg.active  { background: var(--color-background-secondary); color: var(--color-text-primary); }

/* Dark mode overrides */
[data-bs-theme="dark"] .crm-tb-user-dd { background: #1c1c1e; border-color: rgba(255,255,255,.1); }
[data-bs-theme="dark"] .crm-tb-badge   { border-color: #1c1c1e; }
[data-bs-theme="dark"] .crm-theme-panel { background: #1c1c1e; }
/* Phase 18.19: avatar popover у dark — підсвічування + mini-avatar fallback */
[data-bs-theme="dark"] .crm-tb-user-row:hover { background: rgba(255,255,255,.05); }
[data-bs-theme="dark"] .crm-tb-user-row.is-me { background: rgba(77,143,204,.15); }
[data-bs-theme="dark"] .crm-tb-mini-avatar { background: rgba(255,255,255,.08); color: var(--color-text-primary); }
[data-bs-theme="dark"] .crm-tb-user-dd-item.danger:hover { background: rgba(226,75,74,.15); }

/* ===== Burger + Backdrop (mobile) ===== */
.crm-tb-burger {
    display: none;
    width: 30px; height: 30px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    align-items: center; justify-content: center;
    font-size: 18px;
}
.crm-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1039;
}
.crm-sidebar-backdrop.open { display: block; }

/* Fix 1: Mobile (< 768px) */
@media (max-width: 768px) {
    .crm-sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform .25s ease;
        padding: 0;
        width: var(--sb-width) !important;
    }
    .crm-sidebar.mobile-open { transform: translateX(0); }
    .crm-content { padding-left: var(--sb-margin) !important; }
    .crm-tb-burger { display: flex; }

    /* v275: на mobile drawer ЗАВЖДИ розгорнутий з лейблами, навіть якщо
     * desktop-стан був .collapsed (localStorage user-preference) або
     * html.sb-pre-collapsed (anti-flash bootscript у <head>).
     * Корінь бага: користувач у desktop стиснув sidebar — клас .collapsed
     * залишався, mobile drawer відкривався з нього: full-width контейнер,
     * але вміст (brand-text / item span / section / badge) — display:none.
     * FIX: force display через !important тільки на mobile breakpoint. */
    .crm-sidebar.collapsed .crm-sb-brand-text,
    html.sb-pre-collapsed .crm-sidebar .crm-sb-brand-text {
        display: flex !important;
    }
    .crm-sidebar.collapsed .crm-sb-new span,
    html.sb-pre-collapsed .crm-sidebar .crm-sb-new span {
        display: inline !important;
    }
    .crm-sidebar.collapsed .crm-sb-new,
    html.sb-pre-collapsed .crm-sidebar .crm-sb-new {
        justify-content: flex-start !important;
        padding: 10px 14px !important;
    }
    .crm-sidebar.collapsed .crm-sb-section,
    html.sb-pre-collapsed .crm-sidebar .crm-sb-section {
        height: auto !important;
        padding: revert !important;
        opacity: 1 !important;
    }
    .crm-sidebar.collapsed .crm-sb-item span,
    html.sb-pre-collapsed .crm-sidebar .crm-sb-item span {
        display: inline !important;
    }
    .crm-sidebar.collapsed .crm-sb-item,
    html.sb-pre-collapsed .crm-sidebar .crm-sb-item {
        justify-content: flex-start !important;
        padding: 9px 14px !important;
    }
    /* v282: тільки badges з content. Порожні (style="display:none" з PHP)
     * НЕ форсити — інакше виглядають як короткі риски справа від пунктів. */
    .crm-sidebar.collapsed .crm-sb-badge:not(:empty),
    html.sb-pre-collapsed .crm-sidebar .crm-sb-badge:not(:empty) {
        display: inline-flex !important;
    }
    /* Toggle-кнопка collapse/expand (<<) — на mobile drawer не потрібна,
     * бо drawer = always-expanded і закривається через backdrop/swipe.
     * v275-fix: справжній клас .crm-sb-collapse-btn (а не .crm-sb-toggle). */
    .crm-sidebar .crm-sb-collapse-btn,
    .crm-sidebar #crm-sb-collapse { display: none !important; }
}

/* ============================================================
 * Custom confirm-dialog (заміна native confirm())
 * JS у layout.php → window.confirmDialog(message, onConfirm, onCancel?, opts?)
 * ============================================================ */
@keyframes crmConfirmIn {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}
.crm-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.crm-confirm-box {
    background: var(--color-background-primary, #ffffff);
    color: var(--color-text-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 12px;
    padding: 24px;
    min-width: 300px;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .20);
    animation: crmConfirmIn .15s ease;
}
.crm-confirm-message {
    font-size: calc(14px * var(--font-scale, 1));
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 20px;
    line-height: 1.5;
    white-space: pre-line;
}
.crm-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ============================================================
 * Calendar (sales/calendar/index.php) — FullCalendar UI overrides + slide-over
 * ============================================================ */
/* Wrap — без власної рамки і БЕЗ зовнішнього margin: .crm-main уже дає
   8px padding з боків (як для .kb-board). Інакше календар отримує подвійний
   indent (8px main + 8px margin) і виглядає вужчим за канбан. */
.cal-wrap {
    background: transparent;
    padding: 0;
    border: none;
    border-radius: 0;
    margin: 0;
}
.cal-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
}
:is(#calendar, #cal-snap-overlay) {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 12px;
}
.cal-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: calc(11px * var(--font-scale, 1));
    color: var(--color-text-secondary);
}
.cal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cal-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: calc(12px * var(--font-scale, 1));
    color: var(--color-text-secondary);
    cursor: pointer;
}

/* FullCalendar overrides — узгодити з platform-кольорами */
:is(#calendar, #cal-snap-overlay) .fc-toolbar-title {
    font-size: calc(15px * var(--font-scale, 1));
    font-weight: 600;
    color: var(--color-text-primary);
}
:is(#calendar, #cal-snap-overlay) .fc-button {
    background: var(--color-background-secondary) !important;
    border-color: var(--color-border-tertiary) !important;
    color: var(--color-text-primary) !important;
    font-size: calc(12px + var(--font-add, 0) * 1px) !important;
    font-weight: 500 !important;
    /* Phase 18.8: внутрішні padding + межі — раніше кнопки виглядали "склееными". */
    padding: 6px 14px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
}
/* Group buttons (Рік / Місяць / Тиждень / День / Розклад) — gap між кнопками. */
:is(#calendar, #cal-snap-overlay) .fc-button-group {
    gap: 4px;
}
:is(#calendar, #cal-snap-overlay) .fc-button-group > .fc-button {
    border-radius: 6px !important;
    margin-left: 0 !important;
}
:is(#calendar, #cal-snap-overlay) .fc-toolbar .fc-button + .fc-button {
    margin-left: 6px;
}
:is(#calendar, #cal-snap-overlay) .fc-toolbar.fc-header-toolbar {
    gap: 12px;
    margin-bottom: 12px;
}
:is(#calendar, #cal-snap-overlay) .fc-button-active,
:is(#calendar, #cal-snap-overlay) .fc-button:hover {
    background: var(--color-info, var(--accent, #378ADD)) !important;
    border-color: var(--color-info, var(--accent, #378ADD)) !important;
    color: #fff !important;
}
:is(#calendar, #cal-snap-overlay) .fc-daygrid-day-number {
    font-size: calc(11px * var(--font-scale, 1));
    color: var(--color-text-secondary);
}
:is(#calendar, #cal-snap-overlay) .fc-event {
    /* Google-like суцільна пігулка: скруглена, з відступами, фон=колір події
       (eventDisplay:'block'), текст=e.textColor (читабельний за яскравістю фону). */
    border-radius: 6px;
    font-size: calc(10.5px * var(--font-scale, 1)) !important;
    padding: 2px 7px !important;
    line-height: 1.4 !important;
    margin: 1px 2px !important;
    cursor: pointer;
    border: none;
    font-weight: 500;
}
:is(#calendar, #cal-snap-overlay) .fc-daygrid-event .fc-event-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Month-пігулки: ховаємо префікс-час (обрізався в «00:…», «19…») — пігулка показує
   тип-emoji + назву (як holiday-пігулки Google); точний час видно в деталях/тижні/дні. */
:is(#calendar, #cal-snap-overlay) .fc-daygrid-event .fc-event-time { display: none; }
/* Сховати точку-маркер біля title — title починається з emoji, dot зайвий. */
:is(#calendar, #cal-snap-overlay) .fc-daygrid-event-dot {
    display: none;
}
:is(#calendar, #cal-snap-overlay) .fc-event.is-done {
    opacity: .6;
    text-decoration: line-through;
}

/* Calendar slide-over sections */
.cal-so-section {
    padding: 14px 0;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}
.cal-so-section:last-child { border-bottom: none; }
.cal-so-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: calc(10px * var(--font-scale, 1));
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 10px;
}
.cal-so-date {
    font-size: calc(10px * var(--font-scale, 1));
    color: var(--color-text-tertiary);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.cal-so-empty {
    font-size: calc(12px * var(--font-scale, 1));
    color: var(--color-text-tertiary);
    text-align: center;
    padding: 16px 0;
    font-style: italic;
}

[data-bs-theme="dark"] :is(#calendar, #cal-snap-overlay) .fc-daygrid-day {
    background: transparent;
}

/* Phase 13: FullCalendar dark-mode оверайди через --fc-* tokens.
   Один блок — спрацьовує для всіх тем (Default/Corporate/Spring/Pink),
   тому що --color-* змінні вже per-theme. */
[data-bs-theme="dark"] :is(#calendar, #cal-snap-overlay) {
    --fc-border-color:        var(--color-border-tertiary);
    --fc-page-bg-color:       var(--color-background-primary);
    --fc-neutral-bg-color:    var(--color-background-secondary);
    --fc-neutral-text-color:  var(--color-text-secondary);
    --fc-today-bg-color:      rgba(96,170,238,.10);
    --fc-button-bg-color:     var(--color-background-secondary);
    --fc-button-border-color: var(--color-border-tertiary);
    --fc-button-text-color:   var(--color-text-primary);
    --fc-button-hover-bg-color:     var(--color-info, #4d8fcc);
    --fc-button-hover-border-color: var(--color-info, #4d8fcc);
    --fc-button-active-bg-color:    var(--color-info, #4d8fcc);
    --fc-list-event-hover-bg-color: var(--color-background-secondary);
}
[data-bs-theme="dark"] .cal-legend,
[data-bs-theme="dark"] :is(#calendar, #cal-snap-overlay) {
    background: var(--color-background-primary);
    border-color: var(--color-border-tertiary);
}
[data-bs-theme="dark"] :is(#calendar, #cal-snap-overlay) .fc-toolbar-title {
    color: var(--color-text-primary);
}
[data-bs-theme="dark"] :is(#calendar, #cal-snap-overlay) a,
[data-bs-theme="dark"] :is(#calendar, #cal-snap-overlay) a:visited { color: inherit; }

/* === Phase 13: Group events (synthetic "Тип → N" полоса) ============== */
:is(#calendar, #cal-snap-overlay) .fc-event.cal-group {
    font-weight: 600;
}
:is(#calendar, #cal-snap-overlay) .fc-event.cal-group .fc-event-title::after {
    content: '';
}

/* === Phase 13: Equal-height клітинки місяця ============================
   FullCalendar dayGridMonth із expandRows вирівнює рядки тижнів, але висота
   клітинок різниться через кількість подій. Після групування — max 4 типи на
   день. Фіксуємо min-height на клітинці. */
:is(#calendar, #cal-snap-overlay) .fc-daygrid-day-frame {
    min-height: 92px;
}

/* === Phase 13: Group modal (overlay + список подій) =================== */
.cal-group-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cal-group-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    cursor: pointer;
}
.cal-group-card {
    position: relative;
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 12px;
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.18));
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cal-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border-tertiary);
}
.cal-group-title {
    font-size: calc(13px + var(--font-add, 0) * 1px);
    font-weight: 600;
    color: var(--color-text-primary);
}
.cal-group-list {
    padding: 8px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cal-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    font-size: calc(12px + var(--font-add, 0) * 1px);
    color: var(--color-text-primary);
    width: 100%;
}
.cal-group-item:hover {
    background: var(--color-background-secondary);
    border-color: var(--color-border-tertiary);
}
.cal-group-item.is-done {
    opacity: .55;
    text-decoration: line-through;
}
.cal-group-item .cgi-time {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-tertiary);
    font-size: calc(11px + var(--font-add, 0) * 1px);
    min-width: 40px;
}
.cal-group-item .cgi-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-group-item .cgi-client,
.cal-group-item .cgi-service {
    flex-shrink: 0;
    color: var(--color-text-secondary);
    font-size: calc(11px + var(--font-add, 0) * 1px);
}
/* Phase 18.11: service label у группа-modal — невелика pill для виокремлення. */
.cal-group-item .cgi-service {
    padding: 2px 8px;
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 10px;
    font-weight: 500;
}
[data-bs-theme="dark"] .cal-group-backdrop { background: rgba(0,0,0,.65); }

/* === Phase 14: Google-like calendar UX =============================== */

/* 14.1: hover popover (peek). Position:fixed, z-index високий. */
.cal-event-pop {
    position: fixed;
    z-index: 1100;
    min-width: 240px;
    max-width: 320px;
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 10px;
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.18));
    padding: 10px 12px;
    font-size: calc(12px + var(--font-add, 0) * 1px);
    color: var(--color-text-primary);
}
.cep-head { padding-left: 8px; margin-bottom: 6px; }
.cep-title {
    font-size: calc(13px + var(--font-add, 0) * 1px);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
}
.cep-time {
    font-size: calc(11px + var(--font-add, 0) * 1px);
    color: var(--color-text-tertiary);
    margin-top: 2px;
}
.cep-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: var(--color-text-secondary);
    font-size: calc(11px + var(--font-add, 0) * 1px);
}
.cep-row.cep-done { color: var(--color-text-success); }
.cep-row.cep-remind { gap: 8px; }
.cep-remind-sel {
    flex: 1;
    padding: 3px 6px;
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 6px;
    font-size: calc(11px + var(--font-add, 0) * 1px);
    color: var(--color-text-primary);
    outline: none;
    cursor: pointer;
}
.cep-remind-sel:focus { border-color: var(--color-info, #4d8fcc); }
.cep-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border-tertiary);
}
.cep-btn {
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--color-border-tertiary);
    background: transparent;
    color: var(--color-text-primary);
    font-size: calc(11px + var(--font-add, 0) * 1px);
    cursor: pointer;
}
.cep-btn:hover { background: var(--color-background-secondary); }
.cep-btn-primary {
    background: var(--color-info, #4d8fcc);
    border-color: var(--color-info, #4d8fcc);
    color: #fff;
}
.cep-btn-primary:hover { background: var(--color-info, #4d8fcc); opacity: .9; }

/* 14.2/14.3: quick-add modal — стилі схожі на cal-group-modal але з формою. */
.cal-quick-add {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cqa-card {
    position: relative;
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 12px;
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.18));
    width: min(480px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cqa-body {
    padding: 16px 18px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cqa-row { display: flex; flex-direction: column; gap: 6px; position: relative; }
.cqa-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cqa-row-2 > div { display: flex; flex-direction: column; gap: 6px; }
.cqa-label {
    font-size: calc(11px + var(--font-add, 0) * 1px);
    font-weight: 500;
    color: var(--color-text-secondary);
}
.cqa-input {
    padding: 8px 12px;
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 8px;
    font-size: calc(12px + var(--font-add, 0) * 1px);
    color: var(--color-text-primary);
    outline: none;
    transition: border-color .12s;
    font-family: inherit;
}
.cqa-input:focus { border-color: var(--color-info, #4d8fcc); }
.cqa-deal-dd {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    max-height: 220px;
    overflow: auto;
    z-index: 5;
}
.cqa-deal-opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: calc(12px + var(--font-add, 0) * 1px);
    color: var(--color-text-primary);
}
.cqa-deal-opt:hover { background: var(--color-background-secondary); }
.cqa-deal-id { color: var(--color-text-tertiary); font-family: ui-monospace, monospace; margin-right: 6px; }
.cqa-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--color-border-tertiary);
}
.cqa-btn {
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid var(--color-border-tertiary);
    background: transparent;
    color: var(--color-text-primary);
    font-size: calc(12px + var(--font-add, 0) * 1px);
    cursor: pointer;
    font-weight: 500;
}
.cqa-btn:hover { background: var(--color-background-secondary); }
.cqa-btn-primary {
    background: var(--color-info, #4d8fcc);
    border-color: var(--color-info, #4d8fcc);
    color: #fff;
}
.cqa-btn-primary:hover { opacity: .9; }

/* 14.4: nowIndicator (червона лінія "зараз") + сьогодні-clearer highlight */
:is(#calendar, #cal-snap-overlay) .fc-timegrid-now-indicator-line,
:is(#calendar, #cal-snap-overlay) .fc-timegrid-now-indicator-arrow {
    border-color: var(--color-danger, #E24B4A) !important;
    color: var(--color-danger, #E24B4A) !important;
}
/* Today — як Google: підсвітка лише КЛІТИНКИ-тіла (не всієї колонки з заголовком),
   і субтильна — головний орієнтир «сьогодні» це синій кружок на номері. */
:is(#calendar, #cal-snap-overlay) .fc-daygrid-day.fc-day-today {
    background: rgba(255, 200, 0, .05) !important;
}
[data-bs-theme="dark"] :is(#calendar, #cal-snap-overlay) .fc-daygrid-day.fc-day-today {
    background: rgba(96, 170, 238, .06) !important;
}
/* Заголовок-колонку today НЕ тонуємо (Google лишає її чистою). */
:is(#calendar, #cal-snap-overlay) .fc-col-header-cell.fc-day-today {
    background: transparent !important;
}

/* ═══ Google-Calendar-like ясність (обидві теми) ═══════════════════════════════
 * Еталон — Google Calendar: «все видно і зрозуміло». Приводимо до тієї чистоти:
 *  • заголовки днів (ПН ВТ…) — тихі uppercase-лейбли, БЕЗ підкреслення/лінк-кольору
 *    (раніше — яскраві сині підкреслені лінки, що перетягували увагу);
 *  • today — номер дня у заповненому акцент-кружку (одразу видно, як у Google),
 *    замість ледь помітного фону клітинки. */
:is(#calendar, #cal-snap-overlay) .fc-col-header-cell-cushion {
    text-decoration: none;
    color: var(--color-text-tertiary);
    font-weight: var(--fw-medium, 560);
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: default;
}
:is(#calendar, #cal-snap-overlay) .fc-daygrid-day-number {
    text-decoration: none;
    color: var(--color-text-secondary);
    font-weight: 500;
}
:is(#calendar, #cal-snap-overlay) .fc-day-today .fc-daygrid-day-number {
    background: var(--color-primary, var(--accent, #2f6fd0));
    color: #fff;
    border-radius: 999px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    margin: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* 14.5: year view (multiMonthYear) — щільніший grid, hover на дні */
:is(#calendar, #cal-snap-overlay) .fc-multimonth-month {
    border: 1px solid var(--color-border-tertiary);
    border-radius: 8px;
    overflow: hidden;
    margin: 4px;
}
:is(#calendar, #cal-snap-overlay) .fc-multimonth-title {
    font-size: calc(12px + var(--font-add, 0) * 1px);
    font-weight: 600;
    color: var(--color-text-primary);
    padding: 8px;
}
:is(#calendar, #cal-snap-overlay) .fc-multimonth-daygrid-table {
    font-size: calc(11px + var(--font-add, 0) * 1px);
}

/* Drag-select mirror (показ duration під час drag) */
:is(#calendar, #cal-snap-overlay) .fc-highlight {
    background: rgba(77, 143, 204, .15) !important;
}

/* === Phase 15: 2-column layout (sidebar + main) ====================== */
.cal-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 12px;
    align-items: stretch;
    /* Phase 15.4: відступ від топбару (title зліва живе на тій же горизонталі що й
       топбар, отож календар має починатись нижче для візуальної повітря). */
    margin-top: 16px;
}
.cal-sidebar {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    /* Phase 15.2: висота = висоті основного календаря (grid align-items: stretch default).
       overflow:auto щоб довгий контент не розпирав. */
    align-self: stretch;
    overflow: auto;
}
.cal-main { min-width: 0; }
.cal-sb-section {
    margin-top: 12px;
    margin-bottom: 4px;
    font-size: calc(10px + var(--font-add, 0) * 1px);
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.cal-sb-section:first-child { margin-top: 0; }

/* 15.7: search bar у sidebar */
.cal-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.cal-search-wrap > .bi {
    position: absolute;
    left: 10px;
    color: var(--color-text-tertiary);
    font-size: calc(12px + var(--font-add, 0) * 1px);
    pointer-events: none;
}
.cal-search-input {
    width: 100%;
    padding: 7px 10px 7px 30px;
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 8px;
    font-size: calc(12px + var(--font-add, 0) * 1px);
    color: var(--color-text-primary);
    outline: none;
}
.cal-search-input:focus { border-color: var(--color-info, #4d8fcc); }
.cal-search-dd {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    max-height: 320px;
    overflow: auto;
    z-index: 50;
}
.cal-search-hit {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 6px;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: calc(12px + var(--font-add, 0) * 1px);
    color: var(--color-text-primary);
}
.cal-search-hit:hover { background: var(--color-background-secondary); }
.cal-search-hit .csh-date {
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
    font-size: calc(11px + var(--font-add, 0) * 1px);
}
.cal-search-hit .csh-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-search-hit .csh-client {
    grid-column: 2;
    color: var(--color-text-secondary);
    font-size: calc(11px + var(--font-add, 0) * 1px);
}
.cal-search-empty {
    padding: 12px;
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: calc(12px + var(--font-add, 0) * 1px);
}

/* 15.6: type/scope checkbox у sidebar */
.cal-filter-cb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    border-radius: 6px;
    cursor: pointer;
    font-size: calc(12px + var(--font-add, 0) * 1px);
    color: var(--color-text-primary);
}
.cal-filter-cb:hover { background: var(--color-background-secondary); }
.cal-filter-cb input { accent-color: var(--color-info, #4d8fcc); cursor: pointer; }
/* 16.12: select для color-by scheme */
.cal-sb-select {
    width: 100%;
    padding: 6px 10px;
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 8px;
    font-size: calc(12px + var(--font-add, 0) * 1px);
    color: var(--color-text-primary);
    outline: none;
}
.cal-sb-select:focus { border-color: var(--color-info, #4d8fcc); }

/* 15.6: mini-calendar (sidebar) — компактний FullCalendar */
.cal-mini {
    border: 1px solid var(--color-border-tertiary);
    border-radius: 8px;
    overflow: hidden;
    padding: 4px;
    /* Резерв висоти ДО ініту JS: інакше порожня смужка-«підкладка», а при білді
       міні-календаря весь сайдбар фільтрів стрибав вниз (~200px). ~= фактична
       висота міні (config height:220 + toolbar + padding). */
    min-height: 252px;
}
.cal-mini .fc-toolbar.fc-header-toolbar {
    margin-bottom: 4px;
    font-size: calc(11px + var(--font-add, 0) * 1px);
}
.cal-mini .fc-toolbar-title {
    font-size: calc(11px + var(--font-add, 0) * 1px) !important;
    font-weight: 600;
}
.cal-mini .fc-button {
    padding: 2px 6px !important;
    font-size: calc(10px + var(--font-add, 0) * 1px) !important;
}
.cal-mini .fc-col-header-cell-cushion,
.cal-mini .fc-daygrid-day-number {
    font-size: calc(10px + var(--font-add, 0) * 1px);
    padding: 2px !important;
    text-decoration: none;   /* Google-clean: без лінк-підкреслення */
}
/* Раніше номери міні-календаря були дефолтними синіми лінками («все синє»). */
.cal-mini .fc-col-header-cell-cushion { color: var(--color-text-tertiary); text-transform: uppercase; font-weight: 600; }
.cal-mini .fc-daygrid-day-number      { color: var(--color-text-secondary); }
.cal-mini .fc-day-today .fc-daygrid-day-number {
    background: var(--color-primary, var(--accent, #2f6fd0));
    color: #fff;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
.cal-mini .fc-daygrid-day-events { display: none; }
.cal-mini .fc-daygrid-day-frame { min-height: 22px !important; }
.cal-mini .fc-daygrid-day { cursor: pointer; }
.cal-mini .fc-daygrid-day:hover { background: var(--color-background-secondary); }

/* 15.8: agenda (listMonth) view — більш компактні рядки */
:is(#calendar, #cal-snap-overlay) .fc-list-event:hover td {
    background: var(--color-background-secondary) !important;
}
:is(#calendar, #cal-snap-overlay) .fc-list-day-cushion {
    background: var(--color-background-secondary) !important;
    color: var(--color-text-primary);
}

/* Mobile: sidebar згортається в дроп вгорі */
@media (max-width: 768px) {
    .cal-layout {
        grid-template-columns: 1fr;
    }
    .cal-sidebar {
        align-self: auto;
        overflow: visible;
        flex-direction: column;
        gap: 6px;
    }
    .cal-mini { display: none; }
}

/* ============================================================
 * ClPhoneInput — глобальний phone-input з селектором країни.
 * Активується на <input data-phone>. JS у /assets/platform/phone-input.js.
 * Зберігає E.164 у hidden input (originalInput) для submit'у форми.
 * ============================================================ */
/* Thin-lines стиль (узгоджено з .input-thin): без коробки і border-radius,
   тільки border-bottom як розділова лінія форми + тонкий вертикальний
   розділювач між country-btn і number-input. */
.cl-phone-wrap {
    display: flex;
    align-items: stretch;
    border: none;
    border-bottom: 1px solid var(--color-border-secondary, #e5e4df);
    border-radius: 0;
    background: transparent;
    transition: border-color .15s ease;
}
.cl-phone-wrap:focus-within {
    border-bottom-color: #378ADD;
}

.cl-phone-country {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 10px 8px 0;
    border: none;
    border-right: 1px solid var(--color-border-tertiary, #f0eeea);
    cursor: pointer;
    background: transparent;
    font-family: inherit;
    font-size: 16px;  /* iOS zoom prevention як у .input-thin */
    color: var(--color-text-primary);
    white-space: nowrap;
    user-select: none;
    flex-shrink: 0;
    transition: background .12s;
}
.cl-phone-country:hover {
    background: var(--color-background-secondary);
}
.cl-phone-flag { font-size: 16px; line-height: 1; }
.cl-phone-code {
    font-size: 16px;
    color: var(--color-text-secondary);
}
.cl-phone-chevron {
    font-size: 10px;
    color: var(--color-text-tertiary);
}

.cl-phone-number {
    flex: 1;
    border: none;
    outline: none;
    padding: 10px 0 8px 10px;
    background: transparent;
    font-family: inherit;
    font-size: 16px;  /* iOS zoom prevention як у .input-thin */
    color: var(--color-text-primary);
    min-width: 0;
}
.cl-phone-number::placeholder {
    color: var(--color-text-tertiary, #9b9890);
}

/* Dropdown — позиціонується relative до .cl-phone-wrap (position:relative в JS) */
.cl-phone-dd {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    width: 280px;
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
    z-index: 300;
    display: none;
    overflow: hidden;
}
.cl-phone-dd.open { display: block; }
.cl-phone-dd.dd-up {
    bottom: calc(100% + 2px);
    top: auto;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .10);
}

.cl-phone-dd-search {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border-tertiary);
}
.cl-phone-dd-search input {
    width: 100%;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-md);
    padding: 5px 8px;
    font-size: 13px;
    background: var(--color-background-secondary);
    color: var(--color-text-primary);
    outline: none;
    font-family: var(--font-sans);
}

.cl-phone-dd-list {
    max-height: 200px;
    overflow-y: auto;
}
.cl-phone-dd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: max(13px, calc(13px + var(--font-add, 0) * 1px));
    color: var(--color-text-primary);
    transition: background .1s;
}
.cl-phone-dd-item:hover {
    background: var(--color-background-secondary);
}
.cl-phone-dd-item.selected {
    background: var(--color-background-info);
    color: var(--color-text-info);
}
.cl-phone-dd-divider {
    height: 1px;
    background: var(--color-border-tertiary);
    margin: 4px 0;
}

[data-bs-theme="dark"] .cl-phone-wrap {
    border-bottom-color: var(--color-border-secondary);
}
[data-bs-theme="dark"] .cl-phone-wrap:focus-within {
    border-bottom-color: var(--color-info);
    background: rgba(77, 143, 204, .08);
}
[data-bs-theme="dark"] .cl-phone-country {
    border-right-color: var(--color-border-tertiary);
}
[data-bs-theme="dark"] .cl-phone-country:hover {
    background: rgba(255, 255, 255, .04);
}
[data-bs-theme="dark"] .cl-phone-dd {
    background: var(--color-background-primary);
    border-color: var(--color-border-secondary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
}
[data-bs-theme="dark"] .cl-phone-dd.dd-up {
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .45);
}

/* ── flatpickr: кнопка «Готово» — пігулка по центру (швидке закриття) ───────── */
.flatpickr-calendar .fp-done {
    display: block;
    width: fit-content;
    margin: 4px auto 8px;
    padding: 4px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--color-primary, #2563eb);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    transition: filter .12s;
}
.flatpickr-calendar .fp-done:hover { filter: brightness(1.06); }

/* SPA-навігація між журналами: легке затемнення тіла під час fetch (сайдбар статичний) */
.crm-main.spa-loading { opacity: .55; pointer-events: none; transition: opacity .12s ease; }

/* ============================================================
 * Підказка (tooltip) — глобальна, замість нативних title.
 * Темна виразна плашка зі стрілкою (еталон від власника 2026-07-29):
 * нативна системна підказка бліда і зʼявляється ~1.5-2 с.
 * Логіка показу/позиції — /assets/platform/tooltip.js.
 * ============================================================ */
.crm-tip {
    position: fixed;
    z-index: 10000;                 /* поверх панелей (101) і модалок (1200-1300) */
    max-width: 320px;
    padding: 9px 13px;
    border-radius: 10px;
    background: #24262b;
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    pointer-events: none;           /* підказка не перехоплює курсор */
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity .14s ease, transform .14s ease;
}
.crm-tip.on { opacity: 1; transform: none; }
.crm-tip-text { display: block; white-space: pre-line; }
/* Стрілка вказує на центр елемента (--crm-tip-ax рахує JS) */
.crm-tip-arrow {
    position: absolute;
    left: var(--crm-tip-ax, 50%);
    width: 0; height: 0;
    margin-left: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}
.crm-tip:not(.is-above) .crm-tip-arrow {
    top: -6px;
    border-bottom: 6px solid #24262b;
}
.crm-tip.is-above .crm-tip-arrow {
    bottom: -6px;
    border-top: 6px solid #24262b;
}
/* Темна тема: на темному фоні чорна плашка зливається — робимо світлішу */
[data-bs-theme="dark"] .crm-tip { background: #3a3d44; }
[data-bs-theme="dark"] .crm-tip:not(.is-above) .crm-tip-arrow { border-bottom-color: #3a3d44; }
[data-bs-theme="dark"] .crm-tip.is-above .crm-tip-arrow { border-top-color: #3a3d44; }

@media (prefers-reduced-motion: reduce) {
    .crm-tip { transition: none; }
}


/* ============================================================
 * Модальний каркас .cl-* + довідка «?» + coach-marks.
 * ПЕРЕНЕСЕНО з sales/clients.css (2026-07-29): ці класи потрібні
 * ГЛОБАЛЬНО — кнопка довідки зʼявляється в журналах (Угоди, КП,
 * Контакти…), а clients.css там не підключений. Префікс .cl-
 * лишено свідомо: його вже вживають AppendixModal/RateModal/
 * RequestModal/ContractsHelp — перейменування зламало б робоче.
 * ============================================================ */
.cl-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 200;          /* нижче notifications (999), вище slide-over (101) */
    display: none;
    align-items: center;
    justify-content: center;
    animation: cl-fade-in .15s ease-out;
}
.cl-modal-overlay.open { display: flex; }
[data-bs-theme="dark"] .cl-modal-overlay { background: rgba(0, 0, 0, .65); }
.cl-modal-box {
    background: var(--color-background-primary, #fff);
    border: 1px solid var(--color-border-tertiary, rgba(0, 0, 0, .12));
    border-radius: 14px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    overflow: hidden;
    animation: cl-modal-pop .20s cubic-bezier(.4, 0, .2, 1);
}
[data-bs-theme="dark"] .cl-modal-box {
    background: #1a2535;
    border-color: rgba(255, 255, 255, .08);
}
.cl-modal-box-lg { max-width: 720px; }
.cl-help-body { overflow-y: auto; }
/* Заголовок розділу довідки — ЯВНА межа секції, а не просто жирний рядок:
   у довгій інструкції має бути видно, де закінчилась одна тема й почалась
   інша (прохання власника). Смуга-акцент + номер + підкладка.
   scroll-margin — відступ, з яким заголовок стає під навігацією при
   переході по розділах (scrollIntoView у journal-help.js). */
.cl-help-content { counter-reset: jh-sec; }
.cl-help-content h4 {
    counter-increment: jh-sec;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 26px 0 10px;
    padding: 9px 12px;
    font-size: calc(14.5px + var(--font-add, 0) * 1px);
    font-weight: 700;
    color: var(--color-text-primary);
    /* Нейтральна підкладка, а НЕ --color-background-secondary: у темній темі
       той токен збігається з фоном панелі й смуга була б невидима. */
    background: rgba(128, 128, 128, .10);
    border-left: 3px solid var(--color-info, #378ADD);
    border-radius: 0 8px 8px 0;
    scroll-margin-top: 10px;
}
.cl-help-content h4::before {
    content: counter(jh-sec);
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--color-background-info, #E6F1FB);
    color: var(--color-text-info, #0C447C);
    font-size: calc(11.5px + var(--font-add, 0) * 1px);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cl-help-content h4:first-child { margin-top: 0; }
.cl-help-content p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--color-text-primary); }
.cl-help-content code {
    background: var(--color-background-secondary, #f3f2ef);
    padding: 1px 4px; border-radius: 4px; font-size: 12px;
}
/* Вітальна плашка на початку довідки — акцент через ГОТОВІ «інфо»-токени
   (--color-background-info / --color-text-info / --color-info), нових
   кольорів не заводимо: плашка мусить жити і в темній темі. */
.cl-help-intro {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--color-background-info, #E6F1FB);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.cl-help-intro > i {
    flex: 0 0 auto;
    font-size: calc(15px + var(--font-add, 0) * 1px);
    line-height: 1.4;
    color: var(--color-info, #378ADD);
}
.cl-help-intro b, .cl-help-intro strong { color: var(--color-text-info, #0C447C); }
.cl-help-intro p { margin: 0; }
.cl-help-intro p + p { margin-top: 6px; }
/* Плашка вже дала відступ знизу — не подвоюємо його заголовком під нею */
.cl-help-intro + h4 { margin-top: 4px; }

/* Пункт-картка: іконка + заголовок в один рядок, опис нижче, опційне посилання.
   Контейнер .cl-help-grid — СВІДОМО один стовпчик: панель вузька, і дві
   колонки зі скріншота-референсу стиснулись би в нечитабельні смужки. */
.cl-help-grid { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 12px; }
.cl-help-feature {
    background: var(--color-background-secondary, #f7f6f3);
    /* Тонка рамка, а не лише заливка: у списку сутність мусить мати межу
       (той самий закон, що .kp-item) — і вона рятує картку, коли заливка
       зливається з фоном контейнера. */
    border: max(1px, 0.5px) solid var(--color-border-tertiary, rgba(0, 0, 0, .08));
    border-radius: 8px;
    padding: 11px 12px;
}
/* ПАСТКА: у темній темі --color-background-secondary ДОРІВНЮЄ фону панелі
   (rgba(38,39,42)) — картка ставала невидимою. Заливка окремо для ночі. */
[data-bs-theme="dark"] .cl-help-feature { background: rgba(255, 255, 255, .055); }
.cl-help-feature-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: calc(13px + var(--font-add, 0) * 1px);
    color: var(--color-text-primary);
    margin-bottom: 4px;
}
.cl-help-feature p { margin: 0; }
.cl-help-feature a {
    display: inline-block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--color-info, #4d8fcc);
    text-decoration: none;
}
.cl-help-feature a:hover { text-decoration: underline; }

/* Навігація по розділах довідки (journal-help.js будує її з h4).
   Один рядок, що прокручується по горизонталі — щоб висота не з'їдала
   місце під текст навіть при восьми розділах на вузькій панелі. */
.cl-help-nav {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    padding: 8px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    border-bottom: max(1px, 0.5px) solid var(--color-border-tertiary, rgba(0, 0, 0, .08));
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-tertiary, rgba(0, 0, 0, .15)) transparent;
}
.cl-help-nav::-webkit-scrollbar       { height: 4px; }
.cl-help-nav::-webkit-scrollbar-track { background: transparent; }
.cl-help-nav::-webkit-scrollbar-thumb {
    background: var(--color-border-tertiary, rgba(0, 0, 0, .15));
    border-radius: 2px;
}
.cl-help-nav button {
    flex: 0 0 auto;
    border: max(1px, 0.5px) solid var(--color-border-tertiary, rgba(0, 0, 0, .12));
    background: transparent;
    color: var(--color-text-secondary, #6b6a67);
    font-size: calc(12.5px + var(--font-add, 0) * 1px);
    line-height: 1.3;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
/* ПАСТКА: у темній темі --color-background-secondary = фон панелі, hover був
   би невидимий — тому нейтральна напівпрозора підкладка. */
.cl-help-nav button:hover {
    background: rgba(128, 128, 128, .12);
    color: var(--color-text-primary, #0a0908);
}
.cl-help-nav button.active {
    background: var(--color-background-info, #E6F1FB);
    border-color: var(--color-info, #378ADD);
    color: var(--color-text-info, #0C447C);
    font-weight: 600;
}

.cl-help-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
.cl-help-table td {
    padding: 6px 8px;
    border-bottom: max(1px, 0.5px) solid var(--color-border-tertiary, rgba(0, 0, 0, .08));
}
.cl-help-table td:last-child { color: var(--color-text-secondary, #6b6a67); white-space: nowrap; }
.cl-help-foot {
    padding: 8px 20px 14px;
    border-top: max(1px, 0.5px) solid var(--color-border-tertiary, rgba(0, 0, 0, .08));
}
.cl-help-foot a { font-size: 12.5px; color: var(--color-info, #4d8fcc); text-decoration: none; }
.cl-help-foot a:hover { text-decoration: underline; }
.cl-ob-pop {
    /* z: над панеллю клієнта (101), ПІД модалками (.cl-modal-overlay 200) —
       відкрита довідка/форма перекриває підказку, а не навпаки */
    position: fixed; z-index: 150; width: 280px;
    background: var(--color-background-primary, #fff);
    border: max(1px, 0.5px) solid var(--color-border-secondary);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
    padding: 12px 14px;
    animation: cl-modal-pop .18s cubic-bezier(.4, 0, .2, 1);
}
[data-bs-theme="dark"] .cl-ob-pop { box-shadow: 0 8px 28px rgba(0, 0, 0, .5); }
.cl-ob-title { font-weight: 700; font-size: 13.5px; color: var(--color-text-primary); margin-bottom: 4px; }
.cl-ob-text { font-size: 12.5px; line-height: 1.45; color: var(--color-text-secondary); margin-bottom: 10px; }
.cl-ob-foot { display: flex; align-items: center; gap: 8px; }
.cl-ob-count { font-size: 11.5px; color: var(--color-text-tertiary, #9b9890); margin-right: auto; }
.cl-ob-target { outline: 2px solid var(--color-info, #4d8fcc); outline-offset: 2px; border-radius: 8px; }
.cl-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border-tertiary, rgba(0, 0, 0, .08));
    background: var(--color-background-secondary, #f7f6f3);
}
.cl-modal-title {
    font-size: calc(15px + var(--font-add, 0) * 1px);
    font-weight: 600;
    color: var(--color-text-primary, #0a0908);
}
.cl-modal-close {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid var(--color-border-tertiary, rgba(0, 0, 0, .12));
    background: transparent;
    color: var(--color-text-tertiary, #9b9890);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s;
}
.cl-modal-close:hover {
    background: var(--color-background-danger, #FCEBEB);
    color: var(--color-text-danger, #E24B4A);
}
.cl-modal-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}
body.cl-modal-locked { overflow: hidden; }
@keyframes cl-fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes cl-modal-pop {
    from { opacity: 0; transform: translateY(8px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (max-width: 600px) {
    .cl-modal-box { max-width: calc(100vw - 24px); }
}

/* Картинка в довідці журналу. Порожній слот сам ховається.
   ПАСТКА: було width:100% — і щільний кроп (дві колонки дошки) роздувався
   до ширини панелі, тобто вдвічі проти справжнього інтерфейсу. Тепер
   max-width: картинка показується у СВОЄМУ масштабі 1:1 з тим, що
   користувач бачить на екрані, і лише зменшується, коли не влазить.
   Розмір у CSS-пікселях задає атрибут width/height на самому <img>
   (знімки робимо з deviceScaleFactor, тож device-пікселі ≠ CSS). */
.jh-shot:empty { display: none; }
/* margin-inline:auto — кадр, вужчий за панель (напр. вертикальна панель
   фільтра), стоїть по центру, а не лишає рвану пустку праворуч. */
.jh-shot img { display: block; max-width: 100%; height: auto; border-radius: 8px;
    margin: 8px auto 12px;
    border: max(1px, 0.5px) solid var(--color-border-tertiary); }

/* Довідка живе в .cl-panel-body (у неї немає бічних відступів — їх дає
   вміст, див. .cl-panel-body .cl-show у clients.css). Той самий прийом. */
.cl-panel-body .cl-help-content { padding: 0 18px 18px; }
/* nowrap другого стовпчика розрахований на модалку 720px; у вузькій панелі
   він обрізав би текст (панель overflow:hidden). Тільки в панелі — щоб
   довідка Договорів (модалка) лишилась як була. */
.cl-panel-body .cl-help-table td { vertical-align: top; }
.cl-panel-body .cl-help-table td:first-child { white-space: nowrap; padding-right: 12px; }
.cl-panel-body .cl-help-table td:last-child  { white-space: normal; }


/* ============================================================
 * Слайд-панель .cl-backdrop + .cl-panel-slide.
 * ПЕРЕНЕСЕНО з sales/clients.css (2026-07-29, Phase E.1) з тієї ж
 * причини, що й модальний каркас вище: панель тепер потрібна не лише
 * картці Клієнта, а й довідці «?» у журналах, де clients.css не
 * підключений. Клієнт-специфічне (.cl-panel-close, .cl-panel-body
 * .cl-show/.cl-back) лишилось у clients.css.
 * Backdrop (z-index 100) + Panel (z-index 101). Нижче за модалки (200+)
 * та notifications (999). Floating: top/right/bottom 10px, blur.
 * ============================================================ */
.cl-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 100;
    display: none;
    animation: cl-fade-in .15s ease-out;
}
.cl-backdrop.open { display: block; }
[data-bs-theme="dark"] .cl-backdrop { background: rgba(0, 0, 0, .50); }

.cl-panel-slide {
    position: fixed;
    top: var(--gap, 10px);
    right: var(--gap, 10px);
    bottom: var(--gap, 10px);
    width: 72%;
    max-width: 1200px;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .07);
    z-index: 101;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateX(calc(100% + 20px));
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.cl-panel-slide.open { transform: translateX(0); }

[data-bs-theme="dark"] .cl-panel-slide {
    background: rgba(38, 39, 42, .97);   /* нейтралізовано (було navy rgba(26,37,53)) */
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .25);
}

/* Вузький варіант — панель для ЧИТАННЯ тексту (довідка), не для форм із
   вкладками. Це лише СТАРТОВА ширина: користувач тягне лівий край і CRM
   памʼятає (data-resizable, platform/panel-resize.js). Свідомо у власному
   @media(min-width:769px), щоб не конкурувати з мобільним override нижче
   за порядком/специфічністю. */
@media (min-width: 769px) {
    /* 1120 — щоб кадри інтерфейсу (дошка, картка угоди, панель фільтра) лягали
       в довідку майже 1:1 і не лишали пустки з боків. На 700 вони або
       зменшувались до нечитабельного, або стояли смужкою посередині. */
    .cl-panel-slide.cl-panel-narrow { width: min(1120px, 78vw); max-width: 1120px; }
}

.cl-panel-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
}
.cl-panel-body::-webkit-scrollbar       { width: 6px; }
.cl-panel-body::-webkit-scrollbar-track { background: transparent; }
.cl-panel-body::-webkit-scrollbar-thumb {
    background: var(--color-border-tertiary, rgba(0, 0, 0, .15));
    border-radius: 3px;
}
.cl-panel-body { scrollbar-width: thin; scrollbar-color: var(--color-border-tertiary, rgba(0, 0, 0, .15)) transparent; }

/* Body lock — заборона scroll сторінки, коли панель відкрита */
body.cl-panel-locked { overflow: hidden; }

/* Mobile responsive — повна ширина (діє на БУДЬ-яку .cl-panel-slide,
   зокрема й на .cl-panel-narrow — вузький варіант лише для десктопа) */
@media (max-width: 768px) {
    .cl-panel-slide {
        top: 0; right: 0; bottom: 0; left: 0;
        width: 100%; max-width: none;
        border-radius: 0;
        border: none;
    }
}


/* ============================================================
 * Ручка зміни ширини панелі (platform/panel-resize.js).
 * Вигляд 1:1 з .so-resize-handle картки угоди — щоб «потягнути за
 * лівий край» скрізь у CRM виглядало й відчувалось однаково.
 * ============================================================ */
.crm-resize-handle {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 5;                 /* над вмістом панелі, під її модалками */
    background: transparent;
    transition: background .15s;
}
.crm-resize-handle::after {
    content: '⟺';
    font-size: calc(11px + var(--font-add, 0) * 1px);
    color: var(--color-text-tertiary, #9b9890);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-background-primary, #fff);
    border: max(1px, 0.5px) solid var(--color-border-tertiary, rgba(0, 0, 0, .08));
    border-radius: 4px;
    padding: 2px 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
    opacity: 0;
    transition: opacity .12s ease;
    pointer-events: none;
}
.crm-resize-handle:hover            { background: rgba(55, 138, 221, .10); }
.crm-resize-handle:hover::after     { opacity: 1; }
.crm-resize-handle.dragging         { background: rgba(55, 138, 221, .18); }
.crm-resize-handle.dragging::after {
    opacity: 1;
    color: var(--color-info, #378ADD);
    border-color: var(--color-info, #378ADD);
}
body.crm-resizing {
    cursor: col-resize !important;
    user-select: none;
}
/* Поки тягнуть — панель не має анімувати ширину й перехоплювати курсор */
body.crm-resizing .crm-resize-handle ~ * { pointer-events: none; }

.crm-width-badge {
    position: absolute;
    left: 26px; top: 50%;   /* не наїжджає на маркер ⟺ самої ручки */
    transform: translateY(-50%);
    z-index: 6;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(15, 17, 21, .82);
    color: #fff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}
.crm-width-badge.show { opacity: 1; }

/* Мобільний — панель на весь екран, тягнути нічого */
@media (max-width: 768px) {
    .crm-resize-handle, .crm-width-badge { display: none; }
}