/*
=========================================================
SISTEM PENGURUSAN JABATAN PERHUTANAN SABAH
Bootstrap 5.3
Author : ChatGPT
Version : 1.0
=========================================================
*/

:root{

    --primary:#1B5E20;
    --secondary:#2E7D32;
    --success:#43A047;
    --lightgreen:#66BB6A;
    --wood:#6D4C41;
    --cream:#F5F5DC;
    --white:#FFFFFF;
    --light:#F8F9FA;
    --gray:#ECEFF1;
    --dark:#263238;
    --danger:#DC3545;
    --warning:#FFC107;
    --info:#0DCAF0;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    background:#edf4ed;
    color:#333;
    min-height:100vh;

}

/* ===============================
   Scrollbar
================================ */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#e8f5e9;

}

::-webkit-scrollbar-thumb{

    background:var(--secondary);
    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}

/* ===============================
   Navbar
================================ */

.navbar{

    background:#fff;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
    height:65px;

}

.navbar-brand{

    font-weight:700;
    color:var(--primary)!important;

}

/* ===============================
   Sidebar
================================ */

.sidebar{

    position:fixed;
    top:0;
    left:0;
    width:250px;
    height:100%;
    background:linear-gradient(180deg,var(--primary),var(--secondary));
    color:#fff;
    overflow-y:auto;
    transition:.3s;
    z-index:999;

}

.sidebar-header{

    text-align:center;
    padding:25px;

}

.sidebar-header img{

    width:80px;

}

.sidebar-header h5{

    margin-top:15px;
    font-weight:600;

}

.sidebar a{

    display:block;
    color:#fff;
    padding:15px 22px;
    text-decoration:none;
    transition:.3s;

}

.sidebar a:hover{

    background:rgba(255,255,255,.15);
    padding-left:30px;

}

.sidebar a.active{

    background:#ffffff;
    color:var(--primary);
    font-weight:600;

}

.sidebar i{

    margin-right:10px;

}

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

.content{

    margin-left:250px;
    padding:25px;

}

/* ===============================
   Card
================================ */

.card{

    border:none;
    border-radius:15px;
    transition:.3s;
    box-shadow:0 5px 18px rgba(0,0,0,.08);

}

.card:hover{

    transform:translateY(-5px);

}

.card-header{

    border-radius:15px 15px 0 0!important;
    background:var(--secondary);
    color:#fff;
    font-weight:600;

}

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

.btn-primary{

    background:var(--secondary);
    border:none;

}

.btn-primary:hover{

    background:var(--primary);

}

.btn-success{

    background:var(--secondary);
    border:none;

}

.btn-success:hover{

    background:var(--primary);

}

.btn-wood{

    background:var(--wood);
    color:#fff;

}

.btn-wood:hover{

    background:#5D4037;
    color:#fff;

}

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

.form-control,
.form-select{

    border-radius:10px;
    min-height:48px;

}

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

    border-color:var(--secondary);
    box-shadow:0 0 0 .2rem rgba(46,125,50,.15);

}

.input-group-text{

    background:var(--secondary);
    color:#fff;
    border:none;

}

/* ===============================
   Login & Register
================================ */

.login-box,
.register-card{

    background:rgba(255,255,255,.12);
    backdrop-filter:blur(15px);
    border-radius:20px;
    box-shadow:0 20px 40px rgba(0,0,0,.25);

}

/* ===============================
   Table
================================ */

.table{

    vertical-align:middle;

}

.table thead{

    background:var(--secondary);
    color:#fff;

}

/* ===============================
   Badge
================================ */

.badge{

    font-size:.85rem;

}

/* ===============================
   Footer
================================ */

footer{

    background:#fff;
    border-top:1px solid #ddd;
    padding:15px;

}

/* ===============================
   Statistics
================================ */

.stat-icon{

    font-size:45px;
    opacity:.25;

}

.stat-number{

    font-size:32px;
    font-weight:700;

}

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

.fade-up{

    animation:fadeUp .6s ease;

}

@keyframes fadeUp{

0%{

opacity:0;
transform:translateY(20px);

}

100%{

opacity:1;
transform:translateY(0);

}

}

/* ===============================
   Back To Top
================================ */

#btnTop{

    position:fixed;
    bottom:25px;
    right:25px;
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:var(--secondary);
    color:#fff;
    display:none;
    z-index:999;

}

#btnTop:hover{

    background:var(--primary);

}

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

@media(max-width:991px){

.sidebar{

    margin-left:-250px;

}

.sidebar.active{

    margin-left:0;

}

.content{

    margin-left:0;

}

}

@media(max-width:768px){

.content{

    padding:15px;

}

.card{

    margin-bottom:20px;

}

}

@media(max-width:576px){

.sidebar{

    width:230px;

}

.navbar-brand{

    font-size:16px;

}

.stat-number{

    font-size:26px;

}

}