/**
 * TimeArc Visualization - Main Stylesheet
 * 
 * This stylesheet contains all custom styles for the TimeArc visualization,
 * which displays Principal Investigator (PI) collaborations across proposals over time.
 * 
 * Layout Structure:
 * - Global body styles
 * - Tooltip component styles
 * - Chart visualization styles (grid, axes, labels)
 * - Interactive elements (hover effects, transitions)
 * - Filter controls and UI components
 */

/* ============================================
   GLOBAL STYLES
   ============================================ */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8fafc;
}

/* ============================================
   SELECT2 CUSTOMIZATION
   Style Select2 dropdown to match the design
   ============================================ */

.select2-container--default .select2-selection--single {
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    height: 34px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    color: #1e293b;
    font-size: 0.875rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
}

.select2-dropdown {
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #3b82f6;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

/* ============================================
   TOOLTIP COMPONENT
   Displays detailed information when hovering over proposals or PI labels
   ============================================ */

#tooltip {
    position: absolute;
    text-align: left;
    padding: 12px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #cbd5e1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    pointer-events: none;
    /* Prevents tooltip from blocking mouse events */
    opacity: 0;
    /* Hidden by default, shown via JavaScript */
    transition: opacity 0.2s;
    z-index: 50;
    max-width: 450px;
    color: #1e293b;
}

/* Tooltip header styling */
#tooltip h4 {
    margin: 0 0 8px 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 4px;
}

/* Tooltip data table */
#tooltip table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 12px;
}

#tooltip th,
#tooltip td {
    text-align: right;
    padding: 4px 8px;
    border-bottom: 1px solid #f1f5f9;
}

/* Left-align first column (PI names) */
#tooltip th:first-child,
#tooltip td:first-child {
    text-align: left;
}

#tooltip th {
    font-weight: 600;
    color: #64748b;
    background-color: #f8fafc;
}

/* ============================================
   CHART VISUALIZATION STYLES
   D3.js rendered elements
   ============================================ */

/* Grid lines for time axis */
.grid-line {
    stroke: #e2e8f0;
    stroke-dasharray: 4;
}

/* Axis labels and text */
.axis-text {
    font-size: 12px;
    fill: #475569;
}

/* Principal Investigator name labels on Y-axis */
.pi-label {
    font-size: 11px;
    fill: #334155;
    cursor: pointer;
    transition: fill 0.2s, font-weight 0.2s, opacity 0.2s;
}

.pi-label:hover {
    fill: #0f172a;
    font-weight: bold;
}

/* ============================================
   PROPOSAL VISUALIZATION ELEMENTS
   Curved arcs connecting PIs in the same proposal
   ============================================ */

/* Curved arc connecting PIs in a single proposal */
.proposal-arc {
    fill: none;
    stroke-width: 3px;
    transition: stroke-width 0.2s, stroke-opacity 0.2s;
    cursor: pointer;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Circular nodes at PI positions along the proposal arc */
.proposal-node {
    transition: r 0.2s, stroke-width 0.2s;
    cursor: pointer;
}

/* ============================================
   HOVER EFFECTS & INTERACTIONS
   Visual feedback for user interaction
   ============================================ */

/* Enlarge proposal arc on hover */
.proposal-arc:hover {
    stroke-width: 5px !important;
    stroke-opacity: 1 !important;
}

/* Enlarge nodes on hover */
.proposal-node:hover {
    r: 7px;
    stroke-width: 3px;
}

/* ============================================
   DIMMING EFFECT
   Highlights focused proposal while dimming others
   ============================================ */

/* Dim all proposal arcs when any element is being hovered */
.chart-container:hover .proposal-arc {
    opacity: 0.2;
}

/* Keep hovered arc fully visible */
.chart-container:hover .proposal-arc:hover {
    opacity: 1;
}

/* Keep arcs in same group visible when hovering node */
.chart-container:hover .proposal-node:hover~.proposal-arc,
.chart-container:hover .proposal-group:hover .proposal-arc {
    opacity: 1;
}

/* Dim all nodes when any element is being hovered */
.chart-container:hover .proposal-node {
    opacity: 0.2;
}

/* Keep hovered node fully visible */
.chart-container:hover .proposal-node:hover {
    opacity: 1;
}

/* Keep nodes in same group visible */
.chart-container:hover .proposal-group:hover .proposal-node {
    opacity: 1;
}

/* ============================================
   PI LABEL HIGHLIGHT EFFECTS
   Applied when hovering over PI names
   ============================================ */

/* Highlight proposals involving the hovered PI */
.proposal-group.highlighted {
    opacity: 1 !important;
}

/* Dim proposals not involving the hovered PI */
.proposal-group.dimmed {
    opacity: 0.05 !important;
}