/* =============================================================================
   Index Dashboard — subscriber-facing pages (/dashboard, /company, /pillars)
   Chart chrome follows the data-viz method: recessive grid, ink tokens for text,
   diverging fills for scores, thin marks. Colours here are chrome only; data
   colours come from ScoreScale.cs so light/dark stay in one place.
   ============================================================================= */

/* ---- page ------------------------------------------------------------------ */
.na-page-title { font-weight: 700; letter-spacing: -0.01em; }
.na-subtle     { color: #4B5563; }
.na-muted      { color: #898781; }
.na-tabular    { font-variant-numeric: tabular-nums; }
.na-mono       { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8em; }

/* ---- controls row (one row above the charts) -------------------------------- */
.na-controls {
    display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end;
    padding: 12px 16px; background: #FFFFFF; border: 1px solid rgba(11,11,11,.08);
    border-radius: 10px; margin-bottom: 16px;
}
.na-controls__group { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.na-controls__label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #898781; font-weight: 600; }
.na-controls__spacer { flex: 1 1 auto; }

/* ---- stat tiles ------------------------------------------------------------- */
.na-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.na-tile {
    background: #FFFFFF; border: 1px solid rgba(11,11,11,.08); border-radius: 10px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-height: 92px;
}
.na-tile__label { font-size: 12px; color: #4B5563; font-weight: 600; letter-spacing: .02em; }
.na-tile__value { font-size: 26px; font-weight: 600; color: #111827; line-height: 1.15; }
.na-tile__hint  { font-size: 12px; color: #898781; }
.na-hero        { font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: #111827; }

/* ---- score cells / heatmap ------------------------------------------------- */
.na-cell {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 72px; padding: 6px 8px; border-radius: 6px; line-height: 1.15;
    font-variant-numeric: tabular-nums; border: 1px solid rgba(11,11,11,.06);
    transition: transform .08s ease, box-shadow .08s ease;
}
.na-cell--clickable { cursor: pointer; }
.na-cell--clickable:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.na-cell--empty { background: repeating-linear-gradient(45deg, #FAFAF9 0 4px, #F0EFEC 4px 8px) !important; color: #898781 !important; }
.na-cell__value { font-weight: 600; font-size: 14px; }
.na-cell__delta { font-size: 11px; margin-top: 1px; }
.na-cell__rank  { font-size: 10.5px; margin-top: 1px; }

.na-heatmap-wrap { overflow-x: auto; }
.na-heatmap { border-collapse: separate; border-spacing: 4px 4px; width: 100%; }
.na-heatmap th {
    font-size: 11.5px; font-weight: 600; color: #4B5563; text-align: center; padding: 6px 4px 8px;
    white-space: nowrap; letter-spacing: .01em; vertical-align: bottom;
}
.na-heatmap th.na-th--sortable { cursor: pointer; user-select: none; }
.na-heatmap th.na-th--sortable:hover { color: #1E3A8A; }
.na-heatmap th.na-th--active { color: #1E3A8A; }
.na-heatmap th.na-th--company { text-align: left; padding-left: 8px; }
.na-heatmap td { padding: 0; text-align: center; vertical-align: middle; }
.na-heatmap td.na-td--company { text-align: left; padding: 4px 8px; white-space: nowrap; }
.na-heatmap tr.na-row--clickable { cursor: pointer; }
.na-heatmap tr.na-row--clickable:hover td.na-td--company { background: #F3F4F6; border-radius: 6px; }
.na-heatmap .na-cell { width: 100%; }
.na-company__ticker { font-weight: 700; color: #111827; }
.na-company__name   { color: #4B5563; font-size: 12px; margin-left: 6px; }
.na-company__sector { display: block; color: #898781; font-size: 11px; margin-top: 1px; }

/* colour legend under a heatmap */
.na-scale { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #4B5563; flex-wrap: wrap; }
.na-scale__bar {
    height: 10px; width: 220px; border-radius: 5px; border: 1px solid rgba(11,11,11,.08);
    background: linear-gradient(90deg, #D03B3B 0%, #F0EFEC 50%, #256ABF 100%);
}

/* ---- deltas ---------------------------------------------------------------- */
.na-delta { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; white-space: nowrap; }
.na-delta--up   { color: #006300; }
.na-delta--down { color: #B42323; }
.na-delta--flat { color: #4B5563; }
.na-delta--none { color: #9CA3AF; font-weight: 400; }
.na-delta__icon { font-size: 10px; }

/* ---- band chips ------------------------------------------------------------ */
.na-band { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(11,11,11,.10); background: #FFFFFF; color: #111827; white-space: nowrap; }

/* ---- pillar trellis (company page) ---------------------------------------- */
.na-trellis { width: 100%; border-collapse: collapse; }
.na-trellis th { font-size: 11.5px; font-weight: 600; color: #4B5563; text-align: left; padding: 8px 10px; border-bottom: 1px solid #E5E7EB; white-space: nowrap; }
.na-trellis td { padding: 8px 10px; border-bottom: 1px solid #F1F1EF; vertical-align: middle; }
.na-trellis tr.na-row--clickable { cursor: pointer; }
.na-trellis tr.na-row--clickable:hover td { background: #F9FAFB; }
.na-trellis tr.na-row--open td { background: #F3F4F6; }
.na-trellis .na-num { text-align: right; font-variant-numeric: tabular-nums; }
.na-trellis .na-pillar-name { font-weight: 600; color: #111827; }
.na-detail { background: #FAFAF9; border-left: 3px solid #1E3A8A; margin: 0 0 12px 0; padding: 12px 14px; border-radius: 0 8px 8px 0; }
.na-detail table { width: 100%; border-collapse: collapse; }
.na-detail th { font-size: 11px; color: #898781; text-align: left; padding: 4px 8px; font-weight: 600; }
.na-detail td { padding: 5px 8px; border-top: 1px solid #EEEDEA; font-size: 13px; vertical-align: top; }
.na-detail tr.na-row--clickable { cursor: pointer; }
.na-detail tr.na-row--clickable:hover td { background: #F3F4F6; }
.na-detail__variables { background: #FFFFFF; border: 1px solid #EEEDEA; border-radius: 6px; margin: 4px 0 8px; }

/* ---- 10-K evidence --------------------------------------------------------- */
.na-evidence { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.na-insight { background: #FFFFFF; border: 1px solid #EEEDEA; border-radius: 8px; padding: 10px 12px; }
.na-insight__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.na-insight__phrase { font-weight: 600; color: #111827; }
.na-insight__context { color: #4B5563; font-size: 13px; margin-top: 4px; }
.na-insight__proof { margin: 8px 0 0; padding: 6px 10px; border-left: 3px solid #E1E0D9; color: #52514E; font-size: 12.5px; font-style: italic; }
.na-impact { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.na-impact--pos { background: #E4EEF9; color: #1C5CAB; }
.na-impact--neg { background: #FBE7E7; color: #B42323; }
.na-impact--neu { background: #F0EFEC; color: #52514E; }
.na-evidence__summary { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: #4B5563; }

/* ---- charts chrome --------------------------------------------------------- */
.na-radar { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.na-linechart { overflow-x: auto; }
.na-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: #4B5563; margin-top: 6px; }
.na-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.na-legend__item--muted { color: #898781; }
.na-legend__swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; box-sizing: border-box; }
.na-spark { vertical-align: middle; }

/* movers */
.na-movers { display: grid; grid-template-columns: 1fr; gap: 6px; }
.na-mover { display: grid; grid-template-columns: 96px 1fr 72px; align-items: center; gap: 8px; font-size: 13px; }
.na-mover__bar { position: relative; height: 12px; background: #F3F4F6; border-radius: 6px; overflow: hidden; }
.na-mover__mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #898781; }
.na-mover__fill { position: absolute; top: 2px; bottom: 2px; border-radius: 4px; }
.na-mover__fill--up { left: 50%; background: #256ABF; }
.na-mover__fill--down { right: 50%; background: #D03B3B; }

/* company chip list (pillar explorer) */
.na-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- print / report -------------------------------------------------------- */
.na-report { max-width: 980px; margin: 0 auto; color: #111827; }
.na-report h1, .na-report h2, .na-report h3 { letter-spacing: -0.01em; }
.na-report__section { break-inside: avoid; margin-bottom: 20px; }
.na-print-only { display: none; }
@media print {
    @page { size: A4; margin: 14mm; }
    body { background: #FFFFFF !important; }
    .na-no-print, .mud-appbar, .mud-drawer, .na-statusbar { display: none !important; }
    .na-print-only { display: block; }
    .na-report { max-width: none; }
    .na-report__section { page-break-inside: avoid; }
    .na-cell { border: 1px solid #DDD; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .na-mover__fill, .na-scale__bar, .na-impact { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    a { text-decoration: none; color: inherit; }
}