/*
 * login.css — Questi-themed login page
 * Navbar height: 62px  |  Footer height: ~56px
 */

/* ── Size #main for the login page ──────────────────────────────────── */
/*   Navbar: 62px (fixed, not in flow)                                  */
/*   Footer: ~56px  →  #main fills the rest                             */
body:has(.login-pg) #main {
    margin-top: 0 !important;
    margin-left: 0 !important;   /* kill NiceAdmin's 300px sidebar offset  */
    padding: 0 !important;
    min-height: calc(100vh - 56px);
    display: flex !important;
    flex-direction: column !important;
}

/* ── Login page wrapper ─────────────────────────────────────────────── */
.login-pg {
    flex: 1;                  /* fill all of #main's height             */
    padding-top: 62px;        /* push content below the fixed navbar    */

    /* Landing-page hero gradient */
    background: linear-gradient(135deg, #1e0f5c 0%, #2d1b69 35%, #3d2580 65%, #4a2d8a 100%);
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Decorative blobs — mirrors the hero section */
.login-pg::before {
    content: '';
    position: absolute;
    width: 560px; height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(107,90,205,.32) 0%, transparent 70%);
    top: -160px; right: -140px;
    pointer-events: none;
}
.login-pg::after {
    content: '';
    position: absolute;
    width: 340px; height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,101,58,.18) 0%, transparent 70%);
    bottom: -80px; left: 4%;
    pointer-events: none;
}

/* ── Login card ─────────────────────────────────────────────────────── */
.login-card {
    background: #fff;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 4px 18px rgba(91,79,207,.22);
    width: 100%;
    max-width: 420px;
    position: relative;
    overflow: hidden;
    animation: loginFloat .55s cubic-bezier(.22,1,.36,1) both;
    z-index: 1;
}

/* Purple top accent stripe */
.login-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #5b4fcf, #7b6fd8, #5b4fcf);
}

.login-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 28px 70px rgba(0,0,0,.38), 0 8px 24px rgba(91,79,207,.28);
    transition: all .3s ease;
}

/* ── Card header ─────────────────────────────────────────────────────── */
.login-card-header {
    padding: 32px 32px 0;
    text-align: center;
}

.login-brand {
    font-family: 'Karina', cursive;
    font-size: 2rem;
    color: #5b4fcf;
    line-height: 1;
    display: block;
    margin-bottom: 6px;
    letter-spacing: .01em;
}

.login-card-header h5 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 4px;
}

.login-subtitle {
    font-size: .82rem;
    color: #7a7a9a;
    margin-bottom: 0;
}

/* ── Divider ─────────────────────────────────────────────────────────── */
.login-card hr {
    border-color: #e8e6f0;
    margin: 18px 0;
    opacity: 1;
}

/* ── Card body ──────────────────────────────────────────────────────── */
.login-card-body {
    padding: 20px 32px 32px;
}

/* ── Inputs ─────────────────────────────────────────────────────────── */
.login-card .form-control {
    border: 1.5px solid #e8e6f0 !important;
    border-radius: 8px !important;
    font-family: 'Nunito', sans-serif;
    font-size: .9rem;
    color: #1a1a2e;
    background: #faf9ff !important;
    transition: border-color .2s, box-shadow .2s;
}

.login-card .form-control:focus {
    border-color: #5b4fcf !important;
    box-shadow: 0 0 0 3px rgba(91,79,207,.1) !important;
    background: #fff !important;
}

.login-card .form-floating > label {
    font-size: .8rem;
    color: #7a7a9a;
}

/* ── Checkbox ────────────────────────────────────────────────────────── */
.login-card .checkbox label {
    font-size: .82rem;
    color: #4a4a6a;
    cursor: pointer;
}

.login-card .form-check-input:checked {
    background-color: #5b4fcf;
    border-color: #5b4fcf;
}

/* ── Submit button ───────────────────────────────────────────────────── */
#login-submit {
    height: 46px;
    border: none !important;
    border-radius: 8px !important;
    font-family: 'Poppins', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    color: #fff !important;
    background: #5b4fcf !important;
    box-shadow: 0 6px 24px rgba(91,79,207,.38);
    transition: all .22s ease;
    letter-spacing: .01em;
}

#login-submit:hover {
    background: #4a3fb8 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(91,79,207,.45);
}

#login-submit:active {
    transform: translateY(0) scale(.98);
    box-shadow: 0 3px 10px rgba(91,79,207,.3);
}

/* ── Links ───────────────────────────────────────────────────────────── */
.login-card a {
    color: #5b4fcf;
    font-size: .84rem;
    text-decoration: none;
    transition: color .2s;
}

.login-card a:hover {
    color: #4a3fb8;
    text-decoration: underline;
}

/* ── Alert ───────────────────────────────────────────────────────────── */
.login-card .alert {
    border-radius: 8px;
    font-size: .84rem;
    margin: 0 0 12px;
}

.login-card .alert-success {
    background: rgba(45,170,136,.1);
    border-color: rgba(45,170,136,.3);
    color: #1a6b52;
}

/* ── Validation ──────────────────────────────────────────────────────── */
.login-card .text-danger {
    font-size: .78rem;
}

/* ── Float-in animation ──────────────────────────────────────────────── */
@keyframes loginFloat {
    from {
        opacity: 0;
        transform: translateY(32px) scale(.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .login-pg {
        padding: 62px 16px 0;
        align-items: flex-start;
        padding-top: 80px;
    }

    .login-card-header {
        padding: 24px 22px 0;
    }

    .login-card-body {
        padding: 16px 22px 26px;
    }

    .login-card {
        max-width: 100%;
    }
}