/* Layout */
.fi-simple-layout {
    background: url('/images/login_cover_image.jpeg') no-repeat center center;
    background-size: cover;
    min-height: 100vh;
    animation: bgZoom 20s ease-in-out infinite alternate;
}
@keyframes bgZoom {
    from { background-size: 100%; }
    to   { background-size: 108%; }
}

/* Overlay */
.fi-simple-main-ctn {
    background: linear-gradient(135deg,
        rgba(0,0,0,0.72) 0%,
        rgba(5,20,5,0.62) 50%,
        rgba(0,0,0,0.75) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Glass card */
.fi-simple-main {
    background: rgba(255,255,255,0.13) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4),
                inset 0 1px 0 rgba(255,255,255,0.2) !important;
    animation: cardIn 0.8s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes cardIn {
    from { opacity:0; transform:translateY(40px) scale(0.95); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}

/* Favicon orbit animation */
.fi-simple-main .fi-logo {
    position: relative;
    animation: corePulse 2.5s ease-in-out infinite;
}
@keyframes corePulse {
    0%,100% { filter: drop-shadow(0 0 0px rgba(34,197,94,0)); }
    50%      { filter: drop-shadow(0 0 8px rgba(34,197,94,0.8)); }
}

/* Input fields — remove yellow bg */
.fi-simple-main input[type="email"],
.fi-simple-main input[type="password"],
.fi-simple-main input[type="text"] {
    background: rgba(255,255,255,0.09) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 10px !important;
    color: rgba(255,255,255,0.88) !important;
    transition: border-color 0.2s, background 0.2s !important;
}
.fi-simple-main input:focus {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(34,197,94,0.5) !important;
    box-shadow: 0 0 0 2px rgba(34,197,94,0.15) !important;
}

/* Green button */
.fi-simple-main button[type="submit"] {
    background: linear-gradient(90deg, #15803d, #16a34a, #22c55e) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(34,197,94,0.4) !important;
    transition: transform 0.15s, filter 0.15s !important;
}
.fi-simple-main button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.08) !important;
    box-shadow: 0 8px 30px rgba(34,197,94,0.5) !important;
}
/* ── GREEN INPUT BOXES ── */
.fi-simple-main input[type="email"],
.fi-simple-main input[type="text"] {
    background: rgba(34,197,94,0.10) !important;
    border: 1.5px solid rgba(34,197,94,0.45) !important;
    border-left: 3px solid #22c55e !important;
    border-radius: 10px !important;
    color: black !important;
    transition: all 0.25s !important;
}

.fi-simple-main input[type="password"] {
    background: rgba(34,197,94,0.08) !important;
    border: 1.5px solid rgba(34,197,94,0.35) !important;
    border-left: 3px solid #22c55e !important;
    border-radius: 10px !important;
    color: black !important;
    transition: all 0.25s !important;
}

/* Focus glow */
.fi-simple-main input[type="email"]:focus,
.fi-simple-main input[type="password"]:focus,
.fi-simple-main input[type="text"]:focus {
    background: rgba(34,197,94,0.16) !important;
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.18),
                0 0 12px rgba(34,197,94,0.15) !important;
    outline: none !important;
}

/* Icons green */
.fi-simple-main .fi-input-wrapper svg,
.fi-simple-main [data-prefix] svg {
    color: #4ade80 !important;
}

/* Placeholder */
.fi-simple-main input::placeholder {
    color: rgba(134,239,172,0.45) !important;
}
/* Green focus state */
.fi-simple-main input:focus,
.fi-simple-main input:focus-visible {
    background: rgba(34,197,94,0.18) !important;
    border: 2px solid #22c55e !important;
    box-shadow:
        0 0 0 4px rgba(34,197,94,0.20),
        0 0 15px rgba(34,197,94,0.35) !important;
    outline: none !important;
}

/* Filament input wrapper focus */
.fi-input-wrp:focus-within,
.fi-fo-field-wrp:focus-within {
    border-radius: 10px !important;
    box-shadow:
        0 0 0 3px rgba(34,197,94,0.20),
        0 0 15px rgba(34,197,94,0.30) !important;
}
/* Logo Glow Animation */
.fi-simple-main .fi-logo {
    position: relative;
    z-index: 1;
    animation: logoGlow 3s ease-in-out infinite;
}

.fi-simple-main .fi-logo img,
.fi-simple-main .fi-logo svg {
    border-radius: 50%;
    animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoGlow {
    0%, 100% {
        filter:
            drop-shadow(0 0 5px rgba(34,197,94,0.30))
            drop-shadow(0 0 10px rgba(34,197,94,0.20));
    }

    50% {
        filter:
            drop-shadow(0 0 12px rgba(34,197,94,0.80))
            drop-shadow(0 0 25px rgba(34,197,94,0.60))
            drop-shadow(0 0 40px rgba(34,197,94,0.40));
    }
}

@keyframes logoFloat {
    0%,100% {
        transform: translateY(0px) scale(1);
    }

    50% {
        transform: translateY(-4px) scale(1.03);
    }
}
.fi-simple-main .fi-logo::before {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(34,197,94,0.35) 0%,
        rgba(34,197,94,0.15) 40%,
        transparent 75%
    );
    animation: auraPulse 3s ease-in-out infinite;
    z-index: -1;
}

@keyframes auraPulse {
    0%,100% {
        transform: scale(0.95);
        opacity: .5;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}
/* Sidebar / Topbar Brand Logo */
.fi-logo,
.fi-sidebar-header .fi-logo,
.fi-topbar .fi-logo {
    animation: logoGlow 2.5s ease-in-out infinite !important;
}

@keyframes logoGlow {
    0%,100% {
        filter:
            drop-shadow(0 0 5px rgba(34,197,94,.4))
            drop-shadow(0 0 10px rgba(34,197,94,.2));
    }

    50% {
        filter:
            drop-shadow(0 0 10px rgba(34,197,94,.9))
            drop-shadow(0 0 20px rgba(34,197,94,.7))
            drop-shadow(0 0 35px rgba(34,197,94,.5));
    }
}
.fi-logo span,
.fi-logo-text {
    text-shadow:
        0 0 8px rgba(34,197,94,.7),
        0 0 15px rgba(34,197,94,.5);
}