/* Sticky footer: html/body заполняют viewport, цепочка flex до layout roots. */
html,
body {
    min-height: 100vh;
}

body {
    display: flex;
    flex-direction: column;
}

/*
 * CRITICAL: never force display on body > :first-child.
 * MudThemeProvider injects <style> as early body children. Author CSS that sets
 * display:flex on :first-child overrides the UA rule style{display:none} and
 * paints CSS source as visible page text (chart rules, theme variables, etc.).
 */
body > style,
body > script {
    display: none !important;
}

/* Layout roots that fill the viewport (not Mud providers / style injectors). */
body > .mud-layout,
body > .b2b-main-layout {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Setup/auth shell already sets min-height:100vh; only participate in body flex. */
body > .setup-onboarding-shell {
    flex: 1 1 auto;
}

/* Фиксируем sticky-footer поведение для основного layout без CSS isolation. */
.b2b-main-layout {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto;
    min-height: 0;
    /*
     * Mini drawer width must match MainLayout MiniWidth="72px" / Width="236px".
     * Template _mud.scss forces 240px mini width, which breaks MudMainContent
     * left offset: tooltips/FABs collide with the side nav.
     */
    --mud-drawer-width-mini-left: 72px !important;
    --mud-drawer-width-left: 236px !important;
}

.b2b-main-layout .b2b-main-content {
    flex: 1 1 auto;
    /* Let MudLayout manage drawer offset; keep content above drawer chrome for popovers */
    position: relative;
    z-index: 1;
    min-width: 0;
}

/* Popovers/tooltips from main content must not sit under the staff drawer */
.b2b-main-layout .mud-popover,
.b2b-main-layout .mud-tooltip {
    z-index: calc(var(--mud-zindex-appbar) + 20) !important;
}

/* Связываем шаблонные переменные с MudTheme, чтобы глобальный CSS не гасил выбранную палитру. */
body {
    /* Восстанавливаем управление палитрой через MudThemeProvider (styles.css шаблона не должен затирать цвета). */
    --mud-palette-background: inherit !important;
    --mud-palette-surface: inherit !important;
    --mud-palette-text-primary: inherit !important;
    --mud-palette-text-secondary: inherit !important;
    --mud-palette-appbar-background: inherit !important;
    --mud-palette-appbar-text: inherit !important;
    --mud-palette-drawer-background: inherit !important;
    --mud-palette-drawer-text: inherit !important;
    --mud-palette-drawer-icon: inherit !important;
    --mud-palette-divider: inherit !important;
    --mud-palette-lines-default: inherit !important;
    --mud-palette-primary: inherit !important;
    --mud-palette-secondary: inherit !important;
    --mud-palette-warning: inherit !important;
    --mud-palette-info: inherit !important;
    --mud-palette-success: inherit !important;
    --mud-palette-error: inherit !important;
    /* Do not lock action/icon greys; MudTheme + dark-mode overrides handle visibility */
    --mud-palette-action-default: inherit !important;
    --mud-palette-action-default-hover: inherit !important;
    --mud-palette-action-disabled: inherit !important;
    --mud-palette-action-disabled-background: inherit !important;

    /* Проксируем template-переменные в Mud-палитру, чтобы настройки темы влияли и на legacy CSS шаблона. */
    --primary-rgb: var(--mud-palette-primary-rgb) !important;
    --secondary-rgb: var(--mud-palette-secondary-rgb) !important;
    --warning-rgb: var(--mud-palette-warning-rgb) !important;
    --info-rgb: var(--mud-palette-info-rgb) !important;
    --success-rgb: var(--mud-palette-success-rgb) !important;
    --danger-rgb: var(--mud-palette-error-rgb) !important;
    --dark-rgb: var(--mud-palette-dark-rgb) !important;
    --menu-bg: var(--mud-palette-drawer-background) !important;
    --menu-prime-color: var(--mud-palette-drawer-text) !important;
    --menu-border-color: var(--mud-palette-lines-default) !important;
    --header-bg: var(--mud-palette-appbar-background) !important;
    --header-prime-color: var(--mud-palette-appbar-text) !important;
    --header-border-color: var(--mud-palette-lines-default) !important;
    --default-body-bg-color: var(--mud-palette-background) !important;
    --default-background: var(--mud-palette-background-gray, var(--mud-palette-surface)) !important;
    --input-border: var(--mud-palette-lines-inputs) !important;
    --list-hover-focus-bg: var(--mud-palette-action-default-hover) !important;
    --bootstrap-card-border: var(--mud-palette-lines-default) !important;

    --custom-white: var(--mud-palette-surface);
    --default-text-color: var(--mud-palette-text-primary);
    --text-muted: var(--mud-palette-text-secondary);
    --default-border: var(--mud-palette-lines-default);
    --form-control-bg: var(--mud-palette-surface);

    background-color: var(--mud-palette-background) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Z-index не фиксируем числом: overlay временного drawer = calc(appbar + 1), панель = appbar + 2 (см. MudBlazor). 1200 оказывалось НИЖЕ overlay при AppBar=1300. */
.b2b-main-layout .b2b-staff-drawer {
    top: 108px !important;
    height: calc(100% - 108px) !important;
    z-index: calc(var(--mud-zindex-appbar) + 2) !important;
    background-color: var(--mud-palette-drawer-background) !important;
    color: var(--mud-palette-drawer-text) !important;
}

.b2b-main-layout .b2b-header-appbar.b2b-header-appbar--compact ~ .b2b-staff-drawer {
    top: 64px !important;
    height: calc(100% - 64px) !important;
}

.b2b-main-layout .b2b-staff-drawer.mud-drawer-mini:not(.mud-drawer--open) .mud-nav-link {
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.b2b-main-layout .b2b-staff-drawer.mud-drawer-mini:not(.mud-drawer--open) .mud-nav-link-icon {
    margin-inline-end: 0;
    color: var(--mud-palette-drawer-text) !important;
}

.b2b-main-layout .b2b-staff-drawer .mud-nav-link-icon {
    color: var(--mud-palette-drawer-text) !important;
}

.b2b-main-layout .b2b-staff-drawer .mud-nav-link,
.b2b-main-layout .b2b-staff-drawer .mud-nav-link-text,
.b2b-main-layout .b2b-staff-drawer .mud-typography {
    color: var(--mud-palette-drawer-text) !important;
}

.b2b-main-layout .b2b-staff-nav-menu .mud-nav-link {
    border-radius: 8px;
}

.b2b-main-layout .b2b-staff-nav-menu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: var(--mud-palette-action-default-hover) !important;
}

.b2b-main-layout .mud-main-content h1,
.b2b-main-layout .mud-main-content h2,
.b2b-main-layout .mud-main-content h3,
.b2b-main-layout .mud-main-content h4,
.b2b-main-layout .mud-main-content h5,
.b2b-main-layout .mud-main-content h6,
.b2b-main-layout .mud-main-content .mud-typography {
    color: var(--mud-palette-text-primary) !important;
}

.b2b-main-layout .mud-main-content .mud-secondary-text,
.b2b-main-layout .mud-main-content .text-muted {
    color: var(--mud-palette-text-secondary) !important;
}

/* В mini-режиме оставляем только иконки, чтобы меню выглядело как в ТЗ. */
.b2b-main-layout .b2b-staff-drawer.mud-drawer-mini:not(.mud-drawer--open) .mud-nav-link-text,
.b2b-main-layout .b2b-staff-drawer.mud-drawer-mini:not(.mud-drawer--open) .mud-typography,
.b2b-main-layout .b2b-staff-drawer.mud-drawer-mini:not(.mud-drawer--open) .mud-divider,
.b2b-main-layout .b2b-staff-drawer.mud-drawer-mini:not(.mud-drawer--open) .mt-auto {
    display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Global thin scrollbars (replaces MudThemeProvider scrollbar injection).    */
/* MudThemeProvider uses DefaultScrollbar=true so it does NOT emit a body     */
/* <style> that can leak as visible text under Interactive Server.            */
/* -------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    z-index: 1;
}

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

::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 1px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a6a6a6;
}

html,
body,
body * {
    scrollbar-color: #c4c4c4 transparent;
    scrollbar-width: thin;
}

/* -------------------------------------------------------------------------- */
/* First-setup / auth shell (SetupLayout) — keep out of Razor <style> blocks  */
/* so CSS never leaks as visible text during Blazor interactive render.       */
/* -------------------------------------------------------------------------- */
.setup-onboarding-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(1200px 500px at 10% -10%, color-mix(in srgb, var(--mud-palette-primary, #1976d2) 14%, transparent), transparent 60%),
        radial-gradient(900px 420px at 100% 0%, color-mix(in srgb, var(--mud-palette-info, #0288d1) 12%, transparent), transparent 55%),
        #f4f6f8;
}

.setup-onboarding-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, #000 8%, transparent);
    background: color-mix(in srgb, #fff 92%, transparent);
    backdrop-filter: blur(8px);
    flex-wrap: nowrap;
    min-width: 0;
}

.setup-onboarding-brand {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.setup-onboarding-subtitle {
    color: var(--mud-palette-text-secondary, #666);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Keep theme/language/tenant controls on one row (RU labels must not wrap under brand). */
.setup-onboarding-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    min-width: 0;
}

.setup-onboarding-header-actions .setup-header-tenant-chip.mud-chip {
    max-width: 7.5rem;
    overflow: hidden;
}

.setup-onboarding-header-actions .setup-header-tenant-chip .mud-chip-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.setup-onboarding-header-actions .setup-header-icon-btn {
    flex-shrink: 0;
}

.setup-onboarding-header-actions .setup-header-lang-chip.mud-chip {
    min-width: 0;
    height: 1.75rem;
    padding-inline: 0.4rem;
}

.setup-onboarding-header-actions .mud-menu,
.setup-onboarding-header-actions [data-testid="language-switcher"] {
    flex-shrink: 0;
}

@media (max-width: 420px) {
    .setup-onboarding-header {
        padding: 0.65rem 0.75rem;
        gap: 0.5rem;
    }

    .setup-onboarding-header-actions .setup-header-tenant-chip {
        display: none;
    }
}

.setup-onboarding-content {
    flex: 1;
    padding: 1.25rem 1rem 2rem;
    max-width: 1040px;
    margin: 0 auto;
    width: 100%;
}

.setup-onboarding-shell[data-mode="auth"] .setup-onboarding-content {
    max-width: 520px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.setup-onboarding-footer {
    padding: 0.85rem 1rem;
    border-top: 1px solid color-mix(in srgb, #000 8%, transparent);
    background: color-mix(in srgb, #fff 92%, transparent);
    text-align: center;
    color: var(--mud-palette-text-secondary, #666);
    font-size: 0.75rem;
}

.setup-wizard-root .setup-step-panel {
    min-width: 0;
}

/* -------------------------------------------------------------------------- */
/* Setup shell dark theme + high-tech module picker                           */
/* -------------------------------------------------------------------------- */
.setup-onboarding-shell[data-theme="dark"] {
    background:
        radial-gradient(1200px 500px at 10% -10%, color-mix(in srgb, var(--mud-palette-primary, #7c6cf0) 22%, transparent), transparent 60%),
        radial-gradient(900px 420px at 100% 0%, color-mix(in srgb, var(--mud-palette-info, #29b6f6) 16%, transparent), transparent 55%),
        #0f1419;
    color: var(--mud-palette-text-primary, #e8eaed);
}

.setup-onboarding-shell[data-theme="dark"] .setup-onboarding-header,
.setup-onboarding-shell[data-theme="dark"] .setup-onboarding-footer {
    background: color-mix(in srgb, #121820 92%, transparent);
    border-color: color-mix(in srgb, #fff 10%, transparent);
}

.setup-onboarding-shell[data-theme="dark"] .setup-onboarding-subtitle,
.setup-onboarding-shell[data-theme="dark"] .setup-onboarding-footer {
    color: var(--mud-palette-text-secondary, #9aa0a6);
}

.setup-module-chip.mud-chip {
    max-width: min(100%, 16rem);
    overflow: hidden;
}

.setup-module-chip.mud-chip .mud-chip-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
}

.setup-module-card {
    position: relative;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default, #cfd8dc) 80%, transparent);
    background: color-mix(in srgb, var(--mud-palette-surface, #fff) 96%, transparent);
    overflow: hidden;
    transition:
        border-color 0.35s ease,
        background 0.45s ease,
        box-shadow 0.45s ease,
        transform 0.25s ease;
}

.setup-module-card__glow {
    pointer-events: none;
    position: absolute;
    inset: -40% auto auto -20%;
    width: 55%;
    height: 120%;
    background: radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--mud-palette-primary, #594ae2) 18%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity 0.45s ease;
}

.setup-module-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.85rem 0.95rem;
    flex-wrap: wrap;
}

.setup-module-card__main {
    flex: 1 1 16rem;
    min-width: 0;
}

.setup-module-card__title-row {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-bottom: 0.25rem;
}

.setup-module-card__name {
    word-break: break-word;
}

.setup-module-card__desc {
    color: var(--mud-palette-text-secondary, #666);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.setup-module-card__toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    flex: 0 0 auto;
}

.setup-module-card__state-label {
    color: var(--mud-palette-text-secondary, #888);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.65rem !important;
}

.setup-module-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #000 12%, transparent);
    background: color-mix(in srgb, #9e9e9e 14%, transparent);
    color: #78909c;
    transition:
        background 0.4s ease,
        color 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
    flex-shrink: 0;
}

.setup-module-indicator.is-on {
    color: #0b1f12;
    background: linear-gradient(145deg, #7CFFB2, #18e07a 55%, #0fb86a);
    border-color: color-mix(in srgb, #18e07a 55%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, #18e07a 35%, transparent),
        0 0 14px color-mix(in srgb, #18e07a 55%, transparent);
    animation: setup-module-indicator-pulse 1.8s ease-in-out infinite;
}

.setup-module-card--on {
    border-color: color-mix(in srgb, var(--mud-palette-primary, #594ae2) 55%, transparent);
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--mud-palette-primary, #594ae2) 14%, var(--mud-palette-surface, #fff)),
            color-mix(in srgb, var(--mud-palette-info, #0288d1) 8%, var(--mud-palette-surface, #fff)) 48%,
            var(--mud-palette-surface, #fff)
        );
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--mud-palette-primary, #594ae2) 18%, transparent),
        0 10px 28px color-mix(in srgb, var(--mud-palette-primary, #594ae2) 14%, transparent);
}

.setup-module-card--on .setup-module-card__glow {
    opacity: 1;
}

.setup-module-card--off {
    filter: saturate(0.88);
}

.setup-module-card--blocked {
    opacity: 0.78;
}

.setup-module-card--highlight {
    outline: 2px solid color-mix(in srgb, var(--mud-palette-warning, #ff9800) 80%, transparent);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--mud-palette-warning, #ff9800) 25%, transparent),
        0 0 24px color-mix(in srgb, var(--mud-palette-warning, #ff9800) 30%, transparent);
    animation: setup-module-highlight 1.6s ease-out 1;
}

.setup-module-meta {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.55rem;
    min-width: 0;
}

.setup-module-deps {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.setup-module-deps__label {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary, #666);
}

.setup-module-deps__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
}

.setup-module-dep-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    min-width: 0;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default, #cfd8dc) 90%, transparent);
    background: color-mix(in srgb, var(--mud-palette-background, #f5f5f5) 80%, transparent);
    color: var(--mud-palette-text-primary, #222);
    padding: 0.18rem 0.55rem 0.18rem 0.35rem;
    font-size: 0.75rem;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.setup-module-dep-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, #000 10%, transparent);
}

.setup-module-dep-chip__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 12rem;
}

.setup-module-dep-chip.is-satisfied {
    border-color: color-mix(in srgb, #18e07a 50%, transparent);
    background: color-mix(in srgb, #18e07a 14%, transparent);
    color: color-mix(in srgb, #0a7a42 70%, #111);
}

.setup-module-dep-chip.is-missing {
    border-color: color-mix(in srgb, var(--mud-palette-warning, #ff9800) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-warning, #ff9800) 12%, transparent);
}

.setup-module-dep-chip.is-auto {
    border-color: color-mix(in srgb, var(--mud-palette-primary, #594ae2) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary, #594ae2) 12%, transparent);
}

.setup-onboarding-shell[data-theme="dark"] .setup-module-card {
    background: color-mix(in srgb, #1a222d 96%, transparent);
    border-color: color-mix(in srgb, #fff 12%, transparent);
}

.setup-onboarding-shell[data-theme="dark"] .setup-module-card--on {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--mud-palette-primary, #7c6cf0) 28%, #151b24),
            color-mix(in srgb, var(--mud-palette-info, #29b6f6) 14%, #151b24) 50%,
            #151b24
        );
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--mud-palette-primary, #7c6cf0) 30%, transparent),
        0 12px 30px color-mix(in srgb, #000 45%, transparent);
}

.setup-onboarding-shell[data-theme="dark"] .setup-module-dep-chip {
    background: color-mix(in srgb, #0f1419 70%, transparent);
    color: var(--mud-palette-text-primary, #e8eaed);
}

@keyframes setup-module-indicator-pulse {
    0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, #18e07a 35%, transparent), 0 0 10px color-mix(in srgb, #18e07a 45%, transparent); }
    50% { box-shadow: 0 0 0 1px color-mix(in srgb, #18e07a 55%, transparent), 0 0 18px color-mix(in srgb, #18e07a 70%, transparent); }
}

@keyframes setup-module-highlight {
    0% { transform: scale(1); }
    35% { transform: scale(1.01); }
    100% { transform: scale(1); }
}

.setup-smtp-help-btn {
    margin-left: 0.25rem;
}

.setup-readiness-help {
    margin-top: 0.25rem;
    opacity: 0.92;
}


/* Guard: never flip checkboxes/buttons inside setup expansion panels (template CSS used to rotate all SVGs). */
.setup-wizard-root .mud-expand-panel .mud-checkbox svg,
.setup-wizard-root .mud-expand-panel .mud-button-root svg,
.setup-wizard-root .mud-expand-panel .mud-icon-button svg,
.setup-wizard-root .mud-expand-panel .mud-input-control svg,
.setup-onboarding-shell .mud-checkbox svg,
.setup-onboarding-shell .mud-button-root svg {
    rotate: none !important;
    transform: none !important;
}

.setup-wizard-root .setup-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--mud-palette-surface, #fff);
    padding-top: 0.5rem;
}

.setup-wizard-root .setup-provider-card {
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-radius: 6px;
    padding: 0.75rem;
    min-height: 112px;
}

.setup-wizard-root .setup-success-card {
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-success, #2e7d32) 42%, var(--mud-palette-lines-default, #e0e0e0));
    background: color-mix(in srgb, var(--mud-palette-surface, #fff) 90%, var(--mud-palette-success, #2e7d32) 10%);
}

@media (max-width: 600px) {
    .setup-onboarding-header {
        padding: 0.85rem 1rem;
    }

    .setup-onboarding-content {
        padding: 1rem 0.75rem 1.5rem;
    }

    .setup-wizard-root {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .setup-wizard-root .setup-actionbar,
    .setup-wizard-root .setup-actionbar .mud-stack-row {
        align-items: stretch !important;
        width: 100%;
    }

    .setup-wizard-root .setup-actionbar .mud-button-root {
        flex: 1 1 100%;
        min-width: 0;
    }

    .setup-wizard-root .mud-expansion-panel-content {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .setup-wizard-root .setup-provider-card {
        min-height: auto;
    }
}