/**
 * Family Chart Custom Styles
 * Custom styling for the family-chart library
 */

/* Container */
#familyChartContainer {
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 120px);
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
    overflow: hidden;
}

#familyChartContainer svg {
    width: 100%;
    height: 100%;
}

/* Card container */
.card_cont {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.card_cont:hover {
    filter: brightness(1.02);
}

/* Card base styling - target all rect elements for background */
.card_cont .card rect {
    fill: #ffffff;
    stroke: #d0d5dd;
    stroke-width: 1px;
    rx: 8;
    ry: 8;
}

/* Hover effect on cards */
.card_cont:hover .card rect {
    stroke: #0d6efd;
    stroke-width: 2px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

/* Gender-based card colors */
.card.card-male rect {
    fill: #e7f3ff !important;
    stroke: #90caf9 !important;
}

.card.card-female rect {
    fill: #ffeef3 !important;
    stroke: #f48fb1 !important;
}

/* Nested elements too */
.card.card-male .card_inner rect,
.card.card-male .card-inner rect {
    fill: #e7f3ff !important;
}

.card.card-female .card_inner rect,
.card.card-female .card-inner rect {
    fill: #ffeef3 !important;
}

/* Card text styling */
.card_cont .card text,
.card_cont .card tspan,
.card-text text,
.card-text tspan {
    fill: #1a1a2e !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    font-size: 13px;
    font-weight: 500;
}

/* Name text (first line) - make it bolder */
.card-text text:first-of-type tspan:first-of-type,
.card-text tspan:first-of-type {
    font-weight: 600;
    font-size: 14px;
}

/* Secondary info text (dates) */
.card-text text:last-of-type,
.card-text tspan:nth-child(n+2) {
    font-size: 11px;
    fill: #6c757d !important;
    font-weight: 400;
}

/* Main/selected card highlight */
.card_cont.main .card rect {
    stroke: #0d6efd !important;
    stroke-width: 3px !important;
}

.card_cont.main {
    filter: drop-shadow(0 6px 12px rgba(13, 110, 253, 0.25));
}

/* Avatar/image styling */
.card image,
.card .card_img image {
    clip-path: circle(50%);
}

/* Connection lines */
.links_view .link,
.link path,
path.link {
    stroke: #b0b8c4;
    stroke-width: 2px;
    fill: none;
}

/* Ghost cards for edit mode (add relative buttons) */
.card_add_cont .card rect {
    fill: #f8f9fa !important;
    stroke: #dee2e6 !important;
    stroke-dasharray: 5, 5;
}

.card_add_cont:hover .card rect {
    fill: #e9ecef !important;
    stroke: #0d6efd !important;
}

.card_add_cont .card text {
    fill: #6c757d !important;
}

/* Loading overlay */
.tree-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 120px);
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.loading-overlay.d-none {
    display: none !important;
}

/* Edit mode styling */
#familyChartContainer.edit-mode .card_cont {
    cursor: pointer;
}

#familyChartContainer.edit-mode .card_cont:hover .card rect {
    stroke: #198754;
    stroke-width: 2px;
}

/* Empty state */
.tree-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6c757d;
    padding: 2rem;
    text-align: center;
}

.tree-empty i {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #adb5bd;
}

.tree-empty p {
    font-size: 1.1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #familyChartContainer {
        min-height: calc(100vh - 150px);
    }

    .card_cont .card text,
    .card-text text,
    .card-text tspan {
        font-size: 11px;
    }
}

/* Print styles */
@media print {
    #familyChartContainer {
        background: white;
    }

    .loading-overlay {
        display: none !important;
    }
}