/* General Body Styling */
body {
    font-family: 'Manrope', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    color: #343a40;
    /* PENTING untuk full-screen layout dengan Flexbox */
    display: flex;
    flex-direction: column; /* Mengatur item-child secara vertikal */
    min-height: 100vh;      /* Pastikan body mengisi tinggi viewport penuh */
    margin: 0;              /* Hapus margin default body */
    overflow-x: hidden;     /* Mencegah scroll horizontal yang tidak diinginkan */
}

/* Navbar Customization */
.navbar {
    border-bottom: 1px solid #e7e7e7;
    flex-shrink: 0; /* Pastikan navbar tidak menyusut saat ada elemen flex-grow */
}

/* Main Content Area */
/* PENTING: Class ini diterapkan pada tag <main> di header.php */
/* Agar <main> mengambil sisa tinggi layar setelah navbar dan footer */
main.d-flex.flex-column.flex-grow-1 {
    flex-grow: 1;
}

/* Main Container Padding (sesuaikan untuk layout baru) */
/* Biasanya .container ada di dalam <main>. Untuk map.php, kita pakai .container-fluid di dalam main */
/* Pastikan padding ini tidak mengganggu layout full-screen */
main .container {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Card Shadow Enhancement */
.card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
}

/* Default Map Container Styling (digunakan di detail.php) */
#map, #detailMap {
    height: 600px; /* Tinggi default untuk peta non-fullscreen */
    width: 100%;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
}

/* Button Enhancements */
.btn {
    border-radius: 3px;
    font-weight: 500;
}

/* Form Control Focus */
.form-control:focus, .form-select:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

/* Footer Styling */
.footer {
    background-color: #e9ecef;
    border-top: 1px solid #dee2e6;
    flex-shrink: 0; /* Pastikan footer tidak menyusut */
}

/* Alert Messages */
.alert {
    border-radius: 0.5rem;
}

/* Specifics for detail page password toggle */
#wifiPassword {
    font-weight: bold;
    color: #007bff; /* Warna teks password */
}
#passwordPlaceholder {
    font-style: italic;
    color: #6c757d;
}

/* --- Gaya Khusus untuk map.php Fullscreen --- *//* --- Gaya Khusus untuk map.php Fullscreen --- */
.map-page-wrapper {
    display: flex;
    flex-grow: 1;
    position: relative; /* Penting untuk tombol toggle overlay */
}

/* Sidebar Kiri untuk Pencarian, Filter dan Daftar WiFi */
.sidebar-wifi {
    /* Default desktop: lebar normal */
    width: 350px;
    min-width: 280px;
    background-color: #ffffff;
    border-right: 1px solid #dee2e6;
    padding: 0rem; /* Padding default */
    overflow-y: auto;
    flex-shrink: 0;
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease, padding 0.3s ease; /* Transisi untuk lebar dan padding */
    position: relative; /* Untuk z-index di mobile */
    z-index: 1020; /* Lebih tinggi dari peta tapi di bawah modal */
    height:100vh;
}

/* Sembunyikan konten sidebar secara default di mobile */
.sidebar-wifi .sidebar-content {
    display: block; /* Default display block */
    transition: opacity 0.3s ease;
}


/* Kontainer Peta Full Screen */
.map-container-full {
    flex-grow: 1;
    height: 100vh;
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
}

#map-full {
    height: 100%;
    width: 100%;
}

.sidebar-filter-card {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #ffffff;
    /*
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    */
    box-shadow: none !important;
    border-bottom: 1px solid #eee;
}

#wifiListContainer {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 5px;
}

/* Tombol Toggle Sidebar (untuk mobile) */
.sidebar-toggle-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000; /* Pastikan di atas peta */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Sedikit bayangan */
    border-radius: 50px; /* Bentuk pil */
    padding: 10px 20px;
    display: none; /* Sembunyikan default di desktop */
    min-width: 180px; /* Lebar minimum tombol */
}

/* Responsiveness untuk tampilan mobile (di bawah breakpoint 'lg' - 992px) */
@media (max-width: 991.98px) {
    .map-page-wrapper {
        flex-direction: column; /* Tumpukan vertikal: sidebar di atas peta */
        margin-top: 0;
        margin-bottom: 0;
    }

    .sidebar-wifi {
        width: 100%; /* Lebar penuh di mobile */
        min-width: unset;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
        height: auto;
        max-height: 0; /* Sembunyikan sidebar secara default di mobile */
        padding: 0; /* Padding 0 saat tersembunyi */
        overflow: hidden; /* Sembunyikan konten */
        transition: max-height 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease; /* Transisi untuk buka/tutup */
        box-shadow: none; /* Hapus shadow saat tersembunyi */
    }

    /* Saat sidebar aktif/terbuka di mobile */
    .sidebar-wifi.active-mobile {
        max-height: 80vh; /* Batasi tinggi sidebar saat terbuka di mobile */
        /* padding: 1rem; /* Padding saat terbuka */
        overflow-y: auto; /* Aktifkan scroll saat terbuka */
        box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Tambahkan shadow saat terbuka */
    }

    /* Sembunyikan konten sidebar saat tidak aktif di mobile */
    .sidebar-wifi:not(.active-mobile) .sidebar-content {
        display: none; /* Konten di dalam sidebar disembunyikan jika sidebar tidak aktif */
    }

    .map-container-full {
        height: 100vh; /* Peta fullscreen di mobile */
        position: fixed; /* Posisi fixed agar tidak terdorong oleh sidebar */
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000; /* Di bawah sidebar tapi di atas konten lain */
        border-radius: 0; /* Hapus radius di tampilan fullscreen */
        margin-top:50px!important;
    }

    /* Atur z-index body saat sidebar mobile terbuka agar peta tidak tumpang tindih */
    body.sidebar-open-mobile .map-container-full {
        z-index: 999; /* Turunkan z-index peta agar sidebar tampil di atas */
    }


    .sidebar-toggle-btn {
        display: block; /* Tampilkan tombol toggle di mobile */
        z-index: 1010; /* Lebih tinggi dari peta */
    }
}

/* Gaya untuk thumbnail di daftar WiFi */
.list-group-item img {
    border: 1px solid #eee;
}
.list-group-item .d-flex.justify-content-center.align-items-center {
    border: 1px solid #eee;
}
.nav-link{
    font-weight: 800;
}
.nav-link.active{
    color:#0d6efd!important;
}
.filter-toggle-group button{
    margin-bottom:3px;
}