/*
|--------------------------------------------------------------------------
| Global CSS overrides for compiled bundles
|--------------------------------------------------------------------------
| Use this file when you need to override existing Vuexy/Bootstrap/app.css
| selectors without a full asset recompile.
*/

/*
|--------------------------------------------------------------------------
| Contrast safety rule: auth hero badge
|--------------------------------------------------------------------------
| Never pair light label utilities with white text in auth hero surfaces.
| Keep auth-shell badge contrast deterministic across Vuexy utility changes.
*/
.auth-shell .auth-shell-badge {
    background: rgba(43, 37, 78, 0.72) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.34);
}

/*
|--------------------------------------------------------------------------
| Vanta NET auth scene for /login_1
|--------------------------------------------------------------------------
*/
.auth-shell {
    position: relative;
    overflow-x: hidden;
    --auth-scene-dim: 0.24;
    --auth-scene-opacity: 0.92;
    background:
        radial-gradient(circle at top right, rgba(115, 103, 240, 0.14), transparent 26%),
        linear-gradient(160deg, rgba(36, 32, 56, 0.9), rgba(80, 72, 163, 0.84));
}

.auth-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: rgba(12, 10, 28, var(--auth-scene-dim));
    transition: background-color 220ms ease;
}

.auth-shell.auth-scene-disabled {
    --auth-scene-opacity: 0;
    --auth-scene-dim: 0.54;
}

.auth-shell.auth-scene-mobile-soft {
    --auth-scene-dim: 0.08;
    --auth-scene-opacity: 0;
    background:
        radial-gradient(circle at top center, rgba(115, 103, 240, 0.08), transparent 32%),
        linear-gradient(180deg, #f5f6fd 0%, #faf9ff 52%, #ffffff 100%);
}

.auth-shell.auth-scene-mobile-soft::before {
    background: rgba(255, 255, 255, 0.18);
}

.auth-shell .auth-wrapper {
    position: relative;
    z-index: 4 !important;
}

.auth-shell .auth-quote h1,
.auth-shell .auth-quote .display-5 {
    color: #ffffff !important;
    text-shadow: 0 0.45rem 1.1rem rgba(0, 0, 0, 0.35);
}

.auth-shell .auth-quote p,
.auth-shell .auth-quote .text-white-50 {
    color: rgba(255, 255, 255, 0.9) !important;
}

.auth-vanta-scene {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle at 22% 18%, rgba(115, 103, 240, 0.16), transparent 38%);
    opacity: var(--auth-scene-opacity);
    transition: opacity 260ms ease;
}

.auth-shell .auth-illustration {
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
}

.auth-shell .auth-quote {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.045)),
        rgba(255, 255, 255, 0.03);
}

.auth-shell.auth-scene-mobile-soft .auth-card {
    box-shadow: 0 1rem 2rem rgba(75, 70, 92, 0.1);
}

.auth-vanta-scene canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

@media (min-width: 992px) {
    .auth-shell {
        --auth-scene-dim: 0.09;
        --auth-scene-opacity: 0.82;
        background:
            radial-gradient(circle at 18% 18%, rgba(115, 103, 240, 0.12), transparent 24%),
            radial-gradient(circle at 82% 14%, rgba(40, 199, 111, 0.08), transparent 20%),
            linear-gradient(180deg, #f4f5fb 0%, #f8f8ff 52%, #ffffff 100%);
    }

    .auth-shell::before,
    .auth-vanta-scene {
        left: 0;
        right: 0;
        width: auto;
    }

    .auth-shell::before {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(23, 19, 46, 0.08));
    }

    .auth-vanta-scene {
        background:
            radial-gradient(circle at 22% 18%, rgba(115, 103, 240, 0.14), transparent 40%),
            radial-gradient(circle at 78% 24%, rgba(115, 103, 240, 0.1), transparent 34%);
    }

    .auth-shell .auth-wrapper,
    .auth-shell .auth-illustration,
    .auth-shell .auth-login-card-shell,
    .auth-shell .auth-card {
        position: relative;
        z-index: 4 !important;
    }

    .auth-shell .auth-quote {
        position: relative;
        z-index: 4 !important;
    }

    .auth-shell .auth-quote {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)),
            rgba(255, 255, 255, 0.045) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        box-shadow:
            0 1.25rem 2.6rem rgba(34, 29, 63, 0.18),
            inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
        backdrop-filter: blur(18px) saturate(145%) !important;
    }

    .auth-shell .auth-illustration {
        background:
            radial-gradient(circle at top, rgba(255, 255, 255, 0.16), transparent 30%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)) !important;
    }

    .auth-shell .auth-shell-badge {
        background: rgba(48, 42, 89, 0.82) !important;
        border-color: rgba(255, 255, 255, 0.28) !important;
    }

    .auth-shell .auth-hero-step {
        background: rgba(255, 255, 255, 0.15) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.16),
            0 0.45rem 0.95rem rgba(24, 20, 44, 0.12) !important;
    }

    .auth-shell .auth-kpi-card {
        background: rgba(255, 255, 255, 0.14) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.1),
            0 0.55rem 1.1rem rgba(24, 20, 44, 0.12) !important;
    }

    .auth-shell .auth-card {
        box-shadow: 0 1.2rem 2.8rem rgba(75, 70, 92, 0.14);
    }
}

@media (max-width: 991.98px) {
    .auth-shell {
        --auth-scene-dim: 0.08;
        --auth-scene-opacity: 0;
        background:
            radial-gradient(circle at top center, rgba(115, 103, 240, 0.08), transparent 32%),
            linear-gradient(180deg, #f5f6fd 0%, #faf9ff 52%, #ffffff 100%);
    }

    .auth-shell::before {
        background: rgba(255, 255, 255, 0.18);
    }
}

.auth-scene-control {
    border: 1px solid rgba(115, 103, 240, 0.2);
    border-radius: 0.95rem;
    background: linear-gradient(180deg, rgba(115, 103, 240, 0.08), rgba(115, 103, 240, 0.03));
    padding: 0.75rem 0.9rem;
}

.auth-scene-control__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.auth-scene-control__title {
    color: #4f4b66;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.auth-scene-control__toggle {
    border: 1px solid rgba(115, 103, 240, 0.24);
    background: rgba(255, 255, 255, 0.82);
    color: #5d51d4;
    border-radius: 999px;
    padding: 0.36rem 0.72rem;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all 180ms ease;
}

.auth-scene-control__toggle:hover {
    background: rgba(115, 103, 240, 0.12);
}

.auth-scene-control__label {
    margin-top: 0.65rem;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: #6f6b7d;
    font-size: 0.78rem;
}

.auth-scene-control__label strong {
    color: #4f4b66;
    font-weight: 700;
}

.auth-scene-control__range {
    margin: 0;
}

/*
|--------------------------------------------------------------------------
| Premium procedure suggestion surfaces
|--------------------------------------------------------------------------
*/
.topbar-search .ts-dropdown {
    padding: 0.65rem;
    border-radius: 1.15rem;
    border-color: rgba(115, 103, 240, 0.12);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(18px);
    box-shadow: 0 1rem 2rem rgba(75, 70, 92, 0.16);
}

.topbar-procedure-option {
    gap: 0.5rem;
    padding: 0.9rem 0.95rem;
    border: 1px solid transparent;
    background: linear-gradient(135deg, rgba(245, 247, 255, 0.92), rgba(255, 255, 255, 0.98));
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.topbar-procedure-option[data-kind="search"] {
    border-color: rgba(40, 199, 111, 0.14);
    background: linear-gradient(135deg, rgba(40, 199, 111, 0.08), rgba(255, 255, 255, 0.98));
}

.topbar-search .ts-dropdown .option.active .topbar-procedure-option,
.topbar-search .ts-dropdown .option:hover .topbar-procedure-option {
    transform: translateY(-1px);
    border-color: rgba(115, 103, 240, 0.2);
    background: linear-gradient(135deg, rgba(115, 103, 240, 0.08), rgba(255, 255, 255, 0.98));
    box-shadow: 0 0.7rem 1.4rem rgba(115, 103, 240, 0.12);
}

.topbar-procedure-option strong {
    font-size: 0.98rem;
    line-height: 1.35;
}

.topbar-procedure-option-meta span {
    padding: 0.3rem 0.55rem;
    background: rgba(115, 103, 240, 0.1);
    font-size: 0.74rem;
    font-weight: 700;
}