/* Reset Dasar */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Roboto, sans-serif;
    height: 100%;
    background-color: #f4f7f6;
    overflow: hidden; /* Mencegah scroll di seluruh body */
}

/* Container Utama */
#app-content {
    height: calc(100vh - 60px); /* Sisakan ruang untuk nav bawah */
    overflow-y: auto;
    padding: 0px 12px;
    box-sizing: border-box;
}

/* Header & Card */
.app-header h1 { font-size: 1.2rem; color: #333; }
.balance-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 15px;
    margin-top: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Bottom Navigation (Ala Native) */
.bottom-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.nav-item {
    text-decoration: none;
    color: #888;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}

.nav-item.active {
    color: #764ba2;
}

.nav-item i {
    font-size: 20px;
    margin-bottom: 2px;
}

/* Grid untuk Highlight (Poin 4) */
.balance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}
.balance-card.main { grid-column: span 2; background: #764ba2; color: white; }
.balance-card.kotor { background: #f6c23e; color: white; }
.balance-card.bersih { background: #1cc88a; color: white; }
.balance-card.pengeluaran { background: #c81c44; color: white; }
.balance-card.pengeluarankotor { background: ##663ef6; color: white; }
.balance-card { padding: 15px; border-radius: 12px; }

/* Styling Form */
.form-input { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.form-input input, .form-input select {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px; /* Agar mobile tidak zoom otomatis saat fokus */
}
.btn-primary {
    background: #764ba2;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 8px;
    font-weight: bold;
}

/* List Item */
.item {
    background: white;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.item.done { border-left: 5px solid #1cc88a; }
.item.planning { border-left: 5px solid #f6c23e; }
.amount-action { display: flex; align-items: center; gap: 10px; }
.amount-action button { border: none; background: none; color: #764ba2; font-size: 20px; }