/* Custom Login Page Background with Circuit Lines */

body.login-page, body[data-path="login"] {
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #ffffff 45%,
        #edf5ff 60%,
        #cfe3f7 72%,
        #a9cbe6 83%,
        #7fb0cc 92%,
        #5a8faa 100%
    ) !important;
    position: relative;
    overflow: hidden;
}

/* Circuit board SVG overlay at bottom right */
body.login-page::after, body[data-path="login"]::after {
    content: '';
    position: fixed;
    bottom: 0;
    right: 0;
    width: 600px;
    height: 500px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='500' viewBox='0 0 600 500'%3E%3Cg fill='none' stroke='%23000000' stroke-width='1.5' opacity='0.4'%3E%3C!-- Horizontal lines --%3E%3Cline x1='0' y1='100' x2='200' y2='100'/%3E%3Cline x1='250' y1='100' x2='400' y2='100'/%3E%3Cline x1='450' y1='100' x2='600' y2='100'/%3E%3Cline x1='0' y1='200' x2='150' y2='200'/%3E%3Cline x1='200' y1='200' x2='350' y2='200'/%3E%3Cline x1='400' y1='200' x2='600' y2='200'/%3E%3Cline x1='0' y1='300' x2='100' y2='300'/%3E%3Cline x1='150' y1='300' x2='300' y2='300'/%3E%3Cline x1='350' y1='300' x2='500' y2='300'/%3E%3Cline x1='550' y1='300' x2='600' y2='300'/%3E%3Cline x1='0' y1='400' x2='200' y2='400'/%3E%3Cline x1='250' y1='400' x2='450' y2='400'/%3E%3Cline x1='500' y1='400' x2='600' y2='400'/%3E%3C!-- Vertical lines --%3E%3Cline x1='100' y1='0' x2='100' y2='150'/%3E%3Cline x1='100' y1='200' x2='100' y2='350'/%3E%3Cline x1='100' y1='400' x2='100' y2='500'/%3E%3Cline x1='200' y1='0' x2='200' y2='100'/%3E%3Cline x1='200' y1='150' x2='200' y2='300'/%3E%3Cline x1='200' y1='350' x2='200' y2='500'/%3E%3Cline x1='300' y1='0' x2='300' y2='200'/%3E%3Cline x1='300' y1='250' x2='300' y2='400'/%3E%3Cline x1='300' y1='450' x2='300' y2='500'/%3E%3Cline x1='400' y1='0' x2='400' y2='100'/%3E%3Cline x1='400' y1='150' x2='400' y2='300'/%3E%3Cline x1='400' y1='350' x2='400' y2='500'/%3E%3Cline x1='500' y1='0' x2='500' y2='200'/%3E%3Cline x1='500' y1='250' x2='500' y2='400'/%3E%3Cline x1='500' y1='450' x2='500' y2='500'/%3E%3C!-- Corner connectors --%3E%3Crect x='96' y='96' width='8' height='8' rx='4' fill='%2300d4ff' opacity='0.8'/%3E%3Crect x='196' y='96' width='8' height='8' rx='4' fill='%2300d4ff' opacity='0.8'/%3E%3Crect x='296' y='96' width='8' height='8' rx='4' fill='%2300d4ff' opacity='0.8'/%3E%3Crect x='396' y='96' width='8' height='8' rx='4' fill='%2300d4ff' opacity='0.8'/%3E%3Crect x='496' y='96' width='8' height='8' rx='4' fill='%2300d4ff' opacity='0.8'/%3E%3Crect x='96' y='196' width='8' height='8' rx='4' fill='%2300d4ff' opacity='0.8'/%3E%3Crect x='196' y='196' width='8' height='8' rx='4' fill='%2300d4ff' opacity='0.8'/%3E%3Crect x='296' y='196' width='8' height='8' rx='4' fill='%2300d4ff' opacity='0.8'/%3E%3Crect x='396' y='196' width='8' height='8' rx='4' fill='%2300d4ff' opacity='0.8'/%3E%3Crect x='496' y='196' width='8' height='8' rx='4' fill='%2300d4ff' opacity='0.8'/%3E%3Crect x='96' y='296' width='8' height='8' rx='4' fill='%2300d4ff' opacity='0.8'/%3E%3Crect x='196' y='296' width='8' height='8' rx='4' fill='%2300d4ff' opacity='0.8'/%3E%3Crect x='296' y='296' width='8' height='8' rx='4' fill='%2300d4ff' opacity='0.8'/%3E%3Crect x='396' y='296' width='8' height='8' rx='4' fill='%2300d4ff' opacity='0.8'/%3E%3Crect x='496' y='296' width='8' height='8' rx='4' fill='%2300d4ff' opacity='0.8'/%3E%3Crect x='96' y='396' width='8' height='8' rx='4' fill='%2300d4ff' opacity='0.8'/%3E%3Crect x='196' y='396' width='8' height='8' rx='4' fill='%2300d4ff' opacity='0.8'/%3E%3Crect x='296' y='396' width='8' height='8' rx='4' fill='%2300d4ff' opacity='0.8'/%3E%3Crect x='396' y='396' width='8' height='8' rx='4' fill='%2300d4ff' opacity='0.8'/%3E%3Crect x='496' y='396' width='8' height='8' rx='4' fill='%2300d4ff' opacity='0.8'/%3E%3C!-- IC chips --%3E%3Crect x='120' y='120' width='60' height='40' rx='4' fill='none' stroke='%2300d4ff' stroke-width='1.5' opacity='0.5'/%3E%3Crect x='320' y='220' width='60' height='40' rx='4' fill='none' stroke='%2300d4ff' stroke-width='1.5' opacity='0.5'/%3E%3Crect x='220' y='320' width='60' height='40' rx='4' fill='none' stroke='%2300d4ff' stroke-width='1.5' opacity='0.5'/%3E%3Crect x='420' y='120' width='60' height='40' rx='4' fill='none' stroke='%2300d4ff' stroke-width='1.5' opacity='0.5'/%3E%3Crect x='420' y='320' width='60' height='40' rx='4' fill='none' stroke='%2300d4ff' stroke-width='1.5' opacity='0.5'/%3E%3C!-- Chip pins --%3E%3Cline x1='120' y1='130' x2='100' y2='130' stroke='%2300d4ff' stroke-width='1'/%3E%3Cline x1='120' y1='150' x2='100' y2='150' stroke='%2300d4ff' stroke-width='1'/%3E%3Cline x1='180' y1='130' x2='200' y2='130' stroke='%2300d4ff' stroke-width='1'/%3E%3Cline x1='180' y1='150' x2='200' y2='150' stroke='%2300d4ff' stroke-width='1'/%3E%3Cline x1='320' y1='230' x2='300' y2='230' stroke='%2300d4ff' stroke-width='1'/%3E%3Cline x1='320' y1='250' x2='300' y2='250' stroke='%2300d4ff' stroke-width='1'/%3E%3Cline x1='380' y1='230' x2='400' y2='230' stroke='%2300d4ff' stroke-width='1'/%3E%3Cline x1='380' y1='250' x2='400' y2='250' stroke='%2300d4ff' stroke-width='1'/%3E%3C!-- Animated pulse circles --%3E%3Ccircle cx='100' cy='100' r='4' fill='%2300d4ff' opacity='0.9'/%3E%3Ccircle cx='300' cy='200' r='4' fill='%2300d4ff' opacity='0.9'/%3E%3Ccircle cx='500' cy='300' r='4' fill='%2300d4ff' opacity='0.9'/%3E%3Ccircle cx='200' cy='400' r='4' fill='%2300d4ff' opacity='0.9'/%3E%3Ccircle cx='400' cy='100' r='4' fill='%2300ff88' opacity='0.9'/%3E%3Ccircle cx='100' cy='300' r='4' fill='%2300ff88' opacity='0.9'/%3E%3Ccircle cx='500' cy='400' r='4' fill='%2300ff88' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

/* Ensure the login form stays on top */
.page-content-wrapper {
    position: relative;
    z-index: 1;
}

/* Style the login card */
.for-login .page-card,
.for-forgot .page-card,
.for-signup .page-card {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 50, 100, 0.15) !important;
    border: 1px solid rgba(0, 100, 200, 0.2) !important;
}

/* Animated glow effect */
@keyframes circuitPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.9; }
}

body.login-page::after, body[data-path="login"]::after {
    animation: circuitPulse 3s ease-in-out infinite;
}