/*
 * Gendox global visual theme
 * Near-black action system, Gendox-blue accents and a soft multi-point workspace atmosphere.
 */

:root {
    --primary: #2563eb;
    --primary-strong: #1d4ed8;
    --accent: #2563eb;
    --primary-soft: #e9edff;
    --blue: #c4cdf3;
    --blue-soft: #f0f2ff;
    --gdx-brand: #2563eb;
    --gdx-brand-hover: #1d4ed8;
    --gdx-brand-strong: #1d4ed8;
    --gdx-brand-medium: #7185dc;
    --gdx-brand-soft: #e9edff;
    --gdx-action: #12141f;
    --gdx-action-hover: #222635;
    --gdx-action-strong: #090b12;
    --gdx-action-border: rgba(18, 20, 31, 0.28);
    --gdx-field-surface: rgba(234, 238, 245, 0.78);
    --gdx-powder: #dfe8ff;
    --gdx-lavender: #eee8ff;
    --gdx-cream: #fff3d8;
    --gdx-brand-gradient: linear-gradient(135deg, #3975f2 0%, #2563eb 52%, #1d4ed8 100%);
    --gdx-action-gradient: linear-gradient(145deg, #1d202d 0%, #12141f 58%, #090b12 100%);
    --gdx-workspace-gradient:
        radial-gradient(ellipse 64% 44% at 0% 2%, rgba(215, 226, 255, 0.9) 0%, rgba(215, 226, 255, 0) 68%),
        radial-gradient(ellipse 62% 42% at 100% 0%, rgba(226, 246, 236, 0.56) 0%, rgba(226, 246, 236, 0) 68%),
        radial-gradient(ellipse 54% 38% at 4% 52%, rgba(239, 227, 255, 0.72) 0%, rgba(239, 227, 255, 0) 68%),
        radial-gradient(ellipse 58% 40% at 98% 58%, rgba(220, 231, 255, 0.84) 0%, rgba(220, 231, 255, 0) 70%),
        radial-gradient(ellipse 48% 34% at 16% 100%, rgba(229, 247, 238, 0.48) 0%, rgba(229, 247, 238, 0) 70%),
        radial-gradient(ellipse 54% 38% at 88% 100%, rgba(231, 225, 255, 0.68) 0%, rgba(231, 225, 255, 0) 70%),
        linear-gradient(145deg, #fbfbfd 0%, #f6f8fd 48%, #f8f8fc 100%);
    --gdx-surface-gradient:
        radial-gradient(110% 150% at 0% 0%, rgba(231, 248, 239, 0.42) 0%, rgba(231, 248, 239, 0) 48%),
        radial-gradient(100% 130% at 100% 12%, rgba(222, 229, 255, 0.78) 0%, rgba(222, 229, 255, 0) 58%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 248, 253, 0.96));
}

html {
    background: #f6f8fd;
}

body:not(.auth-screen) {
    background-color: #f7f8fc !important;
    background-image: var(--gdx-workspace-gradient) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

.main,
.main:not(.dashboard-main),
.main.dashboard-main,
body.ai-chat-open .main {
    background-color: rgba(255, 255, 255, 0.33) !important;
    background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025)) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    border-color: rgba(255, 255, 255, 0.62) !important;
    /* A viewport-sized backdrop layer produces a dark compositor seam while scrolling. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.36;
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.022) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 78%);
}

.main,
.native-page-shell,
.dashboard-main {
    position: relative;
    isolation: isolate;
}

/* White application surfaces remain white, but let the body atmosphere pass through. */
.main .panel,
.main .content-block-panel,
.main .employee-editor-panel.content-block-panel,
.main .dashboard-panel,
.main .employee-editor-sidebar,
.main .employee-editor-section,
.main .form-card,
.main .table-card,
.main .table-shell,
.main .settings-card,
.main .data-card {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.76) !important;
    backdrop-filter: blur(11px) saturate(1.04);
    -webkit-backdrop-filter: blur(11px) saturate(1.04);
}

/* Primary section surfaces stay fully opaque for stronger content separation. */
.main .content-block-panel {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.main .content-block-body {
    background-color: transparent !important;
    background-image: none !important;
}

.main .content-block-header {
    background-color: rgba(255, 255, 255, 0.24) !important;
    background-image: none !important;
}

.main .product-toggle-option,
.main .modern-toggle-label {
    background-color: rgba(255, 255, 255, 0.48) !important;
    border-color: rgba(255, 255, 255, 0.72) !important;
}

.main .table-wrap,
.main .table-container,
.main .list-surface {
    background-color: rgba(255, 255, 255, 0.48) !important;
    border-color: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(10px) saturate(1.04);
    -webkit-backdrop-filter: blur(10px) saturate(1.04);
}

.button:not(.secondary):not(.danger):not(.success):not(.warning),
.pill-button:not(.secondary):not(.danger):not(.success):not(.warning),
.mobile-create-button {
    --button-accent: var(--gdx-action);
}

.button:not(.secondary):not(.danger):not(.success):not(.warning),
.pill-button:not(.secondary):not(.danger):not(.success):not(.warning),
.primary-button,
.btn-primary,
.button-primary,
.documents-filter-popover-apply,
.mobile-create-button {
    background-color: var(--gdx-action) !important;
    background-image: var(--gdx-action-gradient) !important;
    border-color: var(--gdx-action) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(9, 11, 18, 0.16);
}

.button:not(.secondary):not(.danger):not(.success):not(.warning):hover,
.pill-button:not(.secondary):not(.danger):not(.success):not(.warning):hover,
.primary-button:hover,
.btn-primary:hover,
.button-primary:hover,
.documents-filter-popover-apply:hover,
.mobile-create-button:hover {
    background-color: var(--gdx-action-hover) !important;
    background-image: linear-gradient(145deg, #292d3c 0%, #1b1e2a 58%, #10121b 100%) !important;
    border-color: var(--gdx-action-hover) !important;
    box-shadow: 0 13px 28px rgba(9, 11, 18, 0.22);
}

.sidebar nav a.active,
.main-nav a.active,
.main .subnav a.active,
.main .employees-subnav a.active,
.payroll-subnav a.active,
.subnav-item.active,
.segmented-button.active,
.invoice-type-tabs button.is-active,
.employee-editor-section-nav a.is-active,
.dashboard-workspace .dashboard-period-switch button.active {
    border-color: var(--gdx-action) !important;
    background-color: var(--gdx-action) !important;
    background-image: var(--gdx-action-gradient) !important;
    color: #ffffff !important;
}

.button.secondary,
.pill-button.secondary,
.secondary-button,
.btn-secondary {
    border-color: var(--gdx-action-border) !important;
    color: var(--gdx-action) !important;
}

/* Document composer rails: retain each surface colour as translucent frosted glass. */
.main :is([data-document-form-page], [data-cash-form-page], [data-material-form-page], [data-accounting-journal-form-page]) .invoice-preview-rail {
    --document-rail-rgb: 18, 20, 31;
    --document-rail-shadow-rgb: 18, 20, 31;
    --document-action-rgb: 18, 20, 31;
    --document-action-shadow-rgb: 18, 20, 31;
}

.main [data-cash-form-page] .cash-preview-rail {
    --document-rail-rgb: 104, 117, 134;
    --document-rail-shadow-rgb: 104, 117, 134;
}

.main :is([data-document-form-page], [data-cash-form-page], [data-material-form-page], [data-accounting-journal-form-page]) .invoice-rail-card {
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    background-color: rgba(var(--document-rail-rgb), 0.7) !important;
    background-image:
        radial-gradient(circle at 14% -8%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(145deg, rgba(var(--document-rail-rgb), 0.78) 0%, rgba(var(--document-rail-rgb), 0.58) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08),
        0 14px 34px rgba(var(--document-rail-shadow-rgb), 0.14),
        0 5px 14px rgba(var(--document-rail-shadow-rgb), 0.08) !important;
    filter: none !important;
    backdrop-filter: blur(24px) saturate(1.24) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.24) !important;
}

/* Composer documents use one joined, two-tone summary surface. */
.main :is(
    [data-document-form-page],
    [data-material-form-page],
    [data-cash-form-page],
    [data-accounting-journal-form-page]
) .invoice-rail-card {
    gap: 0 !important;
    padding: 0 !important;
    border-color: #171923 !important;
    background: #171923 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.main :is(
    [data-document-form-page],
    [data-material-form-page],
    [data-cash-form-page],
    [data-accounting-journal-form-page]
) .invoice-rail-head {
    padding: 20px 20px 12px !important;
}

.main :is(
    [data-document-form-page],
    [data-material-form-page],
    [data-cash-form-page],
    [data-accounting-journal-form-page]
) .invoice-rail-facts {
    padding: 0 20px 19px !important;
}

.main :is([data-document-form-page], [data-cash-form-page], [data-material-form-page], [data-accounting-journal-form-page]) :is(.invoice-rail-total, .cash-rail-total, .accounting-rail-total) {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.055)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 10px 26px rgba(var(--document-rail-shadow-rgb), 0.1) !important;
    backdrop-filter: blur(14px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.18) !important;
}

.main :is(
    [data-document-form-page],
    [data-material-form-page],
    [data-cash-form-page]
) :is(.invoice-rail-total, .cash-rail-total) {
    min-height: 78px !important;
    margin: 0 !important;
    padding: 17px 20px !important;
    border: 0 !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.22) !important;
    border-radius: 0 0 21px 21px !important;
    background: #20232e !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.main :is(
    [data-document-form-page],
    [data-material-form-page],
    [data-cash-form-page]
) :is(.invoice-rail-total, .cash-rail-total) span {
    color: rgba(255, 255, 255, 0.6) !important;
}

.main :is(
    [data-document-form-page],
    [data-material-form-page],
    [data-cash-form-page]
) :is(.invoice-rail-total, .cash-rail-total) strong {
    color: #ffffff !important;
}

.main [data-accounting-journal-form-page] .accounting-rail-totals {
    margin: 0 !important;
    padding: 8px 20px 10px !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.22) !important;
    border-radius: 0 0 21px 21px !important;
    background: #20232e !important;
}

.main [data-accounting-journal-form-page] .accounting-rail-total {
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.main [data-accounting-journal-form-page] .accounting-rail-total:last-child {
    border-bottom: 0 !important;
}

/* Payment invoice context follows the same joined summary language. */
.main .payment-document-context {
    border-color: #171923 !important;
    background: #171923 !important;
    box-shadow: none !important;
}

.main .payment-document-context-head {
    color: #ffffff !important;
}

.main .payment-document-context-head > div > span,
.main .payment-document-context-head small,
.main .payment-document-totals span,
.main .payment-document-history :is(strong, small) {
    color: rgba(255, 255, 255, 0.64) !important;
}

.main .payment-document-context-head strong,
.main .payment-document-totals strong {
    color: #ffffff !important;
}

.main .payment-document-totals {
    gap: 0 !important;
    margin: 0 !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.22) !important;
    border-radius: 0 !important;
    background: #20232e !important;
}

.main .payment-document-totals > div,
.main .payment-document-totals > div.is-open {
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
}

.main .payment-document-totals > div:last-child {
    border-right: 0 !important;
}

.main .payment-document-history {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: #20232e !important;
}

.main :is([data-cash-form-page], [data-material-form-page], [data-accounting-journal-form-page]) .invoice-composer-actions :is(button:not(.icon-button), .button:not(.icon-button), a.button:not(.icon-button)) {
    --document-action-alpha: 0.72;
    --document-action-hover-alpha: 0.82;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background-color: rgba(var(--document-action-rgb), var(--document-action-alpha)) !important;
    background-image:
        radial-gradient(circle at 18% -20%, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 48%),
        linear-gradient(145deg, rgba(var(--document-action-rgb), var(--document-action-alpha)), rgba(var(--document-action-rgb), 0.58)) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08),
        0 8px 20px rgba(var(--document-action-shadow-rgb), 0.10),
        0 3px 10px rgba(var(--document-action-shadow-rgb), 0.06) !important;
    filter: none !important;
    backdrop-filter: blur(18px) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
    transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

.main :is([data-cash-form-page], [data-material-form-page], [data-accounting-journal-form-page]) .invoice-composer-actions :is(.button.secondary, button.secondary, a.button.secondary) {
    --document-action-rgb: 255, 255, 255;
    --document-action-shadow-rgb: 18, 20, 31;
    --document-action-alpha: 0.56;
    --document-action-hover-alpha: 0.72;
    border-color: rgba(255, 255, 255, 0.72) !important;
    color: #12141f !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 -1px 0 rgba(18, 20, 31, 0.04),
        0 8px 20px rgba(18, 20, 31, 0.08),
        0 3px 10px rgba(18, 20, 31, 0.04) !important;
}

.main :is([data-cash-form-page], [data-material-form-page], [data-accounting-journal-form-page]) .invoice-composer-actions :is(.button.secondary.invoice-sidebar-submit-action, button.secondary.invoice-sidebar-submit-action) {
    --document-action-rgb: 37, 99, 235;
    --document-action-shadow-rgb: 37, 99, 235;
    --document-action-alpha: 0.68;
    --document-action-hover-alpha: 0.8;
    border-color: rgba(167, 195, 255, 0.5) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08),
        0 8px 20px rgba(37, 99, 235, 0.13),
        0 3px 10px rgba(37, 99, 235, 0.07) !important;
}

.main [data-cash-form-page] .invoice-composer-actions .cash-sidebar-final-action {
    --document-action-rgb: 104, 117, 134;
    --document-action-shadow-rgb: 104, 117, 134;
    border-color: rgba(218, 225, 234, 0.42) !important;
}

.main :is([data-cash-form-page], [data-material-form-page], [data-accounting-journal-form-page]) .invoice-composer-actions :is(.button.secondary.danger-action, button.secondary.danger-action, .button.danger) {
    --document-action-rgb: 190, 24, 45;
    --document-action-shadow-rgb: 190, 24, 45;
    --document-action-alpha: 0.64;
    --document-action-hover-alpha: 0.78;
    border-color: rgba(255, 177, 188, 0.46) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 -1px 0 rgba(255, 255, 255, 0.07),
        0 8px 20px rgba(190, 24, 45, 0.13),
        0 3px 10px rgba(190, 24, 45, 0.07) !important;
}

.main :is([data-cash-form-page], [data-material-form-page], [data-accounting-journal-form-page]) .invoice-composer-actions :is(button:not(.icon-button), .button:not(.icon-button), a.button:not(.icon-button)):hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.38) !important;
    background-color: rgba(var(--document-action-rgb), var(--document-action-hover-alpha)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        0 10px 24px rgba(var(--document-action-shadow-rgb), 0.16),
        0 4px 12px rgba(var(--document-action-shadow-rgb), 0.09) !important;
    transform: translateY(-1px);
}

.main :is([data-cash-form-page], [data-material-form-page], [data-accounting-journal-form-page]) .invoice-composer-actions :is(.button.secondary, button.secondary, a.button.secondary):hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.9) !important;
    color: #12141f !important;
}

.main :is([data-cash-form-page], [data-material-form-page], [data-accounting-journal-form-page]) .invoice-composer-actions :is(button, .button)[disabled] {
    opacity: 0.52;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    transform: none !important;
}

/* Invoice rail actions are opaque; the wrapper owns extra paint room for shadows. */
.main [data-document-form-page] .invoice-composer-actions {
    width: auto !important;
    margin: 0 -14px -18px !important;
    padding: 0 14px 18px !important;
    overflow: visible !important;
}

.main [data-document-form-page] .invoice-composer-actions :is(button:not(.icon-button), .button:not(.icon-button), a.button:not(.icon-button)) {
    border: 0 !important;
    background-image: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.main [data-document-form-page] .invoice-composer-actions :is(
    .invoice-sidebar-preview-action,
    .invoice-sidebar-clear-action,
    .invoice-sidebar-pdf-action,
    .invoice-sidebar-email-action
) {
    border-color: #e1e6ee !important;
    background-color: #ffffff !important;
    color: #171923 !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .10) !important;
}

.main [data-document-form-page] .invoice-composer-actions .invoice-sidebar-submit-action {
    border-color: #2563eb !important;
    background-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(37, 99, 235, .18) !important;
}

.main [data-document-form-page] .invoice-composer-actions .invoice-sidebar-final-action {
    border-color: #171923 !important;
    background-color: #171923 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .16) !important;
}

.main [data-document-form-page] .invoice-composer-actions :is(
    .invoice-sidebar-preview-action,
    .invoice-sidebar-clear-action,
    .invoice-sidebar-pdf-action,
    .invoice-sidebar-email-action
):hover:not(:disabled) {
    border-color: #d5dbe5 !important;
    background-color: #f7f8fa !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .12) !important;
}

.main [data-document-form-page] .invoice-composer-actions .invoice-sidebar-submit-action:hover:not(:disabled) {
    background-color: #1d4ed8 !important;
    box-shadow: 0 10px 26px rgba(37, 99, 235, .22) !important;
}

.main [data-document-form-page] .invoice-composer-actions .invoice-sidebar-final-action:hover:not(:disabled) {
    background-color: #22242e !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .20) !important;
}

.tint-warm,
.tint-cool,
.tint-blue,
.tint-white,
.summary-card:not(.summary-card-dark),
.metric-card:not(.metric-card-dark) {
    background-image: var(--gdx-surface-gradient);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline-color: var(--gdx-brand);
}

/* Form surfaces stay flat across modules; state is communicated by the
   existing border/outline instead of an inset bevel. */
.main :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
    select,
    textarea,
    .ts-control,
    .invoice-input-action,
    .exchange-rate-control
) {
    box-shadow: none !important;
}

body.auth-screen {
    --auth-blue: var(--gdx-brand);
    --auth-blue-strong: var(--gdx-brand-strong);
    --auth-blue-deep: #26377d;
    --auth-blue-soft: var(--gdx-brand-soft);
    background-color: #f7f8fc;
    background-image: var(--gdx-workspace-gradient);
    background-attachment: fixed;
}

body.auth-screen .auth-card,
body.auth-screen .auth-card.compact-auth {
    border-color: rgba(153, 169, 233, 0.55);
    box-shadow: 0 30px 90px rgba(56, 70, 132, 0.16), 0 0 0 6px rgba(255, 255, 255, 0.42) !important;
}

body.auth-screen .auth-form-content .button,
body.auth-screen .auth-form-content button.button,
body.auth-screen .auth-form-content a.button {
    background-color: var(--gdx-action) !important;
    background-image: var(--gdx-action-gradient) !important;
    border-color: var(--gdx-action) !important;
    box-shadow: 0 15px 34px rgba(9, 11, 18, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

body.auth-screen .auth-form-content .button:hover,
body.auth-screen .auth-form-content button.button:hover,
body.auth-screen .auth-form-content a.button:hover {
    background-color: var(--gdx-action-hover) !important;
    background-image: linear-gradient(145deg, #292d3c 0%, #1b1e2a 58%, #10121b 100%) !important;
}

@media (max-width: 760px) {
    body:not(.auth-screen) {
        background-color: #f7f8fc !important;
        background-image:
            radial-gradient(34rem 26rem at -2% 4%, rgba(211, 224, 255, 0.88) 0%, transparent 64%),
            radial-gradient(32rem 27rem at 102% -2%, rgba(226, 246, 236, 0.52) 0%, transparent 66%),
            radial-gradient(28rem 24rem at 46% 88%, rgba(237, 228, 255, 0.48) 0%, transparent 66%),
            linear-gradient(155deg, #fafafd 0%, #f4f7fd 100%) !important;
        background-attachment: fixed !important;
    }

    .main,
    .main:not(.dashboard-main),
    .main.dashboard-main,
    body.ai-chat-open .main {
        background-color: rgba(255, 255, 255, 0.35) !important;
        background-image: linear-gradient(155deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025)) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .main::before {
        background-size: 52px 52px;
        opacity: 0.28;
    }

    body.auth-screen {
        background-attachment: scroll !important;
        background-color: #f7f8fc !important;
        background-image:
            radial-gradient(32rem 26rem at 0% 6%, rgba(211, 224, 255, 0.88) 0%, transparent 64%),
            radial-gradient(32rem 26rem at 100% 0%, rgba(226, 246, 236, 0.52) 0%, transparent 66%),
            radial-gradient(28rem 24rem at 34% 100%, rgba(237, 227, 255, 0.56) 0%, transparent 66%),
            linear-gradient(155deg, #fafafd 0%, #f4f7fd 100%) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .main,
    body.auth-screen {
        background-attachment: scroll;
    }
}

@media print {
    .main,
    body,
    body.auth-screen {
        background: #ffffff !important;
    }

    .main::before {
        display: none;
    }
}