body {
    background: #f7f7fa;
}
.card {
    border: 1px solid #e3e6ea;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    overflow: hidden;   /* defensive: keeps Plotly from painting past the card */
}

/* Era-specific left-border accents so the two tabs are visually distinct
   even when a reader is scanning card-to-card. */
.card.era-v2     { border-left: 4px solid #0d6efd; }  /* blue — v2 end products */
.card.era-legacy { border-left: 4px solid #ffc107; }  /* amber — legacy study */
.card.era-v2 .card-header     { background: #eef4ff; }
.card.era-legacy .card-header { background: #fff8e1; }
.card-header {
    background: #fbfbfd;
    border-bottom: 1px solid #e3e6ea;
    font-weight: 500;
    font-size: 0.95rem;
}
.card-body { overflow: hidden; }

.plot-full   { width: 100%; min-height: 420px; }
.plot-sm     { width: 100%; min-height: 360px; }
.plot-heatmap{ width: 100%; min-height: 340px; }

.metric-card {
    border-radius: 8px;
    padding: 1rem 1.25rem;
    background: white;
    border: 1px solid #e3e6ea;
}
.metric-card .label {
    font-size: 0.78rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.metric-card .value {
    font-size: 1.5rem;
    font-weight: 600;
    color: #212529;
}
.metric-card .hint {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.2rem;
}

.parity-table {
    font-size: 0.9rem;
}
.parity-table td.parity-ok  { background: #d1f2dc; color: #0d6832; }
.parity-table td.parity-eps { background: #fff3cd; color: #7a5b00; }
.parity-table td.parity-bad { background: #f8d7da; color: #842029; }

/* Tight grid.js table — override mermaid theme padding/fonts without
   breaking its default width computation. No `white-space: nowrap`:
   that combined with fixed widths caused second column to overlap
   third when cells had long strings. */
.gridjs-container { font-size: 0.8rem; }
.gridjs-wrapper   {
    box-shadow: none;
    border: 1px solid #e3e6ea;
    border-radius: 4px;
    overflow-x: auto;   /* allow horizontal scroll for wide tables */
}

.gridjs-table {
    font-size: 0.8rem;
    min-width: 100%;   /* fill container */
    width: auto;       /* but allow to grow beyond it */
    table-layout: auto;
}
.gridjs-th,
.gridjs-td {
    padding: 4px 8px !important;
    line-height: 1.25 !important;
    vertical-align: middle;
}
.gridjs-th {
    background: #f5f6f8 !important;
    font-weight: 600;
    color: #343a40;
    border-bottom: 1px solid #dee2e6 !important;
    white-space: nowrap;   /* headers only */
}
.gridjs-td  {
    border-bottom: 1px solid #f1f2f5 !important;
    word-break: break-word;
}
.gridjs-tr:hover .gridjs-td { background: #fafbfd; }

/* Footer (pagination / summary) */
.gridjs-footer  {
    background: #fafbfc !important;
    padding: 6px 10px !important;
    font-size: 0.78rem;
    border-top: 1px solid #e3e6ea;
}
.gridjs-pages button {
    padding: 2px 8px !important;
    font-size: 0.78rem !important;
}

/* Search input */
.gridjs-search input {
    padding: 4px 10px !important;
    font-size: 0.82rem !important;
    height: auto !important;
}
.gridjs-search { margin-bottom: 6px !important; }