:root {
    --ink: #242b31;
    --muted: #6b737a;
    --line: #e0e5e7;
    --accent: #0c7166;
    --sidebar-width: 264px;
}

body { margin: 0; background: #f5f7f8; color: var(--ink); font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; letter-spacing: 0; }
a { color: var(--accent); }
.sidebar { --bs-offcanvas-width: var(--sidebar-width); width: var(--sidebar-width); background: #fff !important; border-right: 1px solid var(--line); }
.brand { height: 76px; padding: 0 25px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.brand-name { color: var(--ink); text-decoration: none; font-size: 30px; font-weight: 750; display: flex; align-items: baseline; gap: 4px; }
.brand-dot { width: 7px; height: 7px; background: var(--accent); }
.sidebar-content { display: flex; flex-direction: column; flex: 1; padding: 25px 14px 20px; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; margin-bottom: 4px; border-radius: 4px; color: #515b63; text-decoration: none; line-height: 1.4; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item.active { color: #08675e; background: #e8f3f0; font-weight: 600; }
.nav-item.active:hover { background: #deeeea; }
.nav-item > span { min-width: 0; overflow-wrap: anywhere; }
/* Rubriques repliables : bouton natif + liste. Le panneau replié porte l'attribut hidden (display: none), donc sans liens tabulables. */
.nav-group { margin-bottom: 4px; }
.nav-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 4px; background: transparent; color: #515b63; font: inherit; font-weight: 600; line-height: 1.4; text-align: left; cursor: pointer; }
.nav-toggle:hover { background: #f1f4f5; color: var(--ink); }
.nav-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-toggle-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.nav-chevron { flex-shrink: 0; width: 7px; height: 7px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.nav-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(45deg); }
/* Repère du parent de la page courante, visible aussi quand la rubrique est repliée. */
.nav-toggle.has-current { color: #08675e; box-shadow: inset 3px 0 0 var(--accent); }
.nav-toggle:focus-visible, .nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-panel { list-style: none; margin: 2px 0 6px 21px; padding: 0 0 0 8px; border-left: 1px solid var(--line); }
.nav-panel .nav-item { min-height: 40px; margin-bottom: 2px; padding: 8px 10px; }
.sidebar-footer { margin-top: auto; padding: 36px 12px 0; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.status-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; display: inline-block; background: var(--accent); }
.status { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.status-active { background: #e6f4f1; border-color: #bfe0d9; color: #08675e; }
.status-inactive { background: #fdeceb; border-color: #f3ccc9; color: #94332c; }
.status-warning { background: #fdf3e2; border-color: #f2ddb6; color: #8a5a10; }
.status-formula { background: #eaf1fb; border-color: #c5d8f2; color: #1d4e89; white-space: normal; }
.status-neutral { background: #f1f3f4; border-color: #dde2e4; color: #58656d; }
.legend { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: 12px; }
.legend li { display: flex; align-items: center; gap: 7px; }
.matrix-total th, .matrix-total td { background: #f8fafb; border-top: 2px solid var(--line); }
.matrix-edit-link { display: block; margin-top: 4px; font-size: 11px; }
.app-shell { display: flex; flex-direction: column; min-height: 100dvh; }
.topbar { min-height: 76px; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; border-bottom: 1px solid var(--line); }
.topbar-title { color: #515b63; font-weight: 500; }
.environment-label { font-size: 11px; padding: 4px 8px; border: 1px solid #d9e2e6; border-radius: 4px; background: #f3f6f8; color: #536872; flex-shrink: 0; }
.icon-button { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 6px; border: 1px solid var(--line); border-radius: 4px; }
.icon-button svg { width: 20px; height: 20px; }
.main-content { flex: 1; width: 100%; max-width: 1400px; margin: 0 auto; padding: 36px 32px; min-width: 0; }
.breadcrumb-label { font-size: 12px; margin-bottom: 8px; color: var(--muted); }
h1 { font-size: 26px; line-height: 1.3; font-weight: 650; margin: 0; }
.page-heading { margin-bottom: 32px; }
.workspace-section { border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 21px 0; border-bottom: 1px solid var(--line); }
.section-heading h2 { font-size: 15px; margin: 0; font-weight: 600; }
.badge-status { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.empty-workspace { text-align: center; padding: 90px 16px; border-bottom: 1px solid var(--line); }
.empty-workspace > svg { width: 32px; height: 32px; color: #7f9693; margin-bottom: 20px; }
.empty-workspace h3 { font-size: 17px; margin-bottom: 8px; font-weight: 600; }
.empty-workspace p { margin: 0; color: var(--muted); }
.app-footer { display: flex; justify-content: space-between; padding: 18px 32px; color: var(--muted); font-size: 11px; border-top: 1px solid var(--line); }
.skip-link { position: absolute; z-index: 1100; padding: 12px; background: white; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#main-content:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.anonymous-shell { margin-left: 0 !important; }
.account-tools, .page-toolbar, .form-actions, .row-actions { display: flex; align-items: center; gap: 12px; }
.account-tools { justify-content: flex-end; min-width: 0; }
.account-email { overflow-wrap: anywhere; font-size: 12px; }
.page-toolbar { justify-content: space-between; flex-wrap: wrap; }
.row-actions { justify-content: flex-end; gap: 6px; }
.row-actions form { margin: 0; }
/* Commandes de ligne des référentiels M3. Bootstrap .btn:focus-visible remet le contour à zéro ; ces boutons icônes n'ont pas l'ombre d'une variante. */
.m3-row-actions .btn.icon-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: none; }
/* Commandes à icône des référentiels et trafics M1. Même conflit Bootstrap, limité à ce lot pour laisser inchangés M2, M3 et la pagination partagée. */
.m1-row-actions .btn.icon-button:focus-visible,
.m1-list-paging .list-footer .btn.icon-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: none; }
/* Historique des imports statistiques M1. Même conflit Bootstrap, sans changer M2, M3 ni la pagination partagée. */
.m1-import-history .btn.icon-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: none; }
.btn { border-radius: 4px; font-size: 14px; }
.btn svg { width: 18px; height: 18px; vertical-align: middle; flex-shrink: 0; }
.btn:not(.icon-button) svg { margin-right: 8px; }
.btn-primary { --bs-btn-bg: #0c7166; --bs-btn-border-color: #0c7166; --bs-btn-hover-bg: #075f55; --bs-btn-hover-border-color: #075f55; --bs-btn-active-bg: #075f55; --bs-btn-active-border-color: #075f55; }
.view-tabs { display: flex; gap: 22px; margin-bottom: 20px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.view-tabs a { flex-shrink: 0; padding: 0 0 10px; color: #58656d; text-decoration: none; }
.view-tabs a:hover { color: var(--accent); }
.view-tabs a.active { color: var(--accent); border-bottom: 2px solid var(--accent); font-weight: 600; }
.filter-bar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding-bottom: 24px; }
.filter-bar > div { min-width: 140px; }
.filter-bar select[multiple] { min-width: 180px; }
.filter-clear { display: block; margin-top: 4px; padding: 0; font-size: 12px; }
.filter-search { flex: 1; }
.forecast-traffic-filter { flex: 1 1 100%; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0; padding: 8px 12px; background: #e8f3f0; border: 1px solid #bfe0d9; border-radius: 4px; }
.forecast-traffic-filter span { min-width: 0; overflow-wrap: anywhere; }
.form-control, .form-select { font-size: 14px; border-radius: 4px; min-height: 36px; }
.form-label { font-size: 12px; font-weight: 600; }
.definition-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 4px; }
.definition-label .form-label { margin-bottom: 0; }
.field-requirement { color: var(--muted); font-size: 12px; font-weight: 600; }
.definition-legend { margin: 0 0 16px; color: var(--muted); font-size: 12px; }
.field-hint { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--line); }
.table th { font-size: 12px; color: #58656d; font-weight: 600; background: #edf1f3; }
.table td, .table th { padding: 12px; }
.table td { overflow-wrap: anywhere; }
.table-responsive { overflow-x: auto; }
.table-responsive .table th, .table-responsive .table td { overflow-wrap: normal; white-space: nowrap; }
.table-responsive .wrap-table th, .table-responsive .wrap-table td { white-space: normal; overflow-wrap: anywhere; }
/* anywhere réduit la largeur minimale et coupe Administrateur ou l'e-mail au milieu du mot. */
.table-responsive .users-table th, .table-responsive .users-table td { white-space: normal; overflow-wrap: break-word; word-break: normal; hyphens: manual; }
.entity-id { max-width: 260px; font-size: 12px; }
.table-responsive { border-top: 1px solid var(--line); }
.empty-row { text-align: center; padding: 48px !important; color: var(--muted); }
.list-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
.form-stack { display: flex; flex-direction: column; gap: 20px; }
.edit-form { max-width: 720px; }
.permission-choice { overflow-wrap: anywhere; }
.permission-description { display: block; margin-top: 2px; color: var(--muted); font-weight: 400; overflow-wrap: anywhere; }
.permission-list { list-style: none; margin: 0 0 24px; padding: 0; }
.permission-list li { padding: 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.permission-list .permission-key { display: block; color: var(--muted); }
.profile-detail-link { display: inline-block; margin-left: 8px; }
.admin-form { max-width: 720px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.section-title { font-size: 1.05rem; font-weight: 600; margin: 8px 0 12px; }
.detail-list { display: grid; grid-template-columns: minmax(100px, 180px) minmax(0, 1fr); gap: 12px; padding-bottom: 24px; }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }
/* M2 forecast run detail only. Long provenance keys wrap instead of covering their values. */
.forecast-run-provenance { align-items: start; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
.forecast-run-provenance > dt,
.forecast-run-provenance > dd { min-width: 0; overflow-wrap: anywhere; }
.forecast-run-provenance .forecast-source-name,
.forecast-run-provenance .forecast-source-code,
.forecast-run-provenance .forecast-source-summary,
.forecast-run-provenance .forecast-source-id { display: block; min-width: 0; overflow-wrap: anywhere; }
/* M2 forecast run detail, width >= 992px. One native table; the card list is removed from display and the accessibility tree. */
.forecast-run-table { max-width: 100%; min-width: 0; margin-bottom: 1rem; overflow-x: auto; border-top: 1px solid var(--line); }
.forecast-run-table .forecast-run-results { width: max-content; min-width: 100%; margin-bottom: 0; }
.forecast-run-table .forecast-run-results th, .forecast-run-table .forecast-run-results td { white-space: nowrap; }
.forecast-run-table tbody .forecast-run-year { font-size: 14px; font-weight: 400; color: var(--ink); background-color: #f5f7f8; }
.forecast-run-cards { display: none; }
.break-anywhere { overflow-wrap: anywhere; }
.annual-values { table-layout: fixed; }
.annual-values th:first-child { width: 110px; }
.annual-values th:last-child { width: 70px; }
.annual-entry-guidance { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.annual-entry-guidance p { margin: 0; }
#annual-year-warning[hidden] { display: none !important; }
.updates-heading { align-items: flex-start; }
.updates-heading > div { min-width: 0; max-width: 100%; }
.updates-heading h1, .owner-return { overflow-wrap: anywhere; }
.owner-return { display: inline-block; margin-top: 8px; max-width: 100%; }
.table-responsive .updates-history td.owner-name,
.table-responsive .updates-history td.organization-name { white-space: normal; overflow-wrap: anywhere; }
.table-responsive .updates-history th.update-period,
.table-responsive .updates-history td.update-period { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.updates-history td.update-period, .updates-history td.update-created { font-variant-numeric: tabular-nums; }
.form-actions { padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
fieldset { border-top: 1px solid var(--line); padding-top: 16px; }
legend { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.form-check { margin-bottom: 8px; }
.terminal-picker { margin-top: 16px; }
.terminal-picker-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.terminal-picker-count { color: var(--muted); font-size: 12px; font-weight: 600; }
.terminal-picker-selected { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; max-height: 96px; overflow: auto; padding: 0; margin: 0; }
.terminal-picker-selected[hidden], .terminal-picker-option[hidden], .terminal-picker-group[hidden], .terminal-picker-empty[hidden], .terminal-picker-no-match[hidden] { display: none !important; }
.terminal-picker-selected li { display: flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 4px 2px 10px; border: 1px solid #bfe0d9; border-radius: 999px; background: #e8f3f0; }
.terminal-picker-selected li span { overflow-wrap: anywhere; }
.terminal-picker:not([data-enhanced]) .terminal-picker-remove { display: none; }
.terminal-picker-remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); }
.terminal-picker-remove svg { width: 16px; height: 16px; }
.terminal-picker-empty, .terminal-picker-no-match, .terminal-picker-hint { margin: 0; color: var(--muted); font-size: 12px; }
.terminal-picker-groups { max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.terminal-picker-group { border-bottom: 1px solid var(--line); }
.terminal-picker-group:last-child { border-bottom: 0; }
.terminal-picker-group summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; cursor: pointer; font-weight: 600; }
.terminal-picker-group summary:hover { background: #f5f7f8; }
.terminal-picker-group summary span:first-child { overflow-wrap: anywhere; }
.terminal-picker-group-count { flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 600; }
.terminal-picker-options { padding: 0 12px 8px 28px; }
.terminal-picker-option { min-height: 32px; margin-bottom: 0; }
.terminal-picker-option .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.permission-choice small { display: block; color: var(--muted); overflow-wrap: anywhere; }
.login-panel { width: 100%; max-width: 420px; margin: 48px auto; }
.login-panel h1 { margin-bottom: 32px; }
.audit-metadata { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding-bottom: 24px; }
.audit-metadata dd { margin: 0; overflow-wrap: anywhere; }
.snapshot-title { font-size: 16px; }
.snapshot { padding: 16px; background: #edf1f3; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 80px; }
.audit-filters > div { flex: 1; }
.matrix-scroll { max-width: 100%; overflow: auto; border: 1px solid var(--line); }
/* The summary matrix scrolls inside itself, so the annual header stays visible.
   42rem leaves the topbar, heading, tabs, filters and footer usable on a 1080px viewport.
   16rem keeps a readable matrix when the viewport is shorter. scroll-padding keeps a
   focused cell from sitting under the sticky header. */
.matrix-scroll.m3-summary-scroll {
    max-height: max(16rem, calc(100dvh - 42rem));
    scroll-padding-top: 4.5rem;
}
.forecast-matrix { width: max-content; min-width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }
.forecast-matrix th, .forecast-matrix td { min-width: 104px; white-space: nowrap; border-right: 1px solid var(--line); }
.forecast-matrix thead th { position: sticky; top: 0; z-index: 2; }
.forecast-matrix .sticky-identity { position: sticky; left: 0; z-index: 1; min-width: 190px; max-width: 260px; white-space: normal; background: #f8fafb; box-shadow: 1px 0 0 var(--line); }
.forecast-matrix tr.forecast-total .sticky-identity { font-weight: 700; background: #e7eef2; }
.forecast-matrix thead .sticky-identity { z-index: 3; background: #edf1f3; }
/* Three frozen columns. Widths are border-box and match the sticky left offsets.
   200+96+280 leaves a 104px year column visible in an 800px viewport. These offsets
   apply at every width and stay independent from the summary matrix. */
.forecast-matrix.current-forecasts { --current-label-width: 200px; --current-unit-width: 96px; --current-context-width: 280px; }
.forecast-matrix.current-forecasts .identity-label,
.forecast-matrix.current-forecasts .identity-unit,
.forecast-matrix.current-forecasts .identity-context { position: sticky; z-index: 1; white-space: nowrap; box-shadow: none; background-color: #f8fafb; }
.forecast-matrix.current-forecasts .identity-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forecast-matrix.current-forecasts .identity-label .identity-text { width: calc(var(--current-label-width) - 25px); }
.forecast-matrix.current-forecasts .identity-unit .identity-text { width: calc(var(--current-unit-width) - 25px); }
.forecast-matrix.current-forecasts .identity-context .identity-text { width: calc(var(--current-context-width) - 25px); }
.forecast-matrix.current-forecasts .identity-label { left: 0; width: var(--current-label-width); min-width: var(--current-label-width); max-width: var(--current-label-width); }
.forecast-matrix.current-forecasts .identity-unit { left: var(--current-label-width); width: var(--current-unit-width); min-width: var(--current-unit-width); max-width: var(--current-unit-width); }
.forecast-matrix.current-forecasts .identity-context { left: calc(var(--current-label-width) + var(--current-unit-width)); width: var(--current-context-width); min-width: var(--current-context-width); max-width: var(--current-context-width); }
.forecast-matrix.current-forecasts thead .identity-label { z-index: 6; background-color: #edf1f3; }
.forecast-matrix.current-forecasts thead .identity-unit { z-index: 5; background-color: #edf1f3; }
.forecast-matrix.current-forecasts thead .identity-context { z-index: 4; background-color: #edf1f3; }
.forecast-matrix.current-forecasts tr.forecast-total .identity-label,
.forecast-matrix.current-forecasts tr.forecast-total .identity-unit,
.forecast-matrix.current-forecasts tr.forecast-total .identity-context { background-color: #e7eef2; }
.forecast-matrix.current-forecasts col.identity-label { width: var(--current-label-width); }
.forecast-matrix.current-forecasts col.identity-unit { width: var(--current-unit-width); }
.forecast-matrix.current-forecasts col.identity-context { width: var(--current-context-width); }
.forecast-cell { font-variant-numeric: tabular-nums; }
.forecast-notcalculated, .forecast-impossible, .forecast-incompleteallocation { color: #7a4545; background: #fff4f2 !important; }
.matrix-secondary { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.matrix-context { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 400; }
.matrix-fieldset { margin-top: 24px; }
.input-matrix td { min-width: 132px; padding: 7px; vertical-align: top; }
.matrix-input { width: 116px; min-width: 116px; text-align: right; font-variant-numeric: tabular-nums; }
.input-matrix .matrix-input.is-invalid { background-image: none; padding-right: 0.5rem; }
.input-matrix .field-validation-error { display: block; max-width: 116px; white-space: normal; overflow-wrap: anywhere; }
.matrix-not-applicable { text-align: center; background: #f1f3f4 !important; }
.m3-summary-matrix { --m3-summary-compact-width: 200px; }
.forecast-matrix.m3-summary-matrix thead th { background-color: #edf1f3; }
.m3-summary-matrix .identity-pole, .m3-summary-matrix .identity-port { box-shadow: none; }
.m3-summary-matrix .identity-pole { min-width: 128px; max-width: 128px; }
.m3-summary-matrix .identity-port { min-width: 132px; max-width: 132px; }
.m3-summary-matrix .identity-terminal { min-width: 150px; max-width: 150px; }
.m3-summary-matrix .summary-identity { display: none; }
.m3-summary-matrix .summary-identity-line { display: block; min-width: 0; }
.m3-summary-matrix .summary-identity-key { display: block; color: var(--muted); font-size: 10px; font-weight: 600; line-height: 1.2; }
.m3-summary-matrix .summary-identity-value { display: block; overflow-wrap: anywhere; line-height: 1.3; }
.saturation-details { border: 0; padding: 0; background: none; color: var(--accent); text-decoration: underline; font-variant-numeric: tabular-nums; }
.saturation-list { list-style: none; padding: 0; margin: 0; min-width: min(210px, 100%); max-width: 100%; }
.saturation-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; max-width: 100%; }
.saturation-list li span:last-child { flex: 1 1 9rem; min-width: min(100%, 8rem); max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: right; font-variant-numeric: tabular-nums; }
.popover.saturation-popover { --bs-popover-max-width: min(36rem, calc(100vw - 1rem)); width: max-content; max-width: min(36rem, calc(100vw - 1rem)); }
.popover.saturation-popover .popover-header,
.popover.saturation-popover .popover-body { overflow-wrap: anywhere; }
.formula-reference { margin-top: 8px; padding: 12px; border-left: 3px solid var(--accent); background: #eef5f3; color: #46545a; }
.chart-unit { margin: 0 0 12px; color: var(--muted); font-size: 12px; font-weight: 600; }
.m1-chart { position: relative; height: 380px; }
/* Équivalent tabulaire des graphiques M1 : le tableau défile dans .table-responsive, jamais la page. */
.m1-chart-data { margin-top: 16px; }
.m1-chart-data summary { cursor: pointer; font-size: 14px; font-weight: 600; padding: 6px 0; }
.m1-chart-data caption { caption-side: top; color: var(--muted); font-size: 12px; }

@media (min-width: 992px) {
    .sidebar { position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; height: 100dvh; }
    .app-shell { margin-left: var(--sidebar-width); }
    .m3-summary-matrix .identity-pole { left: 0; }
    .m3-summary-matrix .identity-port { left: 128px; }
    .m3-summary-matrix .identity-terminal { left: 260px; }
}

@media (max-width: 575.98px) {
    .topbar { padding: 12px 16px; }
    .topbar-title { font-size: 12px; }
    .environment-label { font-size: 10px; }
    .main-content { padding: 28px 16px; }
    h1 { font-size: 23px; }
    .app-footer { padding: 18px 16px; }
    .topbar { flex-wrap: wrap; }
    .account-tools { width: 100%; justify-content: space-between; }
    .filter-bar > div { flex: 1 1 100%; }
    .table { min-width: 540px; }
    .forecast-matrix:not(.current-forecasts) .sticky-identity { min-width: 150px; max-width: 190px; }
    .m1-chart { height: 280px; }
}

/* Below 992px the sidebar is off-canvas. At 800px the matrix scrollport is
   800px minus 32px of main padding on each side and the 1px border: 734px.
   A 200px identity column leaves the 104px year column visible. */
@media (max-width: 991.98px) {
    .m3-summary-matrix .identity-port,
    .m3-summary-matrix .identity-terminal,
    .m3-summary-matrix .identity-split { display: none; }
    .m3-summary-matrix .summary-identity { display: flex; flex-direction: column; gap: 4px; }
    .forecast-matrix.m3-summary-matrix .identity-compact {
        position: sticky;
        left: 0;
        z-index: 1;
        width: var(--m3-summary-compact-width);
        min-width: var(--m3-summary-compact-width);
        max-width: var(--m3-summary-compact-width);
        background-color: #f8fafb;
        white-space: normal;
        overflow-wrap: anywhere;
        vertical-align: top;
        box-shadow: 1px 0 0 var(--line);
    }
    .forecast-matrix.m3-summary-matrix thead .identity-compact {
        top: 0;
        z-index: 4;
        background-color: #edf1f3;
    }
}

/* M2 forecast run detail, width < 992px. Cards replace the table; display:none removes it from display and the accessibility tree. */
@media (max-width: 991.98px) {
    .forecast-run-table { display: none; }
    .forecast-run-cards { display: flex; flex-direction: column; gap: 12px; max-width: 100%; min-width: 0; margin-bottom: 1rem; }
    .forecast-run-card { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
    .forecast-run-card-year { margin: 0 0 8px; font-size: 16px; line-height: 1.3; font-weight: 650; }
    .forecast-run-card dl { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 8px 12px; margin: 0; }
    .forecast-run-card dt, .forecast-run-card dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
    .forecast-run-card dt { font-size: 12px; font-weight: 600; color: #58656d; }
    .forecast-run-card dd { white-space: normal; }
}