/* Container Utama */
.btn-group-peta {
  display: flex;          /* Mengaktifkan flexbox */
  flex-wrap: wrap;        /* KUNCI: Pindah baris jika tidak cukup ruang */
  gap: 10px;              /* Jarak antar tombol (horizontal & vertikal) */
  padding: 20px;
  width: 100%;            /* Mengikuti lebar layar/parent */
}

/* Style Tombol dengan Ukuran Fix */
.btn-peta-jabatan {
  width: 200px;           /* Lebar tetap */
  height: 150px;           /* Tinggi tetap */
  box-sizing: border-box; /* Pastikan padding tidak merusak ukuran */
  

}

.btn-terisi {
  background-color: #81E6D9; 
  color: rgb(11, 0, 0);
}
.btn-kosong {
  background-color: #ed5d52; 
  color: white;
}
.btn-lebih {
  background-color: #2dce89; 
  color: white;
}

.btn-kurang-lebih {
  background-color: #6637be; 
  color: white;
}


/* Styling Custom untuk DataTables */
.dataTables_wrapper .dataTables_length select {
    padding-right: 2rem;
    background-color: white;
    border-radius: 0.375rem;
    border-color: #e2e8f0;
}
.dataTables_wrapper .dataTables_filter input {
    padding: 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid #e2e8f0;
    margin-left: 0.5rem;
}
table.dataTable.no-footer {
    border-bottom: 1px solid #e2e8f0;
}
table.dataTable thead th {
    padding: 1rem;
    background-color: #1e293b;
    color: white;
}
table.dataTable tbody td {
    padding: 0.75rem 1rem;
}

.modal {
    z-index: 1060 !important; /* Standar Bootstrap adalah 1055 */
    position: fixed !important;
}
.modal-backdrop {
    z-index: 1050 !important; /* Standar Bootstrap adalah 1050 */
}

/* Pastikan sidebar Anda z-indexnya lebih rendah dari 1050 */
.sidebar {
    z-index: 1000; 
}

        /* --- PERBAIKAN MODAL (SOLUSI MASALAH POSISI) --- */
        /* Memaksa modal agar selalu fixed memenuhi layar & di atas elemen lain */
        #detailModal {
            position: fixed !important;
            bottom: 0;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999 !important; /* Pastikan di atas DataTables */
            background-color: rgba(0, 0, 0, 0.5); /* Fallback background gelap transparan */
            overflow-y: auto; /* Agar bisa discroll jika layar kecil */
            
        }
        
        /* Memastikan logika toggle hidden bekerja */
        #detailModal.hidden {
            display: none !important;
            
        }
        
        /* Memastikan modal menggunakan Flexbox saat tampil untuk centering */
        #detailModal:not(.hidden) {
            display: flex !important;
            align-items: center;
            justify-content: center;
            padding-top: 53%;
            text-align: justify;    
        }


        /* --- CSS STYLES TABS--- */
        body { font-family: sans-serif; background: #f0f2f5; }

        /* Wadah Utama */
        .tabs {
            display: flex;
            flex-wrap: wrap;
            max-width: 100%;
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        /* Sembunyikan Input Radio yang asli */
        .tabs input[type="radio"] {
            display: none;
        }

        /* Gaya Label (Sebagai Tombol Tab) */
        .tabs label {
            padding: 10px 20px;
            font-weight: bold;
            cursor: pointer;
            color: #777;
            border-bottom: 2px solid transparent;
            transition: 0.3s;
        }

        .tabs label:hover {
            color: #3498db;
        }

        /* Gaya Konten */
        .tab-content {
            width: 100%;
            padding: 20px 0;
            display: none; /* Sembunyikan semua secara default */
            order: 1; /* Pastikan konten muncul di bawah label */
            border-top: 1px solid #eee;
            margin-top: 10px;
        }

        /* --- LOGIKA CSS UTAMA --- */
        
        /* 1. Ubah warna label jika radio button terkait dicentang */
        .tabs input[type="radio"]:checked + label {
            color: #3498db;
            border-bottom: 2px solid #3498db;
        }

        /* 2. Tampilkan konten yang berada tepat setelah label yang aktif */
        /* Kita gunakan selector ~ untuk mencari div konten yang sesuai */
        #tab1:checked ~ #content1,
        #tab2:checked ~ #content2,
        #tab3:checked ~ #content3 {
            display: block;
        }