/* Modern auth screens (login.php, loginsch.php, verification_code.php).
   Deliberately namespaced under .auth-* so none of this touches the
   .mainpage/.top/.login classes shared with the developer/school_manager
   portals. */

.auth-shell{
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background: #f2f5f6;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Left / brand panel ---------- */
.auth-brand{
    flex: 1 1 50%;
    min-width: 320px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 64px;
    color: #fff;
    background: url("../../images/school.jpg") center/cover no-repeat;
    overflow: hidden;
}
.auth-brand::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(3,131,135,.94), rgba(9,38,42,.94));
}
.auth-brand > *{
    position: relative;
    z-index: 1;
}
.auth-logo{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 48px;
    cursor: pointer;
    width: fit-content;
}
.auth-logo img{
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff;
    padding: 4px;
}
.auth-logo h3{
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    letter-spacing: .2px;
}
.auth-brand h1{
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 14px;
    max-width: 480px;
}
.auth-brand p.lead{
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255,255,255,.85);
    max-width: 440px;
    margin: 0;
}
.auth-contacts{
    margin-top: 46px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.auth-contacts a.chip{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.22);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
    transition: background .15s ease;
}
.auth-contacts a.chip:hover{
    background: rgba(255,255,255,.2);
    color: #fff;
}
.auth-contacts a.chip i{
    color: #7fe7e2;
}

/* ---------- Right / form panel ---------- */
.auth-formside{
    flex: 1 1 40%;
    min-width: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}
.auth-card{
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 20px;
    padding: 38px 32px 30px;
    box-shadow: 0 20px 55px rgba(10,45,48,.13), 0 4px 14px rgba(10,45,48,.06);
    animation: auth-card-in .35s ease both;
}
@keyframes auth-card-in{
    from{ opacity: 0; transform: translateY(10px); }
    to{ opacity: 1; transform: translateY(0); }
}
.auth-card .auth-school-logo{
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.auth-card h2{
    font-size: 21px;
    font-weight: 700;
    color: #122;
    margin: 0 0 4px;
}
.auth-card .auth-sub{
    font-size: 13px;
    color: #7a8a8c;
    margin: 0 0 24px;
    line-height: 1.5;
}
.auth-card .auth-sub strong{
    color: #0a5b5f;
}

.auth-school-block{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eef2f2;
}
.auth-school-block .auth-school-logo{
    margin-bottom: 0;
    flex-shrink: 0;
}
.auth-school-info{
    min-width: 0;
}
.auth-school-name{
    font-size: 15.5px;
    font-weight: 700;
    color: #0a5b5f;
    margin: 0 0 3px;
    line-height: 1.3;
}
.auth-school-motto{
    font-size: 12.5px;
    font-style: italic;
    color: #8a9899;
    margin: 0;
    line-height: 1.4;
}

.auth-field{
    position: relative;
    margin-bottom: 18px;
}
.auth-field i.auth-field-icon{
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #9fb0b1;
    font-size: 14px;
    pointer-events: none;
}
.auth-field input[type="text"],
.auth-field input[type="password"]{
    width: 100%;
    padding: 12px 14px 12px 40px;
    border: 1.5px solid #e3e9ea;
    border-radius: 12px;
    font-size: 14.5px;
    background: #fbfcfc;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    box-sizing: border-box;
}
.auth-field input[type="text"]:focus,
.auth-field input[type="password"]:focus{
    border-color: rgb(3,131,135);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(3,131,135,.12);
}
.auth-field .auth-toggle-pass{
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9fb0b1;
    cursor: pointer;
    font-size: 13.5px;
}
.auth-field .auth-toggle-pass:hover{
    color: rgb(3,131,135);
}

.auth-note{
    font-size: 12.5px;
    color: #7a8a8c;
    background: #f3f7f7;
    border: 1px solid #e3edee;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 18px;
    line-height: 1.5;
}
.auth-note strong{ color: #0a5b5f; }

.auth-errbox:empty{
    display: none;
}
.auth-errbox p{
    margin: 0 0 6px;
    font-size: 13px;
}

.auth-channels{
    margin-bottom: 20px;
}
.auth-channels > label.auth-channels-label{
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #4c5c5d;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 8px;
}
.auth-channel-opts{
    display: flex;
    gap: 8px;
}
.auth-channel-opt{
    flex: 1;
    position: relative;
}
.auth-channel-opt input{
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.auth-channel-opt span{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px 8px;
    border: 1.5px solid #e3e9ea;
    border-radius: 12px;
    font-size: 11.5px;
    color: #62787a;
    text-align: center;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.auth-channel-opt span i{ font-size: 16px; }
.auth-channel-opt input:checked + span{
    border-color: rgb(3,131,135);
    background: rgba(3,131,135,.07);
    color: rgb(3,131,135);
    font-weight: 600;
}
.auth-channel-opt input:focus-visible + span{
    box-shadow: 0 0 0 3px rgba(3,131,135,.15);
}

.auth-btn{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
}
/* mainpage.css's global button rule uses :not() chains with higher
   specificity than a plain class, so the padding/radius/size overrides here
   need ID selectors (one per auth button) to actually win the cascade. */
#submitUname, #subpwd, #submit_verification_code, #back_to_system, #landing_logout,
#btn_check_username, #btn_check_password, #btn_verify_otp{
    padding: 12px 14px !important;
    border-radius: 12px !important;
    font-size: 14.5px !important;
}
.auth-links{
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
}
.auth-links a{
    color: rgb(3,131,135);
    text-decoration: none;
    font-weight: 500;
}
.auth-links a:hover{ text-decoration: underline; }

/* ---------- OTP segmented input ---------- */
.otp-boxes{
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 4px 0 8px;
    border-radius: 12px;
    transition: box-shadow .15s ease;
}
.otp-boxes input{
    width: 52px;
    height: 58px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #122;
    border: 1.5px solid #e3e9ea;
    border-radius: 12px;
    background: #fbfcfc;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.otp-boxes input:focus{
    border-color: rgb(3,131,135);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(3,131,135,.12);
}
.otp-boxes input.otp-error{
    border-color: #d32f2f;
    background: #fdecea;
    color: #d32f2f;
}
.auth-resend{
    text-align: center;
    font-size: 13px;
    margin: 4px 0 18px;
}
.auth-resend a{
    color: rgb(3,131,135);
    text-decoration: none;
    font-weight: 500;
}
.auth-resend a[disabled]{
    color: #aab8b9;
    pointer-events: none;
}

/* Narrow OR short viewports: a side-by-side split either doesn't fit
   horizontally, or (since both columns stretch to match height) forces the
   whole page taller than the viewport and pushes the form below the fold.
   Collapse the brand panel into a slim top bar instead so the form is
   always reachable without scrolling. */
@media (max-width: 860px), (max-height: 820px){
    .auth-shell{
        flex-direction: column;
        min-height: 0;
    }
    .auth-brand{
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px 24px;
        min-height: 0;
    }
    .auth-brand .auth-logo{ margin-bottom: 0; }
    .auth-brand h1, .auth-brand p.lead{ display: none; }
    .auth-contacts{ margin-top: 0; gap: 8px; }
    .auth-contacts a.chip{ padding: 5px 12px; font-size: 12px; }
    .auth-formside{ flex: 1 1 auto; padding: 24px 20px 40px; }
    .auth-card{ animation: none; }
}

@media (max-width: 480px){
    .auth-contacts{ display: none; }
}

.auth-copyright{
    position: fixed;
    bottom: 8px;
    right: 14px;
    margin: 0;
    font-size: 11px;
    color: #9aa8a8;
    z-index: 2;
    pointer-events: none;
}
@media (max-width: 860px), (max-height: 820px){
    .auth-copyright{ display: none; }
}