/* --- Historical Education Network (HEN) theme --- */
:root {
    --hen-primary: #3a6ea5;
    --hen-secondary: #004e98;
    --hen-accent: #ff9f1c;
    --hen-light: #f5f5f5;
    --hen-dark: #333;
    --hen-success: #28a745;
    --hen-radius: 8px;
    --hen-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.hen-page {
    background: #f5f5f5;
    color: var(--hen-dark);
    line-height: 1.6;
}

/* top title */
.hen-title {
    font-weight: 700;
    margin: 12px 0 16px;
}

/* search container (white card) */
.hen-search {
    background: #fff;
    padding: 2rem;
    border-radius: var(--hen-radius);
    box-shadow: var(--hen-shadow);
    margin-bottom: 2rem;
}

/* tab strip */
.hen-tabs {
    display: flex;
    gap: 24px;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #ddd;
}

.hen-tab {
    padding: .75rem 1.25rem;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: .2s;
    color: #555;
    font-weight: 600;
}

    .hen-tab.hen-active {
        border-bottom-color: var(--hen-primary);
        color: var(--hen-primary);
    }

/* form fields */
.hen-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
}

.hen-label {
    margin-bottom: .5rem;
    font-weight: 600;
}

.hen-input, .hen-select {
    padding: .75rem;
    border: 1px solid #ddd;
    border-radius: var(--hen-radius);
}

    .hen-input:focus, .hen-select:focus {
        outline: none;
        border-color: var(--hen-primary);
    }

.hen-btn {
    padding: .75rem 1.25rem;
    border: none;
    border-radius: var(--hen-radius);
    background: var(--hen-primary);
    color: #fff;
    font-weight: 600;
}

    .hen-btn:hover {
        background: var(--hen-secondary);
    }

/* results + graph layout */
.hen-results {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 2fr;
}

.hen-card {
    background: #fff;
    border-radius: var(--hen-radius);
    box-shadow: var(--hen-shadow);
}

    .hen-card h2 {
        font-size: 1.25rem;
        margin: 0;
    }

.hen-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #eee;
    font-weight: 700;
}

.hen-card-body {
    padding: 1.25rem;
}

.hen-list {
    height: 600px;
    overflow: auto;
}

.hen-item {
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

    .hen-item:hover {
        background: #fafafa;
    }

    .hen-item h3 {
        color: var(--hen-primary);
        font-size: 1.05rem;
        margin: 0 0 .25rem;
    }

.hen-small {
    color: #777;
    font-size: .9rem;
}

/* graph panel */
#graphArea {
    height: 600px;
    border: 1px solid #eee;
    border-radius: var(--hen-radius);
    background: #fff;
}

/* select2 alignment */
.select2-container--default .select2-selection--single {
    height: 48px; /* match .hen-input height */
    padding: 0.6rem 0.75rem; /* align text vertically */
    border: 1px solid #ddd;
    border-radius: var(--hen-radius);
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection__rendered {
    line-height: 1.6;
    font-size: 1rem;
}

.select2-container--default .select2-selection__arrow {
    top: 10px; /* center arrow vertically */
}

/* responsive */
@media (max-width: 991px) {
    .hen-results {
        grid-template-columns: 1fr;
    }

    #graphArea {
        height: 480px;
    }
}
/* graph tooltip */
.hen-tooltip {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    padding: .5rem .75rem;
    font-size: .9rem;
    opacity: 0;
    transition: opacity .08s;
}

    .hen-tooltip h4 {
        margin: 0 0 .25rem;
        font-size: 1rem;
        color: #3a6ea5;
    }

    .hen-tooltip .muted {
        color: #777;
        font-size: .85rem;
    }

.person-row {
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.2s;
}

    .person-row:hover {
        background-color: #f5f5f5;
    }

    .person-row.selected {
        background-color: #dbeafe; /* light blue highlight */
        border-left: 4px solid #3a6ea5;
    }