/* ═══════════════════════════════════════════════════════════════
   MCRO FORENSIC VISUALIZATION THEME
   Shared styles for forensic data presentation slides.
   Loaded by forensic-lib.js — do not import directly.
   ═══════════════════════════════════════════════════════════════ */

/* ── PALETTE ───────────────────────────────────────────────── */
:root {
    --fx-bg:          #0c0c12;
    --fx-surface:     #111119;
    --fx-card:        #161622;
    --fx-elevated:    #1c1c2a;
    --fx-panel:       #12121c;

    --fx-border:      #2a2a3c;
    --fx-border-dim:  #1e1e2e;
    --fx-border-bright: #3a3a50;

    --fx-text:        #e8e6e1;
    --fx-text-dim:    #a0a0a0;
    --fx-text-muted:  #707070;
    --fx-text-bright: #ffffff;

    --fx-red:         #ff5545;
    --fx-gold:        #ffb732;
    --fx-blue:        #3a86ba;
    --fx-green:       #2de0b6;
    --fx-purple:      #a77bdb;
    --fx-orange:      #ff8c42;
    --fx-cyan:        #00d4ff;

    --fx-red-dim:     #ff554522;
    --fx-gold-dim:    #ffb73222;
    --fx-blue-dim:    #3a86ba22;
    --fx-green-dim:   #2de0b622;
    --fx-purple-dim:  #a77bdb22;

    --fx-font-mono:   'IBM Plex Mono', 'Consolas', 'SF Mono', monospace;
    --fx-font-sans:   'IBM Plex Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
    --fx-font-data:   'JetBrains Mono', 'Fira Code', 'IBM Plex Mono', monospace;
}

/* ── BASE FORENSIC SLIDE ───────────────────────────────────── */
.fx-slide {
    width: 1920px; height: 1080px;
    background: var(--fx-bg);
    font-family: var(--fx-font-sans);
    color: var(--fx-text);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}
.fx-slide *, .fx-slide *::before, .fx-slide *::after {
    box-sizing: border-box;
}

/* ── BRAND HEADER ──────────────────────────────────────────── */
.fx-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 50px 14px;
    border-bottom: 1px solid var(--fx-border);
    flex-shrink: 0;
    z-index: 10;
}
.fx-brand {
    font-family: var(--fx-font-mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--fx-red);
    letter-spacing: 6px;
}
.fx-label {
    font-family: var(--fx-font-mono);
    font-size: 11px;
    color: var(--fx-text-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ── TITLE BAR (below header) ──────────────────────────────── */
.fx-title-bar {
    padding: 18px 50px 12px;
    flex-shrink: 0;
}
.fx-title {
    font-family: var(--fx-font-mono);
    font-size: var(--s-title-size, 28px);
    font-weight: 700;
    color: var(--fx-text-bright);
    line-height: 1.2;
    margin: 0;
}
.fx-subtitle {
    font-family: var(--fx-font-sans);
    font-size: var(--s-subtitle-size, 16px);
    color: var(--fx-text-dim);
    margin: 6px 0 0;
    line-height: 1.4;
}

/* ── CONTENT AREA ──────────────────────────────────────────── */
.fx-body {
    flex: 1;
    padding: var(--s-pad, 20px) 50px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.fx-body.scrollable {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--fx-red) var(--fx-surface);
}
.fx-body.scrollable::-webkit-scrollbar { width: 8px; }
.fx-body.scrollable::-webkit-scrollbar-track { background: var(--fx-surface); }
.fx-body.scrollable::-webkit-scrollbar-thumb { background: var(--fx-red); border-radius: 4px; }

/* ── FOOTER ────────────────────────────────────────────────── */
.fx-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 50px 14px;
    border-top: 1px solid var(--fx-border-dim);
    flex-shrink: 0;
    font-family: var(--fx-font-mono);
    font-size: 11px;
    color: var(--fx-text-muted);
    letter-spacing: 1px;
}

/* ── SPLIT PANELS ──────────────────────────────────────────── */
.fx-split {
    display: flex;
    gap: var(--s-split-gap, 24px);
    flex: 1;
    min-height: 0;
}
.fx-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--fx-panel);
    border: 1px solid var(--fx-border);
    border-radius: 6px;
    overflow: hidden;
}
.fx-panel-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--fx-border);
    font-family: var(--fx-font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fx-panel-header .fx-tag {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.fx-panel-body {
    flex: 1;
    overflow: auto;
    position: relative;
    min-height: 0;
}
.fx-panel-footer {
    padding: 8px 16px;
    border-top: 1px solid var(--fx-border-dim);
    font-family: var(--fx-font-data);
    font-size: 11px;
    color: var(--fx-text-muted);
    flex-shrink: 0;
}

/* Panel accent borders */
.fx-panel.accent-red    { border-color: #ff554544; }
.fx-panel.accent-green  { border-color: #2de0b644; }
.fx-panel.accent-blue   { border-color: #3a86ba44; }
.fx-panel.accent-gold   { border-color: #ffb73244; }
.fx-panel.accent-red    .fx-panel-header { background: #1a0f0f; color: var(--fx-red); }
.fx-panel.accent-green  .fx-panel-header { background: #0f1a15; color: var(--fx-green); }
.fx-panel.accent-blue   .fx-panel-header { background: #0f141a; color: var(--fx-blue); }
.fx-panel.accent-gold   .fx-panel-header { background: #1a1610; color: var(--fx-gold); }

/* ── TAGS / BADGES ─────────────────────────────────────────── */
.fx-tag {
    display: inline-block;
    font-family: var(--fx-font-mono);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}
.fx-tag.verified    { background: #2de0b622; color: var(--fx-green); }
.fx-tag.false       { background: #ff554522; color: var(--fx-red); }
.fx-tag.misleading  { background: #ffb73222; color: var(--fx-gold); }
.fx-tag.unverified  { background: #3a86ba22; color: var(--fx-blue); }
.fx-tag.contradicts { background: #a77bdb22; color: var(--fx-purple); }
.fx-tag.match       { background: #2de0b633; color: var(--fx-green); border: 1px solid #2de0b644; }
.fx-tag.mismatch    { background: #ff554533; color: var(--fx-red); border: 1px solid #ff554544; }
.fx-tag.anomaly     { background: #ff8c4233; color: var(--fx-orange); border: 1px solid #ff8c4244; }

/* ── DATA DISPLAY ──────────────────────────────────────────── */
.fx-hash {
    font-family: var(--fx-font-data);
    font-size: 12px;
    color: var(--fx-text-dim);
    word-break: break-all;
    background: var(--fx-surface);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--fx-border-dim);
}
.fx-hash.highlight {
    color: var(--fx-gold);
    border-color: var(--fx-gold);
    background: #ffb73211;
}
.fx-filename {
    font-family: var(--fx-font-data);
    font-size: 13px;
    color: var(--fx-blue);
}
.fx-stat-value {
    font-family: var(--fx-font-mono);
    font-weight: 700;
    color: var(--fx-text-bright);
}
.fx-stat-label {
    font-family: var(--fx-font-sans);
    font-size: 12px;
    color: var(--fx-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ── CALLOUT BOXES ─────────────────────────────────────────── */
.fx-callout {
    padding: 16px 20px;
    border-radius: 6px;
    border-left: 3px solid;
    margin: 12px 0;
    font-size: var(--s-callout-size, 14px);
    line-height: 1.5;
}
.fx-callout.red    { background: #ff554511; border-color: var(--fx-red); }
.fx-callout.gold   { background: #ffb73211; border-color: var(--fx-gold); }
.fx-callout.blue   { background: #3a86ba11; border-color: var(--fx-blue); }
.fx-callout.green  { background: #2de0b611; border-color: var(--fx-green); }
.fx-callout.purple { background: #a77bdb11; border-color: var(--fx-purple); }

.fx-callout strong {
    color: var(--fx-text-bright);
}

/* ── COMPARISON HIGHLIGHT OVERLAYS ─────────────────────────── */
.fx-highlight-box {
    position: absolute;
    border: 2px solid var(--fx-red);
    border-radius: 3px;
    background: #ff554515;
    pointer-events: none;
    z-index: 5;
}
.fx-highlight-box.match {
    border-color: var(--fx-green);
    background: #2de0b615;
}
.fx-connector-line {
    position: absolute;
    pointer-events: none;
    z-index: 4;
}

/* ── DIFF TABLE (metadata comparisons) ─────────────────────── */
.fx-diff-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--fx-font-data);
    font-size: 13px;
}
.fx-diff-table th {
    text-align: left;
    padding: 8px 12px;
    background: var(--fx-surface);
    color: var(--fx-text-dim);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--fx-border);
}
.fx-diff-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--fx-border-dim);
    vertical-align: top;
}
.fx-diff-table tr:hover td {
    background: #ffffff06;
}
.fx-diff-table .field-name {
    color: var(--fx-text-dim);
    font-size: 12px;
    white-space: nowrap;
    width: 180px;
}
.fx-diff-table .val-match   { color: var(--fx-green); }
.fx-diff-table .val-differ  { color: var(--fx-red); }
.fx-diff-table .val-missing { color: var(--fx-text-muted); font-style: italic; }
.fx-diff-table .val-neutral { color: var(--fx-text); }

/* ── IMAGE COMPARISON SLIDER ───────────────────────────────── */
.fx-img-compare {
    position: relative;
    width: 100%; height: 100%;
    overflow: hidden;
    cursor: col-resize;
}
.fx-img-compare img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    background: var(--fx-surface);
}
.fx-img-compare .fx-img-overlay {
    clip-path: inset(0 var(--clip-right, 50%) 0 0);
}
.fx-img-compare .fx-img-divider {
    position: absolute;
    top: 0; bottom: 0;
    left: var(--divider-x, 50%);
    width: 3px;
    background: var(--fx-red);
    z-index: 10;
    pointer-events: none;
}
.fx-img-compare .fx-img-divider::before {
    content: '◀ ▶';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--fx-red);
    color: white;
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 2px;
}

/* ── PDF CANVAS CONTAINERS ─────────────────────────────────── */
.fx-pdf-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--fx-border) var(--fx-surface);
}
.fx-pdf-container canvas {
    max-width: 100%;
    height: auto;
    display: block;
    background: white;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

/* ── TABULATOR OVERRIDES (midnight theme base) ─────────────── */
.fx-table-container .tabulator {
    background: var(--fx-surface);
    border: 1px solid var(--fx-border);
    border-radius: 6px;
    font-family: var(--fx-font-data);
    font-size: 13px;
}
.fx-table-container .tabulator .tabulator-header {
    background: var(--fx-elevated);
    border-bottom: 2px solid var(--fx-border);
}
.fx-table-container .tabulator .tabulator-header .tabulator-col {
    background: transparent;
    border-right-color: var(--fx-border);
}
.fx-table-container .tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--fx-text-dim);
    font-weight: 700;
}
.fx-table-container .tabulator .tabulator-row {
    border-bottom-color: var(--fx-border-dim);
}
.fx-table-container .tabulator .tabulator-row:hover {
    background: #ffffff08 !important;
}
.fx-table-container .tabulator .tabulator-row .tabulator-cell {
    border-right-color: var(--fx-border-dim);
    color: var(--fx-text);
}

/* Cell formatters */
.fx-cell-red    { color: var(--fx-red) !important; font-weight: 600; }
.fx-cell-green  { color: var(--fx-green) !important; font-weight: 600; }
.fx-cell-gold   { color: var(--fx-gold) !important; font-weight: 600; }
.fx-cell-blue   { color: var(--fx-blue) !important; font-weight: 600; }
.fx-cell-hash   { font-family: var(--fx-font-data); font-size: 11px; color: var(--fx-text-dim); }
.fx-cell-mono   { font-family: var(--fx-font-data); }

/* ── GRAPH CONTAINER ───────────────────────────────────────── */
.fx-graph-container {
    flex: 1;
    min-height: 0;
    background: var(--fx-surface);
    border: 1px solid var(--fx-border);
    border-radius: 6px;
    overflow: hidden;
}

/* ── CHART CONTAINER ───────────────────────────────────────── */
.fx-chart-container {
    flex: 1;
    min-height: 0;
    background: var(--fx-panel);
    border: 1px solid var(--fx-border);
    border-radius: 6px;
    padding: 12px;
}

/* ── ANIMATIONS ────────────────────────────────────────────── */
@keyframes fxFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fxSlideLeft {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fxSlideRight {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fxScaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes fxPulseRed {
    0%, 100% { box-shadow: 0 0 0 0 #ff554500; }
    50%      { box-shadow: 0 0 12px 4px #ff554444; }
}

.fx-animate {
    opacity: 0;
    animation: fxFadeIn 0.5s ease forwards;
}
.fx-animate-left  { opacity: 0; animation: fxSlideLeft 0.5s ease forwards; }
.fx-animate-right { opacity: 0; animation: fxSlideRight 0.5s ease forwards; }
.fx-animate-scale { opacity: 0; animation: fxScaleIn 0.4s ease forwards; }

/* Stagger helper: use style="animation-delay: 0.1s" etc. */

/* ── METRIC CARDS ──────────────────────────────────────────── */
.fx-metrics {
    display: flex;
    gap: var(--s-metric-gap, 16px);
    flex-wrap: wrap;
}
.fx-metric-card {
    background: var(--fx-card);
    border: 1px solid var(--fx-border);
    border-radius: 6px;
    padding: 16px 20px;
    min-width: 160px;
    flex: 1;
}
.fx-metric-card .value {
    font-family: var(--fx-font-mono);
    font-size: var(--s-metric-value, 36px);
    font-weight: 700;
    color: var(--fx-text-bright);
    line-height: 1.1;
}
.fx-metric-card .label {
    font-family: var(--fx-font-sans);
    font-size: 12px;
    color: var(--fx-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 6px;
}
.fx-metric-card.red    .value { color: var(--fx-red); }
.fx-metric-card.gold   .value { color: var(--fx-gold); }
.fx-metric-card.green  .value { color: var(--fx-green); }
.fx-metric-card.blue   .value { color: var(--fx-blue); }

/* ── LEGEND ────────────────────────────────────────────────── */
.fx-legend {
    display: flex;
    gap: 20px;
    padding: 8px 0;
    font-size: 12px;
    color: var(--fx-text-dim);
}
.fx-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.fx-legend-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
}

/* ── UTILITY ───────────────────────────────────────────────── */
.fx-divider {
    height: 1px;
    background: var(--fx-border-dim);
    margin: 12px 0;
}
.fx-spacer { flex: 1; }
.fx-row { display: flex; align-items: center; gap: 12px; }
.fx-col { display: flex; flex-direction: column; gap: 8px; }
.fx-center { display: flex; align-items: center; justify-content: center; }
.fx-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--fx-border) var(--fx-surface); }
.fx-mono { font-family: var(--fx-font-data); }
.fx-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-nowrap { white-space: nowrap; }