/* ================================================== */
/* == DESAIN DASAR (KOMPATIBILITAS MAKSIMAL) == */
/* ================================================== */
body {
    font-family: Arial, sans-serif;
    background: #f7f7f7;
    margin: 0;
    padding: 0;
    padding-top: 60px; /* Jarak untuk menu navigasi di atas */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 20px auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 { text-align: center; }
h2 { border-bottom: 2px solid #eee; padding-bottom: 10px; margin-top: 30px; }

table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
th, td { padding: 10px 12px; border: 1px solid #ccc; text-align: left; }
th { background: #f2f2f2; }

.total { font-size: 24px; font-weight: bold; color: #d9534f; margin-bottom: 20px; }

.login-box { width: 300px; margin: 100px auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); text-align: center; }
input[type=password] { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; }
button { padding: 10px 15px; background: #5cb85c; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background: #4cae4c; }
.error { color: red; font-size: 14px; }

/* --- Menu Navigasi (Navbar) --- */
.navbar { background: #333; color: #fff; padding: 0 20px; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; }
.nav-container { max-width: 1200px; margin: 0 auto; height: 60px; }
.nav-brand { font-size: 24px; font-weight: bold; color: #fff; text-decoration: none; line-height: 60px; float: left; }
.nav-menu { float: right; }
.nav-menu a { color: #fff; text-decoration: none; display: inline-block; line-height: 60px; padding: 0 15px; }
.nav-menu a:hover { background: #555; }
.nav-menu .logout { background-color: #d9534f; border-radius: 4px; padding: 8px 15px; line-height: normal; margin-left: 10px; margin-top: 14px; }
.nav-menu .logout:hover { background: #c9302c; }

/* --- Penanda Status --- */
.status-sebagian { color: #f0ad4e; font-weight: bold; }
.status-belum { color: #d9534f; font-weight: bold; }

/* Trik agar container tidak 'collaps' saat berisi elemen float */
.clearfix {
    overflow: auto;
}

/* --- Box Ringkasan Keuangan --- */
.summary-container {
    margin: 20px 0;
}
.summary-box {
    width: 31.3%;
    float: left;
    margin: 1%;
    padding: 20px 0;
    border-radius: 8px;
    color: #fff;
    text-align: center;
}
.summary-box h3 { margin-top: 0; font-size: 18px; }
.summary-box p { font-size: 24px; font-weight: bold; margin-bottom: 0; }
.income { background: #5cb85c; }
.expense { background: #d9534f; }
.balance { background: #337ab7; }

/* --- Layout Detail Laporan --- */
.details-container {
    margin-top: 20px;
}
.transaction-list {
    width: 48%;
    float: left;
    margin: 0 1%;
}

/* --- Formulir --- */
form { background-color: #f9f9f9; padding: 15px; border-radius: 5px; border: 1px solid #ddd; margin-bottom: 25px; }
form label { font-weight: bold; margin-right: 5px; }
form select, form input, form button { margin-right: 15px; margin-bottom: 10px; display: inline-block; vertical-align: middle; }
form select, form input { padding: 8px 10px; border-radius: 4px; border: 1px solid #ccc; }
form button { background-color: #337ab7; }
form button:hover { background-color: #286090; }

/* --- Formulir Khusus Tambah Pengeluaran --- */
.form-pengeluaran { max-width: 600px; margin: 20px auto; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; }
.form-group input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }

/* --- Pesan Notifikasi --- */
.success-message { padding: 15px; background-color: #dff0d8; border: 1px solid #d6e9c6; color: #3c763d; border-radius: 4px; margin-bottom: 20px; }
.error-message { padding: 15px; background-color: #f2dede; border: 1px solid #ebccd1; color: #a94442; border-radius: 4px; margin-bottom: 20px; }


/* ======================================================= */
/* == PERUBAHAN UNTUK TAMPILAN MOBILE (RESPONSIVE) == */
/* ======================================================= */

/* Aturan ini hanya aktif jika lebar layar 768px atau kurang */
@media screen and (max-width: 768px) {
    
    /* Atur ulang tinggi navbar dan tengahkan menu */
    .navbar {
        height: auto;
        padding-bottom: 10px;
    }
    .nav-brand, .nav-menu {
        float: none;
        text-align: center;
        width: 100%;
    }
    .nav-menu a {
        display: block; /* Buat menu jadi vertikal */
        line-height: 40px;
    }
    body {
        padding-top: 150px; /* Sesuaikan padding body untuk navbar baru */
    }

    /* Buat summary box menjadi satu kolom penuh */
    .summary-box {
        width: 98%;
        float: none;
        margin: 10px 1%;
    }

    /* Buat daftar transaksi menjadi satu kolom penuh */
    .transaction-list {
        width: 98%;
        float: none;
        margin: 20px 1% 0 1%;
    }
    
    /* Buat setiap elemen form menjadi lebih besar agar mudah disentuh */
    form label, form select, form input, form button {
        width: 95%;
        margin-right: 0;
        margin-bottom: 10px;
    }
}