/* Styles for the personnel selection sidebar (DIPINDAHKAN DARI sections/personnel_list_sidebar.php) */
.personnel-selection-sidebar {
    width: 300px; /* Lebar sidebar diperlebar */
    padding: 15px;
    background-color: #f8f9fa;
    border-right: 1px solid #dee2e6;
    float: left; /* Posisikan di kiri */
    height: calc(100vh - 120px); /* Sesuaikan tinggi agar tidak melebihi viewport */
    overflow-y: auto;
    position: sticky; /* Agar sidebar tetap di tempat saat scroll */
    top: 0; /* Sesuaikan jika ada fixed header */
}
.personnel-selection-sidebar h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #343a40;
}
.personnel-selection-sidebar .personnel-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.personnel-selection-sidebar .personnel-list li {
    margin-bottom: 5px;
}
/* Styling untuk link personil yang TIDAK aktif */
.personnel-selection-sidebar .personnel-list li a {
    display: block;
    padding: 8px 10px;
    color: #343a40; /* Warna font hitam/dark-gray untuk yang tidak aktif */
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap; /* Pastikan teks tidak pecah baris secara default */
    overflow: hidden; /* Sembunyikan jika terlalu panjang */
    text-overflow: ellipsis; /* Tambahkan elipsis jika tersembunyi */
}
.personnel-selection-sidebar .personnel-list li a:hover {
    background-color: #e2e6ea;
    color: #007bff; /* Biru saat hover */
}

/* Modifikasi untuk item daftar personil aktif */
.personnel-selection-sidebar .personnel-list li.active {
    display: flex; /* Menggunakan flexbox untuk penataan */
    justify-content: space-between; /* Mendorong ikon ke kanan */
    align-items: center; /* Pusatkan secara vertikal */
    background-color: transparent; /* Hapus latar belakang biru dari li.active */
    border-radius: 4px; /* Tetap pertahankan border-radius jika ada efek lain yang diinginkan */
}

/* Styling untuk link nama personil yang AKTIF */
.personnel-selection-sidebar .personnel-list li.active a {
    flex-grow: 1; /* Memungkinkan link nama untuk mengambil sisa ruang */
    margin-right: 10px; /* Memberi jarak antara nama dan ikon */
    background-color: transparent; /* Pastikan tidak ada background */
    color: #007bff; /* Warna teks biru untuk nama aktif */
    font-weight: bold;
    padding: 8px 0px 8px 10px; /* Padding hanya di kiri dan atas/bawah */
    white-space: nowrap; /* Pastikan teks tidak pecah baris */
    overflow: hidden; /* Sembunyikan jika terlalu panjang */
    text-overflow: ellipsis; /* Tambahkan elipsis jika tersembunyi */
}

/* Gaya untuk kontainer ikon di samping nama personil aktif */
.active-personnel-actions {
    display: flex;
    align-items: center;
    gap: 8px; /* Jarak antar ikon */
    flex-shrink: 0; /* Mencegah ikon menyusut */
    padding-right: 10px; /* Padding di kanan agar ikon tidak terlalu mepet ke border li */
}

/* Gaya untuk tombol ikon (TANPA BACKGROUND) */
.btn-sidebar-action {
    display: inline-block;
    text-decoration: none;
    line-height: 1; /* Memastikan ikon terpusat secara vertikal */
    padding: 0; /* Hapus padding */
    border-radius: 0; /* Hapus border-radius */
    width: auto; /* Biarkan lebar mengikuti konten */
    height: auto; /* Biarkan tinggi mengikuti konten */
    background-color: transparent; /* Pastikan tidak ada background */
    transition: color 0.3s ease; /* Transisi untuk perubahan warna */
}

.btn-sidebar-action i { /* Target ikon Font Awesome secara langsung */
    font-size: 1.3em; /* Ukuran ikon */
}

.btn-edit-cv i {
    color: #28a745; /* Hijau */
}

.btn-edit-cv:hover i {
    color: #218838; /* Hijau lebih gelap saat hover */
}

.btn-download-pdf i {
    color: #dc3545; /* Merah */
}

.btn-download-pdf:hover i {
    color: #c82333; /* Merah lebih gelap saat hover */
}


.personnel-selection-sidebar .no-personnel {
    color: #6c757d;
    font-style: italic;
    padding: 8px 10px;
}
/* Aturan CSS untuk konten utama agar tidak tertutup sidebar */
.cv-management-container,
.cv-container {
    margin-left: 320px; /* Sesuaikan dengan lebar sidebar baru (300px + 20px padding/gap) */
    padding: 20px;
    overflow: hidden; /* Untuk mengatasi float */
}


/* General CV Container */
.cv-container-new {
    max-width: 900px; /* Tetap untuk tampilan layar */
    margin: 20px auto;
    background: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden; /* Ensures borders/shadows are contained */
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
}

/* New Top Header Section */
.cv-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Ini yang membuat item sejajar secara vertikal */
    padding: 25px 30px;
    background-color: #f8f9fa; /* Light background */
    border-bottom: 1px solid #eee;
}

.cv-header-info {
    flex: 1; /* Memungkinkan blok info untuk tumbuh dan menyusut, mengambil ruang yang tersedia */
    padding-right: 20px;
    min-width: 0; /* Penting agar item flex dapat menyusut di bawah ukuran kontennya jika diperlukan */
}

.cv-name-header {
    font-size: 2.2em;
    font-weight: bold;
    color: #2c3e50;
    margin: 0 0 5px 0;
    text-transform: uppercase;
}

.cv-title-header {
    font-size: 1.2em;
    color: #555;
    margin: 0 0 15px 0;
}

.cv-summary-header {
    font-size: 0.95em;
    color: #666;
    margin: 0;
    text-align: justify; /* Justify text as requested */
}

.cv-header-photo-wrapper {
    flex-shrink: 0; /* Mencegah foto menyusut */
}

.cv-header-photo {
    max-width: 150px; /* Mengatur lebar maksimum foto menjadi lebih besar */
    height: auto; /* Memastikan aspek rasio tetap terjaga */
    display: block;
}

/* Main Content Area (Sidebar + Details) */
.cv-main-content-area {
    display: flex;
    flex-wrap: wrap; /* Allow columns to stack on smaller screens */
}

/* Left Column (Sidebar) */
.cv-left-column {
    width: 35%;
    background-color: rgba(52, 58, 64, 0.7); /* Abu-abu tua transparan (70% opaque) */
    padding: 30px;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    overflow: hidden; /* Penting untuk memotong pseudo-element */
    color: white; /* Default text color for the left column */
}

/* Pseudo-element untuk logo Enerco */
.cv-left-column::before {
    content: '';
    position: absolute;
    top: -100px; /* Dibuat lebih naik lagi */
    left: -100px; /* Dibuat lebih geser ke kiri lagi */
    width: 135%; /* Dibuat lebih besar untuk efek terpotong sebagian besar */
    height: 135%; /* Dibuat lebih besar untuk efek terpotong sebagian besar */
    background-image: url('/assets/images/NEW LOGO.png'); /* Path ke logo Enerco Anda */
    background-repeat: no-repeat;
    background-position: top left; /* Posisikan di kiri atas dari pseudo-element yang sudah digeser */
    background-size: 200% auto; /* Ukuran logo lebih besar */
    opacity: 0.1; /* Tingkat transparansi (0.1 = 10%) */
    z-index: 0; /* Pastikan di belakang konten */
}

/* Pastikan konten di kolom kiri berada di atas logo */
.cv-left-column > * {
    position: relative;
    z-index: 1;
}

.cv-divider {
    border-bottom: 1px solid #aaa; /* Diubah agar terlihat di background gelap */
    margin: 20px 0;
}

/* Contact Section */
.cv-contact-section {
    text-align: left;
    margin-bottom: 30px;
}
.cv-contact-section h3 {
    font-size: 1.2em;
    color: white; /* Diubah menjadi putih */
    margin-bottom: 15px;
    text-transform: uppercase;
}
.cv-contact-item { /* Digunakan untuk item kontak */
    display: flex;
    align-items: flex-start; /* Mengatur item agar rata atas */
    margin-bottom: 10px;
    color: white; /* Diubah menjadi putih */
}
.cv-contact-item i {
    margin-right: 10px;
    color: white; /* Diubah menjadi putih */
    width: 20px; /* Ensure consistent icon alignment */
    text-align: center;
    flex-shrink: 0; /* Mencegah ikon menyusut */
    padding-top: 2px; /* Sedikit penyesuaian vertikal untuk ikon */
}
.cv-contact-item span {
    font-size: 0.95em;
    color: white; /* Diubah menjadi putih */
    word-break: break-word; /* Memastikan teks panjang tidak keluar batas */
}

/* Profile Details Section (MODIFIED) */
.cv-profile-details-section {
    text-align: left;
    margin-bottom: 30px;
}
.cv-profile-details-section h3 {
    font-size: 1.2em;
    color: white;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.cv-profile-detail-item {
    display: grid;
    /* Kolom: Lebar label (fixed), Separator (auto), Value (flex) */
    grid-template-columns: 100px auto 1fr; /* 120px untuk label, 'auto' untuk ":", sisa untuk nilai */
    align-items: baseline;
    margin-bottom: 5px;
    color: white;
}
.cv-profile-detail-item .cv-detail-label {
    font-size: 0.95em;
    color: white;
    text-align: left;
}
.cv-profile-detail-item .cv-detail-separator {
    text-align: left; /* Align colon to left of its auto column */
    color: white;
    padding-right: 8px; /* Menambahkan spasi setelah titik dua */
}
.cv-profile-detail-item .cv-detail-value {
    font-size: 0.95em;
    color: white;
    word-break: break-word; /* Ensures long text wraps */
    text-align: left; /* Values should also be left-aligned */
}


/* Right Column (Main Content) - CV Display */
.cv-right-column {
    width: 65%; /* Adjust as needed */
    padding: 30px;
    box-sizing: border-box;
}
.cv-section-right {
    margin-bottom: 30px;
}
.cv-section-right h2 {
    font-size: 1.8em;
    font-weight: bold; /* Tambahkan bold */
    color: #2c3e50; /* Warna lebih gelap untuk judul bagian */
    border-bottom: 2px solid #6c757d; /* <--- PERUBAHAN DI SINI: Dari #007bff menjadi #6c757d (abu-abu tua) */
    padding-bottom: 8px; /* Sedikit lebih banyak padding */
    margin-bottom: 25px; /* Jarak bawah lebih banyak */
    text-transform: uppercase;
    letter-spacing: 1px; /* Sedikit jarak antar huruf */
}
.cv-item-right {
    margin-bottom: 20px; /* Jarak antar item */
}
.cv-item-right h3 {
    font-size: 1.2em;
    font-weight: bold; /* Tambahkan bold */
    color: #34495e; /* Warna sedikit lebih gelap dari teks biasa */
    margin: 0 0 5px 0; /* Margin bawah untuk memisahkan dari detail */
}
.cv-item-right p {
    margin: 2px 0;
    font-size: 0.95em;
    color: #555; /* Warna teks detail yang mudah dibaca */
}
.cv-item-right .item-description {
    font-size: 0.9em;
    color: #777;
    margin-top: 5px;
    line-height: 1.5; /* Sedikit lebih banyak spasi baris untuk deskripsi */
}

/* Languages Section (if uncommented) */
.cv-languages-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cv-languages-section li {
    margin-bottom: 5px;
    font-size: 0.95em;
    color: #555;
}
.cv-languages-section li span.level {
    font-style: italic;
    color: #888;
    margin-left: 5px;
}

/* Action Buttons for CV Display */
.cv-actions-bottom {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.cv-actions-bottom .btn {
    margin: 0 10px;
}

/* ========================================================================== */
/* NEW STYLES FOR CV EDITING FORMS (Perubahan Curriculum Vitae) */
/* ========================================================================== */

/* Main container for the editing form, assuming it's within a card-body or similar */
.cv-management-container { /* Menggunakan container ini sebagai root untuk form editing */
    padding: 20px; /* Tambahkan padding agar tidak terlalu mepet */
}

.cv-form-section {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
}
.cv-form-section h4 {
    margin-top: 0;
    color: #2c3e50; /* Warna lebih gelap untuk judul section */
    border-bottom: 1px solid #ccc; /* Garis bawah solid, bukan dashed */
    padding-bottom: 10px;
    margin-bottom: 15px;
    display: flex; /* Menggunakan flexbox untuk menata judul dan tombol */
    justify-content: space-between; /* Mendorong tombol ke kanan */
    align-items: center; /* Pusatkan secara vertikal */
}
.cv-form-section h4 .btn { /* Gaya untuk tombol "Tambah X" */
    font-size: 0.8em; /* Ukuran font lebih kecil */
    padding: 5px 10px; /* Padding lebih kecil */
}
.cv-form-item {
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #fff;
    border-radius: 5px;
    position: relative;
}
.cv-form-item .remove-item-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10; /* Pastikan di atas elemen lain */
}
.cv-form-item .remove-item-btn:hover {
    background: #c82333;
}
.form-group.checkbox-inline {
    display: flex;
    align-items: center;
    margin-top: 10px;
}
.form-group.checkbox-inline input {
    margin-right: 5px;
}

/* Styling for the action buttons at the bottom of the form */
.form-actions {
    margin-top: 30px;
    text-align: right; /* Tombol simpan/batal di kanan */
}
.form-actions .btn {
    margin-left: 10px;
}

/* Bootstrap-like form styles (pastikan sudah ada atau tambahkan jika belum) */
.form-group {
    margin-bottom: 15px;
}
label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 5px;
    display: block;
}
.form-control {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
textarea.form-control {
    min-height: 100px;
    resize: vertical;
}
.form-row { /* Untuk menata form-group dalam satu baris */
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.form-row > .col-md-6, .form-row > .col-12 {
    padding-right: 5px;
    padding-left: 5px;
}
.col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
}
/* ... (lanjutkan dengan gaya untuk custom-file, form-check, btn, alert jika belum ada) ... */

/* Responsive adjustments for editing form */
@media (max-width: 768px) {
    .cv-form-section h4 {
        flex-direction: column; /* Judul dan tombol tumpuk di layar kecil */
        align-items: flex-start;
    }
    .cv-form-section h4 .btn {
        margin-top: 10px;
        align-self: flex-end; /* Tombol tetap di kanan bawah judul */
    }
    .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .cv-header-top {
        flex-direction: column;
        text-align: center;
    }
    .cv-header-info {
        padding-right: 0;
        max-width: 100%;
        margin-bottom: 20px;
    }
    .cv-header-photo-wrapper {
        margin-top: 10px;
    }
    .cv-main-content-area {
        flex-direction: column;
    }
    .cv-left-column, .cv-right-column {
        width: 100%;
    }
    .cv-left-column {
        padding-bottom: 0; /* No extra padding at bottom when stacked */
    }
    /* Sesuaikan lebar sidebar dan margin konten utama untuk layar kecil */
    .personnel-selection-sidebar {
        width: 100%;
        float: none;
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }
    .cv-management-container,
    .cv-container {
        margin-left: 0;
    }
    .form-actions {
        text-align: center; /* Tombol di tengah untuk layar kecil */
    }
}

@media print {
    /* 1. Global Page Settings */
    @page {
        size: A4;
        margin: 10mm 15mm;
    }

    /* 2. Atur html dan body untuk cetak */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        background-color: white !important;
        -webkit-print-color-adjust: exact !important; /* Penting untuk mencetak warna latar belakang */
        print-color-adjust: exact !important;
        font-size: 10pt !important;
        line-height: 1.2 !important;
        height: auto !important;
        overflow: visible !important;
        position: static !important; /* Pastikan body tidak absolute */
    }

    /* 3. Sembunyikan elemen-elemen UI aplikasi yang tidak relevan untuk dicetak */
    /* Berdasarkan struktur data_umum.php dan header.php */
    .main-header, /* Header utama dari includes/header.php */
    .sidebar-container, /* Sidebar kiri utama aplikasi */
    .content-header, /* Header di atas konten utama (judul halaman, breadcrumb) */
    .cv-actions-bottom, /* Tombol "Ubah CV" dan "Download PDF" */
    .personnel-selection-sidebar, /* Sidebar "Pilih Personil" */
    .main-footer, /* Footer utama */
    .sidebar-actions, /* Sembunyikan aksi sidebar saat mencetak */
    /* Sembunyikan juga elemen-elemen form pengeditan saat mencetak */
    .card-body .cv-edit-section,
    .form-actions
    {
        display: none !important;
        visibility: hidden !important;
    }

    /* 4. Sesuaikan layout utama agar konten CV mengambil seluruh lebar */
    /* Pastikan main-content-wrapper, content-container, dan content-body mengambil lebar penuh */
    .main-content-wrapper,
    .content-container,
    .content-body
    {
        display: block !important; /* Pastikan ini block */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: none !important; /* Batalkan properti flex jika ada */
    }

    /* 5. Pastikan cv-container-new dan isinya terlihat dan terformat dengan baik */
    .cv-container-new {
        display: block !important;
        visibility: visible !important;
        position: static !important; /* KEMBALIKAN KE STATIC: Biarkan dalam aliran normal dokumen */
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important; /* Hapus padding eksternal jika ada */
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important; /* Izinkan konten mengalir antar halaman */
        background-color: white !important; /* Pastikan background CV container putih */
        min-height: auto !important; /* Biarkan tinggi menyesuaikan konten */
    }

    /* Pastikan semua elemen di dalam CV terlihat dan mengembalikan display defaultnya */
    .cv-container-new *,
    .cv-container-new *::before,
    .cv-container-new *::after {
        visibility: visible !important;
        display: revert !important; /* Gunakan 'revert' untuk mengembalikan ke nilai default browser */
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: auto !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* Terapkan kembali properti display spesifik untuk elemen layout di dalam CV */
    /* Ini akan meng-override 'display: revert' dari aturan di atas, jika diperlukan */
    .cv-header-top,
    .cv-main-content-area {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    .cv-contact-item {
        display: flex !important;
    }

    .cv-profile-detail-item {
        display: grid !important;
        grid-template-columns: 100px auto 1fr !important;
    }

    /* Styling spesifik untuk kolom kiri dan kanan CV */
    .cv-left-column {
        width: 35% !important;
        background-color: rgba(52, 58, 64, 0.7) !important;
        color: white !important;
        padding: 10px !important; /* Kurangi padding untuk efisiensi ruang */
        overflow: hidden !important; /* SANGAT PENTING: Untuk memotong logo yang meluber */
        position: relative !important; /* SANGAT PENTING: Agar overflow bekerja dengan pseudo-element absolute */
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .cv-right-column {
        width: 65% !important;
        background-color: white !important;
        padding: 10px !important; /* Kurangi padding untuk efisiensi ruang */
    }

    /* Pastikan pseudo-element logo juga tercetak */
    .cv-left-column::before {
        content: '' !important;
        position: absolute !important;
        top: -100px !important;
        left: -100px !important;
        width: 135% !important;
        height: 135% !important;
        background-image: url('/assets/images/NEW LOGO.png') !important;
        background-repeat: no-repeat !important;
        background-position: top left !important;
        background-size: 200% auto !important;
        opacity: 0.03 !important; /* KEMBALIKAN KE SANGAT RENDAH agar tidak menonjol */
        z-index: 0 !important;
        display: block !important;
        visibility: visible !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    /* Pastikan konten di kolom kiri berada di atas logo */
    .cv-left-column > * {
        position: relative !important;
        z-index: 1 !important;
        color: white !important;
    }

    .cv-divider {
        border-bottom-color: #aaa !important;
    }

    /* Penyesuaian padding dan margin untuk cetak */
    .cv-header-top {
        padding: 15px 20px !important; /* Kurangi padding header */
    }

    /* Aturan pemisah halaman untuk menjaga bagian tetap bersama */
    .cv-section-right,
    .cv-item-right,
    .cv-profile-details-section,
    .cv-contact-section {
        page-break-inside: avoid !important;
    }
    .cv-header-top {
        page-break-after: avoid !important;
    }

    /* Reset margin untuk elemen teks untuk menghindari spasi besar */
    h1, h2, h3, p, ul, ol, li {
        margin-top: 0 !important;
        margin-bottom: 0.5em !important;
    }
}