/* ===== CẢI TIẾN GIAO DIỆN CÂY GIA PHẢ (COMPACT TREE) ===== */
/* Mục tiêu: Làm rõ phân cấp cha con, tránh rối mắt ở các đời sau (5, 6, 7) */

/* 1. MÀU SẮC PHÂN BIỆT CÁC ĐỜI (COLOR CODING) */
/* Giúp mắt người xem nhanh chóng nhận diện thế hệ */

/* Đời 4: Vàng nhạt (Mặc định) - Giữ nguyên style gốc */

/* Đời 5: Xanh lá nhạt - Biểu tượng sự sinh sôi */
.tree li li li li .couple-card,
.tree li li li li .member-card {
    background-color: #F1F8E9 !important;
    /* Light Green */
    border-color: #689F38 !important;
    /* Green border */
    box-shadow: 0 2px 5px rgba(76, 175, 80, 0.2);
}

.tree li li li li .gen-tag {
    background-color: #689F38 !important;
}

.tree li li li li .marriage-icon {
    color: #E91E63 !important;
    /* Giữ tim đỏ */
}

/* Đời 6: Xanh dương nhạt - Biểu tượng sự hy vọng */
.tree li li li li li .couple-card,
.tree li li li li li .member-card {
    background-color: #E3F2FD !important;
    /* Light Blue */
    border-color: #1976D2 !important;
    /* Blue border */
    box-shadow: 0 2px 5px rgba(33, 150, 243, 0.2);
}

.tree li li li li li .gen-tag {
    background-color: #1976D2 !important;
}

/* Đời 7: Tím nhạt/Hồng nhạt - Thế hệ mới nhất */
.tree li li li li li li .couple-card,
.tree li li li li li li .member-card,
.compact-list-container {
    background-color: #F3E5F5 !important;
    /* Light Purple */
    border-color: #9C27B0 !important;
    /* Purple border */
}

.tree li li li li li li .gen-tag,
.compact-list-container .gen-tag {
    background-color: #9C27B0 !important;
}


/* 2. CẤU TRÚC CÂY THƯ MỤC (VERTICAL BRANCH LAYOUT) */
/* Áp dụng từ Đời 4 trở xuống để tiết kiệm không gian ngang và rõ ràng hơn */

/* Reset layout cũ */
.tree li li li ul {
    display: flex;
    flex-direction: column !important;
    align-items: flex-start !important;
    /* Căn trái thay vì center */
    padding-top: 0 !important;
    position: relative;
    /* Tạo thụt đầu dòng (Indentation) */
    margin-left: 50px !important;
    /* Đẩy sang phải so với trục giữa của cha */
    border-left: 2px dashed #bbb !important;
    /* Đường trục dọc nối các con */
    margin-top: 20px !important;
    width: auto !important;
    min-width: 200px;
    /* Đảm bảo đủ rộng */
    left: auto !important;
    transform: none !important;
}

/* Mục con (Child Item) trong nhánh dọc */
.tree li li li ul li {
    float: none !important;
    display: block !important;
    width: auto !important;
    text-align: left !important;
    /* Text căn trái */
    padding: 15px 0 15px 40px !important;
    /* Padding trái lớn để chứa đường nối ngang */
    position: relative;
    margin: 0 !important;
    /* Reset margin */
}

/* Đường nối NGANG (Horizontal Connector) từ trục dọc vào thẻ con */
.tree li li li ul li::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    /* Canh giữa chiều cao thẻ (hoặc chỉnh cố định top đếu thẻ cao bằng nhau) */
    left: 0 !important;
    /* Bắt đầu từ trục dọc */
    width: 35px !important;
    /* Độ dài đường nối ngang */
    height: 0 !important;
    border-top: 2px dashed #bbb !important;
    border-left: none !important;
    transform: translateY(-50%) !important;
    border-radius: 0 !important;
}

/* Ẩn các connector kiểu cũ (thừa) */
.tree li li li ul li::after {
    display: none !important;
}

.tree li li li ul::before {
    display: none !important;
    /* Ẩn đường connector dọc từ cha xuống */
}

/* Chỉnh lại mối nối từ Cha xuống trục dọc của con */
/* Cần một đường nối mỏng từ đáy card cha nối vào đầu trục dọc */
.tree li li li>.couple-card::after,
.tree li li li>.member-card::after {
    /* Đây là trick để vẽ đường nối từ cha xuống UL con lệch phải */
    /* Tuy nhiên CSS before/after của card có thể bị override. 
       Ta sẽ dùng UL::after để vẽ đường nối lên cha 
    */
}

/* Đường nối từ góc UL lên đáy Cha (Tạo hình chữ L ngược) */
.tree li li li ul::after {
    content: '' !important;
    position: absolute;
    top: -20px;
    /* Vươn lên trên */
    left: -2px;
    /* Trùng với border-left */
    width: 2px;
    height: 20px;
    border-left: 2px dashed #bbb;
    /* Dịch chuyển ngang để nối vào giữa cha? 
       Khó vì cha đang ở center (-50px bên trái).
       Cách đơn giản: Chấp nhận nhánh cây mọc ra từ bên phải cha (nhìn cũng gọn).
    */
}

/* Nút Toggle Button - Chỉnh lại vị trí cho đẹp */
.tree li li li .toggle-btn {
    bottom: -12px !important;
    background-color: #fff !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
    font-weight: bold;
    line-height: 20px !important;
}

.tree li li li .toggle-btn:hover {
    background-color: var(--primary) !important;
    color: #fff !important;
}

/* Compact List Container (Đời 7 - danh sách text) */
.compact-list-container {
    margin-left: 0 !important;
    border-left: 4px solid var(--primary) !important;
    /* Điểm nhấn viền trái */
    border-radius: 4px !important;
    background: #fff !important;
    padding: 10px 15px !important;
}

.compact-item {
    padding: 5px 0 !important;
    font-size: 0.9rem !important;
    color: #333;
}

/* Responsive: Trên mobile thụt lề ít hơn */
@media (max-width: 768px) {
    .tree li li li ul {
        margin-left: 20px !important;
        /* Thụt ít hơn */
        padding-left: 15px !important;
    }

    .tree li li li ul li {
        padding: 10px 0 10px 25px !important;
    }

    .tree li li li ul li::before {
        width: 20px !important;
    }

    /* Thu nhỏ card trên mobile */
    .tree li li li .couple-card,
    .tree li li li .member-card {
        min-width: auto !important;
        padding: 8px 10px !important;
    }

    .tree li li li .person .name {
        font-size: 0.85rem !important;
    }
}