/* --- Reset & Variabel --- */
:root {
    --primary-color: #4A90E2;
    --success-color: #50E3C2;
    --danger-color: #E95E5E;
    --warning-color: #F5A623;
    --background-color: #F4F7FC;
    --sidebar-bg: #FFFFFF;
    --card-bg: #FFFFFF;
    --text-primary: #2c3e50;
    --text-secondary: #8e9aaf;
    --border-color: #EAEAEA;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body { background-color: var(--background-color); color: var(--text-primary); }

/* --- Layout Utama --- */
.app-container { display: flex; min-height: 100vh; }
.sidebar { width: 260px; background-color: var(--sidebar-bg); padding: 2rem 1.5rem; border-right: 1px solid var(--border-color); flex-shrink: 0; }
.sidebar-header h2 { color: var(--primary-color); font-size: 1.8rem; text-align: center; margin-bottom: 2rem; }
.sidebar-nav ul { list-style: none; }
.sidebar-nav li a { display: block; color: var(--text-secondary); text-decoration: none; padding: 1rem; border-radius: 8px; margin-bottom: 0.5rem; font-weight: 500; transition: all 0.3s ease; }
.sidebar-nav li a:hover { background-color: var(--background-color); color: var(--primary-color); }
.sidebar-nav li.active a { background-color: var(--primary-color); color: white; }
.main-content { flex-grow: 1; padding: 2rem; overflow-y: auto; }
.main-header { margin-bottom: 2rem; }
.main-header h1 { font-size: 2rem; margin-bottom: 0.25rem; }
.main-header p { color: var(--text-secondary); }

/* --- Layout Grid Utama untuk Konten --- */
.main-layout-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.main-column { display: flex; flex-direction: column; gap: 2rem; }
.side-column { display: flex; flex-direction: column; gap: 2rem; }

/* --- Kartu Ringkasan --- */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.summary-card { background-color: var(--card-bg); padding: 1.5rem; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); border-left: 5px solid; }
.summary-card h4 { color: var(--text-secondary); font-size: 1rem; margin-bottom: 0.5rem; font-weight: 500;}
.summary-card p { font-size: 1.8rem; font-weight: 700; }
.income-card { border-color: var(--success-color); } .income-card p { color: var(--success-color); }
.expense-card { border-color: var(--danger-color); } .expense-card p { color: var(--danger-color); }
.balance-card { border-color: var(--primary-color); } .balance-card p { color: var(--primary-color); }

/* --- Grafik, Anggaran, Aset --- */
.charts-container { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.chart-card, .budget-progress-container, .budget-setup-container, .assets-container { background-color: var(--card-bg); padding: 1.5rem; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.chart-card h3, .budget-progress-container h3, .budget-setup-container h3, .assets-container h3 { margin-bottom: 1.5rem; }
.budget-item { margin-bottom: 1rem; }
.budget-item-label { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.9rem; font-weight: 500; }
.progress-bar-track { background-color: #f0f0f0; height: 12px; border-radius: 6px; overflow: hidden; }
.progress-bar-fill { height: 100%; border-radius: 6px; transition: width 0.5s ease; }
.progress-bar-fill.green { background-color: var(--success-color); } .progress-bar-fill.yellow { background-color: var(--warning-color); } .progress-bar-fill.red { background-color: var(--danger-color); }
.budget-input-item { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.budget-input-item label { flex-grow: 1; font-weight: 500; }
.budget-input-item input { width: 120px; padding: 0.5rem; border: 1px solid var(--border-color); border-radius: 6px; text-align: right; }
.assets-container ul { list-style: none; max-height: 200px; overflow-y: auto; padding-right: 5px; }
.assets-container li { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); }
.assets-container li span:first-child { font-weight: 500; }
.assets-container .asset span:last-child { color: var(--success-color); }
.assets-container .liability span:last-child { color: var(--danger-color); }
#account-form { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; margin-bottom: 1rem; }
#account-form input, #account-form select { border: 1px solid var(--border-color); border-radius: 6px; padding: 0.5rem; }
#account-form button { background-color: var(--primary-color); color: white; border: none; border-radius: 6px; padding: 0 1rem; cursor: pointer; }

/* --- Form Transaksi & Riwayat --- */
.transaction-form-container, .transaction-history { background-color: var(--card-bg); padding: 1.5rem; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-top: 2rem; }
.transaction-form-container h3, .transaction-history h3 { margin-bottom: 1.5rem; }
#transaction-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; }
.form-group:first-child, .form-group:nth-child(2) { grid-column: span 2; }
.form-group label { margin-bottom: 0.5rem; font-weight: 500; font-size: 0.9rem; }
.form-group input, .form-group select { padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1rem; }
.type-toggle { display: flex; }
.type-toggle input[type="radio"] { display: none; }
.type-toggle label { flex: 1; text-align: center; padding: 0.75rem; border: 1px solid var(--border-color); cursor: pointer; transition: all 0.3s ease; margin: 0; }
.type-toggle label:first-of-type { border-radius: 8px 0 0 8px; } .type-toggle label:last-of-type { border-radius: 0 8px 8px 0; border-left: none; }
.type-toggle input[type="radio"]:checked + label { background-color: var(--primary-color); color: white; border-color: var(--primary-color); }
.btn-submit { grid-column: span 2; background-color: var(--primary-color); color: white; border: none; padding: 1rem; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease; }
.btn-submit:hover { background-color: #357ABD; }
#transaction-list { list-style: none; }
#transaction-list li { display: flex; align-items: center; padding: 1rem; border-bottom: 1px solid var(--border-color); gap: 1rem; }
#transaction-list li:last-child { border-bottom: none; }
.transaction-details { flex-grow: 1; }
#transaction-list h4 { font-weight: 500; }
#transaction-list small { color: var(--text-secondary); font-size: 0.85rem; }
.transaction-amount { font-weight: 600; font-size: 1.1rem; flex-shrink: 0;}
.transaction-amount.income { color: var(--success-color); } .transaction-amount.expense { color: var(--danger-color); }
.delete-btn { background: none; border: none; color: var(--danger-color); font-size: 1.2rem; cursor: pointer; opacity: 0.3; transition: opacity 0.3s; }
#transaction-list li:hover .delete-btn { opacity: 1; }

/* --- Sistem Navigasi View --- */
.view { display: none; }
.view.active { display: block; }
.budget-setup-container.full-width { max-width: 800px; margin: 0 auto; }
.placeholder-view { display: flex; justify-content: center; align-items: center; height: 50vh; font-size: 2rem; font-weight: 600; color: var(--text-secondary); background-color: var(--card-bg); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }