/* File: css/style.css */
.tab-content {
    display: none !important;
}
.tab-content.active {
    display: block !important;
    animation: fadeIn 0.5s;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Class untuk pewarnaan baris di tabel tugas (opsional, dipindahkan ke JS) */
.urgent { background-color: #fee2e2; }
.high { background-color: #ffedd5; }
.medium { background-color: #fef3c7; }
.low { background-color: #ecfccb; }
.completed { text-decoration: line-through; color: #9ca3af; }

/* Styling untuk Modal */
.modal {
    display: none; /* Defaultnya tersembunyi */
    position: fixed; /* Tetap di posisi yang sama bahkan saat di-scroll */
    z-index: 50; /* Tampil di atas elemen lain */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Aktifkan scroll jika kontennya panjang */
    background-color: rgba(0,0,0,0.6); /* Latar belakang hitam transparan */
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* Jarak dari atas dan tengah secara horizontal */
    padding: 24px; /* Sesuaikan dengan padding di index.html (p-6) */
    border: 1px solid #e5e7eb;
    width: 90%; /* Lebar modal, responsif */
    max-width: 500px; /* Lebar maksimal */
    border-radius: 0.5rem; /* Sesuaikan dengan style Tailwind (rounded-lg) */
    position: relative;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    animation: fadeIn 0.4s; /* Animasi muncul */
}

/* Tombol Close di dalam modal */
.close-modal {
    color: #9ca3af;
    float: right;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
}

.close-modal:hover,
.close-modal:focus {
    color: #111827;
    text-decoration: none;
    cursor: pointer;
}

/* Active filter button style */
.active-filter {
    background-color: #dc2626; /* bg-red-600 */
    color: white;
}

/* Secara default, sembunyikan semua elemen admin */
.admin-only {
    display: none !important;
}

/* Jika body memiliki class 'is-admin', tampilkan elemen admin */
body.is-admin .admin-only {
    /* Gunakan display yang sesuai, flex seringkali pilihan yang baik */
    display: flex !important; 
}
body.is-admin .admin-only-cell {
    display: table-cell !important;
}

/* Khusus untuk kolom Aksi di tabel */
.admin-only-header,
.admin-only-cell {
    display: none !important;
}

body.is-admin .admin-only-header,
body.is-admin .admin-only-cell {
    display: table-cell !important;
}