/* ==========================================================================
   VIII. CONNECTIONS TAB (`#connections-tab`)
   ========================================================================== */

/* Layout for the three columns (Effects, Symptoms, Disorders lists) */
/* Uses shared .three-column class from "II. Shared Components/Utilities".
   The `mb-3` class for margin is also from Utilities.
*/

/* Search Inputs for each list */
/* #effectsListSearchInput, #symptomsListSearchInput, #disordersListSearchInput
   These IDs are targets for JavaScript.
   Their visual styling is handled by the shared .neumorphic-input class
   from "II. Shared Components/Utilities".
   The `mb-2` class for margin is also from Utilities.
*/

/* Container for lists of Effects, Symptoms, Disorders */
/* #effectsList, #symptomsList, #disordersList
   These IDs are targets for JavaScript to populate.
   They have inline styles for max-height and overflow.
   The .loading class from Shared Components is used for initial state.
*/

/* Stylized section numbers */
/* Mindstate: Simplified with solid color and minimal shadow */
.section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #6B8E23; /* Mindstate: Data green solid color */
    color: var(--color-white);
    border-radius: 50%; /* Keep circular */
    font-weight: 700;
    font-size: 1.1rem;
    margin-right: var(--spacing-sm);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Mindstate: Minimal shadow */
}

/* Disabled state for sections */
.tea-card.disabled {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

/* Mindstate: Simplified overlay without gradient */
.tea-card.disabled::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5); /* Mindstate: Simple white overlay */
    border-radius: 0; /* Mindstate: Sharp corners */
    z-index: 1;
}

.tea-card.disabled h3,
.tea-card.disabled .section-number {
    color: var(--color-text-light) !important;
}

.tea-card.disabled .section-number {
    background: #EBEBEB !important; /* Mindstate: Light gray solid color */
}

/* Badge styling within Effects, Symptoms, and Disorders lists on Connections Tab */
/* This provides specific styling for items (badges) in these selectable lists. */
/* Mindstate: Simplified badge styling with sharp corners and minimal shadows */
#effectsList .badge,
#symptomsList .badge,
#disordersList .badge {
    /* Base .badge styles from Shared apply first */
    transition: all 0.2s ease-in-out; /* Smoother transition for interactions */
    display: inline-block !important; /* Ensure proper block behavior for layout */
    width: 100%; /* Make badges take full width of their container (li or div) */
    white-space: normal !important; /* Allow text to wrap */
    text-align: left !important; /* Align text to the left */
    margin: var(--spacing-xs) 0 !important; /* Adjusted margin, 0 horizontal */
    padding: var(--spacing-sm) var(--spacing-md) !important; /* Consistent padding */
    background: #FFFFFF !important; /* Mindstate: White background */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; /* Mindstate: Minimal shadow */
    border: 1px solid #F4F4F4 !important; /* Mindstate: Light border */
    border-radius: 0 !important; /* Mindstate: Sharp corners */
    cursor: pointer; /* Indicate clickable */
    color: var(--color-text); /* Default text color */
    font-weight: 500;
}

/* Hover state for list items (badges) */
/* Combined hover for potential-connection-item and default items before selection */
#effectsList .badge:hover,
#symptomsList .badge:hover,
#disordersList .badge:hover {
    background: #F4F4F4 !important; /* Light gray background on hover */
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    border-color: #8B9187 !important; /* Medium gray border */
}

/* Specific styling for items based on connection potential (classes added by JS) */
/* Mindstate: Enhanced selected state with stronger visual feedback */
.selected-connection-item {
    background: #E8F5E8 !important; /* Mindstate: Light green background */
    color: #000000 !important; /* Mindstate: Black text for readability */
    border: 2px solid #6B8E23 !important; /* Mindstate: Thicker data green border */
    opacity: 1 !important;
    box-shadow: 0 3px 8px rgba(107, 142, 35, 0.2) !important; /* Mindstate: Subtle green shadow */
    transform: scale(1.02); /* Slightly more scale */
    order: -1; /* Move to top of list */
    font-weight: 600 !important; /* Bolder text */
    position: relative;
}

/* Add a selection indicator */
.selected-connection-item::before {
    content: '✓';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: #6B8E23; /* Green checkmark */
    font-weight: 700;
}

/* Maintain selected state on hover */
.selected-connection-item:hover {
    background: #D4E8D4 !important; /* Slightly darker green on hover */
    color: #000000 !important;
    border: 2px solid #5A7A1D !important; /* Darker border on hover */
    transform: scale(1.03);
    box-shadow: 0 4px 10px rgba(107, 142, 35, 0.3) !important;
}

.potential-connection-item { /* Items that can form a connection with the selected item */
    opacity: 1; /* Full opacity */
    border: 1px solid #EBEBEB !important; /* Mindstate: Light gray border */
    /* Default background and shadow from the base #effectsList .badge style */
    order: -1; /* Move to top of list */
}

/* Mindstate: Simplified hover state */
.potential-connection-item:hover {
    border-color: #6B8E23 !important; /* Mindstate: Data green border */
    background: #FAFAFA !important; /* Mindstate: Very light gray */
    transform: translateY(-1px); /* Slight lift */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important; /* Mindstate: Subtle shadow */
}

.no-potential-connection { /* Items that cannot form a connection */
    opacity: var(--opacity-connection-no-potential, 0.4); /* Use semantic variable or fallback */
    border: 1px solid transparent !important; /* No distinct border */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; /* Mindstate: Minimal shadow */
    cursor: default; /* Not clickable in this state */
    order: 1; /* Move to bottom of list */
}

.no-potential-connection:hover {
    opacity: var(--opacity-connection-no-potential, 0.4); /* Maintain opacity on hover */
    transform: none; /* No transform on hover */
    /* Keep existing shadow from .no-potential-connection */
    background: #FFFFFF !important; /* Mindstate: Keep white background */
}


/* Connection Details Area */
/* The parent .card styles from Shared apply to the container. */
#connectionDetails {
    /* Container for displaying details of selected connections */
    /* min-height: 100px; /* Example, ensure it has some height */
}

#connectionDetails .text-muted { /* Placeholder text styling */
    /* Shared .text-muted styles apply */
}

#connectionDetails h4 { /* Main heading for the details section */
    color: #000000; /* Mindstate: Pure black */
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid #8B9187; /* Mindstate: Medium gray underline */
    letter-spacing: -0.02em; /* Mindstate: Tighter letter spacing */
}

#connectionDetails h5 { /* Sub-headings (e.g., "Related Symptoms") */
    color: #000000; /* Mindstate: Pure black */
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

#connectionDetails h5::before { /* Decorative accent for h5 */
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px; /* Match approx line height */
    background: #6B8E23; /* Mindstate: Data green */
    border-radius: 0; /* Mindstate: Sharp corners */
}

#connectionDetails p {
    line-height: 1.8; /* More spacious line height for readability */
    color: #3B3B3B; /* Mindstate: Dark gray for body text */
    margin-bottom: var(--spacing-sm); /* Space between paragraphs */
}

#connectionDetails strong {
    color: #000000; /* Mindstate: Pure black for emphasis */
}

/* Mindstate: Simplified section wrappers without gradients or inset shadows */
#connectionDetails > div { /* Direct div children as section wrappers */
    background: #FAFAFA; /* Mindstate: Very light gray */
    padding: var(--spacing-lg);
    border-radius: 0; /* Mindstate: Sharp corners */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Mindstate: Minimal shadow */
    border: 1px solid #F4F4F4; /* Mindstate: Light border */
    margin-bottom: var(--spacing-md); /* Space between sections */
}
#connectionDetails > div:last-child {
    margin-bottom: 0;
}


#connectionDetails .two-column { /* If .two-column layout is used within details */
    /* Reset any specific card-like styling if it's just a layout */
    background: none;
    box-shadow: none;
    padding: 0;
    border: none; /* Mindstate: Also remove border */
    /* Gap is inherited from shared .two-column */
}