/* --- MODIFIED FILE: assets/css/style-trees.css --- */
/*
 * WP Family Tree - Tree Component Styles
 * (D3 Tree, Lineage Table, Pedigree Chart)
 */

/* --- General Tree Search Controls --- */
.wpft-tree-search-controls,
.wpft-lineage-search-controls, /* Lineage table general search controls */
.wpft-pedigree-chart-controls { /* Pedigree chart general search controls */
    margin-bottom: 15px; 
    padding: 10px; 
    background-color: #f8f9fa; 
    border: 1px solid #dee2e6;
    border-radius: 4px;  
    display: flex; /* --- MODIFIED --- Changed from inline-flex to flex for better control */
    align-items: center; 
    gap: 8px;
    position: relative; /* --- MODIFIED --- Changed from fixed to relative */
    z-index: 2;
}
.wpft-tree-search-select,
.wpft-lineage-search-select,
.wpft-pedigree-person-select {
    min-width: 200px;
    width: 100% !important;
    height: 36px;
    box-sizing: border-box;
}
.wpft-tree-search-controls .select2-container--default .select2-selection--single,
.wpft-lineage-search-controls .select2-container--default .select2-selection--single,
.wpft-pedigree-chart-controls .select2-container--default .select2-selection--single {
    height: 36px; border: 1px solid #ced4da; border-radius: 3px;
}
.wpft-tree-search-controls .select2-container--default .select2-selection--single .select2-selection__rendered,
.wpft-lineage-search-controls .select2-container--default .select2-selection--single .select2-selection__rendered,
.wpft-pedigree-chart-controls .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px; padding-left: 10px;
}
.wpft-tree-search-controls .select2-container--default .select2-selection--single .select2-selection__arrow,
.wpft-lineage-search-controls .select2-container--default .select2-selection--single .select2-selection__arrow,
.wpft-pedigree-chart-controls .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
}
.wpft-tree-search-button,
.wpft-lineage-search-button,
.wpft-pedigree-generate-button {
    flex-shrink: 0; height: 36px; line-height: 34px; padding: 0 15px !important;background-color: #1be0d4;
}

/* --- D3 Tree Styles --- */
.wpft-tree-container { /* Also used by person-detail tree */
    width: 100%; height: auto; overflow: hidden; border: 1px solid #ccc; background-color: #f9f9f9; position: relative; cursor: grab; border-radius: 0; box-shadow: none;
}
.wpft-tree-container:active { cursor: grabbing; }
.wpft-tree-container svg { display: block; font-family: sans-serif; background-color: #f9f9f9;min-height: 400px;}
.wpft-tree-container .link { fill: none; stroke: #0ae40a; stroke-width: 3px; }
.wpft-tree-container .node { cursor: pointer; }
.wpft-tree-container .node rect { stroke: #18d218; stroke-width: 1px; fill: #18d218; rx: 3px; ry: 3px; transition: fill 0.2s ease, stroke 0.2s ease; }
.wpft-tree-container .node:hover rect { fill: #03c8d4; stroke: #03c8d4; }
.wpft-tree-container .node rect { 
    stroke: #18d218; 
    stroke-width: 1px; 
    fill: #18d218; /* 默认/男性颜色 */
    rx: 3px; 
    ry: 3px; 
    transition: fill 0.2s ease, stroke 0.2s ease; 
}

/* 新增：女性节点的颜色 (这将覆盖上面的默认颜色) */
.wpft-tree-container .node.node--female rect {
    fill: #ff85b4; /* 粉红色填充 */
    stroke: #e11d74; /* 稍深的粉红色边框 */
}

.wpft-tree-container .node:hover rect { 
    fill: #03c8d4; /* 默认/男性悬停颜色 */
    stroke: #03c8d4; 
}

/* 新增：女性节点的悬停颜色 (覆盖默认悬停颜色) */
.wpft-tree-container .node.node--female:hover rect {
    fill: #f73788; /* 更亮的粉红色 */
    stroke: #f73788;
}
.wpft-tree-container .node--virtual rect { fill: #e0e0e0; stroke: #a0a0a0; }
.wpft-tree-container .node text.node-text { font-size: 18px !important; fill: #fff; pointer-events: none; }
.wpft-tree-container .node text.char-text { text-anchor: middle; dominant-baseline: central; }
.wpft-tree-container .node--virtual text.virtual-text { font-weight: bold; fill: #555; text-anchor: middle; dominant-baseline: middle; }
.wpft-tree-container .node a { text-decoration: none; color: inherit; }
.wpft-tree-container .node.node--focused rect { fill: #03c8d4 !important; stroke: #cc0000 !important; stroke-width: 2px !important; }
.wpft-tree-container .node.node--focused text { fill: #c00 !important; font-weight: bold; }

/* --- MODIFICATION START: D3 Tree Generation Labels --- */
.wpft-tree-container .generation-labels .generation-label-text {
    font-size: 60px;
    font-weight: bold;
    fill: #6c757d; /* A neutral gray color */
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none; /* So they don't interfere with zoom/pan */
}
/* --- MODIFICATION END --- */


/* --- Lineage Table Specific --- */
/* --- REMOVED --- The fixed positioning styles for .wpft-lineage-search-controls have been removed. */
/* The general styles at the top of the file now apply, placing it in the normal document flow. */

.wpft-lineage-table-container { 
    /* --- REMOVED --- The padding-top is no longer needed as the search bar is not fixed. */
    padding-top: 0; 
}
.wpft-lineage-table-container .wpft-lineage-node.lineage-node--focused rect { fill: #ffcccc !important; stroke: red !important; stroke-width: 2px !important; }
.wpft-lineage-table-container .wpft-lineage-node.lineage-node--focused text { fill: #c00 !important; font-weight: bold !important; }
/* SVG styles for lineage table are generated by PHP in class-wpft-lineage-table.php:render_lineage_svg */

/* --- Pedigree Chart Styles --- */
.wpft-pedigree-chart-controls .wpft-form-group { /* Specific to pedigree controls layout if needed */
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wpft-pedigree-chart-controls label {
    margin-bottom: 0;
    font-size: 0.95em;
    color: #555;
    white-space: nowrap;
}
.wpft-pedigree-generations-input {
    width: 70px !important;
    padding: 8px !important;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.wpft-pedigree-chart-container {
    background-color: #ffffff;
    overflow: auto;
}
.wpft-pedigree-chart-container svg {
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.wpft-pedigree-chart-container .generation-labels text.generation-label-text {
    font-size: 13px;
    font-weight: bold;
    fill: #6c757d;
    text-anchor: middle;
}

.wpft-pedigree-chart-container .pedigree-node .node-rect {
    fill: #f8f9fa;
    stroke: #ced4da;
    stroke-width: 1px;
    rx: 8px;
    ry: 8px;
    filter: drop-shadow(0px 2px 3px rgba(0,0,0,0.1));
}
.wpft-pedigree-chart-container .pedigree-node.node-gender-男 .node-rect {
    fill: #e7f3ff;
    stroke: #b0d5f9;
}
.wpft-pedigree-chart-container .pedigree-node.node-gender-女 .node-rect {
    fill: #ffe7f0;
    stroke: #ffb0d5;
}
.wpft-pedigree-chart-container .pedigree-node:hover .node-rect {
    fill: #e2e6ea;
    stroke: #adb5bd;
}

.wpft-pedigree-chart-container .pedigree-node text {
    pointer-events: none;
    fill: #212529;
}
.wpft-pedigree-chart-container .pedigree-node .node-name {
    font-size: 14px;
    font-weight: 600;
    fill: #0056b3;
}
.wpft-pedigree-chart-container .pedigree-node .node-birth,
.wpft-pedigree-chart-container .pedigree-node .node-death {
    font-size: 11px;
    fill: #495057;
}

.wpft-pedigree-chart-container .pedigree-link {
    fill: none;
    stroke: #adb5bd;
    stroke-width: 1.5px;
}

.wpft-pedigree-chart-container .pedigree-node.node--focused .node-rect {
    stroke: #fd7e14 !important;
    stroke-width: 2.5px !important;
    fill: #fff3e0 !important;
}

/* --- 新增/修改开始: 调整垂丝图控件布局 --- */
.wpft-pedigree-chart-controls {
    flex-direction: column; /* 将主轴方向改为垂直 */
    align-items: stretch;   /* 让子项在交叉轴上拉伸以填充容器宽度 */
}

.wpft-pedigree-chart-controls .wpft-form-group {
    width: 100%; /* 确保每个组都占满一行 */
}

/* 让代数输入框和标签在一行内对齐 */
.wpft-pedigree-chart-controls .wpft-form-group:nth-child(2) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:20%;
}

/* 让生成按钮占满整行宽度 */
.wpft-pedigree-chart-controls .wpft-form-group button.wpft-pedigree-generate-button {
    width: 100%;
}
/* --- 新增/修改结束 --- */