/* Reset dan Font Setup */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Nunito', sans-serif; transition: background 0.3s, color 0.3s; }

:root {
    --bg-color: #ffe4e1;
    --card-bg: #ffffff;
    --text-color: #5a3a44;
    --border-color: #ffb6c1;
    --header-bg: #ffc0cb;
    --pink-hot: #ff69b4;
}

/* Dark Mode Colors */
body.dark-mode {
    --bg-color: #2d1b1e;
    --card-bg: #3d2b2e;
    --text-color: #ffd1dc;
    --border-color: #5a3a44;
    --header-bg: #5a3a44;
    --pink-hot: #ff8da1;
}

body { background-color: var(--bg-color); color: var(--text-color); padding-bottom: 70px; }
.container { max-width: 100%; margin: 0 auto; padding: 10px; }

.header { text-align: center; margin-bottom: 15px; }
.header h1 { color: var(--pink-hot); font-weight: 800; font-size: 20px; text-shadow: 1px 1px 0px #fff; }
.header p { font-weight: 700; font-size: 12px; }

/* Dark Mode Toggle Icon (Kanan Bawah) */
.mode-toggle { 
    position: fixed; 
    bottom: 70px; 
    right: 15px; 
    font-size: 20px; 
    cursor: pointer; 
    color: var(--pink-hot); 
    background: var(--card-bg); 
    width: 45px; 
    height: 45px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 50%; 
    border: 2px solid var(--border-color); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 1000;
}

.btn-add-row { width: 100%; padding: 12px; background-color: var(--pink-hot); color: white; border: none; border-radius: 15px; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 #d0468e; margin-bottom: 15px; }
.btn-add-row:active { transform: translateY(4px); box-shadow: 0 0 0; }

/* Tabel Responsive */
.table-container { background: var(--card-bg); border-radius: 15px; border: 2px solid var(--border-color); overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
table { width: 100%; border-collapse: collapse; table-layout: fixed; } 

th, td { 
    border: 1px solid var(--border-color); 
    text-align: center; 
    vertical-align: middle; 
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    white-space: normal; 
}
th { background-color: var(--header-bg); color: var(--text-color); font-weight: 900; font-size: 11px; padding: 10px 2px; }

/* Input, Select, & Textarea */
td input, td select, td textarea { 
    width: 100%; border: none; background: transparent; 
    font-size: 12px; font-weight: 700; color: var(--text-color); 
    text-align: center; outline: none; padding: 10px 2px; 
    display: block; font-family: 'Nunito', sans-serif;
}

/* Container khusus tumpuk Tanggal & Jam */
.datetime-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 2px;
}
.datetime-container input {
    font-size: 11px;
    padding: 2px 0;
}

/* Textarea Fleksibel Otomatis Panjang ke Bawah */
td textarea {
    resize: none; /* Matikan fitur tarik manual browser */
    overflow: hidden; /* Sembunyikan scrollbar agar estetis */
    text-align: left; 
    padding: 8px 4px;
    min-height: 40px;
    height: auto;
}

td input:focus, td select:focus, td textarea:focus { background: rgba(255,105,180,0.1); }

.btn-del { background: #ff4d4d; color: white; border: none; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px; }

/* Modal & Footer */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: 1000; justify-content: center; align-items: center; }
.modal-box { background: var(--card-bg); padding: 20px; border-radius: 20px; border: 3px solid var(--pink-hot); text-align: center; width: 80%; }
.modal-box h3 { color: var(--pink-hot); margin-bottom: 10px; }
.modal-buttons { display: flex; gap: 10px; }
.btn-cancel, .btn-delete-confirm { padding: 10px; border-radius: 10px; border: none; width: 100%; font-weight: 800; }
.btn-cancel { background: #ccc; }
.btn-delete-confirm { background: #ff4d4d; color: white; }

.sticky-footer { position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--pink-hot); color: white; text-align: center; padding: 8px 0; font-size: 11px; font-weight: 700; border-top: 2px solid #ff1493; z-index: 500; }