/**
 * layout.css
 * Modul ini menguruskan struktur dan susun atur asas untuk carta organisasi.
 * Ia tidak mengandungi gaya hiasan seperti warna atau bayang-bayang.
 */

/* Gaya asas untuk keseluruhan halaman */
body {
    font-family: 'Inter', sans-serif;
}

/* Bekas utama untuk carta, meletakkannya di tengah halaman */
#chart-container {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

/* Tetapan asas untuk semua elemen hierarki */
.org-chart,
.org-chart ul,
.org-chart li {
    position: relative; /* Penting untuk kedudukan garisan penyambung */
    transition: all 0.5s;
}

/* Bekas untuk setiap baris ahli (anak-anak) */
.org-chart ul {
    display: flex;
    justify-content: center;
    padding-top: 20px; /* Jarak antara tahap */
}

/* Item senarai tidak lagi memerlukan flex, hanya padding dan jenis senarai */
.org-chart li {
    list-style-type: none;
    padding: 0 5px; /* Jarak antara ahli adik-beradik */
}

/**
 * PEMBETULAN: Ini adalah bekas yang betul untuk menjadi flex container.
 * Ia memegang kedua-dua nod ibu bapa dan senarai 'ul' anak-anak.
 * Dengan meletakkan flex di sini, ia akan menyusun ibu bapa di tengah-tengah kumpulan anak-anaknya.
 */
.org-node-wrapper {
    display: inline-flex; /* Guna inline-flex supaya lebar bekas mengikut kandungan */
    flex-direction: column;   /* Susun ahli di atas kumpulan anaknya */
    align-items: center;     /* Letakkan semuanya di tengah secara mendatar */
    position: relative;
    padding-top: 20px;
}