/* Custom override for OrgChart */
#tree-container {
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scrolling */
    text-align: center; /* Center initial view */
}

.orgchart {
    background: none;
    padding-top: 20px;
    display: inline-block; /* Allow it to expand */
    min-width: max-content; /* Ensure it takes full width */
}

/* -------------------------------------------------------------------------- */
/*                                Virtual Root                                */
/* -------------------------------------------------------------------------- */
/* Visually hide the virtual root node but keep it for structure if needed */
/* Or style it minimally if user changes mind. User said "remove that family name card in UI" */

.orgchart .node.family-root .title,
.orgchart .node.family-root .content {
    display: none !important;
}

/* We target the rendered card inside the node */
.family-root-card {
    display: none !important;
}

/* Hack to hide the physical space of the root and lines pointing to it? 
   If we just hide the content, the lines might look weird coming from "nothing".
   For OrgChart JS, usually the root must exist. 
   We can make the root "invisible point" and lines expand from it.
*/
.orgchart .node.family-root {
    visibility: hidden; /* Hide the element but keep space? No, height 0 */
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0;
}

/* -------------------------------------------------------------------------- */
/*                                Node Styling                                */
/* -------------------------------------------------------------------------- */

/* Reset default node styles */
.orgchart .node {
    width: auto !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Hide default title/content if they still generate */
.orgchart .node > .title,
.orgchart .node > .content {
    display: none !important;
}

/* -------------------------------------------------------------------------- */
/*                                Member Card                                 */
/* -------------------------------------------------------------------------- */

.member-card {
    background: #ffffff;
    border: 0; /* No default border */
    border-top: 4px solid #cbd5e1; /* Default/Unknown neutral color */
    border-radius: 12px;
    width: 160px; /* Slightly wider */
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin: 10px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-bottom: 12px;
    transition: all 0.3s ease;
}

.member-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Gender Accents */
.member-card.male {
    border-top-color: #3b82f6; /* Blue 500 */
}

.member-card.female {
    border-top-color: #ec4899; /* Pink 500 */
}
.member-card.deceased {
    border-top-color: #64748b; /* Slate 500 */
    filter: grayscale(0.8);
}

/* Avatar */
.member-card .avatar-wrapper {
    margin-top: 15px;
    margin-bottom: 8px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #f1f5f9; /* Slate 100 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.member-card .avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Typography */
.member-card .name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1e293b; /* Slate 800 */
    padding: 2px 8px;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.member-card .role {
    color: #64748b; /* Slate 500 */
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-top: 2px;
    margin-bottom: 8px;
    text-align: center;
}

/* -------------------------------------------------------------------------- */
/*                              Action Buttons                                */
/* -------------------------------------------------------------------------- */

.member-card .action-buttons {
    margin-top: auto;
    opacity: 0; /* Hidden by default */
    transform: translateY(10px);
    transition: all 0.2s ease-in-out;
}

.member-card:hover .action-buttons {
    opacity: 1;
    transform: translateY(0);
}

.btn-icon-circle {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 4px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    transition: all 0.2s;
}

.btn-icon-circle:hover.btn-edit {
    background-color: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.btn-icon-circle:hover.btn-delete {
    background-color: #ef4444;
    color: white;
    border-color: #ef4444;
}

/* -------------------------------------------------------------------------- */
/*                                Connectors                                  */
/* -------------------------------------------------------------------------- */

.couple-container {
    display: inline-flex;
    align-items: center;
    position: relative;
    background: #f8fafc; /* Subtle unification background? Optional */
    border-radius: 16px;
    padding: 5px;
    margin: 0px 10px;
    border: 1px dashed #e2e8f0;
}

/* Connector Line Logic handled by OrgChart SVG mainly, but for couples: */
.couple-connector {
    width: 20px;
    height: 2px;
    background-color: #cbd5e1;
    margin: 0 -5px; /* Overlap slightly if needed */
    z-index: 0;
}