deploy: batch update 1 file(s)

report_generation/templates/report_styles.css

@@ -1,412 +1,338 @@
-/* DetectifAI Report Styles - Enhanced Readability */
-:root {
-    --primary-color: #1a365d;
-    --secondary-color: #2d3748;
-    --accent-color: #3182ce;
-    --danger-color: #e53e3e;
-    --warning-color: #dd6b20;
-    --success-color: #38a169;
-    --bg-color: #ffffff;
-    --text-color: #1a202c;
-    --border-color: #e2e8f0;
-    --section-bg: #f8fafc;
-}
-
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
-
-body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    font-size: 12pt;
-    line-height: 1.8;
-    color: var(--text-color);
-    background-color: #f7fafc;
-}
-
-.report-container {
-    max-width: 210mm;
-    margin: 20px auto;
-    background: var(--bg-color);
-    box-shadow: 0 4px 30px rgba(0,0,0,0.15);
-}
-
-/* Header Styles */
-.report-header {
-    background: linear-gradient(135deg, var(--primary-color) 0%, #2c5282 100%);
-    color: white;
-    padding: 40px 50px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 4px solid var(--accent-color);
-}
-
-.report-header .logo h1 {
-    font-size: 32pt;
-    margin-bottom: 8px;
-    font-weight: 700;
-}
-
-.report-header .subtitle {
-    font-size: 12pt;
-    opacity: 0.95;
-    font-weight: 300;
-}
-
-.classification {
-    padding: 10px 20px;
-    border-radius: 6px;
-    font-weight: bold;
-    text-transform: uppercase;
-    font-size: 10pt;
-    letter-spacing: 1px;
-}
-
-.classification.confidential {
-    background: var(--danger-color);
-}
-
-.classification.internal {
-    background: var(--warning-color);
-}
-
-.classification.public {
-    background: var(--success-color);
-}
-
-/* Content Styles */
-.report-content {
-    padding: 50px;
-    background: white;
-}
-
-.report-section {
-    margin-bottom: 50px;
-    page-break-inside: avoid;
-}
-
-.section-content {
-    background: white;
-    padding: 30px;
-    border-radius: 8px;
-    border-left: 4px solid var(--accent-color);
-    color: var(--text-color);
-}
-
-.section-divider {
-    height: 2px;
-    background: linear-gradient(to right, transparent, var(--border-color), transparent);
-    margin: 40px 0;
-}
-
-h1, h2, h3, h4 {
-    color: var(--primary-color);
-    margin-top: 30px;
-    margin-bottom: 20px;
-    font-weight: 600;
-}
-
-h1 { 
-    font-size: 28pt; 
-    border-bottom: 3px solid var(--accent-color); 
-    padding-bottom: 15px;
-    margin-top: 0;
-}
-
-h2 { 
-    font-size: 20pt; 
-    border-bottom: 2px solid var(--border-color); 
-    padding-bottom: 12px;
-    margin-top: 0;
-}
-
-h3 { 
-    font-size: 16pt;
-    color: var(--secondary-color);
-}
-
-h4 { 
-    font-size: 13pt;
-    color: var(--secondary-color);
-}
-
-p {
-    margin-bottom: 16px;
-    color: var(--text-color);
-    line-height: 1.8;
-}
-
-strong {
-    color: var(--primary-color);
-    font-weight: 600;
-}
-
-/* Table Styles */
-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 25px 0;
-    font-size: 11pt;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    border-radius: 8px;
-    overflow: hidden;
-    background: white;
-}
-
-th, td {
-    border: 1px solid var(--border-color);
-    padding: 14px 16px;
-    text-align: left;
-    color: var(--text-color);
-}
-
-th {
-    background: var(--primary-color);
-    color: white;
-    font-weight: 600;
-    text-transform: uppercase;
-    font-size: 10pt;
-    letter-spacing: 0.5px;
-}
-
-tr:nth-child(even) {
-    background: #f8fafc;
-}
-
-tr:hover {
-    background: #edf2f7;
-    transition: background 0.2s ease;
-}
-
-/* Evidence Gallery */
-.evidence-gallery {
-    margin: 30px 0;
-    padding: 25px;
-    background: white;
-    border-radius: 8px;
-    border: 1px solid var(--border-color);
-}
-
-.gallery-title {
-    font-size: 14pt;
-    color: var(--primary-color);
-    margin-bottom: 20px;
-    padding-bottom: 10px;
-    border-bottom: 2px solid var(--accent-color);
-}
-
-.gallery-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-    gap: 25px;
-}
-
-.evidence-item {
-    border: 2px solid var(--border-color);
-    border-radius: 10px;
-    overflow: hidden;
-    background: white;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.evidence-item:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
-}
-
-.evidence-image {
-    width: 100%;
-    height: 180px;
-    object-fit: cover;
-    border-bottom: 2px solid var(--border-color);
-    background: #f8fafc;
-}
-
-.image-placeholder {
-    width: 100%;
-    height: 180px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%);
-    color: #4a5568;
-    font-size: 11pt;
-    border-bottom: 2px solid var(--border-color);
-    font-weight: 500;
-}
-
-.evidence-item figcaption {
-    padding: 12px;
-    font-size: 10pt;
-    color: #2d3748;
-    background: white;
-    font-weight: 500;
-    min-height: 50px;
-}
-
-/* Lists */
-ul, ol {
-    margin: 16px 0;
-    padding-left: 30px;
-}
-
-li {
-    margin-bottom: 10px;
-    line-height: 1.6;
-    color: var(--text-color);
-}
-
-/* Code blocks */
-code {
-    background: #edf2f7;
-    padding: 3px 8px;
-    border-radius: 4px;
-    font-size: 10pt;
-    font-family: 'Courier New', monospace;
-    color: #2d3748;
-}
-
-pre {
-    background: #2d3748;
-    color: #e2e8f0;
-    padding: 20px;
-    border-radius: 8px;
-    overflow-x: auto;
-    font-size: 10pt;
-    margin: 20px 0;
-}
-
-pre code {
-    background: transparent;
-    color: #e2e8f0;
-    padding: 0;
-}
-
-/* Footer Styles */
-.report-footer {
-    background: var(--section-bg);
-    padding: 30px 50px;
-    border-top: 3px solid var(--accent-color);
-    font-size: 10pt;
-    color: #4a5568;
-}
-
-.footer-content {
-    max-width: 100%;
-}
-
-.footer-info {
-    margin-bottom: 20px;
-    padding-bottom: 20px;
-    border-bottom: 1px solid var(--border-color);
-}
-
-.footer-info p {
-    margin-bottom: 8px;
-    color: #2d3748;
-}
-
-.disclaimer {
-    margin-top: 20px;
-    font-style: italic;
-    padding: 15px;
-    background: #fff3cd;
-    border-left: 4px solid var(--warning-color);
-    border-radius: 4px;
-    color: #856404;
-}
-
-/* Print Styles */
-@media print {
-    body {
-        background: white;
-    }
-    
-    .report-container {
-        box-shadow: none;
-        max-width: 100%;
-        margin: 0;
-    }
-    
-    .report-section {
-        page-break-inside: avoid;
-    }
-    
-    h2, h3 {
-        page-break-after: avoid;
-    }
-    
-    .section-divider {
-        page-break-after: avoid;
-    }
-}
-
-/* Threat Level Indicators */
-.threat-critical { 
-    color: #c53030; 
-    font-weight: bold;
-    background: #fff5f5;
-    padding: 2px 6px;
-    border-radius: 3px;
-}
-
-.threat-high { 
-    color: #dd6b20; 
-    font-weight: bold;
-    background: #fffaf0;
-    padding: 2px 6px;
-    border-radius: 3px;
-}
-
-.threat-medium { 
-    color: #d69e2e;
-    background: #fffff0;
-    padding: 2px 6px;
-    border-radius: 3px;
-}
-
-.threat-low { 
-    color: #38a169;
-    background: #f0fff4;
-    padding: 2px 6px;
-    border-radius: 3px;
-}
-
-/* Horizontal rules */
-hr {
-    border: none;
-    border-top: 2px solid var(--border-color);
-    margin: 30px 0;
-}
-
-/* Scrollable sections - ensure text is visible */
-.scrollable-section {
-    max-height: 400px;
-    overflow-y: auto;
-    padding: 20px;
-    background: white;
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    color: var(--text-color);
-}
-
-.scrollable-section::-webkit-scrollbar {
-    width: 10px;
-}
-
-.scrollable-section::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 10px;
-}
-
-.scrollable-section::-webkit-scrollbar-thumb {
-    background: var(--accent-color);
-    border-radius: 10px;
-}
-
-.scrollable-section::-webkit-scrollbar-thumb:hover {
-    background: var(--primary-color);
-}
+/* ============================================================
+   DetectifAI Incident Report — Stylesheet
+   Design: Professional forensic document.
+   Colour palette: navy primary, slate text, white surface.
+   Print-ready: A4-compatible, page-break aware.
+   ============================================================ */
+
+:root {
+    --navy:        #1a365d;
+    --navy-mid:    #2c5282;
+    --slate:       #2d3748;
+    --slate-light: #4a5568;
+    --steel:       #718096;
+    --border:      #e2e8f0;
+    --surface:     #f8fafc;
+    --white:       #ffffff;
+    --accent:      #3182ce;
+    --danger:      #c53030;
+    --warn:        #c05621;
+    --ok:          #276749;
+    --warn-bg:     #fffff0;
+    --danger-bg:   #fff5f5;
+}
+
+/* ── Reset ─────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+/* ── Base ──────────────────────────────────────────────────── */
+body {
+    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+    font-size: 11pt;
+    line-height: 1.75;
+    color: var(--slate);
+    background: #edf2f7;
+}
+
+/* ── Page wrapper ──────────────────────────────────────────── */
+.report-container {
+    max-width: 210mm;
+    margin: 24px auto;
+    background: var(--white);
+    box-shadow: 0 2px 24px rgba(0,0,0,0.12);
+}
+
+/* ── Header ────────────────────────────────────────────────── */
+.report-header {
+    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
+    color: var(--white);
+    padding: 36px 48px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    border-bottom: 4px solid var(--accent);
+}
+
+.logo-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 6px;
+}
+
+.logo-icon {
+    width: 32px;
+    height: 32px;
+    color: var(--white);
+    opacity: 0.9;
+    flex-shrink: 0;
+}
+
+.logo h1 {
+    font-size: 26pt;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+    line-height: 1;
+}
+
+.subtitle {
+    font-size: 10pt;
+    opacity: 0.80;
+    font-weight: 300;
+    margin-top: 2px;
+}
+
+/* Classification badge */
+.classification {
+    padding: 8px 18px;
+    border-radius: 4px;
+    font-weight: 700;
+    text-transform: uppercase;
+    font-size: 9pt;
+    letter-spacing: 1.5px;
+    color: var(--white);
+    white-space: nowrap;
+}
+.classification.confidential { background: var(--danger); }
+.classification.internal      { background: var(--warn); }
+.classification.public        { background: var(--ok); }
+.classification.restricted    { background: #553c9a; }
+
+/* ── Main content ──────────────────────────────────────────── */
+.report-content {
+    padding: 48px 48px 32px;
+}
+
+.report-section {
+    margin-bottom: 40px;
+}
+
+.section-content {
+    background: var(--surface);
+    padding: 28px 32px;
+    border-radius: 6px;
+    border-left: 4px solid var(--accent);
+}
+
+.section-divider {
+    height: 1px;
+    background: var(--border);
+    margin: 40px 0;
+}
+
+/* ── Typography ────────────────────────────────────────────── */
+h1 {
+    font-size: 22pt;
+    color: var(--navy);
+    border-bottom: 3px solid var(--accent);
+    padding-bottom: 12px;
+    margin-bottom: 20px;
+    font-weight: 700;
+}
+
+h2 {
+    font-size: 16pt;
+    color: var(--navy);
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 8px;
+    margin-top: 28px;
+    margin-bottom: 16px;
+    font-weight: 600;
+}
+
+h3 {
+    font-size: 13pt;
+    color: var(--slate);
+    margin-top: 22px;
+    margin-bottom: 12px;
+    font-weight: 600;
+}
+
+h4 {
+    font-size: 11pt;
+    color: var(--slate-light);
+    margin-top: 16px;
+    margin-bottom: 8px;
+    font-weight: 600;
+}
+
+p {
+    margin-bottom: 14px;
+    text-align: justify;
+    hyphens: auto;
+}
+
+strong { color: var(--navy); font-weight: 600; }
+
+em { color: var(--slate-light); }
+
+hr {
+    border: none;
+    border-top: 1px solid var(--border);
+    margin: 24px 0;
+}
+
+/* ── Tables ────────────────────────────────────────────────── */
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 20px 0;
+    font-size: 10pt;
+    border-radius: 6px;
+    overflow: hidden;
+    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
+}
+
+thead { background: var(--navy); color: var(--white); }
+
+th {
+    padding: 12px 14px;
+    font-weight: 600;
+    font-size: 9pt;
+    text-transform: uppercase;
+    letter-spacing: 0.6px;
+    text-align: left;
+}
+
+td {
+    padding: 11px 14px;
+    border-bottom: 1px solid var(--border);
+    vertical-align: top;
+}
+
+tbody tr:nth-child(even) { background: var(--surface); }
+tbody tr:hover           { background: #edf2f7; }
+
+td:first-child { font-weight: 600; color: var(--slate); width: 22%; }
+
+/* ── Inline images from markdown ── */
+/* The markdown renderer produces <p><img …></p> or bare <img …>.
+   We style these as a clean evidence grid so keyframes are correctly
+   aligned without duplicating them in a separate gallery block. */
+.section-content p > img,
+.section-content img {
+    display: block;
+    width: 100%;
+    max-width: 280px;
+    height: 180px;
+    object-fit: cover;
+    border-radius: 6px;
+    border: 1px solid var(--border);
+    margin: 8px auto 4px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+
+/* Keyframe grid — wraps consecutive images in the evidence section */
+.section-content .keyframe-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 20px;
+    margin: 20px 0;
+}
+
+/* ── Lists ─────────────────────────────────────────────────── */
+ul, ol {
+    margin: 12px 0 12px 24px;
+}
+
+li {
+    margin-bottom: 6px;
+    line-height: 1.6;
+}
+
+li::marker { color: var(--accent); font-weight: 600; }
+
+/* ── Blockquotes ───────────────────────────────────────────── */
+blockquote {
+    margin: 16px 0;
+    padding: 16px 20px;
+    border-left: 4px solid var(--accent);
+    background: var(--surface);
+    border-radius: 0 6px 6px 0;
+    color: var(--slate-light);
+    font-style: italic;
+}
+
+blockquote p { margin-bottom: 0; }
+
+/* ── Code ──────────────────────────────────────────────────── */
+code {
+    background: #edf2f7;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-family: 'Courier New', monospace;
+    font-size: 9.5pt;
+    color: #c53030;
+}
+
+pre {
+    background: var(--slate);
+    color: #e2e8f0;
+    padding: 16px 20px;
+    border-radius: 6px;
+    overflow-x: auto;
+    font-size: 9pt;
+    margin: 16px 0;
+}
+
+pre code { background: transparent; color: inherit; padding: 0; }
+
+/* ── Threat level tags ─────────────────────────────────────── */
+.threat-critical { color: var(--danger); font-weight: 600; background: var(--danger-bg); padding: 1px 5px; border-radius: 3px; }
+.threat-high     { color: var(--warn);   font-weight: 600; background: #fffaf0; padding: 1px 5px; border-radius: 3px; }
+.threat-medium   { color: #b7791f; background: var(--warn-bg); padding: 1px 5px; border-radius: 3px; }
+.threat-low      { color: var(--ok);  background: #f0fff4; padding: 1px 5px; border-radius: 3px; }
+
+/* ── Footer ────────────────────────────────────────────────── */
+.report-footer {
+    background: var(--surface);
+    padding: 24px 48px;
+    border-top: 2px solid var(--accent);
+    font-size: 9.5pt;
+    color: var(--steel);
+}
+
+.footer-info {
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    gap: 32px;
+    flex-wrap: wrap;
+}
+
+.footer-info p { margin: 0; text-align: left; }
+
+.disclaimer {
+    font-style: italic;
+    padding: 12px 16px;
+    background: #fffbeb;
+    border-left: 3px solid #d69e2e;
+    border-radius: 3px;
+    color: #744210;
+    line-height: 1.5;
+}
+
+/* ── Print / PDF ───────────────────────────────────────────── */
+@media print {
+    body { background: white; }
+
+    .report-container {
+        box-shadow: none;
+        max-width: 100%;
+        margin: 0;
+    }
+
+    .report-header { page-break-after: avoid; }
+
+    .report-section { page-break-inside: avoid; orphans: 3; widows: 3; }
+
+    h1, h2, h3, h4 { page-break-after: avoid; }
+
+    table { page-break-inside: avoid; }
+    thead { display: table-header-group; }
+
+    img { max-width: 100%; page-break-inside: avoid; }
+
+    a { text-decoration: none; color: var(--navy); }
+}