/* =============================================================================
   AUTH PAGE COMPONENTS
   All styles related to authentication pages and modals
   ============================================================================= */

/* Auth modal content background - theme aware */
.auth-modal-content {
    position: relative;
    z-index: 10000;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--app-text-color, var(--depictio-text-light));
    transition: background 0.3s ease, color 0.3s ease;
}

/* Remove all borders from auth modal container */
#auth-modal .mantine-Modal-content,
#auth-modal .mantine-Modal-body,
#auth-modal .mantine-Modal-inner {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Remove modal footer border in auth modals */
.auth-modal-content .mantine-Stack-root:last-child,
.auth-modal-content .mantine-Modal-content .mantine-Stack-root:last-child {
    border-top: none !important;
}

/* Manual theme overrides for modal content */
body.theme-manual-light .auth-modal-content {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--depictio-text-light) !important;
}

body.theme-manual-dark .auth-modal-content {
    background: rgba(37, 38, 43, 0.95) !important;
    color: var(--depictio-text-dark) !important;
}

/* Auth background positioning - GPU optimized */
#auth-background {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9998 !important;
    overflow: hidden;
    /* Enable hardware acceleration */
    transform: translateZ(0);
    will-change: transform;
}

/* Auth page layout - when AppShell is hidden */
#page-content:has(#auth-background) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 9997 !important;
}

/* Ensure auth page content takes full viewport */
.auth-page-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 9997 !important;
}

/* Hide header/sidebar on auth pages */
body.auth-page #header-content,
body.auth-page #sidebar,
body.auth-page .mantine-AppShell-navbar,
body.auth-page .mantine-AppShell-header {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Triangle particles container - GPU optimized with background movement */
#triangle-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    /* Enable hardware acceleration */
    transform: translateZ(0);
    will-change: transform;
    /* Add subtle background drift */
    animation: backgroundDrift 60s infinite ease-in-out;
}

/* Base triangle particle styles */
.triangle-particle {
    position: absolute;
    /* Enable hardware acceleration for smooth animations */
    transform: translateZ(0);
    will-change: transform, opacity;
    /* Smooth transitions */
    transition: none;
    /* Base opacity */
    opacity: 0.3;
    background-size: contain;
    background-repeat: no-repeat;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

/* Small triangles - 12x12px */
.triangle-small {
    width: 12px;
    height: 12px;
}

/* Medium triangles - 18x18px */
.triangle-medium {
    width: 18px;
    height: 18px;
}

/* Large triangles - 24x24px */
.triangle-large {
    width: 24px;
    height: 24px;
}

/* Extra large triangles - 32x32px */
.triangle-xlarge {
    width: 32px;
    height: 32px;
    opacity: 0.25; /* Slightly more transparent for larger triangles */
}

/* Apply animations to different triangle types with smoother timing */
.triangle-anim-1 {
    animation: triangleFloat 8s infinite linear;
}

.triangle-anim-2 {
    animation: triangleDrift 9s infinite linear;
}

.triangle-anim-3 {
    animation: trianglePulse 7s infinite linear;
}

.triangle-anim-4 {
    animation: triangleRotate 10s infinite linear;
}

.triangle-anim-5 {
    animation: triangleOrbit 8.5s infinite linear;
}

.triangle-anim-6 {
    animation: triangleWave 9.5s infinite linear;
}

/* Triangle particles container - used by auth page */
.triangle-particles-container {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateZ(0);
    will-change: transform;
}

/* =============================================================================
   GOOGLE OAUTH BUTTON STYLING
   Enhanced styling for Google sign-in button with theme compatibility
   ============================================================================= */

/* Google OAuth button base styling */
#google-oauth-button {
    background-color: var(--app-surface-color, #ffffff) !important;
    border-color: var(--app-border-color, #dadce0) !important;
    color: var(--app-text-color, #3c4043) !important;
    font-weight: 500 !important;
    letter-spacing: 0.25px !important;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.08), 0 1px 3px 1px rgba(60, 64, 67, 0.06) !important;
    transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

/* Google OAuth button hover state */
#google-oauth-button:hover {
    background-color: var(--app-surface-color, #f8f9fa) !important;
    border-color: #4285f4 !important;
    box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.08), 0 4px 8px 3px rgba(60, 64, 67, 0.06) !important;
    transform: translateY(-1px) !important;
}

/* Google OAuth button focus state */
#google-oauth-button:focus {
    outline: none !important;
    border-color: #4285f4 !important;
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1) !important;
}

/* Google OAuth button active state */
#google-oauth-button:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.08) !important;
}

/* Manual theme overrides for Google button */
body.theme-dark #google-oauth-button {
    background-color: var(--app-surface-color, #25262b) !important;
    border-color: var(--app-border-color, #373A40) !important;
    color: var(--app-text-color, #C1C2C5) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15) !important;
}

body.theme-dark #google-oauth-button:hover {
    background-color: var(--app-surface-color, #2C2E33) !important;
    border-color: #4285f4 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important;
}

body.theme-light #google-oauth-button {
    background-color: var(--app-surface-color, #ffffff) !important;
    border-color: var(--app-border-color, #dadce0) !important;
    color: var(--app-text-color, #3c4043) !important;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.08), 0 1px 3px 1px rgba(60, 64, 67, 0.06) !important;
}

body.theme-light #google-oauth-button:hover {
    background-color: var(--app-surface-color, #f8f9fa) !important;
    border-color: #4285f4 !important;
    box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.08), 0 4px 8px 3px rgba(60, 64, 67, 0.06) !important;
}

/* Google icon styling */
#google-oauth-button .iconify {
    opacity: 1 !important;
    filter: none !important;
}

/* Ensure proper spacing and alignment */
#google-oauth-button > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}