:root{
    --green-soft-1:#f1f8f4;
    --green-soft-2:#e8f5e9;
    --green-soft-3:#c8e6c9;
    --green-soft-4:#81c784;
    --green-soft-5:#66bb6a;
    --green-main:#4caf50;
    --dark:#2e2e2e;
}

/* =========================
   RESET
========================= */
*{
    box-sizing:border-box;
}

html, body{
    height:100%;
}

/* =========================
   BODY BACKGROUND (GRADASI)
========================= */
body{
    margin:0;
    font-family:'Segoe UI',Tahoma,sans-serif;
    color:#333;

    /* 🌿 GRADASI HIJAU LEMBUT */
    background: linear-gradient(
        135deg,
        #f1f8f4 0%,
        #e8f5e9 35%,
        #c8e6c9 70%,
        #b2dfdb 100%
    );
}

/* Efek cahaya hijau lembut (premium) */
body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at top right, rgba(76,175,80,.15), transparent 60%),
        radial-gradient(circle at bottom left, rgba(129,199,132,.18), transparent 65%);
    z-index:-1;
}

/* =========================
   PAKSA MATIKAN BG GAMBAR
========================= */
.container,
.container-fluid,
.container-fluid1,
main,
.content{
    background:none !important;
    background-image:none !important;
}

/* =========================
   SIDEBAR (ICON ONLY)
========================= */
.sidebar{
    position:fixed;
    top:0;
    left:0;
    width:78px;
    height:100vh;
    background:linear-gradient(180deg,#7adf9b,#4caf50);
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:16px 0;
    overflow-y:auto;
    scrollbar-width:none;
    z-index:1100;
    transition:width .3s ease;
}

.sidebar::-webkit-scrollbar{
    display:none;
}

/* Hover animasi */
.sidebar:hover{
    width:88px;
}

/* Logo */
.sidebar img{
    width:46px;
    margin-bottom:18px;
}

/* Menu Icon */
.sidebar a{
    width:48px;
    height:48px;
    margin:8px 0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    color:#fff;
    font-size:22px;
    text-decoration:none;
    transition:.25s ease;
}

.sidebar a:hover{
    background:rgba(255,255,255,.25);
    transform:scale(1.1);
}

/* Hilangkan teks menu */
.sidebar span{
    display:none!important;
}

/* =========================
   CONTENT AREA
========================= */
.content{
    margin-left:78px;       /* 🔑 tidak ketutup sidebar */
    padding:24px;
    min-height:100vh;
    transition:margin-left .3s ease;
}

/* =========================
   CARD
========================= */
.card{
    border-radius:14px;
    border:none;
    background:#fff;
    box-shadow:0 6px 14px rgba(0,0,0,.08);
}

.card h3,
.card h5{
    font-weight:600;
}

/* =========================
   CARD GRADIENT
========================= */
.bg-primary{
    background:linear-gradient(135deg,#64b5f6,#42a5f5)!important;
}
.bg-success{
    background:linear-gradient(135deg,#81c784,#66bb6a)!important;
}
.bg-danger{
    background:linear-gradient(135deg,#e57373,#ef5350)!important;
}
.bg-warning{
    background:linear-gradient(135deg,#fff59d,#ffd54f)!important;
}
.bg-info{
    background:linear-gradient(135deg,#81d4fa,#4fc3f7)!important;
}
.bg-secondary{
    background:linear-gradient(135deg,#b0bec5,#90a4ae)!important;
}

/* =========================
   CHART
========================= */
.chart-container{
    width:100%;
    height:360px;
    background:#fff;
    padding:16px;
    border-radius:16px;
    position:relative;
}

.chart-container canvas{
    width:100%!important;
    height:100%!important;
}

/* =========================
   TABLE
========================= */
.table{
    border-radius:14px;
    overflow:hidden;
    background:#fff;
}

thead{
    background:linear-gradient(
        135deg,
        var(--green-soft-4),
        var(--green-soft-5)
    );
    color:#fff;
}

/* =========================
   ALERT & BADGE
========================= */
.alert{
    border-radius:12px;
}

.badge{
    font-size:.75rem;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:768px){
    .sidebar{
        width:60px;
    }

    .content{
        margin-left:60px;
        padding:16px;
    }
}