/* Analistenweergave (Multistep-tab, sectie "Node analysis").
 *
 * WAAROM CSS-KLASSEN EN GEEN INLINE STYLES: de tabel is 55 nodes x 6 rijen x 32 kolommen =
 * 10.560 cellen. Met een eigen style-dict per cel worden dat ~31.000 React-elementen die Dash
 * moet serialiseren en de browser moet renderen -- Chrome gaf daarop "Page Unresponsive"
 * (gemeten 2026-08-28). Met een className per cel blijft er per cel alleen tekst + een korte
 * string over, en doet de CSS-engine het werk in plaats van React.
 */

.an-tbl {
    border-collapse: collapse;
    /* GEEN table-layout:fixed met width:100% -- dat verdeelde de breedte gelijk over 32 kolommen,
     * waardoor de nodenaam over de parameterkolom liep ("H02NC01M" + "BB1" eronder). De tabel
     * mag breder zijn dan het scherm; .an-wrap scrollt horizontaal. */
    width: max-content;
    min-width: 100%;
}

.an-tbl th,
.an-tbl td {
    padding: 2px 4px;
    font-size: 10px;
    text-align: right;
    white-space: nowrap;
}

.an-tbl th {
    font-size: 9.5px;
    font-weight: 700;
    border-bottom: 2px solid #e1e2e1;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}

.an-tbl th.an-l,
.an-tbl td.an-l {
    text-align: left;
    color: #3d3d3d;
    padding: 2px 6px;
}

/* De twee labelkolommen blijven staan bij horizontaal scrollen: zonder de nodenaam in beeld is
 * een rij halverwege de 30 dagen niet meer thuis te brengen. */
.an-tbl th.an-node,
.an-tbl td.an-node {
    width: 120px;
    min-width: 120px;
    vertical-align: top;
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
}

.an-tbl th.an-par,
.an-tbl td.an-par {
    width: 140px;
    min-width: 140px;
    position: sticky;
    left: 120px;
    background: #fff;
    z-index: 1;
}

/* De koprij moet boven de sticky labelkolommen blijven. */
.an-tbl thead th.an-node,
.an-tbl thead th.an-par {
    z-index: 3;
}

/* Dagkolommen: smal en gelijk, zodat 30 dagen naast elkaar passen. */
.an-tbl th:not(.an-l),
.an-tbl td:not(.an-l) {
    width: 44px;
    min-width: 44px;
}

/* Blokgrens tussen twee nodes, en tussen de labelkolommen en de dagen. */
.an-tbl .an-top { border-top: 2px solid #3d3d3d; }
.an-tbl .an-edge { border-left: 2px solid #3d3d3d; }

/* Waardebanden. Zelfde tinten als de dagmatrix (_MATRIX_BANDS in app.py) -- als je die
 * aanpast, pas ze hier ook aan. */
.an-good { background: #1a7a45; color: #fff; font-weight: 600; }
.an-warn { background: #e8952a; color: #3d2c00; font-weight: 600; }
.an-poor { background: #d9534f; color: #fff; font-weight: 600; }
.an-bad  { background: #a02020; color: #fff; font-weight: 600; }
.an-none { background: #f2f3f4; color: #b0b4b8; }

/* Dag met een geplande Multistep-interventie: oranje onderrand op de DICE-rij. */
.an-iv { border-bottom: 3px solid #c4610b !important; }

/* "HE dipped too?"-rij. */
.an-he   { background: #7f5fc0; color: #fff; font-weight: 700; text-align: center; }
.an-self { background: #fdecea; color: #a02020; font-weight: 700; text-align: center; }
.an-quiet { color: #d0d3d6; text-align: center; }

.an-node-name { font-weight: 700; }
.an-node-status { font-size: 9px; color: #8a8f98; }

.an-wrap {
    max-height: 70vh;
    overflow: auto;
    border: 1px solid #e1e2e1;
}

/* De tabel komt binnen via dcc.Markdown(dangerously_allow_html=True) — één string i.p.v.
 * duizenden Dash-componenten (zie de docstring van ms_analysis). Markdown zet zijn inhoud in
 * een eigen div, dus de scroll-container en de tabelbreedte moeten daar rekening mee houden. */
.an-wrap > div,
.an-wrap p {
    margin: 0;
}

.an-wrap table {
    margin: 0;
}

/* Cellen zonder oordeel (de probleemmodem-rijen): wel leesbaar, geen kleur die iets suggereert. */
.an-plain {
    background: #fff;
    color: #3d3d3d;
}