/* Custom login page styling for EPPH CRM */
/* Reset default margins and paddings */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
}

body.login {
    background: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
}

/* Background watermark logo */
body.login::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("/static/epph-logo.a6c203bf3a45.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.2;
    z-index: 1;
    pointer-events: none;
}

/* Center the login container */
.login-container,
#container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 0;
    background: none;
}

/* Login form styling */
.login-form,
#login-form {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 159, 231, 0.15), 0 8px 16px rgba(0, 145, 218, 0.1);
    border: 2px solid rgba(0, 159, 231, 0.2);
    position: relative;
    overflow: hidden;
}

/* Login form glass effect */
.login-form::before,
#login-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    pointer-events: none;
}

/* Header styling */
.login-header h1,
#header h1 {
    color: #333;
    font-size: 2.5em;
    margin-bottom: 10px;
    text-align: center;
    font-weight: 300;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.login-header h2,
#header h2 {
    color: #666;
    font-size: 1.2em;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 300;
}

/* Logo styling */
.login-logo {
    display: block;
    margin: 0 auto 30px;
    max-width: 150px;
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

/* Form field styling */
.form-row {
    margin-bottom: 20px;
}

.form-row label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: 500;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-row input[type="text"],
.form-row input[type="password"] {
    width: 100% !important;
    padding: 15px 20px;
    border: 1px solid rgba(0, 159, 231, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.95);
    color: rgb(31, 41, 55);
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-row input[type="text"]:focus,
.form-row input[type="password"]:focus {
    outline: none;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 159, 231, 0.5);
    box-shadow: 0 0 20px rgba(0, 159, 231, 0.3);
    color: rgb(17, 24, 39);
    transform: translateY(-2px);
}

/* Light mode placeholders */
.form-row input[type="text"]::placeholder,
.form-row input[type="password"]::placeholder {
    color: rgb(107, 114, 128);
}

/* Submit button styling */
.submit-row {
    text-align: center;
    margin-top: 30px;
}

.submit-row input[type="submit"] {
    background: linear-gradient(45deg, rgb(0, 159, 231), rgb(0, 145, 218)) !important;
    color: white !important;
    border: none !important;
    padding: 15px 40px !important;
    border-radius: 25px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 5px 15px rgba(0, 159, 231, 0.3) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.submit-row input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(45deg, rgb(56, 189, 248), rgb(0, 159, 231)) !important;
    box-shadow: 0 8px 25px rgba(0, 159, 231, 0.4) !important;
}

/* Remove any default margins and paddings that might interfere */
#content {
    padding: 0 !important;
    margin: 0 !important;
}

#content-main {
    padding: 0 !important;
    margin: 0 !important;
}

/* Responsive design */
@media (max-width: 768px) {
    body.login::before {
        width: 90vw;
        height: 70vh;
    }
    
    .login-container,
    #container {
        max-width: 350px;
        padding: 20px;
    }
    
    .login-form,
    #login-form {
        padding: 30px 25px;
    }
    
    .login-header h1,
    #header h1 {
        font-size: 2em;
    }
}

/* Django admin specific overrides */
.login #container {
    width: 100% !important;
    max-width: 400px !important;
    position: relative !important;
    z-index: 2 !important;
}

.login #content {
    padding: 0 !important;
}

.login #content-main {
    padding: 0 !important;
}

.login .form-row {
    margin-bottom: 20px !important;
}

/* Ensure the login form is properly centered */
.login {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
}

/* Remove any inherited styles that might interfere */
.login * {
    box-sizing: border-box;
}

/* Make sure the form takes the full container width */
.login #login-form {
    width: 100% !important;
    margin: 0 !important;
}

/* Additional styling for Django Unfold compatibility */
.unfold-login-form {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 40px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Unfold specific selectors */
.unfold body.login {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.unfold .login-container {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
}

/* AGGRESSIVE CENTERING OVERRIDES - Added to fix persistent centering issues */

/* Force full viewport usage and remove any framework borders/margins */
html {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

body {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

/* Force the login page to use full viewport */
body.login,
.login,
.unfold body.login {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    box-sizing: border-box !important;
}

/* Remove any potential wrapper margins/padding that interfere */
.login #container,
.login .login-container,
.unfold #container,
.unfold .login-container {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-sizing: border-box !important;
}

/* Remove any content wrapper styling that might interfere */
.login #content,
.login #content-main,
.unfold #content,
.unfold #content-main {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Force the login form to be properly styled */
.login #login-form,
.login .login-form,
.unfold #login-form,
.unfold .login-form,
.unfold-login-form {
    width: 100% !important;
    margin: 0 !important;
    padding: 40px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(15px) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 40px rgba(0, 159, 231, 0.15), 0 8px 16px rgba(0, 145, 218, 0.1) !important;
    border: 2px solid rgba(0, 159, 231, 0.2) !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Force proper text contrast in light mode */
.login #login-form input[type="text"],
.login #login-form input[type="password"],
.login .login-form input[type="text"],
.login .login-form input[type="password"],
.unfold #login-form input[type="text"],
.unfold #login-form input[type="password"],
.unfold .login-form input[type="text"],
.unfold .login-form input[type="password"],
.unfold-login-form input[type="text"],
.unfold-login-form input[type="password"] {
    background: rgba(255, 255, 255, 0.95) !important;
    color: rgb(31, 41, 55) !important;
    border: 1px solid rgba(0, 159, 231, 0.2) !important;
    font-size: 16px !important;
    padding: 15px 20px !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.login #login-form input[type="text"]:focus,
.login #login-form input[type="password"]:focus,
.login .login-form input[type="text"]:focus,
.login .login-form input[type="password"]:focus,
.unfold #login-form input[type="text"]:focus,
.unfold #login-form input[type="password"]:focus,
.unfold .login-form input[type="text"]:focus,
.unfold .login-form input[type="password"]:focus,
.unfold-login-form input[type="text"]:focus,
.unfold-login-form input[type="password"]:focus {
    background: rgba(255, 255, 255, 1) !important;
    color: rgb(17, 24, 39) !important;
    border: 1px solid rgba(0, 159, 231, 0.5) !important;
    box-shadow: 0 0 20px rgba(0, 159, 231, 0.3) !important;
    outline: none !important;
    transform: translateY(-2px) !important;
}

/* Force proper label contrast in light mode */
.login #login-form label,
.login .login-form label,
.unfold #login-form label,
.unfold .login-form label,
.unfold-login-form label {
    color: rgb(75, 85, 99) !important;
    font-weight: 600 !important;
    font-size: 0.9em !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Remove any purple border or unwanted styling */
.login *,
.unfold * {
    box-sizing: border-box !important;
}

/* Remove any default admin styling that might create borders */
.login .form-row,
.unfold .form-row {
    margin-bottom: 20px !important;
    border: none !important;
    background: none !important;
}

/* Ensure no wrapper elements have unwanted styling */
.login .wrapper,
.login .main,
.unfold .wrapper,
.unfold .main {
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Final fallback to ensure centering works */
@media screen {
    body.login {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* NUCLEAR OVERRIDES - Remove ALL purple borders and wrappers */

/* Target any possible wrapper div that might have purple border */
.login div,
.unfold div,
body.login div,
body.unfold div {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Specifically target common Django admin wrapper classes */
.login .container,
.login .wrapper,
.login .main,
.login .content,
.login .admin,
.unfold .container,
.unfold .wrapper,
.unfold .main,
.unfold .content,
.unfold .admin {
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Remove any potential purple/violet borders from all elements */
.login *,
.unfold * {
    border-color: transparent !important;
    border: none !important;
    outline: none !important;
}

/* Override any potential Django Unfold theme colors */
.login,
.unfold {
    --primary-color: transparent !important;
    --secondary-color: transparent !important;
    --accent-color: transparent !important;
    --border-color: transparent !important;
    --unfold-primary: transparent !important;
    --unfold-secondary: transparent !important;
}

/* Force remove any wrapper styling around the login form */
.login > *,
.unfold > *,
body.login > *,
body.unfold > * {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Target specific elements that might be creating the purple border */
.login .form,
.login .form-container,
.login .login-wrapper,
.login .admin-wrapper,
.unfold .form,
.unfold .form-container,
.unfold .login-wrapper,
.unfold .admin-wrapper {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Override any CSS custom properties that might be setting purple colors */
body.login {
    --border-color: transparent !important;
    --primary-border: transparent !important;
    --secondary-border: transparent !important;
    --unfold-border: transparent !important;
    color-scheme: light !important;
}

/* Remove any potential ::before or ::after pseudo-elements causing borders */
.login *::before,
.login *::after,
.unfold *::before,
.unfold *::after {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Exception: Keep our background watermark */
body.login::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-image: url("/static/epph-logo.a6c203bf3a45.png") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 0.2 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}