/* ============================================================
   SIPRAK — Auth Pages Stylesheet (Clean Minimalist Glassmorphism)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg-primary: #f1f5f9;
    --bg-secondary: #ffffff;
    --card-bg: rgba(255, 255, 255, 0.75);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --border: rgba(226, 232, 240, 0.8);
    --shadow: 0 20px 25px -5px rgba(79, 70, 229, 0.05), 0 10px 10px -5px rgba(79, 70, 229, 0.04);
    
    /* Soft Mesh Gradient Glows */
    --glow-1: rgba(99, 102, 241, 0.12); /* Soft Indigo */
    --glow-2: rgba(236, 72, 153, 0.09); /* Soft Pink */
    --glow-3: rgba(45, 212, 191, 0.08); /* Soft Teal */
    --glow-4: rgba(79, 70, 229, 0.06);  /* Extra Indigo Accent */
    
    /* Mathematical Waves Graphic - Perfectly Symmetrical Left-to-Right */
    --wave-graphic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0%200%201300%20400' width='100%25' height='100%25'%3E%3Cg fill='none' stroke='%234f46e5' stroke-width='0.8' stroke-opacity='0.22'%3E%3Cpath d='M 0,60 C 300,100 350,300 650,340 C 950,300 1000,100 1300,60'/%3E%3Cpath d='M 0,68 C 300,104 350,294 650,332 C 950,294 1000,104 1300,68'/%3E%3Cpath d='M 0,76 C 300,108 350,288 650,324 C 950,288 1000,108 1300,76'/%3E%3Cpath d='M 0,84 C 300,112 350,282 650,316 C 950,282 1000,112 1300,84'/%3E%3Cpath d='M 0,92 C 300,116 350,276 650,308 C 950,276 1000,116 1300,92'/%3E%3Cpath d='M 0,100 C 300,120 350,270 650,300 C 950,270 1000,120 1300,100'/%3E%3Cpath d='M 0,108 C 300,124 350,264 650,292 C 950,264 1000,124 1300,108'/%3E%3Cpath d='M 0,116 C 300,128 350,258 650,284 C 950,258 1000,128 1300,116'/%3E%3Cpath d='M 0,124 C 300,132 350,252 650,276 C 950,252 1000,132 1300,124'/%3E%3Cpath d='M 0,132 C 300,136 350,246 650,268 C 950,246 1000,136 1300,132'/%3E%3Cpath d='M 0,140 C 300,140 350,240 650,260 C 950,240 1000,140 1300,140'/%3E%3Cpath d='M 0,148 C 300,144 350,234 650,252 C 950,234 1000,144 1300,148'/%3E%3Cpath d='M 0,156 C 300,148 350,228 650,244 C 950,228 1000,148 1300,156'/%3E%3Cpath d='M 0,164 C 300,152 350,222 650,236 C 950,222 1000,152 1300,164'/%3E%3Cpath d='M 0,172 C 300,156 350,216 650,228 C 950,216 1000,156 1300,172'/%3E%3Cpath d='M 0,340 C 300,300 350,100 650,60 C 950,100 1000,300 1300,340'/%3E%3Cpath d='M 0,332 C 300,296 350,106 650,68 C 950,106 1000,296 1300,332'/%3E%3Cpath d='M 0,324 C 300,292 350,112 650,76 C 950,112 1000,292 1300,324'/%3E%3Cpath d='M 0,316 C 300,288 350,118 650,84 C 950,118 1000,288 1300,316'/%3E%3Cpath d='M 0,308 C 300,284 350,124 650,92 C 950,124 1000,284 1300,308'/%3E%3Cpath d='M 0,300 C 300,280 350,130 650,100 C 950,130 1000,280 1300,300'/%3E%3Cpath d='M 0,292 C 300,276 350,136 650,108 C 950,136 1000,276 1300,292'/%3E%3Cpath d='M 0,284 C 300,272 350,142 650,116 C 950,142 1000,272 1300,284'/%3E%3Cpath d='M 0,276 C 300,268 350,148 650,124 C 950,148 1000,268 1300,276'/%3E%3Cpath d='M 0,268 C 300,264 350,154 650,132 C 950,154 1000,264 1300,268'/%3E%3Cpath d='M 0,260 C 300,260 350,160 650,140 C 950,160 1000,260 1300,260'/%3E%3Cpath d='M 0,252 C 300,256 350,166 650,148 C 950,166 1000,256 1300,252'/%3E%3Cpath d='M 0,244 C 300,252 350,172 650,156 C 950,172 1000,252 1300,244'/%3E%3Cpath d='M 0,236 C 300,248 350,178 650,164 C 950,178 1000,248 1300,236'/%3E%3Cpath d='M 0,228 C 300,244 350,184 650,172 C 950,184 1000,244 1300,228'/%3E%3C/g%3E%3C/svg%3E");
}

[data-theme="dark"] {
    --bg-primary: #080b11;
    --bg-secondary: #0f172a;
    --card-bg: rgba(15, 23, 42, 0.75);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --border: rgba(51, 65, 85, 0.5);
    --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    
    /* Mesh Gradients */
    --glow-1: rgba(99, 102, 241, 0.12);
    --glow-2: rgba(236, 72, 153, 0.08);
    --glow-3: rgba(45, 212, 191, 0.08);
    --glow-4: rgba(99, 102, 241, 0.06);
    
    /* Mathematical Waves Graphic - Flat, Elongated, Symmetrical for Dark Mode */
    --wave-graphic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0%200%201600%20300' width='100%25' height='100%25'%3E%3Cg fill='none' stroke='%2338bdf8' stroke-width='0.8' stroke-opacity='0.38'%3E%3Cpath d='M 0,60 C 350,80 450,220 800,240 C 1150,220 1250,80 1600,60'/%3E%3Cpath d='M 0,65 C 350,83 450,216 800,235 C 1150,216 1250,83 1600,65'/%3E%3Cpath d='M 0,70 C 350,86 450,212 800,230 C 1150,212 1250,86 1600,70'/%3E%3Cpath d='M 0,75 C 350,89 450,208 800,225 C 1150,208 1250,89 1600,75'/%3E%3Cpath d='M 0,80 C 350,92 450,204 800,220 C 1150,204 1250,92 1600,80'/%3E%3Cpath d='M 0,85 C 350,95 450,200 800,215 C 1150,200 1250,95 1600,85'/%3E%3Cpath d='M 0,90 C 350,98 450,196 800,210 C 1150,196 1250,98 1600,90'/%3E%3Cpath d='M 0,95 C 350,101 450,192 800,205 C 1150,192 1250,101 1600,95'/%3E%3Cpath d='M 0,100 C 350,104 450,188 800,200 C 1150,188 1250,104 1600,100'/%3E%3Cpath d='M 0,105 C 350,107 450,184 800,195 C 1150,184 1250,107 1600,105'/%3E%3Cpath d='M 0,110 C 350,110 450,180 800,190 C 1150,180 1250,110 1600,110'/%3E%3Cpath d='M 0,115 C 350,113 450,176 800,185 C 1150,176 1250,113 1600,115'/%3E%3Cpath d='M 0,120 C 350,116 450,172 800,180 C 1150,172 1250,116 1600,120'/%3E%3Cpath d='M 0,125 C 350,119 450,168 800,175 C 1150,168 1250,119 1600,125'/%3E%3Cpath d='M 0,130 C 350,122 450,164 800,170 C 1150,164 1250,122 1600,130'/%3E%3Cpath d='M 0,240 C 350,220 450,80 800,60 C 1150,80 1250,220 1600,240'/%3E%3Cpath d='M 0,235 C 350,217 450,84 800,65 C 1150,84 1250,217 1600,235'/%3E%3Cpath d='M 0,230 C 350,214 450,88 800,70 C 1150,88 1250,214 1600,230'/%3E%3Cpath d='M 0,225 C 350,211 450,92 800,75 C 1150,92 1250,211 1600,225'/%3E%3Cpath d='M 0,220 C 350,208 450,96 800,80 C 1150,96 1250,208 1600,220'/%3E%3Cpath d='M 0,215 C 350,205 450,100 800,85 C 1150,100 1250,205 1600,215'/%3E%3Cpath d='M 0,210 C 350,202 450,104 800,90 C 1150,104 1250,202 1600,210'/%3E%3Cpath d='M 0,205 C 350,199 450,108 800,95 C 1150,108 1250,199 1600,205'/%3E%3Cpath d='M 0,200 C 350,196 450,112 800,100 C 1150,112 1250,196 1600,200'/%3E%3Cpath d='M 0,195 C 350,193 450,116 800,105 C 1150,116 1250,193 1600,195'/%3E%3Cpath d='M 0,190 C 350,190 450,120 800,110 C 1150,120 1250,190 1600,190'/%3E%3Cpath d='M 0,185 C 350,187 450,124 800,115 C 1150,124 1250,187 1600,185'/%3E%3Cpath d='M 0,180 C 350,184 450,128 800,120 C 1150,128 1250,184 1600,180'/%3E%3Cpath d='M 0,175 C 350,181 450,132 800,125 C 1150,132 1250,181 1600,175'/%3E%3Cpath d='M 0,170 C 350,178 450,136 800,130 C 1150,136 1250,178 1600,170'/%3E%3C/g%3E%3C/svg%3E");
}}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
    overflow-x: hidden;
    font-size: 16px; /* Increased base font size */
    
    /* Modern Mesh Gradient Background */
    background-color: var(--bg-primary);
    background-image: 
        radial-gradient(circle at 10% 20%, var(--glow-1) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, var(--glow-2) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, var(--glow-3) 0%, transparent 50%),
        radial-gradient(circle at 80% 10%, var(--glow-4) 0%, transparent 35%);
    background-attachment: fixed;
    transition: background-color 0.5s, color 0.3s, background-image 0.5s;
}

/* Wave Accents for Landing Page Background */
body::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 550px;
    transform: translateY(-50%);
    background-image: var(--wave-graphic);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    pointer-events: none;
    z-index: 0;
    opacity: 0.95;
    animation: wave-float 25s ease-in-out infinite alternate;
}


@keyframes wave-float {
    0% {
        transform: translateY(-50%) scale(1);
    }
    100% {
        transform: translateY(-52%) scale(1.015);
    }
}


@media (max-width: 768px) {
    body::before {
        display: none;
    }
}

.auth-card {
    background-color: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 40px;
    max-width: 480px;
    width: 100%;
    position: relative;
    z-index: 1; /* Keep card above background graphics */
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px; /* Increased from 50px */
    height: 54px;
    background-color: var(--primary);
    border-radius: 12px;
    color: white;
    font-size: 26px; /* Increased from 24px */
    font-weight: 800;
    margin-bottom: 16px;
}

.auth-header h1 {
    font-size: 26px; /* Increased from 24px */
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.auth-header p {
    font-size: 15px; /* Increased from 14px */
    color: var(--text-secondary);
    line-height: 1.4;
}

.form-group {
    margin-bottom: 22px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-secondary);
    text-align: left;
}

.form-control {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

/* Chrome/Safari Autofill Styles override to match design */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover, 
.form-control:-webkit-autofill:focus, 
.form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--bg-secondary) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
    background-color: var(--bg-secondary);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    font-size: 14px;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    cursor: pointer;
}

.remember-me input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
    vertical-align: middle;
}

.remember-me label {
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    user-select: none;
    line-height: 1.2;
}

.forgot-password {
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
}

.forgot-password:hover {
    color: var(--primary-hover);
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
    padding: 0;
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.2s, transform 0.1s;
}

.btn:hover {
    background-color: var(--primary-hover);
}

.btn:active {
    transform: scale(0.985);
}

.auth-bottom {
    text-align: center;
    margin-top: 24px;
    font-size: 15px; /* Increased from 14px */
    color: var(--text-secondary);
}

.auth-bottom a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}
.auth-bottom a:hover {
    text-decoration: underline;
}

.alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px; /* Increased from 13px */
    font-weight: 500;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.2);
}

.alert-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.2);
}

/* Floating Theme Toggle in Auth Screen */
.theme-toggle-auth {
    position: absolute;
    top: 20px;
    right: 20px;
}