/* Plan 006: components/sessions.css — Session record display, metric cards, and callouts
   Extracted from frontend/styles.css on 2026-04-03 (Milestone 19) */

/* ── Session record shell ── */

/* ── Collapsible header ── */


.session-header-toggle.session-header-highlight-orange {
    border-left: 4px solid #ff8800;
    padding-left: 12px;
    margin-left: -12px;
}

/* ── Header metadata ── */

.session-detail.session-subject {
    font-size: 12px;
    color: #667085;
    font-weight: 600;
    white-space: nowrap;
    min-width: 80px;
}


/* ── Pillar badges ── */


.pillar-badge.pillar-academic {
    background-color: #dbeafe;
    color: #1e40af;
}

.pillar-badge.pillar-engagement {
    background-color: #d1fae5;
    color: #065f46;
}

.pillar-badge.pillar-independence {
    background-color: #e9d5ff;
    color: #6b21a8;
}

/* ── Session actions ── */

/* ── Collapsible body ── */


/* ── Icon action buttons ── */


/* ── Metric cards grid ── */


/* ── Metric value badges and progress ── */


.metric-status-low.metric-value-badge {
    color: #7f1d1d;
}

.metric-status-low.metric-progress-fill {
    background-color: #ef4444;
}

.metric-value-badge.metric-status-low {
    background-color: #fee2e2;
}

.metric-status-medium.metric-progress-fill {
    background-color: #f59e0b;
}

.metric-status-medium.metric-value-badge,
.metric-value-badge.metric-status-medium {
    background-color: #fef3c7;
    color: #854d0e;
}

.metric-status-high.metric-progress-fill {
    background-color: #22c55e;
}

.metric-status-high.metric-value-badge,
.metric-value-badge.metric-status-high {
    background-color: #dcfce7;
    color: #166534;
}

/* ── Subject accent border colours ── */

/* ── Session callouts ── */


/* ── Session text review controls ── */
.ai-review-controls {
    margin-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ai-review-btn,
.ai-apply-btn {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    color: #1a4fcf;
    border: 1px solid #eff6ff;
    border-radius: 7px;
    font-size: 11px;
    font-weight: var(--weight-semibold, 600);
    padding: 6px 10px;
    letter-spacing: 0.01em;
    transition: var(--transition-base);
    cursor: pointer;
}

.ai-review-btn:hover,
.ai-apply-btn:hover {
    background: #eff6ff;
    border-color: #1a4fcf;
}

.ai-review-btn:disabled {
    background: var(--color-neutral-100, #f3f4f6);
    color: var(--fg-secondary);
    border-color: var(--color-neutral-200, #e5e7eb);
    cursor: not-allowed;
}

.ai-suggestion-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-left: 4px solid var(--color-primary-700);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-alt) 100%);
    box-shadow: var(--shadow-sm);
}

.ai-suggestion-card[hidden] {
    display: none;
}

.ai-suggestion-severity {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--fg-secondary);
}

.ai-suggestion-notes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ai-suggestion-message,
.ai-suggestion-note,
.ai-suggestion-error {
    margin: 0;
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.ai-suggestion-error {
    color: var(--fg-danger);
    font-weight: var(--weight-medium);
}

.ai-suggestion-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--fg-primary);
}

.ai-suggested-revision {
    width: 100%;
    min-height: 88px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--fg-primary);
    font: inherit;
    line-height: var(--leading-normal);
    padding: var(--space-2);
    resize: vertical;
}


/* ── Metric rows (accordion body) ── */


/* ── Subject pill (read/view mode accordion header) ── */

/* ── Likert 5-step visual scale (read/view mode metrics) ── */


/* ── Metric score badge (session editor) ── */

/* ── Session editor textarea ── */


/* ── Metric slider accent ── */
input[type="range"].metric-slider {
    accent-color: var(--primary);
    width: 100%;
    height: 6px;
    background: var(--secondary-container);
    border-radius: 9999px;
    appearance: none;
    cursor: pointer;
}