/* Redesigned login styles to match the provided mockup.
   Only CSS changes were made. This file styles the existing HTML structure in index.php.
*/

:root{
    --bg1: #4e54c8; /* blue */
    --bg2: #8f94fb; /* purple */
    --card-bg: #ffffff;
    --muted: #6b7280;
    --accent: #1e6ef9;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
    background: linear-gradient(135deg,#6a11cb 0%, #2575fc 100%); /* purple to blue gradient */
    -webkit-font-smoothing:antialiased;
    color:#0f172a;
}


.container{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px 16px;
}

.top-heading{
    position:absolute;
    top:48px;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    color:rgba(255,255,255,0.95);
}
.top-heading h1{font-size:34px;margin-bottom:6px;font-weight:700}
.top-heading p{margin:0;color:rgba(255,255,255,0.9);opacity:0.95}

.card-wrapper{
    width:100%;
    max-width:420px;
}

.login-card,
.container > form{
    background: #ffffff;
    border-radius: 14px;
    padding: 28px 26px;
    box-shadow: 0 12px 30px rgba(2,6,23,0.18);
    width:100%;
}

.login-card .card-title{font-size:20px;text-align:center;font-weight:700;margin-bottom:12px}

.login-hero{display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.login-hero .logo-circle{width:64px;height:64px;border-radius:50%;background:linear-gradient(180deg,#8e44ff,#6a11cb);display:flex;align-items:center;justify-content:center;color:white;font-size:24px;margin:0 auto 10px}

.form-controller{position:relative;margin-bottom:14px}
.form-controller i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:16px}
.form-controller input{width:100%;padding:12px 14px 12px 40px;border:1px solid #e6e9ef;border-radius:10px;font-size:15px}
.form-controller input:focus{outline:none;border-color:#7c3aed;box-shadow:0 8px 22px rgba(124,58,237,0.12)}
.form-controller small{display:block;margin-top:6px;color:#ef4444}

.sign-in{
    display:block;width:100%;padding:14px;border-radius:12px;background: linear-gradient(90deg,#8e44ff,#6a11cb);color:#fff;border:0;font-weight:700;margin-top:12px;font-size:16px;text-align:center
}
.sign-in:hover{filter:brightness(0.97);cursor:pointer}

.readonly-note{font-size:13px;color:#6b7280;margin-bottom:8px}

/* Responsive layout */
@media (max-width:760px){
    .top-heading{top:28px}
    .card-wrapper{max-width:420px}
    .login-card{padding:20px}
    .top-heading h1{font-size:26px}
}

/* Mobile: style existing form markup as a centered card without changing HTML */
@media (max-width:520px){
    .top-heading{position:static;transform:none;margin-bottom:8px;padding-top:8px}
    .top-heading h1{font-size:22px}

    .container{padding:18px}
    /* target the existing form inside .container */
    .container > form{
        max-width:420px;
        margin: 6px auto 20px;
        background: #fff;
        border-radius: 12px;
        padding: 18px;
        box-shadow: 0 10px 26px rgba(2,6,23,0.14);
        display: block;
    }

    /* inputs full width and larger for touch */
    .container > form .form-controller{margin-bottom:14px}
    .container > form .form-controller input{
        width:100%;
        padding:12px 14px 12px 42px;
        border:1px solid #e6e9ef;
        border-radius:10px;
        font-size:15px;
    }

    .container > form .form-controller i{left:12px;top:50%;transform:translateY(-50%);font-size:16px}

    .sign-in{width:100%;padding:12px;border-radius:12px;font-size:16px}

    /* hide the large illustration on mobile */
    .img-container{display:none}

    /* ensure legacy classes still behave */
    .mob-hidden{display:none}
}

/* keep some legacy class compatibility */
.img-container{display:none}
.new-account{display:block;text-align:center;margin-top:10px}

/* small helpers for links */
a{color:var(--accent)}

/* Card title and refined input/button styling to match provided mockup */
    .container > form::before{
    /* deprecated: heading moved into HTML for better semantics */
    display: none;
}

.container > form{
    border-radius:14px;
}

.container > form .form-controller input{
    background:transparent;
    border:0;
    border-bottom:1px solid #e6e9ef;
    box-shadow:none;
    padding:14px 14px 14px 42px;
    font-size:15px;
    color:#111827;
}
.vis-label{display:block;font-size:13px;color:#6b7280;margin-bottom:6px}
.container > form .form-controller input::placeholder{color:#9ca3af}
.container > form .form-controller i{color:#9ca3af}

/* Visual style for semantic login heading and controls inserted into HTML */
.login-title{
    text-align:center;
    font-size:34px; /* Desktop baseline */
    font-weight:800;
    color:#0b1220; /* slightly darker for better contrast */
    margin: 8px 0 8px 0;
    letter-spacing:0.4px;
    line-height:1.05;
}

/* Slightly smaller on medium widths */
@media (max-width:760px){
    .login-title{font-size:30px;margin:6px 0 6px 0}
}

/* Mobile: keep heading large but compact spacing */
@media (max-width:520px){
    .login-title{font-size:26px;margin:4px 0 8px 0}
}

/* Subtitle under heading */
.login-subtitle{
    text-align:center;
    color:#6b7280;
    font-size:15px;
    margin-top:0;
    margin-bottom:14px;
}

/* Form meta row: remember checkbox (left) and forgot link (right) */
.form-row.form-meta{display:flex;align-items:center;justify-content:space-between;margin-top:6px;margin-bottom:8px}
.form-row.form-meta .remember-label{font-size:14px;color:#6b7280;display:flex;align-items:center}
.form-row.form-meta .remember-label input{margin-right:8px;width:16px;height:16px}
.form-row.form-meta .pw-help{font-size:14px}
.form-row.form-meta .forgot-link{font-size:14px;color:#7c3aed;text-decoration:none}
.form-row.form-meta .forgot-link:hover{text-decoration:underline;color:#5a22c8}

/* Make forgot link focus-visible for keyboard users */
.forgot-link:focus-visible{
    outline: 3px solid rgba(124,58,237,0.24);
    outline-offset: 3px;
    border-radius:4px;
}

/* Sign-in button hover and transition */
.sign-in{transition: transform .12s ease, box-shadow .12s ease}
.sign-in:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(106,17,203,0.18)}
.sign-in:active{transform:translateY(1px)}

/* Mobile stacking for meta row */
@media (max-width:520px){
    .form-row.form-meta{flex-direction:column;align-items:flex-start;gap:8px}
    .form-row.form-meta .forgot-link{align-self:flex-end}
}

/* Card large radius like mockup */
.container > form{border-radius:18px}

/* make header sit visually above card for large displays */
@media (min-width:760px){
    .top-heading{top:36px}
    .container > form{margin-top:40px}
}

    /* placeholder for validation error styles */