/* Tetapan Warna Tema Utama */
:root {
    --matcha-dark: #7C9D96;      /* Hijau Matcha Pekat (Untuk Teks/Ikon) */
    --matcha-bg: #EAF2F0;        /* Hijau Matcha Pastel Lembut (Untuk Background) */
    --matcha-sidebar: #D1E2DE;   /* Hijau Matcha Sederhana (Untuk Sidebar) */
    
    --strawberry-dark: #E07A5F;  /* Pink/Coral Strawberry Pekat (Untuk Duit Keluar) */
    --strawberry-bg: #FDF0ED;    /* Pink Strawberry Pastel Lembut (Untuk Kad Amaran) */
    --strawberry-accent: #F4A261;/* Warna tambahan yang harmoni */
    
    --text-main: #333333;
}

body {
    background-color: var(--matcha-bg);
    color: var(--text-main);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Reka bentuk Layout Utama (Responsive Sidebar) */
.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: var(--matcha-sidebar);
    color: var(--text-main);
    transition: all 0.3s;
    min-height: 100vh;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: var(--matcha-dark);
    color: white;
}

#sidebar ul.components {
    padding: 20px 0;
}

#sidebar ul li a {
    padding: 10px 20px;
    font-size: 1.1em;
    display: block;
    color: var(--text-main);
    text-decoration: none;
}

#sidebar ul li a:hover, #sidebar ul li.active > a {
    background: var(--matcha-dark);
    color: white;
    border-radius: 5px;
    margin: 0 10px;
}

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

/* Kad Duit Masuk (Matcha) & Duit Keluar (Strawberry) */
.card-masuk {
    background-color: #FFFFFF;
    border-left: 5px solid var(--matcha-dark);
}

.card-keluar {
    background-color: var(--strawberry-bg);
    border-left: 5px solid var(--strawberry-dark);
}

.btn-matcha {
    background-color: var(--matcha-dark);
    color: white;
}
.btn-matcha:hover {
    background-color: #638079;
    color: white;
}

.btn-strawberry {
    background-color: var(--strawberry-dark);
    color: white;
}
.btn-strawberry:hover {
    background-color: #C9664C;
    color: white;
}

/* Responsiviti untuk Peranti Mudah Alih */
@media (max-width: 768px) {
    .wrapper {
        flex-direction: column;
    }
    #sidebar {
        min-width: 100%;
        max-width: 100%;
        min-height: auto;
    }
}