/* ===== STANDARD CSS TREE STRUCTURE (UL/LI) ===== */
.tree-overflow-wrapper {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 50px;
    text-align: center;
    /* Center content initially */
    /* Ensure scroll works for centered content that overflows */
    display: flex;
    justify-content: center;
    /* This might be the cause, let's switch strategy */
    display: block;
    white-space: nowrap;
}

.tree {
    display: inline-block;
    min-width: 100%;
    padding: 0 20px;
    /* Scale down the entire tree to fit viewport when collapsed */
    transform: scale(0.8);
    transform-origin: top center;
}

/* Base Tree */
.tree ul {
    padding-top: 60px;
    /* Increased from 40px to match connector height, fixing overlapped line */
    position: relative;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    margin: 0;
    padding-left: 0;
    /* Reset UL padding */
}

.tree li {
    float: left;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 60px 10px 0 10px;
    /* Increased from 40px to 60px */
    /* Top padding is vital for connector space */
    transition: all 0.5s;
}

/* We will use ::before and ::after to draw the connectors */
.tree li::before,
.tree li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 2px solid var(--primary);
    width: 50%;
    height: 60px;
    /* Match LI padding */
    /* Drop down length */
}

.tree li::after {
    right: auto;
    left: 50%;
    border-left: 2px solid var(--primary);
}

/* Remove connectors from the only child */
.tree li:only-child::after,
.tree li:only-child::before {
    display: none;
}

/* Remove space from the only child */
.tree li:only-child {
    padding-top: 0;
}

/* Remove left connector from first child and right connector from last child */
.tree li:first-child::before,
.tree li:last-child::after {
    border: 0 none;
}

/* Adding back the vertical connector to the last nodes */
.tree li:last-child::before {
    border-right: 2px solid var(--primary);
    border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
    border-radius: 5px 0 0 0;
}

/* Time to add downward connectors from parents */
.tree ul ul::before {
    content: '';
    position: absolute;
    top: -10px;
    /* Pull up to hide under parent card, preventing hover gap */
    left: 50%;
    border-left: 2px solid var(--primary);
    width: 0;
    height: 70px;
    /* 60px visible + 10px hidden under card */
    transform: translateX(-50%);
}

/* ===== Card Styles (Reused & Improved) ===== */
.member-card,
.couple-card {
    background: white;
    border: 2px solid var(--primary);
    border-radius: 12px;
    padding: 10px 15px;
    text-align: center;
    position: relative;
    z-index: 10;
    display: inline-block;
    /* Crucial for li formatting */
    min-width: 140px;
    /* Consistent width base */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    margin-bottom: 0;
    /* Let LI padding handle spacing */
    vertical-align: top;
}

.couple-card {
    display: inline-flex;
    /* Use inline-flex to center in LI */
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: #FFF8E1;
    border-radius: 50px;
}

.couple-card:hover,
.member-card:hover {
    background: #fff;
    border-color: var(--secondary);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Typography inside cards */
.person {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.person .name {
    font-weight: 700;
    color: var(--primary-dark);
    font-size: 0.95rem;
    white-space: nowrap;
}

.marriage-icon {
    font-size: 1.2rem;
    color: #E91E63;
    animation: heartBeat 1.5s infinite;
}

/* Toggle Button Styling */
.toggle-btn {
    position: absolute;
    bottom: -15px;
    /* Half overlapping */
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 20;
}

.toggle-btn:hover {
    background: var(--primary-dark);
}

/* Toggle Logic */
.tree li.collapsed>ul {
    display: none;
}

.tree li.collapsed .toggle-btn {
    background: #FF9800;
}

/* Gen Badges styling inside the structure */
.gen-tag {
    position: absolute;
    top: -30px;
    /* Above the card */
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-light);
    color: white;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    opacity: 0.8;
}

/* Gen 5 Compact List Style */
.compact-list-container {
    background: rgba(255, 255, 255, 0.8);
    border: 1px dashed #ccc;
    padding: 10px;
    border-radius: 8px;
    min-width: 140px;
    text-align: left;
}

.compact-item {
    padding: 3px 0;
    border-bottom: 1px solid #eee;
    font-size: 0.85rem;
}

/* Custom adjustments */
.main-root-node {
    margin-bottom: 20px;
}

.sibling-node-wrapper {
    /* For siblings like Le Thi Nguon */
    margin-top: 0;
}

@keyframes heartBeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.3);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.3);
    }

    70% {
        transform: scale(1);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .tree ul {
        padding-top: 20px;
    }

    .tree li {
        padding-top: 20px;
    }

    .tree li::before,
    .tree li::after {
        height: 20px;
    }

    .tree ul ul::before {
        height: 20px;
    }
}

/* Compact Sibling (Fix for Le Thi Nguon being too far) */
.compact-sibling {
    margin-left: -180px;
    /* Pull closer to the left sibling */
    z-index: 5;
    position: relative;
}

@media (max-width: 1024px) {
    .compact-sibling {
        margin-left: 0;
        /* Reset on smaller screens to avoid overlap */
    }
}

/* Manual Balance for Root Node (Thủy Tổ) */
.tree li.root-balance>.member-card {
    /* No transformation needed if we rely on flex alignment */
    /* But the user said it is skewed left. 
       That means the Left Child (Thặn) is wider than Right Child (Ngươn).
       Center of Container is biased Left.
       We need to PUSH the Root RIGHT to align with the gap.
       
       Gap is between Thặn and Ngươn.
    */
    margin-left: 100px;
    /* Push card right */
}

/* The connector line from root */
.tree li.root-balance>ul::before {
    /* This is the vertical line dropping from Gen 2 UL. */
    /* It is centered to the UL by default. */
    left: calc(50% + 50px) !important;
    /* Move it right to match card move */
}

/* Responsive adjustment for balance */
@media (max-width: 768px) {
    .tree li.root-balance>.member-card {
        margin-left: 0;
    }

    .tree li.root-balance>ul::before {
        left: 50% !important;
    }
}

/* ===== VERTICAL BRANCH STYLE (For Gen 3 to save width) ===== */
.tree ul.vertical-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* keep children centered under parent */
    padding-top: 0;
    position: relative;
}

/* Hide the horizontal bar from standard tree */
.tree ul.vertical-tree::before {
    display: none;
}

/* Vertical items */
.tree ul.vertical-tree li {
    float: none;
    display: block;
    text-align: center;
    padding: 0;
    /* Remove standard spacing */
    padding-top: 20px;
    width: 100%;
    position: relative;
    /* Connectors for vertical */
}

/* Reset standard connectors */
.tree ul.vertical-tree li::before,
.tree ul.vertical-tree li::after {
    display: none;
}

/* New Vertical Connector: Line dropping from previous sibling or parent */
.tree ul.vertical-tree li {
    position: relative;
}

/* Draw a line connecting stacks?
   Actually, standard vertical tree is just a line down the middle.
*/
.tree ul.vertical-tree li::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 20px;
    /* Connect to card top */
    border-left: 2px solid var(--primary);
    transform: translateX(-50%);
}

/* Connect stems between siblings?
   No, in a vertical stack, the parent has a line going DOWN through them?
   Or each LI connects to the one above?
   
   Better approach: A continuous vertical line from Parent.
*/

/* Let's try a simple visual stack with a line from parent dropping down */
.couple-card.has-vertical-children::after {
    height: 100%;
    /* Drop down through children? Difficult */
    /* Simplest: Small line to first child, then children connect to each other? */
}

/* Let's keep it simple: Just vertical stack with small lines */
.tree ul.vertical-tree {
    padding-top: 20px;
    /* Space from parent */
}

/* ===== OVERLAY TREE STYLE (Fix expanding pushing siblings) ===== */
.tree ul.overlay-tree {
    position: absolute;
    top: 100%;
    /* Push down right below parent */
    left: 50%;
    transform: translateX(-50%);
    /* Center strictly relative to parent */
    width: max-content;
    /* Allow full horizontal width */
    padding-top: 40px;
    /* Space for connector */
    z-index: 100;
    /* Ensure it floats ON TOP of other elements */
    display: flex;
    justify-content: center;
    /* Ensure children generate from center */
    border-radius: 10px;
}

/* Ensure the connector line extends far enough */
.tree ul.overlay-tree::before {
    height: 40px;
    /* Connect from parent bottom to this UL */
    top: 0;
    left: 50%;
    /* Ensure line is centered in the UL */
    transform: translateX(-50%);
}

/* Ensure parent LI has relative positioning for this to work */
.tree li {
    position: relative;
    /* This is already set in base styles, but good to verify */
}

/* Fix Root Alignment: Force the vertical connector of Gen 1 to match the visual center */
.tree li.root-node>ul::before {
    /* The UL::before is the vertical line dropping from Parent UL.
       Wait, structure is: LI (Root) > Card + UL.
       The vertical line is UL::before of Gen 2.
    */
}