/* ============================================================
   Report Section – shimmer loading + inline layout
   Compatible with the application's CSS custom-property based
   dark / light theme (--bg, --fg, --line, --muted, --card-bg).
   ============================================================ */

/* ---------- Generate button bar ---------- */
.report-generate-bar {
    display: flex;
    justify-content: center;
    padding: 32px 16px 16px;
}

/* ---------- Inline report section ---------- */
.report-inline-section {
    margin-top: 24px;
    padding: 24px;
}

.report-inline-section[hidden] {
    display: none;
}

.report-inline-title {
    margin: 0 0 20px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fg, #111);
}

/* ---------- Shimmer animation ---------- */
@keyframes shimmer-sweep {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

.report-shimmer {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.report-shimmer[hidden] {
    display: none;
}

.shimmer-line {
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        var(--shimmer-base, #e8e8e8) 25%,
        var(--shimmer-highlight, #f5f5f5) 50%,
        var(--shimmer-base, #e8e8e8) 75%
    );
    background-size: 1200px 100%;
    animation: shimmer-sweep 1.6s infinite linear;
}

/* Dark-mode shimmer colours via the existing .theme-dark html class */
html.theme-dark .shimmer-line {
    --shimmer-base: #2a2a3a;
    --shimmer-highlight: #3a3a50;
}

.shimmer-line--title {
    height: 20px;
    width: 55%;
}

.shimmer-line--text {
    height: 14px;
    width: 100%;
}

.shimmer-line--short {
    height: 14px;
    width: 70%;
}

/* ---------- Report content ---------- */
.report-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.report-section-title {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--fg, #111);
}

.report-section-body {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--muted, #555);
    word-break: break-word;
}

.report-section-body ul,
.report-section-body ol {
    padding-left: 1.5em;
    margin: 0.5em 0;
}
/* ---------- Markdown rendered content ---------- */
.report-section-body h1,
.report-section-body h2,
.report-section-body h3,
.report-section-body h4 {
    margin: 1em 0 0.4em;
    font-weight: 700;
    color: var(--fg, #111);
    line-height: 1.3;
}
.report-section-body h1 { font-size: 1.15rem; }
.report-section-body h2 { font-size: 1.05rem; }
.report-section-body h3 { font-size: 0.98rem; }
.report-section-body h4 { font-size: 0.93rem; }

.report-section-body p {
    margin: 0.5em 0;
}
.report-section-body li {
    margin: 0.25em 0;
}
.report-section-body strong {
    font-weight: 700;
    color: var(--fg, #111);
}
.report-section-body em {
    font-style: italic;
}
.report-section-body code {
    font-family: ui-monospace, monospace;
    font-size: 0.85em;
    background: var(--code-bg, rgba(0, 0, 0, 0.06));
    color: var(--fg, #111);
    padding: 0.15em 0.4em;
    border-radius: 4px;
}
html.theme-dark .report-section-body code {
    background: rgba(255, 255, 255, 0.1);
}
.report-section-body pre {
    background: var(--code-bg, rgba(0, 0, 0, 0.06));
    padding: 12px 16px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 0.85rem;
    margin: 0.75em 0;
}
html.theme-dark .report-section-body pre {
    background: rgba(255, 255, 255, 0.07);
}
.report-section-body pre code {
    background: none;
    padding: 0;
}
.report-section-body blockquote {
    margin: 0.75em 0;
    padding: 8px 16px;
    border-left: 3px solid var(--line, #ddd);
    color: var(--muted, #555);
    font-style: italic;
}
/* ---------- Markdown tables ---------- */
.report-section-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    margin: 1em 0;
    overflow-x: auto;
    display: block;
}
.report-section-body thead tr {
    background: var(--table-head-bg, rgba(0, 0, 0, 0.05));
}
html.theme-dark .report-section-body thead tr {
    background: rgba(255, 255, 255, 0.08);
}
.report-section-body th,
.report-section-body td {
    padding: 8px 12px;
    border: 1px solid var(--line, #ddd);
    text-align: left;
    vertical-align: top;
}
.report-section-body th {
    font-weight: 700;
    color: var(--fg, #111);
}
.report-section-body tbody tr:nth-child(even) {
    background: var(--table-stripe, rgba(0, 0, 0, 0.02));
}
html.theme-dark .report-section-body tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.04);
}
.report-section-body hr {
    border: none;
    border-top: 1px solid var(--line, #ddd);
    margin: 1em 0;
}

/* ---------- Error state ---------- */
.report-error {
    color: var(--error, #e53e3e);
    font-size: 0.9rem;
    padding: 12px 16px;
    background: var(--error-bg, rgba(229, 62, 62, 0.08));
    border-radius: 8px;
    border: 1px solid var(--error-border, rgba(229, 62, 62, 0.25));
}

/* ---------- Brain icon (AI Explainer button) ---------- */
.btn-brain-icon {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}

html.theme-dark .btn-brain-icon {
    filter: invert(1);
}