/* lesson-plan.css — Pre-session lesson plan panel (3E)
   Uses design token variables from variables.css */

/* ── Panel shell ─────────────────────────────────────────────────────────── */
.lp-panel {
    padding: var(--space-4) 0;
}

.lp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.lp-heading {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--fg-primary);
    margin: 0;
}

/* ── State messages ──────────────────────────────────────────────────────── */
.lp-spinner {
    display: block;
    font-size: var(--text-sm);
    color: var(--fg-muted);
    padding: var(--space-6) 0;
}

.lp-empty {
    font-size: var(--text-sm);
    color: var(--fg-muted);
    line-height: 1.6;
    padding: var(--space-4) 0;
}

.lp-error {
    font-size: var(--text-sm);
    color: var(--color-danger, #c0392b);
    padding: var(--space-4) 0;
}

/* ── Plan metadata (generated date) ─────────────────────────────────────── */
.lp-plan-meta {
    font-size: 0.7rem;
    color: var(--fg-muted);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Plan card ───────────────────────────────────────────────────────────── */
.lp-plan-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-xs);
}

.lp-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.lp-plan-card-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--fg-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lp-copy-btn {
    font-size: 0.75rem;
    padding: var(--space-1) var(--space-3);
}

/* ── Section rows ────────────────────────────────────────────────────────── */
.lp-section-row {
    border-top: 1px solid var(--border-subtle, #eef0f3);
    padding: var(--space-3) 0;
}

.lp-section-row:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

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

.lp-section-title {
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    color: var(--fg-secondary, #555);
}

.lp-section-body {
    font-size: var(--text-sm);
    color: var(--fg-primary);
    line-height: 1.6;
}

.lp-approach-note {
    font-size: 0.75rem;
    color: var(--fg-secondary, #666);
    font-style: italic;
    margin-top: var(--space-1);
    line-height: 1.5;
}

/* ── Watch-for list ──────────────────────────────────────────────────────── */
.lp-watch-list {
    margin: var(--space-1) 0 0;
    padding-left: var(--space-5);
    font-size: var(--text-sm);
    color: var(--fg-primary);
    line-height: 1.7;
}

/* ── Source badges ───────────────────────────────────────────────────────── */
.lp-source-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.lp-source-badge--topic_state {
    background: #f0f4ff;
    color: var(--color-primary-700, #4338ca);
    border-color: #c7d2fe;
}

.lp-source-badge--session_note {
    background: var(--bg-subtle, #f5f6f8);
    color: var(--fg-secondary, #555);
    border-color: var(--border-default);
}

.lp-source-badge--plan_feedback {
    background: #f0fff4;
    color: #1a7a3a;
    border-color: #b0d8b8;
}

.lp-source-badge--attendance_pattern {
    background: #fff7f0;
    color: #d35400;
    border-color: #f5d5b0;
}

/* ── Feedback form ───────────────────────────────────────────────────────── */
.lp-feedback-wrap {
    margin-top: var(--space-4);
    border-top: 1px solid var(--border-subtle, #eef0f3);
    padding-top: var(--space-3);
}

.lp-feedback-toggle {
    font-size: 0.75rem;
    padding: var(--space-1) var(--space-3);
}

.lp-feedback-form {
    margin-top: var(--space-3);
}

.lp-rating-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.lp-rating-btn {
    flex: 1;
    min-width: 100px;
    padding: var(--space-2) var(--space-3);
    font-size: 0.75rem;
    font-weight: var(--weight-medium);
    font-family: var(--font-body);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--fg-secondary);
    cursor: pointer;
    transition: var(--transition-base);
    text-align: center;
}

.lp-rating-btn:hover {
    background: var(--bg-surface-alt);
    border-color: var(--border-strong);
    color: var(--fg-primary);
}

.lp-rating-btn--selected {
    background: var(--color-primary-700, #4338ca);
    border-color: var(--color-primary-700, #4338ca);
    color: #fff;
    box-shadow: var(--shadow-primary);
}

.lp-feedback-label {
    display: block;
    font-size: 0.75rem;
    color: var(--fg-secondary);
    margin-bottom: var(--space-2);
}

.lp-feedback-notes {
    resize: vertical;
    margin-bottom: var(--space-3);
}

.lp-feedback-submit {
    width: 100%;
}

.lp-feedback-saved {
    font-size: var(--text-sm);
    color: var(--color-success, #1a7a3a);
    font-weight: var(--weight-semibold);
}

/* ── Dark theme ──────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .lp-source-badge--topic_state {
        background: #1e1b4b;
        color: #a5b4fc;
        border-color: #3730a3;
    }
    .lp-source-badge--session_note {
        background: var(--bg-subtle);
        color: var(--fg-secondary);
    }
    .lp-source-badge--plan_feedback {
        background: #0a2e1a;
        color: #6ee7a0;
        border-color: #166534;
    }
    .lp-source-badge--attendance_pattern {
        background: #2e1a0a;
        color: #fdba74;
        border-color: #7c2d12;
    }
}

:root[data-theme="dark"] .lp-source-badge--topic_state {
    background: #1e1b4b;
    color: #a5b4fc;
    border-color: #3730a3;
}
:root[data-theme="dark"] .lp-source-badge--session_note {
    background: var(--bg-subtle);
    color: var(--fg-secondary);
}
:root[data-theme="dark"] .lp-source-badge--plan_feedback {
    background: #0a2e1a;
    color: #6ee7a0;
    border-color: #166534;
}
:root[data-theme="dark"] .lp-source-badge--attendance_pattern {
    background: #2e1a0a;
    color: #fdba74;
    border-color: #7c2d12;
}

:root[data-theme="light"] .lp-source-badge--topic_state {
    background: #f0f4ff;
    color: var(--color-primary-700, #4338ca);
    border-color: #c7d2fe;
}
:root[data-theme="light"] .lp-source-badge--plan_feedback {
    background: #f0fff4;
    color: #1a7a3a;
    border-color: #b0d8b8;
}
:root[data-theme="light"] .lp-source-badge--attendance_pattern {
    background: #fff7f0;
    color: #d35400;
    border-color: #f5d5b0;
}