/* Reset dasar biar semua elemen mulai dari nol */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body utama */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #000;
}

/* Container buat bungkus semua */
.container {
    background-color: white;
    padding: 10px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* Judul */
h1 {
    text-align: center;
    margin-bottom: 10px;
}

/* Bagian input */
.input-section {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}

#todoInput, #dateInput {
    flex: 1;
    padding: 5px;
    border: 1px solid #ccc;
}

.btn {
    padding: 5px 10px;
    border: none;
    cursor: pointer;
}

.btn-add {
    background-color: green;
    color: white;
}

/* Bagian action */
.action-section {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}

.btn-filter {
    background-color: blue;
    color: white;
}

.btn-delete-all {
    background-color: red;
    color: white;
}

/* Filter options */
.filter-options {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}

.filter-btn {
    background-color: #ddd;
    color: #000;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
}

/* Tabel todo */
.todo-table {
    border: 1px solid #ddd;
}

.table-header {
    display: flex;
    background-color: #eee;
    font-weight: bold;
    padding: 5px;
}

.col-task {
    flex: 2;
}

.col-date, .col-status, .col-actions {
    flex: 1;
}

.table-body {
    /* Kosong, nanti diisi JS */
}

.no-task {
    text-align: center;
    padding: 10px;
}

/* Footer */
footer {
    text-align: center;
    margin-top: 10px;
}

.p5 {
    padding: 5px; /* Definisi buat class p5, biar nggak error */
}