/**
 * Unified Component Library
 * ONE variant per component type
 * Uses CSS variables from /css/dynamic.css
 * Date: 2026-02-06
 *
 * This file provides standardized, reusable components that use CSS variables
 * for easy theming. All components follow the same design patterns.
 */

/* ==================== BUTTONS ==================== */

/* ===== Buttons — base .btn (перенесено из base.css, TD-64 W13.1) =====
   Канон кнопки. Варианты-цвета (.btn-primary и т.д.) генерируются в /css/dynamic.css (тема). */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: var(--button-gap, 10px);
    min-height: var(--button-min-height, 72px);
    min-width: var(--button-min-height, 72px);
    padding: var(--button-padding-y, 10px) var(--button-padding-x-right, 35px) var(--button-padding-y, 10px) var(--button-padding-x-left, 35px);
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

/* Confirm — semantic confirm action (own tokens, editable independently from success) */
.btn-confirm,
.ui-button--confirm {
    background-color: var(--button-confirm-background, var(--button-success-background));
    color: var(--button-confirm-text, var(--button-primary-text, var(--color-white, #fff)));
    border: var(--border-width-thin) solid var(--button-confirm-border, transparent);
    box-shadow: var(--button-confirm-shadow, none);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition-fast);
    font-weight: var(--font-weight-semibold);
}
.btn-confirm:hover,
.ui-button--confirm:hover {
    background-color: var(--button-confirm-hover, var(--button-success-hover));
    color: var(--button-confirm-hover-text, var(--color-white, #fff));
    border-color: var(--button-confirm-hover-border, transparent);
    box-shadow: var(--button-confirm-hover-shadow, none);
}
.btn-confirm:active,
.ui-button--confirm:active {
    background-color: var(--button-confirm-active, var(--button-success-hover));
    color: var(--button-confirm-active-text, var(--color-white, #fff));
    border-color: var(--button-confirm-active-border, transparent);
    box-shadow: var(--button-confirm-active-shadow, none);
}

/* Unconfirm — semantic revert action */
.btn-unconfirm,
.ui-button--unconfirm {
    background-color: var(--button-unconfirm-background, var(--button-warning-background));
    color: var(--button-unconfirm-text, var(--button-primary-text, var(--color-white, #fff)));
    border: var(--border-width-thin) solid var(--button-unconfirm-border, transparent);
    box-shadow: var(--button-unconfirm-shadow, none);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition-fast);
    font-weight: var(--font-weight-semibold);
}
.btn-unconfirm:hover,
.ui-button--unconfirm:hover {
    background-color: var(--button-unconfirm-hover, var(--button-warning-hover));
    color: var(--button-unconfirm-hover-text, var(--color-white, #fff));
    border-color: var(--button-unconfirm-hover-border, transparent);
    box-shadow: var(--button-unconfirm-hover-shadow, none);
}
.btn-unconfirm:active,
.ui-button--unconfirm:active {
    background-color: var(--button-unconfirm-active, var(--button-warning-hover));
    color: var(--button-unconfirm-active-text, var(--color-white, #fff));
    border-color: var(--button-unconfirm-active-border, transparent);
    box-shadow: var(--button-unconfirm-active-shadow, none);
}

/* Disabled state modifier — use with btn btn-secondary btn--disabled */
.btn--disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* Native disabled state — покрывает <button disabled> (JS/DTO ui_button disabled:true без href).
   Общий канон вместо page-CSS дублей (TD-61 D1). */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* a11y: ссылка-кнопка в disabled-состоянии (href + aria-disabled) не кликабельна (TD-64 W13.1) */
.btn[aria-disabled="true"],
.header-btn[aria-disabled="true"] {
    pointer-events: none;
}

/* Button size modifiers */
.btn-sm {
    min-height: unset;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--button-font-size-sm);
}

.btn-lg {
    /* large на шаг выше дефолта (--button-min-height): иерархия sm < md(дефолт) < lg.
       Раньше .btn-lg наследовал базовый min-height → визуально совпадал с дефолтом (TD-63). */
    min-height: calc(var(--button-min-height, 72px) + var(--spacing-sm, 8px));
    padding: var(--button-padding-lg);
    font-size: var(--button-font-size-lg);
}

/* Кнопка на swagger-card (library-страницы): светлый фон карточки + акцентный текст,
   без рамки. Консолидация 5 идентичных page-CSS правил `.swagger-card .btn`
   (TD-61 P-C — доработка > кастом). Применять как companion: class="btn ... btn-on-swagger-card". */
.btn-on-swagger-card {
    background: var(--color-card-background);
    color: var(--color-hero-gradient-start);
    border: none;
}

/* Responsive layout-утилита кнопки (TD-61 P-D — консолидация page-CSS @media-копий C1).
   Mobile-first по канону grid.css (docs/architecture/responsive-breakpoints.md):
   базовое состояние = мобильное (full-width), на ≥768px (md) кнопка возвращается
   к штатной ширине. Применять как companion: class="btn ... btn-full-mobile". */
.btn-full-mobile {
    width: 100%;
}

@media (min-width: 768px) {
    .btn-full-mobile {
        width: auto;
    }
}

/* .form-actions .btn — компаунд-канон (TD-61 P-D). Консолидация 3 идентичных page-CSS копий
   (admin-settings.css, admin-styles.css, admin-translations-edit-key.css — единственные,
   где `.form-actions` реально в markup; остальные ~18 page-CSS дублей были dead CSS
   на _form_icon_buttons и удалены без замены). Компаунд-в-канон вместо companion-класса
   на markup — единый селектор безопаснее точечной правки 3 шаблонов, .form-actions уже
   централизован (флекс-колонка на мобиле → row+auto-width на ≥768px). */
.form-actions .btn {
    width: 100%;
}

@media (min-width: 768px) {
    .form-actions .btn {
        width: auto;
    }
}

/* .guide-nav-row .btn — компаунд-канон (TD-61 P-D). Консолидация ~29 page-CSS копий
   (9 в скоупе P-D + guide/howto ×20). ВАЖНО: это НЕ responsive-утилита — браузер-проверка
   (2026-07-08, guide/communications и guide/expenses) подтвердила flex:1 на ВСЕХ ширинах
   (350px на 1440px desktop, 158px на 375px mobile) — равное распределение 2 кнопок в ряд —
   текущее намеренное поведение guide-страниц, НЕ mobile-only. Поэтому unconditional
   (без @media-сброса на ≥768: тот дал бы визуальную регрессию десктопа). Поведение 1:1, дедуп. */
.guide-nav-row .btn {
    flex: 1;
    text-align: center;
}

/* Icon Buttons (circular buttons) */
.btn-circle, .ui-button--circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-circle-add, .ui-button--add {
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-link) 100%);
    color: var(--button-primary-text);
}

.btn-circle-edit, .ui-button--edit {
    background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);
    color: var(--button-primary-text);
}

.btn-circle-delete, .ui-button--delete {
    background: linear-gradient(135deg, var(--color-error) 0%, var(--color-danger-dark, #c0392b) 100%);
    color: var(--button-primary-text);
}

.btn-circle-refresh, .ui-button--refresh {
    background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning) 100%);
    color: var(--button-primary-text);
}

.btn-circle:hover, .ui-button--circle:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-button);
}

/* ==================== CARDS ==================== */

.card-unified,
.ui-card {
    background: var(--layout-card-background);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-padding);
    transition: var(--transition-default);
}

.card-unified:hover,
.ui-card:hover {
    box-shadow: var(--shadow-card-hover);
}

/* Базовый .card — перенесён из base.css (TD-61 B-core: component-override лейаута → канон) */
.card {
    background: var(--color-card-background);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-card);
    padding: 20px;
    margin-bottom: 16px;
}

/* Card-варианты геометрии — консолидация page-CSS companion-паддингов (TD-61 P-C).
   Companion-классы (.role-card / .X-form .card / .detail-card …) сохраняют свою
   уникальную специфику (flex/gap), а паддинг задаётся вариантом вместо копий в page-CSS. */
.card--list-item { padding: var(--spacing-md); }        /* 16px — admin-index справочники (list-карточки) */
.card--compact { padding: 14px var(--spacing-md); }     /* 14px 16px — компактные form-страницы */
.card--detail { padding: var(--spacing-lg); }           /* 24px — detail/show-страницы */

.card-header, .ui-card__header {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

/* Flex-бар шапка карточки (заголовок + действия в ряд, с разделителем) — консолидация
   page-CSS конвенции «.card-header как flex-контейнер» (TD-61 P-C). Это СТРУКТУРНЫЙ бар,
   отличный от канон .card-header (заголовок-текст); внутренний заголовок — .card-title. */
.card-header--bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: 12px;
    border-bottom: var(--border-width-thin) solid var(--color-border);
}

.card-body, .ui-card__body {
    color: var(--color-text-secondary);
}

.card-footer, .ui-card__footer {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: var(--border-width-thin) solid var(--color-border-light);
}

/* ==================== ALERTS ==================== */

/* Legacy .alert / .alert-danger — структурная база сырого HTML-alert вне ui_alert
   (class="alert alert-{type}"). Перенесено из base.css (TD-64): все стили alert
   живут одним блоком здесь. Объявлено ДО .ui-alert — каскад сохранён (.ui-alert
   перекрывает общие свойства для элементов ui_alert, несущих оба класса). */
.alert {
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
}

.alert-danger {
    background-color: var(--color-error-bg);
    color: var(--color-error);
}

.alert-unified,
.ui-alert {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
}

/* Контур по типу (TD-64 follow-up #1): полный 1px (--border-width-thin) цветом типа
   --color-{type}. Толстый левый акцент здесь НЕ задаётся — он только у selection-required
   (см. ниже), для ЛЮБОГО типа в его собственном цвете. Новые --border-{type} токены НЕ
   заводим — это был бы дубль поверх --color-{type}. */
.alert-unified-success,
.ui-alert--success {
    background-color: var(--color-success-bg);
    color: var(--color-success);
    border: var(--border-width-thin) solid var(--color-success);
}

.alert-unified-error,
.ui-alert--error {
    background-color: var(--color-error-bg);
    color: var(--color-error);
    border: var(--border-width-thin) solid var(--color-error);
}

.alert-unified-warning,
.ui-alert--warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
    border: var(--border-width-thin) solid var(--color-warning);
}

.alert-unified-info,
.ui-alert--info {
    background-color: var(--color-info-bg);
    color: var(--color-info);
    border: var(--border-width-thin) solid var(--color-info);
}

.alert-unified-icon,
.ui-alert__icon {
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.alert-unified-content,
.ui-alert__content {
    flex: 1;
}

/* ===== Alert component (TD-64) — канон-стили, перенос из pages/receipts.css ===== */

/* Цвета .alert-danger (как и .alert-info/success/warning) генерируются в dynamic.css
   из настроек стилей — см. StyleController. Здесь только структурные стили компонента. */

/* Подсказка под заголовком alert (hint-поле AlertConfig) */
.alert-hint {
    margin: var(--spacing-xs) 0 0 0;
    font-size: var(--font-size-sm);
}

/* Кнопка закрытия dismissible-alert: прижата вправо (alert — flex), не сжимается.
   Внешний вид — брендбук btn-icon btn-xs btn-icon-{type} (разметка в _alert.html.twig). */
.alert-close {
    margin-left: auto;
    flex-shrink: 0;
}

/* Семантический компаньон selection-required (rootClasses от AlertConfig).
   ЕДИНСТВЕННЫЙ носитель толстого левого акцента: расширяет левую грань 1px-контура до
   --border-width-thick. Цвет акцента — собственный цвет типа (наследуется от border
   .ui-alert--{type}), поэтому работает для ЛЮБОГО типа, не только warning.
   Объявлено ПОСЛЕ правил типов → border-left-width перекрывает 1px из их border-шортхенда. */
.selection-required-alert {
    border-left-width: var(--border-width-thick);
    /* фон/цвет/контур — от .ui-alert--{type}; margin-bottom — от базового .ui-alert */
}

/* slideDown-анимация для ui-alert (JS-тоггл validation-error) */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ui-alert--animated {
    animation: slideDown 0.3s ease-out;
}

/* ===== Flash Messages (перенесено из base.css — TD-85; канон .ui-flash-message) ===== */
.ui-flash-messages {
    margin-bottom: 16px;
}

.ui-flash-message {
    padding: 12px 16px;
    border-radius: var(--border-radius);
    margin-bottom: 8px;
    font-size: var(--font-size-sm);
}

.ui-flash-message--success {
    background-color: var(--color-success-bg);
    color: var(--color-success);
}

.ui-flash-message--error, .ui-flash-message--danger {
    background-color: var(--color-error-bg);
    color: var(--color-error);
}

.ui-flash-message--warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
}

.ui-flash-message--info {
    background-color: var(--color-info-bg);
    color: var(--color-info);
}

.ui-flash-message a {
    color: inherit;
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
}

.ui-flash-message a:hover {
    text-decoration: none;
}

/* ui-dismissible controller: анимация скрытия перед удалением из DOM */
.ui-dismissing {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    transition: opacity var(--transition-default), max-height var(--transition-default), margin var(--transition-default), padding var(--transition-default);
}

/* ===== /Alert component (TD-64) ===== */

/* ==================== BADGES ==================== */

.badge-unified,
.ui-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-small);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.ui-badge--primary {
    background-color: var(--color-badge-primary);
    color: var(--button-primary-text);
}

.ui-badge--success {
    background-color: var(--color-badge-success);
    color: var(--color-success);
}

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

.ui-badge--danger {
    background-color: var(--color-badge-danger);
    color: var(--button-primary-text);
}

.ui-badge--info {
    background-color: var(--color-badge-info);
    color: var(--color-info);
}

.ui-badge--secondary {
    background-color: var(--color-secondary-bg, #e9ecef);
    color: var(--color-text-secondary, #6c757d);
}

.ui-badge--light {
    background-color: var(--color-light-bg, #f8f9fa);
    color: var(--color-text-muted, #6c757d);
}

.ui-badge--country {
    background-color: var(--color-badge-country, #e8f4fd);
    color: var(--color-badge-country-text, #0c5460);
}

.ui-badge--group {
    background-color: var(--color-badge-group, #f0e6ff);
    color: var(--color-badge-group-text, #6f42c1);
}

.ui-badge--telegram {
    background-color: var(--color-badge-telegram, #e3f2fd);
    color: var(--color-badge-telegram-text, #0088cc);
}

.ui-badge--one-time {
    background-color: var(--color-badge-one-time, #fff3cd);
    color: var(--color-badge-one-time-text, #856404);
}

/* TD-64 W4 — доменные роли (палитра по смыслу, спека §2.3-A) */
.ui-badge--landlord {
    background-color: var(--color-badge-landlord, var(--color-badge-success));
    color: var(--color-success);
}
.ui-badge--landlord_agent {
    background-color: var(--color-badge-landlord-agent, var(--color-badge-primary));
    color: var(--button-primary-text);
}
.ui-badge--tenant {
    background-color: var(--color-badge-tenant, var(--color-badge-info));
    color: var(--color-info);
}
.ui-badge--tenant_agent {
    background-color: var(--color-badge-tenant-agent, var(--color-secondary-bg, #e9ecef));
    color: var(--color-text-secondary, #6c757d);
}
.ui-badge--maintenance {
    background-color: var(--color-badge-maintenance, var(--color-badge-warning));
    color: var(--color-warning);
}

.ui-badge--sm {
    font-size: var(--font-size-xs, 0.75rem);
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* ==================== FORMS ==================== */

/* TD-85 Волна 2: select/textarea переиспользуют ЕДИНУЮ базу form-control
   (границы/радиус/шрифт/фон/цвет/focus/disabled) через групповой селектор — «доработка
   > дубль». Элемент-специфика (стрелка select, resize textarea) — отдельными companion-
   правилами ниже. padding канон 8×16 (как form-input в Волне 1). */
.form-control-unified, .ui-form-control,
.form-select-unified, .ui-form-select,
.form-textarea-unified, .ui-form-textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: var(--border-width-thin) solid var(--color-input-border);
    border-radius: var(--border-radius);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    letter-spacing: 0;
    background: var(--color-input-bg);
    color: var(--color-text);
    transition: var(--transition-fast);
}

.form-control-unified:focus, .ui-form-control:focus,
.form-select-unified:focus, .ui-form-select:focus,
.form-textarea-unified:focus, .ui-form-textarea:focus {
    outline: none;
    border-color: var(--color-input-focus);
    box-shadow: var(--shadow-input-focus);
}

.form-control-unified:disabled, .ui-form-control:disabled,
.form-select-unified:disabled, .ui-form-select:disabled,
.form-textarea-unified:disabled, .ui-form-textarea:disabled {
    background: var(--form-disabled-background);
    color: var(--form-disabled-text);
    cursor: not-allowed;
}

.form-control-unified::placeholder, .ui-form-control::placeholder,
.form-textarea-unified::placeholder, .ui-form-textarea::placeholder {
    color: var(--form-placeholder);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}

/* Select — база выше + собственная стрелка/appearance. Стрелка — SVG в background-image
   (CSS var внутри data-URI не поддерживается): fill #898E97 = значение --color-text-muted. */
.form-select-unified, .ui-form-select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    /* @brandbook-ignore-next BB-RAW-COLOR — глиф стрелки select в data-URI SVG (background-image не берёт CSS-переменную); #898E97 = значение --color-text-muted */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23898E97' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

/* Textarea — база выше + вертикальный ресайз + min-height (паритет с удаляемым legacy
   .form-textarea из base.css/components.css, где было min-height: 80px). */
.form-textarea-unified, .ui-form-textarea {
    resize: vertical;
    min-height: 80px;
}

/* Checkbox-обёртка (layout-компонент, не form-control). */
.form-check-unified, .ui-form-check {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

.form-check-unified input[type="checkbox"], .ui-form-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
}

.form-check-unified label, .ui-form-check label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* Компактный размер form-control — узкие inline-поля (property-wizard value-inputs).
   Консолидация page-CSS `.form-control-sm` (TD-61 P-C — доработка > кастом).
   На узком мобиле снимает max-width (см. @media ниже). */
.form-control-unified--sm, .ui-form-control--sm {
    padding: 6px 10px;
    font-size: var(--font-size-sm);
    width: 100%;
    max-width: 200px;
}

@media (max-width: 575px) {
    .form-control-unified--sm, .ui-form-control--sm {
        max-width: 100%;
    }
}

.form-label-unified, .ui-form-label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-secondary);
    font-size: var(--font-size-sm);
}

.form-group-unified, .ui-form-group {
    margin-bottom: var(--spacing-md);
}

.form-help-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}

.form-error-text {
    font-size: var(--font-size-sm);
    color: var(--color-error);
    margin-top: var(--spacing-xs);
}

/* ==================== MODALS ==================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-overlay-50);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
}

.modal-content {
    background: var(--modal-content-background);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-modal);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    padding: var(--spacing-lg);
    background: var(--modal-header-background);
    border-bottom: var(--border-width-thin) solid var(--modal-header-border);
    border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title, .ui-modal__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.modal-close, .ui-modal__close {
    background: none;
    border: none;
    font-size: var(--font-size-3xl);
    cursor: pointer;
    color: var(--color-text-muted);
    transition: var(--transition-fast);
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover, .ui-modal__close:hover {
    color: var(--color-text);
}

.modal-body {
    padding: var(--spacing-lg);
}

.modal-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--modal-footer-background);
    border-top: var(--border-width-thin) solid var(--modal-footer-border);
    border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
}

/* ==================== TABLES ==================== */

.table-unified,
.ui-table {
    width: 100%;
    border-collapse: collapse;
}

/* Таблица внутри карточки - убираем отступы */

.table-unified thead,
.ui-table thead {
    background: var(--color-table-header);
}

.table-unified th,
.ui-table th {
    padding: var(--spacing-md) var(--spacing-md);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    border-bottom: var(--border-width-thin) solid var(--color-table-border);
}

.table-unified th:first-child {
    padding-left: var(--spacing-padding);
}

.table-unified td,
.ui-table td {
    padding: var(--spacing-md) var(--spacing-md);
    border-bottom: var(--border-width-thin) solid var(--color-table-border);
    color: var(--color-text);
}

.table-unified td:first-child {
    padding-left: var(--spacing-padding);
}

.table-unified.table-hover tbody tr:hover,
.ui-table.table-hover tbody tr:hover {
    background: var(--color-table-hover);
}

.table-unified.table-striped tbody tr:nth-child(even),
.ui-table.table-striped tbody tr:nth-child(even) {
    background: var(--color-table-stripe);
}

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

/* Подсветка текущего месяца в таблице графика доходов */
.ui-table__row--current {
    background: var(--color-info-bg, rgba(59, 130, 246, 0.06));
}

.ui-table__row--current:hover {
    background: var(--color-table-hover);
}

/* ==================== PAGINATION ==================== */

.pagination-unified, .ui-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.pagination-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--spacing-md);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-card-background);
    border: var(--border-width-thin) solid var(--color-border);
    transition: var(--transition-fast);
}

.pagination-item:hover {
    background: var(--color-primary);
    color: var(--button-primary-text);
    border-color: var(--color-primary);
}

.pagination-item.active {
    background: var(--color-primary);
    color: var(--button-primary-text);
    border-color: var(--color-primary);
}

.pagination-item.disabled {
    background: var(--color-disabled-bg);
    color: var(--color-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

/* ==================== LISTS ==================== */

.list-unified, .ui-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-item-unified, .ui-list-item {
    padding: var(--spacing-md) var(--spacing-md);
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    transition: var(--transition-fast);
}

.list-item-unified:hover, .ui-list-item:hover {
    background: var(--color-table-hover);
}

.list-item-unified:last-child, .ui-list-item:last-child {
    border-bottom: none;
}

/* ==================== DROPDOWNS ==================== */

.dropdown-unified, .ui-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    background: var(--color-card-background);
    border: var(--border-width-thin) solid var(--color-border);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: var(--transition-fast);
}

.dropdown-toggle:hover {
    background: var(--color-table-hover);
}

/* Override для .header-btn.dropdown-toggle — плоский синий как у .header-btn.icon-only (help).
   Управляется через Brand Book variant "header" (см. --button-header-* tokens в dynamic.css). */
.header-btn.dropdown-toggle {
    background: var(--button-header-background, var(--color-primary));
    color: var(--button-header-text, var(--color-white, #fff));
    border: var(--border-width-thin) solid var(--button-header-border, transparent);
    box-shadow: var(--button-header-shadow);
}
.header-btn.dropdown-toggle:hover {
    background: var(--button-header-hover, var(--color-primary-hover, var(--color-primary)));
    color: var(--button-header-hover-text, var(--color-white, #fff));
    border-color: var(--button-header-hover-border, transparent);
    box-shadow: var(--button-header-hover-shadow);
}
.header-btn.dropdown-toggle:active {
    background: var(--button-header-active, var(--color-primary-hover, var(--color-primary)));
    color: var(--button-header-active-text, var(--color-white, #fff));
    border-color: var(--button-header-active-border, transparent);
    box-shadow: var(--button-header-active-shadow);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--color-card-background);
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-dropdown);
    margin-top: var(--spacing-xs);
    z-index: var(--z-dropdown);
    display: none;
}

.dropdown-unified.active .dropdown-menu, .ui-dropdown.active .dropdown-menu {
    display: block;
}

.dropdown-item {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text);
    text-decoration: none;
    transition: var(--transition-fast);
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}


.dropdown-item:hover {
    background: var(--color-table-hover);
}

/* Keyboard focus indicator for menu navigation (ArrowUp/Down). :focus-visible
   keeps it off for mouse interaction while staying visible for keyboard users. */
.dropdown-item:focus-visible {
    outline: var(--border-width-normal) solid var(--color-primary);
    outline-offset: -2px;
    background: var(--color-table-hover);
}

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

/* Submit/button used as a dropdown item (e.g. delete form inside a menu):
   reset native button chrome so it matches <a class="dropdown-item">. */
button.dropdown-item {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    background: none;
    border: none;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    font: inherit;
    cursor: pointer;
}

/* A menuitem wrapped in a <form> is never :last-child of the menu, so drop the
   separator when the form is the last menu child. */
.dropdown-menu > form:last-child .dropdown-item {
    border-bottom: none;
}

/* Текущий выбор в меню (DropdownItem.current → aria-current): язык интерфейса,
   выбранный период и т.п. Нативный <select> подсвечивал выбранное сам — здесь
   роль подсветки берёт на себя модификатор. */
.dropdown-item--current {
    background: var(--color-primary-bg);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

/* Длинное меню (месяцы, языки, справочники) — прокрутка внутри меню вместо
   роста на весь экран. Модификатор канона: ставится на .dropdown-menu через
   scoped-правило страницы или обёртку компонента. */
.dropdown-menu--scrollable {
    max-height: 40vh;
    overflow-y: auto;
}

.dropdown-item--danger {
    color: var(--color-danger, #dc3545);
}

.dropdown-item--danger:hover {
    background: var(--color-danger-bg, #fff5f5);
    color: var(--color-danger, #dc3545);
}

/* ==================== TABS ==================== */

.tabs-unified,
.tabs-nav,
.ui-tabs {
    display: flex;
    border-bottom: var(--border-width-normal) solid var(--color-border);
    gap: 0;
}

.tab-item, .tab-btn, .ui-tabs__item {
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
    border: none;
    border-bottom: var(--border-width-normal) solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    transition: var(--transition-fast);
    text-decoration: none;
}

.tab-item:hover, .tab-btn:hover, .ui-tabs__item:hover {
    color: var(--color-text);
    background: var(--color-table-hover);
}

.tab-item.active, .tab-btn.active, .ui-tabs__item--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.tab-count, .ui-tabs__count {
    display: inline-block;
    margin-left: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs, 11px);
    background: var(--color-background);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-muted);
}

.tab-content {
    display: none;
    padding: var(--spacing-lg) 0;
}

.tab-content.active {
    display: block;
}

/* Канон-панель tabs (js-режим, не-crm). Механика видимости .active — как .tab-content/.crm-tab-content. */
.ui-tabpanel {
    display: none;
}

.ui-tabpanel.active {
    display: block;
}

/* ==================== TOOLTIPS ==================== */

.tooltip-unified, .ui-tooltip-unified {
    position: relative;
    display: inline-block;
}

.tooltip-text {
    visibility: hidden;
    background-color: var(--color-secondary);
    color: var(--button-primary-text);
    text-align: center;
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-md);
    position: absolute;
    z-index: var(--z-tooltip);
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: var(--font-size-sm);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--color-secondary) transparent transparent transparent;
}

.tooltip-unified:hover .tooltip-text, .ui-tooltip-unified:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* ==================== LOADING SPINNER ==================== */

.spinner-unified,
.ui-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--lazy-spinner-base);
    border-top-color: var(--lazy-spinner-active);
    border-radius: 50%;
    animation: spinner-rotate 0.8s linear infinite;
}

.spinner-small {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.spinner-large {
    width: 60px;
    height: 60px;
    border-width: 6px;
}

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

/* ==================== TOAST NOTIFICATIONS ==================== */
/* Временные всплывающие уведомления. JS-утилита: /js/modules/toast.js → window.showToast(msg, type)
   Типы: success, error, warning. Позиция: top-right по умолчанию, bottom-center через --bottom-center. */

.toast-stack {
    position: fixed;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    pointer-events: none;
    max-width: 380px;
}

.toast-stack--top    { top: 80px; right: 20px; }
.toast-stack--bottom { bottom: 20px; left: 50%; transform: translateX(-50%); }

.toast {
    position: relative;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius);
    color: var(--button-primary-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    box-shadow: var(--shadow-lg);
    animation: toastIn 0.3s ease forwards;
    pointer-events: auto;
    max-width: 340px;
}

.toast--success  { background: var(--color-success); }
.toast--error    { background: var(--color-error); }
/* Warning uses dark text for WCAG AA contrast (yellow bg + white text fails). */
.toast--warning  { background: var(--color-warning); color: var(--color-text, #111); }
.toast--info     { background: var(--color-info, var(--color-primary)); }

.toast--bottom-center {
    animation: toastInBottom 0.3s ease forwards;
}

.toast--hide {
    animation: toastOut 0.3s ease forwards;
}

.toast--bottom-center.toast--hide {
    animation: toastOutBottom 0.3s ease forwards;
}

@keyframes toastIn {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes toastOut {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(100%); opacity: 0; }
}
@keyframes toastInBottom {
    from { transform: translateX(-50%) translateY(20px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
@keyframes toastOutBottom {
    from { transform: translateX(-50%) translateY(0);    opacity: 1; }
    to   { transform: translateX(-50%) translateY(20px); opacity: 0; }
}

/* ==================== PROGRESS BAR ==================== */

.progress-unified, .ui-progress {
    width: 100%;
    height: 8px;
    background: var(--color-background);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--color-primary);
    transition: width var(--transition-default);
}

.progress-bar-success {
    background: var(--color-success);
}

.progress-bar-warning {
    background: var(--color-warning);
}

.progress-bar-danger {
    background: var(--color-error);
}

/* ==================== DIVIDER ==================== */

.divider-unified, .ui-divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--spacing-lg) 0;
}

.divider-unified-text, .ui-divider__text {
    display: flex;
    align-items: center;
    text-align: center;
    margin: var(--spacing-lg) 0;
}

.divider-unified-text::before, .ui-divider__text::before,
.divider-unified-text::after, .ui-divider__text::after {
    content: '';
    flex: 1;
    border-bottom: var(--border-width-thin) solid var(--color-border);
}

.divider-unified-text span, .ui-divider__text span {
    padding: 0 var(--spacing-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* ==================== FOOTER ==================== */

.footer-copyright {
    color: var(--color-text-muted);
    opacity: 0.7;
}

/* ==================== BREADCRUMBS ==================== */
/* Централизованный компонент _breadcrumbs.html.twig (обёртка <nav class="app-breadcrumbs">
   в _app_welcome_banner / на страницах). CSS перенесён сюда из app-base.css (TD-61) —
   канон грузится везде, включая external-лейаут; страницам переопределять запрещено. */

.app-breadcrumbs {
    font-size: var(--font-size-lg);
    font-family: 'Inter', sans-serif;
    line-height: 1em;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.app-breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.app-breadcrumbs a:hover {
    color: var(--color-info);
}

.app-breadcrumbs__divider {
    margin: 0 6px;
    opacity: .5;
}

@media (max-width: 767px) {
    .app-breadcrumbs {
        display: none;
    }
}

/* ==================== UTILITY CLASSES ==================== */

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

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

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

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

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

.text-danger {
    color: var(--color-error);
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-success {
    background-color: var(--color-success);
}

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

.bg-danger {
    background-color: var(--color-error);
}

/* .lqip-bg — статическая часть LQIP-плейсхолдера (preview/_picture.html.twig).
   Динамический background-image ставит common--lqip-background контроллер
   (TD-51 style-src nonce migration — без inline style="..."). */
.lqip-bg {
    background-size: cover;
    background-repeat: no-repeat;
}

/* .d-none — утилита скрытия (член display-семейства d-flex/d-block/.../d-none).
   !important бьёт component-display (напр. .ui-alert{display:flex}) и заменяет собой
   удалённые многоклассовые правила .X.hidden (.messages-badge/.s3-modal-overlay/.add-user-step) —
   их специфичность была без !important, поэтому глобальный .d-none перекрывает с запасом. TD-67. */
.d-none {
    display: none !important;
}

.d-block {
    display: block;
}

.d-inline {
    display: inline;
}

.d-inline-block {
    display: inline-block;
}

/* Button width utilities */
.btn-auto {
    display: inline-flex !important;
    width: auto !important;
}

.btn-block {
    display: block !important;
    width: 100% !important;
}

.d-flex {
    display: flex;
}

.d-inline-flex {
    display: inline-flex;
}

/* Sizing utilities — статические 100%-размеры (TD-51 W0).
   Только для КОНСТАНТНОГО 100%; динамические проценты (progress-bars и т.п.)
   ставятся через Stimulus (element.style.setProperty), не через utility. */
.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.mw-100 {
    max-width: 100%;
}

/* Interaction utility (TD-51 W0) */
.pointer-events-none {
    pointer-events: none;
}

/* Interaction / layout utilities (TD-51 W2 — частые inline-паттерны) */
.cursor-pointer {
    cursor: pointer;
}

.flex-fill {
    flex: 1;
}

.ms-auto {
    margin-left: auto;
}

.flex-wrap {
    flex-wrap: wrap;
}

/* Icon scale utility (TD-51 W6b — inline-block + scale() for oversized icon emphasis) */
.icon-scale-2x {
    display: inline-block;
    transform: scale(2);
}

.icon-scale-2-5x {
    display: inline-block;
    transform: scale(2.5);
}

.flex-column {
    flex-direction: column;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.align-center {
    align-items: center;
}

.align-end {
    align-items: flex-end;
}

.gap-xs {
    gap: var(--spacing-xs);
}

.gap-sm {
    gap: var(--spacing-sm);
}

.gap-md {
    gap: var(--spacing-md);
}

.gap-lg {
    gap: var(--spacing-lg);
}

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }

.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }

/* ==================== CURRENCY DISPLAY ==================== */

/**
 * Secondary currency display (shown in brackets after main amount)
 * Usage: <span class="currency-secondary">(40 084.43 ₴)</span>
 */
.currency-secondary {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    opacity: 0.8;
    font-weight: var(--font-weight-normal);
}

/**
 * Secondary currency on dark backgrounds (e.g., total cards)
 * Automatically applies white color with opacity
 */
.total-card .currency-secondary,
.card-dark .currency-secondary {
    color: var(--color-white);
    opacity: 0.85;
    font-size: var(--font-size-sm);
}

/* ==================== AMOUNT CARDS (Централизованная карточка суммы) ==================== */

.amount-card-unified, .ui-amount-card {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-card);
    min-width: 250px;
}

.amount-card-primary, .ui-amount-card--primary {
    background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);
    color: var(--color-white);
    box-shadow: var(--shadow-primary);
}

.amount-card-secondary, .ui-amount-card--secondary {
    background: var(--color-card-background);
    color: var(--color-text);
    border: var(--border-width-thin) solid var(--color-border);
}

.ui-amount-card--success {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success) 100%);
    color: var(--color-white, #fff);
    box-shadow: var(--shadow-success);
}

.ui-amount-card--danger {
    background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-error) 100%);
    color: var(--color-white, #fff);
    box-shadow: var(--shadow-error);
}

.ui-amount-card--warning {
    background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning) 100%);
    color: var(--color-white, #fff);
    box-shadow: var(--shadow-warning);
}

.amount-card-label, .ui-amount-card__label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    opacity: 0.95;
}

.amount-card-value, .ui-amount-card__value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.ui-amount-card__currency {
    opacity: 0.85;
    font-size: var(--font-size-sm);
}

/* Вторичная валюта внутри amount-card */
.amount-card-primary .currency-secondary,
.ui-amount-card--primary .currency-secondary,
.ui-amount-card--primary .ui-amount-card__currency {
    color: var(--color-white);
    opacity: 0.85;
    font-size: var(--font-size-sm);
}

.amount-card-secondary .currency-secondary,
.ui-amount-card--secondary .currency-secondary,
.ui-amount-card--secondary .ui-amount-card__currency {
    color: var(--color-text-muted);
    opacity: 0.85;
    font-size: var(--font-size-sm);
}

/* ==================== EXPORT BUTTONS ==================== */

.export-buttons-wrapper {
    text-align: right;
    margin: var(--spacing-md) 0;
}

/* ===== Filter Row ===== */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 130px;
}

.filter-group label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted, #6c757d);
    font-weight: var(--font-weight-medium);
}

.filter-actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-end;
}

@media (max-width: 767px) {
    .filter-row {
        flex-direction: column;
    }
    .filter-group {
        width: 100%;
    }
}

/* ===== Table Responsive ===== */
.table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

/* ===== UI Icons ===== */
.ui-icon { flex-shrink: 0; vertical-align: middle; }
.ui-icon--missing { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: var(--color-warning-bg); color: var(--color-warning); border-radius: 50%; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
/* Цвет задаём через color → currentColor: работает и для line (stroke), и для solid (fill). */
.ui-icon--primary { color: var(--color-primary); }
.ui-icon--success { color: var(--color-success); }
.ui-icon--warning { color: var(--color-warning); }
.ui-icon--danger { color: var(--color-danger); }
.ui-icon--error { color: var(--color-error); }
.ui-icon--info { color: var(--color-info); }
.ui-icon--muted { color: var(--color-text-muted); }
.ui-icon--white { color: var(--color-white, #fff); }
.ui-icon--secondary { color: var(--color-secondary); }
.ui-icon--blue { color: var(--color-info, #4F7CF7); }

/* ===== UI Pictograms ===== */
.ui-pictogram { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex-shrink: 0; }
.ui-pictogram--emoji { font-style: normal; line-height: 1; }
.ui-pictogram--image { width: 1.2em; height: 1.2em; object-fit: contain; }
.ui-pictogram--sm { font-size: 0.85em; }
.ui-pictogram--lg { font-size: 1.3em; }
.ui-pictogram--xl { font-size: 1.8em; }

/* ===== UI Confirmation Status (inline) ===== */
.ui-confirmation-status { display: inline-flex; align-items: center; gap: var(--spacing-xs); font-size: var(--font-size-xs); }
.ui-conf-party { display: inline-flex; align-items: center; gap: var(--spacing-xs); }
.ui-conf-label { color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
.ui-conf-sep { color: var(--color-text-muted); opacity: 0.4; margin: 0 2px; }
.ui-conf-icon { font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); }
.ui-conf-icon--confirmed { color: var(--color-success); }
.ui-conf-icon--rejected { color: var(--color-danger); }
.ui-conf-icon--unknown { color: var(--color-warning); font-size: var(--font-size-xs); }

/* ===== UI Confirmation Block (full) ===== */
.ui-confirmation-block { background: var(--color-background); padding: var(--spacing-md) var(--spacing-md); border-radius: var(--border-radius-sm); border: var(--border-width-thin) solid var(--color-border); display: flex; flex-direction: column; gap: var(--spacing-sm); }
.ui-confirmation-block--locked { opacity: 0.85; }
.ui-conf-my { display: flex; align-items: center; justify-content: space-between; }
.ui-conf-my-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.ui-conf-my-label--confirmed { color: var(--color-success); }
.ui-conf-my--locked { opacity: 0.9; }
.ui-conf-toggle-form { display: inline-flex; }
.ui-conf-other { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* ===== UI Empty State ===== */
.empty-state { text-align: center; padding: var(--spacing-2xl) var(--spacing-lg); }
/* Компактный вид (TD-86): без card-обёртки и дефолтной иконки — для узких блоков.
   Селектор из двух классов, чтобы перебивать padding .empty-state независимо от порядка правил. */
.empty-state.ui-empty--inline { padding: var(--spacing-md) var(--spacing-sm); }
.empty-icon { font-size: var(--font-size-8xl); margin-bottom: var(--spacing-md); opacity: 0.5; }
.empty-message { color: var(--color-text-muted); margin-bottom: var(--spacing-md); font-size: var(--font-size-sm); }
.empty-state-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-secondary); margin: 0 0 var(--spacing-sm); }
.empty-hint { font-size: var(--font-size-xs); color: var(--color-text-muted); opacity: 0.8; margin-bottom: var(--spacing-md); }

/* ===== Warning Boxes ===== */
.warning-box, .ui-warning-box { padding: var(--spacing-md) var(--spacing-md); border-radius: var(--border-radius, 8px); border: var(--border-width-thin) solid var(--color-warning); background: var(--color-warning-bg); color: var(--color-warning); font-size: var(--font-size-sm); margin-bottom: var(--spacing-md); }
.warning-box.warning-error, .ui-warning-box--error { border-color: var(--color-error); background: var(--color-error-bg); color: var(--color-error); }
.warning-box.warning-info, .ui-warning-box--info { border-color: var(--color-info); background: var(--color-info-bg); color: var(--color-info); }
.ui-warning-box--warning { border-color: var(--color-warning); background: var(--color-warning-bg); color: var(--color-warning); }
.warning-content { display: flex; align-items: flex-start; gap: var(--spacing-sm); }
.ui-warning-box__heading { display: flex; align-items: center; gap: var(--spacing-sm); }
.warning-icon, .ui-warning-box__icon { font-size: var(--font-size-lg); flex-shrink: 0; }
.warning-text, .ui-warning-box__text { flex: 1; }
.ui-warning-box__reasons { margin: var(--spacing-sm) 0 0; padding-left: var(--spacing-lg); }

/* ===== Form Extensions (.form-select/.form-textarea/.form-check мигрированы на канон
   .form-select-unified/.form-textarea-unified/.form-check-unified выше — TD-85 Волна 2) ===== */
.form-hint { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--spacing-xs); }
.form-error-text { font-size: var(--font-size-xs); color: var(--color-error); margin-top: var(--spacing-xs); }

/* ── Layout Components ── */
.ui-page-layout { display: flex; width: 100%; margin: 0 auto; }
.ui-page-layout--with-sidebar { gap: var(--spacing-xl, 24px); }
.ui-page-layout__sidebar { flex: 0 0 260px; }
.ui-page-layout__content { flex: 1; min-width: 0; }
@media (max-width: 767px) {
    .ui-page-layout--with-sidebar { flex-direction: column; }
    .ui-page-layout__sidebar { flex: none; width: 100%; }
}

.ui-section { margin-bottom: var(--spacing-lg, 24px); }
.ui-section--sm { margin-bottom: var(--spacing-sm, 8px); }
.ui-section--md { margin-bottom: var(--spacing-md, 16px); }
.ui-section--lg { margin-bottom: var(--spacing-lg, 24px); }
.ui-section--xl { margin-bottom: var(--spacing-xl, 32px); }
.ui-section__title { font-size: var(--font-size-lg, 18px); font-weight: var(--font-weight-bold, 700); margin-bottom: var(--spacing-md, 16px); color: var(--color-text); }

/* ── Tooltip ── */
.ui-tooltip { position: relative; cursor: help; }
.ui-tooltip::after { content: attr(data-tooltip); position: absolute; z-index: var(--z-tooltip); padding: 6px 10px; border-radius: var(--border-radius-small, 4px); background: var(--color-text-primary, #333); color: var(--color-white, #fff); font-size: var(--font-size-xs); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--transition-duration-fast); }
.ui-tooltip:hover::after { opacity: 1; }
.ui-tooltip[data-tooltip-position="top"]::after { bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: var(--spacing-sm); }
.ui-tooltip[data-tooltip-position="bottom"]::after { top: 100%; left: 50%; transform: translateX(-50%); margin-top: var(--spacing-sm); }
.ui-tooltip[data-tooltip-position="left"]::after { right: 100%; top: 50%; transform: translateY(-50%); margin-right: var(--spacing-sm); }
.ui-tooltip[data-tooltip-position="right"]::after { left: 100%; top: 50%; transform: translateY(-50%); margin-left: var(--spacing-sm); }
.ui-tooltip--multiline::after { white-space: pre-line; max-width: 220px; width: max-content; text-align: left; line-height: var(--line-height-normal); }

/* ══════ Missing ui-* BEM aliases ══════ */

/* ui-button aliases for btn-action */
.ui-button { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-sm) var(--spacing-lg); border: none; border-radius: var(--border-radius); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); cursor: pointer; transition: var(--transition-fast); text-decoration: none; gap: var(--spacing-sm); }
.ui-button--primary { background-color: var(--button-primary-background); color: var(--button-primary-text); border: var(--border-width-thin) solid var(--button-primary-border, transparent); box-shadow: var(--button-primary-shadow, none); }
.ui-button--primary:hover { background-color: var(--button-primary-hover); color: var(--button-primary-hover-text, var(--button-primary-text)); }
.ui-button--success { background-color: var(--button-success-background); color: var(--button-success-text); border: var(--border-width-thin) solid var(--button-success-border, transparent); box-shadow: var(--button-success-shadow, none); }
.ui-button--success:hover { background-color: var(--button-success-hover); color: var(--button-success-hover-text, var(--button-success-text)); }
.ui-button--danger { background-color: var(--button-danger-background); color: var(--button-danger-text); border: var(--border-width-thin) solid var(--button-danger-border, transparent); box-shadow: var(--button-danger-shadow, none); }
.ui-button--danger:hover { background-color: var(--button-danger-hover); color: var(--button-danger-hover-text, var(--button-danger-text)); }
.ui-button--warning { background-color: var(--button-warning-background); color: var(--button-warning-text); border: var(--border-width-thin) solid var(--button-warning-border, transparent); box-shadow: var(--button-warning-shadow, none); }
.ui-button--warning:hover { background-color: var(--button-warning-hover); color: var(--button-warning-hover-text, var(--button-warning-text)); }
.ui-button--secondary { background-color: var(--button-secondary-background); color: var(--button-secondary-text); border: var(--border-width-thin) solid var(--button-secondary-border, transparent); box-shadow: var(--button-secondary-shadow, none); }
.ui-button--secondary:hover { background-color: var(--button-secondary-hover); color: var(--button-secondary-hover-text, var(--button-secondary-text)); }
.ui-button--outline { background: transparent; color: var(--btn-outline-text, var(--color-primary)); border: var(--border-width-thin) solid var(--btn-outline-border, var(--color-primary)); }
.ui-button--outline:hover { background: var(--btn-outline-hover-bg, var(--color-primary)); color: var(--color-white, #fff); }
.ui-button--sm { padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-xs); }
.ui-button--lg { padding: 12px 28px; font-size: var(--font-size-base); }
.ui-button--disabled, .ui-button:disabled { opacity: 0.5; pointer-events: none; }

/* ui-empty alias for empty-state */
.ui-empty { text-align: center; padding: var(--spacing-2xl) var(--spacing-lg); }
.ui-empty__icon { font-size: var(--font-size-8xl); margin-bottom: var(--spacing-md); opacity: 0.5; }
.ui-empty__message { color: var(--color-text-muted); margin-bottom: var(--spacing-md); font-size: var(--font-size-sm); }
.ui-empty__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-secondary); margin: 0 0 var(--spacing-sm); }
.ui-empty__hint { font-size: var(--font-size-xs); color: var(--color-text-muted); opacity: 0.8; margin-bottom: var(--spacing-md); }

/* ui-modal alias for modal-overlay/modal-content */
.ui-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-overlay-50); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); }
.ui-modal__content { background: var(--modal-content-background); border-radius: var(--border-radius-large); box-shadow: var(--shadow-modal); max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto; }
.ui-modal__header { padding: var(--spacing-lg); background: var(--modal-header-background); border-bottom: var(--border-width-thin) solid var(--modal-header-border); border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; display: flex; justify-content: space-between; align-items: center; }
.ui-modal__body { padding: var(--spacing-lg); }
.ui-modal__footer { padding: var(--spacing-md) var(--spacing-lg); border-top: var(--border-width-thin) solid var(--color-border); display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-sm); }
.ui-modal--sm .ui-modal__content { max-width: 400px; }
.ui-modal--lg .ui-modal__content { max-width: 800px; }

/* ui-print-popup — попап печати документа */
.ui-print-popup { max-width: 480px; }

/* ui-toggle alias for toggle-switch */
.ui-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.ui-toggle__input { opacity: 0; width: 0; height: 0; }
.ui-toggle__slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--color-border); border-radius: 24px; transition: var(--transition-fast); }
.ui-toggle__slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: var(--color-white, #fff); border-radius: 50%; transition: var(--transition-fast); }
.ui-toggle__input:checked + .ui-toggle__slider { background-color: var(--color-success); }
.ui-toggle__input:checked + .ui-toggle__slider::before { transform: translateX(20px); }
.ui-toggle__input:disabled + .ui-toggle__slider { opacity: .5; }
.ui-toggle--info .ui-toggle__input:checked + .ui-toggle__slider { background-color: var(--color-info); }
.ui-toggle--danger .ui-toggle__input:checked + .ui-toggle__slider { background-color: var(--color-error); }

/* ui-badge-zone — tariff zone badges */
.zone-badge, .ui-badge-zone { display: inline-block; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--border-radius-sm); font-size: var(--font-size-xs, 11px); font-weight: var(--font-weight-semibold); text-transform: uppercase; }
.zone-total, .ui-badge-zone--total { background: var(--color-info-bg); color: var(--color-info); }
.zone-day, .ui-badge-zone--day { background: var(--color-warning-bg); color: var(--color-warning); }
.zone-night, .ui-badge-zone--night { background: var(--color-background); color: var(--color-info); }
.zone-peak, .ui-badge-zone--peak { background: var(--color-error-bg); color: var(--color-error); }
.zone-half_peak, .ui-badge-zone--half_peak { background: var(--color-warning-bg); color: var(--color-warning); }
.zone-badge.single, .ui-badge-zone--single { background: var(--color-info-bg); color: var(--color-info); }
.zone-badge.two, .ui-badge-zone--two { background: var(--color-warning-bg); color: var(--color-warning-dark, var(--color-warning)); }
.zone-badge.three, .ui-badge-zone--three { background: var(--color-success-bg); color: var(--color-success); }

/* ui-confirmation shorthand alias */
.ui-confirmation { background: var(--color-background); padding: var(--spacing-md) var(--spacing-md); border-radius: var(--border-radius-sm); border: var(--border-width-thin) solid var(--color-border); display: flex; flex-direction: column; gap: var(--spacing-sm); }

/* ui-logo */
.ui-logo { display: inline-block; vertical-align: middle; }
.ui-logo--icon { height: 32px; }
.ui-logo--full { height: 32px; }

/* Page subtitle */
.page-subtitle { margin: 2px 0 0; font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* Detail item label/value pairs */
.detail-label { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
.detail-value { font-size: var(--font-size-sm); color: var(--color-text); }
.detail-value--bold { font-weight: var(--font-weight-semibold); }

/* Confirmation panel (extends ui-confirmation) */
.confirm-row { display: flex; align-items: center; justify-content: space-between; }
.confirm-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.confirm-label--success { color: var(--color-success); }
.confirm-label--secondary { color: var(--color-secondary); }
.confirm-status { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-xs); }
.confirm-status--success { color: var(--color-success); }
.confirm-status--error { color: var(--color-error); }
.confirm-status--muted { color: var(--color-text-muted); }

/* Info header color variants */
.info-header--error { background: var(--color-error); }
.info-header--warning { background: var(--color-warning); }
.info-header--info { background: var(--color-info); }
.info-header--success { background: var(--color-success); }

/* Stat icon gradient variants */
.stat-icon--hero { background: linear-gradient(135deg, var(--color-hero-gradient-start) 0%, var(--color-hero-gradient-end) 100%); }
.stat-icon--warning-error { background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-error) 100%); }
.stat-icon--info { background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info) 100%); }
.stat-icon--success-info { background: linear-gradient(135deg, var(--color-success) 0%, var(--color-info) 100%); }
.stat-icon--error-warning { background: linear-gradient(135deg, var(--color-error) 0%, var(--color-warning) 100%); }
.stat-icon--neutral { background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-background) 100%); }

/* Round action icon button */
.action-icon-round { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer; text-decoration: none; }
.action-icon-round--success { background: var(--color-success-bg); color: var(--color-success); }
.action-icon-round--info { background: var(--color-info-bg); color: var(--color-primary); }

/* Text hint/secondary utilities */
.text-hint { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.text-hint-sm { font-size: var(--font-size-xxs); color: var(--color-text-muted); }
.text-hint-xs { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.text-secondary-sm { font-size: var(--font-size-xs); color: var(--color-text-secondary); }

/* Empty state centered (for inline empty blocks) */
.empty-block-centered { padding: 40px; text-align: center; color: var(--color-text-muted); }

/* List item icon (proposals, communications) */
.list-item-icon { width: 48px; height: 48px; border-radius: var(--border-radius-sm); background: var(--color-background); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Desc tabs (locale switcher in property show) */
.desc-tabs { display: flex; gap: var(--spacing-xs); margin-bottom: var(--spacing-md); }
.desc-tab { padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--font-size-xs); }
.desc-tab.active { background: var(--color-primary); color: var(--color-white, #fff); border-color: var(--color-primary); }

/* Link utilities */
.link-primary { color: var(--color-primary); text-decoration: none; }
.link-primary:hover { text-decoration: underline; }

/* Form validation states (used by expense-provider-selector.js and similar) */
.input-invalid { border-color: var(--color-error) !important; border-width: 2px !important; }
.input-valid { border-color: var(--color-success) !important; border-width: 2px !important; }

/* User/inviter autocomplete (components--user-autocomplete) — global styles.
   Перенесено из templates/admin/_autocomplete_styles.html.twig для глобальной доступности
   (брендбук, попап контактов, админ-фильтр инвайтеров). */
.autocomplete-group { min-width: 280px; }
.autocomplete-wrapper { position: relative; }
.autocomplete-wrapper .form-control-unified { padding-right: 30px; }
.autocomplete-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    color: var(--color-disabled);
    cursor: pointer;
    padding: 0 var(--spacing-xs);
    line-height: 1;
}
.autocomplete-clear:hover { color: var(--color-text); }
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-card-background);
    border: var(--border-width-thin) solid var(--color-border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 300px;
    overflow-y: auto;
    z-index: var(--z-dropdown);
    display: none;
    box-shadow: var(--shadow-dropdown, 0 4px 12px rgba(0,0,0,0.15));
}
.autocomplete-dropdown.show { display: block; }
.autocomplete-item {
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    border-bottom: var(--border-width-thin) solid var(--color-background);
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background: var(--color-background); }
.autocomplete-item .item-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-secondary);
}
.autocomplete-item .item-details {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}
.autocomplete-empty {
    padding: var(--spacing-md);
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
}
.autocomplete-loading {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--color-text-muted);
}

/* Autocomplete dropdown item modifiers (used by expense-provider-selector.js and user autocomplete) */
.autocomplete-item--empty { color: var(--color-text-muted); }
.autocomplete-item--invite { background-color: var(--color-success-bg); font-weight: bold; }
.autocomplete-item--contragent { background-color: var(--color-info-bg); font-weight: bold; }

/* TASK-434: незарегистрированный контакт — недоступен для выбора */
.autocomplete-item--disabled {
    cursor: default;
    opacity: 0.6;
}
.autocomplete-item--disabled:hover { background: transparent; }
.autocomplete-item--disabled .item-name { color: var(--color-text-muted); }
.autocomplete-item-badge {
    display: inline-block;
    margin-top: var(--spacing-xs);
    padding: 1px 8px;
    font-size: var(--font-size-xxs);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-muted);
    background: var(--color-background);
}

/* Currency equivalent preview (used by receipt-form.js) */
.equivalent-amount-positive { color: var(--color-success); font-weight: var(--font-weight-semibold); }

/* ==================== INTEGRATION BUTTONS ==================== */
/* Integration buttons — Telegram, Google, Swagger etc.
   Previously duplicated via inline <style> across login/register/share pages. */

.btn-google,
.ui-button--integration-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm);
    font-weight: var(--font-weight-medium);
    background: var(--button-google-background, var(--color-card-background));
    color: var(--button-google-text, var(--color-text));
    border: var(--border-width-thin) solid var(--button-google-border, var(--color-border));
    box-shadow: var(--button-google-shadow, none);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition-fast);
    text-decoration: none;
}
.btn-google:hover,
.ui-button--integration-google:hover {
    background: var(--button-google-hover, var(--color-background));
    color: var(--button-google-hover-text, var(--color-text));
    border-color: var(--button-google-hover-border, var(--color-primary));
    box-shadow: var(--button-google-hover-shadow, none);
    text-decoration: none;
}
.btn-google:active,
.ui-button--integration-google:active {
    background: var(--button-google-active, var(--color-background));
    color: var(--button-google-active-text, var(--color-text));
    border-color: var(--button-google-active-border, var(--color-primary));
    box-shadow: var(--button-google-active-shadow, none);
}

.btn-telegram,
.ui-button--integration-telegram {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm);
    font-weight: var(--font-weight-medium);
    background: var(--button-telegram-background, var(--color-card-background));
    color: var(--button-telegram-text, var(--color-info));
    border: var(--border-width-thin) solid var(--button-telegram-border, var(--color-info));
    box-shadow: var(--button-telegram-shadow, none);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition-fast);
    text-decoration: none;
}
.btn-telegram:hover,
.ui-button--integration-telegram:hover {
    background: var(--button-telegram-hover, var(--color-info));
    color: var(--button-telegram-hover-text, var(--button-primary-text, var(--color-white, #fff)));
    border-color: var(--button-telegram-hover-border, var(--color-info));
    box-shadow: var(--button-telegram-hover-shadow, none);
    text-decoration: none;
}
.btn-telegram:active,
.ui-button--integration-telegram:active {
    background: var(--button-telegram-active, var(--color-primary-hover));
    color: var(--button-telegram-active-text, var(--color-white, #fff));
    border-color: var(--button-telegram-active-border, var(--color-primary-hover));
    box-shadow: var(--button-telegram-active-shadow, none);
}
.btn-telegram:hover svg path,
.ui-button--integration-telegram:hover svg path {
    fill: var(--button-telegram-hover-text, var(--button-primary-text, var(--color-white, #fff)));
}

.btn-swagger,
.ui-button--integration-swagger {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--button-swagger-background, var(--color-success));
    color: var(--button-swagger-text, var(--color-white, #fff));
    border: var(--border-width-thin) solid var(--button-swagger-border, var(--color-success));
    box-shadow: var(--button-swagger-shadow, none);
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-fast);
}
.btn-swagger:hover,
.ui-button--integration-swagger:hover {
    background: var(--button-swagger-hover, var(--color-success-dark, var(--color-success)));
    color: var(--button-swagger-hover-text, var(--color-white, #fff));
    border-color: var(--button-swagger-hover-border, var(--color-success-dark, var(--color-success)));
    box-shadow: var(--button-swagger-hover-shadow, none);
    text-decoration: none;
}
.btn-swagger:active,
.ui-button--integration-swagger:active {
    background: var(--button-swagger-active, var(--color-success-dark, var(--color-success)));
    color: var(--button-swagger-active-text, var(--color-white, #fff));
    border-color: var(--button-swagger-active-border, var(--color-success-dark, var(--color-success)));
    box-shadow: var(--button-swagger-active-shadow, none);
}

/* ==================== PRINT BUTTONS ==================== */
/* Compact print-trigger buttons used in contract/expense lists. */

.btn-print-block,
.ui-button--print {
    background: var(--button-print-background, transparent);
    color: var(--button-print-text, var(--color-text));
    border: var(--border-width-thin) solid var(--button-print-border, var(--color-border));
    box-shadow: var(--button-print-shadow, none);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    opacity: 0.5;
    transition: var(--transition-fast);
}
.btn-print-block:hover:not(:disabled),
.ui-button--print:hover:not(:disabled) {
    background: var(--button-print-hover, var(--color-background));
    color: var(--button-print-hover-text, var(--color-text));
    border-color: var(--button-print-hover-border, var(--color-border));
    box-shadow: var(--button-print-hover-shadow, none);
    opacity: 1;
}
.btn-print-block:disabled,
.ui-button--print:disabled {
    cursor: not-allowed;
}
/* Active state — e.g. key-shaped icon for unlocked print */
.btn-print-block.btn-print-keys,
.ui-button--print.ui-button--print-active {
    opacity: 1;
    cursor: pointer;
    background: var(--button-print-active, var(--color-info-bg));
    color: var(--button-print-active-text, var(--color-primary));
    border-color: var(--button-print-active-border, var(--color-primary));
    box-shadow: var(--button-print-active-shadow, none);
}

/* ==================== AI ACTION BUTTONS ==================== */
/* AI-triggered buttons with spinning icon on loading state. */

.btn-ai-generate,
.btn-ai-translate,
.btn-ai-description,
.ui-button--ai {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background: var(--button-ai-background, var(--color-background));
    color: var(--button-ai-text, var(--color-primary));
    border: var(--border-width-thin) solid var(--button-ai-border, var(--color-primary));
    box-shadow: var(--button-ai-shadow, none);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}
.btn-ai-generate:hover,
.btn-ai-translate:hover,
.btn-ai-description:hover,
.ui-button--ai:hover {
    background: var(--button-ai-hover, var(--color-primary));
    color: var(--button-ai-hover-text, var(--button-primary-text, var(--color-white, #fff)));
    border-color: var(--button-ai-hover-border, var(--color-primary));
    box-shadow: var(--button-ai-hover-shadow, none);
}
.btn-ai-generate:active,
.btn-ai-translate:active,
.btn-ai-description:active,
.ui-button--ai:active {
    background: var(--button-ai-active, var(--color-primary-hover));
    color: var(--button-ai-active-text, var(--color-white, #fff));
    border-color: var(--button-ai-active-border, var(--color-primary-hover));
    box-shadow: var(--button-ai-active-shadow, none);
}
.btn-ai-generate:disabled,
.btn-ai-translate:disabled,
.btn-ai-description:disabled,
.ui-button--ai:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-ai-generate .ai-icon,
.btn-ai-translate .ai-icon,
.btn-ai-description .ai-icon,
.ui-button--ai .ai-icon {
    font-size: var(--font-size-sm);
}
.btn-ai-generate.loading .ai-icon,
.btn-ai-translate.loading .ai-icon,
.btn-ai-description.loading .ai-icon,
.ui-button--ai.loading .ai-icon {
    animation: ai-spin 1s linear infinite;
}
@keyframes ai-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==================== SEMANTIC ALIAS BUTTONS ==================== */
/* Semantic aliases to existing variants — kept for template compatibility.
   New code should use .btn .btn-primary/.btn-danger/.btn-outline directly. */

/* Create — alias of btn-primary */
.btn-create,
.ui-button--create {
    background-color: var(--button-primary-background);
    color: var(--button-primary-text, var(--color-white, #fff));
    border: var(--border-width-thin) solid var(--button-primary-border, transparent);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-fast);
}
.btn-create:hover,
.ui-button--create:hover {
    background-color: var(--button-primary-hover);
}

/* Remove / Clear / Disconnect / Detach — alias of btn-danger text style */
.btn-remove, .btn-remove-block, .btn-clear, .btn-clear-selection,
.btn-disconnect, .btn-detach,
.ui-button--remove {
    background: transparent;
    color: var(--color-error);
    border: var(--border-width-thin) solid var(--color-error);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: var(--font-size-xs);
    transition: var(--transition-fast);
}
.btn-remove:hover, .btn-remove-block:hover, .btn-clear:hover, .btn-clear-selection:hover,
.btn-disconnect:hover, .btn-detach:hover,
.ui-button--remove:hover {
    background: var(--color-error);
    color: var(--color-white, #fff);
}

/* Connect — alias of btn-success */
.btn-connect,
.ui-button--connect {
    background-color: var(--button-success-background);
    color: var(--button-success-text, var(--color-white, #fff));
    border: var(--border-width-thin) solid var(--button-success-border, transparent);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-fast);
}
.btn-connect:hover,
.ui-button--connect:hover {
    background-color: var(--button-success-hover);
}

/* Test / Show-map / Show-password / Close-selector / Secondary-action / Save-icon / Cancel-icon / Cancel-sm
   — aliases of btn-secondary */
.btn-test, .btn-show-map, .btn-show-password, .btn-close-selector,
.btn-secondary-action, .btn-save-icon, .btn-cancel-icon, .btn-cancel-sm,
.ui-button--alias-secondary {
    background-color: var(--button-secondary-background, var(--color-card-background));
    color: var(--button-secondary-text, var(--color-text));
    border: var(--border-width-thin) solid var(--button-secondary-border, var(--color-border));
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition-fast);
}
.btn-test:hover, .btn-show-map:hover, .btn-show-password:hover, .btn-close-selector:hover,
.btn-secondary-action:hover, .btn-save-icon:hover, .btn-cancel-icon:hover, .btn-cancel-sm:hover,
.ui-button--alias-secondary:hover {
    background-color: var(--button-secondary-hover, var(--color-background));
}

/* Outline variants (btn-outline-{variant}) — deprecated, use btn + btn-outline + btn-{variant} */
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
.btn-outline-danger, .btn-outline-warning {
    background: transparent;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition-fast);
}
.btn-outline-primary { color: var(--color-primary); border: var(--border-width-thin) solid var(--color-primary); }
.btn-outline-primary:hover { background: var(--color-primary); color: var(--color-white, #fff); }
.btn-outline-secondary { color: var(--color-secondary); border: var(--border-width-thin) solid var(--color-secondary); }
.btn-outline-secondary:hover { background: var(--color-secondary); color: var(--color-white, #fff); }
.btn-outline-success { color: var(--color-success); border: var(--border-width-thin) solid var(--color-success); }
.btn-outline-success:hover { background: var(--color-success); color: var(--color-white, #fff); }
.btn-outline-danger { color: var(--color-error); border: var(--border-width-thin) solid var(--color-error); }
.btn-outline-danger:hover { background: var(--color-error); color: var(--color-white, #fff); }
.btn-outline-warning { color: var(--color-warning); border: var(--border-width-thin) solid var(--color-warning); }
.btn-outline-warning:hover { background: var(--color-warning); color: var(--color-white, #fff); }
/* disabled outline (TD-64 W13.5): паритет с legacy .btn-{variant}-outline:disabled — opacity/cursor + отмена hover-заливки */
.btn-outline-primary:disabled, .btn-outline-secondary:disabled, .btn-outline-success:disabled,
.btn-outline-danger:disabled, .btn-outline-warning:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-outline-primary:disabled:hover { background: transparent; color: var(--color-primary); }
.btn-outline-secondary:disabled:hover { background: transparent; color: var(--color-secondary); }
.btn-outline-success:disabled:hover { background: transparent; color: var(--color-success); }
.btn-outline-danger:disabled:hover { background: transparent; color: var(--color-error); }
.btn-outline-warning:disabled:hover { background: transparent; color: var(--color-warning); }

/* Text-only danger (used for inline unlink) */
.btn-danger-text {
    background: none;
    border: none;
    color: var(--color-error);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    text-decoration: underline;
}
.btn-danger-text:hover {
    color: var(--color-error-dark, var(--color-error));
    text-decoration: none;
}

/* Validation error highlight — added via JS on submit when a required button-field is missing */
.btn-error-highlight {
    border-color: var(--color-error) !important;
    box-shadow: 0 0 0 2px var(--color-error-bg);
    color: var(--color-error);
    transition: border-color var(--transition-duration-default), box-shadow var(--transition-duration-default);
}

/* ==================== FILTER BUTTONS (.btn-apply / .btn-reset) ==================== */
/* Используются на страницах charges/receipts/payments/translations (фильтры таблиц).
   Полностью редактируемые через Brand Book popup (data-variant="apply" / "reset"). */

.btn-apply,
.ui-button--apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* TD-86 Wave3: снимаем базовую .btn-геометрию (width:100% / min-height:72px / min-width:72px),
       чтобы канон ui_button({special:'apply'}) = «.btn .btn-apply» рендерил компактную фильтр-кнопку,
       а не растянутую мобайл-кнопку. auto (не 0) = initial-значение голого .btn-apply: во flex-ряду
       (.filter-actions) кнопка не ужимается уже контента, как и в bare-рендере. */
    width: auto;
    min-width: auto;
    min-height: auto;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--button-apply-background, var(--color-primary));
    color: var(--button-apply-text, var(--color-white, #fff));
    border: var(--border-width-thin) solid var(--button-apply-border, var(--color-primary));
    box-shadow: var(--button-apply-shadow, none);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-fast);
    text-decoration: none;
}
.btn-apply:hover,
.ui-button--apply:hover {
    background: var(--button-apply-hover, var(--color-primary-hover));
    color: var(--button-apply-hover-text, var(--color-white, #fff));
    border-color: var(--button-apply-hover-border, var(--color-primary-hover));
    box-shadow: var(--button-apply-hover-shadow, none);
}
.btn-apply:active,
.ui-button--apply:active {
    background: var(--button-apply-active, var(--color-primary-hover));
    color: var(--button-apply-active-text, var(--color-white, #fff));
    border-color: var(--button-apply-active-border, var(--color-primary-hover));
    box-shadow: var(--button-apply-active-shadow, none);
}
.btn-apply:disabled,
.ui-button--apply:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-reset,
.ui-button--reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* TD-86 Wave3: снимаем базовую .btn-геометрию (auto = initial голого .btn-reset) — см. .btn-apply выше. */
    width: auto;
    min-width: auto;
    min-height: auto;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--button-reset-background, var(--color-card-background));
    color: var(--button-reset-text, var(--color-text-muted));
    border: var(--border-width-thin) solid var(--button-reset-border, var(--color-border));
    box-shadow: var(--button-reset-shadow, none);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-fast);
    text-decoration: none;
}
.btn-reset:hover,
.ui-button--reset:hover {
    background: var(--button-reset-hover, var(--color-background));
    color: var(--button-reset-hover-text, var(--color-secondary));
    border-color: var(--button-reset-hover-border, var(--color-secondary));
    box-shadow: var(--button-reset-hover-shadow, none);
    text-decoration: none;
}
.btn-reset:active,
.ui-button--reset:active {
    background: var(--button-reset-active, var(--color-disabled));
    color: var(--button-reset-active-text, var(--color-secondary));
    border-color: var(--button-reset-active-border, var(--color-secondary));
    box-shadow: var(--button-reset-active-shadow, none);
}

/* .btn-link — text-link style button (Back to settings, Cancel, etc) */
.btn-link,
.ui-button--link {
    display: inline-flex;
    align-items: center;
    /* TD-86 Wave3: снимаем базовую .btn-геометрию — канон ui_button({variant:'link'}) = «.btn .btn-link»
       рендерит компактную текст-ссылку, а не растянутую 72px-кнопку (прецедент: reset_password/_description).
       auto (не 0) = initial голого .btn-link. NB: компактность зашита в класс; link'у, которому нужна
       full-width геометрия, потребуется отдельная ось (widthMode) — сейчас таких нет. */
    width: auto;
    min-width: auto;
    min-height: auto;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--button-link-background, transparent);
    color: var(--button-link-text, var(--color-primary));
    border: var(--border-width-thin) solid var(--button-link-border, transparent);
    box-shadow: var(--button-link-shadow, none);
    font-size: var(--font-size-sm);
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-fast);
}
.btn-link:hover,
.ui-button--link:hover {
    background: var(--button-link-hover, transparent);
    color: var(--button-link-hover-text, var(--color-primary-hover));
    border-color: var(--button-link-hover-border, transparent);
    box-shadow: var(--button-link-hover-shadow, none);
    text-decoration: underline;
}
.btn-link:active,
.ui-button--link:active {
    background: var(--button-link-active, transparent);
    color: var(--button-link-active-text, var(--color-primary-hover));
    border-color: var(--button-link-active-border, transparent);
}

/* ==================== PAGE-SPECIFIC BUTTON ALIASES ==================== */
/* Классы, которые раньше определялись inline в <style> блоках отдельных страниц.
   Теперь все наследуют CSS-переменные Brand Book и редактируются через Brand Book popup
   (меняешь соответствующий --button-*-* токен — меняются везде). */

/* Print family — alias of btn-print-block (editable via "print" variant) */
.btn-print, .btn-print-all-addendums, .btn-print-contract,
.btn-acceptance-act, .btn-return-act {
    background: var(--button-print-background, transparent);
    color: var(--button-print-text, var(--color-text));
    border: var(--border-width-thin) solid var(--button-print-border, var(--color-border));
    box-shadow: var(--button-print-shadow, none);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    transition: var(--transition-fast);
}
.btn-print:hover, .btn-print-all-addendums:hover, .btn-print-contract:hover,
.btn-acceptance-act:hover, .btn-return-act:hover {
    background: var(--button-print-hover, var(--color-background));
    color: var(--button-print-hover-text, var(--color-text));
    border-color: var(--button-print-hover-border, var(--color-border));
    box-shadow: var(--button-print-hover-shadow, none);
}

/* Delete inline aliases — alias of btn-icon-danger (editable via "icon-danger" variant) */
.btn-delete-receipt, .btn-delete-charge, .btn-delete-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--button-icon-danger-background, var(--color-error-bg));
    color: var(--button-icon-danger-text, var(--color-error));
    border: var(--border-width-thin) solid var(--button-icon-danger-border, var(--color-error-bg));
    box-shadow: var(--button-icon-danger-shadow, none);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}
.btn-delete-receipt:hover, .btn-delete-charge:hover, .btn-delete-sm:hover {
    background: var(--button-icon-danger-hover, var(--color-error));
    color: var(--button-icon-danger-hover-text, var(--color-white, #fff));
    border-color: var(--button-icon-danger-hover-border, var(--color-error));
}

/* Save/Cancel inline aliases — alias of btn-icon-save / btn-icon-cancel */
.btn-save-icon, .btn-save-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--button-icon-save-background, var(--color-primary));
    color: var(--button-icon-save-text, var(--color-white, #fff));
    border: var(--border-width-thin) solid var(--button-icon-save-border, var(--color-primary));
    box-shadow: var(--button-icon-save-shadow, none);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}
.btn-save-icon:hover, .btn-save-sm:hover {
    background: var(--button-icon-save-hover, var(--color-card-background));
    color: var(--button-icon-save-hover-text, var(--color-primary));
}

.btn-cancel-icon, .btn-cancel-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--button-icon-cancel-background, var(--color-card-background));
    color: var(--button-icon-cancel-text, var(--color-text-muted));
    border: var(--border-width-thin) solid var(--button-icon-cancel-border, var(--color-border));
    box-shadow: var(--button-icon-cancel-shadow, none);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}
.btn-cancel-icon:hover, .btn-cancel-sm:hover {
    background: var(--button-icon-cancel-hover, var(--color-error-bg));
    color: var(--button-icon-cancel-hover-text, var(--color-error));
    border-color: var(--button-icon-cancel-hover-border, var(--color-error));
}

/* Confirm small variants — alias of btn-confirm */
.btn-confirm-inline, .btn-confirm-small {
    background-color: var(--button-confirm-background, var(--button-success-background));
    color: var(--button-confirm-text, var(--color-white, #fff));
    border: var(--border-width-thin) solid var(--button-confirm-border, transparent);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition-fast);
}
.btn-confirm-inline:hover, .btn-confirm-small:hover {
    background-color: var(--button-confirm-hover, var(--button-success-hover));
}

/* Create variations — alias of btn-primary */
.btn-create-first, .btn-copy-contract {
    background-color: var(--button-primary-background);
    color: var(--button-primary-text, var(--color-white, #fff));
    border: var(--border-width-thin) solid var(--button-primary-border, transparent);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-fast);
}
.btn-create-first:hover, .btn-copy-contract:hover {
    background-color: var(--button-primary-hover);
}

/* Edit inline actions — alias of btn-warning */
.btn-edit-amount {
    background: transparent;
    color: var(--button-warning-background);
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    text-decoration: underline;
}
.btn-edit-amount:hover {
    color: var(--button-warning-hover);
    text-decoration: none;
}

/* Property show page specials — aliases using primary/secondary tokens */
.btn-messages, .btn-handshake, .btn-negotiations-list,
.btn-proposal, .btn-proposals-list, .btn-partner-invite,
.btn-expense-link, .btn-help-demo {
    background-color: var(--button-primary-background);
    color: var(--button-primary-text, var(--color-white, #fff));
    border: var(--border-width-thin) solid var(--button-primary-border, transparent);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    text-decoration: none;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.btn-messages:hover, .btn-handshake:hover, .btn-negotiations-list:hover,
.btn-proposal:hover, .btn-proposals-list:hover, .btn-partner-invite:hover,
.btn-expense-link:hover, .btn-help-demo:hover {
    background-color: var(--button-primary-hover);
    text-decoration: none;
}

/* .action-icon (+ action-confirm/btn-unconfirm/action-confirmed/action-delete) — УДАЛЕНО (TD-63):
   мёртвый класс (0 использований в шаблонах/JS; комментарий о adjustments/billing устарел —
   места давно мигрированы на companion-классы). Канон icon-кнопки = .btn-icon. */

/* ==================== ACTION BUTTONS ==================== */
/* Action buttons — large CTA buttons used in charges/expenses/penalties/admin/calendar.
   Previously defined inline across 8 templates with broken --color-gradient-* vars. */
.action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.625rem 1.25rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    min-height: 38px;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-default, all 0.25s cubic-bezier(0.4, 0, 0.2, 1));
    text-decoration: none;
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.1));
    white-space: nowrap;
}
.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
    text-decoration: none;
}
.action-btn:active { transform: translateY(0); }
.action-btn svg { flex-shrink: 0; }

.action-btn-icon {
    padding: 0.625rem;
    min-width: 38px;
    justify-content: center;
    gap: 0;
}

.action-btn-primary {
    background: var(--button-primary-background, var(--color-primary));
    color: var(--button-primary-text, var(--color-white, #fff));
}
.action-btn-primary:hover {
    background: var(--button-primary-hover, var(--color-primary-hover));
    color: var(--button-primary-hover-text, var(--color-white, #fff));
}

.action-btn-warning {
    background: var(--button-warning-background, var(--color-warning));
    color: var(--button-warning-text, var(--color-white, #fff));
}
.action-btn-warning:hover {
    background: var(--button-warning-hover, var(--color-warning-hover, var(--color-warning)));
    color: var(--button-warning-hover-text, var(--color-white, #fff));
}

.action-btn-success {
    background: var(--button-success-background, var(--color-success));
    color: var(--button-success-text, var(--color-white, #fff));
}
.action-btn-success:hover {
    background: var(--button-success-hover, var(--color-success-hover, var(--color-success)));
    color: var(--button-success-hover-text, var(--color-white, #fff));
}

/* Activate — alias of btn-warning */
.btn-activate {
    background-color: var(--button-warning-background);
    color: var(--button-warning-text, var(--color-white, #fff));
    border: var(--border-width-thin) solid var(--button-warning-border, transparent);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition-fast);
}
.btn-activate:hover {
    background-color: var(--button-warning-hover);
}

/* Disabled state for all legacy aliases */
.btn-disabled,
.btn-delete-receipt:disabled, .btn-delete-charge:disabled,
.btn-save-icon:disabled, .btn-cancel-icon:disabled,
.btn-confirm-inline:disabled, .btn-confirm-small:disabled,
.btn-messages:disabled, .btn-create-first:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Extra-small size modifier (btn-xs — contracts/show etc.) */
.btn-xs {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xxs);
}

/* ==================== FORM ACTIONS (Save/Cancel bar) ==================== */
/* Центральный block для new/edit страниц — используется через
   {% include 'components/_form_actions.html.twig' %}.
   Правило Brand Book: не ставить отдельный back-link, если есть Cancel. */
.form-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    flex-wrap: wrap;
    align-items: center;
}
.form-actions--end { justify-content: flex-end; }
.form-actions--start { justify-content: flex-start; }
.form-actions--center { justify-content: center; }
.form-actions--between { justify-content: space-between; }
.form-actions .btn { min-width: 120px; }

@media (max-width: 575px) {
    .form-actions .btn { min-width: 0; flex: 1; }
}

/* .copy-btn / .btn-copy — compact button in code blocks (guide templates, 90+ uses)
   Fully editable via Brand Book (data-variant="copy") */
.copy-btn,
.btn-copy,
.ui-button--copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    background: var(--button-copy-background, rgba(0,0,0,0.15));
    color: var(--button-copy-text, var(--color-white, #fff));
    border: var(--border-width-thin) solid var(--button-copy-border, transparent);
    box-shadow: var(--button-copy-shadow, none);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: background var(--transition-duration-default);
}
.copy-btn:hover,
.btn-copy:hover,
.ui-button--copy:hover {
    background: var(--button-copy-hover, rgba(0,0,0,0.3));
    color: var(--button-copy-hover-text, var(--color-white, #fff));
    border-color: var(--button-copy-hover-border, transparent);
    box-shadow: var(--button-copy-hover-shadow, none);
}
.copy-btn:active,
.btn-copy:active,
.ui-button--copy:active {
    background: var(--button-copy-active, rgba(0,0,0,0.45));
    color: var(--button-copy-active-text, var(--color-white, #fff));
    border-color: var(--button-copy-active-border, transparent);
    box-shadow: var(--button-copy-active-shadow, none);
}

/* ═══ User Remove Button ═══ */
.btn-user-remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-background);
    color: var(--color-error);
}
.btn-user-remove:hover {
    background-color: var(--color-error);
    color: var(--button-primary-text);
}

/* ═══ Tenant Info Block ═══ */
.tenant-info-block {
    display: flex; align-items: center; gap: var(--spacing-sm);
    font-size: var(--font-size-xs); color: var(--color-text-muted);
    padding: var(--spacing-xs) 0;
}
.tenant-info-icon { font-size: var(--font-size-xs); flex-shrink: 0; }
.tenant-info-name { font-weight: var(--font-weight-medium); color: var(--color-text); }
.tenant-info-date { white-space: nowrap; }
.tenant-info-open { font-style: italic; }

/* ═══ Photo Carousel ═══ */
.photo-carousel {
    position: relative;
    user-select: none;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 var(--spacing-lg) var(--spacing-md);
}
.photo-carousel__track-wrap {
    overflow: hidden;
    border-radius: var(--border-radius-md);
    width: 100%;
    min-width: 0;
}
.photo-carousel__track {
    display: flex;
    gap: var(--spacing-sm);
    transition: transform var(--transition-duration-slow) cubic-bezier(.4,0,.2,1);
    will-change: transform;
}
.photo-carousel__item {
    flex: 0 0 var(--carousel-item-width, 180px);
    width: var(--carousel-item-width, 180px);
    aspect-ratio: 1;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: var(--color-table-bg);
    position: relative;
    cursor: pointer;
    transition: transform var(--transition-duration-default), box-shadow var(--transition-duration-default);
}
.photo-carousel__item:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-card-hover);
}
/* Lazy-image wrapper must fill the square item so the inner img can cover it. */
.photo-carousel__item .lazy-img-wrapper {
    display: block;
    width: 100%;
    height: 100%;
}
.photo-carousel__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.photo-carousel__caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: linear-gradient(var(--carousel-overlay-dark, rgba(0,0,0,0.65)), transparent);
    color: var(--color-white, #fff);
    font-size: var(--font-size-xxs);
    font-weight: var(--font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.photo-carousel__type {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: linear-gradient(transparent, var(--carousel-overlay-dark, rgba(0,0,0,0.65)));
    color: var(--color-white, #fff);
    font-size: var(--font-size-xxs);
}
/* Prev/next — нейтральные overlay icon-кнопки (.btn-icon.btn-icon-overlay):
   форма/размер/фон/тень/scale-hover — из канона; вертикальное центрирование +
   совмещение со scale-hover — из канон-класса .btn-icon-overlay--centered (в разметке);
   companion держит ТОЛЬКО позиционирование и глиф-типографику (юникод ‹ ›). */
.photo-carousel__btn {
    position: absolute;
    top: 50%;
    z-index: 2;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}
.photo-carousel__btn:disabled {
    opacity: 0.25;
    cursor: default;
}
.photo-carousel__btn--prev { left: 0; }
.photo-carousel__btn--next { right: 0; }
.photo-carousel__dots {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}
.photo-carousel__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-table-border);
    transition: background var(--transition-duration-default), transform var(--transition-duration-default);
    cursor: pointer;
}
.photo-carousel__dot.active {
    background: var(--color-primary);
    transform: scale(1.3);
}

/* ── Photo Carousel: Show All button + full grid ── */
.photo-carousel__all-wrap {
    margin-top: var(--spacing-sm);
    text-align: center;
}
.photo-carousel__show-all-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border: var(--border-width-thin) solid var(--color-primary);
    border-radius: var(--border-radius-md);
    background: transparent;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background var(--transition-duration-default), color var(--transition-duration-default);
}
.photo-carousel__show-all-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}
.photo-carousel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--spacing-sm);
}
.photo-carousel__grid-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: var(--color-table-bg);
    cursor: pointer;
    transition: transform var(--transition-duration-default), box-shadow var(--transition-duration-default);
}
.photo-carousel__grid-item:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-card-hover);
}
.photo-carousel__grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Dashboard Property Card (_property_dashboard_card.html.twig) ─────────── */
.dashboard-property-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}
.dashboard-property-card {
    display: block;
    padding: 0;
    background: var(--color-card-background);
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    color: inherit;
    transition: var(--transition-default);
    overflow: hidden;
    position: relative;
    height: 300px;
    width: 100%;
    cursor: pointer;
}
.dashboard-property-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}
.dashboard-property-card__body {
    padding: var(--spacing-md);
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    background: var(--color-card-background-overlay, rgba(255, 255, 255, 0.9));
    z-index: 10;
}
.dashboard-property-card__body .tenant-info-block { margin-top: var(--spacing-sm); }
.property-card-cover { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.property-card-cover img { width: 100%; height: 100%; display: block; object-fit: fill; }
.property-card-cover .lazy-img-wrapper { width: 100%; height: 100%; }
.property-card-cover--placeholder { background: var(--color-input-bg, #f4f4f4); }
.property-card-cover--placeholder img { object-fit: contain; padding: var(--spacing-lg); box-sizing: border-box; opacity: 0.35; }
.property-card-header { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: 10px; }
.property-color-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.property-card-name { flex: 1; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.property-card-total { font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); white-space: nowrap; }
.property-card-breakdown { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--spacing-sm); text-align: center; }
.property-card-col { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); }
.property-card-icon { font-size: var(--font-size-sm); }
.property-card-amount { font-weight: var(--font-weight-semibold); font-size: var(--font-size-xs); }
.property-card-badges { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; margin-top: var(--spacing-sm); }

@media (max-width: 767px) {
    .dashboard-property-cards { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .dashboard-property-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ── Contract item (_contract_item.html.twig) ── */
.contracts-list { display: flex; flex-direction: column; gap: var(--spacing-md); }

.contract-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-card-background);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-card);
    border-left: 4px solid var(--color-border-light);
}

.contract-item.active { border-left-color: var(--color-success); background: var(--color-background); }
.contract-item.expired { border-left-color: var(--color-error); background: var(--color-background); }
.contract-item.future { border-left-color: var(--color-primary); background: var(--color-background); }
.contract-item.deactivated { border-left-color: var(--color-text-muted); background: var(--color-background); opacity: 0.85; }

.contract-info { flex: 1; min-width: 0; }

.contract-name {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    color: var(--color-secondary);
    text-decoration: none;
    display: block;
    margin-bottom: var(--spacing-sm);
}
.contract-name:hover { color: var(--color-primary); }

.contract-meta {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xs);
}

.contract-tenant { font-weight: var(--font-weight-medium); color: var(--color-secondary); }

.contract-type {
    background: var(--color-info-bg);
    color: var(--color-primary-hover);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
}

.contract-dates { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.contract-author { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.open-ended { font-style: italic; color: var(--color-success); }

.contract-status { flex-shrink: 0; }
.contract-actions { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; align-items: center; float: right; margin-left: var(--spacing-md); }
.contract-actions .btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; flex-shrink: 0; }

/* Blocks summary */
.contract-blocks { margin-top: var(--spacing-sm); }
.blocks-toggle { font-size: var(--font-size-xs); color: var(--color-primary); cursor: pointer; user-select: none; padding: 4px 0; }
.blocks-mini-table { width: 100%; border-collapse: collapse; margin-top: var(--spacing-sm); font-size: var(--font-size-xs); }
.blocks-mini-table th, .blocks-mini-table td { padding: 6px 8px; text-align: left; border-bottom: var(--border-width-thin) solid var(--color-border-light); }
.blocks-mini-table th { background: var(--color-background); color: var(--color-text-muted); font-weight: var(--font-weight-medium); font-size: var(--font-size-xs); }
.block-name { font-weight: var(--font-weight-medium); color: var(--color-secondary); }
.block-country { font-size: var(--font-size-xxs); color: var(--color-text-muted); }
.block-date { color: var(--color-text-muted); white-space: nowrap; }
.block-actions { width: 40px; text-align: center; }
.bool-yes { color: var(--color-success); font-weight: var(--font-weight-medium); }
.bool-no { color: var(--color-error); font-weight: var(--font-weight-medium); }

.print-all-addendums-container { margin-top: var(--spacing-sm); display: flex; justify-content: flex-end; }

/* User contracts row layout (inside .card) */
.contract-row { padding: var(--spacing-md) var(--spacing-md); }
.contract-row.utilities-landlord { background: var(--color-background); border-color: var(--color-border-light); }
.contract-row.utilities-landlord .property-link,
.contract-row.utilities-landlord .meta-value { color: var(--color-text-muted); }
.contract-row.utilities-tenant { background: var(--color-success-bg); border-color: var(--color-success); }
.contract-row-top { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); flex-wrap: wrap; }
.contract-row-right { display: flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; }
.contract-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.meta-sep { color: var(--color-border); }
.meta-item { display: flex; gap: var(--spacing-xs); align-items: center; }
.meta-label { color: var(--color-text-muted); }
.meta-value { color: var(--color-text); font-weight: var(--font-weight-medium); }

.property-link { color: var(--color-secondary); text-decoration: none; font-weight: var(--font-weight-medium); padding-left: var(--spacing-sm); }
.property-link:hover { color: var(--color-primary); }

/* TD-51 W2: static border width/style for property-color links/tags — the
   per-property color itself is set by the `common--property-color` Stimulus
   controller (data-common--property-color-color-value="{{ property.color }}"),
   replacing `style="border-left: 3px solid {{ property.color }}"`. */
.property-color-border { border-left-width: 3px; border-left-style: solid; border-left-color: transparent; }

.modal-actions--top-gap { margin-top: var(--spacing-md); }
.back-link { margin-top: var(--spacing-lg); }
.inline-form { display: inline; margin: 0; }

@media (max-width: 767px) {
    .contract-item { flex-direction: column; align-items: flex-start; }
    .contract-status { width: 100%; }
    .contract-actions { float: none; margin-left: 0; width: 100%; justify-content: flex-start; }
}

@media (max-width: 575px) {
    .meta-sep { display: none; }
    .contract-row-meta { flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); }
}


/* NB: мёртвый дубль базового .btn-icon (40px, border-radius-sm) + legacy .btn-icon-delete
   удалены (TD-63 кат. A): полностью затенялись каноном — .btn-icon (круг 36px, ~стр.3180)
   и .btn-icon-delete (danger-вариант, ~стр.3360), оба позже по каскаду. */

/* file-input-hidden: visually hidden file inputs triggered by labels */
.file-input-hidden { display: none; }

/* Avatar upload widget — settings page personal info card */
.avatar-upload-widget {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) 0;
    margin-bottom: var(--spacing-md);
    border-bottom: var(--border-width-thin) solid var(--color-border);
}
.avatar-upload-preview {
    flex-shrink: 0;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-table-header);
    border: var(--border-width-normal) solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.avatar-upload-preview > div,
.avatar-upload-preview picture {
    display: block;
    width: 100%;
    height: 100%;
}
.avatar-upload-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.avatar-upload-fallback {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    user-select: none;
}
.avatar-upload-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.avatar-upload-label {
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--font-size-base, 14px);
    color: var(--color-text);
}
.avatar-upload-buttons {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}
.avatar-upload-btn {
    cursor: pointer;
}
.avatar-upload-error {
    font-size: var(--font-size-xs);
    color: var(--color-error, #C30A41);
    margin-top: var(--spacing-xs);
}

/* ── Settings page ── */

.settings-container {
    max-width: 600px;
}
.page-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-lg) 0;
}
.settings-form .card {
    margin-bottom: var(--spacing-md);
}
.card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-md) 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}
/* .card-title--plain (TD-61 B-guard): заголовок карточки без разделителя/отступа снизу —
   встречался идентично в 5 page-CSS (admin-penalties/properties-penalties/repair-compensations/
   communications-show, admin-users-roles). Канонизирован как модификатор вместо bare-дублей. */
.card-title--plain {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-md) 0;
    padding-bottom: 0;
    border-bottom: none;
}
/* .card-title--lg-flush (TD-61 B-guard): крупный заголовок без отступа/разделителя —
   встречался идентично в admin-lt-adjustments-show/admin-adjustments-show. */
.card-title--lg-flush {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-secondary);
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
}
/* .card-title--text-color (TD-61 B-guard): вариант .card-title--plain с --color-text
   вместо --color-secondary — встречался идентично в admin-tenant-assets-show/
   properties-tenant-assets-show. */
.card-title--text-color {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text, var(--color-secondary));
    margin: 0 0 var(--spacing-md) 0;
    padding-bottom: 0;
    border-bottom: none;
}
.form-hint {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.form-error {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-error);
}
.input-empty-warning {
    border-color: var(--color-warning);
    animation: pulse-warning 2s infinite;
}
.input-empty-warning:focus {
    border-color: var(--color-warning);
    box-shadow: var(--shadow-warning-focus);
    animation: none;
}
.form-hint-warning {
    color: var(--color-warning);
    font-weight: var(--font-weight-medium);
}
@keyframes pulse-warning {
    0%, 100% { border-color: var(--color-warning); }
    50% { border-color: var(--color-background); }
}
.phone-input-wrapper {
    display: flex;
    align-items: center;
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background: var(--color-card-background);
    gap: 0;
}
.phone-input-wrapper:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary-focus);
}
.phone-prefix {
    padding: var(--spacing-md);
    background: var(--color-background);
    color: var(--color-secondary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    border-right: var(--border-width-thin) solid var(--color-border);
    white-space: nowrap;
}
.phone-segment {
    width: 44px;
    border: none !important;
    text-align: center;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-md) var(--spacing-xs);
    background: transparent;
    margin-left: var(--spacing-sm);
}
.phone-segment-sm {
    width: 32px;
}
.phone-segment:focus {
    outline: none;
    background: var(--color-info-bg);
}
.phone-segment:first-of-type {
    margin-left: 0;
}
.phone-input-wrapper.error,
.tax-input-wrapper.error {
    border-color: var(--color-error);
}
.phone-input-wrapper.error:focus-within,
.tax-input-wrapper.error:focus-within {
    box-shadow: var(--shadow-error-focus);
}
.form-control-unified.input-error {
    border-color: var(--color-error);
}
.form-control-unified.input-error:focus {
    box-shadow: var(--shadow-error-focus);
}

/* TD-51 W2: replaces style="text-transform:uppercase|lowercase" on code-input fields (admin/*-new forms). */
.form-input-uppercase { text-transform: uppercase; }
.form-input-lowercase { text-transform: lowercase; }

/* TD-51 W2: replaces style="border:0;border-top:1px solid var(--color-border);margin:20px 0" on <hr> dividers.
   margin 20px — намеренно off-scale (сохранение исходной вёрстки); НЕ приводить к токену. */
.hr-divider { border: 0; border-top: var(--border-width-thin) solid var(--color-border); margin: 20px 0; }

.tax-input-wrapper {
    display: flex;
    align-items: center;
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background: var(--color-card-background);
    width: fit-content;
}
.tax-input-wrapper:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary-focus);
}
.tax-segment {
    width: 60px;
    border: none !important;
    text-align: center;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-md) var(--spacing-xs);
    background: transparent;
    margin-left: var(--spacing-sm);
}
.tax-segment:first-child {
    margin-left: var(--spacing-md);
}
.tax-segment:last-child {
    margin-right: var(--spacing-md);
}
.tax-segment-sm {
    width: 40px;
}
.tax-segment:focus {
    outline: none;
    background: var(--color-info-bg);
}

.card-input-wrapper {
    display: flex;
    align-items: center;
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background: var(--color-card-background);
    width: fit-content;
}
.card-input-wrapper:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary-focus);
}
.card-segment {
    width: 60px;
    border: none !important;
    text-align: center;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-md) var(--spacing-xs);
    background: transparent;
    margin-left: var(--spacing-sm);
}
.card-segment:first-child {
    margin-left: var(--spacing-md);
}
.card-segment:last-child {
    margin-right: var(--spacing-md);
}
.card-segment:focus {
    outline: none;
    background: var(--color-info-bg);
}

.subsection-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    margin: var(--spacing-lg) 0 var(--spacing-md) 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.radio-group {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}
.radio-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
}
.radio-label input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
}
.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.requisites-ukraine-card {
    border-left: 4px solid var(--color-primary);
}

.connected-account {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0;
    border-bottom: var(--border-width-thin) solid var(--color-border);
}
.connected-account:last-child {
    border-bottom: none;
}
.connected-account-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 84px;
    justify-content: flex-end;
}
.connected-account-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}
.connected-account-icon {
    flex-shrink: 0;
}
.connected-account-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.connected-account-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-secondary);
}
.connected-account-status {
    font-size: var(--font-size-xs);
}
.connected-account-status.connected {
    color: var(--color-success);
}
.connected-account-status.not-connected {
    color: var(--color-text-muted);
}
.connected-account-status.warning {
    color: var(--color-warning);
}
.btn-activate {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
}
.btn-activate:hover {
    background: var(--color-background);
}
.telegram-activation-warning {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-warning-bg);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    color: var(--color-warning-dark);
    margin-top: var(--spacing-md);
}
.telegram-activation-warning a {
    color: var(--color-info);
    font-weight: var(--font-weight-medium);
}
/* ============================================================================
   Icon buttons (.btn-icon) — ЕДИНЫЙ КАНОН (TD-63: перенесено из header-buttons.css).
   Форма = КРУГ (border-radius:50%); цвета на токенах --button-icon-* (редактируются
   через брендбук-редактор / /admin/styles). Размер: .btn-sm = круг 28px (ниже).
   ============================================================================ */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--button-icon-size-md, 36px);
    height: var(--button-icon-size-md, 36px);
    padding: 0;
    border-radius: 50%;
    background: var(--button-icon-background, var(--color-card-background));
    color: var(--button-icon-text, var(--color-text-muted));
    border: var(--border-width-thin) solid var(--button-icon-border, var(--color-border));
    box-shadow: var(--button-icon-shadow, none);
    cursor: pointer;
    transition: var(--transition-fast);
    text-decoration: none;
    line-height: 1;
}
.btn-icon:hover {
    background: var(--button-icon-hover, var(--color-card-background));
    color: var(--button-icon-hover-text, var(--color-primary));
    border-color: var(--button-icon-hover-border, var(--color-primary));
    box-shadow: var(--button-icon-hover-shadow, none);
    text-decoration: none;
}
.btn-icon:active {
    background: var(--button-icon-active, var(--color-background));
    color: var(--button-icon-active-text, var(--color-primary));
    border-color: var(--button-icon-active-border, var(--color-primary));
    box-shadow: var(--button-icon-active-shadow, none);
}
.btn-icon svg {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Плоская icon-кнопка (TD-63 шаг 5, категория D) — раскладка иконки без фона/рамки/фикс-формы.
   Для паразитов, бравших .btn-icon только ради display:flex (clear/close/burger и т.п.);
   размер/позицию задаёт companion-класс. */
.btn-icon-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: var(--transition-fast);
    line-height: 1;
}
.btn-icon-ghost:hover {
    color: var(--color-primary);
}
.btn-icon-ghost svg {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* File-preview remove × — компактный flat-контрол удаления на чипах файлов/вложений.
   База вида — .btn-icon-ghost (bg/border:none, muted, flat). Companion даёт компактную
   глиф-геометрию + delete-аффорданс (hover→danger). Единый канон (был дублирован inline
   в 5 шаблонах/page-CSS, TD-63 дрейф). Тёмный кружок-удаления в чате — отдельный класс
   .msg-attach-remove (conversation), коллизия имён устранена. */
.btn-icon-ghost.file-preview-remove {
    font-size: var(--font-size-lg);
    padding: 0 var(--spacing-xs);
    border-radius: var(--border-radius-sm);
}
.btn-icon-ghost.file-preview-remove:hover {
    color: var(--color-danger, var(--color-error));
}

/* CRM delete/unlink icon-кнопки: ghost-база (.btn-icon-ghost) + danger-аффорданс на hover.
   Единый канон (был дублирован inline на CRM-страницах, TD-63 дрейф crm-icon-btn). */
.btn-icon-ghost.crm-icon-danger:hover {
    color: var(--color-danger, var(--color-error));
}

/* Icon button size modifier (ось размера ⟂ форме — radius наследуется от .btn-icon).
   Маленькая icon-кнопка = .btn-icon.btn-sm = круг 28px. */
/* Extra-small size — круг 20px (TD-63 шаг 5, для мелких overlay-кнопок) */
.btn-icon.btn-xs {
    width: var(--button-icon-size-xs, 20px);
    height: var(--button-icon-size-xs, 20px);
    padding: 0; /* обнулить padding общего .btn-xs в icon-контексте */
}
.btn-icon.btn-xs svg {
    width: 12px;
    height: 12px;
}
.btn-icon.btn-sm {
    width: var(--button-icon-size-sm, 28px);
    height: var(--button-icon-size-sm, 28px);
    padding: 0; /* обнулить padding общего .btn-sm — иначе border-box распирает в овал */
}
.btn-icon.btn-sm svg {
    width: 14px;
    height: 14px;
}
/* Large size — круг 40px (канон крупной круглой кнопки действия, TD-63 консолидация круг-40) */
.btn-icon.btn-lg {
    width: var(--button-icon-size-lg, 40px);
    height: var(--button-icon-size-lg, 40px);
    min-height: unset; /* сбросить min-height общего .btn-lg в icon-контексте — иначе круг растягивается в овал (TD-63) */
    padding: 0; /* обнулить padding общего .btn-lg в icon-контексте */
}
.btn-icon.btn-lg svg {
    width: 20px;
    height: 20px;
}
/* Extra-large size — 52px (крупная квадрат-карточка-кнопка действия, напр. документы объекта; TD-63 категория B) */
.btn-icon.btn-xl {
    width: var(--button-icon-size-xl, 52px);
    height: var(--button-icon-size-xl, 52px);
    min-height: unset; /* сбросить min-height общего .btn-lg/.btn-xl в icon-контексте */
    padding: 0;
}
.btn-icon.btn-xl svg {
    width: 24px;
    height: 24px;
}
/* XXL size — 72px (большой круг, напр. btn-icon-only; TD-63 ось размера) */
.btn-icon.btn-xxl {
    width: var(--button-icon-size-xxl, 72px);
    height: var(--button-icon-size-xxl, 72px);
    min-height: unset; /* сбросить min-height общего размера в icon-контексте */
    padding: 0;
}
.btn-icon.btn-xxl svg {
    /* svg 20px намеренно (совпадает с .btn-icon-only svg) — нулевая регрессия иконки при будущей консолидации btn-icon-only на ось размера; НЕ «исправлять» на 24px ради консистентности с xl */
    width: 20px;
    height: 20px;
}

/* ============================================================================
   Icon button SHAPE modifier (ось формы ⟂ размеру/цвету — TD-63 категория B).
   .btn-icon = круг (база); .btn-icon-rounded-* переопределяет круг на
   ПРЯМОУГОЛЬНЫЙ скруглённый квадрат по шкале токенов брендбука «Тіні та
   заокруглення» (--border-radius-sm 4px / --border-radius 8px / -lg 12px).
   Для квадратных icon-кнопок действий (фильтр/таблица/тулбар), где круг не
   уместен. Размер по-прежнему задаёт .btn-sm/.btn-lg, цвет — .btn-icon-{variant}.
   ============================================================================ */
.btn-icon-rounded-sm {
    border-radius: var(--border-radius-sm);
}
.btn-icon-rounded {
    border-radius: var(--border-radius);
}
.btn-icon-rounded-lg {
    border-radius: var(--border-radius-lg);
}

/* ⚠️ Цвет-варианты ниже задают ТОЛЬКО background/color/border-color/box-shadow —
   НЕ добавлять сюда border-radius: форму задаёт ось формы выше (.btn-icon-rounded-*).
   Border-radius в цвет-варианте вернул бы круг поверх .btn-icon-rounded-* (равная
   специфичность 0,1,0, цвет-вариант идёт позже → победил бы). */
/* Primary variant */
.btn-icon-primary {
    background: var(--button-icon-primary-background, var(--color-info-bg));
    color: var(--button-icon-primary-text, var(--color-primary));
    border-color: var(--button-icon-primary-border, var(--color-info-bg));
    box-shadow: var(--button-icon-primary-shadow, none);
}
.btn-icon-primary:hover {
    background: var(--button-icon-primary-hover, var(--color-primary));
    color: var(--button-icon-primary-hover-text, var(--color-white, #fff));
    border-color: var(--button-icon-primary-hover-border, var(--color-primary));
    box-shadow: var(--button-icon-primary-hover-shadow, none);
}
.btn-icon-primary:active {
    background: var(--button-icon-primary-active, var(--color-primary-hover));
    color: var(--button-icon-primary-active-text, var(--color-white, #fff));
    border-color: var(--button-icon-primary-active-border, var(--color-primary-hover));
    box-shadow: var(--button-icon-primary-active-shadow, none);
}

/* Secondary / Outline variant */
.btn-icon-secondary,
.btn-icon-outline {
    background: var(--button-icon-secondary-background, var(--color-background));
    color: var(--button-icon-secondary-text, var(--color-text-muted));
    border-color: var(--button-icon-secondary-border, var(--color-border));
    box-shadow: var(--button-icon-secondary-shadow, none);
}
.btn-icon-secondary:hover,
.btn-icon-outline:hover {
    background: var(--button-icon-secondary-hover, var(--color-secondary));
    color: var(--button-icon-secondary-hover-text, var(--color-white, #fff));
    border-color: var(--button-icon-secondary-hover-border, var(--color-secondary));
    box-shadow: var(--button-icon-secondary-hover-shadow, none);
}
.btn-icon-secondary:active,
.btn-icon-outline:active {
    background: var(--button-icon-secondary-active, var(--color-secondary-hover));
    color: var(--button-icon-secondary-active-text, var(--color-white, #fff));
    border-color: var(--button-icon-secondary-active-border, var(--color-secondary-hover));
    box-shadow: var(--button-icon-secondary-active-shadow, none);
}

/* Danger / Delete variant */
.btn-icon-danger,
.btn-icon-delete {
    background: var(--button-icon-danger-background, var(--color-error-bg));
    color: var(--button-icon-danger-text, var(--color-error));
    border-color: var(--button-icon-danger-border, var(--color-border));
    box-shadow: var(--button-icon-danger-shadow, none);
}
.btn-icon-danger:hover,
.btn-icon-delete:hover {
    background: var(--button-icon-danger-hover, var(--color-error));
    color: var(--button-icon-danger-hover-text, var(--color-white, #fff));
    border-color: var(--button-icon-danger-hover-border, var(--color-error));
    box-shadow: var(--button-icon-danger-hover-shadow, none);
}
.btn-icon-danger:active,
.btn-icon-delete:active {
    background: var(--button-icon-danger-active, var(--color-error-dark, var(--color-error)));
    color: var(--button-icon-danger-active-text, var(--color-white, #fff));
    border-color: var(--button-icon-danger-active-border, var(--color-error-dark, var(--color-error)));
    box-shadow: var(--button-icon-danger-active-shadow, none);
}

/* Save variant — primary filled form action */
.btn-icon-save {
    background: var(--button-icon-save-background, var(--color-primary));
    color: var(--button-icon-save-text, var(--button-primary-text, var(--color-white, #fff)));
    border-color: var(--button-icon-save-border, var(--color-primary));
    box-shadow: var(--button-icon-save-shadow, none);
}
.btn-icon-save:hover {
    background: var(--button-icon-save-hover, var(--color-card-background));
    color: var(--button-icon-save-hover-text, var(--color-primary));
    border-color: var(--button-icon-save-hover-border, var(--color-primary));
    box-shadow: var(--button-icon-save-hover-shadow, none);
}
.btn-icon-save:active {
    background: var(--button-icon-save-active, var(--color-primary-hover));
    color: var(--button-icon-save-active-text, var(--color-white, #fff));
    border-color: var(--button-icon-save-active-border, var(--color-primary-hover));
    box-shadow: var(--button-icon-save-active-shadow, none);
}

/* Cancel variant — error on hover */
.btn-icon-cancel {
    background: var(--button-icon-cancel-background, var(--color-card-background));
    color: var(--button-icon-cancel-text, var(--color-text-muted));
    border-color: var(--button-icon-cancel-border, var(--color-border));
    box-shadow: var(--button-icon-cancel-shadow, none);
}
.btn-icon-cancel:hover {
    background: var(--button-icon-cancel-hover, var(--color-error-bg));
    color: var(--button-icon-cancel-hover-text, var(--color-error));
    border-color: var(--button-icon-cancel-hover-border, var(--color-error));
    box-shadow: var(--button-icon-cancel-hover-shadow, none);
}
.btn-icon-cancel:active {
    background: var(--button-icon-cancel-active, var(--color-error));
    color: var(--button-icon-cancel-active-text, var(--color-white, #fff));
    border-color: var(--button-icon-cancel-active-border, var(--color-error));
    box-shadow: var(--button-icon-cancel-active-shadow, none);
}

/* Warning variant */
.btn-icon-warning {
    background: var(--button-icon-warning-background, var(--color-warning-bg, #fff8e1));
    color: var(--button-icon-warning-text, var(--color-warning));
    border-color: var(--button-icon-warning-border, var(--color-border));
    box-shadow: var(--button-icon-warning-shadow, none);
}
.btn-icon-warning:hover {
    background: var(--button-icon-warning-hover, var(--color-warning));
    color: var(--button-icon-warning-hover-text, var(--color-white, #fff));
    border-color: var(--button-icon-warning-hover-border, var(--color-warning));
    box-shadow: var(--button-icon-warning-hover-shadow, none);
}
.btn-icon-warning:active {
    background: var(--button-icon-warning-active, var(--color-warning-dark, var(--color-warning)));
    color: var(--button-icon-warning-active-text, var(--color-white, #fff));
    border-color: var(--button-icon-warning-active-border, var(--color-warning-dark, var(--color-warning)));
    box-shadow: var(--button-icon-warning-active-shadow, none);
}

/* Success / Action / Refresh / Add variant */
.btn-icon-success,
.btn-icon-action,
.btn-icon-refresh,
.btn-icon-add {
    background: var(--button-icon-success-background, var(--color-success-bg));
    color: var(--button-icon-success-text, var(--color-success));
    border-color: var(--button-icon-success-border, var(--color-success-bg));
    box-shadow: var(--button-icon-success-shadow, none);
}
.btn-icon-action:hover,
.btn-icon-refresh:hover,
.btn-icon-add:hover {
    background: var(--button-icon-success-hover, var(--color-success));
    color: var(--button-icon-success-hover-text, var(--color-white, #fff));
    border-color: var(--button-icon-success-hover-border, var(--color-success));
    box-shadow: var(--button-icon-success-hover-shadow, none);
}
.btn-icon-action:active,
.btn-icon-refresh:active,
.btn-icon-add:active {
    background: var(--button-icon-success-active, var(--color-success-dark, var(--color-success)));
    color: var(--button-icon-success-active-text, var(--color-white, #fff));
    border-color: var(--button-icon-success-active-border, var(--color-success-dark, var(--color-success)));
    box-shadow: var(--button-icon-success-active-shadow, none);
}
/* Refresh spins on hover */
.btn-icon-refresh:hover {
    transform: rotate(90deg);
}

/* Info variant */
.btn-icon-info {
    background: var(--button-icon-info-background, var(--color-info-bg));
    color: var(--button-icon-info-text, var(--color-info));
    border-color: var(--button-icon-info-border, var(--color-info-bg));
    box-shadow: var(--button-icon-info-shadow, none);
}
.btn-icon-info:hover {
    background: var(--button-icon-info-hover, var(--color-info));
    color: var(--button-icon-info-hover-text, var(--color-white, #fff));
    border-color: var(--button-icon-info-hover-border, var(--color-info));
    box-shadow: var(--button-icon-info-hover-shadow, none);
}
.btn-icon-info:active {
    background: var(--button-icon-info-active, var(--color-info-dark, var(--color-info)));
    color: var(--button-icon-info-active-text, var(--color-white, #fff));
    border-color: var(--button-icon-info-active-border, var(--color-info-dark, var(--color-info)));
    box-shadow: var(--button-icon-info-active-shadow, none);
}

/* ============================================================================
   Overlay icon button (TD-63 шаг 5) — icon-кнопка ПОВЕРХ медиа (фото/превью).
   Зачем отдельный модификатор: обычные цвет-варианты (.btn-icon-danger и т.п.)
   дают СВЕТЛЫЙ тон по умолчанию — на фотографии он не виден. Overlay даёт
   сплошной card-фон для контраста + тень-отрыв + scale на hover.

   Оси (ортогонально):
     размер  — .btn-sm / .btn-xs / base / .btn-lg
     цвет    — .btn-icon-{danger|warning|primary|info|success}
   Цвет-вариант на overlay = ЦВЕТНАЯ ИКОНКА на card-фоне → ЗАЛИТЫЙ цвет + белая
   иконка на hover (compound 0,2,0 надёжно бьёт светлый вариант 0,1,0 ниже).

   Reveal (opacity:0 + показ по hover контейнера) — НЕ часть кнопки: задаётся
   контейнером (напр. .photo-card:hover .btn-icon-overlay { opacity: 1 }), т.к.
   зависит от селектора контейнера и нужен не везде (drive-бейдж виден всегда).
   ============================================================================ */
.btn-icon-overlay {
    background: var(--color-card-background);
    color: var(--color-text-muted);
    border: none;
    box-shadow: var(--shadow-overlay);
}
.btn-icon-overlay:hover {
    transform: scale(1.08);
    border: none; /* страховка инварианта: цвет-вариант не должен вернуть рамку на hover */
    box-shadow: var(--shadow-overlay);
}
/* Цвет на overlay = те же редактируемые токены --button-icon-{variant}-* что и у
   обычных вариантов (тема из /admin/styles следует за overlay). Отличие overlay —
   только сплошной card-фон по умолчанию (вместо светлого тона варианта). */
.btn-icon-overlay.btn-icon-danger {
    background: var(--color-card-background);
    color: var(--button-icon-danger-text, var(--color-error));
}
.btn-icon-overlay.btn-icon-danger:hover {
    background: var(--button-icon-danger-hover, var(--color-error));
    color: var(--button-icon-danger-hover-text, var(--color-white, #fff));
}
.btn-icon-overlay.btn-icon-warning {
    background: var(--color-card-background);
    color: var(--button-icon-warning-text, var(--color-warning));
}
.btn-icon-overlay.btn-icon-warning:hover {
    background: var(--button-icon-warning-hover, var(--color-warning));
    color: var(--button-icon-warning-hover-text, var(--color-white, #fff));
}
.btn-icon-overlay.btn-icon-primary {
    background: var(--color-card-background);
    color: var(--button-icon-primary-text, var(--color-primary));
}
.btn-icon-overlay.btn-icon-primary:hover {
    background: var(--button-icon-primary-hover, var(--color-primary));
    color: var(--button-icon-primary-hover-text, var(--color-white, #fff));
}
.btn-icon-overlay.btn-icon-info {
    background: var(--color-card-background);
    color: var(--button-icon-info-text, var(--color-info));
}
.btn-icon-overlay.btn-icon-info:hover {
    background: var(--button-icon-info-hover, var(--color-info));
    color: var(--button-icon-info-hover-text, var(--color-white, #fff));
}
.btn-icon-overlay.btn-icon-success {
    background: var(--color-card-background);
    color: var(--button-icon-success-text, var(--color-success));
}
.btn-icon-overlay.btn-icon-success:hover {
    background: var(--button-icon-success-hover, var(--color-success));
    color: var(--button-icon-success-hover-text, var(--color-white, #fff));
}

/* Вертикально-центрированная overlay-кнопка (prev/next в абсолюте top:50%): несёт
   translateY-центрирование И совмещает его со scale-hover оверлея — чтобы viewer'ы
   (lightbox/gallery/carousel) НЕ дублировали это правило у себя. Контейнер задаёт
   только position/top/left/right. :hover (0,2,0) идёт ПОСЛЕ .btn-icon-overlay:hover
   (0,2,0) → выигрывает по порядку каскада, сохраняя translateY под scale. */
.btn-icon-overlay--centered {
    transform: translateY(-50%);
}
.btn-icon-overlay--centered:hover {
    transform: translateY(-50%) scale(1.08);
}

/* Disabled state */
.btn-icon:disabled,
.btn-icon.btn-icon-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Form actions row — обёртка для compact save/cancel icon-кнопок (_form_icon_buttons.html.twig).
   Перенесено из header-buttons.css (TD-63). */
.form-actions-icons,
.ui-form-actions-icons {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* Stat badge — счётчик элементов в шапке списков. Перенесено из header-buttons.css (TD-63). */
.stat-badge, .ui-badge--stat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 40px;
    padding: 0 var(--spacing-sm);
    margin: 0;
    vertical-align: middle;
    background: var(--color-background, #f0f2f5);
    color: var(--color-text-muted);
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: 32px;
    box-shadow: none;
    cursor: default;
    text-align: center;
}
.stat-badge:hover, .ui-badge--stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}
/* Stat badge warning — для непрочитанных сообщений */
.stat-badge-warning, .ui-badge--stat-warning {
    background: var(--color-badge-warning, #fff8e1);
    color: var(--color-warning-dark, #e65100);
}

/* TD-64 W4 — полная палитра stat-вариантов */
.stat-badge-primary, .ui-badge--stat-primary { background: var(--color-badge-primary); color: var(--button-primary-text); }
.stat-badge-success, .ui-badge--stat-success { background: var(--color-badge-success); color: var(--color-success); }
.stat-badge-info, .ui-badge--stat-info { background: var(--color-badge-info); color: var(--color-info); }
.stat-badge-danger, .ui-badge--stat-danger { background: var(--color-badge-danger); color: var(--button-primary-text); }
.stat-badge-secondary, .ui-badge--stat-secondary { background: var(--color-secondary-bg, #e9ecef); color: var(--color-text-secondary, #6c757d); }

/* TD-64 W4 — кликабельный badge-индикатор (бывш. property-badge) */
.ui-badge--action {
    cursor: pointer;
    border: none;
    transition: box-shadow var(--transition-duration-default);
}
.ui-badge--action-danger:hover { box-shadow: var(--shadow-error); }
.ui-badge--action-warning:hover { box-shadow: var(--shadow-warning); }

/* Icon + Text button (.btn-with-text) — иконка + видимый текст (вместо .btn-icon, без
   паразитного овала). Авто-ширина по контенту. Перенесено из header-buttons.css (TD-63). */
.btn-with-text {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    height: auto;
    width: auto;
    background: var(--button-icon-background, var(--color-card-background));
    color: var(--button-icon-text, var(--color-text-muted));
    border: var(--border-width-thin) solid var(--button-icon-border, var(--color-border));
    border-radius: var(--border-radius, 8px);
    cursor: pointer;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-decoration: none;
    transition: color var(--transition-duration-fast), opacity var(--transition-duration-fast);
    box-shadow: none;
}
.btn-with-text:hover {
    color: var(--button-icon-hover-text, var(--color-primary));
    border-color: var(--button-icon-hover-border, var(--color-primary));
    background: var(--button-icon-background, var(--color-card-background));
    text-decoration: none;
    opacity: 0.9;
}
.btn-with-text:active {
    color: var(--button-icon-active-text, var(--color-primary));
    border-color: var(--button-icon-active-border, var(--color-primary));
    opacity: 0.8;
}
.btn-with-text svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ============================================================================
   Icon-only button (circle on .btn) — отдельный ЛЕГИТИМНЫЙ компонент «circle»
   (брендбук-секция). По ADR-0008 — самодостаточная база, НЕ сводится на ось .btn-icon
   (TD-63 #1 закрыт won't-do: ось .btn-icon светлая, залитого вида не даёт).
   Перенесено из header-buttons.css (TD-63). Цвета — общие токены --button-{variant}-* (FILLED).
   Размер 72px (= --button-min-height; ось --button-icon-size-xxl даёт ту же величину).
   Double specificity (.btn.btn-icon-only) defeats later .btn rules in base.css. ============ */
.btn-icon-only,
.btn.btn-icon-only,
a.btn.btn-icon-only {
    width: var(--button-min-height, 72px);
    height: var(--button-min-height, 72px);
    min-height: unset;
    padding: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
}
.btn-icon-only svg,
.btn.btn-icon-only svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
/* Компактный размер — icon-only кнопка в одном ряду с .btn-icon/.header-btn
   (шапка страницы): без него .btn-icon-only тянет --button-min-height (72px). */
.btn-sm.btn-icon-only,
.btn.btn-sm.btn-icon-only,
a.btn.btn-sm.btn-icon-only {
    width: var(--button-icon-size-md, 36px);
    height: var(--button-icon-size-md, 36px);
    min-width: var(--button-icon-size-md, 36px);
}
.btn-sm.btn-icon-only svg,
.btn.btn-sm.btn-icon-only svg {
    width: 16px;
    height: 16px;
}
.btn.btn-icon-only.btn-primary {
    background-color: var(--button-primary-background);
    color: var(--button-primary-text, var(--color-white, #fff));
    border: var(--border-width-normal) solid var(--button-primary-border, transparent);
    box-shadow: var(--button-primary-shadow, none);
}
.btn.btn-icon-only.btn-primary:hover {
    background-color: var(--button-primary-hover);
    border-color: var(--button-primary-hover-border, transparent);
    box-shadow: var(--button-primary-hover-shadow, none);
}
.btn.btn-icon-only.btn-primary:active {
    background-color: var(--button-primary-active, var(--button-primary-hover));
    border-color: var(--button-primary-active-border, transparent);
    box-shadow: var(--button-primary-active-shadow, none);
}
.btn.btn-icon-only.btn-secondary {
    background-color: var(--button-secondary-background, var(--color-white, #fff));
    color: var(--button-secondary-text, var(--color-text, #333));
    border: var(--border-width-normal) solid var(--button-secondary-border, var(--color-border, #ddd));
    box-shadow: var(--button-secondary-shadow, none);
}
.btn.btn-icon-only.btn-secondary:hover {
    background-color: var(--button-secondary-hover, var(--color-background));
    border-color: var(--button-secondary-hover-border, var(--color-border, #ccc));
    box-shadow: var(--button-secondary-hover-shadow, none);
}
.btn.btn-icon-only.btn-secondary:active {
    background-color: var(--button-secondary-active, var(--button-secondary-hover));
    border-color: var(--button-secondary-active-border, var(--color-border, #bbb));
    box-shadow: var(--button-secondary-active-shadow, none);
}
.btn.btn-icon-only.btn-danger {
    background-color: var(--button-danger-background);
    color: var(--button-danger-text, var(--color-white, #fff));
    border: var(--border-width-normal) solid var(--button-danger-border, transparent);
    box-shadow: var(--button-danger-shadow, none);
}
.btn.btn-icon-only.btn-danger:hover {
    background-color: var(--button-danger-hover);
    border-color: var(--button-danger-hover-border, transparent);
    box-shadow: var(--button-danger-hover-shadow, none);
}
.btn.btn-icon-only.btn-success {
    background-color: var(--button-success-background);
    color: var(--button-success-text, var(--color-white, #fff));
    border: var(--border-width-normal) solid var(--button-success-border, transparent);
    box-shadow: var(--button-success-shadow, none);
}
.btn.btn-icon-only.btn-success:hover {
    background-color: var(--button-success-hover);
    border-color: var(--button-success-hover-border, transparent);
    box-shadow: var(--button-success-hover-shadow, none);
}
.btn.btn-icon-only.btn-warning {
    background-color: var(--button-warning-background);
    color: var(--button-warning-text, var(--color-white, #fff));
    border: var(--border-width-normal) solid var(--button-warning-border, transparent);
    box-shadow: var(--button-warning-shadow, none);
}
.btn.btn-icon-only.btn-warning:hover {
    background-color: var(--button-warning-hover);
    border-color: var(--button-warning-hover-border, transparent);
    box-shadow: var(--button-warning-hover-shadow, none);
}
.btn-icon-only:disabled,
.btn.btn-icon-only:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================================
   Header buttons (.header-btn) — глобальный компонент «кнопка заголовка страницы»
   (page-header action: help/print/invite/menu). Перенесено из header-buttons.css (TD-63).
   Все элементы 40px по высоте; цвета на токенах --button-header-* (вариант "header"
   в брендбуке, редактируется через брендбук-редактор). Используется в ~19 шаблонах.
   ============================================================================ */
.header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* width НЕ фиксируем: голые/with-text кнопки растут по контенту;
       круглые .header-btn.icon-only задают width:40px сами. min-width держит минимум 40px. */
    height: 40px;
    min-width: 40px;
    flex-shrink: 0;
    margin: 0;
    vertical-align: top;
    background: var(--button-header-background, var(--color-primary));
    color: var(--button-header-text, var(--color-white, #fff));
    border: var(--border-width-thin) solid var(--button-header-border, transparent);
    /* border-radius НЕ задаём на base: круг — у .icon-only (radius:50% !important),
       pill — у .with-text (radius:20px). База без radius, чтобы текстовые header-btn
       не превращались в овал (TD-63: фикс после переноса — изменился порядок каскада). */
    cursor: pointer;
    transition: var(--transition-default, all 0.2s ease);
    text-decoration: none;
    box-shadow: var(--button-header-shadow);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 40px;
}
.header-btn:hover {
    background: var(--button-header-hover, var(--color-primary-hover, var(--color-primary)));
    box-shadow: var(--button-header-hover-shadow);
    transform: translateY(-2px);
    color: var(--button-header-hover-text, var(--color-white, #fff));
    border-color: var(--button-header-hover-border, transparent);
    text-decoration: none;
}
.header-btn:active {
    background: var(--button-header-active, var(--color-primary-hover, var(--color-primary)));
    color: var(--button-header-active-text, var(--color-white, #fff));
    border-color: var(--button-header-active-border, transparent);
    box-shadow: var(--button-header-active-shadow);
}
/* Кнопка с текстом и иконкой (property menu) */
.header-btn.with-text {
    width: auto;
    padding: 0 var(--spacing-md);
    gap: var(--spacing-sm);
    border-radius: var(--border-radius-lg);
}
.header-btn.with-text svg {
    width: 18px;
    height: 18px;
}
/* Круглая кнопка (help, actions) — 50% enforced.
   Симметричный padding + квадратный бокс ОБЯЗАТЕЛЬНЫ, чтобы бокс не распирало в овал.
   Легаси space-класс .header-btn.icon-only остаётся для _help_button/billing-topbar;
   нативный BEM .header-btn--icon-only — для ui_header_button (TD-64). */
.header-btn.icon-only, .header-btn--icon-only {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: var(--spacing-sm) var(--spacing-sm);
    border-radius: 50% !important;
}
.header-btn.icon-only svg, .header-btn--icon-only svg {
    width: 22px;
    height: 22px;
}
/* Outline variant — transparent bg + primary text; форму 40×40/радиус задаёт
   .header-btn--icon-only. .header-btn--primary/--danger опираются на неё и форму НЕ дублируют.
   (TD-64 W13.6c: legacy дуал-класс .header-btn.ui-button--outline удалён — только нативный BEM.) */
.header-btn--outline {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    background: transparent;
    color: var(--btn-outline-text, var(--color-primary));
    border: none;
}
.header-btn--outline:hover {
    background: var(--btn-outline-hover-bg, var(--color-primary));
    color: var(--color-white, #fff);
}
/* Primary variant (TD-64 W13.6) — нативный header-btn--primary вместо legacy .ui-button--primary дуал-класса */
.header-btn--primary {
    background-color: var(--button-primary-background);
    color: var(--button-primary-text);
    border: var(--border-width-thin) solid var(--button-primary-border, transparent);
    box-shadow: var(--button-primary-shadow, none);
}
.header-btn--primary:hover {
    background-color: var(--button-primary-hover);
    color: var(--button-primary-hover-text, var(--button-primary-text));
}
/* Danger variant (TD-64 W13.6) */
.header-btn--danger {
    background-color: var(--button-danger-background);
    color: var(--button-danger-text);
    border: var(--border-width-thin) solid var(--button-danger-border, transparent);
    box-shadow: var(--button-danger-shadow, none);
}
.header-btn--danger:hover {
    background-color: var(--button-danger-hover);
    color: var(--button-danger-hover-text, var(--button-danger-text));
}
/* Text buttons in page-header — same 40px height for alignment */
.page-header-right .btn-sm,
.page-header-right .ui-button--sm {
    height: 40px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    vertical-align: top;
}
/* SVG всегда stroke currentColor */
.header-btn svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.btn-connect {
    background: var(--color-success-bg);
    color: var(--color-success);
}
.btn-connect:hover {
    background: var(--color-success);
    color: var(--color-white, #fff);
}
.btn-disconnect {
    background: var(--color-background);
    color: var(--color-error);
}
.btn-disconnect:hover {
    background: var(--color-error);
    color: var(--color-white, #fff);
}
.btn-test {
    background: var(--color-info-bg);
    color: var(--color-info);
}
.btn-test:hover {
    background: var(--color-info);
    color: var(--color-white, #fff);
}
.btn-test.sending {
    opacity: 0.6;
    pointer-events: none;
}
.btn-test.success {
    background: var(--color-success-bg);
    color: var(--color-success);
}
.btn-test.error {
    background: var(--color-background);
    color: var(--color-error);
}

.password-requirements {
    background: var(--color-info-bg, #e8f4fd);
    border: var(--border-width-thin) solid var(--color-info-border, #b3d9f2);
    border-left: var(--border-width-thick) solid var(--color-info);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-md) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-xs);
}
.password-requirements ul {
    margin: 0;
    padding-left: var(--spacing-lg);
    color: var(--color-text-secondary, #555);
}
.password-requirements li {
    margin-bottom: var(--spacing-xs);
}
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.password-input-wrapper .form-control-unified {
    padding-right: 44px;
}
.password-toggle {
    position: absolute;
    right: var(--spacing-sm);
    /* TD-86: кнопка стала ui_icon_button (base .btn-icon = 36px круг). Снимаем фикс-геометрию,
       чтобы остаться content-sized absolute-eye внутри инпута (bg/border уже сняты behavior:ghost). */
    width: auto;
    height: auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}
.password-toggle:hover {
    color: var(--color-secondary);
}
.password-toggle svg {
    fill: currentColor;
}

.danger-zone {
    margin-top: var(--spacing-xl);
    border: var(--border-width-thin) solid var(--color-error-bg);
    border-left: var(--border-width-thick) solid var(--color-error);
    background: linear-gradient(135deg, var(--color-error-bg) 0%, var(--color-background) 100%);
}
.danger-title {
    color: var(--color-error);
    border-bottom-color: var(--color-error-bg);
}
.danger-text {
    color: var(--color-text-secondary, #555);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
}
.btn-danger-outline {
    background: transparent;
    color: var(--color-error);
    border: var(--border-width-thin) solid var(--color-error);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-sm);
    width: auto;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-default);
}
.btn-danger-outline:hover {
    background: var(--color-error);
    color: var(--color-white, #fff);
}
.btn-danger-outline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-danger-outline:disabled:hover {
    background: transparent;
    color: var(--color-error);
}
.btn-warning-outline {
    background: transparent;
    color: var(--color-warning);
    border: var(--border-width-thin) solid var(--color-warning);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-sm);
    width: auto;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-default);
}
.btn-warning-outline:hover {
    background: var(--color-warning);
    color: var(--color-white, #fff);
}
.danger-section {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: var(--border-width-thin) solid var(--color-error-bg);
}
.danger-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.danger-subtitle {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-warning-dark);
    margin: 0 0 var(--spacing-sm) 0;
}
.danger-section-delete .danger-subtitle {
    color: var(--color-error);
}
.alert-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
    padding: var(--spacing-md) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
}
.alert-warning p {
    margin: 0;
}
.alert-warning .mt-2 {
    margin-top: var(--spacing-sm);
}
.bindings-list {
    margin-top: var(--spacing-md);
}
.bindings-list ul {
    margin: var(--spacing-sm) 0 0 0;
    padding-left: var(--spacing-lg);
}
.bindings-list li {
    margin-bottom: var(--spacing-sm);
}
.badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xxs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-sm);
    margin-left: var(--spacing-sm);
}
.badge-secondary {
    background: var(--color-disabled);
    color: var(--color-white, #fff);
}

.modal-sorry {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    margin: 0 0 var(--spacing-md) 0;
    line-height: var(--line-height-normal);
}
.modal-info {
    background: var(--color-background);
    border: var(--border-width-thin) solid var(--color-background);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}
.modal-info h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-warning);
    margin: 0 0 var(--spacing-md) 0;
}
.modal-info ul {
    margin: 0;
    padding-left: var(--spacing-lg);
}
.modal-info li {
    font-size: var(--font-size-sm);
    color: var(--color-warning);
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-normal);
}
.modal-info li:last-child {
    margin-bottom: 0;
}
.modal-question {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-secondary);
    margin: 0;
    text-align: center;
}

.notification-channels-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary, #555);
    margin-bottom: var(--spacing-md);
    background: var(--color-info-bg, #e8f4fd);
    border-left: var(--border-width-thick) solid var(--color-info);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
}
.notification-channel-group {
    margin-bottom: var(--spacing-md);
}
.notification-channel {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-md);
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-background);
    cursor: pointer;
    transition: var(--transition-default);
}
.notification-channel:hover {
    border-color: var(--color-primary);
    background: var(--color-info-bg);
}
.notification-channel input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.notification-channel.channel-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--color-background);
}
.notification-channel.channel-disabled:hover {
    border-color: var(--color-border);
    background: var(--color-background);
}
.channel-icon {
    flex-shrink: 0;
}
.channel-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-secondary);
}

.notification-preferences-section {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: var(--border-width-thin) solid var(--color-border-light);
}
.notification-prefs-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
}
.notification-group {
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-sm);
    overflow: hidden;
}
.notification-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-background);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-duration-default);
}
.notification-group-header:hover {
    background: var(--color-info-bg);
}
.notification-group-name {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    color: var(--color-secondary);
}
.notification-group-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.notification-group-select {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-card-background);
    color: var(--color-text);
    cursor: pointer;
}
.notification-group-chevron {
    color: var(--color-text-muted);
    transition: transform var(--transition-duration-default);
}
.notification-group.expanded .notification-group-chevron {
    transform: rotate(180deg);
}
.notification-group-body {
    padding: 0 var(--spacing-md);
    background: var(--color-card-background);
}
.notification-type-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    font-size: var(--font-size-xs);
}
.notification-type-row:last-child {
    border-bottom: none;
}
.notification-type-name {
    color: var(--color-text);
    flex: 1;
}
.notification-type-channels {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.notification-type-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    color: var(--color-text-muted);
}
.notification-type-checkbox input:checked + svg {
    color: var(--color-primary);
}
.notification-type-checkbox input:disabled + svg {
    opacity: 0.4;
}
.notification-type-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
}
.notification-type-checkbox.channel-na {
    opacity: 0.3;
    cursor: not-allowed;
}
.notification-mandatory-badge {
    display: flex;
    align-items: center;
}
.notification-prefs-actions {
    margin-top: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
}
.notification-prefs-status {
    font-size: var(--font-size-xs);
}
.notification-prefs-status.success {
    color: var(--color-success);
}
.notification-prefs-status.error {
    color: var(--color-error);
}

@media (min-width: 768px) {
    .page-title {
        font-size: var(--font-size-4xl);
    }
}

.card-title.accordion-title {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: color var(--transition-duration-fast);
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}
.card-title.accordion-title:hover {
    color: var(--color-primary);
}
.accordion-chevron {
    flex-shrink: 0;
    margin-left: var(--spacing-sm);
    color: var(--color-text-muted);
    transition: transform var(--transition-duration-default) ease;
    display: flex;
    align-items: center;
}
.card.accordion-open .accordion-chevron {
    transform: rotate(0deg);
}
.card.accordion-closed .accordion-chevron {
    transform: rotate(-90deg);
}
.card.accordion-open .accordion-title {
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
}
.accordion-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--transition-duration-slow) ease;
}
.card.accordion-closed .accordion-body {
    grid-template-rows: 0fr;
}
.accordion-body-inner {
    overflow: hidden;
}

/* === Photo Lightbox — fullscreen image viewer (paired with ui photo carousel) === */
.ui-photo-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--color-overlay-95);
    z-index: var(--z-lightbox);
    align-items: center;
    justify-content: center;
}

.ui-photo-lightbox--open {
    display: flex;
}

.ui-photo-lightbox__content {
    position: relative;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-photo-lightbox__image {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--border-radius-sm);
    box-shadow: 0 10px 50px var(--color-overlay-50);
}

.ui-photo-lightbox__close,
.ui-photo-lightbox__nav {
    position: fixed;
    background: var(--color-white-alpha-10);
    border: none;
    border-radius: 50%;
    color: var(--color-white, #fff);
    cursor: pointer;
    transition: background var(--transition-duration-slow), transform var(--transition-duration-default);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: calc(var(--z-lightbox) + 1);
}

.ui-photo-lightbox__close {
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    font-size: var(--font-size-5xl);
}

.ui-photo-lightbox__close:hover {
    background: var(--color-white-alpha-20);
    transform: scale(1.1);
}

.ui-photo-lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    font-size: var(--font-size-3xl);
}

.ui-photo-lightbox__nav:hover {
    background: var(--color-white-alpha-25);
    transform: translateY(-50%) scale(1.1);
}

.ui-photo-lightbox__nav--disabled {
    opacity: 0.3;
    cursor: default;
}

.ui-photo-lightbox__nav--disabled:hover {
    background: var(--color-white-alpha-10);
    transform: translateY(-50%);
}

.ui-photo-lightbox__nav--prev {
    left: 20px;
}

.ui-photo-lightbox__nav--next {
    right: 20px;
}

.ui-photo-lightbox__counter {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-overlay-70);
    color: var(--color-white, #fff);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-sm);
    z-index: calc(var(--z-lightbox) + 1);
}

.ui-photo-lightbox__caption {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-white, #fff);
    font-size: var(--font-size-sm);
    text-align: center;
    max-width: 80%;
    text-shadow: 0 2px 4px var(--color-overlay-50);
    z-index: calc(var(--z-lightbox) + 1);
}

@media (max-width: 767px) {
    .ui-photo-lightbox__nav {
        width: 50px;
        height: 50px;
        font-size: var(--font-size-xl);
    }

    .ui-photo-lightbox__nav--prev {
        left: 10px;
    }

    .ui-photo-lightbox__nav--next {
        right: 10px;
    }

    .ui-photo-lightbox__close {
        top: 10px;
        right: 10px;
        width: 44px;
        height: 44px;
    }
}

/* ── btn-faded — полупрозрачная кнопка (0.8 → 1 при hover, плавная анимация) ── */
.btn-faded {
    opacity: 0.8;
    transition: opacity var(--transition-duration-slow) ease;
}
.btn-faded:hover,
.btn-faded:focus-visible {
    opacity: 1;
    animation: btn-faded-pulse 0.3s ease forwards;
}

@keyframes btn-faded-pulse {
    0%   { opacity: 0.8; }
    60%  { opacity: 1.0; }
    100% { opacity: 1.0; }
}

/* ── btn-bg-* — кнопки с фиксированным фоном/бордером/цветом текста ── */
/* Двойной селектор .btn.btn-bg-* обеспечивает приоритет над .btn { border: none } из dynamic.css */

/* Белый фон, синяя рамка, синий текст */
.btn.btn-bg-white-blue {
    background: var(--color-white, #ffffff);
    border: var(--border-width-thin) solid var(--dash-icon-blue, #4F7CF7);
    color: var(--dash-icon-blue, #4F7CF7);
}
.btn.btn-bg-white-blue:hover { background: var(--color-primary-bg, #F5F8FF); }

/* Белый фон, зелёная рамка, зелёный текст */
.btn.btn-bg-white-green {
    background: var(--color-white, #ffffff);
    border: var(--border-width-thin) solid var(--dash-icon-green, #34A853);
    color: var(--dash-icon-green, #34A853);
}
.btn.btn-bg-white-green:hover { background: var(--color-success-bg, #eaf7ee); }

/* Оранжевый фон, оранжевая рамка, белый текст */
.btn.btn-bg-orange {
    background: var(--color-warning, #F97316);
    border: var(--border-width-thin) solid var(--color-warning, #F97316);
    color: var(--color-white, #ffffff);
}
.btn.btn-bg-orange:hover { background: var(--color-orange-hover); border-color: var(--color-orange-hover); }

/* Белый фон, белая рамка, тёмный текст */
.btn.btn-bg-white {
    background: var(--color-white, #ffffff);
    border: var(--border-width-thin) solid var(--color-white, #ffffff);
    color: var(--color-text, #141C30);
}
.btn.btn-bg-white:hover { background: var(--color-bg-hover, #f5f5f5); }

/* CRM-style tabs — global (вынесено из inline <style> crm-show шаблонов для
   переиспользования: карточка контакта /my/contacts/{id} и др.). */
.crm-tabs { margin-top: var(--spacing-md); }
.crm-tabs-nav { display: flex; gap: 0; border-bottom: var(--border-width-normal) solid var(--color-border); flex-wrap: wrap; }
.crm-tab-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    background: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    border-bottom: var(--border-width-normal) solid transparent;
    margin-bottom: -2px;
    transition: var(--transition-fast);
}
.crm-tab-btn:hover { color: var(--color-primary); }
.crm-tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.crm-tab-content {
    display: none;
    padding: var(--spacing-md);
    background: var(--color-card-background);
    border: var(--border-width-thin) solid var(--color-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
}
.crm-tab-content.active { display: block; }

/* ── Split button (основная кнопка + примыкающий dropdown-toggle) ── */
.split-btn { position: relative; display: inline-flex; }
.split-btn__group { display: inline-flex; align-items: stretch; border-radius: var(--border-radius); overflow: hidden; }

/* Сбрасываем глобальные .btn свойства (width:100%, min-height:72px, min-width:72px, огромный padding)
   чтобы кнопки внутри группы имели компактный инлайн-размер */
.split-btn__group .btn {
    width: auto;
    min-width: unset;
    min-height: unset;
    padding: var(--spacing-sm) var(--spacing-md);
}

.split-btn__main { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.split-btn__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    /* Перебиваем глобальный .dropdown-toggle (background, border, padding, border-radius, min-width) */
    background: inherit;
    border: none;
    border-left: var(--border-width-thin) solid var(--color-divider-on-color) !important;
    padding: 0 var(--spacing-sm) !important;
    width: auto !important;
    min-width: unset !important;
    min-height: unset !important;
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--border-radius) !important;
    border-bottom-right-radius: var(--border-radius) !important;
    cursor: pointer;
}
/* Перебиваем hover глобального .dropdown-toggle — toggle берёт hover от варианта кнопки */
.split-btn__toggle:hover { background: inherit; }

/* ── Цвета вариантов: main и toggle наследуют один и тот же вариант ──
   Перебиваем конфликт от .dropdown-toggle (background:card-bg, border:color-border).
   Для secondary/info border-left делаем полупрозрачный тёмный divider. */
.split-btn__group .btn-primary,
.split-btn__group .btn-primary:hover { background-color: var(--button-primary-background); color: var(--button-primary-text) !important; border-color: var(--button-primary-border, transparent); }
.split-btn__group .btn-primary:hover { background-color: var(--button-primary-hover); }
.split-btn__toggle.btn-primary,
.split-btn__toggle.btn-primary:hover { background-color: var(--button-primary-background); border-left-color: var(--color-divider-on-color) !important; }
.split-btn__toggle.btn-primary:hover { background-color: var(--button-primary-hover); }

.split-btn__group .btn-success { background-color: var(--button-success-background); color: var(--button-success-text, #fff) !important; border-color: var(--button-success-border, transparent); }
.split-btn__group .btn-success:hover { background-color: var(--button-success-hover); }
.split-btn__toggle.btn-success { background-color: var(--button-success-background); border-left-color: var(--color-divider-on-color) !important; }
.split-btn__toggle.btn-success:hover { background-color: var(--button-success-hover); }

.split-btn__group .btn-danger { background-color: var(--button-danger-background); color: var(--button-danger-text, #fff) !important; border-color: var(--button-danger-border, transparent); }
.split-btn__group .btn-danger:hover { background-color: var(--button-danger-hover); }
.split-btn__toggle.btn-danger { background-color: var(--button-danger-background); border-left-color: var(--color-divider-on-color) !important; }
.split-btn__toggle.btn-danger:hover { background-color: var(--button-danger-hover); }

.split-btn__group .btn-warning { background-color: var(--button-warning-background); color: var(--button-warning-text, #fff) !important; border-color: var(--button-warning-border, transparent); }
.split-btn__group .btn-warning:hover { background-color: var(--button-warning-hover); }
.split-btn__toggle.btn-warning { background-color: var(--button-warning-background); border-left-color: var(--color-divider-on-color) !important; }
.split-btn__toggle.btn-warning:hover { background-color: var(--button-warning-hover); }

.split-btn__group .btn-secondary { background-color: var(--button-secondary-background); color: var(--button-secondary-text, #333) !important; border-color: var(--button-secondary-border, #ddd); }
.split-btn__group .btn-secondary:hover { background-color: var(--button-secondary-hover); }
.split-btn__toggle.btn-secondary { background-color: var(--button-secondary-background); border-left-color: var(--color-divider-on-light) !important; }
.split-btn__toggle.btn-secondary:hover { background-color: var(--button-secondary-hover); }

/* btn-info: канон .btn-info (DynamicCssDumperService) уже даёт корректный info-цвет;
   здесь только toggle-divider (см. secondary выше — тот же паттерн на светлом фоне). */
.split-btn__toggle.btn-info { background-color: var(--button-info-background, var(--color-info-bg)); border-left-color: var(--color-divider-on-light) !important; }
.split-btn__toggle.btn-info:hover { background-color: var(--button-info-hover, var(--color-info)); color: var(--button-info-hover-text, #fff) !important; }

/* меню */
.split-btn__menu {
    position: absolute; top: calc(100% + 5px); right: 0; left: auto;
    min-width: 180px; background: var(--color-card-background);
    border: var(--border-width-thin) solid var(--color-border); border-radius: var(--border-radius);
    box-shadow: var(--shadow-dropdown); z-index: var(--z-dropdown);
    display: none; overflow: visible;
    /* Сбрасываем глобальный .dropdown-menu margin-top (4px — уже учтён через top:calc) */
    margin-top: 0;
}
/* common--dropdown вешает .active на this.element (корневой .split-btn) */
.split-btn.active .split-btn__menu { display: block; }

/* placement / align модификаторы */
.split-btn__menu--top   { top: auto; bottom: calc(100% + 5px); }
.split-btn__menu--start { right: auto; left: 0; }

/* размеры toggle (основная часть наследует .btn-sm/.btn-lg на .split-btn__main) */
.split-btn--sm .split-btn__group .btn { padding: var(--spacing-sm) var(--spacing-md); }
.split-btn--sm .split-btn__toggle { padding: 0 var(--spacing-sm) !important; font-size: var(--button-font-size-sm); }
.split-btn--lg .split-btn__group .btn { padding: var(--spacing-md) var(--spacing-lg); }
.split-btn--lg .split-btn__toggle { padding: 0 12px !important; font-size: var(--button-font-size-lg); }

/* пункты меню — вложенные правила под .split-btn__menu не ломают глобальные .dropdown-item */
.split-btn__menu .dropdown-item { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); }
/* pointer-events:none — блокирует клик на кнопке, но tooltip внутри должен работать */
.split-btn__menu .dropdown-item--disabled { color: var(--color-text-muted); cursor: not-allowed; pointer-events: none; }
.split-btn__menu .dropdown-item--disabled .ui-tooltip { pointer-events: auto; cursor: default; }
.split-btn__menu .dropdown-item--danger { color: var(--color-error); }

/* ============================================================
   ui-collapsible — сворачиваемая секция (details/summary)
   ============================================================ */
.ui-collapsible__summary {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    cursor: pointer;
    list-style: none;
    flex-wrap: wrap;
    padding: var(--spacing-xs) var(--spacing-sm);
}

.ui-collapsible__summary::-webkit-details-marker {
    display: none;
}

/* Шеврон: › (вправо) когда свёрнут, ⌄ (вниз) когда развёрнут */
.ui-collapsible__icon {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-right: var(--border-width-normal) solid var(--color-text-secondary, #5F6670);
    border-bottom: var(--border-width-normal) solid var(--color-text-secondary, #5F6670);
    transform: rotate(-45deg);
    transition: transform var(--transition-duration-fast) ease, border-color var(--transition-duration-fast) ease;
    flex-shrink: 0;
    margin-right: var(--spacing-xs, 0.25rem);
}

.ui-collapsible[open] .ui-collapsible__icon {
    transform: rotate(45deg);
}

/* Подчеркнуть кликабельность шапки (аккордеон) */
.ui-collapsible__summary:hover {
    background-color: var(--color-table-hover, #f8f9fa);
    border-radius: var(--border-radius-sm);
}

.ui-collapsible__summary:hover .ui-collapsible__icon {
    border-color: var(--color-primary, #4F7CF7);
}

.ui-collapsible__content {
    padding: var(--spacing-sm, 0.5rem);
}

/* Модификатор: аккордеон в виде карточки */
.ui-collapsible--card {
    border: var(--border-width-thin) solid var(--color-border, #D7DFF2);
    border-radius: var(--border-radius-large, 12px);
    background: var(--color-card-background, #fff);
    padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
    box-shadow: var(--shadow-card, 0 2px 8px rgba(0, 0, 0, 0.08));
}

/* Модификатор: bordered — рамка вокруг секции + подчёркнутый заголовок */
.ui-collapsible--bordered {
    margin-bottom: var(--spacing-xs);
    scroll-margin-top: var(--spacing-sm);
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--border-radius-sm);
}
.ui-collapsible--bordered .ui-collapsible__summary {
    background: var(--color-background);
    border-bottom: var(--border-width-thin) solid var(--color-border);
}

/* Option / Selection Card (макрос _option_card.html.twig, TD-63) */
.charge-type-option { display: flex; gap: var(--spacing-md); align-items: flex-start; padding: var(--spacing-md) var(--spacing-md); border-radius: var(--border-radius-sm); text-decoration: none; color: inherit; cursor: pointer; border: var(--border-width-thin) solid var(--color-border); background: var(--color-card-background); text-align: left; font-family: inherit; transition: border-color var(--transition-duration-fast), box-shadow var(--transition-duration-fast); }
.charge-type-option:hover { border-color: var(--color-primary); box-shadow: var(--shadow-card-hover, var(--shadow-sm)); text-decoration: none; color: inherit; }
.charge-type-option-icon { font-size: var(--font-size-3xl); flex-shrink: 0; margin-top: var(--spacing-xs); }
.charge-type-option strong { display: block; font-size: var(--font-size-sm); margin-bottom: var(--spacing-xs); color: var(--color-secondary); }
.charge-type-option p { margin: 0; font-size: var(--font-size-xs); line-height: var(--line-height-normal); color: var(--color-text-muted); }
.charge-type-onetime:hover { border-color: var(--color-warning); }
.charge-type-regular:hover { border-color: var(--color-info); }
.charge-type-disabled { opacity: 0.6; cursor: default; }
.charge-type-disabled:hover { border-color: var(--color-border); box-shadow: none; }
.charge-type-disabled a { color: var(--color-primary); text-decoration: underline; }

/* Контракт-печать: опции макета — вынос inline-style из _print_language_form.html.twig (TD-63 §C) */
.layout-options { display: none; margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: var(--border-width-thin) solid var(--color-border); }
.layout-options .print-hint { margin-bottom: var(--spacing-sm); }
.layout-option { display: flex; align-items: center; margin-bottom: var(--spacing-sm); cursor: pointer; }
.layout-option:last-of-type { margin-bottom: 0; }
.layout-option input[type="radio"] { margin-right: var(--spacing-sm); }

/* PDF progress bar — начальное состояние ширины (вынос inline из _print_popup_batch.html.twig, TD-63 §C) */
.pdf-progress-bar { width: 0; }

/* ==================== SEGMENTED CONTROL (ui_segmented_control) ==================== */
.ui-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
    background: var(--color-background);
    border: var(--border-width-normal) solid var(--color-border);
    border-radius: var(--border-radius-lg);
}
.ui-segmented__item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-md);
    transition: color var(--transition-fast), background var(--transition-fast);
}
.ui-segmented__item:hover:not(.ui-segmented__item--active):not(.ui-segmented__item--empty) {
    color: var(--color-text);
    background: var(--color-table-hover);
}
.ui-segmented__item--active {
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
}
.ui-segmented__item--empty {
    opacity: 0.45;
}
.ui-segmented__count {
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
    background: var(--color-table-hover);
    color: var(--color-text-muted);
    padding: 0 var(--spacing-xs);
    border-radius: var(--border-radius-sm);
}
.ui-segmented__item--active .ui-segmented__count {
    background: var(--color-white-alpha-20);
    color: var(--color-white);
}
button.ui-segmented__item {
    appearance: none;
    border: none;
    background: transparent;
    font: inherit;
    margin: 0;
    cursor: pointer;
}
.ui-segmented__label {
    display: inline;
}

/* ==================== ALPHABET FILTER (ui_alphabet_filter) ==================== */
.ui-alphabet {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}
.ui-alphabet__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    text-align: center;
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}
.ui-alphabet__item:hover:not(.ui-alphabet__item--active) {
    color: var(--color-text);
    background: var(--color-table-hover);
}
.ui-alphabet__item--active {
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
}

/* ═══ Row Expander — chevron toggle button (TD-64 ui_row_expander) ═══ */
.ui-row-expander {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-muted);
    transition: color var(--transition-duration-default);
}
.ui-row-expander:hover {
    color: var(--color-primary);
}
.ui-row-expander svg {
    transition: transform var(--transition-duration-default);
}
.ui-row-expander.is-expanded svg {
    transform: rotate(180deg);
}

/* ═══ Drive badge (TD-79 ui_drive_badge) — Google Drive link badge ═══ */
.ui-drive-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 2px var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    background: var(--color-info-bg);
    color: var(--color-info);
    font-size: var(--font-size-xxs);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: var(--transition-fast);
    white-space: nowrap;
}
.ui-drive-badge:hover {
    background: var(--color-info);
    color: var(--color-white);
}
.ui-drive-badge svg {
    flex-shrink: 0;
}

/* ═══ Calendar indicator (TD-79 ui_calendar_indicator) — legend glyph badge ═══ */
.ui-calendar-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    flex-shrink: 0;
}
.ui-calendar-indicator--income {
    background: var(--color-success);
}
.ui-calendar-indicator--expense {
    background: var(--color-danger);
}
.ui-calendar-indicator--events {
    background: var(--color-warning);
}
.ui-calendar-indicator--balance {
    background: var(--color-error-dark);
}
.ui-calendar-indicator--sm {
    width: 24px;
    height: 20px;
    font-size: var(--font-size-xs);
}
.ui-calendar-indicator--lg {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-base);
}

/* ═══ Chip (TD-79 ui_chip) — removable-tag ═══ */
.ui-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-large);
    background: var(--color-table-hover);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1;
}
.ui-chip__dismiss {
    margin-left: var(--spacing-xs);
}