/* Diagnostic AI Insights — visual components
   Uses design token variables from variables.css */

/* ── Data quality banner ─────────────────────────────────────────────────── */
.diagnostic-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-default, #dde0e6);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-2) var(--space-4);
    margin-bottom: var(--space-4);
    font-size: 0.75rem;
}

.diagnostic-banner__title {
    font-weight: 700;
    color: var(--fg-primary, #1a1a2e);
}

.diagnostic-banner__meta {
    color: var(--fg-muted, #666);
    flex: 1;
}

.diagnostic-banner__refresh {
    background: var(--bg-success-subtle, #f0fff4);
    border: 1px solid var(--border-success, #b0d8b8);
    color: var(--fg-success, #1a7a3a);
    border-radius: var(--radius-sm, 4px);
    padding: 3px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
}

.diagnostic-banner__refresh:hover {
    background: var(--bg-success, #e0f5e8);
}

/* ── Pillar cards ────────────────────────────────────────────────────────── */
.diagnostic-pillar {
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-default, #dde0e6);
    border-radius: var(--radius-lg, 10px);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.diagnostic-pillar__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-1);
}

.diagnostic-pillar__title {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--fg-primary, #1a1a2e);
}

.diagnostic-pillar__subtitle {
    font-size: 0.72rem;
    color: var(--fg-muted, #888);
    margin-bottom: var(--space-3);
    line-height: 1.4;
}

.diagnostic-pillar__meta {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--fg-muted, #888);
}

/* ── Risk / count chips ──────────────────────────────────────────────────── */
.chip {
    border-radius: var(--radius-sm, 4px);
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.chip--danger  { background: #fff0f0; color: #c0392b; border-color: #f5c0bb; }
.chip--warning { background: #fff7f0; color: #d35400; border-color: #f5d5b0; }
.chip--success { background: #f0fff4; color: #1a7a3a; border-color: #b0d8b8; }
.chip--neutral { background: var(--bg-subtle, #f5f6f8); color: var(--fg-muted, #666); border-color: var(--border-default, #dde0e6); }
.chip--purple  { background: #f8f6ff; color: #7c3aed; border-color: #d8ccf5; }

/* ── Decay bars ──────────────────────────────────────────────────────────── */
.decay-group-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-muted, #aaa);
    margin: var(--space-3) 0 var(--space-2);
}

.decay-group-label:first-child {
    margin-top: 0;
}

.decay-topic {
    margin-bottom: var(--space-3);
}

.decay-topic--stable {
    opacity: 0.5;
    margin-bottom: var(--space-2);
}

.decay-topic__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: 5px;
}

.decay-topic__name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fg-primary, #1a1a2e);
}

.decay-topic--stable .decay-topic__name {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--fg-muted, #777);
}

.decay-bar-track {
    border-radius: 4px;
    height: 9px;
    overflow: hidden;
}

.decay-bar-track--stable { height: 6px; background: #e8f5ec; }
.decay-bar-track--high   { background: #f0e0e0; }
.decay-bar-track--medium { background: #f5ebe0; }
.decay-bar-track--low    { background: #e8f5ec; }

.decay-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.decay-bar-fill--high   { background: linear-gradient(90deg, #c0392b, #e74c3c); }
.decay-bar-fill--medium { background: linear-gradient(90deg, #d35400, #e67e22); }
.decay-bar-fill--low    { background: #27ae60; }

.decay-topic__annotation {
    font-size: 0.72rem;
    color: var(--fg-secondary, #555);
    font-style: italic;
    margin-top: var(--space-1);
    line-height: 1.5;
}

/* ── Correlation badges ──────────────────────────────────────────────────── */
.correlation-badge {
    background: #fff8f8;
    border: 1px solid #f5c0bb;
    border-radius: var(--radius-md, 8px);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
}

.correlation-badge--positive {
    background: #f8fff8;
    border-color: #b8e8b8;
}

.correlation-badge__metrics {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

.correlation-badge__rho {
    font-size: 0.875rem;
    font-weight: 800;
    color: #c0392b;
}

.correlation-badge--positive .correlation-badge__rho { color: #1a7a3a; }

.anomaly-flag {
    background: #f8f6ff;
    border: 1px solid #d8ccf5;
    border-radius: var(--radius-md, 8px);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
}

.anomaly-flag__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-1);
}

.badge-annotation {
    font-size: 0.72rem;
    color: var(--fg-secondary, #555);
    font-style: italic;
    line-height: 1.5;
}

/* ── Velocity rows ───────────────────────────────────────────────────────── */
.velocity-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.velocity-row--dimmed {
    opacity: 0.45;
    align-items: center;
    margin-bottom: var(--space-2);
}

.velocity-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.velocity-icon--accelerating { background: #f0fff4; border-color: #2ecc71; color: #1a7a3a; }
.velocity-icon--struggling   { background: #fff0f0; border-color: #e74c3c; color: #c0392b; }
.velocity-icon--on_track     { background: var(--bg-subtle, #f5f6f8); border-color: #ccc; color: #888; }

.velocity-body { flex: 1; }

.velocity-body__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.velocity-body__topic {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fg-primary, #1a1a2e);
}

.velocity-annotation {
    font-size: 0.72rem;
    color: var(--fg-secondary, #555);
    font-style: italic;
    margin-top: 3px;
    line-height: 1.5;
}

/* ── Short-circuit empty state ───────────────────────────────────────────── */
.diagnostic-empty {
    background: var(--bg-surface, #fff);
    border: 2px dashed var(--border-default, #dde0e6);
    border-radius: var(--radius-lg, 10px);
    padding: var(--space-8);
    text-align: center;
}

.diagnostic-empty__icon { font-size: 1.875rem; margin-bottom: var(--space-2); }

.diagnostic-empty__title {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--fg-primary, #1a1a2e);
    margin-bottom: var(--space-1);
}

.diagnostic-empty__body {
    font-size: 0.75rem;
    color: var(--fg-muted, #888);
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ── Separator between groups ────────────────────────────────────────────── */
.diagnostic-group-separator {
    border: none;
    border-top: 1px solid var(--border-subtle, #eef0f3);
    margin: var(--space-3) 0 var(--space-2);
}

/* ── Executive Behavioral Profile card ───────────────────────────────────── */
.behavioral-profile-card {
    background: var(--bg-subtle, #f5f6f8);
    border: 1px solid var(--border-default, #dde0e6);
    border-left: 3px solid var(--color-primary-600, #4f46e5);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.behavioral-profile-card__header {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-primary-600, #4f46e5);
    margin-bottom: var(--space-2);
}

.behavioral-profile-card__body {
    font-size: 0.8125rem;
    color: var(--fg-primary, #1a1a2e);
    line-height: 1.6;
    margin: 0;
}