/* Family Navigator Graph — Sidebar Styles
 *
 * Uses the same class names as the full-diagram plugin so that
 * a single theme override applies to both visualizations.
 * The graph renders inline — no viewport, no zoom, no borders.
 */

/* ── Sidebar container — seamless, no viewport ── */
.wt-sidebar-family-nav-graph {
    padding: 0;
}

.fng-container {
    position: relative;
}

.fng-container .full-diagram-chart svg {
    width: 100%;
    display: block;
}

/* ── Person cards (SVG) — shared with full-diagram ── */
.person-card rect {
    fill: #e8e8e8;
    stroke: #b0b0b0;
    stroke-width: 1;
}

.person-card.sex-m rect {
    fill: #d4e6f9;
    stroke: #7bafd4;
}

.person-card.sex-f rect {
    fill: #f9d4e6;
    stroke: #d47ba8;
}

.person-card.is-root rect {
    stroke: #495057;
    stroke-width: 2.5;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
}

.person-card:hover rect {
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.15));
}

/* Photo placeholder */
.person-card .photo-placeholder {
    fill: #ddd;
    stroke: none;
}

.person-card.sex-m .photo-placeholder {
    fill: #b8d4ed;
}

.person-card.sex-f .photo-placeholder {
    fill: #edb8d4;
}

.person-card .silhouette {
    fill: rgba(255, 255, 255, 0.6);
}

/* Card text */
.person-card .person-name {
    font-size: 10.5px;
    font-weight: 600;
    fill: #212529;
    dominant-baseline: auto;
}

.person-card .person-dates {
    font-size: 9px;
    fill: #6c757d;
    dominant-baseline: auto;
}

/* ── Connector lines — shared with full-diagram ── */
.link {
    fill: none;
    stroke: #adb5bd;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.couple-link {
    stroke: #868e96;
}

.ancestor-link {
    stroke: #adb5bd;
}

.descendant-link {
    stroke: #adb5bd;
}

/* ── More ancestors / descendants indicators — shared with full-diagram ── */
.more-ancestors-indicator rect,
.more-descendants-indicator rect {
    fill: #dee2e6;
    stroke: #adb5bd;
    stroke-width: 1;
}

.more-ancestors-indicator line,
.more-descendants-indicator line {
    stroke: #adb5bd;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.person-card.sex-m .more-ancestors-indicator rect,
.person-card.sex-m .more-descendants-indicator rect {
    fill: #c4d9f0;
    stroke: #7bafd4;
}

.person-card.sex-f .more-ancestors-indicator rect,
.person-card.sex-f .more-descendants-indicator rect {
    fill: #f0c4d9;
    stroke: #d47ba8;
}