/*==================================================
    SISTEM PREDIKSI PENJUALAN PRODUK
    Author : Yola Khairunisa
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#f4f6f9;
    color:#343a40;
}

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

.login-page{

    background:linear-gradient(135deg,#0d6efd,#4dabf7);

    min-height:100vh;

}

.login-card{

    border:none;

    border-radius:20px;

    overflow:hidden;

}

.login-card .card-header{

    background:#0d6efd;

    color:#fff;

    text-align:center;

    padding:20px;

    font-size:22px;

    font-weight:600;

}

.login-card .card-body{

    padding:35px;

}

.login-card img{

    width:90px;

}

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

.sidebar{

    position:fixed;

    top:0;

    left:0;

    width:260px;

    height:100vh;

    background:#0d6efd;

    color:#fff;

    overflow-y:auto;

    z-index:999;

}

.sidebar-header{

    padding:25px;

    text-align:center;

    border-bottom:1px solid rgba(255,255,255,.2);

}

.sidebar-header img{

    width:75px;

    margin-bottom:10px;

}

.sidebar-header h5{

    margin:0;

    font-weight:600;

}

.sidebar-header small{

    color:#dbe8ff;

}

.sidebar .nav-link{

    color:#fff;

    padding:14px 25px;

    transition:.3s;

    border-left:4px solid transparent;

}

.sidebar .nav-link i{

    width:25px;

}

.sidebar .nav-link:hover{

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

    border-left:4px solid #fff;

}

.sidebar .nav-link.active{

    background:#fff;

    color:#0d6efd;

    border-left:4px solid #ffc107;

    font-weight:600;

}

/*==============================
MAIN
==============================*/

.main{

    margin-left:260px;

    min-height:100vh;

}

/*==============================
NAVBAR
==============================*/

.navbar-custom{

    background:#fff;

    padding:18px 30px;

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

}

.navbar-custom h4{

    margin:0;

    font-weight:600;

}

/*==============================
CONTENT
==============================*/

.content{

    padding:30px;

}

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

.card{

    border:none;

    border-radius:15px;

    transition:.3s;

}

.card:hover{

    transform:translateY(-3px);

}

.card-header{

    background:#fff;

    font-weight:600;

}

/*==============================
STATISTIK
==============================*/

.stat-card{

    border-radius:15px;

    color:#fff;

}

.stat-card h2{

    font-weight:700;

}

.bg-primary-gradient{

    background:linear-gradient(45deg,#0d6efd,#4dabf7);

}

.bg-success-gradient{

    background:linear-gradient(45deg,#198754,#51cf66);

}

.bg-warning-gradient{

    background:linear-gradient(45deg,#ffc107,#ffd43b);

}

.bg-danger-gradient{

    background:linear-gradient(45deg,#dc3545,#ff6b6b);

}

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

.table{

    vertical-align:middle;

}

.table thead{

    background:#0d6efd;

    color:#fff;

}

.table th{

    font-weight:600;

}

.dataTables_wrapper .dataTables_filter input{

    border-radius:8px;

}

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

.form-control,

.form-select{

    border-radius:10px;

}

.form-control:focus,

.form-select:focus{

    box-shadow:none;

    border-color:#0d6efd;

}

.btn{

    border-radius:10px;

    font-weight:500;

}

/*==============================
BADGE
==============================*/

.badge{

    font-weight:500;

}

/*==============================
FOOTER
==============================*/

.footer{

    text-align:center;

    padding:15px;

    color:#888;

    font-size:14px;

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:992px){

.sidebar{

    left:-260px;

}

.sidebar.show{

    left:0;

}

.main{

    margin-left:0;

}

.content{

    padding:20px;

}

}

@media(max-width:768px){

.navbar-custom{

    padding:15px;

}

.content{

    padding:15px;

}

.login-card{

    margin:15px;

}

}