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

html {
    overflow-x: hidden; /* Cegah scroll horizontal tak sengaja di layar kecil */
}

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
    overflow-x: hidden; /* Cegah scroll horizontal tak sengaja di layar kecil */
}

img {
    max-width: 100%;
    height: auto; /* Pastikan gambar (foto rumah, dll) tidak pernah melebihi lebar layar */
}

.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 */
    max-width: 85vw; /* Jangan melebihi lebar layar di HP sempit */
    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;
    position: relative; /* Titik acuan untuk tombol geser */
    -webkit-overflow-scrolling: touch; /* Scroll lebih halus di iOS/Android */
}

/* Tombol panah geser tabel ke kiri/kanan (muncul otomatis lewat JS hanya saat tabel bisa digeser) */
.table-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 123, 255, 0.92);
    color: #fff;
    font-size: 1.4em;
    line-height: 1;
    display: none; /* Ditampilkan oleh JS hanya jika memang ada konten untuk digeser */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    z-index: 20;
    padding: 0;
}
.table-scroll-btn:active {
    background: rgba(0, 90, 200, 0.95);
}
.table-scroll-btn-left { left: 6px; }
.table-scroll-btn-right { right: 6px; }

.table-responsive-anggota {
    overflow-x: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

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) {
    /* Tabel data ditampilkan tetap menyamping (seperti tabel biasa) di layar kecil,
       tidak lagi ditumpuk jadi kartu. Geser ke kiri/kanan lewat swipe jari atau
       tombol panah yang otomatis muncul (lihat .table-scroll-btn di bawah). */
    .table-responsive table,
    .table-responsive-anggota table {
        min-width: 640px; /* Paksa tabel selebar ini agar kolom tidak gepeng & scroll aktif */
    }
}

/* 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 */
}

.photo-lightbox-trigger {
    cursor: zoom-in; /* Menandakan thumbnail bisa diklik untuk diperbesar */
}

/* Modal foto rumah ukuran penuh (menyesuaikan ukuran layar) */
.photo-modal-content {
    max-width: 90vw;
    width: auto;
    text-align: center;
}
.photo-modal-image {
    display: block;
    max-width: 85vw;
    max-height: 75vh;
    width: auto;
    height: auto;
    margin: 10px auto 0 auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}


/* 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);
    }
}

/* --- Perapian tambahan khusus layar HP Android (umumnya 360px - 412px) --- */
@media screen and (max-width: 480px) {
    /* Judul header sering kepanjangan (mis. "Buku Besar PKH", "Operasi Admin") */
    .header {
        padding: 12px 15px;
    }
    .header h1 {
        font-size: 1.25em;
        text-align: left;
    }
    .header .btn {
        padding: 8px 12px;
        font-size: 0.85em;
    }

    /* Kontainer utama diperkecil paddingnya agar konten tidak mepet/terpotong */
    .container, .login-container {
        margin: 10px;
        padding: 12px;
        max-width: calc(100vw - 20px);
    }

    /* Tombol umum: kurangi padding & margin supaya tidak berdesakan */
    .btn {
        padding: 10px 16px;
        font-size: 0.95em;
        margin: 4px 3px;
    }

    /* Kolom Aksi pada semua tabel: tumpuk tombol full-width supaya mudah disentuh & tidak berantakan */
    td[data-label="Aksi:"] {
        display: flex !important;
        flex-direction: column;
        gap: 6px;
        padding-top: 45px !important;
    }
    td[data-label="Aksi:"] .btn,
    td[data-label="Aksi:"] .btn-small {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        text-align: center;
    }

    /* Form pencarian & form tambah/edit: satu kolom penuh, jarak lebih rapat */
    .search-form {
        padding: 12px;
        gap: 10px;
    }
    .form-group {
        margin-bottom: 14px;
    }

    /* Modal: kurangi padding agar konten tidak terlalu sempit */
    .modal-content {
        padding: 16px;
        max-width: 95%;
    }
    .modal-content h3 {
        font-size: 1.2em;
    }

    /* Peta: kurangi tinggi supaya tidak mendominasi layar kecil */
    #mapContainer {
        height: 380px;
    }
    #map {
        height: 300px;
    }
}