/* Login page: white form with Propella logo; background = faint mix of logo colors */

/* site.css legacy template adds body padding-top: 50px — stacks under the fixed nav as a white strip */
body:has(.login-page-modern) {
    padding-top: 0 !important;
}

.login-page-modern {
    position: relative;
    min-height: calc(100vh - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    overflow: hidden;
}

/* Background: reduced opacity so stars & rockets are visible */
.login-page-modern .login-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(165deg,
        rgba(15, 122, 52, 0.06) 0%,
        rgba(69, 66, 66, 0.04) 30%,
        rgba(15, 122, 52, 0.03) 50%,
        rgba(44, 44, 44, 0.05) 70%,
        rgba(15, 122, 52, 0.04) 100%);
    z-index: 0;
}

/* Twinkling dots – visible, green/grey tint */
.login-page-modern .login-stars {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(15, 122, 52, 0.5), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(69, 66, 66, 0.4), transparent),
        radial-gradient(1.5px 1.5px at 90px 40px, rgba(15, 122, 52, 0.45), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(69, 66, 66, 0.35), transparent),
        radial-gradient(1.5px 1.5px at 160px 120px, rgba(15, 122, 52, 0.42), transparent),
        radial-gradient(2px 2px at 200px 50px, rgba(44, 44, 44, 0.38), transparent),
        radial-gradient(1.5px 1.5px at 250px 180px, rgba(15, 122, 52, 0.4), transparent),
        radial-gradient(2px 2px at 300px 90px, rgba(69, 66, 66, 0.35), transparent),
        radial-gradient(1.5px 1.5px at 350px 150px, rgba(15, 122, 52, 0.45), transparent),
        radial-gradient(2px 2px at 80px 200px, rgba(44, 44, 44, 0.32), transparent),
        radial-gradient(1.5px 1.5px at 180px 220px, rgba(15, 122, 52, 0.38), transparent);
    background-size: 400px 250px;
    animation: login-stars-twinkle 5s ease-in-out infinite;
    opacity: 0.9;
}

@keyframes login-stars-twinkle {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}

.login-page-modern .login-stars-2 {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        radial-gradient(1px 1px at 60px 100px, rgba(15, 122, 52, 0.42), transparent),
        radial-gradient(1px 1px at 150px 30px, rgba(69, 66, 66, 0.35), transparent),
        radial-gradient(1px 1px at 280px 160px, rgba(15, 122, 52, 0.38), transparent),
        radial-gradient(1px 1px at 100px 180px, rgba(69, 66, 66, 0.3), transparent);
    background-size: 350px 220px;
    animation: login-stars-twinkle 4s ease-in-out infinite 0.5s;
    opacity: 0.8;
}

/* Little rockets – visible, propel concept */
.login-page-modern .login-rocket {
    position: absolute;
    z-index: 2;
    font-size: 1rem;
    opacity: 0.45;
    animation: login-rocket-propel 14s linear infinite;
}
.login-page-modern .login-rocket::before {
    content: "🚀";
}
.login-page-modern .login-rocket:nth-child(1) { left: 8%;  animation-delay: 0s;   font-size: 0.85rem; }
.login-page-modern .login-rocket:nth-child(2) { left: 22%; animation-delay: -3s;  font-size: 0.7rem;  }
.login-page-modern .login-rocket:nth-child(3) { left: 45%; animation-delay: -6s;  font-size: 0.9rem;  }
.login-page-modern .login-rocket:nth-child(4) { left: 68%; animation-delay: -2s;  font-size: 0.65rem; }
.login-page-modern .login-rocket:nth-child(5) { left: 85%; animation-delay: -8s;  font-size: 0.8rem;  }
.login-page-modern .login-rocket:nth-child(6) { left: 15%; animation-delay: -5s;   font-size: 0.75rem; }
.login-page-modern .login-rocket:nth-child(7) { left: 55%; animation-delay: -10s;  font-size: 0.7rem;  }
.login-page-modern .login-rocket:nth-child(8) { left: 78%; animation-delay: -4s;  font-size: 0.85rem; }

@keyframes login-rocket-propel {
    0%   { transform: translateY(100vh) rotate(-15deg); opacity: 0; }
    5%   { opacity: 0.45; }
    95%  { opacity: 0.35; }
    100% { transform: translateY(-120vh) rotate(-15deg); opacity: 0; }
}

/* Form card – white background with Propella logo */
.login-page-modern .login-card-wrap {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 400px;
}

.login-page-modern .login-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem 1.5rem 1.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.login-page-modern .login-card-logo {
    text-align: center;
    margin-bottom: 1rem;
}
.login-page-modern .login-propella-logo {
    max-width: 160px;
    height: auto;
    display: inline-block;
}

.login-page-modern .login-card h3,
.login-page-modern .login-card h5 {
    margin: 0 0 1.25rem 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: 0.02em;
}

.login-page-modern .login-card .row {
    margin-bottom: 0.5rem;
}

.login-page-modern .login-card .input-field {
    margin: 0 0 0.75rem 0;
}

.login-page-modern .login-card .input-field input {
    color: #333 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
    font-size: 0.95rem;
}
.login-page-modern .login-card .input-field input:focus {
    border-bottom: 1px solid rgba(15, 122, 52, 0.8) !important;
    box-shadow: 0 1px 0 0 rgba(15, 122, 52, 0.4) !important;
}
.login-page-modern .login-card .input-field input::placeholder {
    color: #888;
}
.login-page-modern .login-card .input-field label {
    color: #555 !important;
}
.login-page-modern .login-card .input-field input:focus + label,
.login-page-modern .login-card .input-field input.active + label {
    color: rgba(15, 122, 52, 0.95) !important;
}

/* Modern login button: centered text + icon */
.login-page-modern .login-card .btn.login-btn-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(135deg, #0f7a34 0%, #0a5c28 100%);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.65rem 1.25rem;
    box-shadow: 0 4px 14px rgba(15, 122, 52, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.login-page-modern .login-card .btn.login-btn-modern:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(15, 122, 52, 0.45);
}
.login-page-modern .login-card .btn.login-btn-modern i {
    font-size: 0.95em;
}

.login-page-modern .login-card .page-link {
    color: #0f7a34;
    font-size: 0.9rem;
}
.login-page-modern .login-card .page-link:hover {
    color: #0a5c28;
}

.login-page-modern .login-card .eye {
    color: #666;
    cursor: pointer;
    margin-top: -2.5rem;
}
.login-page-modern .login-card .alert {
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Shared with password reset / set-password screens */
.login-page-modern .login-card .auth-form-lead {
    margin: -0.35rem 0 1rem 0;
    font-size: 0.9rem;
    color: #5f6b7a;
    line-height: 1.45;
    text-align: center;
}

.login-page-modern .login-card .btn.login-btn-modern.login-btn-wide {
    max-width: 100%;
    width: 100%;
}

.login-page-modern .login-card .auth-form-footer-link {
    margin-top: 0.85rem;
    margin-bottom: 0;
}

.login-page-modern .login-card .input-field input[readonly] {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 6px;
    padding-left: 0.5rem !important;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .login-page-modern .login-card {
        padding: 1.25rem 1rem;
    }
    .login-page-modern .login-rocket {
        font-size: 0.75rem;
    }
}