/* ============================================================
   UI Settings — font family, font size, control size
   ============================================================ */

:root {
    --app-font-family: 'Roboto', sans-serif;
    --app-font-size: 15px;
    --app-font-weight: 400;

    /* Header navigation */
    --nav-height:       40px;
    --nav-font-size:    12.5px;
    --nav-item-padding: 10px;
    --nav-icon-size:    13px;
    --nav-gap:          5px;
    --nav-border-radius: 14px;

    /* Out-pay action buttons */
    --out-btn-radius:        10px;
    --out-btn-padding:       4px 8px;
    --out-btn-font-size:     0.72rem;

    --out-btn-confirm-bg:     #e8f5ed;
    --out-btn-confirm-color:  #246b40;
    --out-btn-confirm-border: #a8d8b8;
    --out-btn-confirm-hover:  #d4edde;

    --out-btn-cancel-bg:      #fce8e8;
    --out-btn-cancel-color:   #922b2b;
    --out-btn-cancel-border:  #f0b8b8;
    --out-btn-cancel-hover:   #f8d5d5;
}

/* ============================================================
   Out-pay action buttons (global, used in dashboard + preview)
   ============================================================ */

.out-btn {
    flex: 1;
    padding: var(--out-btn-padding);
    border-radius: var(--out-btn-radius);
    font-size: var(--out-btn-font-size);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
    border: 1px solid transparent;
}

.out-btn-confirm {
    background: var(--out-btn-confirm-bg);
    color: var(--out-btn-confirm-color);
    border-color: var(--out-btn-confirm-border);
}
.out-btn-confirm:hover {
    background: var(--out-btn-confirm-hover);
}

.out-btn-cancel {
    background: var(--out-btn-cancel-bg);
    color: var(--out-btn-cancel-color);
    border-color: var(--out-btn-cancel-border);
}
.out-btn-cancel:hover {
    background: var(--out-btn-cancel-hover);
}

/* Dark theme — uses user's chosen color but darkened, so it adapts to dark bg */
html.app-dark .out-btn-confirm,
html.app-dark .out-btn-cancel {
    filter: brightness(0.72) saturate(0.85);
}
html.app-dark .out-btn-confirm:hover,
html.app-dark .out-btn-cancel:hover {
    filter: brightness(0.62) saturate(0.85);
}

/* Color swatch chips for settings preview */
.out-color-swatch {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.1s;
    user-select: none;
}
.out-color-swatch:hover { transform: scale(1.05); }
.out-color-swatch-active { border-color: #1976d2 !important; box-shadow: 0 0 0 2px rgba(25,118,210,0.3); }

body,
.mud-typography,
.mud-button-root,
.mud-input-root,
.mud-select-input,
.mud-table-cell,
.mud-chip,
.mud-expansion-panel-text {
    font-family: var(--app-font-family) !important;
    font-size: var(--app-font-size);
}

/* Bold text — applied only when --app-font-weight > 400 */
body { font-weight: var(--app-font-weight); }
.mud-typography { font-weight: var(--app-font-weight); }

/* Compact controls */
html.controls-compact .mud-button-root          { padding: 2px 10px !important; min-height: 26px !important; font-size: 0.78rem !important; }
html.controls-compact .mud-input-root           { padding: 2px 8px !important; }
html.controls-compact .mud-table-cell           { padding: 4px 8px !important; }
html.controls-compact .mud-expansion-panel-header { min-height: 36px !important; padding: 4px 12px !important; }
html.controls-compact .mud-switch-base          { transform: scale(0.8); }

/* Default controls — MudBlazor defaults, nothing to override */

/* Comfortable controls */
html.controls-comfortable .mud-button-root          { padding: 10px 22px !important; min-height: 48px !important; font-size: 1rem !important; }
html.controls-comfortable .mud-input-root           { padding: 10px 14px !important; }
html.controls-comfortable .mud-table-cell           { padding: 12px 16px !important; }
html.controls-comfortable .mud-expansion-panel-header { min-height: 56px !important; padding: 10px 20px !important; }
html.controls-comfortable .mud-switch-base          { transform: scale(1.15); }

/* ============================================================ */

.demo-drawer .dxbl-drawer-content {
    font-size: var(--dxbl-drawer-panel-font-size);
    line-height: var(--dxbl-drawer-panel-line-height);
    overflow: auto;
    padding: var(--dxbl-drawer-panel-padding-y) var(--dxbl-drawer-panel-padding-x);
}

.demo-drawer:has(.demo-drawer-menu) {
    --dxbl-drawer-panel-body-padding-x: 0;
    --dxbl-drawer-panel-body-padding-y: 0;
}

.dxbl-menu.demo-drawer-menu {
    --dxbl-menu-item-padding-x: 0.9375rem;
    --dxbl-menu-top-left-border-radius: 0;
    --dxbl-menu-top-right-border-radius: 0;
    --dxbl-menu-bottom-left-border-radius: 0;
    --dxbl-menu-bottom-right-border-radius: 0;
}

.dxbl-sm .dxbl-menu.demo-drawer-menu {
    --dxbl-menu-item-padding-x: 0.8125rem;
}

.dxbl-lg .dxbl-menu.demo-drawer-menu {
    --dxbl-menu-item-padding-x: 1.0625rem;
}

.NavigationBack {
    background: whitesmoke;
    color: black
}

.stacklayout-item {
    font-size: 0.8em;
    font-weight: 500;
    text-align: center;
    height: 100%;
    padding: 0.1rem;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stacklayout-item:before {
    content: " ";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.12;
}

.stacklayout-header:before {
    background-color: var(--bs-red);
}

.stacklayout-content:before {
    background-color: var(--bs-yellow);
}

.stacklayout-left-side-bar:before {
    background-color: var(--bs-green);
}

.stacklayout-right-side-bar:before {
    background-color: var(--bs-info);
}

.stacklayout-footer:before {
    background-color: var(--bs-blue);
    opacity: 0.5;
}

/* Overview nav */
.dxbl-menu-item-tmpl {
    display: flex;
    align-items: center;
}

.notoggle svg {
    display: none;
}

.dxbl-menu-item .search {
    min-width: 123px
}

.dxbl-menu-item-tmpl > .search {
    position: relative;
}

.user-profile .logo-container {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.user-profile .log-off-btn {
    padding-top: 0.815rem;
    padding-bottom: 0.815rem;
    border-top: 1px solid #e5e5e5;
}

.menu-icon-user-profile {
    opacity: 0.75;
    background-image: url("/images/Account.png");
    -webkit-mask-image: url("/images/Account.png");
}

.user-profile .menu-icon-user-profile {
    opacity: 0.25;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
}

.menu-icon-large {
    width: 8rem;
    height: 8rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    background-image: url("/images/Account.png");
    -webkit-mask-image: url("/images/Account.png");
}

.user-name-container .tm-8 {
    opacity: 0.8;
}

.menu-icon {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    max-width: 10rem;
    max-height: 10rem;
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.7;
}


/* Overview nav */

/*Логин страница*/
.position-relative {
    position: relative;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
}

.password-toggle-btn i {
    font-size: 1.5rem; /* Размер иконки */
}

.auth-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 30vh;
    background-color: transparent;
}

.auth-card {
    width: 680px;
    max-width: 90%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Тень для выделения */
    border-radius: 8px; /* Скругленные углы */
}

/*Логин страница*/

/*Страница подтверждения*/
.container-mobile {
    max-width: 80%; /* Увеличиваем ширину контейнера */
    margin: 0 auto; /* Центрируем по горизонтали */
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: linear-gradient(to bottom, #f9f9f9, #e6e6e6); /* Градиентный фон */
}

.container-desktop {
    max-width: 60%; /* Увеличиваем ширину контейнера */
    margin: 0 auto; /* Центрируем по горизонтали */
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: linear-gradient(to bottom, #f9f9f9, #e6e6e6); /* Градиентный фон */
}

.confirmation-box {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}


/*Страница подтверждения*/

/*Увеличение картинки оплаты*/
.exampletransfer {
    display: block;
    width: 200px;
    height: 200px;
    background-image: url('/images/Transfers/example_transfer_card.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.exampletransfer-hovering {
    display: block;
    width: 200px;
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/images/Transfers/example_transfer_card.png');
    transform: scale(4.0);
}

/*Увеличение картинки*/

/*Blur*/
.blur-effect {
    backdrop-filter: blur(10px);
    -webkit-filter: blur(8px);
    /*filter: blur(8px);*/
}

/*Blur*/


/*Toogle switcher*/
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 24px;
    /*width: 60px;
    height: 34px;*/
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
    /*Фиолетовый 9c33ff*/
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(36px);
    -ms-transform: translateX(36px);
    transform: translateX(36px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Основные стили для Toggle Button */
.toggle-button {
    display: inline-block;
    position: relative;
    width: 60px;
    height: 30px;
    background-color: #ccc; /* Цвет для выключенного состояния */
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.toggle-button.active {
    background-color: #4CAF50; /* Цвет для включенного состояния */
}

.toggle-button:before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.toggle-button.active:before {
    transform: translateX(30px); /* Двигаем круг вправо при включении */
}

/* Дополнительные стили для кнопки */
.toggle-button {
    border: none;
    outline: none;
    box-shadow: none;
}

/*Toogle switcher*/

/* =====================================================
   SignalR connection overlay
   ===================================================== */
.signalr-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 8, 45, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: signalr-fadein 0.25s ease;
}

@keyframes signalr-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.signalr-card {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 24px;
    padding: 44px 52px 36px;
    text-align: center;
    box-shadow: 0 12px 60px rgba(40, 20, 80, 0.28), 0 2px 12px rgba(0,0,0,0.10);
    min-width: 280px;
    max-width: 360px;
    animation: signalr-slidein 0.3s cubic-bezier(.22,.68,0,1.2);
}

@keyframes signalr-slidein {
    from { transform: translateY(28px) scale(0.95); opacity: 0; }
    to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

.signalr-spinner-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signalr-ring {
    position: absolute;
    inset: 0;
    border: 4px solid #ede9f8;
    border-top-color: #3b2a6e;
    border-radius: 50%;
    animation: signalr-spin 0.85s linear infinite;
}

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

.signalr-shield-icon {
    font-size: 1.9rem;
    color: #3b2a6e;
    position: relative;
    z-index: 1;
}

.signalr-brand {
    font-size: 1.35rem;
    font-weight: 700;
    color: #2e2a45;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.signalr-text {
    color: #6b6490;
    font-size: 0.85rem;
    margin: 0 0 18px;
    line-height: 1.45;
}

.signalr-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.signalr-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3b2a6e;
    opacity: 0.25;
    animation: signalr-dot 1.2s ease-in-out infinite;
}

.signalr-dots span:nth-child(2) { animation-delay: 0.2s; }
.signalr-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes signalr-dot {
    0%, 80%, 100% { opacity: 0.20; transform: scale(0.85); }
    40%            { opacity: 1;    transform: scale(1.15); }
}

/* =====================================================
   Тёмная тема — SignalR overlay и прочие элементы
   ===================================================== */
html.app-dark .signalr-overlay {
    background: rgba(1, 4, 9, 0.75);
}

html.app-dark .signalr-card {
    background: rgba(13, 17, 23, 0.97);
    box-shadow: 0 12px 60px rgba(0,0,0,0.6), 0 2px 12px rgba(0,0,0,0.4);
}

html.app-dark .signalr-brand {
    color: #c9d1d9;
}

html.app-dark .signalr-text {
    color: #8b949e;
}

html.app-dark .signalr-ring {
    border-color: #30363d;
    border-top-color: #58a6ff;
}

html.app-dark .signalr-shield-icon {
    color: #58a6ff;
}

html.app-dark .signalr-dots span {
    background: #58a6ff;
}