/*
 * WP Family Tree - Display Component Styles
 * (Person Detail, Common Ancestor, Search Results, Person Management)
 */

/* --- Person Detail Styles --- */
.wpft-person-detail { margin-bottom: 20px; font-size: 1rem; }
.wpft-person-detail h2 { font-size: 1.8em; color: #333; border-bottom: 2px solid #eee; padding-bottom: 10px; margin-bottom: 20px; }
.wpft-person-table { width: 100%; border-collapse: collapse; margin-bottom: 25px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.wpft-person-table th, .wpft-person-table td { border: 1px solid #e7e7e7; padding: 10px 12px; text-align: left; vertical-align: top; font-size: 1em; background-color: #f9f9f9; }
.wpft-person-table th { background-color: #f1f1f1 !important; width: 20%; font-weight: bold; color: #444; }
.wpft-person-table ul { margin: 0; padding-left: 18px; list-style-type: disc; }
.wpft-person-table ul li { margin-bottom: 4px; }
.wpft-person-table ul li a { text-decoration: none; color: #0073aa; }
.wpft-person-table ul li a:hover { text-decoration: underline; }
.wpft-person-avatar{ margin-bottom: 20px; text-align: center;  max-width: 120px;}
.wpft-person-avatar img { max-width: 120px; height: auto; border-radius: 50%; border: 3px solid #f0f0f0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.wpft-detail-tree-container { margin-left: 5px; } /* This is for a D3 tree inside person detail, belongs in style-trees.css if it's the same as main D3 tree */

/* Life Photos Gallery */
.wpft-life-photos-gallery { margin-top: 20px; margin-bottom: 20px; }
.wpft-life-photos-gallery h4 { font-size: 1.2em; margin-bottom: 10px; color: #444; border-bottom: 1px solid #eee; padding-bottom: 5px;}
.wpft-life-photos-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.wpft-life-photo-item { width: 100px; height: 100px; overflow: hidden; border: 1px solid #ddd; border-radius: 3px; background-color: #f9f9f9; }
.wpft-life-photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease-in-out; }
.wpft-life-photo-item a:hover img { transform: scale(1.05); }


/* --- Common Ancestor / Search Result Styles --- */
.wpft-common-ancestor-result,
.wpft-person-search-result { margin-top: 20px; padding: 15px; border: 1px solid #eee; background-color: #f9f9f9; border-radius: 3px; }
#wpft_search_term { padding: 8px 10px; border: 1px solid #ccc; border-radius: 3px; margin-right: 10px; min-width: 200px; box-shadow: inset 0 1px 2px rgba(0,0,0,.07); }

/* --- Person Management Styles --- */
.wpft-person-management-container { margin-bottom: 20px; }

/* --- Person Detail Page Layout & Style Enhancements --- */

/* 1. Constrain the main container width and center it */
.wpft-person-detail {
    max-width: 100%;  /* Set a maximum width for better readability */
    margin: 20px auto; /* Center the container on the page */
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    background-color: #ffffff;
}

/* 2. Refine the details table for a cleaner look */
.wpft-person-table th {
    width: 120px; /* Give labels a fixed width */
    background-color: #f8f9fa !important; /* A lighter, modern header color */
    font-weight: 600; /* Slightly bolder */
    color: #495057;
}
.wpft-person-table td {
    background-color: #ffffff !important; /* Clean white background for content */
}

/* 3. Add some space above the relationship tree */
.wpft-person-detail h3 {
    margin-top: 30px;
}

/* 4. Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .wpft-person-detail {
        padding: 15px;
        margin: 15px auto;
        border: none;
        box-shadow: none;
    }
    .wpft-person-table th {
        width: 100px; /* Slightly narrower label on mobile */
    }
}