.theme-light {
    --app-bg: #f5f7fb;
    --app-surface: #ffffff;
    --app-surface-muted: #fafbff;
    --app-ink: #1f2a44;
    --app-muted: #6b7280;
    --app-line: #e7ebf3;
    --app-line-strong: #dbe2ef;
    --app-primary: #594ae2;
    --app-primary-soft: #ece9ff;
    --app-primary-strong: #4638c9;
    --app-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.theme-dark {
    --app-bg: #111827;
    --app-surface: #172033;
    --app-surface-muted: #1d2940;
    --app-ink: #f9fafb;
    --app-muted: #94a3b8;
    --app-line: #25324a;
    --app-line-strong: #334155;
    --app-primary: #8b7fff;
    --app-primary-soft: rgba(139, 127, 255, 0.16);
    --app-primary-strong: #6f62ff;
    --app-shadow: 0 16px 34px rgba(2, 6, 23, 0.34);
}

html,
body {
    min-height: 100%;
}

body.mindox-theme {
    margin: 0;
    font-family: "Roboto", sans-serif;
}

.app-shell,
.login-shell {
    color: var(--app-ink);
    background:
        radial-gradient(circle at top right, rgba(89, 74, 226, 0.08), transparent 24%),
        linear-gradient(180deg, #f9fbff 0%, var(--app-bg) 100%);
}

.theme-dark.app-shell,
.theme-dark.login-shell {
    background:
        radial-gradient(circle at top right, rgba(139, 127, 255, 0.18), transparent 24%),
        linear-gradient(180deg, #0f172a 0%, var(--app-bg) 100%);
}

.gridwrapper {
    display: grid;
    grid-template-columns: 100%;
    column-gap: 1.5em;
    row-gap: 30px;
}

.mud-typography,
.mud-button,
.mud-input,
.mud-nav-link-text,
.mud-list-item-text,
.mud-table,
.mud-chip,
.mud-alert {
    font-family: "Roboto", sans-serif;
}

.app-shell {
    min-height: 100vh;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0;
    padding: 0 20px;
    border-bottom: 1px solid var(--app-line);
    background: color-mix(in srgb, var(--app-surface) 92%, transparent);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.app-brand {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.app-brand-logo {
    display: block;
    width: 140px;
    max-width: 100%;
    height: auto;
}

.person-card-logo {
    display: block;
    width: 136px;
    margin: 0 auto;
    text-align: center;
}

.page-logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}

.home-page-logo-small {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 48px;
    height: auto;
}

.auth-logo {
    width: 110px;
    margin-bottom: 16px;
}

.welcome-logo {
    width: 20%;
    padding-top: 20vh;
}

.person-card-logo-dark {
    display: none;
}

.page-logo-dark {
    display: none;
}

.app-user-chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    background: var(--app-surface);
}

.app-user-area {
    display: flex;
    align-items: center;
    gap: 16px;
}

.app-user-menu {
    flex: 0 0 auto;
}

.theme-toggle {
    margin-right: 12px;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    background: var(--app-surface);
}

.app-drawer {
    border-right: 1px solid var(--app-line);
}

.app-drawer .mud-drawer-paper {
    margin: 0;
    padding: 14px 10px 24px;
    border-right: 1px solid var(--app-line);
    border-radius: 0;
    background: var(--app-surface);
    box-shadow: none;
}

.person-card {
    margin-bottom: 12px;
    border: 1px solid var(--app-line);
    border-radius: 12px;
    background: linear-gradient(180deg, var(--app-surface) 0%, var(--app-surface-muted) 100%);
}

.person-card .mud-card-header {
    padding: 16px 14px 10px;
}

.app-nav-menu {
    color: var(--app-ink);
}

.app-version-tag {
    min-width: 0;
    height: 24px;
    margin: 4px 8px 10px;
    padding: 0 10px;
    border-color: var(--app-line-strong);
    color: var(--app-primary);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.app-drawer .mud-nav-link,
.app-drawer .mud-nav-group,
.app-drawer .mud-nav-link-text,
.app-drawer .mud-nav-group-text,
.app-drawer .mud-nav-group-icon,
.app-drawer .mud-nav-link-icon {
    color: inherit;
}

.app-drawer .mud-nav-link {
    margin: 2px 0;
    border-radius: 10px;
    transition: background-color 120ms ease, color 120ms ease;
}

.app-drawer .mud-nav-link:hover {
    background: var(--app-surface-muted);
}

.app-drawer .mud-nav-link.active {
    background: var(--app-primary-soft);
    color: var(--app-primary);
    font-weight: 500;
}

.app-drawer .mud-nav-link.active .mud-nav-link-icon,
.app-drawer .mud-nav-link.active .mud-nav-link-text {
    color: var(--app-primary);
}

.app-drawer .mud-divider {
    border-color: var(--app-line);
}

.app-drawer .mud-typography {
    color: var(--app-ink);
}

.app-main-content {
    background: transparent;
}

.app-page-shell {
    margin-top: 0;
    padding: 24px;
}

.app-page-shell > .mud-paper,
.app-page-shell .mud-card,
.app-page-shell .mud-table-container,
.app-page-shell .mud-alert,
.app-page-shell .mud-expansion-panel,
.app-page-shell .mud-simple-table {
    border-radius: 12px;
}

.app-page-shell .mud-paper,
.app-page-shell .mud-card,
.app-page-shell .mud-table-container,
.app-page-shell .mud-simple-table,
.app-page-shell .mud-expansion-panel {
    border: 1px solid var(--app-line);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
}

.app-page-shell .mud-input-control {
    border-radius: 12px;
}

.app-page-shell .mud-button-filled.mud-button-filled-primary {
    background: linear-gradient(180deg, #6a5cff 0%, var(--app-primary) 100%);
    box-shadow: 0 8px 18px rgba(89, 74, 226, 0.22);
}

.app-page-shell .mud-button-filled.mud-button-filled-secondary {
    background: linear-gradient(180deg, #7c6cf3 0%, var(--app-primary-strong) 100%);
}

.app-page-shell .mud-button-outlined.mud-button-outlined-primary,
.app-page-shell .mud-button-text-primary {
    color: var(--app-primary);
}

.app-page-shell .mud-input > .mud-input-control > .mud-input-control-input-container,
.app-page-shell .mud-input-slot {
    border-radius: 10px;
}

.app-page-shell .mud-table-head .mud-table-cell {
    color: var(--app-ink);
    font-weight: 600;
    background: var(--app-surface-muted);
}

.app-page-shell .mud-chip {
    border-radius: 999px;
    font-weight: 600;
}

.app-page-shell .mud-tabs-toolbar {
    border-bottom: 1px solid var(--app-line);
}

.app-page-shell .mud-tab.mud-tab-active {
    color: var(--app-primary);
}

.overview-chart {
    padding: 24px 24px 12px;
    border: 1px solid var(--app-line);
    border-radius: 12px;
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
}

.chart-item {
    padding: 0 12px 18px;
}

.overview-pie-chart,
.overview-pie-chart .dxc,
.overview-pie-chart .dx-chart,
.overview-pie-chart svg {
    background: transparent !important;
}

.overview-chart .dx-chart text,
.overview-chart .dxc-title text,
.overview-chart .dxc-legend text,
.overview-chart .dxc-label text {
    fill: var(--app-ink) !important;
}

.overview-chart .dxc-legend {
    fill: var(--app-ink) !important;
}

.overview-chart .dx-chart-tooltip,
.overview-chart .dxc-tooltip {
    color: var(--app-ink) !important;
}

.overview-chart .dx-chart-tooltip,
.overview-chart .dxc-tooltip,
.overview-chart .dx-chart-tooltip-content,
.overview-chart .dxc-tooltip g {
    background: var(--app-surface-muted) !important;
}

.app-page-shell .dxbl-grid,
.app-page-shell .dxbl-popup,
.app-page-shell .dxbl-calendar,
.app-page-shell .dxbl-dropdown,
.app-page-shell .dxbl-edit,
.app-page-shell .dxbl-fl,
.app-page-shell .dxbl-btn,
.app-page-shell .dxbl-pager,
.app-page-shell .dxbl-tabs {
    color: var(--app-ink);
}

.app-page-shell .dxbl-grid,
.app-page-shell .dxbl-popup-root .dxbl-popup,
.app-page-shell .dxbl-dropdown,
.app-page-shell .dxbl-calendar,
.app-page-shell .dxbl-fl,
.app-page-shell .dxbl-tabs {
    border: 1px solid var(--app-line);
    border-radius: 12px;
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
}

.app-page-shell .dxbl-grid .table,
.app-page-shell .dxbl-grid-table,
.app-page-shell .dxbl-grid-table > tbody > tr > td,
.app-page-shell .dxbl-grid-table > tbody > tr > th,
.app-page-shell .dxbl-grid .dxbl-grid-content,
.app-page-shell .dxbl-grid .dxbl-scroll-viewer,
.app-page-shell .dxbl-grid .dxbl-empty-data-area,
.app-page-shell .dxbl-fl .dxbl-fl-item,
.app-page-shell .dxbl-popup .dxbl-popup-content {
    background: var(--app-surface);
    color: var(--app-ink);
}

.app-page-shell .dxbl-grid .dxbl-grid-header,
.app-page-shell .dxbl-grid .dxbl-grid-filter-row,
.app-page-shell .dxbl-grid .dxbl-grid-group-panel,
.app-page-shell .dxbl-grid .dxbl-grid-bottom-panel,
.app-page-shell .dxbl-grid .dxbl-pager,
.app-page-shell .dxbl-tabs .dxbl-tabs-toolbar,
.app-page-shell .dxbl-fl .dxbl-fl-caption {
    background: var(--app-surface-muted);
    color: var(--app-ink);
}

.app-page-shell .dxbl-grid td,
.app-page-shell .dxbl-grid th,
.app-page-shell .dxbl-grid .dxbl-grid-header,
.app-page-shell .dxbl-grid .dxbl-grid-filter-row,
.app-page-shell .dxbl-grid .dxbl-grid-group-panel,
.app-page-shell .dxbl-grid .dxbl-grid-bottom-panel,
.app-page-shell .dxbl-grid .dxbl-grid-group-row,
.app-page-shell .dxbl-grid .dxbl-grid-data-row,
.app-page-shell .dxbl-edit,
.app-page-shell .dxbl-btn,
.app-page-shell .dxbl-dropdown,
.app-page-shell .dxbl-calendar,
.app-page-shell .dxbl-fl,
.app-page-shell .dxbl-popup,
.app-page-shell .dxbl-pager,
.app-page-shell .dxbl-tabs .dxbl-tab {
    border-color: var(--app-line) !important;
}

.app-page-shell .dxbl-grid .dxbl-grid-data-row:hover,
.app-page-shell .dxbl-grid .dxbl-grid-focused-row,
.app-page-shell .dxbl-grid .dxbl-grid-selected-row,
.app-page-shell .dxbl-tabs .dxbl-tab.dxbl-active,
.app-page-shell .dxbl-btn.dxbl-btn-style-contained {
    background: var(--app-primary-soft);
    color: var(--app-primary);
}

.app-page-shell .dxbl-edit,
.app-page-shell .dxbl-dropdown,
.app-page-shell .dxbl-btn {
    background: var(--app-surface);
    color: var(--app-ink);
}

.app-page-shell .dxbl-btn.dxbl-btn-style-contained {
    border-color: transparent !important;
}

.app-page-shell .dxbl-btn.dxbl-btn-style-outlined,
.app-page-shell .dxbl-btn.dxbl-btn-style-text {
    color: var(--app-primary);
}

.app-page-shell .dxbl-grid .dxbl-command-cell .dxbl-btn,
.app-page-shell .dxbl-grid .dxbl-data-row .dxbl-btn {
    box-shadow: none;
}

.theme-dark .app-page-shell .dxbl-grid,
.theme-dark .app-page-shell .dxbl-popup-root .dxbl-popup,
.theme-dark .app-page-shell .dxbl-dropdown,
.theme-dark .app-page-shell .dxbl-calendar,
.theme-dark .app-page-shell .dxbl-fl,
.theme-dark .app-page-shell .dxbl-tabs {
    background: var(--app-surface);
}

.theme-dark .app-page-shell .dxbl-grid .dxbl-grid-header,
.theme-dark .app-page-shell .dxbl-grid .dxbl-grid-filter-row,
.theme-dark .app-page-shell .dxbl-grid .dxbl-grid-group-panel,
.theme-dark .app-page-shell .dxbl-grid .dxbl-grid-bottom-panel,
.theme-dark .app-page-shell .dxbl-grid .dxbl-pager,
.theme-dark .app-page-shell .dxbl-tabs .dxbl-tabs-toolbar,
.theme-dark .app-page-shell .dxbl-fl .dxbl-fl-caption {
    background: #1d2940;
}

.theme-dark .app-page-shell .dxbl-grid .dxbl-grid-data-row:hover,
.theme-dark .app-page-shell .dxbl-grid .dxbl-grid-focused-row,
.theme-dark .app-page-shell .dxbl-grid .dxbl-grid-selected-row,
.theme-dark .app-page-shell .dxbl-tabs .dxbl-tab.dxbl-active,
.theme-dark .app-page-shell .dxbl-btn.dxbl-btn-style-contained {
    background: rgba(139, 127, 255, 0.16);
    color: #c9c2ff;
}

.login-shell {
    min-height: 100vh;
}

.login-panel {
    text-align: center;
}

.login-card {
    border: 1px solid var(--app-line);
    border-radius: 16px;
    background: var(--app-surface);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.theme-dark .app-topbar {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
}

.theme-dark .overview-chart {
    background: var(--app-surface);
}

.theme-dark .overview-chart .dx-chart text,
.theme-dark .overview-chart .dxc-title text,
.theme-dark .overview-chart .dxc-legend text,
.theme-dark .overview-chart .dxc-label text {
    fill: #e5e7eb !important;
}

.theme-dark .person-card-logo-light {
    display: none;
}

.theme-dark .person-card-logo-dark {
    display: block;
}

.theme-dark .page-logo-light {
    display: none;
}

.theme-dark .page-logo-dark {
    display: block;
}

.theme-dark .app-page-shell .mud-paper,
.theme-dark .app-page-shell .mud-card,
.theme-dark .app-page-shell .mud-table-container,
.theme-dark .app-page-shell .mud-simple-table,
.theme-dark .app-page-shell .mud-expansion-panel,
.theme-dark .login-card {
    box-shadow: var(--app-shadow);
}

.theme-dark .mud-input,
.theme-dark .mud-input-label,
.theme-dark .mud-input-slot,
.theme-dark .mud-select-input,
.theme-dark .mud-table,
.theme-dark .mud-table-cell,
.theme-dark .mud-typography,
.theme-dark .mud-list-item-text,
.theme-dark .mud-nav-link-text {
    color: var(--app-ink);
}

.theme-dark .mud-input-outlined-border {
    border-color: var(--app-line-strong) !important;
}

.theme-dark .mud-icon-root,
.theme-dark .mud-nav-group-icon,
.theme-dark .mud-nav-link-icon {
    color: inherit;
}

#blazor-error-ui {
    z-index: 11000;
}

.spinnercenter {
    display: flex;
    margin: auto;
}

.blazored-toast-container {
    z-index: 10000;
}

@media screen and (min-width: 760px) {
    .gridwrapper {
        grid-template-columns: 50% 50%;
    }
}

@media (max-width: 959.98px) {
    .app-topbar {
        padding: 0 12px;
    }

    .app-user-chip {
        display: none;
    }

    .app-user-area {
        gap: 8px;
    }

    .app-page-shell {
        padding: 16px;
    }
}