/* styles.css - Styling dasar untuk aplikasi */

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
}

.header {
    background-color: #333;
    color: #fff;
    padding: 15px 20px;
    text-align: center;
    display: flex; /* Menggunakan flexbox untuk tata letak yang responsif */
    justify-content: space-between; /* Menempatkan item di ujung-ujung */
    align-items: center; /* Pusatkan item secara vertikal */
    flex-wrap: wrap; /* Izinkan item untuk membungkus ke baris baru pada layar kecil */
    border-radius: 0 0 8px 8px; /* Sudut membulat di bagian bawah */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    position: relative; /* Penting untuk positioning dropdown */
}

.header h1 {
    margin: 0;
    font-size: 1.8em; /* Ukuran font yang lebih besar untuk judul */
}

/* Gaya untuk tombol 'Menu' di header */
.header .btn {
    padding: 8px 15px; /* Padding lebih kecil untuk tombol navigasi */
    font-size: 0.9em;
    margin-left: auto; /* Dorong tombol ke kanan */
}

/* --- Sidebar Navigasi Styles --- */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999; /* Di bawah modal utama, di atas konten */
    display: none; /* Sembunyikan secara default */
}

.sidebar-overlay.open {
    display: block; /* Tampilkan saat sidebar terbuka */
}

.sidebar {
    position: fixed;
    top: 0;
    right: -250px; /* Sembunyikan di luar layar di sebelah kanan */
    width: 250px; /* Lebar sidebar */
    height: 100%;
    background-color: #fff;
    box-shadow: -2px 0 10px rgba(0,0,0,0.2);
    z-index: 1000; /* Pastikan di atas overlay */
    transition: right 0.3s ease-out; /* Animasi slide */
    display: flex;
    flex-direction: column;
    padding-top: 20px;
}

.sidebar.open {
    right: 0; /* Geser masuk ke layar */
}

.sidebar-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #888;
    transition: color 0.2s ease;
}

.sidebar-close-btn:hover {
    color: #333;
}

.sidebar-nav {
    display: flex;
    flex-direction: column; /* Tumpuk item navigasi secara vertikal */
    padding: 20px;
    gap: 10px; /* Jarak antar item */
}

.sidebar-nav-item {
    width: 100%; /* Tombol navigasi mengambil lebar penuh */
    text-align: left; /* Rata kiri teks tombol */
    padding: 10px 15px;
    font-size: 1.1em;
    border-radius: 5px; /* Sudut membulat untuk item menu */
    text-decoration: none;
    color: #333;
    background-color: transparent;
    transition: background-color 0.2s ease;
}

.sidebar-nav-item:hover {
    background-color: #e0e0e0; /* Warna hover yang lembut */
}

.sidebar-nav-item.btn-danger:hover {
    background-color: #dc3545;
    color: #fff;
}


.container {
    max-width: 1200px; /* Lebar maksimum kontainer utama */
    margin: 20px auto; /* Pusatkan kontainer dan berikan margin atas/bawah */
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Efek bayangan yang lebih lembut */
    border-radius: 8px; /* Sudut membulat */
}

.login-container {
    max-width: 400px;
    margin: 80px auto; /* Pusatkan di tengah halaman */
    padding: 30px;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    text-align: center;
}

.login-container h2 {
    margin-bottom: 25px;
    color: #333;
    font-size: 2em;
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
}

.form-control,
input[type="text"],
input[type="password"],
textarea,
select {
    width: calc(100% - 24px); /* Sesuaikan untuk padding dan border */
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Pastikan padding dan border termasuk dalam lebar */
    font-size: 1em;
    transition: border-color 0.3s ease; /* Efek transisi saat fokus */
}

.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: #007bff; /* Warna border saat elemen fokus */
    outline: none; /* Hapus outline default browser */
}

.form-control.is-invalid,
input[type="text"].is-invalid,
input[type="password"].is-invalid {
    border-color: #dc3545; /* Warna border untuk input tidak valid */
}

.form-control-readonly {
    background-color: #e9ecef; /* Warna latar belakang untuk input readonly */
    cursor: not-allowed; /* Kursor tidak diizinkan */
}


.invalid-feedback {
    color: #dc3545;
    font-size: 0.9em;
    margin-top: 5px;
    display: block;
}

.btn {
    display: inline-block;
    padding: 12px 25px;
    margin: 8px 5px;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1.05em;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Efek transisi hover */
}

.btn-primary {
    background-color: #007bff;
}

.btn-success {
    background-color: #28a745;
}

.btn-warning {
    background-color: #ffc107;
    color: #212529; /* Teks lebih gelap untuk tombol peringatan */
}

.btn-danger {
    background-color: #dc3545;
}

.btn-secondary {
    background-color: #6c757d;
}

.btn-info { /* Warna baru untuk tombol 'Tambah Anggota' */
    background-color: #17a2b8;
}

.btn:hover {
    opacity: 0.9;
    transform: translateY(-2px); /* Efek sedikit naik saat hover */
}

/* Gaya untuk tombol kecil */
.btn-small {
    padding: 5px 10px;
    font-size: 0.85em;
    margin: 2px;
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 0.95em;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

/* Styling Tabel Utama */
.table-responsive {
    overflow-x: auto; /* Mengizinkan scroll horizontal pada tabel di layar kecil */
    margin-top: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden; /* Memastikan sudut membulat diterapkan */
}

th, td {
    border: 1px solid #e0e0e0;
    padding: 10px 12px; /* Disesuaikan untuk lebih ringkas */
    text-align: left;
}

th {
    background-color: #e9ecef;
    font-weight: bold;
    color: #495057;
    text-transform: uppercase;
    font-size: 0.9em;
}

tr:nth-child(even) {
    background-color: #f8f8f8; /* Warna latar belakang selang-seling untuk baris */
}

tr:hover {
    background-color: #f0f0f0; /* Efek hover pada baris tabel */
}

/* Gaya untuk baris kepala keluarga yang dapat diklik */
.kepala-row {
    /* cursor: pointer; */ /* Dihapus karena klik sekarang pada tombol */
}

.kepala-row:hover {
    /* background-color: #e6f7ff; */ /* Dihapus agar tidak konflik dengan hover tombol */
}

/* Kelas untuk menyembunyikan/menampilkan elemen */
.hidden {
    display: none !important; /* Gunakan !important untuk memastikan override */
}

/* Styling untuk Anggota Keluarga di dalam Modal */
.anggota-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

.anggota-table th,
.anggota-table td {
    border: 1px solid #e9e9e9;
    padding: 8px 10px;
    font-size: 0.9em;
}

.anggota-table th {
    background-color: #f2f2f2;
    color: #666;
}

.anggota-table tr:nth-child(even) {
    background-color: #ffffff;
}

.anggota-table tr:hover {
    background-color: #f5f5f5;
}

.no-anggota {
    font-style: italic;
    color: #888;
    padding: 12px;
    text-align: center;
}

/* Styling untuk Form Pencarian */
.search-form {
    background-color: #e9f5ff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    align-items: end;
}

.search-form .form-group {
    margin-bottom: 0;
}

.search-form input[type="text"] {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #a8d8ff;
}

.search-form .btn {
    width: auto;
    padding: 10px 20px;
    margin: 0;
}


/* --- MODAL UTAMA (Pop-up Anggota Keluarga) STYLES --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Latar belakang semi-transparan */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Pastikan modal di atas konten lain */
    backdrop-filter: blur(3px); /* Efek blur pada latar belakang */
}

.modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    max-width: 90%; /* Lebar maksimum modal */
    max-height: 90vh; /* Tinggi maksimum modal, agar bisa discroll */
    overflow-y: auto; /* Aktifkan scroll jika konten melebihi tinggi */
    animation: fadeInScale 0.3s ease-out; /* Animasi muncul */
}

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #888;
    transition: color 0.2s ease;
}

.modal-close-btn:hover {
    color: #333;
}

.modal-content h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    font-size: 1.5em;
}

/* Gaya untuk peta di maps.php */
#mapContainer {
    height: 600px; /* Tinggi peta yang cukup besar */
    width: 100%; /* Lebar peta penuh */
    border-radius: 8px;
    margin-top: 20px;
    border: 1px solid #ccc;
    background-color: #e0e0e0; /* Latar belakang abu-abu saat peta belum dimuat */
}

/* Gaya untuk peta di admin_crud.php */
#map {
    height: 400px; /* Tinggi peta */
    width: 100%; /* Lebar peta */
    border-radius: 8px;
    margin-top: 15px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    background-color: #e0e0e0; /* Latar belakang abu-abu saat peta belum dimuat */
}

.map-controls {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}


/* --- SIDEBAR NAVIGASI STYLES --- */
/* (Sudah ada di bagian atas, tidak perlu duplikasi) */


/* Responsivitas untuk Tabel Utama (Stacking pada layar kecil) */
@media screen and (max-width: 768px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }

    /* Sembunyikan thead (header asli) di tampilan mobile */
    thead tr {
        display: none;
    }

    tr {
        border: 1px solid #ddd;
        margin-bottom: 15px;
        border-radius: 8px;
        overflow: hidden;
    }

    td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        text-align: left; /* Rata kiri teks konten data */
        font-size: 0.95em;
        padding-top: 45px; /* Beri ruang yang cukup untuk label baru */
        padding-left: 15px; /* Padding kiri untuk konten data */
        padding-right: 15px; /* Padding kanan untuk konten data */
    }

    td:last-child {
        border-bottom: 0;
    }

    td:before {
        content: attr(data-label);
        position: absolute;
        top: 0; /* Posisikan di bagian paling atas sel */
        left: 0;
        width: 100%; /* Ambil lebar penuh sel */
        padding: 8px 15px; /* Padding untuk label */
        white-space: normal; /* Izinkan teks label untuk wrap */
        text-align: left;
        font-weight: bold;
        color: #fff; /* Warna teks putih untuk kontras */
        background-color: #007bff; /* Latar belakang biru untuk header mini */
        font-size: 0.85em; /* Ukuran font sedikit lebih kecil agar pas */
        text-transform: uppercase; /* Ubah teks menjadi huruf besar */
        box-sizing: border-box; /* Pastikan padding termasuk dalam lebar */
        border-bottom: 1px solid #0056b3; /* Garis bawah tipis untuk pemisah */
    }

    /* Label data untuk tabel Kepala Keluarga (dashboard.php) */
    .kepala-keluarga-table td[data-label='Nama Kepala Keluarga:']:before { content: "Nama Kepala Keluarga:"; }
    .kepala-keluarga-table td[data-label='NIK Kepala Keluarga:']:before { content: "NIK Kepala Keluarga:"; }
    .kepala-keluarga-table td[data-label='No. KK:']:before { content: "No. KK:"; }
    .kepala-keluarga-table td[data-label='Alamat:']:before { content: "Alamat:"; }
    .kepala-keluarga-table td[data-label='Titik Koordinat:']:before { content: "Koordinat:"; }
    .kepala-keluarga-table td[data-label='Nama Kelompok:']:before { content: "Kelompok:"; }
    .kepala-keluarga-table td[data-label='Pengurus Keluarga:']:before { content: "Pengurus Keluarga:"; }
    .kepala-keluarga-table td[data-label='NIK Pengurus Keluarga:']:before { content: "NIK Pengurus Keluarga:"; }
    .kepala-keluarga-table td[data-label='Anggota:']:before { content: "Anggota:"; }
    .kepala-keluarga-table td[data-label='Aksi:']:before { content: "Aksi:"; }
    .kepala-keluarga-table td[data-label='Foto Rumah:']:before { content: "Foto Rumah:"; } /* Label baru untuk foto rumah */


    /* Responsivitas untuk tabel anggota keluarga di dalam modal (digunakan di modal "Lihat Pengurus") */
    .anggota-table td {
        display: block;
        text-align: left;
        padding: 10px 15px;
        border-bottom: 1px solid #f0f0f0;
        font-size: 0.95em;
        color: #222;
        position: relative;
        padding-top: 45px; /* Beri ruang yang cukup untuk label baru */
    }

    .anggota-table td:last-child {
        border-bottom: none;
    }

    .anggota-table td:before {
        content: attr(data-label);
        display: block;
        font-weight: bold;
        color: #fff; /* Warna teks putih untuk kontras */
        background-color: #17a2b8; /* Latar belakang biru-cyan untuk header mini di modal */
        font-size: 0.8em; /* Ukuran font sedikit lebih kecil agar pas */
        text-transform: uppercase;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 8px 15px;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
        border-bottom: 1px solid #117a8b;
    }
    .anggota-table td[data-label="Aksi:"] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 10px;
        padding-bottom: 10px;
        justify-content: flex-start;
    }
    .anggota-table td[data-label="Aksi:"] .btn-small {
        margin: 0;
    }

    /* Responsivitas untuk tabel Kelompok (kelompok.php) */
    .kelompok-table td[data-label='No:']:before { content: "No:"; }
    .kelompok-table td[data-label='Nama Kelompok:']:before { content: "Nama Kelompok:"; }
    .kelompok-table td[data-label='Jumlah Kepala Keluarga:']:before { content: "Jumlah KK:"; }
    .kelompok-table td[data-label='Ketua Kelompok:']:before { content: "Ketua Kelompok:"; }
    .kelompok-table td[data-label='Pengurus Keluarga Terkait:']:before { content: "Pengurus Terkait:"; }
    .kelompok-table td[data-label='Aksi:']:before { content: "Aksi:"; }

    /* Responsivitas untuk tabel Bansos (bansos.php) */
    .bansos-table td[data-label='No:']:before { content: "No:"; }
    .bansos-table td[data-label='Nama Penerima:']:before { content: "Nama Penerima:"; }
    .bansos-table td[data-label='NIK Penerima:']:before { content: "NIK Penerima:"; }
    .bansos-table td[data-label='Alamat:']:before { content: "Alamat:"; }
    .bansos-table td[data-label='Jumlah Uang:']:before { content: "Jumlah Uang:"; }
    .bansos-table td[data-label='Pengurus Keluarga:']:before { content: "Pengurus Keluarga:"; }
    .bansos-table td[data-label='NIK Pengurus Keluarga:']:before { content: "NIK Pengurus Keluarga:"; }
    .bansos-table td[data-label='Aksi:']:before { content: "Aksi:"; }

    /* Responsivitas untuk tabel Pengurus (pengurus.php) */
    .pengurus-table td[data-label='No:']:before { content: "No:"; }
    .pengurus-table td[data-label='Nama Pengurus:']:before { content: "Nama Pengurus:"; }
    .pengurus-table td[data-label='NIK Pengurus:']:before { content: "NIK Pengurus:"; }
    .pengurus-table td[data-label='Jabatan:']:before { content: "Jabatan:"; }
    .pengurus-table td[data-label='Kontak:']:before { content: "Kontak:"; }
    .pengurus-table td[data-label='Alamat Kepala Keluarga:']:before { content: "Alamat Kepala Keluarga:"; } /* Label baru untuk alamat KK */
    .pengurus-table td[data-label='Aksi:']:before { content: "Aksi:"; }
}

/* Gaya Paginasi */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    flex-wrap: wrap; /* Izinkan wrapping pada layar kecil */
    gap: 5px; /* Jarak antar tombol paginasi */
}

.pagination .page-link {
    display: block;
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #007bff;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination .page-link:hover {
    background-color: #007bff;
    color: #fff;
}

.pagination .page-link.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
    font-weight: bold;
}

/* Gaya untuk gambar thumbnail di tabel dashboard */
.table-thumbnail-image {
    /* Menggunakan unit responsif dan clamp() untuk ukuran gambar */
    width: clamp(30px, 8vw, 50px); /* Min 30px, 8% viewport width, Max 50px */
    height: clamp(30px, 8vw, 50px); /* Min 30px, 8% viewport width, Max 50px */
    object-fit: cover; /* Memastikan gambar mengisi ruang tanpa terdistorsi */
    border-radius: 5px; /* Sedikit sudut membulat */
    border: 1px solid #ddd; /* Border tipis */
    vertical-align: middle; /* Pusatkan secara vertikal dengan teks */
}


/* Responsivitas tambahan untuk form */
@media screen and (max-width: 500px) {
    .login-container, .container {
        margin: 15px;
        padding: 15px;
    }
    .form-control,
    input[type="text"],
    input[type="password"],
    textarea,
    select {
        width: calc(100% - 20px);
    }
    .search-form {
        grid-template-columns: 1fr;
    }
    .modal-content {
        padding: 20px;
    }
}

/* Animasi untuk modal */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}