/* --- Styles for data_umum.php Layout --- */
.main-content-wrapper {
    display: flex;
    gap: 15px; /* Jarak antara sidebar dan konten */
    width: calc(100% - 30px); /* Ambil 100% lebar viewport dikurangi 2x margin (15px kiri + 15px kanan) */
    max-width: 2400px; /* Opsional: Batasi lebar maksimum agar tidak terlalu lebar di layar besar */
    margin: 15px auto; /* Margin atas/bawah 15px, otomatis tengah secara horizontal */
    box-sizing: border-box; /* Penting agar padding/border tidak menambah lebar total */
    background-color: #fff; /* Latar belakang utama untuk seluruh area konten */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    min-height: calc(100vh - 200px); /* Sesuaikan tinggi agar mengisi viewport, mempertimbangkan header/footer */
    padding: 0; /* Hapus padding default agar sidebar/konten mengisi penuh */
    overflow: hidden; /* Pastikan konten tidak meluber dari border-radius */
}

.sidebar-container {
    width: 300px; /* <--- PERUBAHAN: Lebar sidebar dikurangi menjadi 180px */
    flex-shrink: 0; /* Pastikan sidebar tidak menyusut */
    background-color: #f8f9fa; /* Latar belakang sidebar, sedikit abu-abu */
    border-radius: 8px 0 0 8px; /* Sudut membulat hanya di sisi kiri */
    overflow-y: auto; /* Aktifkan scroll jika konten sidebar terlalu panjang */
    display: flex; /* Untuk menumpuk elemen secara vertikal */
    flex-direction: column;
    transition: width 0.3s ease, background-color 0.3s ease; /* Animasi lebar & warna latar sidebar */
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background-color: #fff; /* Latar belakang untuk header sidebar */
    border-radius: 8px 0 0 0; /* Sudut membulat kiri atas */
    position: sticky; /* Jaga header tetap terlihat saat konten sidebar di-scroll */
    top: 0;
    z-index: 10;
    transition: all 0.3s ease;
}

.sidebar-title {
    display: flex;
    align-items: center;
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
}

/* --- Styling untuk Halaman Edit CV Full Width --- */
/* Aturan ini akan menimpa perilaku default content-body jika sebelumnya diatur sebagai flex/grid
   untuk layout dua kolom (misalnya saat sidebar personil ada).
   Kita ingin content-body berperilaku sebagai blok normal saat sidebar personil tidak ada. */
.content-body.cv-edit-full-width {
    display: block;
    max-width: none;
    margin: 0;
    padding: 20px; /* Ini akan menciptakan padding di dalam area abu-abu */
    background-color: #f8f9fa; /* Ini adalah warna abu-abu yang Anda inginkan */
    border-radius: 8px; /* Sudut membulat untuk area abu-abu */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Sedikit bayangan untuk estetika */
    box-sizing: border-box; /* Penting agar padding tidak menambah lebar */
}

/* Target elemen pertama di dalam content-body ketika cv-edit-full-width aktif.
   Ini adalah asumsi bahwa file curriculum_vitae_management.php menghasilkan satu elemen root (misalnya, div)
   yang berisi seluruh formulir. Elemen inilah yang perlu diperlebar. */
.content-body.cv-edit-full-width > div:first-child { /* Ini menargetkan .cv-management-container */
    width: auto; /* Biarkan lebar menyesuaikan secara otomatis */
    max-width: none;
    margin: 0; /* Hapus semua margin */
    padding: 0; /* Hapus semua padding */
    background-color: transparent; /* Pastikan transparan agar background abu-abu induknya terlihat */
    border-radius: 0;
    box-shadow: none;
}


.sidebar-title i {
    margin-right: 10px;
    color: #007bff; /* Warna ikon */
}

.collapse-sidebar-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 1em;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.collapse-sidebar-btn:hover {
    background-color: #e9ecef;
}

.sidebar-nav {
    padding-top: 10px;
    flex-grow: 1; /* Biarkan navigasi mengisi ruang yang tersedia */
}

.sidebar-section {
    margin-bottom: 5px; /* Jarak antar bagian */
}

.sidebar-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.sidebar-section-header:hover {
    background-color: #e9ecef;
}

.sidebar-section-title {
    font-size: 0.95em;
    font-weight: bold;
    color: #333;
    flex-grow: 1;
    display: flex; /* Untuk menyelaraskan ikon jika ada */
    align-items: center;
}

.sidebar-section-title i {
    margin-left: 5px;
    font-size: 0.8em;
    color: #888;
    transition: transform 0.2s;
}

/* Rotate caret when section is open */
.sidebar-section.open .sidebar-section-title i {
    transform: rotate(180deg);
}

.sidebar-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Untuk efek collapsible, awalnya sembunyikan */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* Tampilkan submenu saat section terbuka */
.sidebar-section.open .sidebar-submenu {
    max-height: 500px; /* Nilai arbitrer besar untuk menampilkan konten */
}

.sidebar-submenu li {
    position: relative; /* Untuk bar kuning */
}

.sidebar-submenu li a {
    display: block;
    padding: 8px 20px; /* Padding default */
    color: #555;
    font-size: 0.9em;
    transition: background-color 0.2s, color 0.2s;
}

.sidebar-submenu li a:hover {
    background-color: #f0f2f5;
    color: #007bff;
}

/* Item aktif di sidebar */
.sidebar-submenu li.active a {
    background-color: #e0e4eb; /* Latar belakang untuk item aktif */
    color: #007bff; /* Warna teks untuk item aktif */
    font-weight: 600;
}

/* Bar kuning untuk item aktif */
.sidebar-submenu li.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px; /* Lebar bar kuning */
    background-color: #FFD700; /* Warna kuning */
    border-radius: 0 3px 3px 0; /* Sudut membulat kanan */
}

/* Styling untuk item bersarang (seperti "Identitas Wajib Pajak" di gambar) */
.sidebar-submenu li.sidebar-sub-item a {
    padding-left: 40px; /* Indentasi untuk sub-item */
    position: relative;
}

.sidebar-submenu li.sidebar-sub-item a::before {
    content: '\2022'; /* Unicode untuk bullet point */
    color: #888; /* Warna abu-abu untuk bullet */
    font-size: 0.8em;
    position: absolute;
    left: 25px; /* Posisi bullet */
    top: 50%;
    transform: translateY(-50%);
}

.sidebar-submenu li.sidebar-sub-item.active a {
    color: #007bff; /* Warna teks aktif untuk sub-item */
}

.sidebar-submenu li.sidebar-sub-item.active::before {
    content: '\2022'; /* Tetap bullet */
    color: #007bff; /* Warna bullet aktif */
    background: none; /* Pastikan bar kuning tidak muncul di sub-item */
}


/* --- Collapsed Sidebar Styles (triggered by JS) --- */
.sidebar-container.collapsed {
    width: 80px; /* Lebar sidebar saat diciutkan, diperpanjang */
    background-color: #FFD700; /* Seluruh sidebar menjadi kuning */
    overflow: hidden; /* Sembunyikan konten yang melampaui lebar */
    padding-bottom: 0; /* Hapus padding bawah */
    justify-content: flex-start; /* Konten dimulai dari atas */
    align-items: center; /* Pusatkan secara horizontal */
}

.sidebar-container.collapsed .sidebar-header {
    background-color: #FFD700; /* Latar belakang kuning */
    height: 100px; /* Tinggi tetap untuk area header */
    padding: 0;
    border-bottom: none;
    position: relative; /* Crucial for absolute positioning of children */
    width: 100%;
}

.sidebar-container.collapsed .sidebar-title {
    position: absolute; /* Posisikan blok title secara absolut */
    top: 5px; /* Sejajar dengan top tombol panah */
    left: 40px; /* Di sebelah kanan tombol panah (lebar tombol ~30px + 5px margin) */
    right: 5px; /* Beri batas kanan agar bisa di-align center */

    display: flex;
    flex-direction: column; /* Ikon di atas teks */
    align-items: center; /* Pusatkan ikon dan teks secara horizontal di dalam blok ini */
    justify-content: flex-start; /* Mulai dari atas blok ini */

    background-color: transparent; /* Hapus latar belakang biru */
    height: auto;
    width: auto;
}

.sidebar-container.collapsed .sidebar-title i {
    display: block; /* Tampilkan ikon user */
    margin-right: 0;
    color: #333; /* Warna ikon gelap agar kontras di kuning */
    font-size: 1.2em;
    margin-bottom: 5px; /* Jarak antara ikon dan teks */
}

.sidebar-container.collapsed .sidebar-title .sidebar-title-text {
    writing-mode: vertical-rl; /* Teks vertikal, kanan ke kiri */
    text-orientation: mixed; /* Orientasi karakter campuran */
    font-size: 0.8em; /* Ukuran font lebih kecil */
    font-weight: bold;
    color: #333; /* Warna teks gelap agar kontras di kuning */
    white-space: nowrap;
    position: static; /* Biarkan flexbox menanganinya */
    transform: none; /* Hapus transform individu pada teks */
}

.sidebar-container.collapsed .collapse-sidebar-btn {
    display: block; /* Pastikan tombol terlihat */
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: transparent; /* Transparan agar latar kuning terlihat */
    color: #333; /* Warna ikon gelap */
    box-shadow: none;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
}

.sidebar-container.collapsed .sidebar-nav {
    flex-grow: 1;
    width: 100%;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebar-container.collapsed .sidebar-section {
    margin-bottom: 0; /* Hapus margin antar section */
}

.sidebar-container.collapsed .sidebar-section-header {
    background-color: #fff; /* Latar belakang putih untuk section header */
    height: 100px; /* Tinggi tetap untuk setiap section header */
    padding: 0;
    justify-content: center;
    align-items: center;
    position: relative;
    border-bottom: 1px solid #eee; /* Garis pemisah antar section */
    width: 100%;
}
/* Hapus border-bottom dari section header terakhir jika diinginkan */
.sidebar-container.collapsed .sidebar-section:last-of-type .sidebar-section-header {
    border-bottom: none;
}

.sidebar-container.collapsed .sidebar-section-title {
    display: none; /* Sembunyikan sepenuhnya teks dan ikon panah untuk section title saat collapsed */
}

.sidebar-container.collapsed .sidebar-submenu {
    display: none; /* Sembunyikan semua submenu saat sidebar diciutkan */
}


/* Content container styling */
.content-container {
    flex-grow: 1; /* Kontainer konten mengisi sisa ruang */
    flex-basis: 0; /* Beri basis 0 agar flex-grow bekerja dari awal */
    min-width: 0; /* PENTING: Izinkan elemen menyusut hingga 0 sebelum tumbuh */
    box-sizing: border-box; /* Pastikan padding tidak menambah lebar */
    padding: 15px; /* Mengurangi padding di semua sisi */
    background-color: #fff; /* Pastikan konten container memiliki latar belakang putih */
    border-radius: 0 8px 8px 0; /* Sudut membulat hanya di sisi kanan */
}

.content-header {
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-header h2 {
    margin: 0;
    font-size: 1.5em;
    color: #333;
}

.breadcrumb {
    font-size: 0.85em;
    color: #888;
    /* Memastikan teks panjang dapat melipat */
    word-break: break-word;
    overflow-wrap: break-word;
}

.breadcrumb a {
    color: #007bff;
}

.breadcrumb span {
    font-weight: 600;
    color: #555;
}

.content-body {
    color: #555;
}

/* --- Styling for Personal Profile Display (Read-Only) --- */
.personal-profile-display-container {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-top: 20px; /* Jarak dari navigasi tab */
}

.profile-header-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Mengubah ini menjadi flex-end agar rata bawah */
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.profile-header-info h3 {
    margin: 0;
    font-size: 3em;
    color: #333;
}

.profile-photo-wrapper {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #007bff; /* Border biru di sekitar foto */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    flex-shrink: 0; /* Pastikan foto tidak menyusut */
}

.profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Pastikan gambar mengisi area tanpa terdistorsi */
}

/* =====================================================================
   CSS UNTUK TATA LETAK GRID TERPADU (perataan baris lintas kolom)
   ===================================================================== */
.profile-details-grid-unified {
    display: grid;
    /* Mendefinisikan 9 kolom konten + 2 kolom gap = 11 kolom */
    grid-template-columns:
        max-content min-content 1fr /* Kolom utama 1: label, :, value (kolom 1,2,3) */
        20px /* Gap antar kolom utama (kolom 4) */
        max-content min-content 1fr /* Kolom utama 2: label, :, value (kolom 5,6,7) */
        20px /* Gap antar kolom utama (kolom 8) */
        max-content min-content 1fr; /* Kolom utama 3: label, :, value (kolom 9,10,11) */
    gap: 8px 0; /* Hanya gap vertikal antar baris (8px), horizontal gap sudah di grid-template-columns */
    align-items: start; /* Pastikan konten sejajar di bagian atas */
}

.grid-title {
    font-size: 1.2em;
    color: #007bff;
    margin-bottom: 15px;
    border-bottom: 2px solid #007bff;
    padding-bottom: 5px;
}

/* Penempatan judul di kolom utama masing-masing */
.grid-title.col1-title { grid-column: 1 / span 3; }
.grid-title.col2-title { grid-column: 5 / span 3; }
.grid-title.col3-title { grid-column: 9 / span 3; }

.detail-label-unified {
    font-weight: 600;
    color: #555;
    text-align: left;
    margin-right: 10px; /* Tambahkan spasi 5px di sebelah kanan label */
}


.detail-colon-unified {
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

.detail-value-unified {
    color: #333;
    padding-left: 10px; /* Tambahkan spasi 5px di sebelah kiri nilai */
    /* MODIFIKASI: Memastikan teks panjang dapat melipat */
    word-break: break-word;
}


/* Penempatan eksplisit untuk item setiap kolom */
.col1-label { grid-column: 1; }
.col1-colon { grid-column: 2; }
.col1-value { grid-column: 3; }

.col2-label { grid-column: 5; }
.col2-colon { grid-column: 6; }
.col2-value { grid-column: 7; }

.col3-label { grid-column: 9; }
.col3-colon { grid-column: 10; }
.col3-value { grid-column: 11; }

/* Sel kosong tidak mengambil ruang visual, tetapi tetap menjaga struktur grid */
.empty-cell {
    visibility: hidden;
}


/* =====================================================================
   RESPONSIVE LAYOUT UNTUK LAYAR YANG LEBIH KECIL
   ===================================================================== */

/* Untuk layar tablet (misal: 769px - 992px) */
@media (max-width: 992px) {
    /* Grid detail profil berubah menjadi 2 kolom utama */
    .profile-details-grid-unified {
        grid-template-columns:
            max-content min-content 1fr /* Kolom utama 1 (kolom 1,2,3) */
            20px /* Gap (kolom 4) */
            max-content min-content 1fr; /* Kolom utama 2 (kolom 5,6,7) */
    }
    /* Penempatan ulang judul */
    .grid-title.col1-title { grid-column: 1 / span 3; }
    .grid-title.col2-title { grid-column: 5 / span 3; }
    .grid-title.col3-title { grid-column: 1 / span 7; margin-top: 20px; } /* Kolom 3 sekarang merentang kedua kolom konten dan gap */

    /* Item-item yang tadinya di kolom ke-3 akan mengalir setelah item kolom ke-2 */
    .col3-label { grid-column: 1; } /* Mulai dari awal "baris" baru */
    .col3-colon { grid-column: 2; }
    .col3-value { grid-column: 3; }
}

/* Untuk layar ponsel (misal: <= 768px) */
@media (max-width: 768px) {
    /* Sidebar menumpuk di atas konten utama */
    .main-content-wrapper {
        flex-direction: column; /* Sidebar menumpuk di atas konten */
        margin: 10px; /* Sesuaikan margin */
        width: calc(100% - 20px); /* Sesuaikan lebar untuk margin 10px */
        gap: 0; /* Hapus gap saat dalam mode kolom */
    }
    .main-content-wrapper > .sidebar-container {
        margin-right: 0; /* Hapus margin kanan */
        margin-bottom: 15px; /* Tambahkan margin bawah */
    }
    .sidebar-container {
        width: 100%; /* Sidebar mengambil lebar penuh */
        border-right: none;
        border-bottom: 1px solid #eee;
        border-radius: 8px; /* Sudut membulat penuh */
        background-color: #f8f9fa;
    }
    /* Mengembalikan styling sidebar ke mode "tidak collapsed" untuk layar kecil */
    .sidebar-container .sidebar-header {
        border-radius: 8px 8px 0 0;
        flex-direction: row;
        height: auto;
        background-color: #fff;
    }
    .sidebar-container .sidebar-title {
        background-color: transparent;
        height: auto;
        width: auto;
        position: static;
        transform: none;
        flex-direction: row;
        padding-left: 0;
    }
    .sidebar-container .sidebar-title .sidebar-title-text {
        position: static;
        transform: none;
        white-space: normal;
        font-size: 1.1em;
        color: #333;
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        margin-left: 0;
    }
    .sidebar-container .sidebar-title i {
        position: static;
        margin-right: 10px;
        display: block;
        color: #007bff;
        margin-bottom: 0;
    }
    .sidebar-container .collapse-sidebar-btn {
        display: block;
        position: static;
        background: none;
        box-shadow: none;
        width: auto;
        height: auto;
        color: #888;
    }
    .sidebar-container .sidebar-nav {
        flex-grow: 1;
        width: 100%;
        padding-top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .sidebar-container .sidebar-section-header {
        padding: 10px 15px;
        height: auto;
        background-color: transparent;
        border-bottom: none;
    }
    .sidebar-container .sidebar-section-title {
        display: flex;
    }
    .sidebar-container .sidebar-section-title .section-title-text {
        position: static;
        transform: none;
        white-space: normal;
        font-size: 0.95em;
        color: #333;
        writing-mode: horizontal-tb;
        text-orientation: mixed;
    }
    .sidebar-container .sidebar-section-title i.fa-chevron-down {
        display: block;
    }
    .sidebar-container .sidebar-submenu li a {
        padding: 6px 15px;
    }
    .sidebar-container .sidebar-submenu li.sidebar-sub-item a {
        padding-left: 30px;
    }
    .sidebar-container .sidebar-submenu li.sidebar-sub-item a::before {
        left: 15px;
    }
    .sidebar-container .sidebar-submenu li.active::before {
        height: 80%;
        top: 10%;
    }

    .content-container {
        border-radius: 8px; /* Sudut membulat penuh untuk konten yang ditumpuk */
    }
    .content-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .breadcrumb {
        margin-top: 10px;
    }

    /* Grid detail profil menjadi satu kolom */
    .profile-details-grid-unified {
        grid-template-columns: max-content min-content 1fr; /* Hanya 3 kolom */
    }
    /* Semua judul merentang kolom konten tunggal */
    .grid-title.col1-title,
    .grid-title.col2-title,
    .grid-title.col3-title {
        grid-column: 1 / span 3;
        margin-top: 20px;
    }
    .grid-title.col1-title { margin-top: 0; } /* Judul pertama tidak memiliki margin atas */

    /* Semua label, titik dua, dan nilai mengalir ke kolom konten tunggal */
    .col1-label, .col1-colon, .col1-value,
    .col2-label, .col2-colon, .col2-value,
    .col3-label, .col3-colon, .col3-value {
        grid-column: auto; /* Reset ke auto untuk memungkinkan aliran otomatis */
    }
    /* Kemudian terapkan kembali untuk struktur 1-2-3 */
    .col1-label, .col2-label, .col3-label { grid-column: 1; }
    .col1-colon, .col2-colon, .col3-colon { grid-column: 2; }
    .col1-value, .col2-value, .col3-value { grid-column: 3; }
}

/* Untuk layar ponsel yang sangat kecil (misal: <= 576px) */
@media (max-width: 576px) {
    .main-content-wrapper {
        margin: 5px;
        width: calc(100% - 10px); /* Sesuaikan lebar untuk margin 5px */
    }
    .content-container {
        padding: 10px;
    }
    .sidebar-header {
        padding: 10px 15px;
        font-size: 0.9em;
    }
    .sidebar-title i {
        margin-right: 5px;
    }
    .sidebar-section-header {
        padding: 6px 10px;
    }
    .sidebar-section-title {
        font-size: 0.85em;
    }
    .sidebar-submenu li a {
        padding: 5px 10px;
        font-size: 0.8em;
    }
    .sidebar-submenu li.sidebar-sub-item a {
        padding-left: 25px;
    }
    .sidebar-submenu li.sidebar-sub-item a::before {
        left: 10px;
    }
    .sidebar-submenu li.active::before {
        height: 80%;
        top: 10%;
    }
}

/* --- Styling BARU untuk Personnel Navigation Tabs (lebih jelas) --- */
.personnel-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0; /* Penting: Hapus margin bawah agar konten menempel */
    padding-left: 0;
    list-style: none;
    background-color: #E0F2F7; /* Latar belakang biru muda untuk area tab bar */
    padding: 5px 10px 0 10px; /* Padding bawah 0 agar tab bisa menempel */
    border-radius: 8px 8px 0 0; /* Sudut membulat hanya di atas */
    box-shadow: none; /* Hapus bayangan dari nav bar untuk tampilan bersih */
    gap: 5px; /* Jarak antar tab */
    position: relative;
    z-index: 2;
    border-bottom: 1px solid #B2DCE6; /* Border bawah biru muda untuk tab bar */
}

.personnel-tab {
    padding: 8px 15px;
    text-decoration: none;
    color: #333; /* Warna teks gelap untuk tab tidak aktif */
    font-weight: 600;
    background-color: #E0F2F7; /* Latar belakang biru muda untuk tab tidak aktif */
    border: 1px solid #B2DCE6; /* Border biru muda untuk tab tidak aktif */
    border-radius: 5px 5px 0 0; /* Sudut membulat hanya di atas */
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: none; /* Hapus bayangan untuk tab tidak aktif */
    white-space: nowrap;
    position: relative;
    z-index: 1;
    margin-bottom: -1px; /* Ini penting agar tab menutupi border bawah nav bar */
}

.personnel-tab:hover {
    color: #004080; /* Biru gelap saat hover */
    background-color: #C6E6ED; /* Biru sedikit lebih gelap saat hover */
    border-color: #8CCEDC; /* Border lebih gelap saat hover */
    box-shadow: none; /* Hapus bayangan saat hover */
    transform: translateY(-1px); /* Efek sedikit terangkat tetap */
}

.personnel-tab.active {
    color: #004080; /* Warna teks biru gelap untuk tab aktif */
    background-color: #fff; /* Latar putih untuk tab aktif */
    border: 1px solid #B2DCE6; /* Border biru muda untuk sisi dan atas */
    border-bottom-color: #fff; /* Border bawah putih agar menyatu dengan konten */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none; /* Hapus bayangan untuk tab aktif */
    z-index: 3;
    transform: none;
    margin-bottom: -1px; /* Ini penting agar border bawah tab aktif menutupi border atas konten */
}

.personnel-tab.active:hover {
    background-color: #fff;
    border-color: #B2DCE6;
    border-bottom-color: #fff;
    box-shadow: none;
}

.no-personnel-found {
    padding: 10px 0;
    color: #888;
    font-style: italic;
}

/* --- Styling for Personal Profile Display (Read-Only) --- */
.personal-profile-display-container {
    padding: 20px;
    background-color: #fff;
    border-radius: 0 8px 8px 8px; /* Sudut atas kiri menjadi 0 karena tab aktif menempel */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Pertahankan bayangan konten */
    margin-top: 0; /* Hapus margin top, karena tab aktif yang akan menempel */
}

.personnel-form-container h3 {
    color: #333;
    margin-bottom: 15px;
    text-align: center;
}

.personnel-form-container p {
    color: #666;
    text-align: center;
    margin-bottom: 30px;
}

.personnel-form .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Jarak antar kolom */
    margin-bottom: 20px;
}

.personnel-form .form-group {
    flex: 1; /* Setiap form-group akan mengambil ruang yang tersedia */
    min-width: 250px; /* Lebar minimum sebelum wrap */
}

/* Specific column widths for form-row */
.personnel-form .form-row .col-md-8 {
    flex: 2; /* 2/3 width */
}
.personnel-form .form-row .col-md-4 {
    flex: 1; /* 1/3 width */
}
.personnel-form .form-row .col-md-6 {
    flex: 1; /* 1/2 width */
}


.personnel-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.personnel-form input[type="text"],
.personnel-form input[type="date"],
.personnel-form input[type="tel"],
.personnel-form input[type="email"],
.personnel-form textarea,
.personnel-form select,
.personnel-form input[type="file"] {
    width: 100%;
    padding: 8px 10px; /* Mengurangi padding */
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 0.95em; /* Mengurangi ukuran font */
    box-sizing: border-box;
}

.personnel-form input[type="file"] {
    padding: 7px 12px; /* Sedikit lebih kecil untuk file input */
}

.personnel-form input[type="text"]:focus,
.personnel-form input[type="date"]:focus,
.personnel-form input[type="tel"]:focus,
.personnel-form input[type="email"]:focus,
.personnel-form textarea:focus,
.personnel-form select:focus,
.personnel-form input[type="file"]:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.personnel-form textarea {
    resize: vertical;
}

.personnel-form .radio-group {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 5px;
}

.personnel-form .radio-group input[type="radio"] {
    width: auto;
    margin-right: 5px;
}

.personnel-form .radio-group label {
    margin-bottom: 0;
    font-weight: normal;
    color: #555;
    cursor: pointer;
}

.personnel-form .form-actions {
    text-align: right;
    margin-top: 30px;
}

.personnel-form .btn {
    padding: 6px 12px; /* Mengurangi padding */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85em; /* Mengurangi ukuran font */
    transition: background-color 0.2s ease;
    text-decoration: none; /* For anchor tags */
    display: inline-block; /* For anchor tags */
}

.personnel-form .btn-primary {
    background-color: #007bff;
    color: white;
    margin-left: 10px;
}

.personnel-form .btn-primary:hover {
    background-color: #0056b3;
}

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

.personnel-form .btn-secondary:hover {
    background-color: #5a6268;
}

/* Alert messages */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    text-align: center;
}

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

.alert-error { /* Using alert-error instead of alert-danger for consistency */
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
/* --- Styling untuk Tab Aksi Personil (Tambah, Ubah, Hapus) --- */
.personnel-action-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0; /* Penting: Hapus margin bawah agar konten menempel */
    padding-left: 0;
    list-style: none;
    background-color: #f0f2f5; /* Latar belakang untuk bar tab aksi */
    padding: 5px 10px 0 10px; /* Padding bawah 0 agar tab bisa menempel */
    border-radius: 8px 8px 0 0; /* Sudut membulat hanya di atas */
    box-shadow: none; /* Hapus bayangan dari nav bar untuk tampilan bersih */
    gap: 5px; /* Jarak antar tab */
    position: relative;
    z-index: 2;
    border-bottom: 1px solid #ced4da; /* Border bawah untuk memisahkan dari konten */
}

.personnel-action-tab {
    padding: 8px 15px;
    text-decoration: none;
    color: #555; /* Warna teks gelap untuk tab tidak aktif */
    font-weight: 600;
    background-color: #e9ecef; /* Latar belakang untuk tab tidak aktif */
    border: 1px solid #ced4da; /* Border untuk tab tidak aktif */
    border-radius: 5px 5px 0 0; /* Sudut membulat hanya di atas */
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: none; /* Hapus bayangan untuk tab tidak aktif */
    white-space: nowrap;
    position: relative;
    z-index: 1;
    margin-bottom: -1px; /* Ini penting agar tab menutupi border bawah nav bar */
}

.personnel-action-tab:hover {
    color: #007bff;
    background-color: #dbe9f8;
    border-color: #007bff;
    box-shadow: none;
    transform: translateY(-1px);
}

.personnel-action-tab.active {
    color: #007bff; /* Warna teks biru untuk tab aktif */
    background-color: #fff; /* Latar putih untuk tab aktif */
    border: 1px solid #ced4da; /* Border untuk sisi dan atas */
    border-bottom-color: #fff; /* Border bawah putih agar menyatu dengan konten */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none; /* Hapus bayangan untuk tab aktif */
    z-index: 3;
    transform: none;
    margin-bottom: -1px; /* Ini penting agar border bawah tab aktif menutupi border atas konten */
}

.personnel-action-tab.active:hover {
    background-color: #fff;
    border-color: #ced4da;
    border-bottom-color: #fff;
    box-shadow: none;
}

.personnel-action-section {
    /* Gaya dasar untuk bagian konten */
    /* Padding, background-color, border-radius, box-shadow, margin-top akan diatur oleh .personnel-form-container di dalamnya */
    /* Atau jika ingin langsung di sini, hapus dari .personnel-form-container */
}

/* Ini adalah container yang membungkus form atau search area di dalam setiap tab section */
.personnel-form-container {
    padding: 20px;
    background-color: #fff;
    border-radius: 0 8px 8px 8px; /* Sudut atas kiri menjadi 0 karena tab aktif menempel */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-top: 0; /* Hapus margin top, karena tab aktif yang akan menempel */
}

.personnel-action-section .search-personnel-area {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.personnel-action-section .search-personnel-area input[type="text"] {
    flex-grow: 1;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 1em;
}

.personnel-action-section .personnel-list-results {
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 15px;
    min-height: 100px;
    background-color: #f9f9f9;
}

.personnel-action-section .personnel-item-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.personnel-action-section .personnel-item-card:last-child {
    border-bottom: none;
}

.personnel-action-section .no-results-message {
    text-align: center;
    color: #999;
    font-style: italic;
    padding: 20px;
}

/* Gaya khusus untuk tombol di dalam bagian aksi */
.personnel-action-section .btn-sm {
    padding: 5px 10px;
    font-size: 0.8em;
}

.personnel-action-section .btn-danger {
    background-color: #dc3545;
    color: white;
}

.personnel-action-section .btn-danger:hover {
    background-color: #c82333;
}
/* --- Styling Khusus untuk Halaman Manajemen CV (curriculum_vitae_management.php) --- */

/* Styling untuk setiap bagian formulir (misal: "Ringkasan CV", "Pendidikan") - ini adalah "kontainer putih" */
.cv-form-section {
    background-color: #fff; /* Latar belakang putih */
    padding: 0; /* Hapus padding dari kontainer utama, biarkan header dan body yang mengaturnya */
    border-radius: 8px; /* Sudut membulat */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Bayangan tipis agar terlihat menonjol */
    margin-bottom: 15px; /* Spasi konsisten antar semua bagian formulir, sedikit dikurangi */
}

/* Hapus margin bawah untuk bagian formulir terakhir agar tidak ada ruang berlebih */
.cv-form-section:last-child {
    margin-bottom: 0;
}

/* Styling untuk judul setiap bagian (misal: "Ringkasan CV", "Pendidikan") */
/* Ini adalah elemen biru di bagian atas setiap kartu */
.cv-form-section .card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important; /* Mencegah judul dan tombol melipat ke baris baru */

    /* Override background dan text color */
    background-color: #ffffff !important; /* Mengubah background menjadi putih */
    color: #343a40 !important; /* Mengubah warna teks menjadi gelap agar terbaca jelas */

    /* Padding di sekitar konten header (judul dan tombol) */
    padding: 10px 15px 8px 15px !important; /* Atas 10px, Samping 15px, Bawah 8px (spasi di atas garis) */

    /* Garis pemisah horizontal */
    border-bottom: 1px solid #dee2e6 !important; /* Menambahkan border bawah standar Bootstrap untuk pemisah visual */

    /* Jarak antara header ini dan konten card-body di bawahnya */
    margin-bottom: 10px !important; /* Mengurangi margin bawah */

    /* Pastikan border-radius cocok dengan kontainer .cv-form-section */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    /* Kelas Bootstrap bg-primary dan text-white akan menangani warna latar dan teks */
}

/* Styling untuk elemen h4 di dalam card-header */
.cv-form-section .card-header h4 {
    display: block !important; /* Pastikan h4 adalah elemen blok standar */
    flex-grow: 0 !important; /* Jangan biarkan h4 mengambil ruang ekstra */
    flex-shrink: 0 !important; /* Jangan biarkan h4 menyusut */
    width: auto !important; /* Biarkan lebar ditentukan oleh kontennya */
    max-width: none !important; /* Hapus batasan lebar maksimum */

    /* Hapus semua margin, padding, dan border dari h4 itu sendiri */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    line-height: normal !important; /* Reset line-height jika ada yang mengganggu */

    /* Properti font asli dari h4 */
    font-size: 1em !important; /* Ukuran font judul sedikit dikurangi */
    color: #343a40 !important; /* Mengubah warna teks judul menjadi gelap */
}

/* Styling untuk tombol di dalam card-header */
.cv-form-section .card-header button {
    flex-grow: 0 !important; /* Jangan biarkan tombol mengambil ruang ekstra */
    flex-shrink: 0 !important; /* Jangan biarkan tombol menyusut */
    margin: 0 !important; /* Hapus semua margin dari tombol */
    /* Properti tombol lainnya seperti padding, font-size tetap berlaku */
}

/* Styling untuk card-body agar konten input memiliki padding yang tepat */
.cv-form-section .card-body {
    padding: 0 15px 15px 15px !important; /* Padding kiri, kanan, dan bawah untuk konten input, dikurangi */
    padding-top: 0 !important; /* Padding atas tidak diperlukan karena margin-bottom dari header sudah memberi spasi */
    border-bottom-left-radius: 8px; /* Cocokkan border-radius kontainer induk */
    border-bottom-right-radius: 8px; /* Cocokkan border-radius kontainer induk */
}


/* Styling untuk tombol kecil di dalam judul (misal: "Tambah Pendidikan") */
.cv-form-section h4 .btn-sm {
    font-size: 0.8em; /* Ukuran font lebih kecil */
    padding: 4px 8px; /* Padding lebih kecil */
}

/* Styling untuk grup form (label dan input) */
.form-group {
    margin-bottom: 10px; /* Jarak antar grup form, dikurangi */
}

/* Styling untuk baris form (jika menggunakan .form-row) */
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px; /* Kompensasi padding kolom */
    margin-right: -10px; /* Kompensasi padding kolom */
}

.form-row > .form-group,
.form-row > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}

/* Styling umum untuk input, textarea, select agar konsisten */
.form-control {
    width: 100%;
    padding: 8px 10px; /* Mengurangi padding */
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 0.95em; /* Mengurangi ukuran font */
    box-sizing: border-box; /* Penting agar padding dan border tidak menambah lebar */
    color: #495057; /* Warna teks default untuk input */
}

.form-control:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

textarea.form-control {
    resize: vertical; /* Izinkan textarea diubah ukurannya secara vertikal */
    min-height: 80px; /* Tinggi minimum untuk textarea */
}

/* Styling untuk tombol aksi di bagian bawah formulir */
.form-actions {
    text-align: right; /* Tombol rata kanan */
    padding-top: 15px; /* Padding di atas tombol */
    border-top: 1px solid #eee; /* Garis pembatas di atas tombol */
    margin-top: 20px; /* Jarak dari bagian formulir terakhir */
}

/* Styling umum untuk tombol (jika belum ada atau ingin menimpa) */
.btn {
    padding: 6px 12px; /* Mengurangi padding */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85em; /* Mengurangi ukuran font */
    transition: background-color 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background-color: #007bff;
    color: white;
    margin-left: 10px;
}

.btn-primary:hover {
    background-color: #0056b3;
}

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

.btn-success:hover {
    background-color: #218838;
}

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

.btn-secondary:hover {
    background-color: #5a6268;
}

/* Styling untuk tombol hapus item (ikon 'x') */
.remove-item-btn {
    position: absolute;
    top: 5px; /* Mengurangi jarak dari atas */
    right: 5px; /* Mengurangi jarak dari kanan */
    background-color: transparent !important; /* Hapus latar belakang */
    color: #dc3545 !important; /* Ubah warna ikon 'x' menjadi merah */
    border: none !important; /* Hapus border */
    border-radius: 0 !important; /* Pastikan tidak ada border-radius (tidak lingkaran) */
    width: auto !important; /* Biarkan lebar menyesuaikan konten ikon */
    height: auto !important; /* Biarkan tinggi menyesuaikan konten ikon */
    line-height: normal !important; /* Reset line-height */
    padding: 0 !important; /* Hapus padding */
    font-size: 1em !important; /* Ukuran font untuk ikon 'x', sedikit dikurangi */
    cursor: pointer;
    transition: color 0.2s ease;
    z-index: 1;
    display: inline-block !important; /* Pastikan tampil sebagai inline-block */
}

.remove-item-btn:hover {
    color: #c82333 !important; /* Warna merah yang sedikit lebih gelap saat hover */
    background-color: transparent !important; /* Pastikan tetap transparan saat hover */
}


/* Pastikan item form individual memiliki posisi relatif agar tombol hapus bisa diposisikan */
.cv-form-item {
    position: relative;
    border: 1px solid #e9ecef; /* Border tipis untuk setiap item (misal: satu entri pendidikan) */
    padding: 10px; /* Padding di dalam setiap item, dikurangi */
    margin-bottom: 8px; /* Jarak antar item, dikurangi */
    border-radius: 5px;
}

/* Styling untuk checkbox inline (misal: "Saat Ini (Present)") */
.checkbox-inline {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Mengurangi margin bawah */
}

.checkbox-inline input[type="checkbox"] {
    margin-right: 8px;
    width: auto; /* Timpa lebar 100% dari .form-control */
}

.checkbox-inline label {
    margin-bottom: 0;
    font-weight: normal;
    color: #555;
    cursor: pointer;
}

/* =====================================================================
   Tambahan Styling Khusus untuk Bagian Pendidikan (5 Kolom)
   ===================================================================== */
/* Menargetkan setiap entri pendidikan (cv-form-item) di dalam bagian Pendidikan (cv-form-section kedua) */
.cv-form-section:nth-of-type(2) .cv-form-item {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 0.3fr 0.3fr;
    gap: 15px; /* Jarak antar kolom dan baris, dikurangi */
    /* Properti lain dari .cv-form-item (padding, border, margin-bottom, dll.) akan tetap berlaku
       untuk container grid ini secara keseluruhan. */
}

/* Menyesuaikan margin untuk form-group dan checkbox-inline di dalam grid pendidikan */
.cv-form-section:nth-of-type(2) .cv-form-item .form-group,
.cv-form-section:nth-of-type(2) .cv-form-item .checkbox-inline {
    margin-bottom: 0; /* Hapus margin-bottom default agar spasi diatur oleh gap grid */
}

/* Responsif: 3 Kolom untuk Layar Lebar Menengah */
@media (max-width: 1200px) {
    .cv-form-section:nth-of-type(2) .cv-form-item {
        grid-template-columns: repeat(3, 1fr); /* Ubah menjadi 3 kolom */
    }
}

/* Responsif: 2 Kolom untuk Layar Tablet */
@media (max-width: 992px) {
    .cv-form-section:nth-of-type(2) .cv-form-item {
        grid-template-columns: repeat(2, 1fr); /* Ubah menjadi 2 kolom */
    }
}

/* Responsif: 1 Kolom untuk Layar Ponsel */
@media (max-width: 768px) {
    .cv-form-section:nth-of-type(2) .cv-form-item {
        grid-template-columns: 1fr; /* Ubah menjadi 1 kolom */
    }
}

/* --- Styling Khusus untuk Bagian Professional Works (Mirip Pendidikan) --- */

/* Menargetkan setiap entri professional work (cv-form-item) di dalam bagian Professional Works (cv-form-section ketiga) */
.cv-form-section:nth-of-type(3) .cv-form-item {
    display: grid;
    /* Mendefinisikan 5 kolom:
       - 2 kolom pertama (Jabatan, Perusahaan) mengambil 2 unit fraksi (lebih lebar).
       - 2 kolom berikutnya (Tanggal Mulai, Tanggal Selesai) mengambil 0.8 unit fraksi (lebih kecil dari teks, cukup untuk tanggal).
       - Kolom terakhir (Saat Ini) mengambil lebar minimal sesuai kontennya (`min-content`). */
    grid-template-columns: 2fr 2fr 0.3fr 0.3fr min-content;
    gap: 15px; /* Jarak antar kolom dan baris, dikurangi */
    align-items: start; /* Pastikan label sejajar di bagian atas setiap kolom */
}

/* Menyesuaikan margin untuk form-group dan form-check di dalam grid professional works */
.cv-form-section:nth-of-type(3) .cv-form-item > .form-group {
    margin-bottom: 0; /* Hapus margin-bottom default agar spasi diatur oleh gap grid */
}

.cv-form-section:nth-of-type(3) .cv-form-item > .form-check {
    margin-bottom: 0; /* Hapus margin-bottom default agar spasi diatur oleh gap grid */
    align-self: end; /* <-- TAMBAHKAN BARIS INI */
}

/* Responsif: 3 Kolom untuk Layar Lebar Menengah (Professional Works) */
@media (max-width: 1200px) {
    .cv-form-section:nth-of-type(3) .cv-form-item {
        /* Mengubah menjadi 3 kolom. Item akan secara otomatis mengalir ke baris berikutnya. */
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsif: 2 Kolom untuk Layar Tablet (Professional Works) */
@media (max-width: 992px) {
    .cv-form-section:nth-of-type(3) .cv-form-item {
        grid-template-columns: repeat(2, 1fr); /* Ubah menjadi 2 kolom */
    }
}

/* Responsif: 1 Kolom untuk Layar Ponsel (Professional Works) */
@media (max-width: 768px) {
    .cv-form-section:nth-of-type(3) .cv-form-item {
        grid-template-columns: 1fr; /* Ubah menjadi 1 kolom */
    }
}
/* --- Styling Khusus untuk Bagian Training & Certification --- */

/* Menargetkan setiap entri training (cv-form-item) di dalam bagian Training & Certification (cv-form-section keempat) */
.cv-form-section:nth-of-type(4) .cv-form-item { /* UBAH INI KEMBALI MENJADI 4 */
    display: grid;
    /* Mengatur lebar kolom: Nama Training (2fr), Penyelenggara (2fr), Tanggal Mulai (0.8fr), Tanggal Selesai (0.8fr), No Expired (min-content) */
    grid-template-columns: 2fr 2fr 0.3fr 0.3fr min-content;
    gap: 15px; /* Jarak antar kolom dan baris, dikurangi */
    align-items: start; /* Pastikan label sejajar di bagian atas setiap kolom */
}

/* Menyesuaikan margin untuk form-group dan checkbox-inline di dalam grid training */
.cv-form-section:nth-of-type(4) .cv-form-item > .form-group {
    margin-bottom: 0; /* Hapus margin-bottom default agar spasi diatur oleh gap grid */
}

/* Pastikan checkbox "No Expired" sejajar dengan bagian bawah input lain */
.cv-form-section:nth-of-type(4) .cv-form-item > .checkbox-inline,
.cv-form-section:nth-of-type(4) .cv-form-item > .form-check {
    margin-bottom: 0; /* Hapus margin-bottom default agar spasi diatur oleh gap grid */
    align-self: end; /* Sejajarkan checkbox ke bagian bawah kolom */
}
.form-control.datepicker.date-input-with-icon {
    padding-right: 35px; /* Beri padding di kanan untuk ikon */
    background-image: none; /* Pastikan tidak ada background image lain yang mengganggu */
    position: relative; /* PENTING: Ini agar pseudo-element ::after bisa diposisikan secara absolut */
}

.form-control.datepicker.date-input-with-icon::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* Untuk ikon Solid (fas). Jika ikon Anda Regular (far), gunakan font-weight: 400; */
    content: "\f073"; /* Unicode untuk ikon fa-calendar-alt (solid). Coba juga \f133 untuk fa-calendar jika ini tidak cocok */
    position: absolute;
    right: 10px; /* Sesuaikan posisi horizontal ikon */
    top: 50%;
    transform: translateY(-50%); /* Pusatkan ikon secara vertikal */
    color: #6c757d; /* Warna ikon */
    pointer-events: none; /* Penting! Agar klik pada ikon tetap mengaktifkan input */
    font-size: 0.9em; /* Ukuran ikon */
    z-index: 2; /* Pastikan ikon berada di atas input */
    display: block; /* Pastikan pseudo-element dirender sebagai block untuk positioning */
    line-height: 1; /* Untuk memastikan vertikal alignment yang baik */
}

/* Responsif: 3 Kolom untuk Layar Lebar Menengah (Training & Certification) */
@media (max-width: 1200px) {
    .cv-form-section:nth-of-type(4) .cv-form-item {
        grid-template-columns: repeat(3, 1fr); /* Ubah menjadi 3 kolom */
    }
}

/* Responsif: 2 Kolom untuk Layar Tablet (Training & Certification) */
@media (max-width: 992px) {
    .cv-form-section:nth-of-type(4) .cv-form-item {
        grid-template-columns: repeat(2, 1fr); /* Ubah menjadi 2 kolom */
    }
}

/* Responsif: 1 Kolom untuk Layar Ponsel (Training & Certification) */
@media (max-width: 768px) {
    .cv-form-section:nth-of-type(4) .cv-form-item {
        grid-template-columns: 1fr; /* Ubah menjadi 1 kolom */
    }
}
/* --- Styling Khusus untuk Bagian Experience (Detail Per Kategori) --- */

/* Menargetkan bagian Experience (Detail Per Kategori) - ini adalah cv-form-section ke-5 */
.cv-form-section:nth-of-type(5) .cv-form-item.detailed-experience-category-item {
    position: relative; /* Penting untuk positioning tombol hapus kategori */
}

.cv-form-section:nth-of-type(5) .cv-form-item.sub-item {
    position: relative; /* Penting untuk positioning tombol hapus item */
}

/* Posisi tombol hapus (X merah) agar selalu di pojok kanan atas item/kategori */
.cv-form-section:nth-of-type(5) .cv-form-item .remove-item-btn {
    position: absolute;
    top: 5px; /* Mengurangi jarak dari atas */
    right: 5px; /* Mengurangi jarak dari kanan */
    z-index: 10; /* Pastikan di atas konten lain */
    background: none;
    border: none;
    color: #dc3545; /* Warna merah Bootstrap */
    font-size: 1em; /* Ukuran ikon, dikurangi */
    cursor: pointer;
    padding: 0;
    line-height: 1;
    /* Pastikan ikon Font Awesome dimuat dan kelas ini benar */
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* Untuk ikon Solid (fas) */
}

.cv-form-section:nth-of-type(5) .cv-form-item .remove-item-btn:hover {
    color: #c82333; /* Warna merah lebih gelap saat hover */
}

/* Styling untuk area sub-items (border-start, ps-3, pt-3) */
/* Ini adalah div yang membungkus semua item di dalam satu kategori */
.cv-form-section:nth-of-type(5) #detailed-experience-items > .cv-form-item.detailed-experience-category-item > div.ms-4.border-start.ps-3.pt-3 {
    border-left: 2px solid #e9ecef !important; /* Warna border yang lebih jelas */
    margin-left: 1rem !important; /* Sesuaikan margin kiri, dikurangi */
    padding-left: 0.75rem !important; /* Sesuaikan padding kiri, dikurangi */
    padding-top: 0.75rem !important; /* Sesuaikan padding atas, dikurangi */
    padding-bottom: 0.5rem; /* Tambahkan padding bawah */
}

/* Menyesuaikan label agar sedikit lebih menonjol */
.cv-form-section:nth-of-type(5) label.form-label {
    font-weight: 600; /* Membuat label sedikit lebih tebal */
    margin-bottom: 0.25rem; /* Sedikit jarak di bawah label */
}

/* KOREKSI PENTING: Override margin-bottom default Bootstrap untuk form-group di dalam kolom */
/* Ini akan menghapus margin-bottom default dari .form-group agar tidak ada spasi vertikal berlebihan
   di antara label dan input, atau antar kolom jika mereka menumpuk. */
.cv-form-section:nth-of-type(5) .cv-form-item.sub-item .row > div[class*="col-"] > .form-group {
    margin-bottom: 0 !important; /* Gunakan !important untuk memastikan override */
}

/* Menambahkan sedikit margin di bawah setiap item sub-kategori */
.cv-form-section:nth-of-type(5) .cv-form-item.sub-item {
    margin-bottom: 0.75rem !important; /* Memberi jarak antar item pengalaman, dikurangi */
}

/* Responsif: Menambahkan jarak vertikal antar kolom ketika mereka menumpuk.
   Ini akan berlaku pada breakpoint di mana kolom-kolom tersebut mulai menumpuk.
   (Misalnya, jika Anda menggunakan col-4, mereka mungkin menumpuk di bawah 576px) */
@media (max-width: 575.98px) { /* Ini adalah breakpoint 'sm' Bootstrap (extra small) */
    .cv-form-section:nth-of-type(5) .cv-form-item.sub-item .row > div[class*="col-"] {
        margin-bottom: 0.5rem; /* Tambahkan jarak antar kolom saat menumpuk */
    }
    .cv-form-section:nth-of-type(5) .cv-form-item.sub-item .row > div[class*="col-"]:last-child {
        margin-bottom: 0; /* Hapus margin bawah pada kolom terakhir di baris */
    }
}
/* Styling untuk tombol panah (caret) agar lebih terlihat jelas */
.cv-form-section .card-header .collapse-toggle-btn {
    color: #343a40; /* Mengubah warna menjadi abu-abu gelap, sama dengan warna judul h4 */
    font-size: 0.8em; /* Meningkatkan ukuran ikon sedikit agar lebih menonjol */
    font-weight: 900; /* PENTING: Memastikan ikon Font Awesome tampil tebal (jika menggunakan ikon solid seperti 'fas') */
    /* Anda juga bisa menambahkan padding atau latar belakang samar jika diinginkan */
    /* padding: 5px; */
    /* background-color: rgba(0, 0, 0, 0.05); */
    /* border-radius: 4px; */
}

/* Efek hover untuk tombol panah (opsional, agar ada feedback visual) */
.cv-form-section .card-header .collapse-toggle-btn:hover {
    background-color: #e9ecef; /* Warna latar belakang saat kursor diarahkan */
    color: #007bff; /* Warna ikon menjadi biru saat kursor diarahkan */
}

/* --- Styling BARU untuk daftar personil di sidebar (personnel_list_sidebar.php) --- */

/* (Ini adalah div dengan kelas 'card shadow-sm mb-4 personnel-selection-card' dari file PHP Anda) */
.personnel-selection-card {
    width: 100px !important; /* Paksa lebar kartu menjadi 200px (atau sesuaikan sesuai keinginan Anda) */
    max-width: 200px !important; /* Batasi lebar maksimum juga */
    flex-shrink: 0 !important; /* Pastikan kartu tidak menyusut */
    flex-grow: 0 !important;   /* Pastikan kartu tidak tumbuh */
    /* margin-right: 15px; */ /* Opsional: Tambahkan jarak di sisi kanan kartu jika perlu */
}
.personnel-list-compact .list-group-item {
    display: flex; /* <--- PENTING: Menggunakan flexbox untuk layout horizontal */
    justify-content: space-between; /* Menyebar konten (nama di kiri, aksi di kanan) */
    align-items: center; /* Menyelaraskan item secara vertikal di tengah */
    padding: 0.4rem 0.75rem; /* Mengurangi padding vertikal dan horizontal */
    font-size: 0.8rem;    /* Mengurangi ukuran font (sekitar 12.8px) */
}

/* Styling untuk nama personil di dalam item */
.personnel-list-compact .list-group-item > span.personnel-name {
    flex-grow: 1;
    margin-right: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* TAMBAHKAN INI: Pastikan nama tidak mengambil terlalu banyak ruang */
    max-width: calc(100% - 20px); /* Ini menyisakan sekitar 40px untuk ikon dan jarak */
}

/* Styling untuk container aksi (ikon edit/pdf) */
.personnel-list-compact .list-group-item > div.personnel-actions {
    flex-shrink: 0; /* Mencegah container aksi menyusut */
    display: flex; /* Menggunakan flexbox untuk ikon-ikon di dalamnya */
    align-items: center;
    gap: 5px; /* Jarak antar ikon */
}

/* Styling untuk item personil yang sedang aktif/terpilih */
.personnel-list-compact .list-group-item.active {
    background-color: transparent !important; /* Menghilangkan background */
    color: #007bff !important;             /* Mengubah warna teks menjadi biru (warna primary Bootstrap) */
    font-weight: bold !important;          /* Membuat teks menjadi tebal */
    border-color: transparent !important;  /* Menghilangkan border jika ada */
}

/* Menyesuaikan warna ikon di samping nama jika mereka juga perlu biru saat aktif */
.personnel-list-compact .list-group-item.active .personnel-actions a {
    color: #007bff !important; /* Memastikan ikon juga biru saat item aktif */
}