/* =====================================================================
   HAEI OrgChart Plugin — orgchart.css
   Bagan struktur organisasi bergaya pohon dengan garis penghubung.
   Mandiri (tidak bergantung Bootstrap) dan responsif:
   - Desktop : pohon horizontal dengan konektor.
   - Mobile  : daftar bertingkat vertikal.
   ===================================================================== */

.hoc-wrap { --hoc-line: var(--border, #CDD5E8); --hoc-blue-bg: var(--biru-subtle, #EBF0FA); --hoc-blue-bd: var(--biru-disabled, #8DA5CC);
            --hoc-green-bg: var(--hijau-subtle, #E8F8EE); --hoc-green-bd: var(--hijau-disabled, #82C9A0); --hoc-ink: var(--text-main, #0D1A33);
            --hoc-accent: var(--biru, #0D2B6E);
            width: 100%; overflow-x: auto; padding: 8px 4px 24px; }

/* ---------- Struktur pohon ---------- */
.hoc-chart, .hoc-chart ul { list-style: none; margin: 0; padding: 0; }
.hoc-chart      { display: flex; justify-content: center; min-width: max-content; margin: 0 auto; }
.hoc-chart ul   { display: flex; justify-content: center; position: relative; padding-top: 28px; }
.hoc-chart li   { position: relative; text-align: center; padding: 28px 10px 0; display: flex;
                  flex-direction: column; align-items: center; }

/* Garis penghubung */
.hoc-chart li::before,
.hoc-chart li::after  { content: ''; position: absolute; top: 0; right: 50%;
                        border-top: 2px solid var(--hoc-line); width: 50%; height: 28px; }
.hoc-chart li::after  { right: auto; left: 50%; border-left: 2px solid var(--hoc-line); }
.hoc-chart li:only-child::before,
.hoc-chart li:only-child::after { display: none; }
.hoc-chart li:only-child        { padding-top: 0; }
.hoc-chart li:first-child::before,
.hoc-chart li:last-child::after { border-top: 0 none; }
.hoc-chart li:last-child::before  { border-right: 2px solid var(--hoc-line); border-radius: 0 8px 0 0; }
.hoc-chart li:first-child::after  { border-radius: 8px 0 0 0; }
.hoc-chart ul::before { content: ''; position: absolute; top: 0; left: 50%;
                        border-left: 2px solid var(--hoc-line); height: 28px; }
.hoc-chart > li { padding-top: 0; }
.hoc-chart > li::before, .hoc-chart > li::after { display: none; }

/* ---------- Susunan baris vertikal (VOrder) ---------- */
/* Struktur: li(induk) > div.hoc-vstack > ul.hoc-row (beberapa baris).
   Konektor pohon bawaan tidak cocok untuk susunan multi-baris, jadi kita
   MATIKAN semuanya di dalam vstack; garis penghubung digambar oleh JS
   (elemen .hoc-line-* absolut) setelah layout diketahui. */
.hoc-vstack { display: flex; flex-direction: column; align-items: center;
              position: relative; }
.hoc-vstack .hoc-row::before,
.hoc-vstack .hoc-row > li::before,
.hoc-vstack .hoc-row > li::after { display: none !important; }
.hoc-vstack .hoc-row > li { padding-top: 0; }
.hoc-vstack > .hoc-row { padding-top: 34px; position: relative; }
.hoc-vstack > .hoc-row + .hoc-row { margin-top: 6px; }

/* Garis yang digambar JS */
.hoc-conn { position: absolute; background: var(--hoc-line); z-index: 0; }
.hoc-conn.v { width: 2px; }
.hoc-conn.h { height: 2px; }

/* Kotak menutup garis yang lewat di belakangnya. */
.hoc-box { position: relative; z-index: 1; }

/* ---------- Kotak jabatan ---------- */
.hoc-box    { background: var(--hoc-blue-bg); border: 1px solid var(--hoc-blue-bd);
              border-radius: 10px; min-width: 220px; max-width: 260px; width: 240px;
              box-shadow: 0 4px 14px rgba(13,43,110,.12); overflow: hidden;
              position: relative; z-index: 1;
              font-family: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.hoc-box:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(13,43,110,.18); }
.hoc-green .hoc-box { background: var(--hoc-green-bg); border-color: var(--hoc-green-bd); }
.hoc-head   { padding: 12px 16px; text-align: center; }
.hoc-title  { font-weight: 800; color: var(--hoc-ink); font-size: .92rem; line-height: 1.3;
              letter-spacing: .2px; }
.hoc-names  { margin-top: 4px; font-size: .8rem; font-weight: 600; color: var(--text-muted, #5A6478);
              text-transform: uppercase; letter-spacing: .2px; }
.hoc-names div { padding: 1px 0; }

/* Bidang / sub-jabatan di bawah kepala kotak */
.hoc-groups { background: rgba(255,255,255,.75); border-top: 1px solid var(--hoc-blue-bd);
              text-align: left; padding: 10px 14px; }
.hoc-group + .hoc-group { margin-top: 10px; }
.hoc-gtitle { font-weight: 700; font-size: .8rem; color: var(--hoc-accent); line-height: 1.3; }
.hoc-gnames { font-size: .78rem; color: var(--text-muted, #5A6478); margin-top: 2px; }
.hoc-gnames div { padding: 1px 0 1px 10px; position: relative; }
.hoc-gnames div::before { content: ''; position: absolute; left: 0; top: .55em;
                          width: 4px; height: 4px; border-radius: 50%; background: var(--hoc-line); }

/* ---------- Mobile: daftar bertingkat vertikal ---------- */
@media (max-width: 767.98px) {
  .hoc-wrap  { overflow-x: hidden; }
  .hoc-chart { min-width: 0; display: block; }
  .hoc-chart ul  { display: block; padding: 0 0 0 18px; margin-left: 8px;
                   border-left: 2px dashed var(--hoc-line); }
  .hoc-chart ul::before { display: none; }
  .hoc-chart li  { display: block; padding: 14px 0 0; text-align: left; }
  .hoc-chart li::before, .hoc-chart li::after { display: none; }
  .hoc-box   { min-width: 0; max-width: none; width: 100%; }
}