/* =========================================================
   1) ОСНОВНЫЕ ПЕРЕМЕННЫЕ ЦВЕТОВ И СТИЛЯ
   Здесь меняешь общий стиль: цвета, фон, тень, радиус.
   ========================================================= */

:root {
    /* Основной тёмный цвет */
    --login-dark: #272727;
    /* Дополнительный "золотой" */
    --login-mid: #D4AA7D;
    /* Главный цвет текста/акцента (золото) */
    --login-gold: #EFD09E;
    /* Тёмный текст (если где-то понадобится) */
    --login-text-dark: #3A3A3A;
    /* Фон полей ввода (полупрозрачный) */
    --login-input-bg: rgba(39, 39, 39, 0.35);
    /* Подложки/карточки (если захочешь) */
    --card-bg: rgba(39, 39, 39, 0.55);
    /* Граница (общая) */
    --card-border: rgba(239, 208, 158, 0.22);
    /* Тень (общая) */
    --shadow: 0 10px 26px rgba(0,0,0,0.35);
    /* Закругление (общая) */
    --radius: 16px;
}

/* =========================================================
   2) СЕТКА И ОТСТУПЫ СТРАНИЦЫ "СОЗДАНИЕ ЗАПИСИ"
   ========================================================= */

.record-create-page .record-grid {
    margin-top: 0.5rem; /* отступ сверху у всей сетки */
    align-items: stretch;
}

.record-create-page .record-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* расстояние между блоками внутри колонки */
}

/* =========================================================
   3) ПОДПИСИ, ОШИБКИ И ПОДСКАЗКИ
   ========================================================= */

.record-create-page .login-label {
    display: block;
    margin-bottom: 0.35rem; /* отступ подписи от поля */
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--login-gold); /* ЦВЕТ ПОДПИСЕЙ — менять здесь */
    letter-spacing: 0.2px;
}

.record-create-page .login-error {
    margin-top: 0.35rem;
    color: #ffb4b4; /* ЦВЕТ ТЕКСТА ОШИБКИ — менять здесь */
    font-size: 0.9rem;
}

.record-create-page .admin-card-hint {
    color: rgba(239, 208, 158, 0.78); /* ЦВЕТ ПОДСКАЗОК — менять здесь */
    font-size: 0.92rem;
    margin: 0;
}

/* =========================================================
   4) ОБЫЧНЫЕ ПОЛЯ ВВОДА (телефон, имя, фамилия, сумма и т.д.)
   ========================================================= */


.record-create-page .login-input,
.record-create-page .record-input,
.record-create-page .total-price-input,
.record-create-page .phone-combo-input {
    width: 100%;
    height: 44px; /* ВЫСОТА ПОЛЯ — менять здесь */
    padding: 0 0.95rem; /* ВНУТРЕННИЕ ОТСТУПЫ — менять здесь */
    border-radius: 12px; /* ЗАКРУГЛЕНИЕ — менять здесь */
    border: 1px solid rgba(239, 208, 158, 0.22); /* ЦВЕТ/ТОЛЩИНА РАМКИ — менять здесь */
    background: var(--login-input-bg); /* ФОН ПОЛЯ — менять в переменных или тут */
    color: var(--login-gold); /* ЦВЕТ ТЕКСТА — менять здесь */
    outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 120ms ease, background-color 140ms ease; /* Плавность анимации */
}



.record-create-page .login-input,
.record-create-page .phone-combo-input {
    width: 100%;
    height: 44px; /* ВЫСОТА ПОЛЯ — менять здесь */
    padding: 0 0.95rem; /* ВНУТРЕННИЕ ОТСТУПЫ — менять здесь */
    border-radius: 12px; /* ЗАКРУГЛЕНИЕ — менять здесь */
    border: 5px solid rgba(239, 208, 158, 0.40); /* ЦВЕТ/ТОЛЩИНА РАМКИ — менять здесь */
    background: var(--login-input-bg); /* ФОН ПОЛЯ — менять в переменных или тут */
    color: var(--login-gold); /* ЦВЕТ ТЕКСТА — менять здесь */
    outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 120ms ease, background-color 140ms ease; /* Плавность анимации */
}

/* Услуги: сделать рамку тонкой */
.record-create-page .service-combo-input {
    border: 1px solid rgba(239, 208, 158, 0.22) !important;
}



    /* Текст-подсказка внутри поля (когда пустое) */
    .record-create-page .login-input::placeholder,
    .record-create-page .record-input::placeholder,
    .record-create-page .service-combo-input::placeholder,
    .record-create-page .total-price-input::placeholder {
        color: rgba(239, 208, 158, 0.60); /* ЦВЕТ ПЛЕЙСХОЛДЕРА — менять здесь */
    }

    /* Состояние "в фокусе" (когда кликаешь в поле) */
    .record-create-page .login-input:focus,
    .record-create-page .record-input:focus,
    .record-create-page .total-price-input:focus,
    .record-create-page .service-combo-input:focus {
        border-color: rgba(239, 208, 158, 0.55); /* РАМКА ПРИ ФОКУСЕ — менять здесь */
        box-shadow: 0 0 0 3px rgba(239, 208, 158, 0.14); /* ПОДСВЕТКА ВОКРУГ — менять здесь */
        background: rgba(39, 39, 39, 0.55); /* ФОН ПРИ ФОКУСЕ — менять здесь */
    }

/* =========================================================
   5) ПОЛЯ ВЫБОРА ДАТЫ/ВРЕМЕНИ/ИСПОЛНИТЕЛЯ (компоненты MudBlazor)
   Здесь мы приводим их к тёмному стилю.
   ========================================================= */

.record-create-page .record-mud-field {
    width: 100%;
}

    .record-create-page .record-mud-field .mud-input-control {
        width: 100%;
    }

    /* Фон и цвет текста внутри Mud-полей */
    .record-create-page .record-mud-field .mud-input-slot,
    .record-create-page .record-mud-field .mud-input-root,
    .record-create-page .record-mud-field .mud-input-root-outlined {
        background: var(--login-input-bg) !important; /* ФОН Mud-поля */
        color: var(--login-gold) !important; /* ЦВЕТ ТЕКСТА Mud-поля */
        border-radius: 12px !important; /* ЗАКРУГЛЕНИЕ Mud-поля */
    }

        /* Рамка у Mud-поля (outline) */
        .record-create-page .record-mud-field .mud-input-root-outlined fieldset {
            border-color: rgba(239, 208, 158, 0.22) !important; /* РАМКА Mud-поля */
        }

    /* Рамка при наведении мышкой */
    .record-create-page .record-mud-field:hover .mud-input-root-outlined fieldset {
        border-color: rgba(239, 208, 158, 0.40) !important; /* РАМКА при наведении */
    }

    /* Рамка + подсветка при фокусе (когда открываешь/выбираешь) */
    .record-create-page .record-mud-field.mud-input-focused .mud-input-root-outlined fieldset,
    .record-create-page .record-mud-field .mud-input-root.mud-input-root-focused fieldset {
        border-color: rgba(239, 208, 158, 0.60) !important; /* РАМКА при фокусе */
        box-shadow: 0 0 0 3px rgba(239, 208, 158, 0.14); /* ПОДСВЕТКА при фокусе */
    }

    /* Иконки календаря/часов/стрелка — делаем золотыми */
    .record-create-page .record-mud-field .mud-input-adornment,
    .record-create-page .record-mud-field .mud-input-adornment * {
        color: rgba(239, 208, 158, 0.85) !important; /* ЦВЕТ ИКОНОК — менять здесь */
    }

    /* Цвет текста внутри Mud-поля */
    .record-create-page .record-mud-field input,
    .record-create-page .record-mud-field textarea,
    .record-create-page .record-mud-field .mud-input-slot {
        color: var(--login-gold) !important;
    }

        /* Placeholder внутри Mud-поля */
        .record-create-page .record-mud-field input::placeholder {
            color: rgba(239, 208, 158, 0.60) !important;
        }

/* =========================================================
   6) РАЗДЕЛИТЕЛЬ (полоска между блоками)
   ========================================================= */

.record-create-page .admin-divider {
    margin: 1rem 0; /* отступы сверху/снизу */
    border: none;
    height: 1px; /* толщина линии */
    /* Градиент линии — можно менять цвета/яркость */
    background: linear-gradient( 90deg, rgba(239, 208, 158, 0), rgba(239, 208, 158, 0.35), rgba(239, 208, 158, 0) );
}

/* =========================================================
   7) ВЫПАДАЮЩИЙ СПИСОК УСЛУГ 
   ========================================================= */

.record-create-page .service-combo {
    position: relative;
}

/* Окно выпадающего списка */
.record-create-page .service-combo-dropdown {
    position: absolute;
    z-index: 50; /* чтобы список был поверх всего */
    top: calc(44px + 6px); /* положение под полем (44px — высота поля) */
    left: 0;
    right: 0;
    background: #1f1f1f; /* ФОН СПИСКА — менять здесь */
    border: 1px solid rgba(239, 208, 158, 0.18); /* РАМКА СПИСКА — менять здесь */
    border-radius: 14px; /* ЗАКРУГЛЕНИЕ СПИСКА — менять здесь */
    box-shadow: 0 18px 40px rgba(0,0,0,0.55); /* ТЕНЬ — менять здесь */

    overflow: hidden;
    padding: 6px;
    max-height: 280px; /* максимальная высота */
    overflow-y: auto; /* скролл если много услуг */
}

/* Один пункт услуги в списке */
.record-create-page .service-combo-item {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.65rem 0.75rem; /* внутренние отступы пункта */
    border-radius: 12px; /* закругление пункта */
    color: var(--login-gold); /* цвет текста пункта */
    transition: background-color 120ms ease, transform 120ms ease;
}

    /* Наведение на пункт */
    .record-create-page .service-combo-item:hover {
        background: rgba(239, 208, 158, 0.12); /* ПОДСВЕТКА при наведении */
    }

    /* Нажатие на пункт */
    .record-create-page .service-combo-item:active {
        transform: scale(0.99); /* лёгкое "нажатие" */
    }

/* Текст внутри пункта: название слева, цена справа */
.record-create-page .service-combo-text {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
}

/* Цена услуги (отдельным цветом) */
.record-create-page .service-combo-price {
    color: rgba(239, 208, 158, 0.75); /* ЦВЕТ ЦЕНЫ — менять здесь */
    font-size: 0.92rem;
}

/* Скроллбар (полоса прокрутки) внутри списка */
.record-create-page .service-combo-dropdown::-webkit-scrollbar {
    width: 10px;
}

.record-create-page .service-combo-dropdown::-webkit-scrollbar-thumb {
    background: rgba(239, 208, 158, 0.22); /* цвет ползунка */
    border-radius: 999px;
}

.record-create-page .service-combo-dropdown::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.03); /* фон дорожки */
}

/* =========================================================
   8) ВЫБРАННЫЕ УСЛУГИ (кнопки-чипы)
   ========================================================= */

.record-create-page .selected-services-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem; /* расстояние между чипами */
    margin-top: 0.4rem;
}

.record-create-page .service-chip {
    border-radius: 999px; /* максимально круглые */
    border: 1px solid rgba(239, 208, 158, 0.35); /* рамка чипа */
    background: rgba(39, 39, 39, 0.70); /* фон чипа */
    color: var(--login-gold); /* цвет текста чипа */
    font-size: 0.85rem;
    line-height: 1;
    padding: 0.45rem 0.8rem; /* размер чипа */
    cursor: pointer;
    transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

    /* Чип при наведении */
    .record-create-page .service-chip:hover {
        background: rgba(39, 39, 39, 0.90); /* фон при наведении */
        border-color: rgba(239, 208, 158, 0.55); /* рамка при наведении */
        box-shadow: 0 10px 22px rgba(0,0,0,0.35); /* тень при наведении */
    }

    /* Чип при нажатии */
    .record-create-page .service-chip:active {
        transform: scale(0.98);
    }

/* УСЛУГИ: сузить поле ввода (сам инпут) */
.record-create-page .service-combo {
    max-width: 800px; /* <- ширина блока услуг (инпута) */
}

/* УСЛУГИ: сузить и выровнять выпадающий список по левому краю */
.record-create-page .service-combo-dropdown {
    left: 0;
     /* важно: убрали растягивание на всю ширину */
    width: 220px; /* <- ширина списка (как у поля выше) */
    max-width: 92vw; /* чтобы на телефоне не вылезало */
}


/* УСЛУГИ: показывать ~5 строк и скроллить вниз */
.record-create-page .service-combo-dropdown {
    max-height: 260px; /* ~5 элементов */
    overflow-y: auto;
    overflow-x: hidden;
}
/* фиксируем высоту одного пункта услуг */
.record-create-page .service-combo-item {
    height: 48px;
    display: flex;
    align-items: center;
}

/* 5 пунктов * 48px + паддинги (примерно) */
.record-create-page .service-combo-dropdown {
    max-height: calc(48px * 5 + 12px);
    overflow-y: auto;
    overflow-x: hidden;
}


/* =========================================================
   9) ИТОГОВАЯ СТОИМОСТЬ (поле + знак валюты)
   ========================================================= */

.record-create-page .total-price-box {
    display: flex;
    align-items: center;
    gap: 0.6rem; /* расстояние между полем и "₽" */
}

.record-create-page .total-price-edit {
    padding: 0.55rem; /* "рамка" вокруг блока */
    border-radius: 14px;
    border: 1px solid rgba(239, 208, 158, 0.18); /* рамка блока */
    background: rgba(39, 39, 39, 0.35); /* фон блока */
}

.record-create-page .total-price-input {
    height: 42px; /* высота именно поля суммы */
    max-width: 220px; /* ширина (на больших экранах) */
}

.record-create-page .total-price-currency {
    color: rgba(239, 208, 158, 0.85); /* цвет "₽" */
    font-weight: 700;
}

/* УБИРАЕМ СТРЕЛОЧКИ У ПОЛЯ СТОИМОСТИ */

/* Chrome, Edge, Opera */
.record-create-page .total-price-input::-webkit-inner-spin-button,
.record-create-page .total-price-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.record-create-page .total-price-input {
    -moz-appearance: textfield;
}


/* =========================================================
   10) ИСПОЛНИТЕЛЬ: УБИРАЕМ ФИОЛЕТОВУЮ ПОДСВЕТКУ ВЫБРАННОГО ПУНКТА
   Это влияет ТОЛЬКО на список исполнителя (потому что класс mud-executor-popover).
   ========================================================= */

/* фон выбранного пункта */
.mud-executor-popover .mud-list-item.mud-selected,
.mud-executor-popover .mud-selected-item {
    background: rgba(239, 208, 158, 0.22) !important; /* ФОН выбранного пункта — менять здесь */
    color: var(--login-gold) !important; /* ЦВЕТ текста выбранного пункта — менять здесь */
}

    /* цвет "галочки" или иконки у выбранного пункта */
    .mud-executor-popover .mud-list-item.mud-selected svg,
    .mud-executor-popover .mud-list-item.mud-selected .mud-icon-root {
        color: var(--login-gold) !important; /* ЦВЕТ иконки выбранного — менять здесь */
    }

/* СУЗИТЬ СПИСОК "ИСПОЛНИТЕЛЬ" */
.mud-executor-popover {
    width: 320px !important; /* <- ширина списка (поменяй под себя) */
    max-width: 92vw !important; /* чтобы на маленьком экране не вылезало */
}
    /* Исполнитель: убрать горизонтальный скролл */
    .mud-executor-popover,
    .mud-executor-popover .mud-popover-content,
    .mud-executor-popover .mud-list {
        overflow-x: hidden !important;
    }

/* Привязать поповер к правому краю (обычно выглядит аккуратнее) */
.mud-executor-popover {
    right: 0 !important;
    right: auto !important;
}

    /* ИСПОЛНИТЕЛИ: показывать ~5 строк и скроллить вниз */
    .mud-executor-popover .mud-popover-content {
        max-height: 260px !important; /* ~5 элементов (подгони, если нужно) */
        overflow-y: auto !important; /* вертикальный скролл */
        overflow-x: hidden !important; /* без горизонтального */
    }
    .mud-executor-popover .mud-list-item {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    .mud-executor-popover .mud-popover-content {
        max-height: calc(48px * 5 + 12px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }




/* =========================================================
   11) АДАПТАЦИЯ ПОД ТЕЛЕФОН (маленький экран)
   ========================================================= */

@media (max-width: 767.98px) {
    .record-create-page .record-col {
        gap: 0.65rem;
    }

    .record-create-page .service-combo-dropdown {
        max-height: 240px; /* список короче на телефоне */
    }

    .record-create-page .total-price-input {
        max-width: 100%;
    }
}

/* =========================================================
   12) ЛЁГКАЯ ПОДГОНКА ВЫСОТЫ/ПОЗИЦИЙ НА БОЛЬШОМ ЭКРАНЕ
   Тут ты "поднимаешь/опускаешь" блоки.
   ========================================================= */

@media (min-width: 768px) {
    .record-create-page .executor-row {
        margin-top: -3px; /* поднять исполнителя: -1..-10 (минус = выше) */
    }

    .record-create-page .time {
        margin-top: -5px; /* поднять время */
    }

    .record-create-page .data {
        margin-top: -2px; /* поднять дату */
    }
}

/* =========================================================
   13) ОКНА ВЫПАДАЮЩИХ СПИСКОВ И КАЛЕНДАРЯ (общий вид)
   Эти стили применяются только к тем компонентам, где ты указал:
   PickerClass="mud-dark-picker-popover" и PopoverClass="mud-executor-popover"
   ========================================================= */

.mud-dark-picker-popover,
.mud-executor-popover {
    background: #1f1f1f !important; /* ФОН поповера — менять здесь */
    border: 1px solid rgba(239, 208, 158, 0.18) !important; /* РАМКА поповера — менять здесь */
    border-radius: 14px !important; /* ЗАКРУГЛЕНИЕ — менять здесь */
    box-shadow: 0 18px 40px rgba(0,0,0,0.55) !important; /* ТЕНЬ — менять здесь */
    color: var(--login-gold) !important; /* ЦВЕТ текста — менять здесь */
    overflow: hidden;
}

    /* Внутренность поповера (чтобы не было белых фонов) */
    .mud-dark-picker-popover .mud-popover-content,
    .mud-executor-popover .mud-popover-content {
        background: transparent !important;
        color: var(--login-gold) !important;
    }

    /* Пункты списка исполнителя: форма и отступы */
    .mud-executor-popover .mud-list-item {
        border-radius: 10px; /* закругление пункта */
        margin: 4px 6px; /* отступы между пунктами */
    }

        /* Наведение на пункт в списке исполнителя */
        .mud-executor-popover .mud-list-item:hover {
            background: rgba(239, 208, 158, 0.12) !important; /* подсветка при наведении — менять здесь */
        }

        /* Подсветка выбранного пункта (дублируется, но не мешает) */
        .mud-executor-popover .mud-selected-item,
        .mud-executor-popover .mud-list-item.mud-selected {
            background: rgba(239, 208, 158, 0.18) !important; /* фон выбранного — менять здесь */
        }

    /* Кнопки в календаре/часах при наведении */
    .mud-dark-picker-popover button:hover {
        background: rgba(239, 208, 158, 0.12) !important;
    }



/* =========================================================
   14) Автозаполнение телефона — выпадающий список
   ========================================================= */

/* "Якорь": список позиционируется относительно блока телефона */
.record-create-page .phone-row {
    position: relative;
}

/* Сам выпадающий список */
.record-create-page .phone-suggest {
    position: absolute;
    left: 0;
    right: 0;
    /* ✅ опустить список ниже поля ввода */
    top: calc(44px + 24px); /* 44px — высота поля, 12px — зазор (поставь 8/10/14 как нравится) */

    z-index: 80;
    background: #1f1f1f;
    border: 1px solid rgba(239, 208, 158, 0.18);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.55);
    padding: 6px;
    /* ✅ примерно 5 строк + вертикальный скролл */
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden; /* ✅ убираем горизонтальный скролл */
}

/* Одна строка подсказки */
.record-create-page .phone-suggest-item {
    padding: 0.7rem 0.75rem;
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
    background: transparent;
    /* текст */
    color: rgba(239, 208, 158, 0.85);
    /* чтобы красиво обрезалось */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 120ms ease, transform 120ms ease;
}

    .record-create-page .phone-suggest-item:hover {
        background: rgba(239, 208, 158, 0.12);
    }

    .record-create-page .phone-suggest-item:active {
        transform: scale(0.99);
    }

    /* Выделение ФИО */
    .record-create-page .phone-suggest-item b {
        color: rgba(239, 208, 158, 0.95);
        font-weight: 700;
    }

/* Скролл внутри списка */
.record-create-page .phone-suggest::-webkit-scrollbar {
    width: 10px;
}

.record-create-page .phone-suggest::-webkit-scrollbar-thumb {
    background: rgba(239, 208, 158, 0.22);
    border-radius: 999px;
}

.record-create-page .phone-suggest::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.03);
}

/* На телефоне — меньше высота */
@media (max-width: 767.98px) {
    .record-create-page .phone-suggest {
        max-height: 240px;
    }
}

/* Итог + продолжительность — в одну строку */
.record-summary-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* Каждый блок — фиксированной ширины */
.record-summary-item {
    width: 260px; /* ← одинаковая ширина */
}

/* Продолжительность — как поле, но текст */
.record-duration-value {
    height: 42px;
    display: flex;
    align-items: center;
    padding: 0 0.95rem;
    font-weight: 700;
    color: var(--login-gold);
    white-space: nowrap;
}

/* Телефон — друг под другом */
@media (max-width: 767.98px) {
    .record-summary-row {
        flex-direction: column;
    }

    .record-summary-item {
        width: 100%;
    }
}

/* Две колонки: сумма + время */
.record-create-page .totals-row {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.record-create-page .totals-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
}

/* чтобы блок суммы не растягивался */
.record-create-page .total-price-edit--compact {
    flex: 0 0 auto;
}

/* контейнер времени как у суммы */
.record-create-page .duration-edit {
    gap: 12px;
}

/* мини-инпуты времени */
.record-create-page .duration-field {
    display: flex;
    align-items: center;
    gap: 6px;
}

.record-create-page .duration-input {
    width: 86px;
    height: 42px;
    padding: 0 0.8rem;
    border-radius: 12px;
    border: 1px solid rgba(239, 208, 158, 0.22);
    background: var(--login-input-bg);
    color: var(--login-gold);
    outline: none;
}

/* ч/мин */
.record-create-page .duration-suffix {
    color: rgba(239, 208, 158, 0.85);
    font-weight: 700;
    white-space: nowrap;
}

/* Телефон: на узких экранах — в столбик */
@media (max-width: 767.98px) {
    .record-create-page .totals-row {
        flex-direction: column;
        align-items: stretch;
    }

    .record-create-page .totals-col {
        width: 100%;
    }

    .record-create-page .duration-input {
        width: 100%;
    }

    .record-create-page .duration-edit {
        justify-content: space-between;
    }
}

/* ===== Drawer: фиксируем поверх всего (важно: в конце файла) ===== */

/* ОВЕРЛЕЙ */
.record-edit-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.55) !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    /* ключ: всегда по центру */
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    overflow: auto !important; /* если окно большое */
    pointer-events: auto !important;
}

/* ОКНО */
.record-edit-modal {
    /* ЖЁСТКО УБИВАЕМ “нижнюю панель” */
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    /* ЖЁСТКО ЦЕНТРУЕМ В FLEX */
    margin: 0 !important;
    align-self: center !important;
    width: min(560px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    background: #121212 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* ПК: слева */
@media (min-width: 992px) {
    .record-edit-overlay {
        align-items: stretch !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .record-edit-modal {
        align-self: stretch !important;
        width: min(420px, 100vw) !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        border-top: none !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: 1px solid rgba(255,255,255,.10) !important;
    }


    /* ===== FIX: на телефоне модалка строго по центру ===== */

    /* overlay на весь экран */
    .record-edit-overlay {
        position: fixed !important;
        inset: 0 !important;
        z-index: 999999 !important;
        background: rgba(0,0,0,.55) !important;
        /* самый надёжный центр */
        display: grid !important;
        place-items: center !important;
        padding: 12px !important;
    }

        /* ВАЖНО: более сильный селектор (перебивает "bottom-sheet" стили) */
        .record-edit-overlay > .record-edit-modal {
            /* убиваем любые bottom/top/transform от других стилей */
            position: relative !important;
            inset: unset !important;
            top: unset !important;
            right: unset !important;
            bottom: unset !important;
            left: unset !important;
            transform: none !important;
            margin: 0 !important;
            width: min(560px, calc(100vw - 24px)) !important;
            max-height: calc(100dvh - 24px) !important;
            background: #121212 !important;
            border: 1px solid rgba(255,255,255,.10) !important;
            border-radius: 16px !important;
            padding: 16px !important;
            overflow: auto !important;
            -webkit-overflow-scrolling: touch;
        }

    /* ПК: слева как drawer */
    @media (min-width: 992px) {
        .record-edit-overlay {
            display: flex !important;
            place-items: unset !important; /* отключаем grid-центрирование */
            align-items: stretch !important;
            justify-content: flex-start !important;
            padding: 0 !important;
        }

            .record-edit-overlay > .record-edit-modal {
                width: min(420px, 100vw) !important;
                max-height: 100vh !important;
                border-radius: 0 !important;
                border-top: none !important;
                border-bottom: none !important;
                border-left: none !important;
                border-right: 1px solid rgba(255,255,255,.10) !important;
            }
    }

}