/* Detailed Sections - Styles for article detail panel content */
/* WP06: Enhanced content rendering for processed article metadata */

/* =============================================================================
   TECHNICAL INDICATORS BASE STYLES
   ============================================================================= */

.indicator-section {
    margin-bottom: 1rem;
}

.indicator-section:last-child {
    margin-bottom: 0;
}

.indicator-section h4 {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin: 0 0 0.5rem 0;
}

.indicator-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.indicator-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    border-left: 3px solid var(--color-primary-500);
}

[data-theme="dark"] .indicator-item {
    background: rgba(255, 255, 255, 0.03);
}

/* CVE-specific styling (red border) */
.indicator-item.cve {
    border-left-color: #ef4444;
}

/* Technique styling (orange border) */
.indicator-item.technique {
    border-left-color: #f59e0b;
}

/* Domain/IP styling (purple border) */
.indicator-item.domain,
.indicator-item.ip {
    border-left-color: #8b5cf6;
}

/* File indicator styling (blue border) */
.indicator-item.file {
    border-left-color: #3b82f6;
}

/* System styling (red border) */
.indicator-item.system {
    border-left-color: #ef4444;
}

/* =============================================================================
   ENHANCED IMPACT SECTION (Object Format)
   ============================================================================= */

.impact-analysis-enhanced {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.impact-subsection {
    padding: 0.875rem;
    border-radius: 0.75rem;
    background: var(--color-bg-elevated);
    border-left: 3px solid transparent;
}

.impact-subsection.immediate {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.impact-subsection.long-term {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

.impact-subsection.affected-parties {
    border-left-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

[data-theme="dark"] .impact-subsection.immediate {
    background: rgba(239, 68, 68, 0.1);
}

[data-theme="dark"] .impact-subsection.long-term {
    background: rgba(245, 158, 11, 0.1);
}

[data-theme="dark"] .impact-subsection.affected-parties {
    background: rgba(59, 130, 246, 0.1);
}

.impact-subsection-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.impact-subsection-icon {
    font-size: 0.875rem;
}

.impact-subsection.immediate .impact-subsection-icon {
    color: #ef4444;
}

.impact-subsection.long-term .impact-subsection-icon {
    color: #f59e0b;
}

.impact-subsection.affected-parties .impact-subsection-icon {
    color: #3b82f6;
}

.impact-subsection-title {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.impact-subsection-text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-primary);
    margin: 0;
}

/* Affected parties list */
.affected-parties-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.affected-party-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
}

.affected-party-item::before {
    content: "•";
    color: #3b82f6;
    font-weight: bold;
}

/* =============================================================================
   KEY EVENTS SECTION (Timeline Style)
   ============================================================================= */

.key-events-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 1.5rem;
}

/* Vertical timeline line */
.key-events-timeline::before {
    content: '';
    position: absolute;
    left: 0.375rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: linear-gradient(
        180deg,
        var(--color-primary-500) 0%,
        var(--color-primary-300) 100%
    );
    border-radius: 1px;
}

.key-event-item {
    position: relative;
    padding: 0.75rem 0;
    padding-left: 1rem;
}

/* Timeline dot */
.key-event-item::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 1rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary-500);
    border: 2px solid var(--color-bg-primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.key-event-text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-primary);
    margin: 0;
}

/* =============================================================================
   UNANSWERED QUESTIONS SECTION
   ============================================================================= */

.unanswered-questions-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.question-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(168, 85, 247, 0.05);
    border-radius: 0.5rem;
    border-left: 3px solid #a855f7;
}

[data-theme="dark"] .question-item {
    background: rgba(168, 85, 247, 0.1);
}

.question-icon {
    color: #a855f7;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.question-text {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text-primary);
    margin: 0;
}

/* =============================================================================
   TECHNICAL INDICATORS ENHANCEMENTS
   ============================================================================= */

/* Mitigations section */
.indicator-section.mitigations .indicator-item {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

[data-theme="dark"] .indicator-section.mitigations .indicator-item {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

/* Affected systems section */
.indicator-section.affected-systems .indicator-item {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .indicator-section.affected-systems .indicator-item {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* Mitigation items - full-width list style */
.mitigations-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mitigation-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: rgba(34, 197, 94, 0.08);
    border-radius: 0.5rem;
    border-left: 3px solid #22c55e;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-primary);
}

.mitigation-icon {
    color: #22c55e;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

[data-theme="dark"] .mitigation-item {
    background: rgba(34, 197, 94, 0.12);
}

/* =============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================= */

@media (max-width: 768px) {
    .details-summary-header {
        padding: 1rem;
    }

    .summary-main-topic {
        font-size: 1rem;
    }

    .summary-scores {
        gap: 0.5rem;
    }

    .key-events-timeline {
        padding-left: 1.25rem;
    }

    .impact-subsection {
        padding: 0.75rem;
    }
}

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .summary-topic-tag {
        transition: none;
    }

    .novelty-score-fill {
        transition: none;
    }
}