/* 10. AuthSimpleLayout Component */
.auth-layout {
    @apply flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10;
    background-color: var(--background);

    .auth-layout__container {
        @apply w-full max-w-sm;

        .auth-layout__inner {
            @apply flex flex-col gap-8;

            .auth-layout__header {
                @apply flex flex-col items-center gap-4;

                .auth-layout__logo-link {
                    @apply flex flex-col items-center gap-2 font-medium;

                    .auth-layout__logo-box {
                        @apply mb-1 flex h-9 w-9 items-center justify-center;
                        border-radius: var(--radius);
                        background-color: var(--sidebar-primary);

                        .auth-layout__logo {
                            @apply size-9 fill-current;
                            color: var(--sidebar-primary-foreground);
                        }
                    }
                }

                .auth-layout__title-box {
                    @apply space-y-2 text-center;

                    .auth-layout__title {
                        @apply text-xl font-medium;
                        color: var(--foreground);
                    }

                    .auth-layout__description {
                        @apply text-center text-sm;
                        color: var(--muted-foreground);
                    }
                }
            }
        }
    }
}