/*==================================================
  ERD LOGIN PAGE STYLES
  Enrollment & Retention Drive
  Place this file at: assets/css/erd-login.css
==================================================*/


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

/*=========================
Root Variables
=========================*/

:root{

    --primary:#0F6E56;
    --primary-dark:#085041;
    --secondary:#1D5233;

    --accent:#C89B3C;

    --success:#198754;
    --danger:#dc3545;
    --warning:#ffc107;
    --info:#0dcaf0;

    --white:#ffffff;

    --bg:#f6f8fb;

    --border:#d7dee8;

    --text:#2F3A45;

    --muted:#6b7280;

    --shadow:0 25px 60px rgba(0,0,0,.08);

    --radius:20px;

}

/*=========================
Reset
=========================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    height:100%;
}

body{

    font-family:'DM Sans',sans-serif;

    background:var(--bg);

    color:var(--text);

}

/*=========================
Links
=========================*/

a{

    color:var(--primary);

    transition:.25s;
}

a:hover{

    color:var(--primary-dark);

    text-decoration:none;
}

/*=========================
Login Page
=========================*/

.login-page{

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

    background:#eef3f0;

    overflow:hidden;

}

/*=========================
Wrapper
=========================*/

.login-wrapper{

    width:100%;

    max-width:1300px;

    height:100%;

    max-height:620px;

    display:grid;

    grid-template-columns:400px 1fr;

    background:#fff;

    overflow:hidden;

    border-radius:20px;

    box-shadow:var(--shadow);

}

/*=========================
Left Panel
=========================*/

.login-left{

    padding:36px 40px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    background:#fff;

    overflow-y:auto;

}

.brand-logo{

    width:40px !important;

    height:auto !important;

    margin-bottom:14px;

}

.brand-title{

    font-size:22px;

    font-weight:700;

    color:var(--secondary);

    margin-bottom:8px;

    line-height:1.3;

}

.brand-sub{

    color:var(--muted);

    font-size:14px;

    line-height:1.6;

    margin-bottom:22px;

}

/*=========================
Alerts
=========================*/

.alert{

    border:none;

    border-radius:10px;

    padding:10px 14px;

    font-size:14px;

    margin-bottom:14px;

}

/*=========================
Form
=========================*/

.form-group{

    margin-bottom:14px;

}

.form-group label{

    display:block;

    margin-bottom:6px;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#7b8794;

    font-weight:700;

}

.form-control{

    height:42px;

    border-radius:10px;

    border:1px solid var(--border);

    box-shadow:none;

    font-size:14px;

    padding-left:16px;

    transition:.25s;

}

.form-control:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(15,110,86,.10);

}

/*=========================
Remember
=========================*/

.remember-row{

    margin-bottom:18px;

}

.remember-row label{

    font-size:13px;

    color:var(--muted);

    font-weight:500;

}

.remember-row input{

    margin-right:8px;

}

/*=========================
Login Button
=========================*/

.login-btn{

    width:100%;

    height:46px;

    border:none;

    border-radius:10px;

    background:var(--primary);

    color:#fff;

    font-size:15px;

    font-weight:600;

    transition:.25s;

}

.login-btn i{

    margin-right:8px;

}

.login-btn:hover{

    background:var(--primary-dark);

}

/*=========================
Bottom Links
=========================*/

.bottom-links{

    margin-top:20px;

    display:flex;

    justify-content:space-between;

}

.bottom-links a{

    font-size:13px;

    font-weight:600;

}
/*==================================================
RIGHT PANEL
==================================================*/

.login-right{

    position:relative;

    overflow:hidden;

    background:#000;

}

/*==================================================
Carousel
==================================================*/

.carousel,
.carousel-inner,
.carousel-item{

    height:100%;

}

.carousel-item{

    position:relative;

}

.carousel-item img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/*==================================================
Dark Overlay
==================================================*/

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(20,45,32,.88),
        rgba(15,110,86,.55)
    );

    z-index:2;

    pointer-events:none;

}

/*==================================================
Caption
==================================================*/

.carousel-caption{

    position:absolute;

    left:0;

    top:0;

    right:0;

    bottom:0;

    z-index:5;

    padding:0;

    text-align:left;

}

/*==================================================
Hero Content
==================================================*/

.hero-content{

    position:absolute;

    left:45px;

    bottom:40px;

    max-width:480px;

    color:#fff;

}

.hero-logo{

    width:44px !important;

    height:auto !important;

    margin-bottom:12px;

}

.hero-content h2{

    font-size:24px;

    font-weight:700;

    line-height:1.3;

    margin-bottom:12px;

    color:#fff;

}

.hero-content p{

    font-size:14px;

    line-height:1.6;

    opacity:.95;

    margin-bottom:18px;

}

/*==================================================
Hero Tags
==================================================*/

.hero-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.hero-tags span{

    padding:6px 14px;

    border-radius:50px;

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

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

    backdrop-filter:blur(8px);

    color:#fff;

    font-size:12px;

    font-weight:500;

}

/*==================================================
Carousel Controls
==================================================*/

.carousel-control-prev,
.carousel-control-next{

    width:60px;

    opacity:.8;

    transition:.3s;

    z-index:10;

}

.carousel-control-prev:hover,
.carousel-control-next:hover{

    opacity:1;

}

/*==================================================
Indicators
==================================================*/

.carousel-indicators{

    bottom:25px;

    z-index:10;

}

.carousel-indicators li{

    width:10px;

    height:10px;

    border-radius:50%;

    margin:0 6px;

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

    border:none;

}

.carousel-indicators .active{

    width:30px;

    border-radius:20px;

    background:#fff;

}

/*==================================================
Animation
==================================================*/

.carousel-item.active .hero-content{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
Responsive
==================================================*/

@media(max-width:1200px){

    .login-wrapper{

        grid-template-columns:360px 1fr;

    }

    .hero-content{

        left:35px;

        bottom:32px;

        max-width:400px;

    }

    .hero-content h2{

        font-size:20px;

    }

}

@media(max-width:992px){

    .login-page{

        height:auto;

        min-height:100vh;

        overflow:auto;

    }

    .login-wrapper{

        grid-template-columns:1fr;

        height:auto;

        max-height:none;

    }

    .login-right{

        display:none;

    }

    .login-left{

        padding:32px;

    }

}

@media(max-width:576px){

    .login-page{

        padding:15px;

    }

    .login-wrapper{

        border-radius:15px;

    }

    .login-left{

        padding:26px 22px;

    }

    .brand-logo{

        width:36px !important;

    }

    .brand-title{

        font-size:20px;

    }

    .brand-sub{

        font-size:13px;

    }

    .form-control{

        height:42px;

    }

    .login-btn{

        height:44px;

    }

    .bottom-links{

        flex-direction:column;

        gap:12px;

        align-items:flex-start;

    }

}






/*==================================================
  ERD SIGNUP PAGE STYLES
  Extends erd-login.css — load AFTER erd-login.css
  Place this file at: assets/css/erd-signup.css
==================================================*/

/*=========================
Wider card — signup has more fields than login
=========================*/

.signup-page{

    align-items:center;

    padding:16px 24px;

}

.signup-page .login-wrapper{

    grid-template-columns:480px 1fr;

    max-width:1320px;

    height:calc(100vh - 32px);

    max-height:700px;

}

.signup-page .login-left{

    padding:20px 40px;

}

.signup-page .brand-logo{

    width:30px !important;

    margin-bottom:8px !important;

}

.signup-page .brand-title{

    font-size:18px;

    margin-bottom:4px;

}

.signup-page .brand-sub{

    font-size:12.5px;

    line-height:1.4;

    margin-bottom:12px;

}

.signup-page .form-group{

    margin-bottom:10px;

}

.signup-page .form-group label{

    margin-bottom:3px;

    font-size:10.5px;

}

.signup-page .form-control{

    height:36px;

    font-size:13px;

    padding-left:14px;

}

/*=========================
Two-column field rows
(Password/Re-enter, Region/District)
=========================*/

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

}

.form-row .form-group{

    margin-bottom:10px;

}

/*=========================
Select styling to match .form-control inputs
=========================*/

select.form-control{

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 14px center;

    background-size:10px;

    padding-right:32px;

    cursor:pointer;

}

/*=========================
Signup submit + secondary link
=========================*/

.signup-page .login-btn{

    height:40px;

    font-size:14px;

    margin-top:2px;

}

.signup-bottom-links{

    justify-content:center;

    margin-top:12px;

}

/*=========================
Responsive
=========================*/

@media(max-width:1200px){

    .signup-page .login-wrapper{

        grid-template-columns:420px 1fr;

    }

}

@media(max-width:992px){

    .signup-page .login-wrapper{

        height:auto;

        max-height:none;

    }

    .signup-page .login-left{

        padding:28px 30px;

    }

}

@media(max-width:576px){

    .form-row{

        grid-template-columns:1fr;

        gap:0;

    }

}





/*==================================================
  ERD SINGLE-CARD AUTH PAGES
  For simple utility forms (Change Password, etc.)
  Reuses design tokens from erd-login.css — load AFTER it.
  Place this file at: assets/css/erd-auth-card.css
==================================================*/

.auth-page{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

    background:#eef3f0;

}

.auth-card{

    width:100%;

    max-width:440px;

    background:#fff;

    border-radius:20px;

    box-shadow:var(--shadow);

    padding:44px 40px;

    text-align:center;

}

.auth-card .brand-logo{

    width:48px;

    margin-bottom:18px;

}

.auth-card .brand-title{

    font-size:22px;

    margin-bottom:6px;

}

.auth-card .brand-sub{

    font-size:14px;

    margin-bottom:26px;

}

.auth-card .form-group{

    margin-bottom:20px;

    text-align:left;

}

.auth-card .alert{

    text-align:left;

}

.auth-card .login-btn{

    margin-bottom:20px;

}

.auth-footer{

    margin-top:28px;

    padding-top:20px;

    border-top:1px solid var(--border);

}

.auth-footer p{

    font-size:12.5px;

    color:var(--muted);

    margin-bottom:12px;

}

.auth-footer a{

    font-size:14px;

    font-weight:600;
}

@media(max-width:576px){

    .auth-card{

        padding:32px 26px;

        border-radius:15px;

    }

}