:root {
    --mud-palette-drawer-background: #FAFAFA !important;
    --mud-palette-drawer-text: #311718 !important;
    --mud-palette-drawer-icon: #838383 !important;
    --mud-drawer-width-left: 280px !important;
    --mud-drawer-width-right: 280px !important;
    /* MudBlazor 8.9 не задаёт mini-ширину — без неё width:var() невалиден
       и закрытый mini-drawer растягивается по контенту поверх страницы */
    --mud-drawer-width-mini-left: 72px !important;
    --mud-drawer-width-mini-right: 72px !important;
    --mud-elevation-1: none !important;
    --mud-selected: #F5F4FD;
    --mud-typography-caption-family: "Manrope", sans-serif !important;
    --mud-typography-family: "Manrope", sans-serif !important;
    --mud-typography-subtitle1-family: "Manrope", sans-serif !important;
    --mud-default-borderradius: 12px !important;
    --mud-typography-default-size: 0.775rem !important;
    --mud-typography-button-weight: 400 !important;
    --mud-palette-skeleton: #FAFAFA !important;
    --rz-input-border-radius: 12px !important;
    --mud-palette-action-disabled-background: rgba(241, 239, 239, 0.82) !important;

}

.mud-pagination .mud-button-root {
    height: 32px !important;
    width: 32px !important;
    min-width: unset !important;
}

html, body, #app {
    height: 100%;
}

body {
    font-family: "Manrope", sans-serif !important;
}

button {
    border-radius: var(--mud-default-borderradius) !important;
}

#components-reconnect-modal {
    display: none !important;
}

.mud-tabs-tabbar .mud-tabs-tabbar-inner {
    border-bottom: 1px solid #E4E4E5;
}

/* === Модальный слой: диалог всегда поверх любого контента страницы ===
   В проекте есть элементы с z-index до 99999 (дровер, кастомные оверлеи,
   header-menu 20000). Контейнер диалога MudBlazor имеет z-index 9995 и
   проигрывает им — окно оказывается "под" страницей. Поднимаем весь
   модальный слой выше, но оставляем ниже rz-dropdown-panel (9999999),
   чтобы выпадающие списки Radzen внутри диалогов продолжали работать. */
:root {
    --mud-zindex-dialog: 100000;
    /* Поповеры (селекты, датапикеры, автокомплиты, меню) и тултипы должны быть
       выше КАСТОМНЫХ оверлеев тоже (new.css: .withdraw-modal-overlay,
       .bo-modal-overlay, .telegram-modal-container и др. = 100500) — иначе
       MudSelect/MudDatePicker внутри кастомной модалки открывается под ней. */
    --mud-zindex-popover: 100600;
    --mud-zindex-tooltip: 100700;
    /* Снакбар должен быть выше ВСЕХ слоёв, включая кастомные оверлеи
       (new.css: .withdraw-modal-overlay и др. = 100500) и rz-dropdown-panel
       (9999999) — иначе подтверждение действия (копирование ID, принятие)
       вылетает позади открытой модалки/дропдауна и незаметно. */
    --mud-zindex-snackbar: 10000500;
    /* MudThemeProvider не подключён — палитра --mud-palette-* не генерируется.
       Без неё outlined-правила MudBlazor инвалидны (var() без значения →
       вся декларация border/color схлопывается в unset) и рамок/цвета нет.
       Задаём нейтральную монохромную палитру в духе темы: outlined-кнопки,
       чипы и алерты получают видимые рамки; filled и так перекрыт
       .mud-button-filled { background:#1e1e1e !important }. */
    --mud-palette-border-opacity: 0.3;
    --mud-palette-primary: #e8e8e8;
    --mud-palette-primary-darken: #ffffff;
    --mud-palette-primary-lighten: #c8c8c8;
    --mud-palette-primary-text: #101010;
    --mud-palette-primary-hover: rgba(255, 255, 255, 0.05);
    --mud-palette-secondary: #9a9a9a;
    --mud-palette-secondary-darken: #b8b8b8;
    --mud-palette-secondary-lighten: #7e7e7e;
    --mud-palette-secondary-text: #101010;
    --mud-palette-secondary-hover: rgba(255, 255, 255, 0.05);
}

body.light-theme {
    --mud-palette-primary: #2f2f2f;
    --mud-palette-primary-darken: #000000;
    --mud-palette-primary-lighten: #4a4a4a;
    --mud-palette-primary-text: #ffffff;
    --mud-palette-primary-hover: rgba(0, 0, 0, 0.04);
    --mud-palette-secondary: #6a6a6a;
    --mud-palette-secondary-darken: #4a4a4a;
    --mud-palette-secondary-lighten: #8a8a8a;
    --mud-palette-secondary-text: #ffffff;
    --mud-palette-secondary-hover: rgba(0, 0, 0, 0.04);
}

.mud-dialog-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 100000 !important;
    display: flex !important;
}

    .mud-dialog-container.mud-dialog-center {
        align-items: center !important;
        justify-content: center !important;
    }

    .mud-dialog-container .mud-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }

/* Диалоги не должны уходить за пределы вьюпорта: ограничиваем высоту и скроллим контент */
.mud-dialog {
    max-height: calc(100vh - 48px) !important;
    display: flex;
    flex-direction: column;
}

.mud-dialog .mud-dialog-content {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #3a3a3a transparent;
}

.mud-dialog .mud-dialog-content::-webkit-scrollbar {
    width: 8px;
}

.mud-dialog .mud-dialog-content::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 4px;
}

.mud-dialog .mud-dialog-content::-webkit-scrollbar-track {
    background: transparent;
}

.mud-button-filled-primary {
    min-width: 142px !important;
}

.mud-input-numeric-spin {
    margin-right: 1rem;
}

/* new.css: глобальный .mud-icon-button:not(.mud-switch-base){margin-right:-5px}
   вытягивал ВСЕ icon-кнопки на 5px за правый край — крестики очистки
   вылезали за границу поля. Внутри .mud-input отрицательный отступ не нужен. */
.mud-input .mud-icon-button:not(.mud-switch-base) {
    margin-right: 0;
}

.mud-input-number-control.mud-input-showspin .mud-input-adornment-end {
    margin-inline-end: 30px !important;
    margin-inline-start: unset;
}

.mud-dialog button:not(.mud-icon-button):not(.mud-button-close):not(.mud-input-clear-button) {
    height: 36.5px !important;
}

/* Симметрия диалога: у заголовка padding 16/24, у actions был 8px —
   зазор «последнее поле → кнопки» получался меньше «заголовок → первое
   поле», а кнопка липла к нижнему краю. Те же 16/24: зазоры равны. */
.mud-dialog .mud-dialog-actions {
    padding: 16px 24px;
}

h1:focus {
    outline: none;
}

.mud-table-loading {
    display: none !important;
}

._indicator {
    justify-content: center;
    display: flex;
}

.mud-table-cell .mud-icon-root {
    margin-left: auto !important;
    margin-right: auto !important;
}

.mud-table-cell {
    font-size: 11px !important;
}

    .mud-table-cell .mud-typography {
        font-size: 11px !important;
    }

.mud-drawer.mud-drawer-mini {
    height: 100vh !important;
}

.mud-dialog-title .mud-typography {
    font-weight: 400;
}

h2 {
    font-family: "Manrope", sans-serif !important;
    margin-bottom: 1rem;
    font-weight: 500;
    font-size: 22px !important;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Произошла ошибка. Обновите страницу"
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.mud-drawer-header {
    display: flex !important;
    flex-direction: column;
}

    .mud-drawer-header img {
        width: 3rem;
    }

.mud-navmenu-default, .container-padding {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.nav-step {
    margin-bottom: 1.4rem;
}

    .nav-step > span {
        display: block;
        margin-left: 0.5rem !important;
        margin-bottom: 0.6rem;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .09em;
    }

    .nav-step .mud-icon-size-medium {
        font-size: 1.25rem !important;
    }

.mud-nav-item {
    height: 42px;
    margin-bottom: 4px;
}

.mud-drawer-mini .mud-nav-link {
    border-radius: 12px !important;
}

.mud-nav-link:focus:not(.mud-nav-link-disabled) svg {
    color: #0062FF !important;
}

.mud-nav-link {
    font-size: 13px;
}

.nav-container span {
    margin-bottom: 1rem !important;
}

.nav-container .mud-input-outlined-border {
    border-radius: 12px !important;
}

.mud-main-content {
    padding-top: 1rem !important;
    width: auto !important;
}

.header {
    display: flex;
}

    .header .profile {
        margin-left: auto;
        background-color: #F9F9F9;
        border: 1px solid #E4E4E5;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 0.6rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 0.75rem;
    }

        .header .profile > span {
            margin-top: auto;
            margin-bottom: auto;
        }

        .header .profile svg {
            margin-top: auto;
            margin-bottom: auto;
        }

        .header .profile .mud-avatar {
            margin-top: auto;
            margin-bottom: auto;
        }

        .header .profile .mud-button-label .mud-button-icon-end {
            display: flex !important;
            margin-left: unset !important;
            margin-right: unset !important;
            margin-inline-start: unset !important;
            margin-inline-end: unset !important;
        }

        .header .profile button {
            max-width: unset !important;
            min-width: unset !important;

        }

    .header .header-action {
        margin-left: auto;
        display: flex;
        margin-right: 1rem;
    }

        .header .header-action button {
            margin-top: auto;
            margin-bottom: auto;
        }

    .header .profile .deposit {
        margin-left: 0.2rem;
        margin-right: 0.2rem;
    }

.mud-elevation-2 {
    box-shadow: none !important;
}

.mud-tab {
    text-transform: none !important;
}

.indicator-header .mud-svg-icon {
    margin-right: 0.2rem !important;
}

.i-item-header svg {
    width: 22px !important;
    margin-right: 0.2rem !important;
    margin-top: auto;
    margin-bottom: auto;
}

.params button {
    margin-top: 1rem !important;
}

.mud-button-filled {
    box-shadow: none !important;
    text-transform: none !important;
    font-family: "Manrope", sans-serif !important;
    border-radius: 12px !important;
    background-color: #FAFAFA !important;
    color: #000 !important
}

.mud-container-maxwidth-lg {
    max-width: unset !important;
}

.mud-dialog .mud-dialog-actions .mud-button:not(.mud-icon-button) {
    width: 100%;
    background: linear-gradient(135deg, #333333 0%, #252525 100%) !important;
    color: #ffffff !important;
}

.mud-dialog .mud-icon-button,
.mud-dialog .mud-button-close,
.mud-dialog .mud-input-clear-button,
.mud-input-clear-button,
button.mud-icon-button:not(.mud-day):not(.mud-picker-calendar-header-switch *) {
    width: auto !important;
    min-width: unset !important;
    max-width: none !important;
    flex: 0 0 auto !important;
}

/* Дни календаря: сток MudBlazor сам даёт ровную сетку — обычный день
   36px + margin 2x2px = 40px, день диапазона 40px + margin 0 = 40px.
   Принудительные width здесь не нужны: правило icon-button выше
   уже исключает .mud-day через :not(.mud-day). */

.mud-dialog .mud-dialog-title .mud-button-close {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 8px !important;
}

.mud-dialog .mud-input {
    border-radius: 12px !important;
    color: #ffffff !important;
}

.mud-dialog .mud-input-outlined-border {
    border-color: #444444 !important;
}

.mud-dialog-actions {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-bottom: 24px !important;
}

.login fieldset {
    border-radius: 6px !important;
}

.login .login-action button {
    width: 100% !important;
    height: 40px;
    background-color: #020202 !important;
    color: #fff !important;
    border-radius: 6px !important;
    margin-top: 0.5rem;
}

.action button {
    width: 100%;
}

.input-confines {
    max-width: 450px !important;
}

.margin-input {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.mud-table-cell {
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-status {
    padding: 0.6rem;
    display: flex;
    border-radius: 9px;
    color: #fff;
    justify-content: center;
}

.reflective-invoice-action {
    margin-top: 1rem;
}

    .reflective-invoice-action button {
        width: 100%;
    }

.users-header .mud-select {
    margin-top: auto;
    margin-bottom: auto;
}

.users-header button {
    height: 51px !important;
    margin-top: auto;
    margin-bottom: auto;
}

.item-row .mud-icon-root {
    margin-left: auto;
    margin-right: auto;
}

.settings-item button {
    margin-top: auto;
    width: 100%;
}

.settings .settings-item:last-of-type {
    width: 100% !important;
    flex: auto !important;
}

.user-info .item-row {
    white-space: nowrap;
}

    .user-info .item-row:first-of-type {
        min-width: 20%;
    }

.tab-header {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
    gap: 15px;
    align-items: center;
}

    .tab-header > .mud-button-root,
    .tab-header > .mud-button,
    .tab-header button.mud-button-root {
        width: auto !important;
        flex: 0 0 auto !important;
        height: 51px !important;
        margin-top: auto;
        margin-bottom: auto;
    }

    .tab-header button {
        height: 51px !important;
        margin-top: auto;
        margin-bottom: auto;
    }

.tab-data {
    margin-top: 1rem;
}

.dialog-check {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    background-color: #FAFAFA !important;
    border: 1px solid #F1F1F1;
    margin-top: 0.7rem;
    margin-bottom: 0.7rem;
}

    .dialog-check .mud-input-control p {
        font-size: 13px;
    }

body.mud-dark-theme .dialog-check {
    background-color: #222222 !important;
    border-color: #333333;
}

.mud-icon-size-medium {
    font-size: 18px !important;
}

.user-wallet-action .mud-icon-root {
    fill: #005BE3 !important;
}

.full-width {
    grid-column: span 2;
}

.mud-container {
    padding-bottom: 1rem !important;
}

.qr-image {
    display: flex;
}

.two-fields .mud-input-control {
    margin-bottom: unset !important;
}

    .two-fields .mud-input-control:last-of-type {
        margin-right: auto;
    }

.two-fields .mud-select {
    flex-grow: unset !important;
    width: 180px;
    margin-top: auto;
}

.mud-table-pagination-caption {
    display: none !important;
}

.mud-drawer-header .mud-typography-h6 {
    margin-top: auto;
    margin-left: 0.4rem;
}

.mud-drawer-header img {
    width: 2rem !important;
    height: 2rem !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.mud-drawer-header {
    flex-direction: row !important;
}

.nav-container span:first-of-type {
    font-weight: 500;
    margin-left: 1rem;
}

.exit-btn {
    width: 36.5px;
    height: 36.5px;
}

.theme-btn {
    width: 36.5px;
    height: 36.5px;
    margin-top: auto;
    margin-bottom: auto;
}

.header-menu {
    position: fixed;
    z-index: 100001;
    display: none;
    top: 10px;
    left: 10px;
}

    .header-menu .mud-button-label .mud-button-icon-start {
        display: inherit;
        margin-left: unset !important;
        margin-right: unset !important;
        margin-inline-start: unset !important;
        margin-inline-end: unset !important;
    }

    .header-menu button {
        width: 54px !important;
        height: 54px !important;
        min-width: unset !important;
        background-color: #020202 !important;
        color: #fff !important;
        font-size: 21px !important;
    }

    .header-menu .mud-icon-root {
        width: 1.4rem !important;
        height: 1.4rem !important;
    }

.hide {
    display: none !important;
}

.show {
    display: unset !important;
}

.grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
    gap: 16px;
    align-items: start;
}

.grid-item {
    box-sizing: border-box;
    background-color: #ddd;
    border-radius: 12px;
}

.mud-table .mud-table-child-content .reflective {
    width: 100%;
}

    .mud-table .mud-table-child-content .reflective .settings {
        display: grid !important;
    }

/* Expanded row inside a horizontally scrolling grid: the child cell spans the
   full scroll width (~1500px+), so cap the card to the visible content area
   and pin it to the left edge while the table scrolls. Selector avoids the td
   class name so it applies regardless of MudBlazor internals. */
.grid-expand-fit {
    position: sticky;
    left: 0;
    box-sizing: border-box;
    min-width: 0;
    max-width: calc(100vw - 280px - 3rem);
    overflow-x: hidden;
}

/* Unscoped дубль ключевых ограничений ReflectiveData — scoped-бандл
   (highpay.styles.css) имеет фиксированное имя и может жить в кэше. */
.mud-table .grid-expand-fit .reflective,
.mud-table .grid-expand-fit .mud-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.mud-table .grid-expand-fit .settings {
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)) !important;
}
.mud-table .grid-expand-fit .settings-item,
.mud-table .grid-expand-fit .params,
.mud-table .grid-expand-fit .param {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}
.mud-table .grid-expand-fit .param span,
.mud-table .grid-expand-fit .params span {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

.mud-drawer-close-mini-md-left .grid-expand-fit {
    max-width: calc(100vw - 72px - 3rem);
}

@media (min-width: 1600px) {
    /* На широких экранах открытый drawer плавает поверх контента —
       сдвигаем раскрытый блок правее, чтобы он не уходил под меню */
    .mud-drawer-open-mini-md-left .grid-expand-fit {
        left: 280px;
    }
}

.mud-popover-open .mud-menu-list .mud-menu-item button {
    width: 100% !important;
    height: 100% !important;
}

.copy-btn {
    width: 24px;
    height: 24px;
    margin-left: 0.2rem !important;
}

.mud-tabs .tab-data .pagination {
    margin-top: 2rem;
    display: flex;
}

    .mud-tabs .tab-data .pagination .mud-pagination {
        margin-left: auto;
        margin-right: auto;
    }

.mud-table-body .mud-tab.mud-tab-active {
    background-color: #F1F1F16E !important;
}

.wallet-list {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}

/* Range-пикер (Период/От→До): внутренние слоты не должны стекаться
   по вертикали и обязаны делить ширину — иначе поле раздувается
   в «пилюлю» на ~200px (Прибыль) или сжимается в полоску (Логи). */
.mud-picker .mud-input.mud-input-range,
.mud-picker .mud-input {
    flex-wrap: nowrap !important;
}

.mud-picker .mud-input-slot,
.mud-picker .mud-input > input,
.mud-picker .mud-input > .mud-input-slot {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

/* Range-инпуты «дата с → дата по»: текст слотов центрируем — стрелка-
   сепаратор (.mud-range-input-separator между инпутами) встаёт ровно
   по центру между двумя датами, а не прижатой к первой. */
.mud-picker .mud-input > input:has(+ .mud-range-input-separator),
.mud-picker .mud-input > .mud-range-input-separator + input {
    width: 0 !important;
    text-align: center !important;
}

/* Единая ширина полей во всех фильтр-рядах сайта: каждое поле делит
   строку поровну с соседями (flex 1 1 0), кнопки и чекбоксы — по
   содержимому. Перебивает разрозненные базисы из new.css
   (.status-filter 220/max300, .amount-filter 180, .mud-picker 300/440).
   Только на >=769px: на мобильной ряды — колонки, там свои правила. */
@media (min-width: 769px) {
    /* Все поля фильтров — одна фикс-ширина 240px: ряды совпадают
       визуально как сетка, без «неровных» полей разной ширины */
    .filters-row > *,
    .filter-row > *,
    .transactions-filters > *,
    .users-filters > *,
    .bo-panel-toolbar > * {
        flex: 1 1 0 !important;
        min-width: 220px !important;
        /* равные ширины внутри ряда + кап: на разреженном ряду (2 поля)
           поле не тянется на полстраницы, на плотном — не сжимается <220px */
        max-width: 340px !important;
    }
    .filters-row > button,
    .filters-row > .mud-button-root,
    .filter-row > button,
    .filter-row > .mud-button-root,
    .transactions-filters > button,
    .transactions-filters > .mud-button-root,
    .users-filters > button,
    .users-filters > .mud-button-root,
    .bo-panel-toolbar > button,
    .bo-panel-toolbar > .mud-button-root,
    .filters-row > .mud-checkbox,
    .filter-row > .mud-checkbox,
    .transactions-filters > .mud-checkbox {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
    }
}

/* Одинаковый межэлементный отступ во всех фильтр-рядах */
.bo-notif-filter-row {
    gap: 16px;
}

/* Мобильная колонка: flex-basis 100% из new.css в колоночном ряду
   читается как ВЫСОТА — поле получает высоту всего контейнера и
   под ним висит пустая полоса. Гасим: естественная высота,
   полная ширина. */
@media (max-width: 768px) {
    .filters-row > *,
    .filter-row > *,
    .transactions-filters > * {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }
}

/* Шапка пикера дат красится в --mud-palette-primary (нейтральный
   светло-серый для outlined-кнопок) — получается серая полоса с
   нечитаемым светлым текстом. Тёмная тема: тёмная шапка + светлый
   текст; светлая: primary-полоса + primary-text. */
body.mud-dark-theme .mud-picker-datepicker-toolbar,
body.mud-dark-theme .mud-picker-toolbar {
    background-color: #262626 !important;
}
body.mud-dark-theme .mud-picker-datepicker-toolbar .mud-button-root,
body.mud-dark-theme .mud-picker-datepicker-toolbar .mud-typography,
body.mud-dark-theme .mud-picker-toolbar .mud-button-root,
body.mud-dark-theme .mud-picker-toolbar .mud-typography {
    color: var(--mud-palette-text-primary) !important;
}
body.light-theme .mud-picker-datepicker-toolbar .mud-button-root,
body.light-theme .mud-picker-datepicker-toolbar .mud-typography,
body.light-theme .mud-picker-toolbar .mud-button-root,
body.light-theme .mud-picker-toolbar .mud-typography {
    color: var(--mud-palette-primary-text) !important;
}

/* Без префикса темы: на части страниц (напр. Аудит) body не несёт
   mud-dark-theme — шапка календаря оставалась светлой полосой на тёмном
   фоне. Тёмный дефолт; для светлой темы ниже правила light.css. */
.mud-picker-datepicker-toolbar,
.mud-picker-toolbar {
    background-color: #262626 !important;
}
.mud-picker-datepicker-toolbar .mud-button-root,
.mud-picker-datepicker-toolbar .mud-typography,
.mud-picker-toolbar .mud-button-root,
.mud-picker-toolbar .mud-typography {
    color: #f0f0f0 !important;
}
body.light-theme .mud-picker-datepicker-toolbar,
body.light-theme .mud-picker-toolbar {
    background-color: var(--mud-palette-primary) !important;
}

/* Детали заявки: секции 2×2 растягиваются на высоту ячейки —
   ряды карточек выглядят ровными по высоте */
.invoice-details .detail-section {
    height: 100%;
    box-sizing: border-box;
}

/* Графики Datalens: при перерисовке (UpdateData/reload) MudChart заново
   анимирует SVG от нуля — фиксируем высоту обёртки, чтобы блок не сжимался */
.tab-fin-stats-list:has(.mud-chart) {
    min-height: 400px;
}

/* MudChart реанимирует серии при каждом ререндере Blazor (тикер курса
   в хедере перерисовывает страницу) — отключаем анимации внутри графиков,
   иначе линия «дёргается» постоянно */
.tab-fin-stats .mud-chart,
.tab-fin-stats .mud-chart * {
    animation: none !important;
    transition: none !important;
}

/* === Mobile UX pass === */
/* iOS не раздувает текст при повороте экрана */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Скролл логов кошелька не выше половины вьюпорта на телефонах */
.log-scroll {
    height: min(400px, 55vh);
}

@media (max-width: 768px) {
    /* iOS Safari зумит страницу при фокусе в поля <16px —
       ставим 16px только мобильным инпутам */
    input,
    textarea,
    select,
    .mud-input-slot input,
    .mud-input-slot textarea {
        font-size: 16px !important;
    }

    /* Тач-таргеты иконочных кнопок в диалогах — минимум 40px */
    .mud-dialog .mud-icon-button,
    .mud-dialog .mud-button-close,
    .log-filters .mud-icon-button {
        min-width: 40px;
        min-height: 40px;
    }
}

/* Пустое состояние таблиц/гридов с горизонтальным скроллом:
   центрируем по видимой области, а не по полной ширине таблицы
   (StickyRight-колонки и HorizontalScrollbar уводят центр за экран) */
.mud-table-empty-row td,
td.mud-table-empty-row,
th.mud-table-empty-row {
    text-align: center !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}
.mud-table-empty-row td > *,
td.mud-table-empty-row > *,
th.mud-table-empty-row > * {
    position: sticky;
    left: 0;
    right: 0;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* HorizontalScrollbar ставит контейнеру width:max-content — таблица
   сжималась по содержимому (~64% карточки), разделители обрывались,
   справа оставалась мёртвая зона. min-width возвращает полную ширину,
   при реальном переполнении скролл сохраняется */
.mud-data-grid > .mud-table-container {
    min-width: 100%;
}

/* Глобальный margin-right:-5px у .mud-icon-button выталкивал последнюю
   иконку пейджера за край контейнера — в пейджере убираем */
.mud-table-pagination .mud-icon-button {
    margin-right: 0 !important;
}

.log-filters {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

    /* В строках фильтров боксы инпутов должны стоять на одной линии:
       у picker (margin-dense 4px / with-label 8px+4px) и select
       (margin-normal 8px) разные вертикальные margin у .mud-input-control —
       flex выравнивает корни компонентов, а видимые боксы съезжают. */
    .log-filters .mud-input-control,
    .tab-head-item .mud-input-control {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .log-filters .mud-picker {
        flex: 1 1 280px;
        min-width: 240px;
    }

    .log-filters .mud-select {
        flex: 0 1 220px;
        min-width: 180px;
        margin-top: 0;
    }

.log-item {
    box-sizing: border-box;
    overflow: hidden;
    height: 118px;
    margin-top: 0;
    margin-bottom: 8px;
}

.log-data-description {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filters-row .mud-picker .mud-input-control,
.virtualize-modal .mud-picker .mud-input-control {
    margin-bottom: 0;
    min-width: 0;
    max-width: 100%;
}

.filters-row .mud-picker .mud-picker-input-button,
.virtualize-modal .mud-picker .mud-picker-input-button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
}

/* Период-пикер: dense-инпут держит свою высоту — иначе устаревшие
   правила раздувают контейнер в «карту» на несколько сотен px */
.filters-row .mud-picker .mud-input-control-margin-dense .mud-input,
.filter-row .mud-picker .mud-input-control-margin-dense .mud-input,
.filter-container .mud-picker .mud-input-control-margin-dense .mud-input {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex-wrap: nowrap !important;
}

.filters-row .mud-picker .mud-input-control,
.filter-row .mud-picker .mud-input-control,
.filter-container .mud-picker .mud-input-control {
    height: auto !important;
}

/* MudBlazor размножает Class компонента на внутренние узлы
   (.mud-input, input, .mud-input-adornment) — для пикеров, селектов
   и текстфилдов одинаково. Правила размеров *-filter классов должны
   действовать только на внешний контейнер: на внутреннем .mud-input
   flex-basis в колоночном .mud-input-control читается как ВЫСОТА
   и раздувает поле в «карту». Гасим размер универсально по подстроке
   "filter" в классе — .mud-input/adornment/slot никогда не являются
   внешним контейнером фильтра. */
.mud-input[class*="filter"] {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

.mud-input-adornment[class*="filter"] {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
}

.mud-input-slot[class*="filter"],
.mud-input input[class*="filter"] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* Внутренний .mud-input-control селекта тоже несёт *-filter класс:
   внешний .mud-select тянулся до max-width ряда (340px), а бокс
   оставался 260px → «разрыв» между соседними полями. Бокс = обёртке. */
.mud-select > .mud-input-control[class*="filter"] {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.grid-list p:first-of-type {
    text-align: center;
}

.tab-head-item .mud-picker-inline,
.tab-head-item .tab-range-picker,
.tab-head-item .mud-picker {
    width: max-content !important;
    max-width: 380px !important;
    min-width: 280px !important;
    flex: 0 0 auto !important;
}

.tab-head-item .mud-picker .mud-input-control {
    width: max-content !important;
    max-width: 380px !important;
}

.tab-head-item .mud-input-clear-button,
.tab-head-item .mud-icon-button.mud-input-clear-button {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
}

/* Range-picker: класс tab-range-picker висит и на самих input —
   new.css даёт им min-width:280px !important. Побеждаем специфичностью
   (body + element) — слоты должны сжиматься внутри бокса, иначе
   clear-кнопка вываливается за правый край поля. */
body .tab-head-item input.tab-range-picker,
body .tab-range-picker input.mud-input-slot,
body .tab-range-picker .mud-input-slot {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 0 !important;
}
body .tab-head-item .mud-input-adornment,
body .tab-range-picker .mud-input-adornment {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: auto !important;
}
body .tab-head-item .mud-input-clear-button,
body .tab-range-picker .mud-input-clear-button {
    flex: 0 0 auto !important;
    min-width: 28px !important;
}

.tab-head-item > .mud-button-root,
.tab-head-item > .mud-menu,
.tab-head-item .mud-menu,
.tab-head-item .mud-menu .mud-button-root {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: unset !important;
    max-width: none !important;
}

.tab-head-item .mud-button-filled-primary {
    min-width: unset !important;
    width: auto !important;
}

/* У MudTextField/MudNumericField с Label внутренний .mud-input получает
   margin-top:16px (.mud-input-text-with-label): бокс опускается, а лейбл
   остаётся наверху контейнера и «висит» над полем с разрывом. У MudSelect
   (.mud-select-input) этого отступа нет — лейбл лежит на рамке с нотчем.
   Убираем отступ: лейбл ложится на рамку, как у селекта — поля в ряду
   становятся одной высоты и выглядят одинаково. */
.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text.mud-input-text-with-label {
    margin-top: 0;
}

/* Центрируем outlined-лейбл адаптивно: инпут использует Typo.subtitle1
   (line-height 1.75) — высота = 1.75rem + 2*padding; высота лейбла 1.15rem.
   Верх лейбла = padding + (1.75rem - 1.15rem)/2 = padding + 0.3rem.
   Фиксированные px не работают при увеличенном html{font-size:18px}. */
.mud-input-label-outlined {
    transform: translate(14px, calc(18.5px + 0.3rem)) scale(1);
}
.mud-input-label-outlined.mud-input-label-margin-dense {
    transform: translate(14px, calc(10.5px + 0.3rem)) scale(1);
}
/* В контейнерах с принудительной высотой 40px центр лейбла = (40px - 1.15rem)/2 */
.login-inputs .mud-input-label-outlined,
.nav-container .mud-input-label-outlined,
.tab-head-item .mud-input-label-outlined {
    transform: translate(14px, calc(20px - 0.575rem)) scale(1);
}

.tab-head-item .mud-select .mud-select-input {
    line-height: 40px !important;
    height: 40px !important;
}

.login-inputs .mud-input {
    line-height: 40px !important;
    height: 40px !important;
}

.nav-container .mud-input {
    line-height: 40px !important;
    height: 40px !important;
}

input:-webkit-autofill {
    box-shadow: 0 0 0 3000px var(--input-bg, white) inset !important;
    -webkit-text-fill-color: var(--input-color, #000) !important;
    caret-color: var(--input-color, #000) !important;
}

.virtualize-modal .mud-typography-caption {
    line-height: 40px !important;
    height: 40px !important;
}

.tab-head-item .mud-button-filled-size-medium, .tab-head-item .mud-menu, .tab-head-item .mud-input-outlined-with-label {
    height: 41px;
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.tab-header .mud-input-control-input-container {
    margin-top: auto;
    margin-bottom: auto;
}

.tab-stats-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tab-head, .tab-stats {
    margin-bottom: 1rem;
}

.tab-fin-stats-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tab-head-item {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.reflective .action button {
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.2) 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.75rem 1.5rem !important;
    border-radius: 12px !important;
}

    .reflective .action button:hover {
        background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.1) 100%) !important;
        border-color: rgba(255, 255, 255, 0.24) !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
    }

.user-wallet-action .mud-button-filled {
    background-color: #FFF !important;
}

.indicator-collection {
    min-height: 88px !important;
}

.log-items-data {
    width: 100%;
    /* flex-ребёнок: min-content от неразрывного URL (tronscan) распирал
       строку лога шире диалога — правая колонка уходила за край */
    min-width: 0;
    overflow: hidden;
}

/* Инфо-строка курса/маржи в диалоге реквизита — перенос по элементам */
.detail-course-hint .detail-course-hint-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    line-height: 1.5;
}

.detail-course-hint .mud-alert-message {
    overflow-wrap: anywhere;
}

@media (min-width: 1600px) {
    .user-item {
        display: grid
    }

    .user-info {
        display: grid
    }
}

@media (max-width: 710px) {
    .mud-layout .mud-drawer-fixed.mud-drawer--closed {
        display: none;
    }

    .mud-drawer-open-mini-md-left .mud-main-content {
        margin-left: unset !important;
    }

    .users-header {
        display: grid !important;
        margin-bottom: 1rem;
    }

    .users-list .user-item {
        display: flex !important;
        flex-direction: column;
    }

        .users-list .user-item .mud-avatar {
            margin-left: auto;
            margin-right: auto;
        }

        .users-list .user-item .user-info {
            flex-direction: column;
        }

        .users-list .user-item .user-action {
            margin-top: 1rem;
        }

    .grid-list {
        grid-template-columns: unset !important;
    }

    .reflective .header {
        display: grid !important;
    }

    .reflective .settings {
        display: grid !important;
    }

    .reflective .information {
        display: grid !important;
    }

    .mud-table .mud-table-child-content .reflective {
        max-width: 100% !important;
    }

    .mud-table-body .mud-paper {
        width: 100%;
        display: flex !important;
        flex-direction: column;
    }

    .user-wallet {
        max-width: unset !important;
    }

    .tab-head-item {
        flex-wrap: wrap;
    }

        .tab-head-item .mud-picker-input-button {
            width: 100% !important;
        }

    .reflective-invoice-data {
        flex-direction: column !important;
    }

    .data-right {
        padding-left: unset !important;
        padding-right: unset !important;
        margin-top: 1rem !important;
        min-height: 700px;
    }

    .not-found-base64 {
        margin-left: 0 !important;
    }
}

.log-item {
    display: flex;
    background-color: #FAFAFA;
    border-radius: 12px;
    padding: 0.5rem;
}

.invoice-row {
    display: flex;
    gap: 10px;
}

    .invoice-row .reflective-invoice {
        width: 100%;
    }

.tab-data {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.invoice-row {
    align-items: stretch;
    height: 606px;
}

.invoice-card {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

.log-item-type {
    display: flex;
    margin-right: 1rem;
}

    .log-item-type .mud-avatar {
        margin-top: auto;
        margin-bottom: auto;
    }

.tab-fin-stats:last-of-type {
    margin-top: 1rem;
}

.log-data {
    display: flex;
}

    .log-data span:first-of-type {
        font-weight: 500;
        margin-right: 0.3rem;
    }

.log-data-description {
    margin-top: 0.3rem;
}

    .log-data-description span {
        display: block;
        /* ссылки/хэши без пробелов — рвём посимвольно, не по словам */
        overflow-wrap: anywhere;
    }

.log-data-date {
    margin-top: 0.3rem;
    display: flex;
}

    .log-data-date span:first-of-type {
        font-weight: 500;
    }

    .log-data-date span:last-of-type {
        margin-left: auto;
        font-weight: 500;
    }

.log-data span:last-of-type {
    margin-left: auto;
}

/* ===== Тёмная тема (body.mud-dark-theme) ===== */
body.mud-dark-theme {
    background-color: #121212;
    color: #f0f0f0;
    color-scheme: dark;
    --mud-palette-background: #121212;
    --mud-palette-background-gray: #181818;
    --mud-palette-appbar-background: #1a1a1a;
    --mud-palette-drawer-background: #1a1a1a !important;
    --mud-palette-surface: #1a1a1a;
    --mud-palette-overlay-dark: rgba(0, 0, 0, .5);
    --mud-selected: #202020;
    --mud-palette-drawer-text: #ffffff !important;
    --mud-palette-text-primary: #f0f0f0;
    --mud-palette-text-secondary: #b8b8b8;
    --mud-palette-text-disabled: #6e6e6e;
    --mud-palette-action-default: #b8b8b8;
    --mud-palette-action-default-hover: #2d2d2d;
    --mud-palette-action-disabled: rgba(255, 255, 255, .26);
    --mud-palette-action-disabled-background: rgba(255, 255, 255, .08);
    --mud-palette-divider: rgba(255, 255, 255, .14);
    --mud-palette-lines-default: rgba(255, 255, 255, .14);
    --mud-palette-lines-inputs: rgba(255, 255, 255, .3);
    --mud-palette-table-lines: rgba(255, 255, 255, .12);
    --mud-palette-table-striped: rgba(255, 255, 255, .03);
    --mud-palette-table-hover: rgba(255, 255, 255, .05);
    --mud-palette-drawer-icon: #cccccc !important;
    --mud-palette-gray-dark: #2d2d2d;
    --mud-palette-gray-darker: #1a1a1a;
    --mud-palette-gray-default: #3a3a3a;
    --mud-palette-gray-light: #4a4a4a;
    --mud-palette-gray-lighter: #5a5a5a;
    --mud-palette-skeleton: #2d2d2d;
    --mud-palette-dark: #121212;
    --mud-palette-dark-lighten: #2d2d2d;
    --mud-palette-dark-darken: #000000;
}

/* MudBlazor: поверхности */
body.mud-dark-theme .mud-drawer,
body.mud-dark-theme .mud-paper,
body.mud-dark-theme .mud-card,
body.mud-dark-theme .mud-expansion-panel,
body.mud-dark-theme .mud-dialog,
body.mud-dark-theme .mud-popover-paper,
body.mud-dark-theme .mud-menu-list,
body.mud-dark-theme .mud-list,
body.mud-dark-theme .mud-table,
body.mud-dark-theme .mud-simple-table,
body.mud-dark-theme .mud-picker-container,
body.mud-dark-theme .mud-date-picker {
    background-color: #1a1a1a;
    color: #f0f0f0;
}

/* Таблицы */
body.mud-dark-theme .mud-table thead th,
body.mud-dark-theme .mud-table tbody td,
body.mud-dark-theme .mud-table .mud-table-cell {
    background-color: transparent;
    color: #e6e6e6;
    border-bottom-color: rgba(255, 255, 255, .1);
}

body.mud-dark-theme .mud-table-hover .mud-table-row:hover {
    background-color: #242424 !important;
}

/* Sticky-колонки MudDataGrid: непрозрачный фон, иначе содержимое под ними просвечивает.
   NB: body НЕ имеет класса mud-dark-theme — селекторы без префикса. */
.mud-table .mud-table-cell.sticky-left,
.mud-table .mud-table-cell.sticky-right {
    background-color: #1a1a1a !important;
}

/* Поля ввода */
body.mud-dark-theme .mud-input,
body.mud-dark-theme .mud-input-control,
body.mud-dark-theme .mud-select-input {
    color: #f0f0f0;
}

body.mud-dark-theme .mud-input > input,
body.mud-dark-theme .mud-input > textarea,
body.mud-dark-theme input,
body.mud-dark-theme select,
body.mud-dark-theme textarea {
    color: #f0f0f0;
    caret-color: #f0f0f0;
}

body.mud-dark-theme .mud-input-outlined-border,
body.mud-dark-theme .mud-input-slot {
    border-color: rgba(255, 255, 255, .28) !important;
}

/* Фирменный золотой акцент на фильтрах сделок: бордер + лейбл при hover/focus */
.cards-header .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover .mud-input-outlined-border,
.cards-header .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border,
.cards-header .mud-select:focus-within .mud-input-outlined-border {
    border-color: #ffc400 !important;
}

.cards-header .mud-input:focus-within .mud-input-label,
.cards-header .mud-select:focus-within .mud-input-label {
    color: #ffc400 !important;
}

/* Постоянный золотой контур на фильтрах сделок и кнопке «Показать фильтры» */
body .cards-header .mud-input-outlined-border,
body .cards-header .rz-dropdown,
body .toggle-filters-btn {
    border-color: #ffc400 !important;
}

/* Radzen-дропдауны (Трейдер/Мерчант и т.п.) выше dense-инпутов MudBlazor:
   --rz-input-height ~51px против 40px. В строках фильтров приводим
   к общей высоте 40px — иначе контролы в одной строке «пляшут». */
.tab-head-item .rz-dropdown,
.cards-header .rz-dropdown,
.filter-container .rz-dropdown,
.filter-row .rz-dropdown,
.filters-row .rz-dropdown,
.extended-filters .rz-dropdown,
.log-filters .rz-dropdown {
    --rz-input-height: 40px;
    height: 40px !important;
    min-height: 40px !important;
}

/* Тумблер MudSwitch: кружок целиком внутри пилюли, а не свисает за край.
   Сток: трек 34x14, кружок 20px с ±3px выходом наружу — выглядел «съехавшим». */
.mud-switch-span.mud-switch-span-medium {
    padding: 8px 12px;
}

.mud-switch-span.mud-switch-span-medium .mud-switch-track {
    border-radius: 11px;
}

.mud-switch-base.mud-switch-base-medium {
    padding: 9px 12px;
}

.mud-switch-base.mud-checked {
    transform: translateX(14px);
}

body.mud-dark-theme .mud-input-label {
    color: #b8b8b8;
}

/* Ссылки */
body.mud-dark-theme a {
    color: #8ab4f8;
}

/* Radzen */
body.mud-dark-theme .rz-card,
body.mud-dark-theme .rz-dropdown,
body.mud-dark-theme .rz-dropdown-panel,
body.mud-dark-theme .rz-multiselect,
body.mud-dark-theme .rz-inputtext,
body.mud-dark-theme .rz-datatable,
body.mud-dark-theme .rz-grid-table,
body.mud-dark-theme .rz-calendar,
body.mud-dark-theme .rz-datepicker {
    background-color: #1a1a1a;
    color: #f0f0f0;
    border-color: rgba(255, 255, 255, .18);
}

body.mud-dark-theme .rz-grid-table td,
body.mud-dark-theme .rz-grid-table th,
body.mud-dark-theme .rz-dropdown-items li,
body.mud-dark-theme .rz-multiselect-item {
    color: #e6e6e6;
}

/* Прикладные блоки */
body.mud-dark-theme [class*="simple-stats"],
body.mud-dark-theme [class*="gray"],
body.mud-dark-theme [class*="mud-tab-active"],
body.mud-dark-theme [class*="mud-button-filled"],
body.mud-dark-theme [class*="profile"] {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

body.mud-dark-theme [class*="active"] {
    background-color: #202020 !important;
    color: #ffffff !important;
}

body.mud-dark-theme [class*="mud-nav-link"] {
    transition: background-color .22s !important;
}

/* === Tablet containment (≤960px): только сдерживание ширины, без компакта === */
@media (max-width: 960px) {
    body .mud-main-content { overflow-x: hidden; }
    body .mud-main-content > * { min-width: 0; }
    body .deals-list { max-width: 100%; overflow-x: auto; }
    body pre, body .api-keys-container pre { max-width: 100%; overflow-x: auto; }
    body .mud-tabs { max-width: 100% !important; overflow: hidden !important; }
    body .mud-tabs-panels, body .mud-tab-panel { min-width: 0; }
    body .mud-tabs-tabbar { overflow-x: auto !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    body .mud-tabs-tabbar::-webkit-scrollbar { display: none; }
    body .api-keys-container table { display: block; overflow-x: auto; }
    body .api-keys-container td, body .api-keys-container th { white-space: nowrap; }
    body .tab-head { flex-wrap: wrap; }
    body .tab-head-item { min-width: 0; }
    /* .tab-header: поле поиска на всю строку, кнопки переносятся без клипа */
    body .tab-header .mud-input-control,
    body .tab-header .input-confines {
        flex: 1 1 100%;
        min-width: 0;
    }
    body .tab-header > .mud-button-root,
    body .tab-header > .mud-button,
    body .tab-header button.mud-button-root {
        flex: 1 1 auto !important;
        max-width: 100%;
    }
    /* Drawer is an overlay here — expanded card spans almost full viewport */
    body .grid-expand-fit {
        max-width: calc(100vw - 32px);
    }
    /* Любой пикер/инпут в фильтр-рядах не должен вылезать за контейнер */
    body .filters-row .mud-picker,
    body .filters-row .mud-input-control,
    body .filter-row .mud-picker,
    body .filter-row .mud-input-control,
    body .filter-container .mud-picker,
    body .filter-container .mud-input-control {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    /* Radzen-дропдауны с inline min-width — перебиваем */
    body .filter-row .rz-dropdown,
    body .filter-container .rz-dropdown,
    body .filter-row .rz-multiselect,
    body .filter-container .rz-multiselect {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Поповер календаря — не шире экрана, с внутренним скроллом */
    body .mud-popover.mud-popover-open .mud-picker-content,
    body .mud-popover-open.mud-popover-overflow-flip-onopen .mud-picker-content,
    body .mud-picker-content {
        max-width: calc(100vw - 24px);
        overflow-x: auto;
    }
    /* Страховка: любой inline-пикер не шире родителя (диалоги, карточки) */
    body .mud-picker-inline,
    body .mud-picker-inline .mud-input-control {
        min-width: 0;
        max-width: 100%;
    }
    /* Статические таблицы (Топ-5 и пр.) — скролл внутри, не распирая страницу */
    body .mud-simple-table {
        max-width: 100%;
        overflow-x: auto;
    }
    body .mud-simple-table table {
        min-width: max-content;
    }
}

/* === Mobile overflow fixes (audit 17.10) === */
@media (max-width: 710px) {
    /* Шапка: компактный профиль — иконки вместо подписей, иначе 422px растягивает вьюпорт */
    body .header .profile {
        padding: 0.35rem 0.55rem;
        gap: 0.2rem;
    }
    body .header .profile .deposit .mud-button-label,
    body .header .profile .withdraw .mud-button-label {
        display: none !important;
    }
    body .header .profile .mud-button {
        min-width: 34px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* Табы: скролл внутри, а не распирание страницы */
    body .mud-tabs {
        max-width: 100% !important;
        overflow: hidden !important;
    }
    body .mud-tabs-tabbar {
        overflow-x: auto !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    body .mud-tabs-tabbar::-webkit-scrollbar { display: none; }

    /* Пикеры диапазона дат */
    body .tab-head-item .mud-picker-inline,
    body .tab-head-item .tab-range-picker,
    body .tab-head-item .mud-picker,
    body .tab-range-picker {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body .tab-head-item .mud-picker .mud-input-control {
        width: 100% !important;
        max-width: 100% !important;
    }

    body .tab-range-picker,
    body .tab-range-picker .mud-input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    body .tab-range-picker .mud-input-slot,
    body .tab-range-picker input {
        min-width: 0 !important;
        width: 100% !important;
        font-size: 12px !important;
    }
    body .tab-range-picker .mud-input-adornment {
        min-width: 0 !important;
        margin-inline-start: 4px !important;
    }
    body .tab-head {
        flex-wrap: wrap;
    }
    body .tab-head-item {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Поисковые поля в тулбарах */
    body .search-field {
        min-width: 0 !important;
        flex: 1 1 140px !important;
    }

    /* Шапка сделок: фильтры в столбик, иначе select'ы сжимаются в таблетки */
    body .cards-header {
        flex-wrap: wrap;
        align-items: stretch;
        gap: 10px;
    }
    body .cards-header > * {
        flex: 1 1 100%;
        min-width: 0 !important;
        width: 100%;
        max-width: 100% !important;
    }
    body .cards-header .mud-input-control,
    body .cards-header .rz-dropdown,
    body .cards-header input {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Тулбар «Фильтр по трейдеру» (Pay-Out/WithdrawalDataViewer): label+dropdown в столбик */
    body .filter-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    body .filter-container .filter-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        min-width: 0;
    }
    body .filter-container .filter-item > span {
        margin-right: 0;
    }
    body .filter-container .filter-item .rz-dropdown,
    body .filter-container .filter-item .mud-input-control,
    body .filter-container .rz-dropdown {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Кнопка «Показать фильтры» — на всю ширину, удобный тач-таргет */
    body .toggle-filters-btn {
        width: 100%;
    }

    /* Диалоги не должны вылезать за экран телефона */
    body .mud-dialog {
        max-width: calc(100vw - 16px) !important;
        margin: 8px !important;
    }
    body .mud-dialog .mud-dialog-content {
        overflow-x: hidden;
    }

    /* Radzen-поповеры (dropdown-панели) в пределах экрана */
    body .rz-popup,
    body .rz-selectpanel {
        max-width: calc(100vw - 24px) !important;
    }

    /* Фильтры уведомлений: поля на всю ширину */
    body .bo-notif-filter-row {
        flex-direction: column;
        align-items: stretch;
    }
    body .bo-notif-field {
        min-width: 0;
        width: 100%;
    }
    body .bo-notif-field input {
        width: 100%;
        min-width: 0;
    }

    /* Панели тулбаров: поиск и селекты во всю ширину */
    body .bo-panel-toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    body .bo-search-field {
        max-width: none;
        width: 100%;
        min-width: 0;
    }
    body .bo-select {
        width: 100%;
        min-width: 0;
    }
    body .bo-notif-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    body .bo-notif-search {
        min-width: 0;
        max-width: none;
    }

    /* Снакбар: не шире экрана */
    body .mud-snackbar-location-top-center {
        left: 8px !important;
        right: 8px !important;
        transform: none !important;
        align-items: stretch;
    }
    body .mud-snackbar {
        max-width: calc(100vw - 16px) !important;
        width: 100%;
    }

    /* Таблицы в api_docs и прочие статические таблицы — скролл контейнера */
    body .api-keys-container table {
        display: block;
        overflow-x: auto;
    }
    body .api-keys-container td, .api-keys-container th { white-space: nowrap; }

    /* Списки карточек-сделок — уже имеют overflow-x в .deals-list; гарантируем */
    body .deals-list { max-width: 100%; }

    /* Страховка: любой grid/flex контейнер не должен распирать body */
    body .mud-main-content { overflow-x: hidden; }
    body .mud-main-content > * { min-width: 0; }
}

/* Шапка фильтров выводов (WithdrawalDataViewer): лейбл+дропдаун+кнопка
   в одну строку, по центру друг друга — иначе div'ы стэкались вертикально
   и «Фильтр по трейдеру» висел выше дропдауна */
.filter-container {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.filter-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.filter-item > span { white-space: nowrap; }

/* Кнопка «Показать фильтры» в тулбаре выводов — та же высота 40px,
   что и Radzen-дропдаун рядом; убираем её базовый margin-bottom */
.filter-container .toggle-filters-btn {
    margin-bottom: 0;
    height: 40px;
    align-self: center;
}

/* Тулбары таблиц (Аудит и др.): поля поиска/периода — единая ширина,
   пикер не занимает полстроки */
@media (min-width: 769px) {
    .mud-table-tool .mud-input-control {
        flex: 0 0 340px !important;
        width: 340px !important;
        max-width: 340px !important;
    }
}
@media (max-width: 768px) {
    .mud-table-tool .mud-input-control {
        width: 100% !important;
        max-width: none !important;
    }
}

/* Тулбары панелей (Уведомления и др.): на десктопе поля — в одну строку.
   ≤710px остаётся мобильная колонка из медиа ниже. */
@media (min-width: 711px) {
    .bo-panel-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
    }
}

@media (max-width: 710px) {
    /* Поповер календаря не должен уезжать за правый край экрана */
    body .mud-popover:has(.mud-picker-calendar-container),
    body .mud-popover:has(.mud-picker-inline-paper) {
        left: 8px !important;
        right: 8px !important;
        max-width: calc(100vw - 16px) !important;
        overflow-x: auto !important;
    }

    /* Range-picker: два слота-инпута делят контейнер поровну */
    body .tab-range-picker .mud-input-slot,
    body .tab-range-picker .mud-input-slot input {
        flex: 1 1 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        font-size: 12px !important;
    }
    body .tab-range-picker .mud-input-adornment {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }
}

/* Блокировка: у MudBlazor.min.css svg-иконки наследуют intrinsic-размер и ломают таблицы/карточки */
.mud-icon-root,
.mud-svg-icon {
    width: 1em;
    height: 1em;
}

/* Стрелка сортировки в шапке MudDataGrid — это MudIconButton, у которого на
   :hover/:focus-visible появляется тёмный круг (action-default-hover).
   На тёмной теме выглядит как пятно — убираем фон, ховер остаётся через
   родное правило opacity/color у column-header. */
.mud-data-grid .column-header .sort-direction-icon.mud-icon-button,
.mud-data-grid .column-header .sort-direction-icon.mud-icon-button:hover,
.mud-data-grid .column-header .sort-direction-icon.mud-icon-button:active,
.mud-data-grid .column-header .sort-direction-icon.mud-icon-button:focus-visible {
    background-color: transparent;
}

@media (max-width: 959.98px) {
    .mud-layout .mud-drawer-fixed.mud-drawer--closed {
        display: none;
    }

    .mud-drawer-open-mini-md-left .mud-main-content,
    .mud-drawer-close-mini-md-left .mud-main-content {
        margin-left: unset !important;
    }

    .header-menu {
        display: block;
    }

    .mud-main-content {
        padding-top: 56px;
    }
}

/* Invoice IDs: labeled, click-to-copy */
.deal-col-id { flex: 0 0 130px; }

/* Sticky actions column — always reachable without scrolling right */
.deal-col-actions {
    position: sticky;
    right: 0;
    z-index: 3;
    background-color: #151515;
    box-shadow: -6px 0 8px -6px rgba(0, 0, 0, .6);
}

.deal-row:hover .deal-col-actions {
    background-color: #1c1c1c;
}

.deal-row-head .deal-col-actions {
    background-color: transparent;
    box-shadow: none;
}

.deal-id, .deal-uuid {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: visible;
}

.deal-id-label {
    flex: 0 0 auto;
    font-family: inherit;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    opacity: .85;
}

.deal-id-value[data-copy-text] {
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.deal-id-value[data-copy-text]:hover {
    text-decoration: underline dotted;
    opacity: 1;
}

/* Мобильный drawer: NavMenu рендерится статично, открытие делает
   window.highpayNav (body.hp-nav-open + классы mud-drawer--open/--closed). */
.hp-nav-backdrop {
    display: none;
}

@media (max-width: 959.98px) {
    /* SSR рендерит drawer открытым (_drawerOpen=true для десктопных UA) —
       до срабатывания highpayNav.close() прячем его, пока нет body.hp-nav-open */
    body:not(.hp-nav-open) .mud-layout .mud-drawer-fixed {
        display: none !important;
    }

    body.hp-nav-open .mud-layout .mud-drawer-fixed {
        display: block !important;
        z-index: 1300;
    }

    body.hp-nav-open .hp-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .55);
        z-index: 1299;
    }
}

/* === Календарь: компактная шапка + округлые дни (апдейт 20.10) === */

/* Стоковый .mud-picker-toolbar высотой 100px + паддинги 2.125rem —
   кнопка выбранной даты ("Сб, 19 окт. — Вс, 20 окт.") переносилась
   на две строки и раздувала шапку календаря. Теперь шапка компактная:
   все кнопки в ряд, выравнивание по базовой линии текста. */
.mud-picker-datepicker-toolbar {
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 10px;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 16px !important;
}

.mud-picker-datepicker-toolbar .mud-button-root {
    padding: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.2 !important;
    border-radius: 6px;
}

.mud-picker-datepicker-toolbar .mud-button-year {
    font-size: .95rem !important;
    font-weight: 500 !important;
    opacity: .75;
}

.mud-picker-datepicker-toolbar .mud-button-date {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

/* Контент календаря: компактные поля. justify-content оставляем стоковый
   (center) — flex-start прижимал календарь к верху и оставлял пустую
   половину поповера снизу. */
.mud-popover .mud-picker-container .mud-picker-content {
    padding: 4px 8px 12px;
}

/* Отступы у стрелок/переключателя в заголовке */
.mud-picker-calendar-header-switch {
    margin-top: 2px;
    margin-bottom: 4px;
}
.mud-picker-calendar-header-switch > .mud-icon-button {
    padding: 6px;
    margin: 2px;
}

/* Сетка дней: небольшой отступ от шапки календаря */
.mud-picker-calendar-transition {
    margin-top: 6px;
}

/* Шапка дней недели по центру. Радиус дней НЕ трогаем: у дней
   «между» диапазоном сток даёт border-radius:0 — они сливаются в
   непрерывную полосу выделения. Принудительный radius разбивал её
   на отдельные таблетки и ломал круг выбранного дня. */
.mud-picker-calendar-header {
    justify-content: center;
}

/* Жёсткая сетка дней: шаг = 40px (36px + margin 2×2), у дней диапазона
   40px + margin 0 — совпадает с колонками пн–вс. Раньше наши правила
   кнопок/отступов могли сжать дни до ~24px — в строку влезало 14 дат,
   сетка плыла вправо относительно заголовка. */
.mud-picker-calendar .mud-day,
.mud-picker-calendar .mud-picker-calendar-day {
    width: 36px !important;
    min-width: 36px !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin-left: 2px !important;
    margin-right: 2px !important;
}

.mud-picker-calendar .mud-day.mud-range,
.mud-picker-calendar .mud-picker-calendar-day.mud-range {
    width: 40px !important;
    min-width: 40px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ширина сетки = ровно 7 колонок — при более широком поповере flex-wrap
   начинал укладывать по 8–14 дней в строку и календарь распадался */
.mud-picker-calendar {
    max-width: 288px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* === Критичные системные слои: реконнект и fatal error ===
   blazor.web.js создаёт оверлей реконнекта со z-index 10000 — под нашими
   диалогами (100000) и кастомными оверлеями (100500): при разрыве circuit
   баннер "повторное подключение" прятался за открытой модалкой. Поднимаем
   выше снакбара — сообщение о падении приложения важнее любых тостов. */
.components-reconnect-overlay {
    z-index: 10000600 !important;
}
.components-reconnect-dialog {
    z-index: 10000601 !important;
}

/* #blazor-error-ui — фреймворк ставит display:block при фатальной ошибке
   circuit (blazor.web.js). Разметка в App.razor, стили глобальные — scoped-
   блок в MainLayout.razor.css был мёртвым: элемент не принадлежит
   MainLayout и его scope-атрибут туда не доходит. */
#blazor-error-ui {
    color-scheme: light only;
    background: #fff3cd;
    color: #5f4d00;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 10000600;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
}

#blazor-error-ui .reload {
    color: #1a5fb4;
    margin-left: 8px;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    color: #5f4d00;
    text-decoration: none;
    font-size: 18px;
    line-height: 1;
}