/* Тёмное боковое меню и в светлой теме (как в макете).
   Unfold рисует меню классами bg-base-50 / text-base-600 и т.д.;
   внутри меню подменяем светлую шкалу base на тёмную. */
html:not(.dark) #nav-sidebar {
    --color-base-50: oklch(24% .025 230);
    --color-base-100: oklch(28% .027 230);
    --color-base-200: oklch(32% .028 230);
    --color-base-300: oklch(42% .025 230);
    --color-base-400: oklch(64% .018 230);
    --color-base-500: oklch(76% .014 230);
    --color-base-600: oklch(80% .01 230);
    --color-base-700: oklch(88% .008 230);
    --color-base-800: oklch(92% .005 230);
    --color-base-900: oklch(97% .003 230);
    --color-base-950: oklch(99% 0 0);
    /* цвета текста ссылаются на base — пересчитываем их здесь же */
    --color-font-subtle-light: var(--color-base-500);
    --color-font-default-light: var(--color-base-600);
    --color-font-important-light: var(--color-base-900);
    border-color: transparent;
}
html:not(.dark) #nav-sidebar .bg-white {
    background-color: var(--color-base-100);
}

/* --- Переключатель языка UA / EN в шапке --- */
.crm-lang { margin: 0; }
.crm-lang-btn {
    display: inline-flex; align-items: center; gap: .55rem; padding: 0; border: 0;
    background: none; cursor: pointer; font: inherit; font-weight: 600; font-size: .8rem;
    letter-spacing: .03em;
}
.crm-lang-label { color: var(--color-base-400); transition: color .15s; }
.crm-lang-btn:not(.is-en) .crm-lang-ua,
.crm-lang-btn.is-en .crm-lang-en { color: var(--color-base-700); }
.dark .crm-lang-btn:not(.is-en) .crm-lang-ua,
.dark .crm-lang-btn.is-en .crm-lang-en { color: var(--color-base-100); }
.crm-lang-track {
    position: relative; width: 52px; height: 28px; border-radius: 999px;
    background: var(--color-base-100); border: 1px solid var(--color-base-200);
    box-shadow: inset 0 1px 3px rgb(0 0 0 / .12); transition: background .15s;
}
.dark .crm-lang-track { background: var(--color-base-700); border-color: var(--color-base-600); }
.crm-lang-btn:hover .crm-lang-track { border-color: var(--color-primary-500); }
.crm-lang-knob {
    position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
    overflow: hidden; box-shadow: 0 1px 3px rgb(0 0 0 / .35);
    transition: transform .16s ease;
}
.crm-lang-btn.is-en .crm-lang-knob { transform: translateX(24px); }
.crm-flag { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .16s; }
.crm-flag-en { opacity: 0; }
.crm-lang-btn.is-en .crm-flag-en { opacity: 1; }
.crm-lang-btn.is-en .crm-flag-ua { opacity: 0; }

/* Переключатель валюты — тот же тумблер, в кружке символ валюты */
.crm-cur-knob { background: var(--color-primary-600); }
.crm-cur {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: .8rem; transition: opacity .16s;
}

/* --- Страницы 2FA --- */
.crm-2fa-steps { list-style: decimal; padding-left: 1.2rem; margin: 0 0 .75rem; display: grid; gap: .4rem; }
.crm-2fa-qr { display: flex; justify-content: center; margin: .5rem 0 1rem; }
.crm-2fa-qr img { background: #fff; border-radius: .5rem; padding: .25rem; }
.crm-2fa-secret { font-size: .85rem; letter-spacing: .05em; word-break: break-all; }
.crm-2fa-input {
    width: 100%; font-size: 1.4rem; letter-spacing: .3em; text-align: center; padding: .6rem;
    border: 1px solid var(--color-base-300); border-radius: .5rem; background: transparent;
}
.crm-2fa-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.crm-2fa-codes code {
    text-align: center; padding: .4rem; border: 1px dashed var(--color-base-300); border-radius: .4rem;
    font-size: 1rem; letter-spacing: .1em;
}

/* --- Дашборд --- */
.crm-dash { display: flex; flex-direction: column; gap: 1.5rem; }
.crm-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.crm-grid-kpi { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
@media (min-width: 900px) {
    .crm-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm-grid-2-1 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
@media (min-width: 1300px) {
    .crm-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .crm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.crm-kpi { display: flex; align-items: center; gap: 1rem; }
.crm-kpi-icon {
    font-size: 2rem !important; color: var(--color-primary-600);
    background: color-mix(in oklch, var(--color-primary-500) 14%, transparent);
    border-radius: .6rem; padding: .6rem;
}
.crm-kpi-value { font-size: 1.75rem; font-weight: 600; line-height: 1.2; }
.crm-small { font-size: .75rem; }
.crm-chart-lg { position: relative; height: 280px; }
.crm-chart-md { position: relative; height: 240px; }
.crm-chart-sm { position: relative; height: 200px; width: 200px; flex: none; }
.crm-doughnut { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

/* Легенда круговых диаграмм на дашборде */
.crm-legend { display: flex; flex-direction: column; gap: .5rem; }
.crm-legend span.dot {
    display: inline-block; width: .75rem; height: .75rem; border-radius: 3px; margin-right: .5rem;
    vertical-align: -1px;
}

/* --- Заказы: цветные статусы, фильтр-чипы, источник, лента общения --- */
.crm-st {
    display: inline-flex; align-items: center; padding: .2rem .55rem; border-radius: .375rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    white-space: nowrap; color: var(--st); background: color-mix(in oklab, var(--st) 14%, transparent);
}
.crm-st-teal { --st: #0d9488; } .crm-st-blue { --st: #2563eb; } .crm-st-amber { --st: #b45309; }
.crm-st-orange { --st: #c2410c; } .crm-st-indigo { --st: #4f46e5; } .crm-st-violet { --st: #7c3aed; }
.crm-st-green { --st: #15803d; } .crm-st-red { --st: #dc2626; } .crm-st-gray { --st: #64748b; }
.dark .crm-st-teal { --st: #2dd4bf; } .dark .crm-st-blue { --st: #60a5fa; } .dark .crm-st-amber { --st: #fbbf24; }
.dark .crm-st-orange { --st: #fb923c; } .dark .crm-st-indigo { --st: #818cf8; } .dark .crm-st-violet { --st: #a78bfa; }
.dark .crm-st-green { --st: #4ade80; } .dark .crm-st-red { --st: #f87171; } .dark .crm-st-gray { --st: #94a3b8; }

.crm-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.crm-chip {
    --st: #64748b; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem;
    border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; color: var(--st); border: 1px solid transparent;
    background: color-mix(in oklab, var(--st) 12%, transparent); transition: border-color .15s;
}
.crm-chip:hover { border-color: color-mix(in oklab, var(--st) 50%, transparent); }
.crm-chip.is-active { border-color: var(--st); box-shadow: 0 0 0 1px var(--st) inset; }
.crm-chip-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--st); }

.crm-sub { font-size: .75rem; color: var(--color-base-400); margin-top: .1rem; }
.crm-link { color: var(--color-primary-600); font-weight: 500; }
.dark .crm-link { color: var(--color-primary-400); }
.crm-item { white-space: nowrap; }
.crm-src { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.crm-src-i {
    display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem;
    border-radius: 50%; color: #fff; font-size: .85rem !important;
}
.crm-fiscal { font-size: .8rem; }
.crm-fiscal-green { color: #15803d; } .crm-fiscal-red { color: #dc2626; }
.crm-fiscal-gray { color: var(--color-base-500); }
.dark .crm-fiscal-green { color: #4ade80; } .dark .crm-fiscal-red { color: #f87171; }

.crm-money td { padding: .2rem 1.25rem .2rem 0; }

.crm-chat { display: flex; flex-direction: column; gap: .9rem; max-width: 46rem; }
.crm-chat-who { font-weight: 600; font-size: .8rem; margin-bottom: .25rem; }
.crm-chat-bubble {
    display: inline-block; padding: .6rem .85rem; border-radius: .75rem; border-top-left-radius: .2rem;
    background: var(--color-primary-700); color: #fff; font-size: .85rem; line-height: 1.4;
}
.crm-chat-meta { font-size: .7rem; color: var(--color-base-400); margin-top: .25rem; }
.crm-chat-tag { font-weight: 600; }

/* --- Компактные формы (карточки сборок, заказов, клиентов) --- */
/* Поля, сгруппированные в одну строку в fieldsets, — рядом, а не друг под другом */
@media (min-width: 1024px) {
    .form-rows .field-row:has(> .field-line + .field-line) { display: flex; }
    .form-rows .field-row > .field-line + .field-line { border-left: 1px dashed var(--color-base-200); }
    .dark .form-rows .field-row > .field-line + .field-line { border-left-color: var(--color-base-800); }
    .form-rows .field-row:has(> .field-line + .field-line) > .field-line { flex: 1 1 0; min-width: 0; }
    /* колонка подписей уже: 14rem → 9.5rem */
    .form-rows .field-line > div:first-child { min-width: 9.5rem !important; width: 9.5rem !important;
        height: 32px !important; line-height: 32px !important; }
}
.form-rows .field-line { min-height: 0 !important; padding-top: .3rem !important; padding-bottom: .3rem !important; }
.form-rows .field-line input:not([type=checkbox]):not([type=radio]),
.form-rows .field-line select,
.form-rows .field-line .select2-selection { padding-top: .3rem !important; padding-bottom: .3rem !important;
    min-height: 32px !important; }
.form-rows .field-line .leading-relaxed.mt-2 { margin-top: .15rem !important; line-height: 1.3 !important; }
.form-rows .field-line textarea { min-height: 4.5rem; }

/* Заголовки секций и вкладок */
fieldset.module > h2, [data-inline-type] h2 { height: 30px !important; margin-bottom: .4rem !important; }
fieldset.module { margin-bottom: 1rem !important; }

/* Позиции спецификации (inline-таблицы) */
[data-inline-type] { margin-bottom: .25rem !important; }
[data-inline-type] fieldset.module { margin-bottom: .5rem !important; }
[data-inline-type] td.field-tabular { padding-top: .3rem !important; padding-bottom: .3rem !important;
    min-height: 0 !important; }
[data-inline-type] thead th { padding-top: .35rem !important; padding-bottom: .35rem !important; }
/* строка-подпись над каждой позицией дублирует выбранную деталь — прячем на широком экране */
@media (min-width: 1024px) {
    [data-inline-type] tbody.original > tr:first-child p.group\/title { display: none; }
}
[data-inline-type] .form-actions > td > div { padding-top: .35rem !important; padding-bottom: .35rem !important; }
[data-inline-type] .add-row > span:first-child { height: 28px !important; }
/* Спецификация: заголовок группы дублирует шапку таблицы — прячем; плотнее между группами */
@media (min-width: 1024px) {
    [data-inline-type="tabular"] th.column-quantity,
    [data-inline-type="tabular"] td.field-quantity { width: 6.5rem; }
    [data-inline-type="tabular"] td.field-quantity input { max-width: 5.5rem; }
}
div:has(> [data-inline-type]) { gap: .6rem !important; row-gap: .6rem !important; }
[data-inline-type] .tabular, [data-inline-type] fieldset.module { margin: 0 !important; }
/* Одинаковые колонки во всех таблицах спецификации — цифры стоят друг под другом */
@media (min-width: 1024px) {
    [data-inline-type="tabular"] table.formset:has(th.column-cost_price_display) thead th:first-child { width: 58%; }
    [data-inline-type="tabular"] th.column-cost_price_display,
    [data-inline-type="tabular"] th.column-line_cost_display { width: 12rem; }
    [data-inline-type="tabular"] thead th:last-child:not([class*="column-"]) { width: 3rem; }
}
[data-inline-type] td textarea { height: 4.5rem; min-height: 2.5rem; }

/* Сворачиваемые блоки спецификации: заголовок со стрелкой и счётчиком */
fieldset.collapse { visibility: visible !important; }
[data-inline-type] details > summary { list-style: none; cursor: pointer; }
[data-inline-type] details > summary::-webkit-details-marker { display: none; }
[data-inline-type] details > summary h2 { margin-bottom: 0 !important; user-select: none; }
[data-inline-type] details[open] > summary h2 { margin-bottom: .4rem !important; }
[data-inline-type] details > summary:hover h2 { color: var(--color-primary-600); }
.crm-spec-tools { display: flex; gap: 1rem; justify-content: flex-end; margin: .25rem 0 .4rem; font-size: .8rem; }
.crm-spec-tools button { color: var(--color-primary-600); font-weight: 500; cursor: pointer; background: none; border: 0; }
.dark .crm-spec-tools button { color: var(--color-primary-400); }

/* Капча на странице входа (templates/crm/captcha_widget.html) */
.crm-captcha { display: flex; flex-direction: column; gap: .5rem; }
.crm-captcha-row { display: flex; align-items: center; gap: .5rem; }
.crm-captcha-img { border-radius: .375rem; border: 1px solid var(--color-base-300); background: #fff; }
.crm-captcha-refresh { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border-radius: .375rem; border: 1px solid var(--color-base-300); opacity: .8; cursor: pointer; }
.crm-captcha-refresh:hover { opacity: 1; color: var(--color-primary-600); }
.dark .crm-captcha-img, .dark .crm-captcha-refresh { border-color: var(--color-base-700); }

/* Телефон и планшет (< 1024px): строки позиций (tabular inline) — столбиком, с подписью над полем.
   Подписи (data-label) ставит static/crm/admin.js из заголовков таблицы, которые unfold прячет на узком экране. */
@media (max-width: 1023.98px) {
    [data-inline-type="tabular"] .formset-wrapper { overflow-x: visible; }
    [data-inline-type="tabular"] table.formset,
    [data-inline-type="tabular"] table.formset > tbody:not(.empty-form) { display: block; width: 100%; }
    [data-inline-type="tabular"] table.formset > tbody:not(.empty-form) {
        border-bottom: 1px solid var(--color-base-200); padding-bottom: .5rem;
    }
    .dark [data-inline-type="tabular"] table.formset > tbody:not(.empty-form) { border-color: var(--color-base-800); }
    [data-inline-type="tabular"] table.formset > tbody:last-child { border-bottom: 0; }
    [data-inline-type="tabular"] table.formset > tbody > tr:not(.hidden) { display: block; width: 100%; }
    [data-inline-type="tabular"] table.formset > tbody > tr:not(.hidden) > td {
        display: block; width: 100% !important; min-height: 0; border-bottom: 0;
        padding: .375rem .75rem !important;
    }
    [data-inline-type="tabular"] table.formset > tbody > tr > td.hidden\! { display: none !important; }
    [data-inline-type="tabular"] tr.form-row > td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: .25rem;
        font-size: .75rem; font-weight: 600; color: var(--color-base-500);
    }
    [data-inline-type="tabular"] tr.form-row > td.delete { text-align: right; }
    [data-inline-type="tabular"] tr.form-row textarea { width: 100%; }
    /* длинные названия в списках не раздвигают поле шире экрана */
    [data-inline-type="tabular"] tr.form-row > td div { min-width: 0; max-width: 100%; }
    [data-inline-type="tabular"] tr.form-row > td select { min-width: 0; max-width: 100%; width: 100%;
        text-overflow: ellipsis; }
    [data-inline-type="tabular"] tr.form-row > td .related-widget-wrapper { flex-wrap: nowrap; }
    [data-inline-type="tabular"] tr.form-row > td .related-widget-wrapper > *:first-child { flex: 1 1 auto; }
}

/* ---------- Всплывающий календарь для полей даты (static/crm/admin.js) ---------- */
.crm-dp {
    position: absolute; z-index: 1000; width: 19.5rem; padding: .875rem .875rem .75rem;
    border-radius: .75rem; border: 1px solid var(--color-base-200); background: #fff; color: var(--color-base-900);
    box-shadow: 0 12px 32px rgb(0 0 0 / .18); user-select: none;
}
.dark .crm-dp { background: var(--color-base-900); border-color: var(--color-base-700); color: var(--color-base-100);
    box-shadow: 0 12px 32px rgb(0 0 0 / .55); }
.crm-dp-head { display: flex; align-items: center; justify-content: space-between; margin: 0 .25rem .5rem; }
.crm-dp-title { font-weight: 600; font-size: .95rem; }
.crm-dp-arrows { display: flex; gap: .25rem; }
.crm-dp-arrows button, .crm-cal-arrow {
    display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
    border-radius: .375rem; color: var(--color-base-500); cursor: pointer;
}
.crm-dp-arrows button:hover, .crm-cal-arrow:hover { background: var(--color-base-100); color: var(--color-base-900); }
.dark .crm-dp-arrows button:hover, .dark .crm-cal-arrow:hover { background: var(--color-base-800); color: #fff; }
.crm-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .125rem; text-align: center; }
.crm-dp-wd { font-size: .75rem; font-weight: 600; padding: .375rem 0; color: var(--color-base-600); }
.dark .crm-dp-wd { color: var(--color-base-300); }
.crm-dp-day {
    width: 2.375rem; height: 2.375rem; margin: 0 auto; border-radius: 9999px; font-size: .875rem;
    cursor: pointer; transition: background-color .1s;
}
.crm-dp-day:hover { background: var(--color-base-100); }
.dark .crm-dp-day:hover { background: var(--color-base-800); }
.crm-dp-day.is-out { color: var(--color-base-400); }
.dark .crm-dp-day.is-out { color: var(--color-base-500); }
.crm-dp-day.is-selected { box-shadow: inset 0 0 0 2px var(--color-primary-500); font-weight: 600; }
.crm-dp-day.is-today, .crm-dp-day.is-today:hover { background: var(--color-primary-600); color: #fff; font-weight: 600; }
.crm-dp-day.is-today.is-selected { box-shadow: 0 0 0 2px var(--color-primary-300); }
.crm-dp-foot { display: flex; justify-content: space-between; gap: .5rem; margin-top: .625rem; padding-top: .625rem;
    border-top: 1px solid var(--color-base-200); }
.dark .crm-dp-foot { border-color: var(--color-base-700); }
.crm-dp-foot button { padding: .375rem .75rem; border-radius: .375rem; font-size: .8125rem; font-weight: 500; cursor: pointer;
    border: 1px solid var(--color-base-200); }
.dark .crm-dp-foot button { border-color: var(--color-base-700); }
.crm-dp-foot button:hover { border-color: var(--color-primary-500); color: var(--color-primary-600); }
.dark .crm-dp-foot button:hover { color: var(--color-primary-400); }
input.vDateField { cursor: pointer; }

/* ---------- Календар (planner/templates/planner/calendar.html) ---------- */
.crm-cal { display: grid; gap: 1.5rem; }
@media (min-width: 1280px) {
    .crm-cal { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
    .crm-cal-main, .crm-cal-agenda { grid-column: 1; }
    .crm-cal-side { grid-column: 2; grid-row: 1 / span 2; }
}
.crm-cal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
    margin-bottom: 1rem; }
.crm-cal-title { font-size: 1.375rem; font-weight: 600; color: var(--color-base-900); }
.dark .crm-cal-title { color: #fff; }
.crm-cal-title::first-letter { text-transform: uppercase; }
.crm-cal-nav { display: flex; align-items: center; gap: .375rem; }
.crm-cal-btn, .crm-cal-add {
    display: inline-flex; align-items: center; gap: .25rem; height: 2.25rem; padding: 0 .875rem; border-radius: .5rem;
    font-size: .875rem; font-weight: 500; border: 1px solid var(--color-base-200);
}
.dark .crm-cal-btn { border-color: var(--color-base-700); }
.crm-cal-btn:hover { border-color: var(--color-primary-500); }
.crm-cal-add { background: var(--color-primary-600); border-color: var(--color-primary-600); color: #fff; margin-left: .5rem; }
.crm-cal-add:hover { background: var(--color-primary-700); }
.crm-cal-add .material-symbols-outlined { font-size: 1.125rem; }

.crm-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-radius: .75rem; overflow: hidden;
    border: 1px solid var(--color-base-200); background: #fff; }
.dark .crm-cal-grid { border-color: var(--color-base-800); background: var(--color-base-900); }
.crm-cal-wd { padding: .5rem; text-align: center; font-size: .75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .03em; color: var(--color-base-500); border-bottom: 1px solid var(--color-base-200); }
.dark .crm-cal-wd { border-color: var(--color-base-800); color: var(--color-base-400); }
.crm-cal-day { position: relative; min-height: 7.25rem; padding: .375rem; display: flex; flex-direction: column; gap: .25rem;
    border-right: 1px solid var(--color-base-100); border-bottom: 1px solid var(--color-base-100); min-width: 0; }
.dark .crm-cal-day { border-color: var(--color-base-800); }
.crm-cal-day:nth-child(7n) { border-right: 0; }
.crm-cal-day.is-weekend { background: var(--color-base-50); }
.dark .crm-cal-day.is-weekend { background: rgb(255 255 255 / .02); }
.crm-cal-day.is-out > * { opacity: .45; }
.crm-cal-day-top { display: flex; align-items: center; justify-content: space-between; }
.crm-cal-num { display: inline-flex; align-items: center; justify-content: center; width: 1.875rem; height: 1.875rem;
    border-radius: 9999px; font-size: .875rem; font-weight: 500; }
a.crm-cal-num:hover { background: var(--color-base-100); }
.dark a.crm-cal-num:hover { background: var(--color-base-800); }
.crm-cal-day.is-today .crm-cal-num { background: var(--color-primary-600); color: #fff; font-weight: 600; }
.crm-cal-plus { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
    border-radius: 9999px; color: var(--color-base-400); opacity: 0; transition: opacity .1s; }
.crm-cal-plus .material-symbols-outlined { font-size: 1.125rem; }
.crm-cal-day:hover .crm-cal-plus, .crm-cal-ag-date .crm-cal-plus { opacity: 1; }
.crm-cal-plus:hover { background: var(--color-primary-600); color: #fff; }
.crm-cal-entries { display: flex; flex-direction: column; gap: .1875rem; min-width: 0; }

/* Цвета видов записей */
.crm-cal-reminder { --k: #d97706; }
.crm-cal-event { --k: #2563eb; }
.crm-cal-deadline { --k: #e11d48; }
.crm-cal-delivery { --k: #7c3aed; }
.dark .crm-cal-reminder { --k: #fbbf24; }
.dark .crm-cal-event { --k: #60a5fa; }
.dark .crm-cal-deadline { --k: #fb7185; }
.dark .crm-cal-delivery { --k: #a78bfa; }
.crm-cal-e { display: flex; align-items: center; gap: .25rem; min-width: 0; padding: .125rem .375rem; border-radius: .375rem;
    font-size: .75rem; line-height: 1.25rem; color: var(--k); background: color-mix(in srgb, var(--k) 12%, transparent); }
.crm-cal-e:hover { background: color-mix(in srgb, var(--k) 22%, transparent); }
.crm-cal-e .material-symbols-outlined { font-size: .875rem; flex: none; }
.crm-cal-e b { font-weight: 600; flex: none; }
.crm-cal-e-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-base-700); }
.dark .crm-cal-e-t { color: var(--color-base-200); }
.crm-cal-e.is-done, .crm-cal-row.is-done { opacity: .5; }
.crm-cal-e.is-done .crm-cal-e-t, .crm-cal-row.is-done .crm-cal-row-title { text-decoration: line-through; }
.crm-cal-more { font-size: .75rem; padding-left: .375rem; color: var(--color-base-500); }
.crm-cal-more:hover { color: var(--color-primary-600); }
.crm-cal-dots { display: none; }

.crm-cal-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin: .75rem .25rem 0; font-size: .8125rem;
    color: var(--color-base-500); }
.crm-cal-legend > span { display: inline-flex; align-items: center; gap: .25rem; }
.crm-cal-legend .material-symbols-outlined { font-size: 1rem; color: var(--k); }

.crm-cal-agenda, .crm-cal-side { padding: 1rem; border-radius: .75rem; border: 1px solid var(--color-base-200); }
.dark .crm-cal-agenda, .dark .crm-cal-side { border-color: var(--color-base-800); }
.crm-cal-agenda h3, .crm-cal-side h3 { display: flex; align-items: center; gap: .375rem; margin-bottom: .5rem;
    font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--color-base-500); }
.crm-cal-side h3:not(:first-child) { margin-top: 1.25rem; }
h3.crm-cal-overdue-h { color: #e11d48; }
.crm-cal-overdue-h .material-symbols-outlined { font-size: 1.125rem; }
.crm-cal-ag-day { padding: .375rem 0; scroll-margin-top: 5rem; }
.crm-cal-ag-day + .crm-cal-ag-day { border-top: 1px solid var(--color-base-100); }
.dark .crm-cal-ag-day + .crm-cal-ag-day { border-color: var(--color-base-800); }
.crm-cal-ag-date, .crm-cal-side-day { display: flex; align-items: center; justify-content: space-between;
    padding: .25rem .5rem; font-size: .8125rem; font-weight: 600; }
.crm-cal-ag-date::first-letter, .crm-cal-side-day::first-letter { text-transform: uppercase; }
.crm-cal-ag-day.is-today .crm-cal-ag-date, .crm-cal-side-day.is-today { color: var(--color-primary-600); }
.dark .crm-cal-ag-day.is-today .crm-cal-ag-date, .dark .crm-cal-side-day.is-today { color: var(--color-primary-400); }
.crm-cal-ag-day:target { background: color-mix(in srgb, var(--color-primary-500) 8%, transparent); border-radius: .5rem; }
.crm-cal-row { display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem; border-radius: .5rem; font-size: .875rem; }
.crm-cal-row:hover { background: var(--color-base-100); }
.dark .crm-cal-row:hover { background: var(--color-base-800); }
.crm-cal-row > .material-symbols-outlined:first-child { font-size: 1.125rem; color: var(--k); flex: none; }
.crm-cal-row-time { flex: none; min-width: 2.75rem; font-variant-numeric: tabular-nums; color: var(--color-base-500); font-size: .8125rem; }
.crm-cal-row-title { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.crm-cal-shared { font-size: 1rem; color: var(--color-base-400); }
.crm-cal-all { display: inline-flex; align-items: center; gap: .375rem; margin-top: 1rem; font-size: .875rem;
    color: var(--color-primary-600); }
.dark .crm-cal-all { color: var(--color-primary-400); }
.crm-cal-all .material-symbols-outlined { font-size: 1.125rem; }
.crm-cal-chip { display: inline-block; padding: .125rem .5rem; border-radius: 9999px; font-size: .75rem; font-weight: 500;
    color: var(--k); background: color-mix(in srgb, var(--k) 12%, transparent); }
.crm-late { color: #e11d48; font-weight: 600; }
.dark .crm-late { color: #fb7185; }

/* Календар на телефоне: в клетках — точки, сами записи — списком «Цей місяць» ниже */
@media (max-width: 767.98px) {
    .crm-cal-day { min-height: 3.25rem; padding: .25rem .125rem; align-items: center; }
    .crm-cal-day-top { justify-content: center; }
    .crm-cal-entries, .crm-cal-day .crm-cal-plus { display: none; }
    .crm-cal-dots { display: flex; gap: 2px; justify-content: center; }
    .crm-cal-dots i { width: 5px; height: 5px; border-radius: 9999px; background: var(--k); }
    .crm-cal-wd { padding: .375rem 0; font-size: .6875rem; }
    .crm-cal-add { margin-left: 0; }
    .crm-cal-title { font-size: 1.125rem; }
}

/* ---------- Вход, 2FA, блокировка (templates/crm/auth_layout.html) ---------- */
.crm-auth { position: relative; display: grid; grid-template-rows: auto 1fr; min-height: 100vh; min-height: 100dvh;
    background: #fff; }
.dark .crm-auth { background: var(--color-base-900); }
.crm-auth-brand {
    position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
    color: #fff; text-align: center; padding: 4.25rem 1.5rem 2.25rem; border-radius: 0 0 1.75rem 1.75rem;
    min-height: clamp(14rem, 38vh, 22rem);
    background:
        radial-gradient(circle at 18% 12%, rgb(255 255 255 / .2), transparent 42%),
        radial-gradient(circle at 85% 95%, rgb(0 0 0 / .22), transparent 50%),
        linear-gradient(140deg, var(--color-primary-500) 0%, var(--color-primary-700) 55%, var(--color-primary-900) 100%);
}
.dark .crm-auth-brand {
    background:
        radial-gradient(circle at 18% 12%, rgb(255 255 255 / .12), transparent 42%),
        radial-gradient(circle at 85% 95%, rgb(0 0 0 / .3), transparent 50%),
        linear-gradient(140deg, var(--color-primary-600) 0%, var(--color-primary-800) 55%, var(--color-primary-950) 100%);
}
/* декоративные кольца */
.crm-auth-brand::before, .crm-auth-brand::after {
    content: ''; position: absolute; border-radius: 9999px; border: 1px solid rgb(255 255 255 / .14); pointer-events: none;
}
.crm-auth-brand::before { width: 22rem; height: 22rem; top: -9rem; right: -7rem; }
.crm-auth-brand::after { width: 30rem; height: 30rem; bottom: -17rem; left: -10rem; border-color: rgb(255 255 255 / .09); }
.crm-auth-brand-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.crm-auth-brand .crm-mark { width: 5rem; height: auto; filter: drop-shadow(0 10px 24px rgb(0 0 0 / .18)); }
.crm-auth-brand-name { font-size: 1.625rem; font-weight: 700; letter-spacing: .02em; line-height: 1.1; }
.crm-auth-brand-sub { font-size: .875rem; color: rgb(255 255 255 / .78); }

.crm-auth-panel { display: flex; justify-content: center; align-items: flex-start; padding: 2rem 1.25rem 3rem; }
.crm-auth-form { width: 100%; max-width: 24rem; }
.crm-auth-logo { display: none; align-items: center; justify-content: center; gap: .75rem; margin-bottom: 2rem; }
.crm-auth-logo .crm-mark { width: 3rem; height: auto; color: var(--color-primary-600); }
.dark .crm-auth-logo .crm-mark { color: var(--color-primary-400); }
.crm-auth-logo-name { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--color-base-900); }
.dark .crm-auth-logo-name { color: #fff; }
.crm-auth-logo-sub { font-size: .8125rem; color: var(--color-base-500); }
.crm-auth-title { text-align: center; font-size: 1.375rem; font-weight: 700; line-height: 1.25; margin-bottom: 1.5rem;
    color: var(--color-primary-700); }
.dark .crm-auth-title { color: var(--color-primary-400); }

.crm-auth-field { margin-bottom: 1.125rem; }
.crm-auth-field > label { display: block; margin-bottom: .375rem; font-size: .8125rem; font-weight: 600;
    color: var(--color-base-700); }
.dark .crm-auth-field > label { color: var(--color-base-200); }
.crm-auth-form input[type=text], .crm-auth-form input[type=password], .crm-auth-form input[type=number] {
    width: 100%; max-width: none; height: 3rem; padding: 0 .9375rem; border-radius: .75rem; font-size: 1rem;
    border: 1px solid transparent; outline: none; box-shadow: none; color: var(--color-base-900);
    background: color-mix(in srgb, var(--color-primary-500) 8%, #fff);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.dark .crm-auth-form input[type=text], .dark .crm-auth-form input[type=password], .dark .crm-auth-form input[type=number] {
    background: var(--color-base-800); color: #fff;
}
.crm-auth-form input[type=text]:focus, .crm-auth-form input[type=password]:focus, .crm-auth-form input[type=number]:focus {
    background: #fff; border-color: var(--color-primary-500); outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary-500) 18%, transparent);
}
.dark .crm-auth-form input[type=text]:focus, .dark .crm-auth-form input[type=password]:focus,
.dark .crm-auth-form input[type=number]:focus { background: var(--color-base-800); }
.crm-auth-pw { position: relative; }
.crm-auth-pw input { padding-right: 3.25rem !important; }
.crm-auth-eye { position: absolute; top: 50%; right: .375rem; transform: translateY(-50%); width: 2.5rem; height: 2.5rem;
    display: flex; align-items: center; justify-content: center; border-radius: .5rem; color: var(--color-base-400); cursor: pointer; }
.crm-auth-eye:hover { color: var(--color-primary-600); }
.crm-auth-eye .material-symbols-outlined { font-size: 1.25rem; }
.crm-auth-form .errorlist { margin-top: .375rem; font-size: .8125rem; color: #dc2626; list-style: none; padding: 0; }
.dark .crm-auth-form .errorlist { color: #f87171; }
.crm-auth-error { display: flex; gap: .625rem; align-items: flex-start; margin-bottom: 1.25rem; padding: .75rem .875rem;
    border-radius: .75rem; font-size: .875rem; line-height: 1.35; background: #fef2f2; color: #b91c1c; }
.crm-auth-error .material-symbols-outlined { font-size: 1.25rem; flex: none; }
.dark .crm-auth-error { background: rgb(239 68 68 / .14); color: #fca5a5; }
.crm-auth-submit {
    display: flex; align-items: center; justify-content: center; gap: .375rem; width: 100%; height: 3rem; margin-top: 1.5rem;
    border-radius: .75rem; font-size: 1rem; font-weight: 600; color: #fff; cursor: pointer;
    background: var(--color-primary-600); box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary-600) 32%, transparent);
    transition: background-color .15s, transform .1s;
}
.crm-auth-submit:hover { background: var(--color-primary-700); }
.crm-auth-submit:active { transform: translateY(1px); }
.crm-auth-submit .material-symbols-outlined { font-size: 1.125rem; transition: transform .15s; }
.crm-auth-submit:hover .material-symbols-outlined { transform: translateX(3px); }
.crm-auth-form .crm-captcha-img { border-radius: .625rem; }
.crm-auth-form .crm-captcha-refresh { width: 3rem; height: 3rem; border-radius: .75rem; }

/* тема и язык — справа сверху, поверх цветной панели */
.crm-auth-switches { position: absolute; top: 1rem; right: 1rem; z-index: 20; display: flex; align-items: center; gap: .875rem;
    color: #fff; }
.crm-auth-switches a { color: #fff; }
.crm-auth-switches nav a { color: inherit; }
.crm-auth-switches nav { color: var(--color-base-700); }
.dark .crm-auth-switches nav { color: var(--color-base-200); }
.crm-auth-switches .crm-lang-label { color: rgb(255 255 255 / .6); }
.crm-auth-switches .crm-lang-btn:not(.is-en) .crm-lang-ua, .crm-auth-switches .crm-lang-btn.is-en .crm-lang-en { color: #fff; }
.crm-auth-switches .crm-lang-track { background: rgb(255 255 255 / .18); border-color: rgb(255 255 255 / .35); }

@media (min-width: 1024px) {
    .crm-auth { grid-template-columns: minmax(30rem, 1fr) 1fr; grid-template-rows: 1fr; }
    .crm-auth-panel { order: 1; align-items: center; padding: 3rem 2.5rem; }
    .crm-auth-brand { order: 2; border-radius: 0; padding: 3rem; }
    .crm-auth-brand .crm-mark { width: 11rem; }
    .crm-auth-brand-name { display: none; }
    .crm-auth-brand-sub { font-size: 1rem; margin-top: .75rem; letter-spacing: .02em; }
    .crm-auth-brand::before { width: 36rem; height: 36rem; top: -14rem; right: -12rem; }
    .crm-auth-brand::after { width: 44rem; height: 44rem; bottom: -24rem; left: -14rem; }
    .crm-auth-logo { display: flex; }
    .crm-auth-title { font-size: 1.5rem; margin-bottom: 1.75rem; }
}

/* Телефон: поля 16px — iPhone не увеличивает страницу при нажатии на поле */
@media (max-width: 767.98px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; }
}

/* ---------- Звуки CRM: кнопка, панель, уведомления (templates/crm/sound_panel.html) ---------- */
.crm-sound { --crm-bar: 0px; }
.crm-fab {
    position: fixed; right: 1.25rem; bottom: calc(var(--crm-bar) + 1.25rem); z-index: 45;
    width: 3rem; height: 3rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
    color: #fff; background: var(--color-primary-600); cursor: pointer;
    box-shadow: 0 8px 22px rgb(0 0 0 / .22), 0 0 0 4px color-mix(in srgb, var(--color-primary-600) 14%, transparent);
    transition: background-color .15s, transform .15s;
}
.crm-fab:hover { background: var(--color-primary-700); transform: translateY(-2px); }
.crm-fab.is-off { background: var(--color-base-500); box-shadow: 0 8px 22px rgb(0 0 0 / .22); }
.crm-fab.is-open { transform: none; }
.crm-fab .material-symbols-outlined { font-size: 1.375rem; }

.crm-sound-panel {
    position: fixed; right: 1.25rem; bottom: calc(var(--crm-bar) + 5rem); z-index: 46;
    width: min(23rem, calc(100vw - 2rem)); max-height: calc(100vh - var(--crm-bar) - 7rem); overflow-y: auto;
    padding: .875rem 1rem 1rem; border-radius: 1rem; background: #fff; color: var(--color-base-800);
    border: 1px solid var(--color-base-200); box-shadow: 0 18px 44px rgb(0 0 0 / .2);
}
.dark .crm-sound-panel { background: var(--color-base-900); color: var(--color-base-100); border-color: var(--color-base-700);
    box-shadow: 0 18px 44px rgb(0 0 0 / .55); }
.crm-sound-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; font-size: .9375rem; }
.crm-sound-head > .material-symbols-outlined { color: var(--color-primary-600); }
.crm-sound-x { margin-left: auto; width: 2rem; height: 2rem; border-radius: .5rem; display: flex; align-items: center;
    justify-content: center; color: var(--color-base-400); cursor: pointer; }
.crm-sound-x:hover { background: var(--color-base-100); color: var(--color-base-700); }
.dark .crm-sound-x:hover { background: var(--color-base-800); color: #fff; }
.crm-sound-master { display: flex; align-items: center; justify-content: space-between; padding: .625rem .75rem;
    border-radius: .75rem; background: var(--color-base-50); font-weight: 600; cursor: pointer; }
.dark .crm-sound-master { background: var(--color-base-800); }
.crm-sound-vol { display: flex; align-items: center; gap: .625rem; padding: .75rem .25rem .25rem; color: var(--color-base-500); }
.crm-sound-vol input[type=range] { flex: 1; accent-color: var(--color-primary-600); }
.crm-sound-vol-v { min-width: 2.75rem; text-align: right; font-variant-numeric: tabular-nums; font-size: .8125rem; }
.crm-sound-sub { margin: .75rem 0 .25rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--color-base-500); }
.crm-sound-ev { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto auto; align-items: center; gap: .625rem;
    padding: .5rem .125rem; border-top: 1px solid var(--color-base-100); }
.dark .crm-sound-ev { border-color: var(--color-base-800); }
.crm-sound-ev b { display: block; font-weight: 600; font-size: .875rem; }
.crm-sound-ev small { display: block; font-size: .75rem; line-height: 1.25; color: var(--color-base-500); }
.crm-sound-ev-i { font-size: 1.375rem; color: var(--k); }
.crm-snd-reminder { --k: #d97706; } .crm-snd-success { --k: #16a34a; } .crm-snd-error { --k: #dc2626; }
.crm-snd-notify { --k: #2563eb; } .crm-snd-click { --k: var(--color-base-500); }
.dark .crm-snd-reminder { --k: #fbbf24; } .dark .crm-snd-success { --k: #4ade80; } .dark .crm-snd-error { --k: #f87171; }
.dark .crm-snd-notify { --k: #60a5fa; }
.crm-sound-test { width: 2rem; height: 2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-base-200); color: var(--color-base-500); cursor: pointer; }
.dark .crm-sound-test { border-color: var(--color-base-700); }
.crm-sound-test:hover { color: #fff; background: var(--color-primary-600); border-color: var(--color-primary-600); }
.crm-sound-test .material-symbols-outlined { font-size: 1.25rem; }
.crm-sound-panel.is-off .crm-sound-ev, .crm-sound-panel.is-off .crm-sound-vol { opacity: .45; }
.crm-sound-note { margin-top: .625rem; font-size: .75rem; line-height: 1.35; color: var(--color-base-500); }
.crm-sound-note + .crm-sound-note { margin-top: .25rem; }

/* переключатель */
.crm-switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 2.375rem; height: 1.375rem;
    border-radius: 9999px; background: var(--color-base-300); cursor: pointer; transition: background-color .15s; }
.dark .crm-switch { background: var(--color-base-600); }
.crm-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: calc(1.375rem - 6px); height: calc(1.375rem - 6px);
    border-radius: 9999px; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .15s; }
.crm-switch:checked, .dark .crm-switch:checked { background: var(--color-primary-600); }
.crm-switch:checked::after { transform: translateX(1rem); }
.crm-switch:disabled { opacity: .5; cursor: default; }
.crm-switch:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }

/* всплывающие напоминания */
.crm-toasts { position: fixed; right: 1.25rem; bottom: calc(var(--crm-bar) + 5rem); z-index: 46; display: flex;
    flex-direction: column; gap: .5rem; width: min(22rem, calc(100vw - 2rem)); pointer-events: none; }
.crm-sound-panel:not([hidden]) ~ .crm-toasts { display: none; }
.crm-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: .75rem; padding: .875rem .75rem .875rem 1rem;
    border-radius: .875rem; background: #fff; border: 1px solid var(--color-base-200); border-left: 4px solid var(--k);
    box-shadow: 0 14px 36px rgb(0 0 0 / .2); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.dark .crm-toast { background: var(--color-base-800); border-color: var(--color-base-700); border-left-color: var(--k); }
.crm-toast.is-in { opacity: 1; transform: none; }
.crm-toast-i { color: var(--k); font-size: 1.5rem; }
.crm-toast-body { flex: 1; min-width: 0; }
.crm-toast-kind { font-size: .75rem; font-weight: 600; color: var(--k); }
.crm-toast-title { margin-top: .125rem; font-size: .9375rem; font-weight: 600; color: var(--color-base-900); overflow-wrap: anywhere; }
.dark .crm-toast-title { color: #fff; }
.crm-toast-open { display: inline-block; margin-top: .375rem; font-size: .8125rem; font-weight: 600; color: var(--color-primary-600); }
.dark .crm-toast-open { color: var(--color-primary-400); }
.crm-toast-x { width: 1.75rem; height: 1.75rem; border-radius: .5rem; display: flex; align-items: center; justify-content: center;
    color: var(--color-base-400); cursor: pointer; }
.crm-toast-x:hover { color: var(--color-base-700); background: var(--color-base-100); }
.dark .crm-toast-x:hover { color: #fff; background: var(--color-base-700); }
.crm-toast-x .material-symbols-outlined { font-size: 1.125rem; }

@media (max-width: 1023.98px) {
    /* на телефоне кнопка меньше; внизу страницы место, чтобы она не закрывала последние кнопки */
    .crm-fab { right: 1rem; bottom: 1rem; width: 2.875rem; height: 2.875rem; }
    .crm-sound-panel, .crm-toasts { right: 1rem; bottom: 4.5rem; }
    body:has(#crm-sound) #main { padding-bottom: 4.5rem; }
}