@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap);
:root {
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;

    --brand-color: #507b68;
    --brand-accent-color: #ac9a82;
    --brand-accent-light-color: #e8dfd0;
    --brand-background-color: #f3f0e9;

    --color-red: #ff5959;
    --background-color-light: #f8f8f8;
    --background-color-minor: #efeeec;
    --background-color-white: #ffffff;

    --typo-color-black: #21201f;
    --typo-color-white: #ffffff;
    --typo-color-minor: #9e9b98;
    --typo-color-gray: #606060;

    --border-color-gray: rgba(139, 135, 132, 20%);
    --border-radius-xs: 5px;
    --border-radius-s: 8px;
    --border-radius-m: 10px;
    --border-radius-l: 12px;

    --typo-size-xxs: 12px;
    --typo-size-xs: 13px;
    --typo-size-ms: 14px;
    --typo-size-s: 15px;
    --typo-size-m: 18px;
    --typo-size-l: 28px;

    --typo-weight-regular: 400;
    --typo-weight-medium: 500;
    --typo-weight-bold: 600;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
}

body.crm-scroll-lock {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    padding-right: var(--crm-scroll-lock-padding, 0);
}

body.crm-scroll-lock .footer,
body.crm-scroll-lock .page-header {
    right: var(--crm-scroll-lock-padding, 0);
}

html.crm-scroll-lock-mobile,
body.crm-scroll-lock-mobile {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

body.crm-scroll-lock-mobile .page.page--mobile-nav,
body.crm-scroll-lock-mobile .page.page--mobile-app {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-regular);
    color: var(--typo-color-black);
    background-color: var(--background-color-white);
    line-height: 1.5;
}

body.crm-auth-background {
    background-color: var(--brand-background-color);
}

body.crm-mobile-navigation {
    background-color: var(--typo-color-white);
}

body.crm-mobile-app {
    overflow: hidden;
    height: 100%;
}

html:has(body.crm-mobile-app) {
    overflow: hidden;
    height: 100%;
}

button {
    font-family: inherit;
}

:root {
    --crm-footer-height: 85px;
    --crm-footer-side-offset: 345px;
    --crm-modal-z-index: 1200;
    --crm-modal-radius: 24px;
}

@media (max-width: 768px) {
    :root {
        --crm-footer-height: 75px;
        --crm-footer-side-offset: 0;
    }
}

/**
 * Page Component Styles
 * Стили для основного компонента страницы CRM системы
 */

.page {
    display: flex;
    min-height: 100vh;
}

#subdivision-host {
    margin-bottom: 16px;
}

.page-content {
    flex: 1;
    min-height: 100vh;
    /* Отступы */
    padding: 10px 35px 110px 35px;
    
    /* Позиционирование относительно header */
    margin-top: 105px; /* Высота header */
    margin-left: 345px; /* Ширина sidebar */
    
    /* Минимальная высота */
    min-height: calc(100vh - 105px);
    
    /* Фон */
    background-color: var(--background-color-white);
}
/**
 * Мобильный layout: полноэкранная навигация и контент без desktop sidebar.
 */

@media (max-width: 768px) {
    .page--mobile-nav {
        display: block;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .page--mobile-nav .page__sidebar {
        position: relative;
        z-index: 1100;
        width: 100%;
        max-width: none;
    }

    .page--mobile-nav #page-header-container,
    .page--mobile-nav .page-content {
        display: none;
    }

    .page--mobile-nav .sidebar {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        border-right: none;
        padding: 20px 20px max(40px, env(safe-area-inset-bottom));
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }

    .page--mobile-app .page__sidebar {
        display: none;
    }

    /* Вертикальный скролл только в .page-content — иначе overflow-x ломает sticky */
    .page.page--mobile-app {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    .page--mobile-app .page-content {
        flex: 1;
        min-height: 0;
        margin-left: 0;
        margin-top: calc(var(--mobile-header-height, 72px) + env(safe-area-inset-top, 0px));
        padding: 10px 16px calc(var(--crm-footer-height) + env(safe-area-inset-bottom, 0px));
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.section-placeholder-card {
    max-width: 520px;
    margin: 8px 0 24px;
    padding: 28px 32px;
    border-radius: var(--border-radius-l);
    background: var(--background-color-white);
    border: 1px solid var(--border-color-gray);
    box-shadow: 0 2px 12px rgba(33, 32, 31, 0.04);
}

.section-placeholder-card__badge {
    display: inline-block;
    margin-bottom: 20px;
    padding: 4px 10px;
    font-size: var(--typo-size-xxs);
    font-weight: var(--typo-weight-medium);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--brand-color);
    background: var(--brand-accent-light-color);
    border-radius: var(--border-radius-xs);
}

.section-placeholder-card__icon {
    display: block;
    margin-bottom: 16px;
    opacity: 0.85;
}

.section-placeholder-card__title {
    margin: 0 0 8px;
    font-size: var(--typo-size-m);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
}

.section-placeholder-card__subtitle {
    margin: 0 0 12px;
    font-size: var(--typo-size-s);
    color: var(--typo-color-gray);
    line-height: 1.45;
}

.section-placeholder-card__meta {
    margin: 0 0 16px;
    font-size: var(--typo-size-ms);
    color: var(--typo-color-minor);
}

.section-placeholder-card__meta strong {
    font-weight: var(--typo-weight-medium);
    color: var(--typo-color-black);
}

.section-placeholder-card__notice {
    margin: 0;
    padding: 14px 16px;
    border-radius: var(--border-radius-m);
    background: var(--background-color-light);
    font-size: var(--typo-size-ms);
    line-height: 1.5;
    color: var(--typo-color-black);
}

/* Совместимость с nomenclature-edit-placeholder */
.section-placeholder {
    max-width: 520px;
}

.section-placeholder__title {
    margin: 0 0 8px;
    font-size: var(--typo-size-m);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
}

.section-placeholder__subtitle,
.section-placeholder__meta {
    margin: 0 0 8px;
    font-size: var(--typo-size-s);
    color: var(--typo-color-gray);
}

.section-placeholder__notice {
    margin: 16px 0 0;
    padding: 14px 16px;
    border-radius: var(--border-radius-m);
    background: var(--background-color-light);
    font-size: var(--typo-size-ms);
    color: var(--typo-color-black);
    line-height: 1.5;
}

.page-error {
    max-width: 720px;
    padding: 16px 0;
}

.page-error__title {
    margin: 0 0 8px;
    font-size: var(--typo-size-m);
    font-weight: var(--typo-weight-bold);
    color: var(--color-red);
}

.page-error__message {
    margin: 0 0 12px;
    font-size: var(--typo-size-s);
    color: var(--typo-color-black);
}

.page-error__detail {
    margin: 0;
    padding: 12px;
    border-radius: var(--border-radius-s);
    background: var(--background-color-light);
    font-size: var(--typo-size-xxs);
    overflow-x: auto;
    white-space: pre-wrap;
}

/**
 * Sidebar Component Styles
 * Стили для компонента боковой панели навигации
 */

.sidebar {
    /* Основные размеры и позиционирование */
    position: fixed;
    top: 0;
    left: 0;
    width: 345px;
    height: 100vh;
    
    /* Отступы внутри sidebar */
    padding: 20px 20px 40px 20px;
    
    /* Границы и фон */
    background-color: var(--typo-color-white);
    border-right: 1px solid var(--border-color-gray);
    
    /* Flexbox для вертикального расположения секций */
    display: flex;
    flex-direction: column;
    gap: 25px;
    
    /* Убираем скролл у всего sidebar */
    overflow: hidden;
}

/* ===== БЛОК ВЫБОРА ЗАВЕДЕНИЯ ===== */
.sidebar__establishment {
    display: flex;
    align-items: center;
    gap: 10px;
}

.establishment__logo {
    width: 65px;
    height: 65px;
    background-color: #F3EEE0;
    border-radius: var(--border-radius-l);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo-text {
    font-size: var(--typo-size-xs);
    font-weight: var(--typo-weight-medium);
    color: var(--typo-color-black);
    line-height: 1;
}

.logo-subtitle {
    font-size: 10px;
    font-weight: var(--typo-weight-regular);
    color: var(--typo-color-black);
    line-height: 1;
    margin-top: 2px;
}

.establishment__info {
    flex: 1;
    min-width: 0;
}

.establishment__name {
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
    margin: 0 0 3px 0;
    line-height: 1.2;
}

.establishment__address {
    font-size: var(--typo-size-xs);
    font-weight: var(--typo-weight-regular);
    color: var(--typo-color-black);
    margin: 0;
    line-height: 1.2;
}

.establishment__arrow {
    width: 32px;
    height: 32px;
    background-color: var(--background-color-light);
    border: 1px solid var(--border-color-gray);
    border-radius: var(--border-radius-s);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--icon-color-gray);
    flex-shrink: 0;
}

.establishment__arrow:hover {
    background-color: var(--background-color-minor);
}

.establishment__arrow:active {
    background-color: var(--border-color-gray);
}

/* ===== НАВИГАЦИЯ ===== */
.sidebar__navigation {
    display: flex;
    flex-direction: column;
    gap: 40px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 100px;
    padding-right: 20px;
    margin-right: -20px;
}

.navigation__section {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.section__title {
    font-size: var(--typo-size-xxs);
    font-weight: var(--typo-weight-regular);
    color: var(--typo-color-minor);
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.5px;
}

.section__list {
    list-style: none;
    margin: 0;
    padding: 16px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-item {
    height: 50px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 15px;
    border-radius: var(--border-radius-m);
    cursor: pointer;
    color: var(--typo-color-black);
}

.nav-item:hover {
    background-color: var(--background-color-light);
}

.nav-item--active {
    background-color: var(--brand-background-color);
}

.nav-item__icon {
    color: var(--icon-color-gray);
    flex-shrink: 0;
    filter: brightness(0) saturate(100%) invert(37%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.nav-item__text {
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-regular);
    color: var(--typo-color-black);
    line-height: 1;
}

/* ===== БЛОК РАЗРАБОТЧИКА ===== */
.sidebar__developer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.developer__logo {
    width: 55px;
    height: 50px;
    flex-shrink: 0;
}

.developer__info {
    flex: 1;
    min-width: 0;
}

.developer__name {
    font-size: 17px;
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.developer__version {
    font-size: var(--typo-size-xs);
    font-weight: var(--typo-weight-regular);
    color: var(--typo-color-minor);
    margin: 0;
    line-height: 1.2;
}


/* ===== ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ УЛУЧШЕНИЯ UX ===== */
.sidebar__navigation::-webkit-scrollbar {
    width: 4px;
}

.sidebar__navigation::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar__navigation::-webkit-scrollbar-thumb {
    background-color: var(--border-color-gray);
    border-radius: 2px;
}

.sidebar__navigation::-webkit-scrollbar-thumb:hover {
    background-color: var(--icon-color-gray);
}


/**
 * Establishment Selector Component Styles
 * Стили для компонента выбора заведения
 */

.establishment-selector__content {
    max-height: 60vh;
    overflow-y: auto;
}

.establishment-selector__establishments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.establishment-selector__empty {
    margin: 0;
    padding: 8px 0;
    color: var(--color-text-secondary, #666);
    font-size: 14px;
    line-height: 1.4;
}

/**
 * Modal Component Styles
 * Стили для универсального модального окна
 *
 * Стандарт: кнопки управления только в .modal__footer;
 * на ≤768px — на весь экран.
 */

/* Оверлей модального окна */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--crm-modal-z-index);
    padding: 20px;
}

/* Основной контейнер модального окна */
.modal {
    background-color: var(--background-color-white);
    border-radius: var(--crm-modal-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    max-width: 90vw;
    max-height: 815px;
    overflow: hidden;
    width: 485px;
}

/* Заголовок модального окна (без кнопок управления) */
.modal__header {
    padding: 30px 30px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
}

.modal__header-content {
    flex: 1;
    min-width: 0;
}

.modal__title {
    font-size: 28px;
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
    margin: 0;
    line-height: 1.2;
}

.modal__description {
    font-size: 13px;
    color: var(--typo-color-minor);
    margin: 3px 0 0;
    line-height: 1.4;
}

/* Контент модального окна */
.modal__content {
    padding: 0 30px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px;
    margin-right: -20px;
    width: 100%;
    min-height: 0;
}

/* Стили для скроллбара контента модального окна */
.modal__content::-webkit-scrollbar {
    width: 4px;
}

.modal__content::-webkit-scrollbar-track {
    background: transparent;
}

.modal__content::-webkit-scrollbar-thumb {
    background-color: var(--border-color-gray);
    border-radius: 2px;
}

.modal__content::-webkit-scrollbar-thumb:hover {
    background-color: var(--icon-color-gray);
}

/* Футер — единственное место для кнопок управления */
.modal__footer {
    padding: 30px;
    min-height: 85px;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-shrink: 0;
    border-top: 1px solid var(--border-color-gray);
    margin-top: auto;
    box-sizing: border-box;
}

.modal__footer-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.modal__footer-content > * {
    flex-shrink: 0;
}

/* Кнопка «Закрыть» — всегда последняя в футере (DOM-порядок) */
.modal__cancel-button {
    background: transparent;
    border: none;
    color: var(--color-red);
    font-size: var(--typo-size-ms);
    padding: 0 14px;
    height: 40px;
    border-radius: var(--border-radius-xs);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.modal__cancel-button:hover {
    background-color: rgba(220, 53, 69, 0.1);
}

/* Мобильные: на весь экран */
@media (max-width: 768px) {
    .modal-overlay {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
        height: 100%;
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
    }

    .modal {
        width: 100% !important;
        height: 100% !important;
        max-width: none;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
    }

    .modal__header {
        padding: 20px 16px 12px;
        padding-top: max(20px, env(safe-area-inset-top, 0px));
    }

    .modal__title {
        font-size: 22px;
    }

    .modal__content {
        padding-left: 16px;
        padding-right: 12px;
        margin-right: -4px;
    }

    .modal__footer {
        height: auto;
        min-height: calc(var(--crm-footer-height) + env(safe-area-inset-bottom, 0px));
        padding: 16px;
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    }
}

@media (max-height: 700px) and (min-width: 769px) {
    .modal {
        height: auto;
        max-height: 90vh;
    }
}

.action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    flex-shrink: 0;
    white-space: nowrap;
    background: linear-gradient(to bottom, #5d6561, #3a4341);
    color: var(--typo-color-white);
    border: 1px solid transparent;
    font-size: var(--typo-size-ms);
    font-family: var(--font-family);
    font-weight: var(--typo-weight-medium);
    padding: 0 14px;
    height: 40px;
    border-radius: var(--border-radius-xs);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.action-button:hover:not(:disabled) {
    opacity: 0.92;
}

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

.action-button--brand {
    background: var(--brand-color);
}

.action-button--danger {
    background: var(--color-red);
}

.action-button--ghost {
    width: auto;
    background: transparent;
    color: var(--typo-color-gray);
    border: none;
    height: auto;
    padding: 4px 0;
    font-size: var(--typo-size-xs);
}

.action-button--ghost:hover:not(:disabled) {
    color: var(--brand-color);
    opacity: 1;
}

/**
 * Establishment Item Component Styles
 * Стили для компонента элемента списка заведения в модальном окне
 * Должны быть визуально идентичны sidebar
 */

.establishment-item {
    /* Используем точно те же стили, что и в sidebar */
    display: flex;
    align-items: center;
    gap: 10px;
    
    /* Убираем все дополнительные стили модального окна */
    padding: 0;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    background: transparent;
    
    /* Добавляем только минимальные стили для интерактивности */
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.establishment-item:hover {
    background-color: var(--background-color-light, #f5f5f5);
}

.establishment-item--selected {
    background-color: var(--brand-background-color, #e3f2fd);
}

/* Используем точно те же стили логотипа, что и в sidebar */
.establishment-item .establishment__logo {
    width: 65px;
    height: 65px;
    background-color: #F3EEE0;
    border-radius: var(--border-radius-l, 8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.establishment-item .establishment__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--border-radius-l, 8px);
}

/* Используем точно те же стили информации, что и в sidebar */
.establishment-item .establishment__info {
    flex: 1;
    min-width: 0;
}

.establishment-item .establishment__name {
    font-size: var(--typo-size-s, 14px);
    font-weight: var(--typo-weight-bold, 700);
    color: var(--typo-color-black, #000);
    margin: 0 0 3px 0;
    line-height: 1.2;
}

.establishment-item .establishment__address {
    font-size: var(--typo-size-xs, 12px);
    font-weight: var(--typo-weight-regular, 400);
    color: var(--typo-color-black, #000);
    margin: 0;
    line-height: 1.2;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox__input {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-color-gray);
    background-color: var(--background-color-light);
    border-radius: var(--border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkbox__input:hover {
    border-color: var(--brand-color);
}

.checkbox__input--checked {
    border: none;
    background-color: var(--brand-color);
}

.checkbox__icon {
    width: 15px;
    height: 15px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.checkbox__input--checked .checkbox__icon {
    opacity: 1;
}

.checkbox__label {
    font-size: var(--typo-size-ms);
    font-weight: var(--typo-weight-regular);
    color: var(--typo-color-black);
    cursor: pointer;
    user-select: none;
}

.checkbox--disabled {
    cursor: default;
    opacity: 0.6;
}

.checkbox--disabled .checkbox__input,
.checkbox--disabled .checkbox__label {
    cursor: default;
}

/**
 * Page Header Component Styles
 * Стили для компонента заголовка страницы раздела
 */

/* ===== HEADER РАЗДЕЛА ===== */
.page-header {
    /* Фиксированное позиционирование */
    position: fixed;
    top: 0;
    left: 345px; /* Ширина sidebar */
    right: 0;
    z-index: 100;
    height: 105px;
    background-color: var(--background-color-white);
}

.page-header__content {
    /* Отступы */
    padding: 0 35px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Левый блок: информация о разделе */
.page-header__section-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.page-header__section-name {
    font-size: var(--typo-size-l);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
    margin: 0;
    line-height: 1.2;
}

.page-header__section-description {
    font-size: var(--typo-size-xs);
    font-weight: var(--typo-weight-regular);
    color: var(--typo-color-minor);
    margin: 0;
    line-height: 1.2;
}

.page-header__nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-color);
    font-size: var(--typo-size-xs);
    font-weight: var(--typo-weight-regular);
}

.page-header__nav-toggle[hidden] {
    display: none;
}

.page-header__nav-toggle:hover:not(:disabled) {
    color: var(--brand-color);
    opacity: 0.85;
}

.page-header__nav-toggle-icon {
    display: block;
    transform: rotate(180deg);
    filter: invert(42%) sepia(14%) saturate(748%) hue-rotate(100deg) brightness(92%) contrast(88%);
}

.page-header__nav-toggle--collapsed .page-header__nav-toggle-icon {
    transform: none;
}

.page-header__content--mobile .page-header__nav-toggle {
    white-space: normal;
    justify-content: center;
    max-width: 100%;
    text-align: center;
}

/* Правый блок: информация о пользователе */
.page-header__user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-header__actions {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.page-header__user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
}

.page-header__user-name {
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
    margin: 0;
    line-height: 1.2;
}

.page-header__user-position {
    font-size: var(--typo-size-xs);
    font-weight: var(--typo-weight-regular);
    color: var(--typo-color-minor);
    margin: 0;
    line-height: 1.2;
}

.page-header__user-icon {
    width: 45px;
    height: 45px;
    background-color: var(--background-color-light);
    border: 1px solid var(--border-color-gray);
    border-radius: var(--border-radius-s);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--icon-color-gray);
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.page-header__content--mobile {
    display: none;
}

.page-header__nav-btn {
    width: auto;
    min-width: 45px;
    height: 45px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    cursor: pointer;
}

.page-header__section-info--center {
    flex: 1;
    min-width: 0;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.page-header__content--mobile .page-header__section-name {
    font-size: var(--typo-size-m);
    font-weight: var(--typo-weight-bold);
}

.page-header__content--mobile .page-header__section-description {
    font-size: var(--typo-size-xs);
}

@media (max-width: 768px) {
    .page--mobile-app .page-header {
        left: 0;
        height: var(--mobile-header-height, 72px);
        padding-top: env(safe-area-inset-top);
    }

    .page--mobile-app .page-header__content--desktop {
        display: none;
    }

    .page--mobile-app .page-header__content--mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        height: var(--mobile-header-height, 72px);
        padding: 0;
        padding-right: max(16px, env(safe-area-inset-right));
        box-sizing: border-box;
    }

    .page--mobile-app .page-header__nav-btn {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: 8px;
    }
}
/* ===== НАВИГАЦИЯ ПОДРАЗДЕЛОВ ===== */
.subdivision-navigation {
    /* Размеры */
    height: 55px;
    width: 100%;
    
    /* Фон и границы */
    background-color: var(--background-color-white);
    border-bottom: 1px solid var(--border-color-gray);
    
    /* Позиционирование - теперь внутри контента */
    position: relative;
    z-index: 1;
}

.subdivision-navigation__content {
    /* Выравнивание по центру */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 32px;
    
    /* Отступы - теперь без внешних отступов, так как они внутри page-content */
    padding: 0;
}

.subdivision-navigation__item {
    height: 100%;
    /* Сброс стилей кнопки */
    background: none;
    border: none;
    padding: 0;
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-minor);
    cursor: pointer;
    transition: color 0.2s ease;
    position: relative;
    padding-bottom: 2px;
}

.subdivision-navigation__item:hover {
    color: var(--brand-color);
}

.subdivision-navigation__item--active {
    color: var(--brand-color);
}

.subdivision-navigation__item--active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--brand-color);
}

.subdivision-navigation__item {
    transition: all 0.2s ease;
}
/* Страница редактирования блюда */

.dish-edit-page {

    padding: 0;

    padding-bottom: calc(var(--crm-footer-height) + 15px);

}



.dish-edit-page__back {

    margin-bottom: 30px;

}



.dish-edit-page__subdivision {

    margin-bottom: 30px;

}



.dish-edit-page__content {

    /* Контент подразделов */

}



/* Контейнер для кнопки назад в основной структуре */

.dish-edit-controls {

    margin-bottom: 30px;

}



/* Настройки блюда */

.dish-settings-content {

    /* Контент настроек блюда без фона и отступов */

}



/* Блоки ограничений по времени */

.time-restrictions-container {

    margin-top: 24px;

}



/* Вес и КБЖУ: от 430px — одна строка; уже 430px — две строки (3+2) */

.dish-nutrition__fields {

    display: grid;

    gap: 16px;

    grid-template-columns: repeat(5, minmax(0, 1fr));

}



@media (max-width: 429px) {

    .dish-nutrition__fields {

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

}



.dish-nutrition__fields .input-field {

    margin-bottom: 0;

    min-width: 0;

}



.dish-nutrition__fields .input-field__input {

    width: 100%;

    min-width: 0;

    box-sizing: border-box;

}



/* Модификаторы блюда */

.dish-modifiers {

    background: var(--background-color-white);

    border-radius: var(--border-radius-m);

    padding: 24px;

}



.dish-modifiers__section {

    max-width: 600px;

}



.dish-modifiers__title {

    font-size: var(--typo-size-m);

    font-weight: var(--typo-weight-bold);

    color: var(--typo-color-black);

    margin: 0 0 8px 0;

}



.dish-modifiers__description {

    font-size: var(--typo-size-ms);

    color: var(--typo-color-minor);

    margin: 0 0 24px 0;

}



.dish-modifiers__empty {

    text-align: center;

    padding: 40px 20px;

    border: 2px dashed var(--border-color-gray);

    border-radius: var(--border-radius-s);

}



.dish-modifiers__empty p {

    font-size: var(--typo-size-ms);

    color: var(--typo-color-minor);

    margin: 0 0 16px 0;

}



.dish-modifiers__add-btn {

    background: var(--brand-accent-color);

    color: var(--typo-color-white);

    border: none;

    border-radius: var(--border-radius-s);

    padding: 10px 20px;

    font-size: var(--typo-size-ms);

    font-weight: var(--typo-weight-medium);

    font-family: var(--font-family);

    cursor: pointer;

    transition: opacity 0.2s ease;

}



.dish-modifiers__add-btn:hover {

    opacity: 0.9;

}


/**
 * Settings Section Styles
 * Стили для секций настроек
 */

.settings-section {
    display: flex;
    flex-direction: column;
    max-width: 750px;
    margin-bottom: 50px;
    margin-top: 50px;
}

.settings-section:first-child {
    margin-top: 30px;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section__fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.settings-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 20px;
}

.settings-section__inline-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

.settings-section__inline-fields > .input-field,
.settings-section__inline-fields > .input-select-field {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-bottom: 0;
    box-sizing: border-box;
}

.settings-section__inline-fields .input-field__label {
    margin-left: 0;
    overflow-wrap: anywhere;
}

.settings-section__inline-fields .input-field__container,
.settings-section__inline-fields .input-select-field__container {
    width: 100%;
    min-width: 0;
}

.settings-section__inline-fields .input-field__input,
.settings-section__inline-fields .input-select-field__input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.settings-section__inline-fields .input-select-field__input {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .settings-section__inline-fields {
        gap: 12px;
    }

    .settings-section .settings-checkbox-group--horizontal {
        flex-direction: column;
        gap: 16px;
    }
}

/**
 * Settings Subtitle Styles
 * Стили для компонента подзаголовков настроек
 */

.settings-subtitle {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.settings-subtitle__title {
    font-size: var(--typo-size-m);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
    margin: 0 0 3px 0;
    line-height: 1.2;
}

.settings-subtitle__description {
    font-size: var(--typo-size-xs);
    font-weight: var(--typo-weight-regular);
    color: var(--typo-color-black);
    margin: 0;
    line-height: 1.3;
}

.input-field {
    width: 100%;
}

.input-field__label {
    font-size: var(--typo-size-xxs);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
    margin-bottom: 5px;
    margin-left: 5px;
    display: block;
}

.input-field__container {
    position: relative;
    width: 100%;
}

.input-field__input {
    width: 100%;
    height: 40px;
    border: 1px solid var(--border-color-gray);
    background-color: var(--background-color-light);
    border-radius: var(--border-radius-s);
    padding: 10px 15px;
    font-size: var(--typo-size-ms);
    font-family: var(--font-family);
    color: var(--typo-color-black);
    transition: border-color 0.2s ease;
}

.input-field__input--otp {
    letter-spacing: 0.35em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding-left: 15px;
}

.input-field__input:focus {
    outline: none;
    border-color: var(--brand-color);
}

.input-field__input::placeholder {
    color: var(--typo-color-minor);
}

.input-field__input:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.input-field__toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 28px;
    padding: 0 8px;
    border: none;
    background: transparent;
    color: var(--typo-color-gray);
    font-size: var(--typo-size-xxs);
    font-weight: var(--typo-weight-medium);
    cursor: pointer;
}

.input-field__toggle:hover {
    color: var(--brand-color);
}

.input-field__container--with-toggle .input-field__input {
    padding-right: 72px;
}

/* Label стили теперь используются из input.css через класс input-field__label */

.textarea-field__textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color-gray);
    border-radius: var(--border-radius-s);
    font-size: var(--typo-size-ms);
    font-family: var(--font-family);
    color: var(--typo-color-black);
    background-color: var(--background-color-light);
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.textarea-field__textarea:focus {
    outline: none;
    border-color: var(--brand-color);
}

.textarea-field__textarea::placeholder {
    color: var(--typo-color-minor);
    line-height: 1.4;
}

.url-section-input__hint,
.url-section-input__warning,
.url-section-input__error {
    display: none;
    margin: 4px 0 0;
    font-size: var(--typo-size-xxs);
    word-break: break-all;
}

.url-section-input__hint {
    color: var(--typo-color-gray);
}

.url-section-input__warning {
    color: var(--brand-accent-color);
}

.url-section-input__error {
    color: var(--color-red);
}

.url-section-input__hint--visible,
.url-section-input__warning--visible,
.url-section-input__error--visible {
    display: block;
}

/* Establishment Address Component Styles */

.establishment-address {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.establishment-address__coordinates {
    display: flex;
    gap: 16px;
}

.establishment-address__coordinates .input-field {
    flex: 1;
    min-width: 0;
}

.establishment-address__slug-suggest {
    align-self: flex-start;
    margin-top: 8px;
    padding: 0;
    border: none;
    background: none;
    color: var(--brand-color);
    font-size: var(--typo-size-ms);
    cursor: pointer;
}

.establishment-address__slug-suggest[hidden] {
    display: none;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .establishment-address__coordinates {
        flex-direction: column;
        gap: 12px;
    }
}

/**
 * Settings Checkbox Group Styles
 * Стили для компонента группировки чекбоксов
 */

.settings-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.settings-checkbox-group--horizontal {
    flex-direction: row;
    gap: 35px;
    flex-wrap: wrap;
}

.settings-checkbox-group--horizontal .checkbox {
    margin-bottom: 0;
    flex-shrink: 0;
}

/* Адаптивность для горизонтального расположения */
@media (max-width: 768px) {
    .settings-checkbox-group--horizontal {
        flex-direction: column;
        gap: 0;
    }
    
    .settings-checkbox-group--horizontal .checkbox {
        margin-bottom: 0;
    }
}

.settings-checkbox-group .checkbox {
    height: 42px;
    display: flex;
    align-items: center;
}

/**
 * Preparation Time Slider Styles
 * Стили для компонента слайдера времени приготовления
 */

.preparation-time-slider {
    width: 100%;
    margin-bottom: 20px;
}

.preparation-time-slider__container {
    position: relative;
    display: flex;
    align-items: center;
    height: 60px;
}

.preparation-time-slider__track {
    flex: 1;
    width: 100%;
    height: 5px;
    background-color: var(--border-color-gray);
    border-radius: var(--border-radius-xs);
    position: relative;
    cursor: pointer;
}

.preparation-time-slider__thumb {
    position: absolute;
    width: 26px;
    height: 26px;
    background-color: var(--brand-accent-color);
    border: 3px solid var(--background-color-white);
    border-radius: 50%;
    cursor: grab;
    transform: translateX(-50%);
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease;
}

.preparation-time-slider__thumb:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.preparation-time-slider--dragging .preparation-time-slider__thumb {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.1);
}

.preparation-time-slider__label {
    position: absolute;
    top: 50px;
    transform: translateX(-50%);
    font-size: var(--typo-size-ms);
    font-weight: var(--typo-weight-bold);
    color: var(--brand-accent-color);
    white-space: nowrap;
    pointer-events: none;
}

.preparation-time-slider__min-label,
.preparation-time-slider__max-label {
    position: absolute;
    top: 50px;
    transform: translateY(0);
    font-size: var(--typo-size-ms);
    font-weight: var(--typo-weight-regular);
    color: var(--typo-color-minor);
    pointer-events: none;
}

.preparation-time-slider__min-label {
    left: 0;
}

.preparation-time-slider__max-label {
    right: 0;
}

/**
 * Working Hours Component Styles
 * Стили для компонента режима работы заведения
 */

/* Основной контейнер */
.working-hours {
    
}

/* Заголовок с кнопкой добавления интервала */
.working-hours__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.working-hours__title {
    font-size: var(--typo-size-m);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
    margin: 0;
}

.working-hours__add-interval-link {
    font-size: var(--typo-size-ms);
    font-weight: var(--typo-weight-medium);
    color: var(--brand-color);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.working-hours__add-interval-link:hover {
    opacity: 0.8;
}

/* Контейнер для рабочих интервалов */
.working-hours__intervals-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
}

/* Блок рабочего интервала */
.working-hours-interval {
    display: flex;
    flex-direction: column;
    background-color: var(--background-color-light);
    border-radius: var(--border-radius-s);
    padding: 20px;
    gap: 15px;
}

.working-hours-interval__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.working-hours-interval__title {
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
}

.working-hours-interval__add-days-link {
    font-size: var(--typo-size-ms);
    font-weight: var(--typo-weight-medium);
    color: var(--brand-color);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.working-hours-interval__add-days-link:hover {
    opacity: 0.8;
}

/* Контейнер дней недели в интервале */
.working-hours-interval__days {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.working-hours-interval__days:empty {
    margin-bottom: 0;
}

.working-hours-interval__time:empty {
    display: none;
}

.working-hours-interval__time-row {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 300px;
}

.working-hours-interval__time-input .input-field {
    margin-bottom: 0;
    flex: 1;
}

.working-hours-interval__time-input .input-field__input {
    background-color: var(--background-color-white);
    height: 40px;
}

.working-hours-interval__time-separator {
    font-size: var(--typo-size-s);
    color: var(--typo-color-black);
    line-height: 1;
    display: flex;
    align-items: center;
    height: 40px;
}

/* Блок выходных дней */
.working-hours__weekend-block {
    background-color: var(--background-color-light);
    border-radius: var(--border-radius-s);
    padding: 20px;
}

.working-hours-weekend__title {
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
    margin-bottom: 5px;
}

.working-hours-weekend__description {
    font-size: var(--typo-size-xs);
    color: var(--typo-color-minor);
    margin-bottom: 15px;
}

.working-hours-weekend__days {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Общие стили для дней недели */
.working-hours__day {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 8px;
    background-color: var(--brand-accent-light-color);
    border-radius: var(--border-radius-xs);
    font-size: var(--typo-size-xs);
    color: var(--typo-color-black);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

/* Рабочие дни */
.working-hours__day--working {
    position: relative;
}

.working-hours__day--working:hover,
.working-hours__day--working--hover {
    background-color: var(--color-red);
    color: var(--typo-color-white);
}

.working-hours__day-remove-icon {
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    line-height: 1;
}

.working-hours__day-remove-icon img {
    width: 15px;
    height: 15px;
    transition: filter 0.2s ease;
}

.working-hours__day--working:hover .working-hours__day-remove-icon img,
.working-hours__day--working--hover .working-hours__day-remove-icon img {
    filter: brightness(0) invert(1); /* Делаем иконку белой */
}

.working-hours__day-text {
    line-height: 1;
}

/* Выходные дни */
.working-hours__day--weekend {
    cursor: default;
}

/* Стили для селектора дней внутри модального окна */
.day-selector__content {
    /* Контент будет стилизован через modal.css */
}

.day-selector__days-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.day-selector__day-item {
    /* Стили чекбоксов будут взяты из checkbox.css */
}

.last-order-preparation-time {
    width: 100%;
}

.last-order-preparation-time__input-wrapper {
    margin-top: 20px;
}

.last-order-preparation-time__input-wrapper .input-field__input {
    text-align: left;
}

.other-reason-fields {
    margin-top: 20px;
}

.other-reason-fields .input-field:first-child {
    margin-bottom: 15px;
}

.other-reason-fields .input-field:last-child {
    margin-bottom: 0;
}

/* Кнопка "назад" */
.back-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--brand-color);
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-bold);
    font-family: var(--font-family);
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s ease;
}

.back-button:hover {
    opacity: 0.8;
}

.back-button__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: block;
}

.back-button__text {
    color: var(--brand-color);
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-bold);
}

/**
 * Image Upload Component Styles
 * Стили для компонента загрузки изображений
 */

.image-upload {
    display: flex;
    flex-direction: column;
}

.image-upload__block {
    width: 100%;
    height: 120px;
    border: 2px dashed var(--brand-accent-color);
    border-radius: var(--border-radius-s);
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: transparent;
    cursor: pointer;
    transition: border-color 0.2s ease;
    position: relative;
}

.image-upload__block:hover {
    border-color: var(--brand-color);
}

.image-upload__block--dragover {
    border-color: var(--brand-color);
    background-color: var(--brand-background-color);
}

.image-upload__image-container {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    position: relative;
}

.image-upload__placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--background-color-minor);
    border-radius: var(--border-radius-s);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--typo-color-minor);
}

.image-upload__placeholder-icon {
    width: 40px;
    height: 40px;
}

.image-upload__preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-s);
}

.image-upload__delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--border-radius-xs);
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--typo-color-black);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    padding: 0;
    z-index: 10;
}

.image-upload__delete-btn:hover {
    background-color: var(--color-red);
    color: var(--typo-color-white);
}

.image-upload__delete-btn svg {
    width: 16px;
    height: 16px;
}

.image-upload__file-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.image-upload__file-icon {
    width: 40px;
    height: 40px;
}

.image-upload__file-name {
    font-size: var(--typo-size-xxs);
    color: var(--typo-color-minor);
    word-break: break-all;
    max-width: 80px;
}

.image-upload__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}

.image-upload__label {
    margin: 0;
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-medium);
    color: var(--typo-color-black);
    line-height: 1.2;
}

.image-upload__description {
    margin: 0;
    font-size: var(--typo-size-xs);
    color: var(--typo-color-minor);
    line-height: 1.2;
    white-space: pre-line;
}

.image-upload__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--brand-color);
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-medium);
    cursor: pointer;
    transition: color 0.2s ease;
    margin-top: 8px;
}

.image-upload__link:hover {
    color: var(--brand-accent-color);
}

.image-upload__link-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Состояние с загруженным файлом */
.image-upload--has-file .image-upload__block {
    border-style: solid;
    border-color: var(--brand-color);
}

.image-upload--has-file .image-upload__link {
    color: var(--typo-color-minor);
}

.image-upload--has-file .image-upload__link:hover {
    color: var(--brand-color);
}

@media (max-width: 768px) {
    .image-upload__block {
        height: auto;
    }

    .image-upload__image-container {
        width: 150px;
        height: 150px;
    }
}

/* Date Interval Component */
.date-interval {
    max-width: 750px;
}

.date-interval__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.date-interval__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--typo-color-black);
    margin: 0;
}

.date-interval__add-link {
    font-size: var(--typo-size-ms);
    font-weight: var(--typo-weight-medium);
    color: var(--brand-color);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.date-interval__add-link:hover {
    opacity: 0.8;
}

.date-interval__intervals-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.date-interval__interval-row {
    display: flex;
    gap: 16px;
    align-items: center;
}

.date-interval__input {
    flex: 1;
}

.date-interval__separator {
    font-size: 14px;
    color: var(--typo-color-minor);
    flex-shrink: 0;
}

.date-interval__delete-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.date-interval__delete-btn:hover {
    opacity: 0.7;
}

.date-interval__delete-btn img {
    width: 15px;
    height: 15px;
}

/* Мобильные: дата и время в одну строку */
@media (max-width: 768px) {
    .date-interval__interval-row {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
    }

    .date-interval__input {
        flex: 1 1 0;
        min-width: 0;
        margin-bottom: 0;
    }

    .date-interval__interval-row > .date-interval__input:first-child {
        flex: 1 1 0;
    }

    .date-interval__interval-row > .date-interval__input:not(:first-child) {
        flex: 0 1 4.25rem;
        min-width: 3.25rem;
        max-width: 4.75rem;
    }

    .date-interval__interval-row .input-field__input {
        padding-left: 8px;
        padding-right: 8px;
    }

    .date-interval__separator {
        display: block;
        flex-shrink: 0;
        font-size: var(--typo-size-xs);
    }

    .date-interval__delete-btn {
        position: static;
        flex-shrink: 0;
    }
}


.footer {
    position: fixed;
    bottom: 0;
    left: var(--crm-footer-side-offset);
    right: 0;
    height: var(--crm-footer-height);
    border-top: 1px solid var(--border-color-gray);
    padding: 0 35px;
    display: flex;
    align-items: center;
    background-color: var(--background-color-white);
    z-index: 1000;
}

.footer__content {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.footer__content > .action-button {
    width: auto;
}

.footer--hidden {
    display: none;
}

@media (max-width: 768px) {
    body.crm-mobile-navigation .footer {
        display: none;
    }

    .footer {
        left: 0;
        height: calc(var(--crm-footer-height) + env(safe-area-inset-bottom, 0px));
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .footer__content {
        min-height: var(--crm-footer-height);
    }
}

/**
 * Calendar Component Styles
 * Стили для компонента календаря
 */

/* Попап календаря */
.calendar-popup {
    position: absolute;
    background: var(--background-color-white);
    border: 1px solid var(--border-color-gray);
    border-radius: var(--border-radius-s);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
    height: auto;
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: calc(var(--crm-modal-z-index) + 20);
}

/* Контейнер месяцев с вертикальным скроллом */
.calendar-popup__months-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 300px;
}

/* Месяц календаря */
.calendar-month {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Заголовок месяца */
.calendar-month__header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
}

.calendar-month__title {
    font-size: var(--typo-size-m);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
    margin: 0;
}

/* Заголовки дней недели */
.calendar-month__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.calendar-month__weekday {
    font-size: var(--typo-size-xs);
    font-weight: var(--typo-weight-medium);
    color: var(--typo-color-minor);
    text-align: center;
    padding: 8px 0;
}

/* Контейнер дней */
.calendar-month__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

/* День календаря */
.calendar-month__day {
    min-width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: var(--border-radius-xs);
    font-size: var(--typo-size-ms);
    font-weight: var(--typo-weight-regular);
    color: var(--typo-color-black);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: var(--font-family);
}

.calendar-month__day:hover {
    background: var(--background-color-light);
}

.calendar-month__day--empty {
    cursor: default;
    pointer-events: none;
}

.calendar-month__day--empty:hover {
    background: transparent;
}

.calendar-month__day--disabled {
    color: var(--typo-color-minor);
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.calendar-month__day--disabled:hover {
    background: transparent;
}

/* Сегодняшний день */
.calendar-month__day--today {
    font-weight: var(--typo-weight-bold);
    color: var(--brand-color);
}

.calendar-month__day--today:not(.calendar-month__day--selected):not(.calendar-month__day--range-start):not(.calendar-month__day--range-end) {
    border: 1px solid var(--brand-color);
}

/* Выбранный день (один) */
.calendar-month__day--selected {
    background: var(--brand-color);
    color: var(--typo-color-white);
    font-weight: var(--typo-weight-bold);
}

.calendar-month__day--selected:hover {
    background: var(--brand-color);
    opacity: 0.9;
}

/* День в диапазоне */
.calendar-month__day--in-range {
    background: var(--brand-background-color);
    color: var(--typo-color-black);
}

.calendar-month__day--in-range:hover {
    background: var(--brand-accent-light-color);
}

/* Начало диапазона */
.calendar-month__day--range-start {
    background: var(--brand-color);
    color: var(--typo-color-white);
    font-weight: var(--typo-weight-bold);
    border-radius: var(--border-radius-xs) 0 0 var(--border-radius-xs);
}

.calendar-month__day--range-start:hover {
    background: var(--brand-color);
    opacity: 0.9;
}

/* Конец диапазона */
.calendar-month__day--range-end {
    background: var(--brand-color);
    color: var(--typo-color-white);
    font-weight: var(--typo-weight-bold);
    border-radius: 0 var(--border-radius-xs) var(--border-radius-xs) 0;
}

.calendar-month__day--range-end:hover {
    background: var(--brand-color);
    opacity: 0.9;
}

/* Если диапазон состоит из одного дня */
.calendar-month__day--range-start.calendar-month__day--range-end {
    border-radius: var(--border-radius-xs);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .calendar-popup {
        padding: 15px;
        max-height: 350px; /* Высота примерно одного месяца для мобильных */
    }

    .calendar-popup__months-container {
        min-width: 280px;
        gap: 25px;
    }

    .calendar-month__day {
        min-width: 32px;
        height: 32px;
        font-size: var(--typo-size-xs);
    }

    .calendar-month__weekday {
        font-size: 11px;
        padding: 6px 0;
    }
}

/**
 * Nomenclature Controls Styles
 * Стили для блока управления номенклатурой
 */

.nomenclature-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.nomenclature-controls__left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nomenclature-controls__right {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.nomenclature-controls__right > * {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nomenclature-controls__right .action-button {
    flex-shrink: 0;
}

.nomenclature-controls__sync-status {
    color: var(--color-text-secondary, #667085);
    font-size: var(--typo-size-xs);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .nomenclature-controls {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 12px;
    }

    .nomenclature-controls__left {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .nomenclature-controls__search {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .nomenclature-controls__search .search-input {
        width: 100%;
        max-width: none;
    }

    .nomenclature-controls__right {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .nomenclature-controls__right .action-button {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 10px;
        font-size: var(--typo-size-xs);
    }

    .nomenclature-controls__sync-status {
        display: none;
    }
}
/**
 * Горизонтальный скролл таблиц CRM на узких экранах.
 * Шапка sticky при вертикальном скролле страницы (отдельные overflow-x треки).
 */

:root {
    --crm-nomenclature-table-min-width: 960px;
    --crm-modifiers-table-min-width: 1140px;
    --crm-sticky-table-header-top: 105px;
}

.crm-table-scroll {
    width: 100%;
    max-width: 100%;
}

.crm-table-scroll-sync {
    width: 100%;
}

.crm-table-scroll__header-sticky {
    position: sticky;
    top: var(--crm-sticky-table-header-top);
    z-index: 30;
    margin-top: 30px;
    margin-bottom: 6px;
    background-color: var(--background-color-white);
}

.crm-table-scroll__header-sticky .table-header {
    margin-top: 0;
    margin-bottom: 0;
}

.crm-table-scroll__header-track {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.crm-table-scroll__header-track::-webkit-scrollbar {
    display: none;
}

.crm-table-scroll__body-track {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.crm-table-scroll__track-inner {
    width: 100%;
    min-width: var(--crm-nomenclature-table-min-width);
    box-sizing: border-box;
    contain: inline-size;
}

.crm-table-scroll__track-inner .table-header,
.crm-table-scroll__track-inner .table-row {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.crm-table-scroll--modifiers .crm-table-scroll__track-inner {
    min-width: var(--crm-modifiers-table-min-width);
}

@media (max-width: 768px) {
    /* Скролл в .page-content; шапка таблицы липнет к его верху */
    .page--mobile-app {
        --crm-sticky-table-header-top: -10px;
    }

    .page--mobile-app .content__body {
        min-width: 0;
        max-width: 100%;
    }

    .nomenclature-view {
        min-width: 0;
        max-width: 100%;
    }

    .dish-modifiers__section {
        max-width: none;
    }

    .dish-modifiers {
        padding: 16px;
    }
}

.nomenclature-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    max-width: 100%;
}

.nomenclature-table-scroll {
    min-height: 320px;
}

.nomenclature-table__rows {
    display: flex;
    flex-direction: column;
}

.nomenclature-table__footer {
    padding: 12px 0 24px;
    font-size: var(--typo-size-xs);
    color: var(--typo-color-minor);
    text-align: center;
}

/*
 * Номенклатура: grid вместо flex — minmax(0, 1fr) для «Описание» не даёт
 * длинному тексту в строках блюд раздувать ширину таблицы при ресайзе.
 */
.crm-table-scroll:not(.crm-table-scroll--modifiers) {
    --crm-nomenclature-grid-columns:
        minmax(140px, 1.5fr)
        90px
        minmax(0, 1fr)
        110px
        120px
        140px;
}

.crm-table-scroll:not(.crm-table-scroll--modifiers) .table-header,
.crm-table-scroll:not(.crm-table-scroll--modifiers) .table-row {
    display: grid;
    grid-template-columns: var(--crm-nomenclature-grid-columns);
    column-gap: 20px;
    align-items: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.crm-table-scroll:not(.crm-table-scroll--modifiers) .table-row__column {
    margin-right: 0;
    min-width: 0;
    max-width: 100%;
    width: auto;
    flex: unset;
}

.crm-table-scroll:not(.crm-table-scroll--modifiers) .table-header__column {
    margin-right: 0;
    min-width: 0;
    max-width: 100%;
    flex: unset;
}

.crm-table-scroll:not(.crm-table-scroll--modifiers) .table-row__column--description {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-table-scroll:not(.crm-table-scroll--modifiers) .table-row__column--name {
    display: flex;
    overflow: hidden;
}

.crm-table-scroll:not(.crm-table-scroll--modifiers) .item-row .table-row__column--description {
    line-height: 45px;
}

.crm-table-scroll:not(.crm-table-scroll--modifiers) .category-row .table-row__column--description {
    line-height: 34px;
}

.nomenclature-stop-list-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.nomenclature-stop-balance {
    color: #d4a017;
    font-size: var(--typo-size-xxs);
    white-space: nowrap;
}

/**
 * Table Rows Component Styles
 * Стили для компонентов строк таблицы номенклатуры
 */

/* Общие стили для строк таблицы */
.table-row {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    border-radius: var(--border-radius-s);
    background-color: var(--background-color-white);
    cursor: pointer;
    transition: background-color 0.2s ease;
    height: 34px;
    min-width: 0;
}

.table-row:hover {
    background-color: var(--background-color-light);
}

.table-row--selected {
    background-color: var(--background-color-light);
}

.table-row__column {
    flex: 1;
    font-size: var(--typo-size-s);
    font-family: var(--font-family);
    color: var(--typo-color-black);
    margin-right: 20px;
    height: 34px;
    display: flex;
    align-items: center;
    min-width: 0;
}

.table-row__column:first-child {
    flex: 1.5 1 180px;
}

.table-row__column:nth-child(2) {
    flex: 0 1 90px;
}

.table-row__column:nth-child(4) {
    flex: 0 1 110px;
}

.table-row__column:last-child {
    margin-right: 0;
}

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

.table-row__column--actions {
    justify-content: flex-end;
    gap: 18px;
    flex: 0 0 140px;
}

.table-row__column--name {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1.5 1 180px;
    min-width: 0;
    overflow: hidden;
}

.table-row__column--description {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

.table-row__column-text-ellipsis {
    display: block;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
}

.table-row__column:nth-child(5) {
    flex: 0 0 120px;
    justify-content: center;
}

/* Стили для категорий */
.category-row {
    padding-left: 10px;
    padding-right: 30px;
}

.category-cursor {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.category-cursor--expanded {
    transform: rotate(90deg);
}

.category-icon {
    flex-shrink: 0;
}

.category-name {
    font-weight: var(--typo-weight-regular);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Стили для элементов номенклатуры */
.item-row {
    height: 45px;
    cursor: default;
    padding-left: 10px;
    padding-right: 30px;
}

.cursor-spacer {
    flex-shrink: 0;
}

.item-image {
    width: 39px;
    height: 39px;
    border-radius: var(--border-radius-m);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-image__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-image--placeholder {
    background-color: var(--background-color-minor);
}

.item-name {
    font-weight: var(--typo-weight-regular);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Стили для действий */
.action-icon-button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.action-icon-button:hover {
    opacity: 0.7;
}

.action-icon-button img {
    width: 22px;
    height: 22px;
}
.tooltip {
    position: fixed;
    z-index: 10000;
    padding: 6px 10px;
    font-size: var(--typo-size-xxs);
    font-weight: var(--typo-weight-medium);
    line-height: 1.3;
    color: var(--typo-color-white);
    background: var(--typo-color-black);
    border-radius: var(--border-radius-xs);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    box-shadow: 0 2px 8px rgba(33, 32, 31, 0.2);
}

.tooltip--visible {
    opacity: 1;
    visibility: visible;
}

/**
 * Search Input Component Styles
 * Стили для компонента инпута поиска
 */

.search-input {
    position: relative;
    width: 315px;
    height: 40px;
}

.search-input__icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    z-index: 1;
    pointer-events: none;
}

.search-input__icon img {
    width: 100%;
    height: 100%;
}

.search-input__input {
    width: 100%;
    height: 100%;
    border: 1px solid var(--border-color-gray);
    background-color: var(--background-color-light);
    border-radius: var(--border-radius-s);
    padding: 10px 15px 10px 48px; /* 15px отступ от иконки + 15px отступ от левого края */
    font-size: var(--typo-size-ms);
    font-family: var(--font-family);
    color: var(--typo-color-black);
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.search-input__input:focus {
    outline: none;
    border-color: var(--brand-color);
}

.search-input__input::placeholder {
    color: var(--typo-color-minor);
}

/**
 * Table Header Component Styles
 * Стили для компонента шапки таблицы
 */

.table-header {
    display: flex;
    background-color: var(--background-color-light);
    height: 42px;
    border-radius: var(--border-radius-s);
    padding: 0 35px;
    align-items: center;
    margin-bottom: 6px;
    margin-top: 30px;
    min-width: 0;
}

.table-header__column {
    flex: 1;
    font-size: var(--typo-size-xs);
    font-weight: var(--typo-weight-bold);
    color: var(--icon-color-gray);
    font-family: var(--font-family);
    margin-right: 20px;
    min-width: 0;
}

.table-header__column:first-child {
    flex: 1.5 1 180px;
}

.table-header__column:nth-child(2) {
    flex: 0 1 90px;
}

.table-header__column:nth-child(3) {
    flex: 1 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-header__column:nth-child(4) {
    flex: 0 1 110px;
}

.table-header__column:last-child {
    margin-right: 0;
    text-align: right;
}

.table-header__column:nth-child(5) {
    flex: 0 0 120px;
}

.table-header__column:nth-child(6) {
    flex: 0 0 140px;
}

/**
 * Modifiers Table Styles
 * Дополнительные стили для таблицы модификаторов
 */

/* Блок действий */
.modifiers-actions {
    display: flex;
    gap: 10px;
}

.modifiers-actions__left {
    width: 50%;
}

.modifiers-actions__right {
    width: 50%;
    display: flex;
    justify-content: flex-end;
}

/* Минимальная ширина колонок в таблице модификаторов */
.table-row__column--name {
    min-width: 270px;
}

.table-row__column--qty-input,
.table-row__column--center {
    justify-content: flex-start !important;
}

/* Колонки с инпутами количества */
.table-row__column--qty-input {
    padding: 5px 0;
}

.table-row__column--qty-input .input-field {
    width: 100%;
    max-width: 95px;
}

.table-row__column--qty-input .input-field__label {
    display: none;
}

.table-row__column--qty-input .input-field__input {
    height: 32px;
    padding: 6px 10px;
}

/* Чекбоксы в колонках - выравнивание по левому краю */
.table-row__column--center .checkbox__label {
    display: none;
}
/* Input Select Styles */

.input-select-field {
    width: 100%;
    margin-bottom: 20px;
}

/* Label стили теперь используются из input.css через класс input-field__label */

.input-select-field__container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    cursor: pointer;
}

.input-select-field__input {
    flex: 1;
    height: 40px;
    padding: 0 16px;
    padding-right: 40px; /* Место для иконки */
    border: 1px solid var(--border-color-gray);
    border-radius: var(--border-radius-s);
    font-size: var(--typo-size-ms);
    font-family: var(--font-family);
    color: var(--typo-color-black);
    background-color: var(--background-color-light);
    transition: border-color 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.input-select-field__input:focus {
    outline: none;
    border-color: var(--brand-color);
}

.input-select-field__input::placeholder {
    color: var(--typo-color-minor);
}

.input-select-field__input:hover {
    border-color: var(--brand-color);
}

.input-select-field__icon {
    position: absolute;
    right: 16px;
    width: 14px;
    height: 14px;
    pointer-events: none;
    transition: transform 0.2s ease;
    filter: brightness(0); /* Делает иконку черной */
}

.input-select-field__container:hover .input-select-field__icon {
    filter: brightness(0) sepia(1) saturate(5) hue-rotate(85deg); /* Цвет brand-color */
}

/**
 * Category Selector Styles
 * Стили для компонента выбора категории
 */

.category-selector__content {
    padding: 0;
}

.category-selector__categories-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.category-selector__category-item {
    padding: 0;
}

.category-selector__item-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    cursor: pointer;
}

.category-selector__left-content {
    display: flex;
    align-items: center;
    flex: 1;
}

.category-selector__category-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-right: 10px;
}

.category-selector__category-label {
    font-size: var(--typo-size-ms);
    font-weight: var(--typo-weight-regular);
    color: var(--typo-color-black);
}

.category-selector__item-content .checkbox {
    margin: 0;
}

.category-selector__confirm-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/**
 * Position Control Component Styles
 * Стили для компонента кнопок изменения позиции элемента
 */

.position-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.position-control__button {
    width: 40px;
    height: 40px;
    background-color: var(--background-color-minor);
    border-radius: var(--border-radius-s);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.position-control__button:hover {
    background-color: var(--background-color-light);
    border-color: var(--brand-color);
}

.position-control__button img {
    width: 18px;
    height: 18px;
    filter: brightness(0) saturate(100%) invert(62%) sepia(7%) saturate(7%) hue-rotate(314deg) brightness(92%) contrast(92%);
    transform: rotate(90deg);
}

.position-control__button--up img {
    transform: rotate(270deg);
}

.position-control__button--down img {
    transform: rotate(90deg);
}   

.geozone-edit-page__form {
    min-width: 0;
    width: 100%;
}

.geozone-edit-page__draw-zone {
    display: block;
    margin-bottom: 24px;
}

@media (min-width: 769px) {
    .geozone-edit-page__draw-zone {
        display: none;
    }
}

.geozone-edit-page__draw-zone .action-button {
    width: 100%;
}

.geozone-edit-page__title {
    margin: 0 0 24px;
    font-size: 24px;
    font-weight: 600;
    color: var(--typo-color-black);
}

.geozone-edit-page__errors {
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #fff0f0;
    border: 1px solid #ffcaca;
}

.geozone-edit-page__error {
    margin: 0;
    color: #b42318;
    font-size: var(--typo-size-ms);
}

.geozone-edit-page__error + .geozone-edit-page__error {
    margin-top: 6px;
}

.geozone-edit-page__footer-secondary {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .geozone-edit-page__title {
        font-size: 20px;
    }
}



/**
 * Полноэкранная страница рисования геозоны на карте.
 */

html:has(.geozone-map-page) {
    scrollbar-gutter: auto;
}

.page-content:has(.geozone-map-page) {
    padding: 0;
    overflow: hidden;
    background-color: #d9d9d9;
}

.geozone-map-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: calc(100vh - 105px);
}

.geozone-map-page__map-host {
    flex: 1;
    min-height: calc(100vh - 105px - var(--crm-footer-height));
    background-color: #d9d9d9;
}

.geozone-map-page__footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
}

.geozone-map-page__cancel {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-size: var(--typo-size-ms);
    font-weight: var(--typo-weight-medium);
    color: #d92d20;
    cursor: pointer;
    flex-shrink: 0;
}

.geozone-map-page__cancel:hover {
    opacity: 0.85;
}

@media (max-width: 768px) {
    .geozone-map-page {
        min-height: calc(100dvh - var(--mobile-header-height, 72px) - env(safe-area-inset-top, 0px));
    }

    .geozone-map-page__map-host {
        min-height: calc(
            100dvh
            - var(--mobile-header-height, 72px)
            - var(--crm-footer-height)
            - env(safe-area-inset-top, 0px)
            - env(safe-area-inset-bottom, 0px)
        );
    }

    .geozone-map-page__footer {
        flex-wrap: wrap;
    }
}

.pricing-rules-editor {
    max-width: 750px;
}

.pricing-rules-editor__modes {
    margin-bottom: 24px;
}

.pricing-rules-editor__table-head,
.pricing-rules-editor__row {
    display: grid;
    gap: 16px;
    align-items: center;
}

.pricing-rules-editor__table-head[data-columns='2'],
.pricing-rules-editor__row[data-columns='2'] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24px;
}

.pricing-rules-editor__table-head[data-columns='3'],
.pricing-rules-editor__row[data-columns='3'] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 24px;
}

.pricing-rules-editor__table-head {
    margin-bottom: 12px;
}

.pricing-rules-editor__head-cell {
    font-size: var(--typo-size-ms);
    font-weight: var(--typo-weight-medium);
    color: var(--typo-color-minor);
}

.pricing-rules-editor__head-cell--actions {
    width: 24px;
}

.pricing-rules-editor__rules {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pricing-rules-editor__cell {
    min-width: 0;
}

.pricing-rules-editor__cell--actions {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pricing-rules-editor__input .input-field__label {
    display: none;
}

.pricing-rules-editor__select-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.pricing-rules-editor__select-label {
    display: none;
    font-size: var(--typo-size-ms);
    color: var(--typo-color-minor);
}

.pricing-rules-editor__delete-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.pricing-rules-editor__delete-btn:hover {
    opacity: 0.7;
}

.pricing-rules-editor__delete-btn img {
    width: 15px;
    height: 15px;
}

.pricing-rules-editor__footer {
    margin-top: 16px;
}

.pricing-rules-editor__add-link {
    font-size: var(--typo-size-ms);
    font-weight: var(--typo-weight-medium);
    color: var(--brand-color);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.pricing-rules-editor__add-link:hover {
    opacity: 0.8;
}

.select-field {
    width: 100%;
    min-width: 0;
}

.select-field__control {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.select-field__trigger {
    flex: 1;
    width: 100%;
    min-width: 0;
    height: 40px;
    margin: 0;
    padding: 0 40px 0 16px;
    border: 1px solid var(--border-color-gray);
    border-radius: var(--border-radius-s);
    font-size: var(--typo-size-ms);
    font-family: var(--font-family);
    font-weight: var(--typo-weight-regular);
    color: var(--typo-color-black);
    text-align: left;
    background-color: var(--background-color-light);
    transition: border-color 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.select-field__trigger:hover:not(:disabled) {
    border-color: var(--brand-color);
}

.select-field__trigger:focus {
    outline: none;
    border-color: var(--brand-color);
}

.select-field__trigger:focus-visible {
    outline: none;
    border-color: var(--brand-color);
}

.select-field__trigger:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.select-field__trigger--open {
    border-color: var(--brand-color);
}

.select-field__value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-field__value--placeholder {
    color: var(--typo-color-minor);
}

.select-field__icon {
    position: absolute;
    right: 16px;
    width: 14px;
    height: 14px;
    pointer-events: none;
    transition: transform 0.2s ease, filter 0.2s ease;
    filter: brightness(0);
}

.select-field__control:hover .select-field__icon,
.select-field__trigger--open + .select-field__icon {
    filter: brightness(0) sepia(1) saturate(5) hue-rotate(85deg);
}

.select-field__trigger--open + .select-field__icon {
    transform: rotate(90deg);
}

.select-field__list {
    position: fixed;
    /* Выше модалки (--crm-modal-z-index: 1200), список монтируется в body */
    z-index: calc(var(--crm-modal-z-index) + 10);
    margin: 0;
    padding: 4px 0;
    list-style: none;
    max-height: min(240px, 40vh);
    overflow-y: auto;
    border: 1px solid var(--border-color-gray);
    border-radius: var(--border-radius-s);
    background-color: var(--background-color-white);
    box-shadow: 0 8px 24px rgba(33, 32, 31, 0.12);
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color-gray) transparent;
}

.select-field__list::-webkit-scrollbar {
    width: 4px;
}

.select-field__list::-webkit-scrollbar-track {
    background: transparent;
}

.select-field__list::-webkit-scrollbar-thumb {
    background-color: var(--border-color-gray);
    border-radius: 2px;
}

.select-field__option {
    display: block;
    width: 100%;
    margin: 0;
    padding: 10px 16px;
    border: none;
    font-size: var(--typo-size-ms);
    font-family: var(--font-family);
    font-weight: var(--typo-weight-regular);
    color: var(--typo-color-black);
    text-align: left;
    background: transparent;
    cursor: pointer;
    box-sizing: border-box;
}

.select-field__option:hover,
.select-field__option:focus {
    outline: none;
    background-color: var(--background-color-light);
}

.select-field__option--selected {
    background-color: var(--brand-accent-light-color);
}

.select-field__option--active {
    background-color: var(--background-color-light);
}

.select-field__option--selected.select-field__option--active {
    background-color: var(--brand-accent-light-color);
}

.select-field__option:disabled,
.select-field__option--disabled {
    color: var(--typo-color-minor);
    opacity: 0.55;
    cursor: not-allowed;
}

.select-field__option:disabled:hover,
.select-field__option:disabled:focus,
.select-field__option--disabled:hover,
.select-field__option--disabled:focus {
    background-color: transparent;
}

.geozones-list-view {
    min-width: 0;
}

.geozones-list-view__list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.geozones-list-view__empty {
    margin: 0;
    color: var(--typo-color-minor);
    font-size: var(--typo-size-ms);
}

.geozone-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--background-color-white, #fff);
    cursor: pointer;
}

.geozone-row__icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: var(--background-color-gray, #f3f3f3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.geozone-row__icon img {
    width: 24px;
    height: 24px;
}

.geozone-row__name {
    flex: 1;
    min-width: 0;
    font-size: var(--typo-size-ms);
    color: var(--typo-color-black);
}

.geozone-row__edit {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.geozone-row__edit img {
    width: 24px;
    height: 24px;
}

.geozone-row__edit:hover {
    opacity: 0.85;
}

@media (max-width: 768px) {
    .geozones-list-view {
        padding-top: 4px;
    }

    .geozone-row {
        gap: 12px;
    }

    .geozone-row__name {
        font-size: var(--typo-size-s);
    }
}

/**
 * Layout раздела «Геозоны»: панель 2-го уровня (435px) + область карты.
 */

 html:has(.geozones-workspace) {
    scrollbar-gutter: auto;
}

 .page-content:has(.geozones-workspace) {
    padding: 0;
    overflow: hidden;
 }

.geozones-workspace {
    --geozones-panel-width: 515px;
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 105px);
}

.geozones-workspace__panel {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: var(--geozones-panel-width);
    max-width: var(--geozones-panel-width);
    min-height: calc(100vh - 105px);
    max-height: calc(100vh - 105px);
    border-right: 1px solid var(--border-color-gray, #e8e8e8);
    background-color: var(--background-color-white, #fff);
}

.geozones-workspace__panel-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 35px calc(var(--crm-footer-height) + 105px) 35px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color-gray) transparent;
}

.geozones-workspace__panel-scroll::-webkit-scrollbar {
    width: 4px;
}

.geozones-workspace__panel-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.geozones-workspace__panel-scroll::-webkit-scrollbar-thumb {
    background-color: var(--border-color-gray);
    border-radius: 2px;
}

.geozones-workspace__panel-scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--icon-color-gray);
}

.geozones-workspace__map {
    flex: 1;
    min-width: 0;
    height: calc(100vh - 105px);
    min-height: calc(100vh - 105px);
    overflow: hidden;
    position: relative;
    background-color: #d9d9d9;
}

.geozone-edit-shell__controls {
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .geozones-workspace {
        margin: -10px -16px 0;
        min-height: 0;
        flex-direction: column;
    }

    .geozones-workspace__panel {
        width: 100%;
        max-width: none;
        min-height: 0;
        border-right: none;
    }

    .geozones-workspace__panel-scroll {
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }

    .geozones-workspace__map {
        display: none;
    }
}

@media (max-width: 768px) {
    .geozones-workspace__panel {
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }

    .page--mobile-app .geozones-workspace {
        margin-top: 0;
    }
}

/* Футер монтируется в .page (fixed); на desktop — только над панелью 2-го уровня */
@media (min-width: 769px) {
    .page:has(.geozones-workspace) {
        --geozones-panel-width: 515px;
    }

    .page:has(.geozones-workspace) > .footer {
        right: auto;
        width: var(--geozones-panel-width);
    }
}

/**
 * Компонент GeozoneMap — интерактивная карта с полигонами геозон.
 */

.geozone-map {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 360px;
    background: var(--background-color-gray, #f3f3f3);
    isolation: isolate;
}

.geozone-map__toolbar {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    pointer-events: auto;
}

.geozone-map__toolbar .checkbox {
    margin: 0;
}

.geozone-map__canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.geozone-map__hint {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 2;
    max-width: calc(100% - 32px);
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(31, 78, 45, 0.92);
    color: #fff;
    font-size: var(--typo-size-ms);
    text-align: center;
    pointer-events: none;
}

.geozone-map__error {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(255, 255, 255, 0.92);
    color: #b42318;
    text-align: center;
    font-size: var(--typo-size-ms);
    pointer-events: auto;
}

.geozone-map__error[hidden] {
    display: none !important;
}

.geozone-map__vertex {
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #1e6bff;
    padding: 0;
    cursor: grab;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transform: translate(-50%, -50%);
}

.geozone-map__vertex:active {
    cursor: grabbing;
}

/* Модификатор для fullscreen-страницы (/geozone-map) */
.geozone-map--fullscreen {
    min-height: calc(100vh - 120px);
}

.geozone-map--fullscreen .geozone-map__canvas {
    min-height: calc(100vh - 120px);
}

/* Модификатор для панели workspace (рядом с формой) */
.geozone-map--panel {
    min-height: 100%;
    height: 100%;
    border-radius: 0;
}

.geozone-map--panel .geozone-map__canvas {
    min-height: 0;
}

@media (max-width: 768px) {
    .geozone-map {
        min-height: 320px;
    }
}

.guest-edit-shell {
    max-width: 750px;
    padding-bottom: 40px;
}

.guest-edit-controls {
    margin-bottom: 24px;
}

.guest-edit__dl {
    display: grid;
    /* две пары «лейбл — значение» в ряд */
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
    column-gap: 28px;
    row-gap: 12px;
    margin: 0;
    align-items: baseline;
}

.guest-edit__dt {
    margin: 0;
    color: var(--color-text-secondary, #667085);
    font-size: var(--typo-size-s);
}

.guest-edit__dd {
    margin: 0;
    font-size: var(--typo-size-s);
    color: var(--typo-color-black);
    word-break: break-word;
    min-width: 0;
}

.guest-edit__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--border-radius-s, 6px);
    background: var(--background-color-light, #f2f4f7);
    font-size: var(--typo-size-xs);
}

.guest-edit__badge--banned {
    background: #fee4e2;
    color: #b42318;
}

.guest-edit__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.guest-edit__list-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--border-radius-s, 6px);
    background: var(--background-color-white, #fff);
    border: 1px solid var(--border-color, #e4e7ec);
}

.guest-edit__list-item-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.guest-edit__list-item-title {
    font-size: var(--typo-size-s);
    font-weight: 600;
}

.guest-edit__promo-used {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: var(--typo-size-xs);
    font-weight: 500;
    color: var(--color-text-secondary, #667085);
    background: var(--color-bg-muted, #f2f4f7);
    vertical-align: middle;
}

.guest-edit__list-item-meta {
    font-size: var(--typo-size-xs);
    color: var(--color-text-secondary, #667085);
}

.guest-edit__empty {
    margin: 0;
    color: var(--color-text-secondary, #667085);
    font-size: var(--typo-size-s);
}

.guest-edit__error {
    margin: 8px 0 0;
    color: #d92d20;
    font-size: var(--typo-size-xs);
}

.guest-edit__providers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.guest-edit-promo-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.guest-edit-promo-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 768px) {
    .guest-edit__dl {
        grid-template-columns: max-content minmax(0, 1fr);
        column-gap: 16px;
        row-gap: 8px;
    }

    .guest-edit-promo-form__row {
        grid-template-columns: 1fr;
    }
}

.date-field {
    width: 100%;
    min-width: 0;
}

.date-field--range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.date-field--inline {
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
}

.date-field__separator {
    flex: none;
    color: var(--typo-color-black);
    line-height: 40px;
    font-size: var(--typo-size-ms);
}

.date-field--inline .date-field__part {
    width: 132px;
    flex: none;
}

.date-field__part {
    min-width: 0;
}

@media (max-width: 768px) {
    .date-field--range:not(.date-field--inline) {
        grid-template-columns: 1fr;
    }
}

.guests-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    /* page-content: margin-top 105 + padding 10/110 */
    min-height: calc(100vh - 225px);
}

.guests-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.guests-controls__search {
    flex: 1;
    max-width: 360px;
}

.guests-table__rows {
    display: flex;
    flex-direction: column;
}

.guests-table__footer {
    color: var(--color-text-secondary, #667085);
    font-size: var(--typo-size-xs);
    padding: 8px 0;
    flex-shrink: 0;
}

/*
 * Таблица гостей: 7 колонок (имя, телефон, email, статус, промо, дата, действия).
 * Переопределяем сетку номенклатуры (6 колонок), иначе последняя колонка
 * переносится и шапка/тело расходятся.
 */
.crm-table-scroll.guests-table-scroll:not(.crm-table-scroll--modifiers) {
    --crm-nomenclature-grid-columns:
        minmax(140px, 1.4fr)
        minmax(130px, 1fr)
        minmax(150px, 1.2fr)
        minmax(110px, 0.85fr)
        64px
        110px
        48px;
}

.guests-table-scroll.nomenclature-table-scroll {
    flex: 1 1 auto;
    min-height: 0;
}

.guests-table-scroll .crm-table-scroll__track-inner {
    min-width: 980px;
}

.guests-table-scroll .table-header,
.guests-table-scroll .guest-row {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

.guests-table-scroll .table-header__column,
.guests-table-scroll .guest-row .table-row__column {
    text-align: left;
    justify-content: flex-start;
}

/* Сброс center у 5-й колонки из table-rows.css (там «стоп-лист» номенклатуры) */
.guests-table-scroll .guest-row .table-row__column:nth-child(5) {
    justify-content: flex-start;
}

.guests-table-scroll .table-header__column:last-child,
.guests-table-scroll .guest-row .table-row__column--actions {
    text-align: right;
    justify-content: flex-end;
}

.guest-row__col--status-banned {
    color: var(--color-danger, #d92d20);
}

.guest-row__edit {
    border: none;
    background: transparent;
    padding: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.guest-row--banned {
    opacity: 0.85;
}

@media (max-width: 768px) {
    .guests-controls__search {
        max-width: none;
        width: 100%;
    }

    .page--mobile-app .guests-view {
        min-height: calc(
            100dvh
            - var(--mobile-header-height, 72px)
            - env(safe-area-inset-top, 0px)
            - 10px
            - var(--crm-footer-height)
            - env(safe-area-inset-bottom, 0px)
        );
    }
}

.orders-view {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
    width: 100%;
}

/* Больше воздуха под фиксированным заголовком «Заказы» */
.page-content:has(.orders-view) {
    padding-top: 28px;
}

.orders-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    flex-shrink: 0;
    margin-bottom: 4px;
}

.orders-controls__search {
    flex: 1 1 220px;
    max-width: 360px;
    min-width: 180px;
}

.orders-controls__range {
    flex: 0 0 auto;
}

.orders-controls__filter {
    margin-left: auto;
    flex: 0 0 auto;
}

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    width: 100%;
    /* без overflow-x: иначе sticky ломается и top:105px наезжает на day-group */
}

.orders-list__header {
    position: sticky;
    top: 105px;
    z-index: 20;
    background: var(--background-color-white);
    margin: 0 0 12px;
    padding-bottom: 4px;
}

.orders-list__header .table-header,
.orders-list__body .order-row {
    display: grid;
    grid-template-columns:
        148px
        112px
        minmax(160px, 1fr)
        minmax(180px, 1.25fr)
        148px
        128px;
    column-gap: 28px;
    align-items: center;
    width: 100%;
    min-width: 960px;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
}

/* Сброс глобальных стилей table-header / table-row под заказы */
.orders-list__header .table-header {
    height: 42px;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: var(--border-radius-s);
    background-color: var(--background-color-light);
}

.orders-list__header .table-header__column,
.orders-list__body .order-row .table-row__column {
    flex: none;
    margin-right: 0;
    min-width: 0;
    width: auto;
    max-width: none;
    height: auto;
    text-align: left;
    justify-content: flex-start;
    overflow: hidden;
}

.orders-list__header .table-header__column:last-child {
    text-align: left;
}

.orders-table__footer {
    color: var(--color-text-secondary, #667085);
    font-size: var(--typo-size-xs);
    padding: 16px 0 8px;
    flex-shrink: 0;
}

.order-row {
    height: auto;
    min-height: 72px;
    margin: 0;
    border-radius: 0;
    padding-top: 18px;
    padding-bottom: 18px;
    cursor: default;
    border-bottom: 1px solid var(--border-color-gray);
    background-color: var(--background-color-white);
}

.order-row--clickable {
    cursor: pointer;
}

.orders-list__body .order-row {
    margin-bottom: 0;
}

.order-row:hover {
    background-color: var(--background-color-light);
}

.order-row .table-row__column {
    height: auto;
    min-height: 0;
    align-items: center;
}

.order-row__stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    width: 100%;
}

.order-row__primary {
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
    line-height: 1.3;
}

.order-row__secondary {
    font-size: var(--typo-size-xxs);
    color: var(--typo-color-minor);
    line-height: 1.3;
}

.order-row__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 9px 14px;
    border-radius: var(--border-radius-s);
    background: var(--background-color-minor);
    color: var(--typo-color-black);
    font-size: var(--typo-size-xs);
    line-height: 1.2;
    pointer-events: none;
    user-select: none;
}

.order-row__status--queued {
    background: #eef2f6;
    color: #344054;
}

.order-row__status--preparing {
    background: #fffaeb;
    color: #b54708;
}

.order-row__status--ready {
    background: #ecfdf3;
    color: #067647;
}

.order-row__status--on-way {
    background: #eff8ff;
    color: #175cd3;
}

.order-row__status--delivered {
    background: #e8f5e9;
    color: #1b5e20;
}

.order-row__status--completed {
    background: #f2f4f7;
    color: #475467;
}

.order-row__status--cancelled {
    background: #fee4e2;
    color: #b42318;
}

.order-row__status--awaiting-payment {
    background: #f4ebff;
    color: #6941c6;
}

.order-row__status--payment-failed {
    background: #ffece8;
    color: #d92d20;
}

.order-row__status--unknown {
    background: var(--background-color-minor);
    color: var(--typo-color-black);
}

.order-row__status-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-row__status-chevron {
    flex-shrink: 0;
    opacity: 0.75;
}

.order-row__timing {
    font-weight: var(--typo-weight-medium);
    white-space: nowrap;
}

.order-row__timing--ok {
    color: var(--brand-color);
}

.order-row__timing--danger {
    color: var(--color-red);
}

.orders-day-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 28px 0 12px;
    padding: 0 24px;
    min-width: 960px;
    box-sizing: border-box;
}

.orders-day-group:first-child {
    margin-top: 8px;
}

.orders-day-group__label {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand-color);
    white-space: nowrap;
}

.orders-day-group__line {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--brand-color);
    opacity: 0.9;
    min-width: 0;
}

.order-row__col--number,
.order-row__col--type,
.order-row__col--place,
.order-row__col--address,
.order-row__col--status,
.order-row__col--timing {
    min-width: 0;
}

@media (max-width: 768px) {
    .orders-view {
        gap: 20px;
        min-height: 0;
    }

    .page-content:has(.orders-view) {
        padding-top: 16px;
    }

    .orders-controls {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 16px;
        margin-bottom: 4px;
    }

    .orders-list__header {
        position: static;
        top: auto;
    }

    /* Важно: flex: 1 1 220px с десктопа раздувал поиск на всю высоту */
    .orders-controls__search,
    .orders-controls__range,
    .orders-controls__filter {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
    }

    .orders-controls__filter {
        padding: 4px 0 8px;
    }

    .orders-controls__filter .checkbox {
        min-height: 44px;
        align-items: center;
    }

    .orders-controls__search .search-input {
        width: 100%;
        height: 44px;
    }

    .orders-controls__search .search-input__input {
        border-radius: 12px;
    }

    .orders-list {
        overflow-x: hidden;
    }

    .orders-list__header {
        display: none !important;
    }

    .orders-list__body .order-row,
    .orders-day-group {
        min-width: 0;
        width: 100%;
    }

    .orders-list__body .order-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            'number status'
            'type timing'
            'address address';
        column-gap: 12px;
        row-gap: 12px;
        align-items: start;
        min-height: 0;
        height: auto;
        margin: 0 0 10px;
        padding: 16px 18px;
        border: none;
        border-radius: 12px;
        background-color: var(--background-color-light);
    }

    .orders-list__body .order-row:last-child {
        margin-bottom: 0;
    }

    .orders-list__body .order-row:hover {
        background-color: var(--background-color-light);
    }

    .orders-list__body .order-row .table-row__column {
        margin-right: 0;
        height: auto;
        min-height: 0;
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
    }

    .order-row__col--number {
        grid-area: number;
        align-items: flex-start;
    }

    .order-row__col--status {
        grid-area: status;
        justify-self: stretch;
        width: 100%;
        justify-content: flex-end;
        align-items: flex-start;
    }

    .order-row__col--type {
        grid-area: type;
        align-items: center;
        font-size: var(--typo-size-s);
    }

    .order-row__col--timing {
        grid-area: timing;
        justify-self: stretch;
        width: 100%;
        justify-content: flex-end;
        align-items: center;
        text-align: right;
    }

    .order-row__col--timing .order-row__timing {
        margin-left: auto;
        text-align: right;
    }

    .order-row__col--address {
        grid-area: address;
        align-items: flex-start;
    }

    .order-row__col--address .table-row__column-text-ellipsis {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        line-height: 1.4;
        color: var(--typo-color-black);
        font-size: var(--typo-size-s);
    }

    .order-row__col--place {
        display: none;
    }

    .order-row__stack {
        gap: 4px;
    }

    .order-row__status {
        padding: 8px 12px;
    }

    .orders-day-group {
        margin: 24px 0 12px;
        padding: 0;
        gap: 10px;
        min-width: 0;
    }

    .orders-day-group:first-child {
        margin-top: 4px;
    }

    .orders-day-group__line {
        background: var(--border-color-gray);
        opacity: 1;
    }

    .orders-table__footer {
        padding: 14px 0 6px;
    }
}

/**
 * Orders Date Range — pill + calendar button (макет)
 */

.orders-date-range {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    min-width: 0;
}

.orders-date-range__pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    padding: 0 6px;
    background-color: var(--background-color-light);
    border-radius: var(--border-radius-s);
    box-sizing: border-box;
}

.orders-date-range__nav {
    border: none;
    background: transparent;
    padding: 6px 8px;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-xs);
    flex-shrink: 0;
}

.orders-date-range__nav--prev img {
    transform: rotate(180deg);
}

.orders-date-range__nav:hover {
    background-color: var(--background-color-minor);
}

.orders-date-range__text {
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-medium);
    color: var(--typo-color-black);
    white-space: nowrap;
    padding: 0 4px;
    line-height: 1.2;
    user-select: none;
}

.orders-date-range__calendar {
    width: 40px;
    height: 40px;
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: var(--background-color-light);
    border-radius: var(--border-radius-s);
}

.orders-date-range__calendar:hover {
    background-color: var(--background-color-minor);
}

.orders-date-range__calendar img {
    display: block;
}

@media (max-width: 768px) {
    .orders-date-range {
        display: flex;
        width: 100%;
        gap: 10px;
        flex: 0 0 auto;
    }

    .orders-date-range__pill {
        flex: 1 1 auto;
        min-width: 0;
        height: 44px;
        justify-content: space-between;
        border-radius: 12px;
    }

    .orders-date-range__text {
        flex: 1 1 auto;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .orders-date-range__calendar {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }
}

.order-detail-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    width: 100%;
    max-width: 1200px;
}

.order-detail-controls {
    flex-shrink: 0;
}

.order-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.order-detail__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 610px;
    gap: 28px;
    align-items: start;
    min-width: 0;
}

.order-detail__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    max-width: 100%;
}

.order-detail__status {
    height: 40px;
    box-sizing: border-box;
    cursor: default;
    flex-shrink: 0;
}

.order-detail__main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.order-detail__main-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.order-detail__aside {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.order-detail__header {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    width: 100%;
}

.order-detail__header-main {
    min-width: 0;
}

.order-detail__title {
    margin: 0;
    font-size: var(--typo-size-m);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
    line-height: 1.3;
}

.order-detail__created {
    margin: 4px 0 0;
    font-size: var(--typo-size-xs);
    color: var(--typo-color-minor);
}

.order-detail__items {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.order-detail-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    column-gap: 14px;
    align-items: center;
}

.order-detail-item__thumb {
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius-s);
    background: var(--background-color-light);
}

.order-detail-item__name {
    font-size: var(--typo-size-s);
    color: var(--typo-color-black);
    line-height: 1.35;
}

.order-detail-item__prices {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
}

.order-detail-item__price {
    color: var(--color-red);
    font-weight: var(--typo-weight-medium);
    font-size: var(--typo-size-s);
}

.order-detail-item__old-price {
    color: var(--typo-color-minor);
    font-size: var(--typo-size-xs);
    text-decoration: line-through;
}

.order-detail-item__qty {
    min-width: 40px;
    height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-s);
    background: var(--background-color-light);
    font-size: var(--typo-size-s);
    color: var(--typo-color-black);
}

.order-detail__section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-detail__section-title {
    margin: 0;
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
}

.order-detail__geozone {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 8px 0;
    padding: 4px 0;
}

.order-detail__geozone-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: block;
    background-color: var(--brand-color);
    -webkit-mask: var(--geozone-icon) center / contain no-repeat;
    mask: var(--geozone-icon) center / contain no-repeat;
}

.order-detail__geozone-text {
    min-width: 0;
}

.order-detail__geozone-name {
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
    line-height: 1.3;
}

.order-detail__geozone-hint {
    margin-top: 2px;
    font-size: var(--typo-size-xs);
    color: var(--typo-color-minor);
    line-height: 1.3;
}

.order-detail__address-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.order-detail__address-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--border-radius-s);
    background: var(--background-color-light);
}

.order-detail__address-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    margin-top: 0;
}

.order-detail__address-line {
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-medium);
    color: var(--typo-color-black);
    line-height: 1.35;
}

.order-detail__address-meta {
    margin-top: 1px;
    font-size: var(--typo-size-xs);
    color: var(--typo-color-minor);
    line-height: 1.3;
}

.order-detail__financials {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.order-detail__financials--breakdown {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.order-detail__finance-card {
    padding: 14px 16px;
    border-radius: var(--border-radius-s);
    background: var(--background-color-light);
}

.order-detail__finance-value {
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
    line-height: 1.3;
}

.order-detail__finance-value--danger {
    color: var(--color-red);
}

.order-detail__finance-label {
    margin-top: 2px;
    font-size: var(--typo-size-xs);
    font-weight: var(--typo-weight-regular);
    color: var(--typo-color-minor);
    line-height: 1.3;
}

.order-detail-panel {
    padding: 16px;
    border-radius: var(--border-radius-m);
    background: var(--background-color-light);
}

.order-detail-panel__title {
    margin: 0 0 12px;
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-bold);
    color: var(--brand-color);
}

.order-detail-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.order-detail-panel__head .order-detail-panel__title {
    margin-bottom: 0;
}

.order-detail-panel__titles {
    min-width: 0;
}

.order-detail-panel__title--desktop-only {
    color: var(--typo-color-black);
}

.order-detail-courier-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
}

.order-detail-courier-badge__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: block;
    background-color: var(--brand-color);
    -webkit-mask: var(--courier-badge-icon) center / contain no-repeat;
    mask: var(--courier-badge-icon) center / contain no-repeat;
}

.order-detail-courier-badge--external .order-detail-courier-badge__icon {
    background-color: #175cd3;
}

.order-detail-courier-badge--own .order-detail-courier-badge__icon {
    background-color: var(--brand-color);
}

.order-detail-courier-badge__label {
    font-size: var(--typo-size-xs);
    font-weight: var(--typo-weight-medium);
    color: var(--typo-color-black);
    line-height: 1.3;
}

.order-detail-panel__title--mobile {
    display: none;
}

.order-detail-panel__guest {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.order-detail-panel__guest-phone {
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
}

.order-detail-panel__guest-name {
    margin-top: 2px;
    font-size: var(--typo-size-xs);
    color: var(--typo-color-minor);
}

.order-detail-panel__call {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--border-radius-s);
    background: var(--background-color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
    color: inherit;
}

.order-detail-panel__call[href="#"] {
    cursor: default;
    pointer-events: none;
}

.order-detail-panel__empty {
    font-size: var(--typo-size-s);
    color: var(--typo-color-black);
    margin-bottom: 8px;
}

.order-detail-panel__link {
    border: none;
    background: transparent;
    padding: 0;
    color: var(--brand-color);
    font-size: var(--typo-size-xs);
    text-align: left;
    cursor: default;
}

.order-detail-claims {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    overflow-x: auto;
}

.order-detail-claims__head,
.order-detail-claims__row {
    display: grid;
    grid-template-columns: 24px minmax(148px, 1.5fr) minmax(100px, 1fr) minmax(88px, 1fr) 68px 28px;
    column-gap: 10px;
    align-items: center;
    box-sizing: border-box;
    width: max(100%, 540px);
    min-width: 540px;
}

.order-detail-claims__head {
    padding: 10px 8px 10px 0;
    border-radius: var(--border-radius-s);
    background: var(--background-color-minor);
    font-size: var(--typo-size-xs);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-minor);
}

.order-detail-claims__row {
    padding: 12px 8px 12px 0;
    border: none;
    font-size: var(--typo-size-s);
    color: var(--typo-color-black);
}

.order-detail-claims__num {
    font-size: var(--typo-size-m);
    font-weight: var(--typo-weight-bold);
    color: var(--brand-accent-color);
    line-height: 1;
    text-align: center;
}

.order-detail-claims__point {
    display: inline-flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    font-weight: var(--typo-weight-bold);
}

.order-detail-claims__price {
    font-weight: var(--typo-weight-bold);
}

.order-detail-claims__status {
    font-weight: var(--typo-weight-regular);
    overflow-wrap: anywhere;
}

.order-detail-claims__check {
    width: 15px;
    height: 15px;
    margin-left: 6px;
    flex-shrink: 0;
}

.order-detail-claims__trash {
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    cursor: default;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.order-detail-claims__trash-icon {
    width: 20px;
    height: 20px;
    display: block;
    background-color: var(--color-red);
    -webkit-mask: var(--trash-icon) center / contain no-repeat;
    mask: var(--trash-icon) center / contain no-repeat;
}

.order-detail-analytics,
.order-detail-timing {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 14px 12px;
}

.order-detail-analytics__value,
.order-detail-timing__value {
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
}

.order-detail-analytics__label,
.order-detail-timing__label {
    margin-top: 2px;
    font-size: var(--typo-size-xxs);
    color: var(--typo-color-minor);
}

.order-detail-analytics__cell--loading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-detail-analytics__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--typo-color-minor);
    border-top-color: var(--brand-color);
    border-radius: 50%;
    animation: order-detail-spin 0.7s linear infinite;
}

@keyframes order-detail-spin {
    to {
        transform: rotate(360deg);
    }
}

.order-detail-timing__value--ok {
    color: var(--brand-color);
}

.order-detail-timing__value--danger {
    color: var(--color-red);
}

@media (max-width: 1280px) {
    .order-detail__columns {
        grid-template-columns: minmax(0, 1fr) minmax(420px, 610px);
        gap: 20px;
    }

    .order-detail__financials {
        grid-template-columns: 1fr 1fr;
    }

    .order-detail__financials--breakdown {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .order-detail-shell {
        gap: 12px;
    }

    .order-detail-controls {
        margin-bottom: 12px;
    }

    .page-content:has(.order-detail-shell) {
        padding-top: 12px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .order-detail {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .order-detail__columns {
        display: contents;
    }

    .order-detail__main {
        display: contents;
    }

    .order-detail__aside {
        display: contents;
    }

    .order-detail__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        order: 1;
        justify-content: stretch;
    }

    .order-detail__actions [data-action='cancel'] { order: 1; }
    .order-detail__actions [data-action='courier'] { order: 2; }
    .order-detail__actions [data-action='status'] { order: 3; }
    .order-detail__actions [data-action='pos'] { order: 4; }

    .order-detail__actions .order-detail__status {
        width: 100%;
        justify-content: space-between;
    }

    .order-detail__actions .action-button {
        width: 100%;
    }

    .order-detail__header {
        order: 4;
        margin-top: 8px;
        margin-bottom: 4px;
        padding: 8px 0 12px;
    }

    .order-detail-panel[data-role='guest'] {
        order: 2;
    }

    .order-detail-panel[data-role='analytics'] {
        order: 3;
    }

    .order-detail__main-body {
        order: 5;
        gap: 18px;
    }

    .order-detail-panel[data-role='claims'] {
        order: 6;
    }

    .order-detail-panel--timing {
        display: none;
    }

    .order-detail-panel__title--desktop-only {
        display: none;
    }

    .order-detail-panel__title--mobile {
        display: block;
    }

    .order-detail__address-grid {
        grid-template-columns: 1fr;
    }

    .order-detail-analytics,
    .order-detail-timing {
        grid-template-columns: 1fr 1fr;
    }

    .order-detail__financials {
        grid-template-columns: 1fr 1fr;
    }

    .order-detail__title {
        font-size: var(--typo-size-m);
        line-height: 1.35;
    }

    .order-detail__created {
        margin-top: 6px;
        font-size: var(--typo-size-ms);
    }
}

@keyframes integration-settings-autofill-start {
    from {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}

.integration-settings .input-field__input:-webkit-autofill {
    animation-name: integration-settings-autofill-start;
    animation-duration: 0.01s;
}

.integration-settings.settings-page-container {
    display: block;
    width: 100%;
}

.integration-settings > .settings-section:first-of-type {
    margin-top: 30px;
}

.integration-settings__wizard-step--hidden {
    display: none;
}

.integration-settings__access-card {
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 193, 7, 0.12);
    color: var(--color-text-primary, #1a1a1a);
    font-size: 14px;
}

.integration-settings__notice {
    margin: 0;
    color: var(--color-text-secondary, #666);
    font-size: 14px;
}

.integration-settings__intro .settings-subtitle {
    margin-bottom: 20px;
}

.integration-settings__status-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.integration-settings__badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    font-size: 12px;
}

.integration-settings__badge--ok {
    background: rgba(46, 125, 50, 0.12);
    color: #2e7d32;
}

.integration-settings__badge--error {
    background: rgba(198, 40, 40, 0.12);
    color: #c62828;
}

.integration-settings__status-text {
    margin: 0;
    font-size: var(--typo-size-xs);
    color: var(--typo-color-gray);
}

.integration-settings__webhook-url {
    margin: 0;
    font-size: var(--typo-size-xs);
    color: var(--typo-color-gray);
    word-break: break-all;
}

.integration-settings__footer .settings-subtitle {
    margin-bottom: 0;
}

.integration-settings__active-toggle {
    display: flex;
    align-items: center;
    min-height: 42px;
    margin: 0;
}

.integration-settings__active-toggle .checkbox {
    min-height: 42px;
}

.integration-settings__toggle-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0 0;
}

.integration-settings__toggle-hint {
    margin: 0;
    font-size: var(--typo-size-s, 13px);
    line-height: 1.4;
    color: var(--typo-color-gray, #667085);
}

.integration-settings__footer-actions {
    margin-top: 20px;
}

.integration-settings__feedback {
    margin: 20px 0 0;
    padding: 12px 16px;
    border-radius: var(--border-radius-s);
    font-size: var(--typo-size-ms);
    font-family: var(--font-family);
    font-weight: var(--typo-weight-regular);
    line-height: 1.4;
    color: var(--typo-color-black);
    background: var(--background-color-light);
    border: 1px solid var(--border-color-gray);
    overflow-wrap: anywhere;
}

.integration-settings__feedback:empty {
    display: none;
    margin: 0;
    padding: 0;
    border: none;
}

.integration-settings__feedback--error {
    color: #b42318;
    background: #fff0f0;
    border-color: #ffcaca;
}

.integration-settings__feedback--success {
    color: #2e7d32;
    background: rgba(46, 125, 50, 0.12);
    border-color: rgba(46, 125, 50, 0.28);
}

.integration-settings__env-switch {
    display: inline-flex;
    gap: 8px;
    margin: 16px 0 0;
}

.integration-settings__env-button {
    min-width: 88px;
    padding: 8px 16px;
    border-radius: var(--border-radius-s);
    border: 1px solid var(--border-color-gray);
    background: var(--background-color-white);
    color: var(--typo-color-black);
    font: inherit;
    cursor: pointer;
}

.integration-settings__env-button--active {
    border-color: var(--border-color-brand);
    background: var(--background-color-light);
}

.integration-settings__textarea-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.integration-settings__textarea-label {
    font-size: var(--typo-size-ms);
    color: var(--typo-color-black);
}

.integration-settings__textarea {
    width: 100%;
    min-height: 96px;
    padding: 12px 14px;
    border: 1px solid var(--border-color-gray);
    border-radius: var(--border-radius-s);
    font: inherit;
    resize: vertical;
}

.integration-settings__notice--warn {
    color: var(--typo-color-black);
}

.pos-terminal__add {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.pos-terminal__add .input-field {
    flex: 1 1 240px;
    min-width: 200px;
}

.pos-terminal__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.pos-terminal-device {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border-color-gray, #e5e5e5);
    border-radius: 12px;
    background: var(--background-color-white, #fff);
}

.pos-terminal-device__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pos-terminal-device__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.pos-terminal-device__meta {
    margin: 0;
    font-size: var(--typo-size-xs, 12px);
    color: var(--typo-color-gray, #667085);
}

.pos-terminal-device__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pos-terminal-modal {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-terminal-modal[hidden] {
    display: none;
}

.pos-terminal-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.pos-terminal-modal__dialog {
    position: relative;
    width: calc(100% - 32px);
    max-width: 420px;
    padding: 24px;
    border-radius: 12px;
    background: var(--background-color-white, #fff);
}

.pos-terminal-modal__title {
    margin: 0 0 8px;
    font-size: 18px;
}

.pos-terminal-modal__hint {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--typo-color-gray, #667085);
}

.pos-terminal-modal__code {
    margin: 0;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.pos-terminal-modal__ttl {
    margin: 8px 0 20px;
    text-align: center;
    font-size: 13px;
    color: var(--typo-color-gray, #667085);
}

.pos-terminal-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.site-seo-settings__site-url {
    margin: 0 0 8px;
    font-size: var(--typo-size-ms);
    color: var(--typo-color-gray);
    word-break: break-all;
}

.site-seo-settings__fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.site-seo-field__meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    font-size: var(--typo-size-xxs);
    color: var(--typo-color-gray);
}

.site-seo-field__counter {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.site-seo-field__error {
    margin: 4px 0 0;
    font-size: var(--typo-size-xxs);
    color: var(--color-red);
}

.site-seo-field__error[hidden] {
    display: none;
}

/**
 * Тепловая карта доставок: оверлей фильтров и кластеры Яндекс.Карт.
 */

.analytics-heatmap {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 240px;
    min-width: 0;
    overflow: hidden;
    background-color: #d9d9d9;
    overscroll-behavior: none;
}

.analytics-heatmap__canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    touch-action: none;
}

.analytics-heatmap__toolbar {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(560px, calc(100% - 24px));
    padding: 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    pointer-events: auto;
    box-sizing: border-box;
}

.analytics-heatmap__toolbar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.analytics-heatmap__toolbar-row .select-field {
    width: 220px;
    max-width: 100%;
}

.analytics-heatmap__custom {
    min-width: 0;
}

.analytics-heatmap__custom[hidden] {
    display: none !important;
}

.analytics-heatmap__custom .date-field--inline {
    width: 100%;
}

.analytics-heatmap__custom .date-field--inline .date-field__part {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
}

.analytics-heatmap__status {
    margin: 0;
    font-size: var(--typo-size-s);
    color: var(--typo-color-minor, #6b6b6b);
    line-height: 1.3;
}

.analytics-heatmap__error {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(255, 255, 255, 0.92);
    color: #b42318;
    text-align: center;
    font-size: var(--typo-size-ms);
}

.analytics-heatmap__error[hidden] {
    display: none !important;
}

.analytics-heatmap__pin {
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--brand-color, #507b68);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

.analytics-heatmap__cluster {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 2px solid #fff;
    border-radius: 18px;
    background: var(--brand-color, #507b68);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 32px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
    cursor: pointer;
}

.analytics-heatmap__cluster--lg {
    min-width: 44px;
    height: 44px;
    border-radius: 22px;
    line-height: 40px;
    font-size: 14px;
}

@media (max-width: 768px) {
    .analytics-heatmap {
        min-height: 220px;
    }

    .analytics-heatmap__toolbar {
        top: 8px;
        left: max(8px, env(safe-area-inset-left, 0px));
        right: max(8px, env(safe-area-inset-right, 0px));
        max-width: none;
        padding: 10px;
        gap: 8px;
    }

    .analytics-heatmap__toolbar-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .analytics-heatmap__toolbar-row .select-field {
        width: 100%;
    }

    .analytics-heatmap__cluster,
    .analytics-heatmap__cluster--lg {
        min-width: 44px;
        height: 44px;
        border-radius: 22px;
        line-height: 40px;
    }
}

/**
 * Layout раздела «Аналитика»: панель навигации + тело страницы.
 */

html:has(.analytics-workspace) {
    scrollbar-gutter: auto;
}

.page-content:has(.analytics-workspace) {
    padding: 0;
    overflow: hidden;
}

.analytics-workspace {
    --analytics-panel-width: 515px;
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 105px);
}

.analytics-workspace__panel {
    flex-shrink: 0;
    width: var(--analytics-panel-width);
    max-width: var(--analytics-panel-width);
    min-height: calc(100vh - 105px);
    max-height: calc(100vh - 105px);
    overflow-y: auto;
    padding: 16px 35px 40px;
    border-right: 1px solid var(--border-color-gray, #e8e8e8);
    background-color: var(--background-color-white, #fff);
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color-gray) transparent;
}

.analytics-workspace--nav-hidden .analytics-workspace__panel {
    display: none;
}

.analytics-workspace__nav {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.analytics-workspace__group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.analytics-workspace .analytics-workspace__group-title {
    margin: 0;
    font-size: var(--typo-size-s);
}

.analytics-workspace__item {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    font-family: var(--font-family);
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-regular);
    color: var(--typo-color-black);
    line-height: 1.3;
    cursor: pointer;
}

.analytics-workspace__item:hover {
    color: var(--brand-color);
}

.analytics-workspace__item--active {
    color: var(--brand-color);
    cursor: default;
}

.analytics-workspace__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 105px);
    max-height: calc(100vh - 105px);
    padding: 16px 35px 40px;
    box-sizing: border-box;
    overflow-y: auto;
}

.analytics-workspace__body--flush {
    padding: 0;
    overflow: hidden;
}

.analytics-workspace__map {
    flex: 1;
    min-height: 240px;
    min-width: 0;
    position: relative;
    overflow: hidden;
    background-color: #d9d9d9;
}

@media (max-width: 768px) {
    .page--mobile-app .page-content:has(.analytics-workspace) {
        display: flex;
        flex-direction: column;
        padding: 0;
        overflow: hidden;
    }

    .page--mobile-app .page-content:has(.analytics-workspace) .content__body {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .analytics-workspace {
        flex: 1;
        min-height: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        flex-direction: column;
    }

    .analytics-workspace:not(.analytics-workspace--nav-hidden) .analytics-workspace__panel {
        width: 100%;
        max-width: none;
        min-height: 0;
        max-height: none;
        flex: 1;
        border-right: none;
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
        padding-bottom: calc(var(--crm-footer-height) + env(safe-area-inset-bottom, 0px) + 16px);
    }

    .analytics-workspace:not(.analytics-workspace--nav-hidden) .analytics-workspace__body {
        display: none;
    }

    .analytics-workspace--nav-hidden .analytics-workspace__body {
        min-height: 0;
        max-height: none;
        flex: 1;
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
        padding-bottom: calc(var(--crm-footer-height) + env(safe-area-inset-bottom, 0px) + 16px);
    }

    .analytics-workspace--nav-hidden .analytics-workspace__body--flush {
        padding: 0;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    .analytics-workspace__map {
        min-height: 220px;
    }

    .analytics-workspace__item--active {
        cursor: pointer;
    }
}

/**
 * Ключевые показатели: фильтры, карусель карточек, SVG-график.
 */

html:has(.analytics-key-metrics) .page-header {
    border-bottom: 1px solid var(--border-color-gray);
}

.analytics-key-metrics {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 0;
    flex: 1;
}

.analytics-key-metrics__toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.analytics-key-metrics__toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.analytics-key-metrics__toolbar-row .select-field {
    width: 260px;
    max-width: 100%;
}

.analytics-key-metrics__period-cluster {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.analytics-key-metrics__period-cluster > .select-field {
    flex: none;
}

.analytics-key-metrics__period-cluster:has(.analytics-key-metrics__custom:not([hidden])) > .select-field {
    width: 196px;
}

.analytics-key-metrics__custom {
    display: flex;
    align-items: center;
    min-width: 0;
}

.analytics-key-metrics__custom[hidden] {
    display: none !important;
}

.analytics-key-metrics__status {
    margin: 0;
    font-size: var(--typo-size-s);
    color: var(--typo-color-minor);
    line-height: 1.3;
}

.analytics-key-metrics__carousel-wrap {
    position: relative;
    min-width: 0;
}

.analytics-key-metrics__carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px;
}

.analytics-key-metrics__carousel::-webkit-scrollbar {
    display: none;
}

.analytics-key-metrics__card {
    flex: 0 0 min(280px, 82%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 128px;
    padding: 16px 18px;
    border: 1px solid var(--border-color-gray);
    border-radius: var(--border-radius-l);
    background: var(--background-color-white);
    box-shadow: none;
    text-align: left;
    cursor: pointer;
    scroll-snap-align: start;
    font: inherit;
    color: inherit;
}

.analytics-key-metrics__card:hover {
    border-color: var(--brand-color);
}

.analytics-key-metrics__card.is-selected {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 1px var(--brand-color);
}

.analytics-key-metrics__card-label {
    margin: 0;
    font-size: var(--typo-size-xs);
    font-weight: var(--typo-weight-regular);
    color: var(--typo-color-gray);
    line-height: 1.3;
}

.analytics-key-metrics__card-value {
    margin: 0;
    font-size: var(--typo-size-m);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
    line-height: 1.2;
}

.analytics-key-metrics__card-trend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    font-size: var(--typo-size-xs);
    line-height: 1.2;
    color: var(--typo-color-minor);
}

.analytics-key-metrics__card-trend.is-up {
    color: #1a9d63;
}

.analytics-key-metrics__card-trend.is-down {
    color: #ff4d4d;
}

.analytics-key-metrics__card-trend img {
    display: block;
    width: 18px;
    height: 18px;
}

.analytics-key-metrics__carousel-btn {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color-gray);
    border-radius: 50%;
    background: var(--background-color-white);
    box-shadow: 0 2px 8px rgba(33, 32, 31, 0.08);
    transform: translateY(-50%);
    cursor: pointer;
}

.analytics-key-metrics__carousel-prev {
    left: 8px;
}

.analytics-key-metrics__carousel-next {
    right: 8px;
}

.analytics-key-metrics__carousel-btn[hidden] {
    display: none !important;
}

.analytics-key-metrics__carousel-btn img {
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 auto;
}

.analytics-key-metrics__carousel-prev img {
    transform: rotate(180deg);
}

.analytics-key-metrics__chart-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    flex: 0 0 auto;
}

.analytics-key-metrics__chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.analytics-key-metrics__chart-title {
    margin: 0;
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
}

.analytics-key-metrics__chart-head .select-field {
    width: 240px;
    max-width: 100%;
}

.analytics-key-metrics__chart {
    position: relative;
    display: block;
    width: 100%;
    height: 280px;
    min-height: 280px;
    flex: none;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    color: var(--brand-color);
}

.analytics-key-metrics__chart svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.analytics-key-metrics__chart svg * {
    pointer-events: none;
}

.analytics-key-metrics__grid-line {
    stroke: var(--border-color-gray);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.analytics-key-metrics__axis-label {
    fill: var(--typo-color-minor);
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: var(--typo-weight-regular);
}

.analytics-key-metrics__line {
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.analytics-key-metrics__line--compare {
    stroke-dasharray: 6 5;
    stroke-width: 2;
}

.analytics-key-metrics__chart svg .analytics-key-metrics__point-hit {
    fill: transparent;
    stroke: none;
    cursor: pointer;
    pointer-events: auto;
}

.analytics-key-metrics__point {
    fill: currentColor;
    stroke: var(--background-color-white);
    stroke-width: 2;
    pointer-events: none;
}

.analytics-key-metrics__point--compare {
    fill: var(--background-color-white);
    stroke: currentColor;
}

.analytics-key-metrics__toast {
    position: absolute;
    z-index: 2;
    min-width: 132px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #1c2430;
    box-shadow: 0 10px 28px rgba(28, 36, 48, 0.28);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.analytics-key-metrics__toast[hidden] {
    display: none !important;
}

.analytics-key-metrics__toast-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.analytics-key-metrics__toast-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--brand-color);
}

.analytics-key-metrics__toast-dot--compare {
    background: transparent;
    box-sizing: border-box;
    border: 1.5px dashed var(--brand-color);
}

.analytics-key-metrics__toast-value {
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-white);
    line-height: 1.2;
}

.analytics-key-metrics__toast-date {
    margin-top: 2px;
    font-size: var(--typo-size-xxs);
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.2;
}

.analytics-key-metrics__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--typo-size-xs);
    color: var(--typo-color-gray);
}

.analytics-key-metrics__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.analytics-key-metrics__swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-color);
    box-sizing: border-box;
}

.analytics-key-metrics__swatch--compare {
    background: transparent;
    border: 1.5px dashed var(--brand-color);
    box-shadow: none;
}

@media (max-width: 768px) {
    .analytics-key-metrics {
        gap: 18px;
        padding-bottom: 8px;
    }

    .analytics-key-metrics__toolbar-row .select-field,
    .analytics-key-metrics__chart-head .select-field {
        width: 100%;
    }

    .analytics-key-metrics__card {
        flex-basis: min(260px, 78%);
        min-height: 120px;
    }

    .analytics-key-metrics__chart {
        height: 200px;
        min-height: 200px;
    }
}

/**
 * Установки PWA: фильтры периода, карусель карточек, SVG-график.
 */

html:has(.analytics-pwa-usage) .page-header {
    border-bottom: 1px solid var(--border-color-gray);
}

.analytics-pwa-usage {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 0;
    flex: 1;
}

.analytics-pwa-usage__toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.analytics-pwa-usage__toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.analytics-pwa-usage__toolbar-row .select-field {
    width: 260px;
    max-width: 100%;
}

.analytics-pwa-usage__period-cluster {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.analytics-pwa-usage__period-cluster > .select-field {
    flex: none;
}

.analytics-pwa-usage__period-cluster:has(.analytics-pwa-usage__custom:not([hidden])) > .select-field {
    width: 196px;
}

.analytics-pwa-usage__custom {
    display: flex;
    align-items: center;
    min-width: 0;
}

.analytics-pwa-usage__custom[hidden] {
    display: none !important;
}

.analytics-pwa-usage__status {
    margin: 0;
    font-size: var(--typo-size-s);
    color: var(--typo-color-minor);
    line-height: 1.3;
}

.analytics-pwa-usage__carousel-wrap {
    position: relative;
    min-width: 0;
}

.analytics-pwa-usage__carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px;
}

.analytics-pwa-usage__carousel::-webkit-scrollbar {
    display: none;
}

.analytics-pwa-usage__card {
    flex: 0 0 min(280px, 82%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 128px;
    padding: 16px 18px;
    border: 1px solid var(--border-color-gray);
    border-radius: var(--border-radius-l);
    background: var(--background-color-white);
    box-sizing: border-box;
    box-shadow: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    scroll-snap-align: start;
}

.analytics-pwa-usage__card:hover {
    border-color: var(--brand-color);
}

.analytics-pwa-usage__card.is-selected {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 1px var(--brand-color);
}

.analytics-pwa-usage__card-label {
    margin: 0;
    font-size: var(--typo-size-xs);
    font-weight: var(--typo-weight-regular);
    color: var(--typo-color-gray);
    line-height: 1.3;
}

.analytics-pwa-usage__card-value {
    margin: 0;
    font-size: var(--typo-size-m);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
    line-height: 1.2;
}

.analytics-pwa-usage__card-trend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    font-size: var(--typo-size-xs);
    line-height: 1.2;
    color: var(--typo-color-minor);
}

.analytics-pwa-usage__card-trend.is-up {
    color: #1a9d63;
}

.analytics-pwa-usage__card-trend.is-down {
    color: #ff4d4d;
}

.analytics-pwa-usage__card-trend img {
    display: block;
    width: 18px;
    height: 18px;
}

.analytics-pwa-usage__carousel-btn {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color-gray);
    border-radius: 50%;
    background: var(--background-color-white);
    box-shadow: 0 2px 8px rgba(33, 32, 31, 0.08);
    transform: translateY(-50%);
    cursor: pointer;
}

.analytics-pwa-usage__carousel-prev {
    left: 8px;
}

.analytics-pwa-usage__carousel-next {
    right: 8px;
}

.analytics-pwa-usage__carousel-btn[hidden] {
    display: none !important;
}

.analytics-pwa-usage__carousel-btn img {
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 auto;
}

.analytics-pwa-usage__carousel-prev img {
    transform: rotate(180deg);
}

.analytics-pwa-usage__chart-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    flex: 0 0 auto;
}

.analytics-pwa-usage__chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.analytics-pwa-usage__chart-title {
    margin: 0;
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
}

.analytics-pwa-usage__chart-head .select-field {
    width: 240px;
    max-width: 100%;
}

.analytics-pwa-usage__chart {
    position: relative;
    display: block;
    width: 100%;
    height: 280px;
    min-height: 280px;
    flex: none;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    color: var(--brand-color);
}

.analytics-pwa-usage__chart svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.analytics-pwa-usage__chart svg * {
    pointer-events: none;
}

.analytics-pwa-usage__grid-line {
    stroke: var(--border-color-gray);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.analytics-pwa-usage__axis-label {
    fill: var(--typo-color-minor);
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: var(--typo-weight-regular);
}

.analytics-pwa-usage__line {
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.analytics-pwa-usage__line--compare {
    stroke-dasharray: 6 5;
    stroke-width: 2;
}

.analytics-pwa-usage__chart svg .analytics-pwa-usage__point-hit {
    fill: transparent;
    stroke: none;
    cursor: pointer;
    pointer-events: auto;
}

.analytics-pwa-usage__point {
    fill: currentColor;
    stroke: var(--background-color-white);
    stroke-width: 2;
    pointer-events: none;
}

.analytics-pwa-usage__point--compare {
    fill: var(--background-color-white);
    stroke: currentColor;
}

.analytics-pwa-usage__toast {
    position: absolute;
    z-index: 2;
    min-width: 132px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #1c2430;
    box-shadow: 0 10px 28px rgba(28, 36, 48, 0.28);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.analytics-pwa-usage__toast[hidden] {
    display: none !important;
}

.analytics-pwa-usage__toast-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.analytics-pwa-usage__toast-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--brand-color);
}

.analytics-pwa-usage__toast-dot--compare {
    background: transparent;
    box-sizing: border-box;
    border: 1.5px dashed var(--brand-color);
}

.analytics-pwa-usage__toast-value {
    font-size: var(--typo-size-s);
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-white);
    line-height: 1.2;
}

.analytics-pwa-usage__toast-date {
    margin-top: 2px;
    font-size: var(--typo-size-xxs);
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.2;
}

.analytics-pwa-usage__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--typo-size-xs);
    color: var(--typo-color-gray);
}

.analytics-pwa-usage__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.analytics-pwa-usage__swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-color);
    box-sizing: border-box;
}

.analytics-pwa-usage__swatch--compare {
    background: transparent;
    border: 1.5px dashed var(--brand-color);
    box-shadow: none;
}

@media (max-width: 768px) {
    .analytics-pwa-usage {
        gap: 18px;
        padding-bottom: 8px;
    }

    .analytics-pwa-usage__toolbar-row .select-field,
    .analytics-pwa-usage__chart-head .select-field {
        width: 100%;
    }

    .analytics-pwa-usage__period-cluster {
        flex-wrap: wrap;
        width: 100%;
    }

    .analytics-pwa-usage__period-cluster > .select-field,
    .analytics-pwa-usage__period-cluster:has(.analytics-pwa-usage__custom:not([hidden])) > .select-field {
        width: 100%;
    }

    .analytics-pwa-usage__card {
        flex-basis: min(260px, 78%);
        min-height: 120px;
    }

    .analytics-pwa-usage__chart {
        height: 200px;
        min-height: 200px;
    }
}

.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding:
        max(24px, env(safe-area-inset-top, 0px))
        max(16px, env(safe-area-inset-right, 0px))
        max(24px, env(safe-area-inset-bottom, 0px))
        max(16px, env(safe-area-inset-left, 0px));
    overflow-x: hidden;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    min-width: 0;
    padding: 32px 28px 28px;
    background: var(--background-color-white);
    border-radius: var(--border-radius-l);
    box-shadow: 0 8px 32px rgba(33, 32, 31, 0.08);
}

.auth-card__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    min-width: 0;
}

.auth-card__brand-text {
    min-width: 0;
    flex: 1;
}

.auth-card__logo {
    flex-shrink: 0;
    width: 55px;
    height: 50px;
    object-fit: contain;
}

.auth-card__title {
    margin: 0;
    font-family: var(--font-family);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.auth-card__subtitle {
    margin: 0;
    font-size: var(--typo-size-xs);
    color: var(--typo-color-minor);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.auth-card__heading {
    margin: 0 0 8px;
    font-size: var(--typo-size-m);
    font-weight: var(--typo-weight-bold);
    line-height: 1.3;
}

.auth-card__hint {
    margin: 0 0 20px;
    font-size: var(--typo-size-xs);
    color: var(--typo-color-gray);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.auth-card__hint strong {
    font-weight: var(--typo-weight-bold);
    color: var(--typo-color-black);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-form__error {
    margin: 0;
    padding: 10px 12px;
    font-size: var(--typo-size-xs);
    color: #8b1e1e;
    background: #fdecec;
    border-radius: var(--border-radius-s);
    border: 1px solid rgba(192, 57, 43, 0.2);
    overflow-wrap: anywhere;
}

.auth-form__timer {
    margin: -4px 0 0;
    font-size: var(--typo-size-xxs);
    color: var(--typo-color-minor);
    text-align: center;
}

.auth-form__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.auth-card__secure-note {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border-color-gray);
    font-size: 11px;
    line-height: 1.4;
    color: var(--typo-color-minor);
    text-align: center;
    overflow-wrap: anywhere;
}

/* Touch-friendly controls на странице входа */
.auth-page .input-field__input {
    min-height: 44px;
    height: 44px;
}

.auth-page .input-field__input--otp {
    font-size: 20px;
    letter-spacing: 0.28em;
}

.auth-page .input-field__container--with-toggle .input-field__input {
    padding-right: 80px;
}

.auth-page .input-field__toggle {
    right: 4px;
    min-width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 0 10px;
}

.auth-page .action-button:not(.action-button--ghost) {
    width: 100%;
    min-height: 44px;
    height: 44px;
}

.auth-page .action-button--ghost {
    min-height: 44px;
    padding: 10px 12px;
}

@media (max-width: 480px) {
    .auth-page {
        align-items: flex-start;
        padding-top: max(16px, env(safe-area-inset-top, 0px));
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    }

    .auth-card {
        padding: 24px 20px 20px;
        border-radius: var(--border-radius-m);
        box-shadow: 0 4px 24px rgba(33, 32, 31, 0.07);
    }

    .auth-card__brand {
        margin-bottom: 20px;
        gap: 10px;
    }

    .auth-card__heading {
        font-size: var(--typo-size-s);
        margin-bottom: 6px;
    }

    .auth-card__hint {
        margin-bottom: 16px;
    }

    .auth-form {
        gap: 14px;
    }

    .auth-card__secure-note {
        margin-top: 16px;
        padding-top: 14px;
    }
}

@media (max-width: 360px) {
    .auth-page {
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
    }

    .auth-card {
        padding: 20px 16px 18px;
    }

    .auth-card__logo {
        width: 48px;
        height: 44px;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .auth-page {
        align-items: flex-start;
        padding-top: max(12px, env(safe-area-inset-top, 0px));
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }

    .auth-card {
        padding: 16px 20px 14px;
    }

    .auth-card__brand {
        margin-bottom: 12px;
    }

    .auth-card__hint {
        margin-bottom: 12px;
    }

    .auth-card__secure-note {
        margin-top: 12px;
        padding-top: 12px;
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-page .input-field__input,
    .auth-page .action-button {
        transition: none;
    }
}