/* ==========================================================
   SCHOOL ERP AUTHENTICATION STYLESHEET
   Base Styles
   Version: 1.0
   ========================================================== */

/* ----------------------------------------------------------
   GOOGLE FONT
---------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ----------------------------------------------------------
   ROOT VARIABLES
---------------------------------------------------------- */

:root{

    /* Primary Theme */

    --primary:#0D47A1;
    --primary-light:#1565C0;
    --primary-dark:#082B63;

    /* Accent */

    --accent:#29B6F6;
    --accent-light:#4FC3F7;

    /* Success */

    --success:#2E7D32;

    /* Warning */

    --warning:#F9A825;

    /* Danger */

    --danger:#D32F2F;

    /* Neutral */

    --white:#FFFFFF;
    --light:#F4F7FB;
    --gray:#6C757D;
    --dark:#1F2937;

    /* Glass */

    --glass-bg:rgba(255,255,255,.16);
    --glass-border:rgba(255,255,255,.25);

    /* Overlay */

    --overlay:rgba(0,0,0,.60);

    /* Radius */

    --radius:20px;

    /* Shadow */

    --shadow:
        0 20px 45px rgba(0,0,0,.18);

    /* Animation */

    --transition:.35s ease;
}

/* ----------------------------------------------------------
   RESET
---------------------------------------------------------- */

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

body{

    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;

    background:linear-gradient(
        135deg,
        #0f172a,
        #1e3a8a,
        #2563eb,
        #38bdf8
    );

    background-size:400% 400%;

    animation:gradientBG 15s ease infinite;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:auto;

    padding:30px;
}

/* ----------------------------------------------------------
   LINKS
---------------------------------------------------------- */

a{

    text-decoration:none;

    transition:var(--transition);
}

a:hover{

    text-decoration:none;
}

/* ----------------------------------------------------------
   IMAGES
---------------------------------------------------------- */

img{

    max-width:100%;

    display:block;
}

/* ----------------------------------------------------------
   BUTTON RESET
---------------------------------------------------------- */

button{

    outline:none;

    border:none;

    transition:var(--transition);
}

/* ----------------------------------------------------------
   INPUT RESET
---------------------------------------------------------- */

input,
select,
textarea{

    outline:none;

    box-shadow:none !important;
}

/* ----------------------------------------------------------
   MAIN AUTH WRAPPER
---------------------------------------------------------- */

.auth-wrapper{

    position:relative;

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

    overflow:hidden;
}

/* ----------------------------------------------------------
   BACKGROUND IMAGE
---------------------------------------------------------- */

.auth-background{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background-image:url("../images/background.jpg");

    background-position:center;

    background-size:cover;

    background-repeat:no-repeat;

    z-index:-3;

    transform:scale(1.03);
}

/* ----------------------------------------------------------
   DARK OVERLAY
---------------------------------------------------------- */

.auth-overlay{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:var(--overlay);

    z-index:-2;
}

/* ----------------------------------------------------------
   OPTIONAL GRADIENT OVERLAY
---------------------------------------------------------- */

.auth-gradient{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(13,71,161,.25),

        rgba(41,182,246,.18),

        rgba(0,0,0,.20)

    );

    z-index:-1;
}

/* ----------------------------------------------------------
   FLOATING CIRCLES
---------------------------------------------------------- */

.circle{

    position:absolute;

    border-radius:50%;

    filter:blur(2px);

    opacity:.18;

    animation:floatCircle 10s infinite ease-in-out;
}

.circle-one{

    width:280px;
    height:280px;

    background:#29B6F6;

    top:-80px;
    left:-80px;
}

.circle-two{

    width:220px;
    height:220px;

    background:#0D47A1;

    bottom:-60px;
    right:-40px;

    animation-delay:2s;
}

.circle-three{

    width:160px;
    height:160px;

    background:#4FC3F7;

    top:45%;
    left:10%;

    animation-delay:4s;
}

/* ----------------------------------------------------------
   FLOAT ANIMATION
---------------------------------------------------------- */

@keyframes floatCircle{

    0%{

        transform:
        translateY(0)
        translateX(0);
    }

    50%{

        transform:
        translateY(-25px)
        translateX(18px);
    }

    100%{

        transform:
        translateY(0)
        translateX(0);
    }
}

/* ----------------------------------------------------------
   PAGE FADE IN
---------------------------------------------------------- */

.fade-in{

    animation:fadeIn .8s ease;
}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(25px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}

/* ==========================================================
   GLASS CARD LAYOUT
   ========================================================== */

/* ----------------------------------------------------------
   MAIN AUTH CONTAINER
---------------------------------------------------------- */

/* ==========================================
   AUTH PAGE
==========================================*/

.auth-page{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px 0;

}

.auth-page .container{

    max-width:1200px;

}

/* ----------------------------------------------------------
   SCHOOL LOGO
---------------------------------------------------------- */

.school-logo{

    width:110px;

    height:110px;

    margin:0 auto 25px;

    object-fit:contain;

    animation:logoFloat 4s ease-in-out infinite;
}

@keyframes logoFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }
}

/* ----------------------------------------------------------
   SCHOOL DETAILS
---------------------------------------------------------- */

.school-name{

    font-size:2rem;

    font-weight:700;

    text-align:center;

    margin-bottom:8px;

    line-height:1.3;
}

.school-motto{

    font-size:1rem;

    text-align:center;

    font-style:italic;

    opacity:.95;

    margin-bottom:35px;
}

.school-session{

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.20);

    border-radius:12px;

    padding:12px;

    text-align:center;

    margin-bottom:35px;

    font-weight:600;
}

/* ----------------------------------------------------------
   INFO BOX
---------------------------------------------------------- */

.info-box{

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.12);

    border-radius:18px;

    padding:25px;
}

.info-box h5{

    font-size:1.1rem;

    margin-bottom:15px;

    font-weight:600;
}

.info-box ul{

    list-style:none;

    padding:0;

    margin:0;
}

.info-box li{

    padding:8px 0;

    position:relative;

    padding-left:28px;

    font-size:.95rem;
}

.info-box li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#A5D6A7;

    font-weight:bold;
}

/* ----------------------------------------------------------
   RIGHT PANEL
---------------------------------------------------------- */

.auth-right{

    flex:1 1 55%;

    min-width:380px;

    background:#fff;

    padding:60px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    position:relative;
}

/* ----------------------------------------------------------
   PAGE TITLE
---------------------------------------------------------- */

.auth-title{

    font-size:2rem;

    font-weight:700;

    color:var(--primary);

    margin-bottom:10px;
}

.auth-subtitle{

    color:#777;

    margin-bottom:35px;

    font-size:.95rem;
}

/* ----------------------------------------------------------
   DIVIDER
---------------------------------------------------------- */

.auth-divider{

    display:flex;

    align-items:center;

    margin:30px 0;
}

.auth-divider::before,
.auth-divider::after{

    content:"";

    flex:1;

    height:1px;

    background:#ddd;
}

.auth-divider span{

    margin:0 15px;

    color:#888;

    font-size:.9rem;
}

/* ----------------------------------------------------------
   FOOTER
---------------------------------------------------------- */

.auth-footer{

    margin-top:35px;

    text-align:center;

    color:#666;

    font-size:.90rem;
}

.auth-footer a{

    color:var(--primary);

    font-weight:600;
}

/* ----------------------------------------------------------
   POWERED BY
---------------------------------------------------------- */

.powered{

    margin-top:18px;

    text-align:center;

    font-size:.82rem;

    color:#999;
}

.powered strong{

    color:var(--primary);
}

/* ==========================================================
   FORMS & INPUTS
   ========================================================== */

/* ----------------------------------------------------------
   FORM GROUP
---------------------------------------------------------- */

.form-group{
    margin-bottom:22px;
}

/* ----------------------------------------------------------
   LABEL
---------------------------------------------------------- */

.form-label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:var(--dark);

    font-size:.95rem;
}

/* ----------------------------------------------------------
   INPUT WRAPPER
---------------------------------------------------------- */

.input-wrapper{

    position:relative;
}

/* ----------------------------------------------------------
   INPUT ICON
---------------------------------------------------------- */

.input-icon{

    position:absolute;

    top:50%;
    left:18px;

    transform:translateY(-50%);

    color:#999;

    font-size:1rem;

    transition:var(--transition);

    pointer-events:none;
}

/* ----------------------------------------------------------
   INPUTS
---------------------------------------------------------- */

.form-control{

    width:100%;

    height:54px;

    border:1px solid #d7dde5;

    border-radius:14px;

    padding-left:50px;

    padding-right:18px;

    background:#fff;

    font-size:.95rem;

    transition:all .30s ease;
}

.form-control:focus{

    border-color:var(--primary);

    background:#fff;

    box-shadow:
    0 0 0 4px rgba(13,71,161,.10)
    !important;
}

.input-wrapper:focus-within .input-icon{

    color:var(--primary);
}

/* ----------------------------------------------------------
   SELECT
---------------------------------------------------------- */

select.form-control{

    cursor:pointer;
}

/* ----------------------------------------------------------
   PASSWORD TOGGLE
---------------------------------------------------------- */

.password-toggle{

    position:absolute;

    top:50%;
    right:18px;

    transform:translateY(-50%);

    cursor:pointer;

    color:#777;

    font-size:1rem;

    transition:var(--transition);

    user-select:none;
}

.password-toggle:hover{

    color:var(--primary);
}

/* ----------------------------------------------------------
   INPUT VALIDATION
---------------------------------------------------------- */

.form-control.is-valid{

    border-color:#28a745;
}

.form-control.is-invalid{

    border-color:#dc3545;
}

.invalid-feedback{

    display:block;

    margin-top:6px;

    color:#dc3545;

    font-size:.82rem;
}

/* ----------------------------------------------------------
   CHECKBOX
---------------------------------------------------------- */

.form-check{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:5px;
}

.form-check input[type=checkbox]{

    width:18px;
    height:18px;

    accent-color:var(--primary);

    cursor:pointer;
}

.form-check label{

    cursor:pointer;

    color:#555;

    font-size:.92rem;
}

/* ----------------------------------------------------------
   FORGOT PASSWORD
---------------------------------------------------------- */

.form-links{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:8px;

    margin-bottom:28px;
}

.form-links a{

    color:var(--primary);

    font-size:.90rem;

    font-weight:600;
}

.form-links a:hover{

    color:var(--primary-dark);
}

/* ----------------------------------------------------------
   SMALL TEXT
---------------------------------------------------------- */

.form-note{

    text-align:center;

    color:#666;

    font-size:.90rem;

    margin-top:25px;
}

.form-note a{

    font-weight:600;

    color:var(--primary);
}

/* ==========================================================
   BUTTONS
   ========================================================== */

/* ----------------------------------------------------------
   PRIMARY BUTTON
---------------------------------------------------------- */

.btn-auth{

    width:100%;

    height:56px;

    border:none;

    border-radius:14px;

    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    color:#fff;

    font-size:1rem;

    font-weight:600;

    letter-spacing:.4px;

    transition:all .30s ease;

    position:relative;

    overflow:hidden;
}

.btn-auth:hover{

    transform:translateY(-2px);

    box-shadow:
    0 12px 25px rgba(13,71,161,.25);
}

.btn-auth:active{

    transform:scale(.98);
}

.btn-auth:disabled{

    opacity:.75;

    cursor:not-allowed;
}

/* ----------------------------------------------------------
   BUTTON RIPPLE
---------------------------------------------------------- */

.btn-auth::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:120%;
    height:100%;

    background:

    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.30),
        transparent
    );

    transition:.8s;
}

.btn-auth:hover::before{

    left:120%;
}

/* ----------------------------------------------------------
   OUTLINE BUTTON
---------------------------------------------------------- */

.btn-outline-auth{

    width:100%;

    height:52px;

    border:2px solid var(--primary);

    border-radius:14px;

    background:#fff;

    color:var(--primary);

    font-weight:600;

    transition:var(--transition);
}

.btn-outline-auth:hover{

    background:var(--primary);

    color:#fff;
}

/* ----------------------------------------------------------
   LOADING SPINNER
---------------------------------------------------------- */

.btn-spinner{

    width:18px;

    height:18px;

    margin-left:10px;

    vertical-align:middle;
}

/* ==========================================================
   ALERTS
   ========================================================== */

.alert{

    border:none;

    border-radius:14px;

    padding:14px 18px;

    margin-bottom:20px;

    font-size:.92rem;

    font-weight:500;
}

/* SUCCESS */

.alert-success{

    background:#E8F5E9;

    color:#2E7D32;
}

/* ERROR */

.alert-danger{

    background:#FDECEC;

    color:#C62828;
}

/* INFO */

.alert-info{

    background:#E3F2FD;

    color:#1565C0;
}

/* WARNING */

.alert-warning{

    background:#FFF8E1;

    color:#EF6C00;
}

/* ==========================================================
   BADGES
   ========================================================== */

.badge-auth{

    display:inline-block;

    padding:6px 12px;

    border-radius:30px;

    background:rgba(13,71,161,.10);

    color:var(--primary);

    font-size:.80rem;

    font-weight:600;
}

/* ==========================================================
   5. ANIMATIONS
   ========================================================== */

/* ------------------------------------------
   Fade In
------------------------------------------- */

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(25px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* ------------------------------------------
   Slide Left
------------------------------------------- */

@keyframes slideLeft{

    from{
        opacity:0;
        transform:translateX(-40px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

/* ------------------------------------------
   Slide Right
------------------------------------------- */

@keyframes slideRight{

    from{
        opacity:0;
        transform:translateX(40px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

/* ------------------------------------------
   Float
------------------------------------------- */

@keyframes float{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* ------------------------------------------
   Pulse
------------------------------------------- */

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.03);
    }

    100%{
        transform:scale(1);
    }

}

/* ------------------------------------------
   Rotation
------------------------------------------- */

@keyframes rotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

/* ------------------------------------------
   Classes
------------------------------------------- */

.fade-in{

    animation:fadeIn .8s ease;
}

.slide-left{

    animation:slideLeft .7s ease;
}

.slide-right{

    animation:slideRight .7s ease;
}

.float{

    animation:float 4s ease-in-out infinite;
}

.pulse{

    animation:pulse 2s infinite;
}

.rotate{

    animation:rotate 20s linear infinite;
}

/* ==========================================================
   6. RESPONSIVE DESIGN
   ========================================================== */

/* ------------------------------
   Tablets
------------------------------- */

@media (max-width:992px){

    .auth-container{

        max-width:95%;
    }

    .auth-left{

        padding:45px 35px;
    }

    .auth-right{

        padding:45px 35px;
    }

}

/* ------------------------------
   Mobile
------------------------------- */

@media (max-width:768px){

    body{

        padding:20px;
    }

    .auth-container{

        flex-direction:column;

        border-radius:20px;
    }

    .auth-left{

        min-width:100%;

        padding:40px 25px;

        text-align:center;
    }

    .auth-right{

        min-width:100%;

        padding:35px 25px;
    }

    .school-logo{

        width:90px;
        height:90px;
    }

    .school-name{

        font-size:1.6rem;
    }

    .auth-title{

        font-size:1.6rem;
    }

    .form-links{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;
    }

}

/* ------------------------------
   Small Phones
------------------------------- */

@media (max-width:480px){

    body{

        padding:12px;
    }

    .auth-left{

        padding:30px 18px;
    }

    .auth-right{

        padding:30px 18px;
    }

    .school-name{

        font-size:1.4rem;
    }

    .school-motto{

        font-size:.90rem;
    }

    .auth-title{

        font-size:1.45rem;
    }

    .form-control{

        height:50px;

        font-size:.90rem;
    }

    .btn-auth{

        height:50px;
    }

}

/* ==========================================================
   7. UTILITY CLASSES
   ========================================================== */

/* Alignment */

.text-center{
    text-align:center;
}

.text-left{
    text-align:left;
}

.text-right{
    text-align:right;
}

/* Display */

.d-none{
    display:none !important;
}

.d-flex{
    display:flex;
}

.justify-center{
    justify-content:center;
}

.justify-between{
    justify-content:space-between;
}

.align-center{
    align-items:center;
}

/* Width */

.w-100{
    width:100%;
}

.h-100{
    height:100%;
}

/* Margin */

.mt-1{margin-top:.25rem;}
.mt-2{margin-top:.5rem;}
.mt-3{margin-top:1rem;}
.mt-4{margin-top:1.5rem;}
.mt-5{margin-top:3rem;}

.mb-1{margin-bottom:.25rem;}
.mb-2{margin-bottom:.5rem;}
.mb-3{margin-bottom:1rem;}
.mb-4{margin-bottom:1.5rem;}
.mb-5{margin-bottom:3rem;}

/* Padding */

.p-1{padding:.25rem;}
.p-2{padding:.5rem;}
.p-3{padding:1rem;}
.p-4{padding:1.5rem;}
.p-5{padding:3rem;}

/* Rounded */

.rounded{
    border-radius:12px;
}

.rounded-lg{
    border-radius:20px;
}

.rounded-circle{
    border-radius:50%;
}

/* Shadows */

.shadow-sm{

    box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.shadow{

    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.shadow-lg{

    box-shadow:0 20px 45px rgba(0,0,0,.18);
}

/* Cursor */

.pointer{

    cursor:pointer;
}

/* Overflow */

.overflow-hidden{

    overflow:hidden;
}

/* Border */

.border-light{

    border:1px solid rgba(255,255,255,.25);
}

.border-dark{

    border:1px solid rgba(0,0,0,.10);
}

/* Background Utilities */

.bg-glass{

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(15px);

    -webkit-backdrop-filter:blur(15px);
}

.bg-primary-gradient{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );
}

/* Transition */

.transition{

    transition:all .30s ease;
}


/*=========================================================
GLASS CARDS
=========================================================*/

.glass-card{

    background:#ffffff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.18);

     padding:40px 15px;

}

/* LEFT PANEL */

.branding-card{

    background:linear-gradient(
        145deg,
        #0d47a1,
        #1565c0
    );

    color:#fff;

    padding:35px;

    display:flex;

    flex-direction:column;

}

/* Everything on left card */

.branding-card,
.branding-card h1,
.branding-card h2,
.branding-card h3,
.branding-card h4,
.branding-card h5,
.branding-card h6,
.branding-card p,
.branding-card span,
.branding-card li,
.branding-card label{

    color:#ffffff;

}

.school-title{

    font-size:1.9rem;

    font-weight:700;

}

.school-motto{

    color:rgba(255,255,255,.85);

}

.instruction-list{

    list-style:none;

    padding:0;

    margin:0;

}

.instruction-list li{

    padding:10px 0;

}

.instruction-list li i{

    color:#8EF58E;

    margin-right:10px;

}

.branding-card .btn-outline-light{

    border:2px solid rgba(255,255,255,.7);

    color:#fff;

}

.branding-card .btn-outline-light:hover{

    background:#fff;

    color:#0d47a1;

}

/* RIGHT PANEL */

.form-card{

    background:#ffffff;

    padding:35px;

}

.form-card h2{

    color:#0d47a1;

}

.form-card p{

    color:#666;

}

.form-card label{

    color:#333;

    font-weight:600;

}

.form-card input,
.form-card select{

    color:#222;

}

.form-card .alert{

    border-radius:12px;

}