@import url("../../shared/app-shell.css");
@import url("../../shared/version-badge.css");

/* shared/version-badge.css positions the badge via tokens (--spacing-md, --font-family-base,
   ...) this page never defines (it uses --space-4 / --font-body instead) — without this
   override, `right`/`bottom` resolve to `auto` and the badge sits at its in-flow position
   far down the page instead of the corner, making it effectively invisible. */
.version-badge {
  right: var(--space-4);
  bottom: var(--space-4);
  background-color: var(--color-text);
  color: var(--color-surface);
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: 12px;
  border-radius: var(--radius-sm);
}

/* FIR-specific tokens layered on top of shared/app-shell.css's core palette — heatmap cell
   tiers, IFIR "open" status and chart series colors are only used on this page. */
:root {
  --color-heat-null: #c4c8cd;
  --color-heat-danger-text: #8f2323;
  --color-heat-success-text: #0d5c2c;
  --color-heat-good-bg: #e7f6ec;
  --color-heat-good-text: #0d5c2c;
  --color-heat-warn-bg: #fdf1d3;
  --color-heat-warn-text: #8a5a06;
  --color-heat-bad-bg: #fbe1e1;
  --color-heat-bad-text: #8f2323;
  --color-ifir-open-bg: #fdf8e6;
  --color-ifir-open-border: #e8d38a;
  --color-ifir-open-text: #7a6416;
  --color-grid-axis: #d1d5db;
  --color-grid-faint: #f1f3f4;
  --color-grid-faintest: #f6f7f8;

  --series-1: #1a9e4b;
  --series-2: #d64545;
  --series-3: #0f766e;
  --series-4: #7c9cc4;
  --series-5: #9ca3af;
  --series-6: #b45309;
  --series-7: #6d28d9;
  --series-8: #c2410c;
}

:root[data-theme="dark"] {
  --color-heat-null: #4b5563;
  --color-heat-danger-text: #ff9a9a;
  --color-heat-success-text: #6fe3a3;
  --color-heat-good-bg: #163523;
  --color-heat-good-text: #6fe3a3;
  --color-heat-warn-bg: #3a2f10;
  --color-heat-warn-text: #f0c419;
  --color-heat-bad-bg: #3a1f1f;
  --color-heat-bad-text: #ff9a9a;
  --color-ifir-open-bg: #332c10;
  --color-ifir-open-border: #6b5a1f;
  --color-ifir-open-text: #e8d38a;
  --color-grid-axis: #3a3f4b;
  --color-grid-faint: #20242e;
  --color-grid-faintest: #1b1e26;

  --series-1: #2fbd6c;
  --series-2: #f16767;
  --series-3: #2dd4c8;
  --series-4: #93b4de;
  --series-5: #9ca3af;
  --series-6: #e08a3c;
  --series-7: #a78bfa;
  --series-8: #f0855c;
}

.scope-row { display: flex; align-items: center; gap: var(--space-3); padding: 12px 0 14px; flex-wrap: wrap; }
.scope-label {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--color-accent-dark);
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; background: var(--color-chip-bg);
  border: 1px solid var(--color-border); border-radius: 7px; font-size: 11.5px; color: var(--color-text-soft);
}
.filter-chip-key { color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .1em; font-size: 9.5px; }
.filter-chip-clear { border: 0; background: transparent; cursor: pointer; color: var(--color-text-muted); font-size: 13px; line-height: 1; padding: 0; }
.filter-note { font-size: 11.5px; color: var(--color-text-muted); }

/* Overview: executive summary */
.exec-headline { display: flex; align-items: flex-end; gap: 14px; }
.exec-headline-value { font-family: var(--font-heading); font-weight: 700; font-size: 64px; line-height: .85; color: var(--color-accent-dark); }
.exec-headline-delta { font-size: 12.5px; font-weight: 600; color: var(--color-danger); }
.exec-headline-caption { font-size: 11.5px; color: var(--color-text-muted); }
.exec-note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--color-text-soft); max-width: 720px; }

.action-item {
  border: 1px solid var(--color-border-soft); border-left: 3px solid var(--color-danger); border-radius: var(--radius-md);
  padding: 13px 15px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center; background: var(--color-surface-subtle);
}
.action-item + .action-item { margin-top: 10px; }
.action-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.action-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.action-rank { font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--color-heat-null); }
.action-model { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--color-accent-dark); }
.action-why { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--color-text-soft); }
.action-verdict { font-size: 11.5px; font-weight: 600; color: var(--color-accent-dark); }

/* LOB cards */
.legend-row { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; font-size: 11px; color: var(--color-text-muted); }
.legend-dot { width: 9px; height: 9px; display: inline-block; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.lob-groups { display: flex; flex-direction: column; gap: 16px; }
.lob-group { display: flex; flex-direction: column; gap: 10px; }
.lob-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px,1fr)); gap: 12px; }
.lob-card.lob-card-group-head {
  flex-direction: row; justify-content: space-between; align-items: center; min-height: 0; padding: 12px 16px;
  background: var(--color-bg); border-color: var(--color-border);
}
.lob-card-group-head .lob-card-head { flex: none; flex-direction: column; align-items: flex-start; gap: 4px; }
.lob-card-group-head .lob-card-name { font-family: var(--font-heading); font-weight: 700; font-size: 15px; }
.lob-card-group-head .lob-card-metric { margin: 0; flex: none; }
.lob-card-group-head .lob-card-ytd { font-size: 36px; }
.lob-card-group-head .lob-card-foot { display: none; }
.lob-card.lob-card-group-head.is-selected { background: var(--color-row-selected); }
.lob-card {
  display: flex; flex-direction: column; gap: 10px; padding: 13px 14px; min-height: 128px; cursor: pointer;
  text-align: left; border-radius: 9px; background: var(--color-surface); border: 1px solid var(--color-border-soft);
}
.lob-card.is-selected { background: var(--color-row-selected); border-color: var(--color-accent-border); box-shadow: 0 1px 3px rgba(16,24,40,.07); }
.lob-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.lob-card-name { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.lob-card-metric { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; }
.lob-card-ytd { font-family: var(--font-heading); font-weight: 700; font-size: 31px; line-height: .9; }
.lob-card-foot { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--color-text-muted); border-top: 1px solid var(--color-border-soft); padding-top: 7px; }

/* AI narrative */
.ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 12px; }
.ai-card { border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); padding: 15px 16px; display: flex; flex-direction: column; gap: 9px; background: var(--color-surface-subtle); }
.ai-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-months { display: flex; align-items: center; gap: 6px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.ai-month-chip { padding: 2px 6px; border-radius: 4px; }
.ai-summary { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--color-text-soft); }
.ai-drivers { border-top: 1px solid var(--color-border-soft); padding-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.ai-driver { display: grid; grid-template-columns: 94px minmax(0,1fr); gap: 10px; font-size: 11.5px; align-items: baseline; }
.ai-driver-name { font-weight: 600; }
.ai-driver-detail { color: var(--color-text-muted); }
.ai-verdict { font-size: 11.5px; font-weight: 600; color: var(--color-accent-dark); margin-top: 2px; }

/* Priority queue */
.prio-head-row { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: baseline; border-bottom: 1px solid var(--color-border-soft); padding-bottom: 12px; }
.prio-lob { font-family: var(--font-heading); font-weight: 700; font-size: 17px; }
.prio-stat { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; }
.prio-stat-label { color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .08em; font-size: 9.5px; }
.prio-stat-value { font-weight: 700; font-size: 13px; }
.prio-models { margin: 0; font-size: 12.5px; color: var(--color-text-soft); }
.prio-models code { font-family: ui-monospace, Menlo, monospace; color: var(--color-accent-dark); }
.prio-block { border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.prio-block-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prio-block-model { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; font-weight: 700; }
.prio-block-summary { font-size: 11.5px; color: var(--color-text-muted); }
.prio-block-others { margin: 0; font-size: 11.5px; color: var(--color-text-muted); }

/* Tables */
.matrix-table, .symptom-table { border-collapse: separate; border-spacing: 0; font-size: 13px; }
.matrix-table { min-width: 1180px; width: 100%; }
.symptom-table { min-width: 1560px; width: 100%; font-size: 12.5px; }
.matrix-table th, .symptom-table th {
  position: sticky; top: 0; background: var(--color-surface-muted); text-align: center; padding: 10px 10px;
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted);
  border-top: 1px solid var(--color-border-soft); border-bottom: 1px solid var(--color-border); white-space: nowrap;
}
.matrix-table th:first-child, .symptom-table th:first-child {
  position: sticky; left: 0; z-index: 2; text-align: left; padding: 10px 20px; min-width: 264px;
}
.symptom-table th:not(:first-child) { max-width: 88px; white-space: normal; line-height: 1.25; }
.matrix-table td, .symptom-table td { padding: 9px 10px; text-align: center; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--color-hairline); font-size: 12.5px; }
.matrix-table td:first-child, .symptom-table td:first-child {
  position: sticky; left: 0; z-index: 1; padding: 0; background: var(--color-surface);
  border-right: 1px solid var(--color-border-soft); min-width: 264px; text-align: left;
}
.row-head { display: flex; align-items: center; width: 100%; }
.row-btn {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; border: 0; background: transparent;
  padding: 10px 20px; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.row-btn.is-child { padding-left: 38px; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; }
.row-chevron { width: 12px; display: inline-block; color: var(--color-text-muted); font-size: 10px; }
.row-name { font-size: 13px; font-weight: 600; }
.row-spark-btn {
  flex: none; margin-left: auto; border: 0; background: transparent; cursor: pointer;
  padding: 10px 20px 10px 6px; display: flex; align-items: center;
}
.row-spark { opacity: .9; }
.row-spark-btn:hover .row-spark { opacity: 1; }
.row-spark-btn:hover .row-spark polyline { stroke-width: 2; }

.matrix-table td.month-cell { padding: 0; }
.month-cell span { display: block; padding: 9px 10px; }
.cell-btn {
  display: block; width: 100%; border: 0; background: transparent; cursor: pointer;
  padding: 9px 10px; font: inherit; color: inherit; font-variant-numeric: tabular-nums;
}
.cell-btn:hover { text-decoration: underline; filter: brightness(0.96); }
.matrix-table th.sub-col, .matrix-table td.sub-col { border-left: 1px dashed var(--color-border); font-size: 11px; }
.th-expand-btn {
  border: 0; background: transparent; cursor: pointer; color: var(--color-text-muted);
  font-size: 13px; line-height: 1; padding: 0 2px;
}
.th-expand-btn:hover { color: var(--color-text); }
.matrix-row.is-selected td:first-child, .matrix-row.is-selected { background: var(--color-row-selected); }
.matrix-row.is-child, .matrix-row.is-child td:first-child { background: var(--color-surface-subtle); }
.matrix-row.is-child.is-selected td:first-child { background: var(--color-row-selected-alt); }
.symptom-row.is-open td:first-child { box-shadow: inset 3px 0 0 var(--color-accent); background: var(--color-row-selected); }
.symptom-first-cell { display: flex; flex-direction: column; gap: 2px; }
.symptom-row-head { display: flex; flex-direction: column; gap: 3px; padding: 10px 20px; }
.symptom-row-head .row-btn { padding: 0; }
.symptom-row-meta { padding-left: 21px; font-size: 10.5px; color: var(--color-text-muted); display: flex; align-items: center; gap: 4px; }
.symptom-row-meta .link-inline { font-size: 10.5px; }
.symptom-status { font-size: 11.5px; font-weight: 600; }
.symptom-status.is-escalating { color: var(--color-danger-dark); }
.symptom-status.is-improving { color: var(--color-accent-dark); }
.symptom-detail {
  border-top: 1px solid var(--color-border); padding: 16px 20px; display: grid;
  grid-template-columns: minmax(0,2fr) minmax(230px,1fr); gap: var(--space-5); background: var(--color-surface-muted);
}
.symptom-detail-log {
  max-height: 180px; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); padding: 10px 12px; font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; line-height: 1.65; color: var(--color-text-soft); white-space: pre-wrap;
}

/* Platform AI comments */
.platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px,1fr)); gap: 12px; align-items: start; }
.platform-section { border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); padding: 15px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--color-surface-subtle); }
.platform-kicker { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-dark); }
.platform-reason { margin: 0; font-size: 12px; font-style: italic; color: var(--color-text-muted); line-height: 1.5; }
.platform-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid var(--color-border-soft); padding-top: 10px; }
.platform-metric { border: 1px solid var(--color-border-soft); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--color-surface); }
.platform-metric-value { font-family: var(--font-heading); font-weight: 700; font-size: 15px; line-height: 1.15; }
.platform-metric-label { font-size: 10.5px; font-weight: 600; margin-top: 3px; }
.platform-metric-sub { font-size: 9.5px; color: var(--color-text-muted); margin-top: 1px; }

/* IFIR tab */
.ifir-model-filter { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ifir-filter-controls { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.ifir-filter-field { display: flex; flex-direction: column; gap: 4px; }
.ifir-filter-field label { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.ifir-filter-input {
  border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface);
  color: var(--color-text); font: inherit; font-size: 12.5px; padding: 6px 10px; min-width: 220px;
}
.ifir-filter-input:focus { outline: none; border-color: var(--color-accent-border); box-shadow: 0 0 0 2px var(--color-row-selected-alt); }
.filter-chip-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* table-layout:fixed + width:100% scales every column by the same ratio to fill the
   container — unlike auto layout, which (with only one flexible column) dumps 100% of the
   leftover space into that column alone. Widths below are the pre-scale basis; actual
   rendered widths grow/shrink together depending on viewport. Fixed layout ignores
   overflowing content instead of growing the column, so long labels in the first column
   are truncated with an ellipsis (see the overflow rules further down). */
.ifir-table { border-collapse: separate; border-spacing: 0; font-size: 11px; table-layout: fixed; width: 100%; }
.ifir-table th, .ifir-table td {
  position: sticky; top: 0; background: var(--color-surface-muted); text-align: center; padding: 5px 4px;
  font-size: 9.5px; color: var(--color-text-muted); border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 38px; line-height: 1.3;
}
.ifir-table td { position: static; background: transparent; border-top: 0; padding: 0; }
.ifir-table th:first-child, .ifir-table td:first-child {
  position: sticky; left: 0; z-index: 2; text-align: left; width: 150px;
  background: var(--color-surface); border-right: 1px solid var(--color-border-soft);
}
.ifir-table th:first-child { padding: 8px 16px; }
/* Row-level padding is set per row type below — most first cells hold a <button> that
   already carries its own padding, so a blanket padding here would double it up and make
   those rows visibly taller than the plain-text rows (the "extra blank space" bug). */
.ifir-table td:first-child { padding: 0; }
.ifir-table td:first-child .row-btn, .ifir-table td:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifir-week-th.is-boundary, .ifir-week-cell.is-boundary { border-left: 2px solid var(--color-accent); }
.ifir-boundary-label {
  position: absolute; top: -16px; left: 2px; font-size: 8.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--color-accent-dark); white-space: nowrap;
}
.ifir-week-th { position: relative; }
/* Indent ladder so the LOB → Model → weekly-detail nesting is visible at a glance:
   LOB row 16px, Model row 32px, detail header + metric rows (belong to that Model) 48px. */
.ifir-lob-row td { background: var(--color-surface-muted); border-bottom: 1px solid var(--color-border-soft); }
.ifir-lob-row .row-btn { padding: 5px 16px; }
.ifir-model-row td.ifir-week-cell, .ifir-week-cell {
  padding: 5px 2px; text-align: center; border-bottom: 1px solid var(--color-hairline);
  font-variant-numeric: tabular-nums; font-size: 9px;
}
.ifir-model-row td:first-child { border-bottom: 1px solid var(--color-hairline); }
.ifir-model-row .row-btn.is-child { padding: 5px 16px 5px 32px; }
.ifir-week-cell.is-open { border: 1px dashed var(--color-ifir-open-border); }
.ifir-model-row.is-selected td:first-child { background: var(--color-row-selected); box-shadow: inset 3px 0 0 var(--color-accent); }

/* Detail block (metric rows) shown under a selected model — tinted and left-bordered as
   one visual unit so it clearly reads as that model's own detail, not a continuation of
   the main LOB/Model rows above it. */
.ifir-detail-header-row td {
  padding: 7px 16px 7px 48px !important; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-accent-dark); background: var(--color-row-selected-alt); border-bottom: 1px solid var(--color-accent-border);
  box-shadow: inset 3px 0 0 var(--color-accent); text-align: left;
}
.ifir-metric-row td { background: var(--color-surface-subtle); }
.ifir-metric-row td:first-child { padding: 4px 16px 4px 48px !important; box-shadow: inset 3px 0 0 var(--color-accent); font-size: 9.5px; color: var(--color-text-muted); }
.ifir-metric-bool { font-weight: 600; text-transform: uppercase; font-size: 8.5px; letter-spacing: .03em; }
.ifir-metric-bool.is-true { background: var(--color-heat-good-bg); color: var(--color-heat-good-text); }
.ifir-metric-bool.is-false { background: var(--color-heat-bad-bg); color: var(--color-heat-bad-text); }
.ifir-metric-cell { padding: 4px 2px; text-align: center; border-bottom: 1px solid var(--color-hairline); font-size: 9px; font-variant-numeric: tabular-nums; color: var(--color-text-soft); }
.ifir-metric-row.is-empty td { border-bottom: 1px solid var(--color-hairline); }
.ifir-metric-empty-note { text-align: left !important; padding: 4px 10px !important; font-size: 9.5px; font-style: italic; color: var(--color-text-muted); white-space: nowrap; }
.ifir-comment-input {
  width: 100%; min-width: 160px; font: inherit; font-size: 11.5px; padding: 5px 7px; border: 1px solid var(--color-border);
  border-radius: 6px; resize: vertical; color: var(--color-text); background: var(--color-surface);
}

/* Charts */
.chart-wrap { position: relative; height: 300px; }

/* Inline clickable LOB / platform references */
.link-inline {
  border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit;
  color: var(--color-accent-dark); text-decoration: none;
}
.link-inline:hover { text-decoration: underline; }

/* Report modal — .modal-backdrop/.modal/.modal-head/.modal-close come from shared/app-shell.css */
.modal-textarea {
  flex: 1; min-height: 320px; resize: vertical; font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; line-height: 1.6; padding: 12px; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text);
}
.modal-actions { display: flex; align-items: center; gap: var(--space-3); }
.modal-copy-feedback { font-size: 12px; color: var(--color-accent-dark); font-weight: 600; }

/* Age breakdown modal */
.age-modal { max-height: 86vh; }
.age-modal-context { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 4px; }
.age-context-chip {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 6px 12px; background: var(--color-chip-bg);
  border: 1px solid var(--color-border); border-radius: 7px; font-size: 12.5px;
}
.age-context-label { color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .08em; font-size: 9.5px; }
.age-table { border-collapse: collapse; width: 100%; font-size: 12.5px; min-width: 900px; }
.age-table th {
  position: sticky; top: 0; background: var(--color-surface-muted); text-align: center; padding: 8px 10px;
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border); white-space: nowrap;
}
.age-table th:first-child, .age-table td:first-child {
  position: sticky; left: 0; z-index: 1; text-align: left; padding-left: 14px; min-width: 130px; background: var(--color-surface);
}
.age-table td { padding: 8px 10px; text-align: center; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--color-hairline); }
.age-table td.age-row-label { font-weight: 600; color: var(--color-text-soft); background: var(--color-surface-subtle); }
.age-table tbody tr:first-child td { color: var(--color-text); }

/* [hidden] and the sidebar/view responsive breakpoints come from shared/app-shell.css */