/* Bagan Struktur Organisasi (halaman publik) -- kartu HTML/CSS, TANPA geser
   horizontal. Markup: resources/views/navbar/defaults/struktur_organisasi.blade.php.
   Editor admin ada di struktur_organisasi_admin.css. */

.so-wrap, .so-wrap * { box-sizing: border-box; font-family: 'Poppins', sans-serif; }

.so-wrap {
    --so-line: color-mix(in srgb, var(--gold, #C89C3D) 45%, #cbd5e1 55%);
    --so-v: 22px;              /* tinggi garis penghubung vertikal */
    background: #ffffff;
    border: 1px solid #eef1f8;
    border-radius: 20px;
    padding: 34px 26px 40px;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--navy, #192C4D) 5%, transparent);
    overflow: hidden;          /* jaga-jaga: jangan pernah melebar keluar kotak */
}

/* ---- Legenda ---- */
.so-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px dashed #e2e8f0; }
.so-legend-item { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #475467; }
.so-dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.so-dot-yayasan    { background: #1b4332; }
.so-dot-rektor     { background: #f2b90c; }
.so-dot-pendamping { background: #e0435a; }
.so-dot-dekan      { background: #2f6fd6; }
.so-dot-biro       { background: #2f9e57; }

/* ---- Kartu ---- */
.so-tree-card {
    width: 100%; border-radius: 12px; padding: 11px 14px; text-align: center;
    font-size: 12.5px; line-height: 1.4; font-weight: 600;
    overflow-wrap: anywhere; position: relative; z-index: 1;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
}
.so-title { font-weight: 700; }
.so-sub   { font-size: 11.5px; font-weight: 500; opacity: .8; margin-top: 2px; }
.so-person { font-size: 11.5px; font-weight: 700; margin-top: 7px; padding-top: 7px; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); }

.so-tree-card.so-yayasan { background: linear-gradient(135deg, #1b4332, #0f2e21); color: #fff; font-size: 15px; padding: 15px 30px; box-shadow: 0 14px 28px rgba(15, 46, 33, .3); }
.so-tree-card.so-rektor  { background: linear-gradient(135deg, #f7cd2e, #eab308); color: #171B2E; box-shadow: 0 10px 20px rgba(180, 130, 5, .2); }
.so-tree-card.so-pendamping      { background: #e0435a; color: #fff; font-size: 11.5px; padding: 9px 14px; }
.so-tree-card.so-pendamping-pink { background: #d6389e; color: #fff; font-size: 11.5px; padding: 9px 14px; }
.so-tree-card.so-dekan { background: color-mix(in srgb, #2f6fd6 12%, #fff); border: 1.5px solid color-mix(in srgb, #2f6fd6 40%, transparent); color: #1e3a6f; }
.so-tree-card.so-biro  { background: color-mix(in srgb, #2f9e57 14%, #fff); border: 1.5px solid color-mix(in srgb, #2f9e57 45%, transparent); color: #1c6b3a; }
.so-tree-card.so-anak  { background: #f8fafc; border: 1px solid #dbe3ec; color: #475467; font-size: 12px; box-shadow: none; }

/* ---- Susunan ---- */
.so-tree { width: 100%; }
.so-root, .so-level { display: flex; flex-direction: column; align-items: center; width: 100%; }
.so-root-card { width: 100%; max-width: 280px; }

/* garis vertikal dari kartu di atas ke blok di bawahnya */
.so-level { position: relative; padding-top: var(--so-v); }
.so-level::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: var(--so-v); margin-left: -1px; background: var(--so-line); }

/* Tulang punggung (mis. Rektor) diapit unit samping (mis. Satuan Pengawas) */
.so-spine-row { display: flex; align-items: center; justify-content: center; gap: 36px; width: 100%; }
.so-spine { flex: 0 1 280px; min-width: 0; }
.so-side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.so-side-left  { align-items: flex-end; }
.so-side-right { align-items: flex-start; }
.so-side-item { width: 100%; max-width: 200px; position: relative; }
/* garis pendek penghubung unit samping ke kartu utama */
.so-side-left  .so-side-item::after,
.so-side-right .so-side-item::before { content: ""; position: absolute; top: 50%; width: 36px; height: 2px; background: var(--so-line); z-index: 0; }
.so-side-left  .so-side-item::after  { left: 100%; }
.so-side-right .so-side-item::before { right: 100%; }

/* Unit pendamping (tidak punya cabang) -- barisan kartu kecil yang membungkus */
.so-aside { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; margin-bottom: var(--so-v); position: relative; }
.so-aside .so-tree-card { width: auto; flex: 0 1 190px; }
.so-level > .so-aside:last-child { margin-bottom: 0; }
.so-aside + .so-cols::before { content: ""; position: absolute; top: calc(var(--so-v) * -1); left: 50%; width: 2px; height: var(--so-v); margin-left: -1px; background: var(--so-line); }
.so-aside + .so-cols { position: relative; }

/* Kolom cabang (mis. Wakil Rektor I, II, III) + garis rel di atasnya */
.so-cols { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; width: 100%; }
.so-col { position: relative; flex: var(--w, 1) 1 0; min-width: 0; padding: var(--so-v) 8px 0; display: flex; flex-direction: column; align-items: center; }
.so-col::before, .so-col::after { content: ""; position: absolute; top: 0; width: 50%; height: var(--so-v); border-top: 2px solid var(--so-line); }
.so-col::before { right: 50%; border-right: 2px solid var(--so-line); border-radius: 0 8px 0 0; }
.so-col::after  { left: 50%;  border-left:  2px solid var(--so-line); border-radius: 8px 0 0 0; }
.so-col:first-child::before, .so-col:last-child::after { border: 0 none; }
.so-col:only-child::before, .so-col:only-child::after { display: none; }
.so-col > .so-tree-card { max-width: 300px; }

/* Isi kolom: kartu ditumpuk ke bawah di sepanjang satu garis */
.so-stack { list-style: none; margin: 0; padding: var(--so-v) 0 0; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; position: relative; }
.so-stack::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--so-line); }
.so-stack-2 { display: block; column-count: 2; column-gap: 14px; column-rule: 2px solid var(--so-line); }
.so-stack-2::before { bottom: auto; height: var(--so-v); }
.so-stack-2 > .so-stack-item { break-inside: avoid; margin-bottom: 10px; }
.so-stack-item { min-width: 0; display: flex; flex-direction: column; align-items: stretch; }

/* Unit di bawah kartu -> chip yang membungkus */
.so-chips { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; position: relative; z-index: 1; }
.so-chip { background: #fff; border: 1px solid #dbe3ec; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 500; color: #475467; line-height: 1.35; overflow-wrap: anywhere; text-align: center; }
.so-chip > .so-chips { margin-top: 4px; }

/* ---- Tablet & HP: semua ditumpuk satu kolom, garis rel di kiri ---- */
@media (max-width: 960px) {
    .so-wrap { padding: 28px 16px 32px; }
    .so-level { padding-top: 14px; align-items: stretch; }
    .so-level::before { left: 18px; margin-left: -1px; }
    .so-root-card { max-width: none; }
    .so-spine-row { flex-direction: column; gap: 10px; align-items: stretch; }
    .so-spine, .so-side { flex: none; width: 100%; }
    .so-side-left, .so-side-right { align-items: stretch; flex-direction: row; flex-wrap: wrap; }
    .so-side-item { max-width: none; flex: 1 1 160px; }
    .so-side-left .so-side-item::after, .so-side-right .so-side-item::before { display: none; }
    .so-spine-row > .so-spine { order: 0; }
    .so-aside { margin-bottom: 14px; }
    .so-aside .so-tree-card { flex: 1 1 160px; }
    .so-cols { flex-direction: column; align-items: stretch; gap: 14px; padding-left: 14px; border-left: 2px solid var(--so-line); margin-left: 4px; }
    .so-col { padding: 0 0 0 4px; align-items: stretch; flex: none; }
    .so-col::before, .so-col::after { display: none; }
    .so-col > .so-tree-card { max-width: none; }
    .so-stack { padding-top: 10px; }
    .so-stack::before { display: none; }
    .so-stack, .so-stack-2 { display: grid; column-count: auto; column-rule: 0; grid-template-columns: minmax(0, 1fr); }
    .so-stack-2 > .so-stack-item { margin-bottom: 0; }
    .so-side:empty { display: none; }
}
@media (max-width: 600px) {
    .so-wrap { border-radius: 0; border-left: none; border-right: none; padding: 24px 12px 28px; }
}