/* Variabel Warna & Font */
:root {
    --primary-color: #005A9C;
    --secondary-color: #007BFF;
    --background-color: #f8f9fa; /* Sedikit lebih abu-abu untuk kontras */
    --card-background: #FFFFFF;
    --text-primary: #1a202c; /* Sedikit lebih lembut dari hitam pekat */
    --text-secondary: #555555;
    --border-color: #e2e8f0; /* Border yang lebih halus */
    --success-color: #28a745;
    --danger-color: #dc3545;
    --primary-gradient: linear-gradient(to right, #0062a8, #005291);
}

body {
    margin: 0;
    padding: 2 px;
    box-sizing: border-box;
    font-family: 'Inter', "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--background-color);
    color: var(--text-primary);
}

/* ================================= */
/* AREA KONTROL             */
/* ================================= */
.controls {
    display: flex;
    flex-direction: column; /* Membuat baris bertumpuk ke bawah */
    padding: 0; /* Padding akan diatur per baris */
    margin-bottom: 10px;
    background-color: var(--card-background);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    /* Tetap sticky di atas */
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Gaya baru untuk setiap baris di dalam header */
.controls-row {
    display: grid;
    /* Membuat 3 kolom: kiri (fleksibel), tengah (otomatis), kanan (fleksibel) */
    grid-template-columns: 1fr auto 1fr; 
    align-items: center;
    padding: 8px 20px;
    gap: 15px;
}

/* Aturan untuk grup tengah (berlaku untuk baris 1 dan 2) */
#controls-row-1 > .controls-group:nth-child(2),
#controls-row-2 > .controls-group:nth-child(2) {
    justify-self: center; /* Selalu posisikan grup ke-2 di tengah */
}

/* Aturan untuk grup kanan (berlaku untuk baris 1 dan 2) */
#controls-row-1 > .controls-group:nth-child(3),
#controls-row-2 > .controls-group:nth-child(3) {
    justify-self: end; /* Selalu posisikan grup ke-3 di kanan */
}
/* Beri garis pemisah antar baris */
#controls-row-1 {
    border-bottom: 1px solid var(--border-color);
}

/* Gaya baru untuk mengelompokkan elemen */
.controls-group {
    display: flex;
    align-items: center;
    gap: 15px; /* Jarak antar elemen dalam satu grup */
}

/* Gaya untuk judul aplikasi yang baru ditambahkan */
.app-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
}

/* Label kontrol agar seragam */
.control-label {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-secondary);
}

.controls-main, .controls-chart {
    display: flex;
    align-items: center;
    gap: 15px; /* Jarak antar elemen kontrol */
}

.control-separator {
    width: 1px;
    height: 25px;
    background-color: var(--border-color);
    margin: 0 5px;
}

/* Logika untuk menyembunyikan kontrol peta */
.controls-chart {
    display: none; /* Sembunyi secara default */
    transition: opacity 0.3s ease;
}
.controls-chart.active {
    display: flex; /* Tampilkan jika memiliki kelas active */
}

.btn-history {
    padding: 0 20px; /* Sesuaikan padding horizontal */
    font-size: 15px; /* Samakan font size */
    font-weight: 500;
    cursor: pointer;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--card-background); /* Beri background */
    transition: all 0.2s ease;
}
.btn-history:hover {
    background-color: #f1f5f9;
    border-color: var(--primary-color);
}
.controls .source-btn,
.controls .view-btn,
.controls .filter-container select,
.controls .search-box input,
.controls .btn-icon-control,
.controls .btn-history,
.controls .btn-logout{
    height: 36px; /* Atur tinggi standar */
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex; /* Gunakan flex untuk perataan vertikal */
    align-items: center;
    font-size: 14px;
}

.controls-left, .controls-right {
    display: flex;
    align-items: center;
    gap: 20px; /* Jarak antar elemen dalam satu grup */
}

.btn-add-new {
    /* Posisi dan Ukuran */
    position: fixed;
    z-index: 1050; /* Di atas elemen lain tapi di bawah modal (jika modal z-index > 1050) */
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    
    /* Tampilan & Desain */
    background-image: var(--primary-gradient);
    color: white;
    border: none;
    border-radius: 50%; /* Membuatnya bulat */
    box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.2);
    
    /* Konten di dalam (ikon '+') */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 300; /* Membuat ikon '+' lebih tipis */
    line-height: 1;
    padding: 0;
    padding-bottom: 4px; /* Penyesuaian vertikal kecil */
    
    /* Interaksi */
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.btn-add-new:hover {
    transform: scale(1.05); /* Sedikit membesar saat di-hover */
    box-shadow: 0 12px 17px 2px rgba(0,0,0,0.14), 0 5px 22px 4px rgba(0,0,0,0.12), 0 7px 8px -4px rgba(0,0,0,0.2);
}

/* Tombol View (Bagan/Daftar Pohon) */
.view-toggle {
    display: flex;
    background-color: var(--card-background);
    border-radius: 8px;
    padding: 4px;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
.view-btn {
    padding: 8px 18px; /* Sedikit penyesuaian padding */
    font-size: 15px;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    color: var(--text-secondary);
    background-color: transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.view-btn.active {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 2px 4px rgba(0, 90, 156, 0.2);
}
.view-btn:not(.active):hover {
    background-color: #f1f5f9; /* Warna hover yang sangat halus */
}

/* Desain Pencarian (MODIFIKASI UNTUK FLOAT) */
.search-box {
    position: relative;
}
.search-box input {
    padding: 10px 15px 10px 35px; /* Padding disesuaikan */
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: 25px; /* Dibuat lebih membulat */
    box-sizing: border-box;
    width: 300px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.search-box input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(0, 90, 156, 0.2), 0 4px 8px rgba(0,0,0,0.15); /* Efek shadow lebih jelas saat fokus */
}
.search-box::before {
    content: '🔍';
    position: absolute;
    left: 12px; /* Disesuaikan dengan padding baru */
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
    font-size: 16px;
    z-index: 1; /* Memastikan ikon di atas input background */
}

/* Tombol Dropdown Download */
.dropdown {
    position: relative;
    display: inline-block;
}
.btn-download-icon {
    width: 42px;
    height: 42px;
    font-size: 24px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    background-color: #f1f5f9;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-download-icon:hover {
    background-color: #e2e8f0;
    color: var(--text-primary);
}
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    left: auto;
    background-color: var(--card-background);
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    z-index: 10;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.dropdown-content a {
    color: var(--text-primary);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
}
.dropdown-content a:hover {
    background-color: #f7faff;
    color: var(--primary-color);
}
.dropdown:hover .dropdown-content {
    display: block;
}

/* ================================= */
/* CHART & NODE            */
/* ================================= */
.chart-container {
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: 100%;
    /* overflow-x tidak lagi diperlukan karena bisa di-pan */
    display: flex;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box; /* Memastikan padding tidak menambah lebar */
}
.node-container {
    display: flex; /* Menggunakan flexbox untuk layout foto di samping */
    flex-direction: row; /* Atur item berdampingan (foto dan info) */
    align-items: center; /* Konten di tengah secara vertikal */
    border-radius: 8px;
    padding: 15px;
    background: var(--card-background);
    height: 100%;
    box-sizing: border-box;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-top: 4px solid var(--primary-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.node-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.node-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
    margin-right: 15px; /* Memberi jarak antara foto dan info */
}
.node-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center; /* <<< Ganti atau tambahkan baris ini */
}
.node-stats {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 8px;
    padding-top: 5px;
    border-top: 1px solid var(--border-color);
}
.stat { text-align: center; flex-grow: 1; }
.stat-label {
    display: block;
    font-size: 10px;
    font-weight: bold;
    color: #666;
}
.stat-value {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}
.stat-value.positive { color: var(--success-color); }
.stat-value.negative { color: var(--danger-color); }
.stat-value.neutral { color: var(--text-secondary); }

/* Status Node */
.node-container.status-kurang { border-top-color: var(--danger-color); }
.node-container.status-cukup { border-top-color: var(--success-color); }
.node-container.status-lebih { border-top-color: #f0ad4e; }
.node-container.is-group-node {
    border-style: dashed;
    border-color: #909090;
    background-color: #f8f9fa;
}
.node-container.is-group-node {
    border-top-style: solid !important;
}


/* ================================= */
/* PANEL RANGKUMAN           */
/* ================================= */
.summary-container {
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    margin-bottom: 15px; /* <--- NILAI SUDAH DIKURANGI */
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}
.summary-container:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

#floating-summary-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1020; 
    width: auto;
    min-width: 320px;
    max-width: 550px;
    margin-bottom: 0;
}
.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    background-image: linear-gradient(180deg, #FFFFFF, #fdfdff);
    border-bottom: 1px solid transparent;
    padding: 10px 18px;
    transition: border-color 0.3s;
}
.collapsible-header:hover {
    background-color: #f7faff;
}
.collapsible.active .collapsible-header {
    border-bottom-color: var(--border-color);
}
.collapsible-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.collapsible-arrow {
    font-size: 16px;
    color: var(--primary-color);
    font-weight: bold;
    transition: transform 0.3s ease;
}
.collapsible.active .collapsible-arrow {
    transform: rotate(90deg);
}
.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    padding: 0 25px;
}
.collapsible.active .collapsible-content {
    max-height: 60vh;
    overflow-y: auto;
    padding: 20px 25px;
}
.summary-sub-header {
    margin-top: 25px;
    margin-bottom: 10px;
    font-size: 16px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
    font-weight: 600;
}
/* Tabel Rangkuman */
.summary-table, .kebutuhan-summary-table, .tree-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: auto;
}
.summary-table th, .summary-table td,
.kebutuhan-summary-table th, .kebutuhan-summary-table td,
.tree-table th, .tree-table td {
    border: 1px solid var(--border-color);
    padding: 8px 10px;
    text-align: left;
    vertical-align: middle;
    
}

.kebutuhan-summary-table th:not(:first-child):not(:nth-child(2)),
.kebutuhan-summary-table td:not(:first-child):not(:nth-child(2)) {
    text-align: center;
}
.kebutuhan-summary-table .biro-header-row td {
    font-weight: bold;
    background-color: #f1f5f9;
}
.kebutuhan-summary-table td:nth-child(2) {
    padding-left: 25px;
}
.kebutuhan-summary-table tfoot tr {
    background-color: #e9ecef;
    font-weight: bold;
    border-top: 2px solid #ced4da;
}
.summary-table th, .kebutuhan-summary-table th, .tree-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    white-space: nowrap;
}
.summary-table tbody tr:nth-child(even), .tree-table tbody tr:nth-child(even) {
    background-color: #fdfdff;
}
.summary-table tbody tr:hover, .kebutuhan-summary-table tbody tr:hover, .tree-table tbody tr:hover {
    background-color: #f7faff;
}
.summary-table tfoot .total-row, .kebutuhan-summary-table tfoot tr, .tree-table tfoot tr {
    background-color: #f1f3f5;
    font-weight: bold;
}
.summary-table td:not(:first-child), .summary-table th:not(:first-child) {
    text-align: center;
}
.kebutuhan-summary-table { max-width: 400px; border: none; }
.kebutuhan-summary-table td { border: none; border-bottom: 1px solid var(--border-color); }
.kebutuhan-summary-table td:first-child { font-weight: 400; }
.kebutuhan-summary-table td:last-child { text-align: right; font-weight: bold; font-size: 12px; }


/* ================================= */
/* MODAL & FORM            */
/* ================================= */
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0; top: 0; width: 100%; height: 100%;
    overflow: auto;
    background-color: rgba(30, 41, 59, 0.5); /* Warna latar lebih modern */
    backdrop-filter: blur(4px); /* Efek blur */
}
.modal-content {
    background-color: var(--card-background);
    margin: 10% auto;
    padding: 0;
    border: none;
    width: 90%;
    max-width: 550px;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    animation: fadeIn 0.3s;
    /* Tambahkan ini untuk memastikan footer tidak keluar dari container */
    display: flex;
    flex-direction: column;
}
@keyframes fadeIn { from {transform: translateY(-20px) scale(0.98); opacity: 0} to {transform: translateY(0) scale(1); opacity: 1} }

.modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h2 { margin: 0; font-size: 18px; font-weight: 600; }
.close-button {
    color: var(--text-secondary);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}
.close-button:hover, .close-button:focus { color: var(--text-primary); }
.modal-body {
    padding: 24px;
    /* Memastikan body bisa memanjang jika konten banyak */
    flex-grow: 1;
}
.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background-color: #f8f9fa;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    
    /* Pengaturan untuk posisi tombol */
    display: flex;
    justify-content: flex-end; /* Mengelompokkan tombol ke kanan */
    align-items: center;
    gap: 10px; /* Memberi jarak antar tombol */
}
.modal-footer button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}
.detail-item { margin-bottom: 12px; font-size: 16px; }
.detail-item strong {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 14px; }
.form-group input, .form-group select {
    width: 100%;
    padding: 10px 12px;
    box-sizing: border-box;
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus, .form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 90, 156, 0.1);
}
.form-group input:read-only { background-color: #e9ecef; }
.btn-save { background-color: var(--primary-color); color: white; }
.btn-save:hover { background-color: #004a80; }
.btn-cancel { background-color: #6c757d; color: white; margin-right: 10px; }
.btn-cancel:hover { background-color: #5a6268; }
.btn-primary-edit { background-color: var(--success-color); color:white; }
.btn-delete { background-color: var(--danger-color); color: white; }
/* GAYA BARU UNTUK TOMBOL KINERJA */
.btn-kinerja {
    background-color: var(--secondary-color); /* Warna biru, bisa diganti */
    color: white;
    /* Memberi jarak dengan tombol edit */
}
.btn-kinerja:hover {
    background-color: #0056b3;
}
.edit-photo-container { text-align: center; margin-bottom: 20px; }
.edit-photo-preview { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid var(--card-background); display: block; margin: 0 auto 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.btn-upload { display: inline-block; padding: 8px 12px; cursor: pointer; background-color: #6c757d; color: white; border-radius: 5px; font-size: 12px; }

/* ================================= */
/* NOTIFIKASI TOAST         */
/* ================================= */
#notification-toast {
    visibility: hidden;
    min-width: 250px;
    max-width: 400px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 16px;
    position: fixed;
    z-index: 2000;
    left: 50%; /* <-- GANTI DARI 'right' menjadi 'left: 50%' */
    top: 0px;
    font-size: 16px;
    font-weight: 500;
    opacity: 0;
    transform: translateX(-50%); /* <-- TAMBAHKAN INI untuk membuatnya pas di tengah */
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
#notification-toast.show { visibility: visible; opacity: 1; top: 30px; }
#notification-toast.success { background-color: var(--success-color); }
#notification-toast.error { background-color: var(--danger-color); }

/* ================================= */
/* TAMPILAN TREE VIEW        */
/* ================================= */
.view-wrapper { display: none; }
.view-wrapper.active { display: block; }

.tree-container {
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    font-size: 16px;
}
.tree-container ul {
    list-style-type: none;
    padding-left: 25px;
    margin: 0;
    border-left: 2px solid var(--border-color);
}
.tree-container li {
    position: relative;
    padding: 8px 0;
}
.tree-container li::before {
    content: '';
    position: absolute;
    top: 22px;
    left: -25px;
    width: 23px;
    height: 2px;
    background-color: var(--border-color);
}
.tree-node {
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border: 1px solid transparent;
}
.tree-node:hover {
    background-color: #f7faff;
    border-color: var(--secondary-color);
}
.tree-node-position {
    font-weight: 600;
    color: var(--primary-color);
    flex-basis: 100%;
}
.tree-node-name {
    font-size: 14px;
    color: var(--text-secondary);
    margin-left: 15px;
}
.tree-node-stats {
    margin-left: auto;
    display: flex;
    gap: 15px;
    font-size: 13px;
}
.tree-node-stats .stat strong { font-weight: 600; }
.tree-node-stats .positive { color: var(--success-color); }
.tree-node-stats .negative { color: var(--danger-color); }

/* Gaya untuk tombol riwayat */
.btn-history {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    background-color: transparent;
    transition: all 0.2s ease;
}
.btn-history:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Anda bisa menambahkan ini di dekat gaya .btn-history */
.btn-icon-control {
    width: 42px;  /* Samakan dengan tombol download & search bar */
    height: 42px;
    font-size: 24px; /* Perbesar ukuran simbol */
    font-weight: bold;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    background-color: #f1f5f9;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s;
    
    /* Trik untuk membuat simbol pas di tengah */
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon-control:hover {
    background-color: #e2e8f0;
    color: var(--text-primary);
}

/* Ukuran modal yang lebih besar untuk riwayat */
.modal-content.modal-lg {
    max-width: 1100px;
}

/* Gaya untuk daftar riwayat */
#history-list-container {
    max-height: 60vh;
    overflow-y: auto;
}
.history-item {
    border-bottom: 1px solid var(--border-color);
    padding: 15px 5px;
}
.history-item:last-child {
    border-bottom: none;
}
.history-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.history-action {
    font-weight: bold;
    font-size: 16px;
}
.history-action.CREATE { color: var(--success-color); }
.history-action.UPDATE { color: #f0ad4e; }
.history-action.DELETE { color: var(--danger-color); }

.history-time {
    font-size: 12px;
    color: var(--text-secondary);
}
.history-details p {
    margin: 5px 0;
    font-size: 14px;
    padding-left: 10px;
}
.history-details strong {
    color: var(--text-primary);
}

.chart-buttons {
    display: none !important;
}


.filter-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-container label {
    /* font-weight: 500;
    font-size: 15px;
    color: var(--text-secondary); */
    margin-bottom: 0;
    white-space: nowrap;
}

.filter-container select {
    padding: 9px 15px;
    font-size: 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    height: 42px; /* Samakan dengan tinggi search bar */
    background-color: var(--card-background);
    min-width: 250px;
    cursor: pointer;
}

.filter-container select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 90, 156, 0.1);
}

/* Level 1: SEKRETARIS JENDRAL (Biru Muda) */
.node-container.level-1 {
    background-color: #e0f2fe; /* light-blue-100 */
    border-top-color: #3b82f6; /* blue-500 */
}

/* Level 2: DEPUTI (Hijau Muda) */
.node-container.level-2 {
    background-color: #d1fae5; /* green-100 */
    border-top-color: #10b981; /* green-500 */
}

/* Level 3: KEPALA BIRO & PUSAT (Kuning Muda) */
.node-container.level-3 {
    background-color: #fef9c3; /* yellow-100 */
    border-top-color: #f59e0b; /* yellow-500 */
}

/* Level 4: KEPALA BAGIAN (Oranye Muda) */
.node-container.level-4 {
    background-color: #ffedd5; /* orange-100 */
    border-top-color: #f97316; /* orange-500 */
}

/* Level 5: KEPALA SUBBAGIAN (Merah Muda) */
.node-container.level-5 {
    background-color: #fff7ed; /* orange-100 */
    border-top-color: #ffb077; /* orange-500 */
}

.node-container.level-6 {
    background-color: #fff7ed; /* orange-100 */
    border-top-color: #ffb077; /* orange-500 */
}

/* GAYA UNTUK DAFTAR ANGGOTA DI MODAL */
.members-list-scrollable {
    max-height: 250px; /* Batas tinggi, akan scroll jika lebih */
    overflow-y: auto;
    padding-right: 10px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 10px;
}

.member-card {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #f5f5f5;
}
.member-card:last-child {
    border-bottom: none;
}

.member-photo {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
}

.member-details {
    display: flex;
    flex-direction: column;
}

.member-name {
    font-weight: 600;
    color: var(--text-primary);
}

.member-pn {
    font-size: 12px;
    color: var(--text-secondary);
}

/* GAYA UNTUK KELOLA ANGGOTA DI MODAL EDIT */
.edit-member-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 1px solid #f5f5f5;
}

.edit-member-item:last-child {
    border-bottom: none;
}

.edit-member-name {
    color: var(--text-primary);
}

.delete-member-btn {
    background: none;
    border: none;
    color: var(--danger-color);
    cursor: pointer;
    font-size: 18px;
    padding: 5px;
}
.delete-member-btn:hover {
    opacity: 0.7;
}

.btn-add-member {
    background-color: var(--success-color);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.btn-add-member:hover {
    background-color: #218838;
}

.member-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.edit-member-btn {
    background: none;
    border: none;
    color: var(--secondary-color); /* Warna biru */
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
}
.edit-member-btn:hover {
    opacity: 0.7;
}

/* ================================= */
/* GAYA UNTUK TAB DI DALAM MODAL     */
/* ================================= */
.tab {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    background-color: #f1f1f1;
    border-radius: 8px 8px 0 0;
}

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 20px;
    transition: background-color 0.3s;
    font-size: 17px;
    font-weight: 600;
}

.tab button:hover {
    background-color: #ddd;
}

.tab button.active {
    background-color: var(--primary-color);
    color: white;
}

.tabcontent {
    display: none;
    padding: 20px 12px;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 8px 8px;
    animation: fadeIn 0.5s;
}

/* Menggunakan kembali animasi fadeIn yang sudah ada */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Gaya dasar untuk semua node trigger */
.node-container.is-trigger-node {
    justify-content: center; /* Pusatkan kontennya karena tidak ada foto */
}
.node-container.is-trigger-node:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}
.node-container.is-trigger-node .node-info {
    text-align: center;
}
.node-container.is-trigger-node .node-info div {
    text-shadow: none;
}

/* Gaya spesifik untuk trigger PNS */
.node-container.trigger-pns {
    background-color: #ffffff; /* orange-100 */
    border-top-color: #fde0cd; /* orange-500 */
}
.node-container.trigger-pns .node-info,
.node-container.trigger-pns .stat-label,
.node-container.trigger-pns .stat-value {
    color: #333;
}
/* Penyesuaian warna +/- agar tetap terlihat di background gelap */
.node-container.trigger-pns .stat-value.positive { color: #a7f3d0; }
.node-container.trigger-pns .stat-value.negative { color: #ff0404; }
.node-container.trigger-pns .stat-value.neutral { color: #000000; }

/* Gaya spesifik untuk trigger PPPK */
.node-container.trigger-pppk {
    background-color: #ffffff; /* orange-100 */
    border-top-color: #fbfdbf; /* orange-500 */
}
.node-container.trigger-pppk .node-info,
.node-container.trigger-pppk .stat-label,
.node-container.trigger-pppk .stat-value {
    color: #333;
}

/* Penyesuaian warna +/- agar tetap terlihat di background gelap */
.node-container.trigger-pppk .stat-value.positive { color: #a7f3d0; }
.node-container.trigger-pppk .stat-value.negative { color: #ff0404; }
.node-container.trigger-pppk .stat-value.neutral { color: #000000; }


.node-container.trigger-ppnpn {
    background-color: #ffffff; /* Warna dasar */
    border-top-color: #e9d5ff; /* Warna ungu muda untuk border atas */
}
.node-container.trigger-ppnpn .node-info,
.node-container.trigger-ppnpn .stat-label,
.node-container.trigger-ppnpn .stat-value {
    color: #333;
}
.node-container.trigger-ppnpn .stat-value.positive { color: #a7f3d0; }
.node-container.trigger-ppnpn .stat-value.negative { color: #ff0404; }
.node-container.trigger-ppnpn .stat-value.neutral { color: #000000; }

/* ========================================================== */
/* ==   Style untuk Modal Hasil Pencarian (Biasa & Lanjutan) == */
/* ========================================================== */

/* Gantikan style lama untuk #search-results-container */
#search-results-container {
    display: none !important; /* Sembunyikan dropdown lama */
}

#searchResultsModal .modal-content {
    max-width: 650px;
}

#searchResultsModal .modal-body {
    padding: 0;
    max-height: 70vh;
    overflow-y: auto;
}

.search-results-header {
    padding: 15px 25px;
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.search-results-header p {
    margin: 0;
    font-weight: 500;
    color: #4a5568;
}

.search-results-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.search-results-list li {
    padding: 15px 25px;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-results-list li:last-child {
    border-bottom: none;
}

.search-results-list li:hover {
    background-color: #f7fafc;
}

.result-item-display {
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 4px;
    font-size: 16px;
}

.result-item-context {
    font-size: 14px;
    color: #64748b;
}

.result-item-context .result-source {
    font-weight: 500;
    color: #005a9e;
}



.pegawai-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
}

.btn-talent {
    padding: 2px 8px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid var(--secondary-color);
    background-color: transparent;
    color: var(--secondary-color);
    border-radius: 4px;
    margin-left: 10px;
    line-height: 1.2;
    transition: all 0.2s ease;
}

.btn-talent:hover {
    background-color: var(--secondary-color);
    color: white;
}

#subbagianDetailModal .summary-table {
    font-size: 15px;
}

/* Gaya untuk tata letak baru di modal detail */
.detail-body-flex {
    display: flex;
    align-items: center; /* Membuat foto dan teks sejajar di tengah secara vertikal */
    gap: 25px; /* Jarak antara foto dan teks */
}

.detail-photo-container {
   flex-shrink: 0;
   width: 120px; /* Tetapkan lebar tetap */
   height: 120px; /* Tetapkan tinggi tetap */
   display: flex;
   justify-content: center; /* Tengah horizontal */
   align-items: center; /* Tengah vertikal */
}

#detail-photo {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   object-fit: cover;
   border: 3px solid var(--border-color);
}

.detail-text-container {
    flex-grow: 1; /* Biarkan container teks mengisi sisa ruang */
}

#detail-photo::before {
   content: '';
   display: block;
   width: 80px;
   height: 80px;
   background-color: #f0f0f0; /* Warna latar belakang ikon default */
   border-radius: 50%;
   mask: url('img/default.png') center/contain no-repeat; /* Terapkan ikon default sebagai mask */
   -webkit-mask: url('img/default.png') center/contain no-repeat;
}

#detail-photo:empty::before {
   content: '';
   /* Gunakan properti yang sama seperti di atas untuk menampilkan ikon default */
}

#detail-photo:not([src='img/default.png']) {
   mask: none;
   -webkit-mask: none;
   background-color: transparent; /* Hilangkan latar belakang jika ada foto */
}

.pegawai-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
}

.pegawai-item div { /* Pembungkus untuk tombol P dan T */
    display: flex;
    gap: 5px;
}

.btn-profile {
    padding: 2px 8px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid #6c757d; /* Warna abu-abu netral */
    background-color: transparent;
    color: #6c757d;
    border-radius: 4px;
    line-height: 1.2;
    transition: all 0.2s ease;
}

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

#detailModal.modal-overlay {
    z-index: 1030;
}

.data-source-toggle {
    display: flex;
    background-color: var(--card-background);
    border-radius: 8px;
    padding: 4px;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.source-btn {
    padding: 8px 18px;
    font-size: 15px;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    color: var(--text-secondary);
    background-color: transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.source-btn.active {
    background-color: #28a745; /* Warna hijau untuk membedakan */
    color: white;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
}

.source-btn:not(.active):hover {
    background-color: #f1f5f9;
}

.node-container.is-inspektorat {
    background-color: #ececff; 
    border-top-color: #6b6dfc; 
}
#expandAllBtn,
#collapseAllBtn {
    display: none;
}

.role-user .btn-add-new,
.role-user .btn-delete,
.role-user .btn-primary-edit,
.role-user #manageSubordinatesBtn,
.role-user .btn-add-new-subjabatan,
.role-user .cell-aksi-wrapper,
.role-user #historyBtn,
.role-user .btn-edit-member,
.role-user #moveHolderBtn
{
    display: none !important;
}

.btn-logout {
    padding: 8px 18px;
    font-size: 15px;
    font-weight: 500;
    color: white;
    background-color: var(--danger-color); /* Menggunakan warna merah dari variabel */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-logout:hover {
    background-color: #c82333; /* Warna merah lebih gelap saat di-hover */
}

/* ======================================================= */
/* ATURAN TAMBAHAN UNTUK ROLE USER (READ-ONLY)             */
/* ======================================================= */

/* Sembunyikan kolom "Aksi" di tabel modal detail subbagian */
/* Ini menargetkan header (th) dan sel (td) terakhir dari tabel */
/* Hanya sembunyikan header terakhir DI DALAM thead */
.role-user #subbagianDetailModal .summary-table thead th:last-child {
    display: none;
}

/* Hanya sembunyikan sel terakhir DI DALAM tbody */
.role-user #subbagianDetailModal .summary-table tbody td:last-child {
    display: none;
}

/* Tombol tambah jabatan tetap disembunyikan (tidak berubah) */
.role-user .btn-add-new-subjabatan {
    display: none;
}

/* Gaya dasar untuk node trigger agar memiliki cursor pointer */
.node-container.is-trigger-node {
    position: relative; /* Diperlukan untuk posisi absolut anak */
    overflow: hidden; /* Menyembunyikan tombol aksi di awal */
    transition: all 0.3s ease;
}

/* Gaya untuk tombol aksi */
.node-trigger-action {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--primary-color);
    color: white;
    text-align: center;
    padding: 6px 0;
    font-weight: 400;
    font-size: 12px;
    transform: translateY(100%); /* Sembunyikan tombol di bawah node */
    transition: transform 0.3s ease-in-out;
}

/* EFEK INTERAKTIF SAAT HOVER */

/* Saat cursor diarahkan ke node trigger... */
.node-container.is-trigger-node:hover {
    transform: translateY(-5px); /* Node sedikit terangkat */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Bayangan lebih jelas */
}

/* ...tombol aksi akan muncul dari bawah */
.node-container.is-trigger-node:hover .node-trigger-action {
    transform: translateY(0%);
}

#subbagianDetailModal {
    z-index: 1010; /* Atur z-index modal bawahan */
}
#infoJabatanModal {
    z-index: 1030; /* Harus lebih tinggi dari subbagianDetailModal */
}
#editMemberModal {
    z-index: 1020; /* Pastikan z-index modal edit anggota LEBIH TINGGI */
}

#confirmModal {
    z-index: 1040;
}

.fab-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.fab-main {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #007bff;
    color: white;
    font-size: 28px;
    line-height: 56px;
    text-align: center;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative; /* Menjamin tombol utama di atas tumpukan */
    z-index: 2;
    justify-content: center;
    align-items: center;
    display: flex;
}

.fab-main:hover {
    background-color: #0056b3;
}

.fab-container.active .fab-main {
    transform: rotate(45deg);
}

.fab-options {
    position: absolute;
    bottom: 70px;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Sembunyikan seluruh grup opsi secara default */
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

/* Tampilkan grup opsi saat menu aktif */
.fab-container.active .fab-options {
    visibility: visible;
    opacity: 1;
}

.fab-option {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    cursor: pointer;
}

.fab-label {
    background-color: #fff;
    padding: 5px 12px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    color: #333;
    font-size: 14px;
    white-space: nowrap;
    margin-right: 16px;
}

.fab-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #f8f9fa;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

.fab-option:hover .fab-icon {
    transform: scale(1.1);
}

.history-controls {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e2e8f0;
}
.history-controls select,
.history-controls input {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
}
.history-controls input {
    flex-grow: 1; /* Agar input search mengisi sisa ruang */
}

body.role-user .fab-container {
    display: none;
}

body.role-user .admin-only {
    display: none !important;
}

.kebutuhan-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px; /* Jarak antara input dan ikon */
    justify-content: center;
}

.info-icon {
    font-style: normal;
    font-weight: bold;
    color: #007bff;
    cursor: help; /* Mengubah cursor menjadi tanda tanya saat hover */
    border: 1px solid #007bff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}

/* Styling untuk Tab di Modal */
.modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    padding: 0 24px;
}
.tab-button {
    padding: 12px 16px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}
.tab-button:hover {
    color: var(--primary-color);
}
.tab-button.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* Konten Pane */
.tab-pane {
    display: none; /* Sembunyikan semua pane secara default */
}
.tab-pane.active {
    display: block; /* Tampilkan hanya yang aktif */
    animation: fadeIn 0.3s;
}

/* List Riwayat Kerja */
.work-history-list {
    list-style-type: none;
    padding: 0;
    max-height: 250px;
    overflow-y: auto;
}
.work-history-list li {
    padding: 10px 5px;
    border-bottom: 1px solid #f0f0f0;
}
.work-history-list li:last-child {
    border-bottom: none;
}
.history-jabatan {
    font-weight: 600;
    font-size: 16px;
}
.history-unit, .history-periode {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Gaya baru untuk tata letak profil di modal */
.profile-layout {
    display: flex;
    align-items: flex-start; /* Ubah dari center ke flex-start */
    gap: 25px;
}

.profile-photo-container {
    flex-shrink: 0;
}

#profile-photo {
    width: 100px; /* Sedikit lebih kecil agar proporsional */
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border-color);
}

.profile-text-container {
    flex-grow: 1;
    padding-top: 5px; /* Beri sedikit padding atas */
}

/* Gaya untuk Nama dan Jabatan (Informasi Primer) */
.profile-main-info h3 {
    margin: 0 0 4px 0;
    font-size: 20px; /* Perbesar font nama */
    font-weight: 700;
    color: var(--text-primary);
}

.profile-main-info p {
    margin: 0;
    font-size: 15px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Garis pemisah */
.profile-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 16px 0;
}

/* Gaya untuk Info Sekunder (Kelas Jabatan & ID Unit) */
.profile-secondary-info {
    display: flex;
    gap: 20px;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 3px;
    text-transform: uppercase; /* Membuatnya kapital seperti desain lama */
    letter-spacing: 0.5px;
}

.info-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Atur header agar judul dan tombol terpisah */
.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Wadah untuk tombol-tombol di header */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Jarak antara tombol unduh dan panah */
}

/* Gaya untuk tombol unduh baru */
.btn-download-summary {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-secondary);
    padding: 5px;
    line-height: 1;
    transition: color 0.2s;
}

.btn-download-summary:hover {
    color: var(--primary-color);
}

/* Gaya untuk Dropdown di dalam Modal Footer */

.modal-footer button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px; /* Samakan ukuran font */
    transition: all 0.2s;
}

/* Tombol Talenta (btn-kinerja) */
.btn-kinerja {
    background-color: var(--secondary-color); /* Warna biru dari variabel */
    color: white;
}
.btn-kinerja:hover {
    background-color: #0056b3; /* Warna biru lebih gelap saat hover */
}

.role-user .modal-footer .dropdown {
    display: none !important;
}

/* -- Style untuk Mode Maximize -- */
body.focus-mode-active {
    overflow: hidden; /* Mencegah scrollbar yang tidak perlu */
}

body.focus-mode-active .controls,
body.focus-mode-active .summary-container,
body.focus-mode-active .fab-container,
body.focus-mode-active #floating-summary-container {
    display: none !important; /* Sembunyikan semua elemen pengganggu */
}

body.focus-mode-active #chartContainerWrapper {
    position: fixed; /* Tetap di posisi layar, abaikan scroll */
    top: 0;
    left: 0;
    width: 100vw; /* Lebar 100% dari viewport */
    height: 100vh; /* Tinggi 100% dari viewport */
    padding: 10px; /* Beri sedikit padding agar tidak terlalu mepet */
    z-index: 1000; /* Pastikan tampil di paling atas */
    background-color: #ffffff; /* Beri latar belakang putih solid */
    box-sizing: border-box; /* Pastikan padding tidak menambah ukuran */
}

body.focus-mode-active #chartContainerWrapper .chart-container {
    width: 100%;
    height: 100%;
}

/* Posisi untuk tombol Maximize/Minimize */
#chartContainerWrapper {
    position: relative; /* Diperlukan agar positioning anak berfungsi */
}

#maximizeBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 500; /* Pastikan tombol di atas peta */
    border: 1px solid #ddd;
    background-color: white;
}

/* ========================================================== */
/* ==   Style untuk Fitur Pencarian Lanjutan (Advanced Search) == */
/* ========================================================== */

/* Tombol Filter di Header */
.advanced-search-btn {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    transition: background-color 0.2s;
}

.advanced-search-btn:hover {
    background-color: #f8fafc;
}

.advanced-search-btn svg {
    width: 20px;
    height: 20px;
    color: #4a5568;
}

/* Grup Pilihan (Pills) di Modal */
.radio-group-pills {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    margin-top: 8px;
}

.radio-group-pills label {
    flex: 1;
    text-align: center;
    cursor: pointer;
    background-color: #ffffff;
    color: #4a5568;
    transition: background-color 0.2s;
    position: relative;
}

.radio-group-pills label:not(:last-child) {
    border-right: 1px solid #e2e8f0;
}

.radio-group-pills input[type="radio"] {
    display: none; /* Sembunyikan radio button asli */
}

.radio-group-pills span {
    display: block;
    padding: 10px 12px;
    font-size: 14px;
}

.radio-group-pills input[type="radio"]:checked + span {
    background-color: #005a9e;
    color: #ffffff;
    font-weight: 500;
}

/* ========================================================== */
/* ==   Style untuk Modal Hasil Pencarian Lanjutan         == */
/* ========================================================== */

#advancedSearchResultsModal .modal-content {
    max-width: 600px;
}

#advancedSearchResultsModal .modal-body {
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
}

.search-results-header {
    padding: 15px 25px;
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.search-results-header p {
    margin: 0;
    font-weight: 500;
    color: #4a5568;
}

.search-results-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.search-results-list li {
    padding: 15px 25px;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-results-list li:last-child {
    border-bottom: none;
}

.search-results-list li:hover {
    background-color: #f7fafc;
}

.result-item-display {
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 4px;
}

.result-item-context {
    font-size: 14px;
    color: #64748b;
}

.result-item-context .result-source {
    font-weight: 500;
    color: #005a9e;
}


/* ========================================================== */
/* ==   Style Modern untuk Modal Informasi Jabatan         == */
/* ========================================================== */

#infoJabatanModal .modal-content {
    max-width: 900px; /* Sedikit lebih lebar untuk tampilan yang lebih baik */
}

#infoJabatanModal .modal-body {
    background-color: #f8fafc; /* Latar belakang abu-abu lembut */
    padding: 0;
}

.info-container {
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Jarak antar section */
}

.info-section {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px;
}

.info-section h4 {
    margin-top: 0;
    margin-bottom: 18px;
    font-size: 16px;
    font-weight: 600;
    color: #005a9e; /* Warna biru tema */
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 10px;
}

.info-grid-modern {
    display: grid;
    /* Membuat kolom responsif */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px 25px;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-item .info-label {
    font-size: 12px;
    font-weight: 500;
    color: #64748b; /* Abu-abu untuk label */
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-item .info-value {
    font-size: 15px;
    color: #1a202c;
    white-space: pre-wrap; /* Agar line break di teks panjang bekerja */
    line-height: 1.5;
}

.info-item .info-value ul {
    margin: 0;
    padding-left: 20px;
    list-style-type: disc;
}

.info-item.full-width {
    grid-column: 1 / -1; /* Membuat item mengambil lebar penuh */
}

/* ========================================================== */
/* ==   Style untuk Highlight Baris Hasil Pencarian        == */
/* ========================================================== */

@keyframes highlight-fade {
    from { background-color: #fffbe6; } /* Warna kuning muda */
    to { background-color: transparent; }
}

.highlight-row {
    background-color: #e0f2fe !important; /* Warna biru muda */
    transition: background-color 0.5s ease;
}

#subbagianDetailModal .highlight-row {
    animation: highlight-fade 3s ease-out forwards;
}

/* ========================================================== */
/* ==   Style untuk Kontrol di Tampilan Penuh (Fullscreen) == */
/* ========================================================== */

/* Kontainer untuk semua tombol kontrol */
.fullscreen-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 2010; /* Di atas chart container */
    display: none; /* Sembunyi secara default */
    flex-direction: column;
    gap: 8px;
}

/* Tampilkan hanya saat mode fokus aktif */
body.focus-mode-active .fullscreen-controls {
    display: flex;
}

/* Gaya untuk setiap tombol */
.fs-control-btn {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.2s;
}

.fs-control-btn:hover {
    background-color: #ffffff;
    border-color: #cbd5e1;
    transform: scale(1.05);
}

.fs-control-btn svg {
    width: 22px;
    height: 22px;
    color: #4a5568;
}

.pegawai-item.highlight-item {
    background-color: #eef2ff; /* Warna: light indigo */
    border: 1px solid #c7d2fe;
    border-radius: 6px;
    transition: background-color 0.3s ease-in-out;
    padding: 4px;
    margin: 2px 0;
}

/* Style untuk hasil pencarian lanjutan */
.result-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* Style dasar untuk semua label/badge */
.badge {
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 12px;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Style untuk label "Lowong" */
.badge-vacant {
    background-color: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

/* Style untuk label "Terisi" */
.badge-filled {
    background-color: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

/* ================================================= */
/* == STYLING NODE BERDASARKAN LEVEL JABATAN FUNGSIONAL == */
/* ================================================= */

/* Level 1: Sekretaris Jendral (Biru) */
.node-container.f-level-sekjen {
    background-color: #e0f2fe; /* light-blue-100 */
    border-top-color: #3b82f6; /* blue-500 */
}

/* Level 2: Deputi (Hijau) */
.node-container.f-level-deputi {
    background-color: #d1fae5; /* green-100 */
    border-top-color: #10b981; /* green-500 */
}

/* Level 3: Kepala Biro / Pusat / Inspektorat (Kuning/Oranye) */
.node-container.f-level-biro {
    background-color: #fef9c3; /* yellow-100 */
    border-top-color: #f59e0b; /* yellow-500 */
}

/* Level 4: Kepala Bagian & Kepala Kantor Daerah (Kuning/Oranye) */
.node-container.f-level-bagian {
    background-color: #ffedd5; /* orange-100 */
    border-top-color: #f97316; /* orange-500 */
}

/* Level 5: Kepala Subbagian (Kuning/Oranye) */
.node-container.f-level-subbagian {
    background-color: #fff7ed; /* orange-100 */
    border-top-color: #ffb077; /* orange-500 */
}

.masa-kerja-filter-group {
    display: flex;
    grid-template-columns: 2fr 1fr 1fr;
    align-items: center;
    margin-top: 5px;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.masa-kerja-filter-group select,
.masa-kerja-filter-group input {
    border: none;
    border-radius: 0;
}

.masa-kerja-filter-group > *:not(:first-child) {
    border-left: 1px solid #cbd5e0;
}

.masa-kerja-filter-group:focus-within {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 90, 156, 0.1);
}

.masa-kerja-filter-group select:focus,
.masa-kerja-filter-group input:focus {
    outline: none;
}

.info-value-edit {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .btn-edit-tmt {
        background: none;
        border: none;
        cursor: pointer;
        padding: 2px;
        font-size: 14px;
        line-height: 1;
    }

.collapsible-filter {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
}

.collapsible-filter-header {
    background-color: #f8fafc;
    padding: 10px 15px;
    cursor: pointer;
    font-weight: 600;
    position: relative;
    user-select: none;
}

.collapsible-filter-header::after {
    content: '▼';
    position: absolute;
    right: 15px;
    transition: transform 0.3s ease;
    font-size: 12px;
}

.collapsible-filter.active .collapsible-filter-header::after {
    transform: rotate(180deg);
}

.collapsible-filter-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding: 0 15px;
}

.collapsible-filter.active .collapsible-filter-content {
    max-height: 500px; /* Batas tinggi maksimal saat terbuka */
    padding: 15px 15px;
}

.node-container.f-level-fungsional {
    background-color: #e9fbee; /* Warna hijau muda yang lembut */
    border-top-color: #28a745; /* Warna hijau dari variabel success-color */
}

/* ============================================== */
/* ==   GAYA BARU UNTUK ACCORDION INFO JABATAN (VERSI OPTIMAL) == */
/* ============================================== */

.info-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-accordion-item {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    
    /* MODIFIKASI: Menggunakan Grid untuk animasi yang lebih mulus */
    display: grid;
    grid-template-rows: auto 0fr; /* Header: auto, Konten: 0 fraksi (tersembunyi) */
    transition: grid-template-rows 0.3s ease-out; /* Animasikan perubahan baris grid */
}

.info-accordion-item.active {
    grid-template-rows: auto 1fr; /* Konten: 1 fraksi (mengembang) */
    border-color: #005A9C;
}

.info-accordion-header {
    background-color: #f8fafc;
    padding: 12px 18px;
    cursor: pointer;
    font-weight: 600;
    position: relative;
    user-select: none;
    border-radius: 7px; /* Border radius berlaku terus */
}

.info-accordion-item.active .info-accordion-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.info-accordion-header::after {
    content: '▼';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
    font-size: 12px;
    color: #64748b;
}

.info-accordion-item.active .info-accordion-header::after {
    transform: translateY(-50%) rotate(180deg);
}

.info-accordion-content {
    overflow: hidden;
    background-color: #fff;
    border-radius: 0 0 7px 7px;
    
    /* MODIFIKASI: Hapus max-height, ganti dengan transisi padding dan opacity */
    transition: padding 0.3s ease-out, opacity 0.3s ease-out;
    padding: 0 18px;
    opacity: 0;
}

.info-accordion-item.active .info-accordion-content {
    padding: 18px;
    opacity: 1;
}