:root {
    --alrakeen-primary: #795DA7;
    --alrakeen-secondary: #51396A;
    --alrakeen-accent: #FC8230;
}

.auth-wrapper {
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgba(81, 57, 106, 0.76), rgba(121, 93, 167, 0.42)),
        url('/background.png') center center / cover no-repeat fixed !important;
}

.auth-wrapper::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.48);
    pointer-events: none;
}

.auth-wrapper .position-relative {
    z-index: 1;
}

.auth-card {
    border: 1px solid rgba(121, 93, 167, 0.16) !important;
    box-shadow: 0 18px 50px rgba(81, 57, 106, 0.18) !important;
    backdrop-filter: blur(8px);
}

.app-logo img,
.loading-logo img {
    object-fit: contain !important;
}

.app-logo-title {
    color: var(--alrakeen-secondary) !important;
    letter-spacing: 0.3px !important;
}

.auth-card .v-btn.bg-primary,
.auth-card .v-btn--variant-flat:not(.bg-secondary) {
    background-color: var(--alrakeen-primary) !important;
    color: #fff !important;
}

.auth-card .v-btn.bg-primary:hover,
.auth-card .v-btn--variant-flat:not(.bg-secondary):hover {
    background-color: var(--alrakeen-secondary) !important;
}

.auth-v1-top-shape,
.auth-v1-bottom-shape {
    color: var(--alrakeen-primary) !important;
    opacity: 0.42;
}

.layout-vertical-nav .app-logo img {
    object-fit: contain !important;
}

.layout-vertical-nav .app-logo-title,
.layout-nav-type-vertical .app-logo-title {
    color: var(--alrakeen-secondary) !important;
    text-transform: uppercase;
}