@import '../../../../vendor/filament/filament/resources/css/theme.css';

@source '../../../../app/Filament/**/*';
@source '../../../../resources/views/filament/**/*';
@source '../../../../vendor/diogogpinto/filament-auth-ui-enhancer/resources/**/*.blade.php';

.custom-auth-wrapper {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--primary-300) 22%, transparent), transparent 38%),
        linear-gradient(135deg, #f4f1e8 0%, #fbfaf7 48%, #eef5f3 100%);
}

.custom-auth-form-panel {
    position: relative;
    overflow: hidden;
    border-inline-end: 1px solid color-mix(in srgb, #0f3d3e 10%, transparent);
}

.custom-auth-form-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, color-mix(in srgb, #ffffff 55%, transparent), transparent 26%),
        radial-gradient(circle at top left, color-mix(in srgb, var(--primary-200) 30%, transparent), transparent 36%);
    pointer-events: none;
}

.custom-auth-form-wrapper {
    position: relative;
    z-index: 1;
    max-width: 27rem;
}

.custom-auth-form-wrapper .fi-logo {
    max-height: 4.75rem;
}

.custom-auth-empty-panel {
    overflow: hidden;
}

.login-empty-panel {
    position: relative;
    display: flex;
    min-height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 2rem;
    padding: clamp(2rem, 2vw + 1.5rem, 3.5rem);
}

.login-empty-panel::before,
.login-empty-panel::after {
    content: '';
    position: absolute;
    border-radius: 9999px;
    filter: blur(0);
    pointer-events: none;
}

.login-empty-panel::before {
    inset-inline-start: -6rem;
    top: -5rem;
    height: 16rem;
    width: 16rem;
    background: color-mix(in srgb, #f3c969 52%, transparent);
    opacity: 0.26;
}

.login-empty-panel::after {
    inset-inline-end: -4rem;
    bottom: -6rem;
    height: 18rem;
    width: 18rem;
    background: color-mix(in srgb, #53b7a6 46%, transparent);
    opacity: 0.22;
}

.login-empty-panel__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, #ffffff 10%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, #ffffff 10%, transparent) 1px, transparent 1px);
    background-position: center center;
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
    opacity: 0.45;
}

.login-empty-panel__content {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(100%, 70rem);
    gap: 2rem;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 540px);
}

.login-empty-panel__eyebrow {
    color: color-mix(in srgb, #ffffff 72%, transparent);
    letter-spacing: 0.08em;
}

.login-empty-panel__title {
    color: #ffffff;
    text-wrap: balance;
}

.login-empty-panel__copy {
    color: color-mix(in srgb, #ffffff 78%, transparent);
}

.login-empty-panel__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.login-empty-panel__chip {
    border: 1px solid color-mix(in srgb, #ffffff 14%, transparent);
    background: color-mix(in srgb, #ffffff 10%, transparent);
    color: #f8fafc;
    backdrop-filter: blur(10px);
}

.login-empty-panel__stage {
    position: relative;
}

.login-empty-panel__stage::before {
    content: '';
    position: absolute;
    inset: 12% 10% auto;
    height: 74%;
    border-radius: 2rem;
    background: linear-gradient(180deg, color-mix(in srgb, #ffffff 14%, transparent), transparent);
    filter: blur(28px);
    opacity: 0.9;
}

.login-empty-panel__card {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    border: 1px solid color-mix(in srgb, #ffffff 14%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, #ffffff 16%, transparent), color-mix(in srgb, #0b2f30 82%, transparent));
    box-shadow: 0 30px 80px rgba(6, 23, 24, 0.35);
}

.login-empty-panel__card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, #ffffff 8%, transparent), transparent 30%);
    pointer-events: none;
}

.login-empty-panel__floating {
    position: absolute;
    z-index: 2;
    min-width: 11rem;
    border: 1px solid color-mix(in srgb, #ffffff 16%, transparent);
    background: color-mix(in srgb, #072324 82%, transparent);
    box-shadow: 0 22px 40px rgba(6, 23, 24, 0.32);
    backdrop-filter: blur(16px);
}

.login-empty-panel__floating--top {
    inset-inline-start: -1rem;
    top: 12%;
}

.login-empty-panel__floating--bottom {
    inset-inline-end: -1.25rem;
    bottom: 11%;
}

@media (max-width: 1279px) {
    .login-empty-panel__content {
        grid-template-columns: minmax(0, 1fr);
    }

    .login-empty-panel__stage {
        max-width: 34rem;
        margin-inline: auto;
    }
}