/* jquery.orgchart.css */

div.orgChart {
  margin: 10px;
  padding: 20px;
  overflow-x: auto; /* Tambahan untuk scroll horizontal jika melebar */
}

div.orgChart h2 {
  margin: 0px;
  font-size: 16px;
  font-weight: normal;
  min-height: 20px;
}

div.orgChart h2:hover {
  background: #fcfaca;
  cursor: text;
}

div.orgChart ul {
  list-style: none;
  margin: 4px;
  padding: 0px;
  font-size: 0.8em;
  text-align: left;
}

div.orgChart ul.stack,
div.orgChart ul.stack ul {
  text-align: center;
}

div.orgChart table {
  width: 100%;
}

div.orgChart tr.lines td.line {
  width: 1px;
  height: 20px;
}

div.orgChart tr.lines td.top {
  border-top: 2px solid #9CA3AF;
}

div.orgChart tr.lines td.left {
  border-right: 2px solid #9CA3AF;
}

div.orgChart tr.lines td.right {
  border-left: 2px solid #9CA3AF;
}

div.orgChart tr.lines td.half {
  width: 50%;
}

div.orgChart td {
  text-align: center;
  vertical-align: top;
  padding: 0px;
}

/* Stylish node box - Tampilan modern default */
div.orgChart div.node {
  cursor: default;
  display: inline-block;
  padding: 10px;
  line-height: 1.3em;
  border-radius: 8px; /* Sudut lebih membulat */
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Shadow tipis */

  /* Tambahan agar fleksibel dan modern */
  width: auto;
  min-width: 180px;
  max-width: 250px;
  height: auto;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
  font-size: 14px;

  /* Background default yang sangat lembut atau transparan agar mudah di-override */
  background: #FFFFFF; /* Default putih */
  border: 1px solid #ddd; /* Border tipis */
  color: #333; /* Warna teks default */
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; /* Transisi untuk perubahan warna dan hover */
}

/* Hover effect pada node */
div.orgChart div.node:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* Node title styling */
div.orgChart div.node h2 {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 8px 0;
  color: inherit; /* Penting: Mewarisi warna dari node */
}

/* Node description styling */
div.orgChart div.node p {
  font-size: 16px;
  color: inherit; /* Penting: Mewarisi warna dari node */
  margin: 0;
}

/* Icons inside nodes (if any) */
div.node .icons span {
  color: inherit; /* Penting: Mewarisi warna dari node */
}

/* Tombol tambah/hapus asli */
.org-add-button,
.org-del-button,
.org-confirm-del-button {
  position: absolute;
  font-size: 12px;
}

.org-add-button {
  bottom: 3px;
  left: 5px;
  padding-left: 13px;
  background: url(./add.png) no-repeat 0 3px;
}

.org-add-button:hover,
.org-del-button:hover {
  background-color: #eef;
  border-radius: 2px;
  cursor: pointer;
}

.org-del-button {
  background: url(./delete.png) no-repeat;
  width: 12px;
  height: 12px;
  bottom: 7px;
  right: 5px;
}

.org-input {
  width: 90px;
}

.org-confirm-del-button {
  display: none;
}

div.orgChart tr.lines td {
  padding: 0;
  margin: 0;
}

div.orgChart tr.lines {
  height: 20px;
}

div.orgChart tr.lines td.line {
  height: 20px;
}

div.orgChart .node {
  margin-bottom: 20px 50px;
}

/* Warna yang lebih soft & harmonis untuk tiap level (dengan gradien dan teks yang kontras) */
/* Penting: Gunakan gradien yang modern dan warna teks yang kontras */

.node.level-1 { /* CASCADING KINERJA */
  background: linear-gradient(to bottom right, #CFD8DC, #B0BEC5); /* Light Blue Grey */
  border: 1px solid #90A4AE;
  color: #263238; /* Dark Blue Grey for text */
}
.node.level-1 h2, .node.level-1 p { color: #263238; }

.node.level-visi {
  background: linear-gradient(to bottom right, #E8EAF6, #C5CAE9); /* Lighter Indigo */
  border: 1px solid #7986CB;
  color: #3F51B5; /* Dark Indigo for text */
}
.node.level-visi h2, .node.level-visi p { color: #3F51B5; }

.node.level-misi {
  background: linear-gradient(to bottom right, #C8E6C9, #A5D6A7); /* Light Green */
  border: 1px solid #66BB6A;
  color: #2E7D32; /* Dark Green for text */
}
.node.level-misi h2, .node.level-misi p { color: #2E7D32; }

.node.level-tujuan { /* TUJUAN RMPD */
  background: linear-gradient(to bottom right, #BBDEFB, #90CAF9); /* Light Blue */
  border: 1px solid #42A5F5;
  color: #1565C0; /* Dark Blue for text */
}
.node.level-tujuan h2, .node.level-tujuan p { color: #1565C0; }

.node.level-sasaran { /* SASARAN RMPD */
  background: linear-gradient(to bottom right, #FFCDD2, #EF9A9A); /* Light Red */
  border: 1px solid #E57373;
  color: #C62828; /* Dark Red for text */
}
.node.level-sasaran h2, .node.level-sasaran p { color: #C62828; }

/* Level Fungsional/Pelaksana */
.node.level-tujuan-pd { /* Penting: Ini akan cocok dengan 'Tujuan PD' setelah konversi di JS */
  background: linear-gradient(to bottom right, #E0F7FA, #B2EBF2); /* Pale Cyan */
  border: 1px solid #4DD0E1;
  color: #006064; /* Dark Cyan for text */
}
.node.level-tujuan-pd h2, .node.level-tujuan-pd p { color: #006064; }

.node.level-sasaran-pd { /* Penting: Ini akan cocok dengan 'Sasaran PD' setelah konversi di JS */
  background: linear-gradient(to bottom right, #FFFDE7, #FFF9C4); /* Pale Yellow */
  border: 1px solid #FFD54F;
  color: #6A1B9A; /* Dark Purple for text */
}
.node.level-sasaran-pd h2, .node.level-sasaran-pd p { color: #6A1B9A; }


.node.level-indikator {
  background: linear-gradient(to bottom right, #FFECB3, #FFD54F); /* Light Amber */
  border: 1px solid #FFB300;
  color: #E65100; /* Dark Orange for text */
}
.node.level-indikator h2, .node.level-indikator p { color: #E65100; }

/* Pewarnaan berdasarkan level angka (jika Anda masih menggunakannya selain nama level) */
.node.level-2 { background: linear-gradient(to bottom right, #DCEDC8, #C5E1A5); color: #558B2F; border: 1px solid #8BC34A; }
.node.level-2 h2, .node.level-2 p { color: #558B2F; }

.node.level-3 { background: linear-gradient(to bottom right, #BBDEFB, #90CAF9); color: #1565C0; border: 1px solid #42A5F5; }
.node.level-3 h2, .node.level-3 p { color: #1565C0; }

.node.level-4 { background: linear-gradient(to bottom right, #FFCDD2, #EF9A9A); color: #C62828; border: 1px solid #E57373; }
.node.level-4 h2, .node.level-4 p { color: #C62828; }

.node.level-5 { background: linear-gradient(to bottom right, #FFFDE7, #FFF9C4); color: #6A1B9A; border: 1px solid #FFD54F; }
.node.level-5 h2, .node.level-5 p { color: #6A1B9A; }

.node.level-6 { background: linear-gradient(to bottom right, #B2EBF2, #80DEEA); color: #00838F; border: 1px solid #26C6DA; }
.node.level-6 h2, .node.level-6 p { color: #00838F; }

/* Fade-in animation untuk node */
@keyframes fadeInNode {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

div.orgChart div.node {
  animation: fadeInNode 0.4s ease-in-out;
}

/* Nonaktifkan pointer seluruh node */
div.orgChart div.node {
  cursor: default;
}

/* Aktifkan interaksi hanya pada h2 */
div.orgChart div.node h2 {
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
}

div.orgChart div.node h2:hover {
  color: #1D4ED8; /* Ubah warna saat hover jika diinginkan */
  transform: scale(1.02); /* Sedikit efek scale saat hover */
}
/* jquery.orgchart.css */

/* ... (kode yang sudah ada di atas tetap sama) ... */

/* Styling untuk list indikator di detail panel */
#detailIndikator {
  /* Ini adalah UL terluar yang ada di HTML statis */
  list-style-type: none; /* Pastikan tidak ada bullet default */
  padding-left: 0;      /* Hapus padding default UL */
  margin-left: 0;       /* Hapus margin default UL */
  margin-bottom: 20px; /* Tambahkan sedikit ruang di bawah daftar indikator */
}

/* Target UL pertama yang dibuat oleh JavaScript di dalam #detailIndikator */
#detailIndikator > ul {
    list-style-type: none; /* Sembunyikan bullet default untuk UL ini */
    padding-left: 0;       /* Hapus padding default UL ini */
    margin-left: 0;        /* Hapus margin default UL ini */
}

/* Gaya untuk LI level pertama (anak langsung dari UL pertama yang dibuat JS) */
#detailIndikator > ul > li {
    margin-bottom: 8px; /* Spasi antar item list */
    line-height: 1.5;   /* Tinggi baris untuk keterbacaan */
    color: #455A64;     /* Warna teks */
    font-size: 0.9em;   /* Ukuran font */
    position: relative; /* Diperlukan untuk bullet kustom */
    /* Padding kiri akan diatur oleh pseudo-elemen content */
    padding-left: 0; /* Setel ulang padding kiri di sini */
}

/* **REVISI PENTING DI SINI** */
/* Bullet kustom dan teks "Indikator :" untuk LI level pertama */
#detailIndikator > ul > li::before {
    content: 'Indikator : • '; /* Tambahkan teks "Indikator : " sebelum bullet */
    color: #4A769D; /* Warna bullet senada dengan tema */
    font-weight: bold;
    display: inline-block;
    /* Kita tidak lagi menggunakan position: absolute di sini */
    /* Biarkan elemen ini mengalir secara inline-block */
    width: auto; /* Biarkan lebar menyesuaikan konten */
    margin-right: 5px; /* Spasi antara teks/bullet dan isi LI */
}

/* Tambahkan padding kiri pada LI itu sendiri untuk mengakomodasi teks "Indikator :" */
#detailIndikator > ul > li {
    padding-left: 100px; /* Sesuaikan nilai ini. Ini akan memberi ruang untuk "Indikator : • " */
                        /* Jika terlalu sempit, teks mungkin tumpang tindih. */
                        /* Jika terlalu lebar, ada terlalu banyak ruang kosong. */
                        /* 100px adalah perkiraan, sesuaikan sesuai kebutuhan Anda. */
}


/* Gaya untuk UL level kedua (UL yang ada di dalam LI level pertama) */
#detailIndikator ul ul {
    list-style-type: disc; /* Bullet default untuk level ini */
    margin-left: 25px;     /* Indentasi yang jelas */
    padding-left: 0;
    margin-top: 5px;       /* Spasi di atas sub-list */
}

/* Gaya untuk LI di UL level kedua dan seterusnya */
#detailIndikator ul ul li {
    font-size: 0.85em; /* Sedikit lebih kecil dari item level utama */
    color: #546E7A;
    margin-bottom: 5px; /* Spasi antar item sub-list */
    /* Hapus aturan ::before kustom untuk level ini jika tidak diperlukan */
    padding-left: 0; /* Gunakan padding default browser untuk bullet disc */
}

/* Gaya untuk UL level ketiga */
#detailIndikator ul ul ul {
    list-style-type: square; /* Bullet kotak */
    margin-left: 20px;     /* Indentasi lebih lanjut */
}

/* Gaya untuk UL level keempat */
#detailIndikator ul ul ul ul {
    list-style-type: circle; /* Bullet lingkaran */
    margin-left: 20px;     /* Indentasi lebih lanjut */
}

#detailPD {
  margin-bottom: 10px; /* Atur jarak sesuai keinginan Anda */
}



div.orgChart table {
  border-spacing: 0px; /* Kembalikan ke nol agar garis tidak renggang */
  border-collapse: collapse !important;
}

div.orgChart tr.lines td.line {
  height: 30px;
}

div.orgChart tr.lines {
  line-height: 0;
  height: 30px;
}

div.orgChart tr.lines td {
  padding: 0;
  margin: 0;
}