/* =========================================================
WHATSAPP CRM
LIGHT GREEN + WHITE PREMIUM THEME
========================================================= */

:root{
--wa-green:#25D366;
--wa-green-dark:#128C7E;
--wa-green-deep:#087b4c;


--light-green:#eafaf0;
--light-green-2:#f3fff7;
--light-green-3:#dff7e8;

--white:#ffffff;

--text:#183523;
--text-light:#688273;

--border:#ccebd7;

--shadow:0 8px 30px rgba(20,100,55,.08);


}

/* =========================================================
BODY
========================================================= */

body{
background:#f3fff7;
color:var(--text);
font-family:Arial,sans-serif;
}

/* =========================================================
SIDEBAR
========================================================= */

.sidebar{
background:#ffffff;
min-height:100vh;


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

box-shadow:
    4px 0 20px rgba(30,100,55,.05);


}

/* =========================================================
BRAND
========================================================= */

.brand{
color:var(--wa-green-dark);
font-weight:800;
}

/* =========================================================
SIDEBAR LINKS
========================================================= */

.nav-link{
color:#41634d;


padding:12px 14px;

margin-bottom:5px;

border-radius:10px;

transition:.2s ease;


}

.nav-link i{
color:#5b9470;


width:22px;


}

.nav-link:hover{
background:#e7f8ed;


color:#087b4c;


}

.nav-link:hover i{
color:#25D366;
}

.nav-link.active{
background:#dff7e8;


color:#087b4c;

font-weight:600;


}

.nav-link.active i{
color:#25D366;
}

/* =========================================================
SIDEBAR DIVIDER
========================================================= */

.sidebar-divider{
border-color:#d9eee0;
}

/* =========================================================
LOGOUT
========================================================= */

.logout-link{
color:#dc3545;
}

.logout-link i{
color:#dc3545;
}

.logout-link:hover{
background:#fff0f1;


color:#c82333;


}

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

.cardx{
background:#ffffff;


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

border-radius:18px;

padding:20px;

box-shadow:var(--shadow);


}

/* =========================================================
FORM LABEL
========================================================= */

.form-label{
color:#355d43;


font-weight:600;

margin-bottom:7px;


}

/* =========================================================
FORM CONTROL
========================================================= */

.form-control,
.form-select{


background:#ffffff;

border:1px solid #bcdcc7;

color:#183523;

min-height:48px;

border-radius:10px;


}

.form-control::placeholder{
color:#8ca398;
}

.form-control:focus,
.form-select:focus{


background:#ffffff;

color:#183523;

border-color:#25D366;

box-shadow:
    0 0 0 .2rem rgba(37,211,102,.12);


}

/* =========================================================
INPUT GROUP
========================================================= */

.input-group-text{


background:#eafaf0;

border:1px solid #bcdcc7;

color:#128C7E;

min-width:48px;

justify-content:center;


}

/* =========================================================
WHATSAPP BUTTON
========================================================= */

.btn-wa{


background:#25D366;

color:#073b1c;

border:none;

font-weight:700;

border-radius:10px;

transition:.2s ease;


}

.btn-wa:hover{


background:#1fc45a;

color:#ffffff;

transform:translateY(-1px);


}

/* =========================================================
STANDARD SUCCESS BUTTON
========================================================= */

.btn-success{


background:#25D366;

border-color:#25D366;

color:#073b1c;

font-weight:600;


}

.btn-success:hover{


background:#1fb958;

border-color:#1fb958;

color:#ffffff;


}

/* =========================================================
TABLE
========================================================= */

.table{


--bs-table-bg:#ffffff;

--bs-table-color:#244c31;

--bs-table-border-color:#d7ecde;


}

.table thead th{


background:#eafaf0;

color:#176c3a;

font-weight:700;

border-bottom:1px solid #c7e5d1;


}

.table tbody tr:hover{


--bs-table-bg:#f1fbf4;


}

/* =========================================================
LOGIN PAGE
========================================================= */

.login-page{


background:
    radial-gradient(
        circle at top right,
        #d6f8e1 0,
        #edfff3 35%,
        #f8fffa 70%,
        #ffffff 100%
    );

min-height:100vh;


}

/* =========================================================
LOGIN CARD
========================================================= */

.login-card{


background:#ffffff;

padding:32px;

border-radius:24px;

border:1px solid #cdebd7;

box-shadow:
    0 20px 60px rgba(25,110,55,.12);


}

/* =========================================================
LOGIN WHATSAPP ICON
========================================================= */

.login-icon{


width:72px;

height:72px;

border-radius:22px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

background:#e1f8e9;

border:1px solid #bde8cb;

color:#25D366;

font-size:38px;

box-shadow:
    0 8px 25px rgba(37,211,102,.12);


}

/* =========================================================
LOGIN BRAND
========================================================= */

.login-page .brand{


color:#128C7E;


}

/* =========================================================
LOGIN SUB TEXT
========================================================= */

.login-page .text-secondary{


color:#789084 !important;


}

/* =========================================================
PASSWORD BUTTON
========================================================= */

.password-toggle{


background:#eafaf0;

border:1px solid #bcdcc7;

color:#128C7E;


}

.password-toggle:hover{


background:#d9f5e3;

border-color:#25D366;

color:#087b4c;


}

/* =========================================================
CHECKBOX
========================================================= */

.form-check-input{


border-color:#9fc9ae;


}

.form-check-input:checked{


background-color:#25D366;

border-color:#25D366;


}

.form-check-input:focus{


border-color:#25D366;

box-shadow:
    0 0 0 .2rem rgba(37,211,102,.12);


}

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

.alert-success{


background:#e2f8e9;

color:#176d38;

border-color:#bce6c9;


}

.alert-danger{


background:#fff1f2;

color:#a72d3a;

border-color:#f4c8cd;


}

/* =========================================================
LINKS
========================================================= */

a.text-success{


color:#128C7E !important;


}

a.text-success:hover{


color:#087b4c !important;


}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:767px){


.sidebar{

    min-height:auto;

    border-right:none;

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

    box-shadow:
        0 4px 20px rgba(30,100,55,.06);
}


}

/* =========================================================
SMALL MOBILE
========================================================= */

@media(max-width:576px){


body{
    background:#f5fff8;
}


.login-page{

    background:
        linear-gradient(
            180deg,
            #e0f8e8 0%,
            #f4fff7 45%,
            #ffffff 100%
        );
}


.login-card{

    padding:22px;

    border-radius:18px;
}


.brand{

    font-size:26px;
}


.login-icon{

    width:64px;

    height:64px;

    font-size:32px;

    border-radius:18px;
}


.cardx{

    padding:16px;

    border-radius:15px;
}


}
.sidebar-section-title{
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
    color:#8aa496;
    padding-left:12px;
}

.sidebar-brand .brand{
    font-size:20px;
}

.sidebar-nav .nav-link{
    display:flex;
    align-items:center;
}

.sidebar-nav .nav-link i{
    width:22px;
    text-align:center;
}

/* =========================================================
   RESELLER SIDEBAR
========================================================= */

.reseller-sidebar{
    min-height:100vh;
    background:#ffffff;
    border-right:1px solid #d7eedf;
    overflow-y:auto;
}

.reseller-sidebar .sidebar-brand-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    background:#e5f9eb;
    color:#128C7E;
    font-size:22px;
    margin-right:10px;
    flex-shrink:0;
}

.reseller-sidebar .brand{
    color:#128C7E;
    font-size:19px;
    font-weight:800;
}

.reseller-sidebar .brand small{
    color:#83978a;
    font-size:10px;
    font-weight:600;
    letter-spacing:.5px;
    margin-top:2px;
}

.sidebar-section-title{
    color:#8ca095;
    font-size:10px;
    font-weight:800;
    letter-spacing:1px;
    padding:0 12px;
}

.reseller-sidebar .nav-link{
    display:flex;
    align-items:center;
    min-height:44px;
    color:#587063;
    padding:9px 11px;
    border-radius:12px;
    margin-bottom:4px;
    font-size:14px;
    font-weight:600;
    transition:.2s ease;
}

.reseller-sidebar .nav-link:hover{
    background:#effbf3;
    color:#128C7E;
}

.reseller-sidebar .nav-link.active{
    background:#dff7e7;
    color:#128C7E;
    font-weight:700;
}

.sidebar-menu-icon{
    width:30px;
    height:30px;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:7px;
    flex-shrink:0;
}

.reseller-sidebar .nav-link.active .sidebar-menu-icon{
    background:#ffffff;
}

.sidebar-divider{
    border-color:#d8eadf;
    opacity:1;
    margin:18px 0;
}

.reseller-sidebar .logout-link{
    color:#dc3545;
}

.reseller-sidebar .logout-link:hover{
    color:#dc3545;
    background:#fff1f2;
}


/* =========================================================
   MOBILE HEADER
========================================================= */

.reseller-mobile-header{
    height:58px;
    background:#ffffff;
    border-bottom:1px solid #d7eedf;
    position:sticky;
    top:0;
    z-index:1035;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 12px;
}

.reseller-menu-btn{
    width:42px;
    height:42px;
    border-radius:12px;
    background:#edf9f1;
    color:#128C7E;
    border:1px solid #d3eadb;
}

.reseller-mobile-brand{
    color:#128C7E;
    font-size:17px;
    font-weight:800;
}

.reseller-sidebar-close{
    width:38px;
    height:38px;
    border-radius:11px;
    background:#effbf3;
    color:#128C7E;
}

.reseller-sidebar-overlay{
    display:none;
}


/* =========================================================
   MOBILE SIDEBAR
========================================================= */

@media(max-width:767.98px){

    body.sidebar-open{
        overflow:hidden;
    }

    .reseller-sidebar{
        position:fixed;
        top:0;
        left:-290px;
        width:280px;
        height:100vh;
        min-height:100vh;
        z-index:1050;
        transition:left .25s ease;
        box-shadow:12px 0 40px rgba(0,0,0,.15);
    }

    .reseller-sidebar.show{
        left:0;
    }

    .reseller-sidebar-overlay{
        position:fixed;
        inset:0;
        background:rgba(15,40,22,.45);
        z-index:1040;
    }

    .reseller-sidebar-overlay.show{
        display:block;
    }

    .reseller-sidebar .sidebar-brand{
        margin-top:0;
    }

}


/* =========================================================
   DESKTOP SIDEBAR
========================================================= */

@media(min-width:768px){

    .reseller-sidebar{
        position:sticky;
        top:0;
        height:100vh;
    }

}
/* =========================================================
   USER SIDEBAR
========================================================= */

.user-sidebar{
    min-height:100vh;
    background:#ffffff;
    border-right:1px solid #d7eedf;
    overflow-y:auto;
}

.user-sidebar .sidebar-brand-icon{
    width:42px;
    height:42px;
    min-width:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    background:#e4f9eb;
    color:#128C7E;
    font-size:22px;
    margin-right:10px;
}

.user-sidebar .brand{
    color:#128C7E;
    font-size:19px;
    font-weight:800;
}

.user-sidebar .brand small{
    color:#869b8e;
    font-size:10px;
    font-weight:600;
    margin-top:2px;
    letter-spacing:.4px;
}

.sidebar-section-title{
    color:#8ca095;
    font-size:10px;
    font-weight:800;
    letter-spacing:1px;
    padding:0 12px;
}

.user-sidebar .nav-link{
    display:flex;
    align-items:center;
    min-height:44px;
    padding:8px 11px;
    margin-bottom:4px;
    border-radius:12px;
    color:#587063;
    font-size:14px;
    font-weight:600;
    transition:.2s ease;
}

.user-sidebar .nav-link:hover{
    background:#effbf3;
    color:#128C7E;
}

.user-sidebar .nav-link.active{
    background:#dff7e7;
    color:#128C7E;
    font-weight:700;
}

.sidebar-menu-icon{
    width:30px;
    height:30px;
    min-width:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    margin-right:7px;
}

.user-sidebar .nav-link.active .sidebar-menu-icon{
    background:#ffffff;
}

.sidebar-divider{
    border-color:#d8eadf;
    opacity:1;
    margin:18px 0;
}

.user-sidebar .logout-link{
    color:#dc3545;
}

.user-sidebar .logout-link:hover{
    background:#fff1f2;
    color:#dc3545;
}


/* =========================================================
   MOBILE HEADER
========================================================= */

.user-mobile-header{
    position:sticky;
    top:0;
    z-index:1035;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 12px;
    background:#ffffff;
    border-bottom:1px solid #d7eedf;
}

.user-menu-btn{
    width:42px;
    height:42px;
    border-radius:12px;
    background:#edf9f1;
    color:#128C7E;
    border:1px solid #d3eadb;
}

.user-mobile-brand{
    color:#128C7E;
    font-size:17px;
    font-weight:800;
}

.user-mobile-notification{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#edf9f1;
    color:#128C7E;
    border:1px solid #d3eadb;
    text-decoration:none;
}

.user-sidebar-close{
    width:38px;
    height:38px;
    border-radius:11px;
    background:#effbf3;
    color:#128C7E;
}

.user-sidebar-overlay{
    display:none;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767.98px){

    body.sidebar-open{
        overflow:hidden;
    }

    .user-sidebar{
        position:fixed;
        top:0;
        left:-290px;
        width:280px;
        height:100vh;
        min-height:100vh;
        z-index:1050;
        transition:left .25s ease;
        box-shadow:12px 0 40px rgba(0,0,0,.16);
    }

    .user-sidebar.show{
        left:0;
    }

    .user-sidebar-overlay{
        position:fixed;
        inset:0;
        z-index:1040;
        background:rgba(14,39,21,.48);
    }

    .user-sidebar-overlay.show{
        display:block;
    }

    .user-sidebar .sidebar-nav{
        padding-bottom:40px;
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media(min-width:768px){

    .user-sidebar{
        position:sticky;
        top:0;
        height:100vh;
    }

}

/* =========================================================
   ADMIN SIDEBAR
========================================================= */

.admin-sidebar{
    min-height:100vh;
    height:100vh;
    overflow-y:auto;
    background:#ffffff;
    border-right:1px solid #d7eedf;
}

.admin-brand-icon{
    width:43px;
    height:43px;
    min-width:43px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:10px;
    border-radius:13px;
    background:#e4f9eb;
    color:#128C7E;
    font-size:23px;
}

.admin-sidebar .brand{
    color:#128C7E;
    font-size:18px;
    font-weight:800;
}

.admin-sidebar .brand small{
    margin-top:2px;
    color:#8a9c90;
    font-size:10px;
    font-weight:600;
}

.sidebar-section-title{
    padding:0 11px;
    color:#8a9d91;
    font-size:10px;
    font-weight:800;
    letter-spacing:1px;
}

.admin-sidebar .nav-link{
    min-height:44px;
    display:flex;
    align-items:center;
    padding:8px 11px;
    margin-bottom:4px;
    border-radius:12px;
    color:#587063;
    font-size:14px;
    font-weight:600;
    transition:.2s;
}

.admin-sidebar .nav-link:hover{
    color:#128C7E;
    background:#effbf3;
}

.admin-sidebar .nav-link.active{
    color:#128C7E;
    background:#dff7e7;
    font-weight:700;
}

.sidebar-menu-icon{
    width:30px;
    min-width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:7px;
    border-radius:9px;
}

.admin-sidebar .nav-link.active .sidebar-menu-icon{
    background:#ffffff;
}

.sidebar-divider{
    margin:18px 0;
    border-color:#d7eadf;
    opacity:1;
}

.admin-sidebar .logout-link{
    color:#dc3545;
}

.admin-sidebar .logout-link:hover{
    color:#dc3545;
    background:#fff1f2;
}


/* =========================================================
   MOBILE ADMIN HEADER
========================================================= */

.admin-mobile-header{
    position:sticky;
    top:0;
    z-index:1035;
    height:58px;
    padding:0 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#ffffff;
    border-bottom:1px solid #d7eedf;
}

.admin-menu-btn,
.admin-mobile-notification{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    border:1px solid #d3eadb;
    background:#edf9f1;
    color:#128C7E;
}

.admin-mobile-notification{
    text-decoration:none;
}

.admin-mobile-brand{
    color:#128C7E;
    font-size:16px;
    font-weight:800;
}

.admin-sidebar-close{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:#effbf3;
    color:#128C7E;
}

.admin-sidebar-overlay{
    display:none;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767.98px){

    body.sidebar-open{
        overflow:hidden;
    }

    .admin-sidebar{
        position:fixed;
        top:0;
        left:-295px;
        z-index:1050;

        width:280px;
        height:100vh;
        min-height:100vh;

        transition:left .25s ease;

        box-shadow:
            12px 0 40px
            rgba(0,0,0,.16);
    }

    .admin-sidebar.show{
        left:0;
    }

    .admin-sidebar-overlay{
        position:fixed;
        inset:0;
        z-index:1040;

        background:
            rgba(14,39,21,.48);
    }

    .admin-sidebar-overlay.show{
        display:block;
    }

    .admin-sidebar .sidebar-nav{
        padding-bottom:40px;
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media(min-width:768px){

    .admin-sidebar{
        position:sticky;
        top:0;
    }

}