/**
 * InfoModal Content Styling
 * Styles for modal content rendered from Django templates
 */

/* Main tooltip content container */
.tooltip-content {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Tooltip title */
.tooltip-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--bs-heading-color, #2c3e50);
}

/* Tooltip description (lead paragraph) */
.tooltip-description {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
    color: var(--bs-body-color, #4a5568);
}

/* Tooltip sections */
.tooltip-section {
    margin-bottom: 1.5rem;
}

.tooltip-section h6 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--bs-primary, #666cff);
}

/* Compact metrics list */
.compact-metrics-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Individual metric item */
.metric-item {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.metric-name {
    font-weight: 600;
    min-width: fit-content;
    flex-shrink: 0;
    color: var(--bs-emphasis-color, #1a202c);
}

.metric-description {
    color: var(--bs-secondary-color, #6c757d);
}

/* Info icon trigger styling */
[data-infomodal] {
    cursor: pointer;
    transition: color 0.2s ease;
}

[data-infomodal]:hover {
    color: var(--bs-primary, #666cff);
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
    .tooltip-title {
        color: var(--bs-heading-color, #e2e8f0);
    }

    .tooltip-description {
        color: var(--bs-body-color, #cbd5e0);
    }

    .metric-name {
        color: var(--bs-emphasis-color, #f7fafc);
    }

    .metric-description {
        color: var(--bs-secondary-color, #a0aec0);
    }
}