/* =======================================
 * REPORT.CSS
 * Styles for rendered agentic-system reports.
 * ======================================= */

.report-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 110px 20px 80px;
    position: relative;
    z-index: 1;
}

/* --- Toolbar --- */
.report-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 30px;
}
.report-back {
    color: #00d65b;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
}
.report-back:hover { color: #5bff9c; }
.report-toolbar-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.report-btn {
    background: #00d65b;
    color: #06121f;
    border: 1px solid #00d65b;
    padding: 9px 18px;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.report-btn:hover { background: #00b34c; }
.report-btn-ghost { background: transparent; color: #00d65b; }
.report-btn-ghost:hover { background: rgba(0, 214, 91, 0.12); color: #fff; }

/* --- Header --- */
.report-header {
    border-bottom: 3px solid rgba(0, 214, 91, 0.4);
    padding-bottom: 22px;
    margin-bottom: 30px;
}
.report-kind {
    display: inline-block;
    background: rgba(0, 214, 91, 0.15);
    color: #00d65b;
    border: 1px solid rgba(0, 214, 91, 0.4);
    padding: 5px 14px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.report-header h1 {
    font-size: clamp(26px, 4vw, 38px);
    color: #e8e8f5;
    margin-bottom: 10px;
    line-height: 1.2;
}
.report-attribution { color: #9aa0b5; font-size: 15px; font-style: italic; }

/* --- Rendered Markdown Document --- */
.report-doc {
    background: rgba(15, 18, 33, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 44px 48px;
    color: #cfd3e0;
    font-size: 16px;
    line-height: 1.75;
}

.report-doc h1,
.report-doc h2,
.report-doc h3,
.report-doc h4 {
    color: #e8e8f5;
    line-height: 1.3;
    margin: 1.8em 0 0.6em;
    font-weight: 600;
}
.report-doc h1 { font-size: 1.9rem; color: #00d65b; }
.report-doc h2 {
    font-size: 1.5rem;
    border-bottom: 1px solid rgba(0, 214, 91, 0.25);
    padding-bottom: 8px;
}
.report-doc h3 { font-size: 1.2rem; color: #5bff9c; }
.report-doc h4 { font-size: 1.05rem; color: #b8f0cf; }
.report-doc > *:first-child { margin-top: 0; }

.report-doc p { margin: 0 0 1.1em; }
.report-doc strong { color: #f0f2f8; }
.report-doc em { color: #b8bcce; }

.report-doc a { color: #00d65b; text-decoration: underline; }
.report-doc a:hover { color: #5bff9c; }

.report-doc ul,
.report-doc ol { margin: 0 0 1.2em 1.4em; padding: 0; }
.report-doc li { margin-bottom: 0.5em; }

.report-doc hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 2em 0;
}

.report-doc blockquote {
    border-left: 4px solid #00d65b;
    background: rgba(0, 214, 91, 0.06);
    margin: 1.4em 0;
    padding: 12px 20px;
    border-radius: 0 8px 8px 0;
    color: #d8dbe6;
}
.report-doc blockquote p { margin: 0.3em 0; }

.report-doc code {
    background: rgba(0, 214, 91, 0.12);
    color: #7bffb0;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 0.92em;
}
.report-doc pre {
    background: #0a0d18;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 18px;
    overflow-x: auto;
    margin: 1.2em 0;
}
.report-doc pre code { background: none; color: #cfd3e0; padding: 0; }

/* Tables */
.report-doc table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.4em 0;
    font-size: 0.95em;
}
.report-doc th,
.report-doc td {
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 10px 14px;
    text-align: left;
}
.report-doc th { background: rgba(0, 214, 91, 0.12); color: #e8e8f5; font-weight: 600; }
.report-doc tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }

@media (max-width: 600px) {
    .report-doc { padding: 28px 22px; font-size: 15px; }
}

/* --- Print --- */
@media print {
    .navbar, .mobile-menu, .menu-overlay, #dna-canvas, footer,
    .report-toolbar, .django-messages { display: none !important; }
    .report-page { padding: 0; max-width: 100%; }
    .report-doc {
        background: #fff; color: #111; border: none; border-radius: 0;
        backdrop-filter: none; padding: 0;
    }
    .report-doc h1, .report-doc h2, .report-doc h3, .report-doc h4 { color: #0d1b2a; }
    .report-header h1 { color: #0d1b2a; }
    .report-doc strong { color: #000; }
}