/* Portfolio Tester — global stylesheet */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 860px;
  margin: 2rem auto;
  padding: 0 1rem;
  color: #222;
  line-height: 1.4;
}

h1 { font-size: 1.5rem; margin: 0 0 1.5rem 0; }
h2 { font-size: 1.1rem; margin: 2rem 0 0.75rem 0; color: #333; border-bottom: 1px solid #ddd; padding-bottom: 0.25rem; }

/* --- form fields (used by xsl/form.xsl) --- */
.field { margin-bottom: 1rem; display: flex; flex-direction: column; }
.field label { font-weight: 600; margin-bottom: 0.25rem; font-size: 0.9rem; }
.field select, .field input {
  padding: 0.45rem 0.5rem;
  font-size: 1rem;
  border: 1px solid #bbb;
  border-radius: 3px;
  background: #fff;
}
.field select:focus, .field input:focus {
  outline: none; border-color: #4a90e2;
}

/* Étape 6.34.3 : masquage des champs gérés en interne par le pipeline
   composite (portfolio-70-30). Appliqué par form.xsl::applyUniverse
   quand UNIVERSES[key].composite est vrai. Le backend ignore de toute
   façon les valeurs POSTées de ces champs en mode composite — le
   masquage UI est cosmétique mais indispensable pour la lisibilité. */
.hidden-for-composite { display: none !important; }

/* Étape 6.34.4 : deux signal-cards côte à côte sur la page composite
   (un par composante). Le .signal-card existant utilise flex horizontal
   pour la page mono (signal-meta gauche + signal-scores droite) — ici
   on overrride en stack vertical avec table interne, et on conteneurise
   les deux cards dans .signal-cards-pair (flex row, wrap si étroit). */
.signal-cards-pair {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 1rem 0;
}
.signal-cards-pair .signal-card {
  flex: 1 1 45%;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
}
.signal-cards-pair .signal-card h3 {
  margin: 0 0 0.4rem 0;
  font-size: 1rem;
}
.signal-cards-pair .signal-card .signal-date {
  font-size: 0.85rem;
  color: #555;
  margin: 0.1rem 0;
}
table.signal-scores {
  display: table;            /* override .signal-scores { display: flex } pour
                                la mono — la classe est partagée mais ici on
                                rend un vrai <table>. */
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-top: 0.4rem;
}
table.signal-scores th,
table.signal-scores td {
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #e0e0e0;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
table.signal-scores td:nth-child(3) { text-align: right; }

/* type="display" (Étape 6.16): read-only constant exposed to the user.
   No <input>, no POST round-trip. Grey background + monospace signal
   "lecture seule, valeur technique server-side". */
.field-display .display-value {
  padding: 0.45rem 0.5rem;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #555;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
}

button[type="submit"] {
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  background: #4a90e2;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
button[type="submit"]:hover { background: #357ab8; }

/* --- submission result (used by xsl/submit-result.xsl) --- */
dl.params {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  margin: 1rem 0 1.5rem 0;
}
dl.params dt { font-weight: 600; color: #555; }
dl.params dd { margin: 0; }

ul.errors {
  list-style: disc inside;
  color: #c0392b;
  padding-left: 0;
  margin: 1rem 0 1.5rem 0;
}
ul.errors li { padding: 0.2rem 0; }

a.back-link {
  display: inline-block;
  margin-top: 1.5rem;
  color: #4a90e2;
  text-decoration: none;
}
a.back-link:hover { text-decoration: underline; }

/* --- backtest result (xsl/backtest-result.xsl) --- */

/* Strategy summary: reuse dl.params styling */
dl.summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.5rem;
  row-gap: 0.4rem;
  margin: 0.5rem 0 1rem 0;
}
dl.summary dt { font-weight: 600; color: #555; }
dl.summary dd { margin: 0; }

/* Info note */
.note {
  background: #f5f5f5;
  border-left: 3px solid #888;
  padding: 0.6rem 0.9rem;
  margin: 1rem 0;
  font-size: 0.9rem;
  color: #555;
  font-style: italic;
}

/* Metrics: 2-column key/value table */
table.metrics {
  border-collapse: collapse;
  margin: 0.5rem 0 1rem 0;
}
table.metrics th, table.metrics td {
  padding: 0.4rem 1rem;
  text-align: left;
  border: 1px solid #ddd;
}
table.metrics th { background: #fafafa; font-weight: 600; color: #555; }
table.metrics td { font-variant-numeric: tabular-nums; }

/* Equity curve: full width, compact */
table.equity-curve {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.85rem;
  margin: 0.5rem 0 1rem 0;
}
table.equity-curve th, table.equity-curve td {
  padding: 0.3rem 0.6rem;
  border: 1px solid #e4e4e4;
  text-align: right;
}
table.equity-curve th {
  background: #fafafa;
  font-weight: 600;
  color: #555;
  text-align: center;
}
table.equity-curve td:first-child { text-align: center; font-variant-numeric: tabular-nums; }
table.equity-curve td { font-variant-numeric: tabular-nums; }
table.equity-curve tbody tr:nth-child(even) { background: #fbfbfb; }

/* Signed-value coloring */
.positive { color: #1f8a3a; }
.negative { color: #c0392b; }
.neutral  { color: #555; }

/* Benchmark comparison "Active" column — text-only, no fill, to avoid
   competing visually with .positive / .negative in adjacent cells. */
.metric-better { color: #1f8a3a; font-weight: 600; }
.metric-worse  { color: #c0392b; font-weight: 600; }

table.comparison { margin: 0.5rem 0 1rem 0; }
table.comparison td:nth-child(n+2) { text-align: right; }
table.comparison td:last-child { font-variant-numeric: tabular-nums; }

/* --- Up/Down capture table (Étape 6.9.4) --- */
table.capture { margin: 0.5rem 0 0.5rem 0; }
table.capture td:nth-child(n+2) { text-align: right; }
table.capture td.capture-ratio  { font-weight: 600; font-variant-numeric: tabular-nums; }
.capture-note,
.active-note {
  margin: 0.25rem 0 1rem 0;
  font-size: 0.85rem;
  color: #666;
  font-style: italic;
  max-width: 720px;
}

/* --- Equity curve chart (inline SVG, xsl/backtest-result.xsl <chart>) --- */
svg.equity-chart {
  width: 100%;
  height: auto;
  max-width: 800px;
  display: block;
  margin: 1rem 0;
}
svg.equity-chart .plot-bg     { fill: #fafafa; }
svg.equity-chart .grid-line   { stroke: #e4e4e4; stroke-width: 1; }
svg.equity-chart .zero-line   { stroke: #888; stroke-width: 1; stroke-dasharray: 3,3; }
svg.equity-chart .equity-line { stroke: #1f8a3a; stroke-width: 2; fill: none; }
svg.equity-chart .axis-label  {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  fill: #555;
}
svg.equity-chart .axis-label.x { text-anchor: middle; }
svg.equity-chart .axis-label.y { text-anchor: end; }

/* --- Dual Momentum result page (xsl/dual-momentum-result.xsl) --- */

/* Current signal card: meta on the left, two side-by-side score boxes on
   the right. Background and left border tinted by the decision. */
.signal-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 1.25rem;
  margin: 0.75rem 0 1rem 0;
  border-left: 4px solid #888;
  background: #f5f5f5;
  border-radius: 0 3px 3px 0;
}
.signal-card.risk          { border-left-color: #1f8a3a; background: #eef7f0; }
.signal-card.out_of_market { border-left-color: #b58900; background: #faf5e6; }
.signal-meta .signal-date     { font-size: 0.9rem; color: #555; }
.signal-meta .signal-decision { font-size: 1.05rem; margin-top: 0.2rem; }
.signal-scores {
  display: flex;
  gap: 1rem;
}
.signal-score {
  text-align: center;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  min-width: 6rem;
}
.signal-score-asset {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 0.15rem;
}
.signal-score-value {
  font-weight: 600;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

/* --- Current signal scores table (Étape 6.10.4, multi-asset) --- */
table.current-signal-scores { margin: 0.5rem 0 1rem 0; }
table.current-signal-scores td:nth-child(1) { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 600; }
table.current-signal-scores td.role-cell    { color: #555; font-size: 0.9rem; }
table.current-signal-scores td.score-cell   { text-align: right; font-variant-numeric: tabular-nums; }
table.current-signal-scores td.selection-cell { font-size: 0.85rem; color: #1f8a3a; font-weight: 600; }
table.current-signal-scores tr.selected-asset { background: rgba(34, 197, 94, 0.10); }
.filter-status            { font-size: 0.85rem; margin-left: 0.4rem; }
.filter-status.filter-ok  { color: #1f8a3a; }
.filter-status.filter-fail{ color: #c0392b; }

/* Trades table: calqué sur table.metrics + colonnes compactes */
table.trades {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.85rem;
  margin: 0.5rem 0 1rem 0;
}
table.trades th, table.trades td {
  padding: 0.3rem 0.6rem;
  border: 1px solid #e4e4e4;
  text-align: right;
}
table.trades th {
  background: #fafafa;
  font-weight: 600;
  color: #555;
  text-align: center;
}
table.trades td:nth-child(1),    /* # */
table.trades td:nth-child(2),    /* signal date */
table.trades td:nth-child(3),    /* asset */
table.trades td:nth-child(4) {   /* period */
  text-align: center;
}
table.trades td { font-variant-numeric: tabular-nums; }
table.trades tbody tr:nth-child(even) { background: #fbfbfb; }

/* --- Annual Returns table --- */
table.annual-returns { margin: 0.5rem 0 0.75rem 0; }
table.annual-returns td:nth-child(1) { text-align: center; }
table.annual-returns td:nth-child(2),
table.annual-returns td:nth-child(3) { text-align: right; }
.partial-flag { color: #888; font-size: 0.85rem; font-style: italic; }

/* --- Bar charts (annual returns + similar) --- */
svg.bar-chart {
  width: 100%;
  height: auto;
  max-width: 800px;
  display: block;
  margin: 1rem 0;
}
svg.bar-chart .plot-bg     { fill: #fafafa; }
svg.bar-chart .grid-line   { stroke: #e4e4e4; stroke-width: 1; }
svg.bar-chart .zero-line   { stroke: #888;    stroke-width: 1; }
svg.bar-chart .axis-label  {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  fill: #555;
}
svg.bar-chart .axis-label.x { text-anchor: middle; }
svg.bar-chart .axis-label.y { text-anchor: end; }
svg.bar-chart .bar.bar-positive { fill: #1f8a3a; }
svg.bar-chart .bar.bar-negative { fill: #c0392b; }
svg.bar-chart .bar.bar-partial  { opacity: 0.55; }

/* Multi-series annual-returns chart (Étape 6.9.3): DM stays at full
   saturation, B&H gets a strong opacity reduction so the two series
   are distinguishable while preserving sign coloring. */
svg.bar-chart .bar.bar-benchmark { opacity: 0.40; }
svg.bar-chart .legend-swatch.bar-strategy.bar-positive,
svg.bar-chart .legend-swatch.bar-strategy             { fill: #1f8a3a; }
svg.bar-chart .legend-swatch.bar-benchmark            { fill: #1f8a3a; opacity: 0.40; }
svg.bar-chart .legend-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px; fill: #333;
}

/* --- Monthly Returns heat map (compactée Étape 6.8.1) --- */
/* Wrapper avec scroll horizontal de secours si le viewport est très étroit
   (< ~720 px). Au-dessus de ça, les 13 colonnes tiennent sans scroll. */
.monthly-returns-wrapper { overflow-x: auto; margin: 1rem 0; }
table.monthly-returns {
  border-collapse: collapse;
  font-size: 0.75rem;          /* ~12 px à font-size base 16 */
  font-variant-numeric: tabular-nums;
  table-layout: fixed;          /* colonnes de largeur prévisible */
  width: 100%;
  max-width: 820px;
}
table.monthly-returns th,
table.monthly-returns td {
  padding: 0.2rem 0.25rem;
  border: 1px solid #e4e4e4;
  text-align: right;
}
/* Colonne "Year" plus étroite que les colonnes mois */
table.monthly-returns thead th:first-child,
table.monthly-returns tbody th             { width: 3em; text-align: center; }
/* Colonnes mois : largeur uniforme calculée pour 5 caractères max (-99.9% à +99.9%) */
table.monthly-returns thead th:not(:first-child),
table.monthly-returns tbody td             { width: 4.2em; }
table.monthly-returns thead th,
table.monthly-returns tbody th {
  background: #fafafa;
  font-weight: 600;
  color: #555;
  text-align: center;
}
/* Heat-map cell tints: 4 buckets per sign (|return| in 0..2%, 2..5%,
   5..10%, >=10%). Alpha rises with magnitude. */
.monthly-returns .cell-empty       { background: transparent; color: transparent; }
.monthly-returns .cell-neutral-1,
.monthly-returns .cell-neutral-2,
.monthly-returns .cell-neutral-3,
.monthly-returns .cell-neutral-4   { background: rgba(0,0,0,0.04); color: #555; }
.monthly-returns .cell-positive-1  { background: rgba(34,197,94,0.10); }
.monthly-returns .cell-positive-2  { background: rgba(34,197,94,0.22); }
.monthly-returns .cell-positive-3  { background: rgba(34,197,94,0.35); }
.monthly-returns .cell-positive-4  { background: rgba(34,197,94,0.50); }
.monthly-returns .cell-negative-1  { background: rgba(239,68,68,0.10); }
.monthly-returns .cell-negative-2  { background: rgba(239,68,68,0.22); }
.monthly-returns .cell-negative-3  { background: rgba(239,68,68,0.35); }
.monthly-returns .cell-negative-4  { background: rgba(239,68,68,0.50); }

/* --- Drawdowns underwater chart --- */
svg.dd-chart {
  width: 100%;
  height: auto;
  max-width: 800px;
  display: block;
  margin: 1rem 0;
}
svg.dd-chart .plot-bg    { fill: #fafafa; }
svg.dd-chart .grid-line  { stroke: #e4e4e4; stroke-width: 1; }
svg.dd-chart .zero-line  { stroke: #888; stroke-width: 1; }
svg.dd-chart .axis-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  fill: #555;
}
svg.dd-chart .axis-label.x { text-anchor: middle; }
svg.dd-chart .axis-label.y { text-anchor: end; }
svg.dd-chart .dd-area { fill: rgba(239,68,68,0.22); stroke: none; }
svg.dd-chart .dd-line { stroke-width: 1.5; fill: none; }
/* DM-vs-B&H overlay (Étape 6.9.2): same colour palette as the equity chart
   for visual continuity. */
svg.dd-chart .dd-line.line-strategy  { stroke: #c0392b; }                /* DM red, solid */
svg.dd-chart .dd-line.line-benchmark { stroke: #f59e0b; stroke-dasharray: 4,3; }
svg.dd-chart .legend-dot.line-strategy  { fill: #c0392b; }
svg.dd-chart .legend-dot.line-benchmark { fill: #f59e0b; }
svg.dd-chart .legend-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px; fill: #333;
}

/* Top-3 drawdown annotations (Étape 6.8.4) */
svg.dd-chart .dd-annotation-dot   { fill: #ef4444; stroke: #fff; stroke-width: 1; }
svg.dd-chart .dd-annotation-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 10px;
  font-weight: 600;
  fill: #4b1212;
  text-anchor: middle;
  /* white halo around the text so it stays readable when it sits on top of
     the red drawdown fill */
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 2.5;
  stroke-linejoin: round;
}

/* --- Drawdowns top-10 table --- */
table.drawdowns-table .ongoing { font-style: italic; color: #555; }
table.drawdowns-table .ongoing td:nth-child(1)::after { content: " (open)"; font-size: 0.7rem; color: #888; }

/* --- Multi-line chart (rolling returns + future overlays) --- */
svg.multi-line-chart {
  width: 100%;
  height: auto;
  max-width: 800px;
  display: block;
  margin: 1rem 0;
}
svg.multi-line-chart .plot-bg    { fill: #fafafa; }
svg.multi-line-chart .grid-line  { stroke: #e4e4e4; stroke-width: 1; }
svg.multi-line-chart .zero-line  { stroke: #888; stroke-width: 1; stroke-dasharray: 3,3; }
svg.multi-line-chart .axis-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  fill: #555;
}
svg.multi-line-chart .axis-label.x { text-anchor: middle; }
svg.multi-line-chart .axis-label.y { text-anchor: end; }

svg.multi-line-chart .line { fill: none; stroke-width: 1.8; }
svg.multi-line-chart .line.multi-series-0 { stroke: #2563eb; }   /* blue */
svg.multi-line-chart .line.multi-series-1 { stroke: #ea580c; }   /* orange */
svg.multi-line-chart .line.multi-series-2 { stroke: #1f8a3a; }   /* green */

/* DM equity overlay (Étape 6.7.1): strategy in blue, benchmark in amber */
svg.multi-line-chart .line.line-strategy   { stroke: #2563eb; stroke-width: 2; }
svg.multi-line-chart .line.line-benchmark  { stroke: #f59e0b; stroke-width: 1.6; stroke-dasharray: 4,3; }

/* Composite portfolio equity overlay (Étape 6.34.4) : portfolio
   dominant en bleu épais, composantes en dérivés (cyan + magenta),
   benchmark en ambre dashé identique à la page mono. */
svg.multi-line-chart .line.line-portfolio   { stroke: #2563eb; stroke-width: 2.2; }
svg.multi-line-chart .line.line-component-a { stroke: #06b6d4; stroke-width: 1.4; }
svg.multi-line-chart .line.line-component-b { stroke: #be185d; stroke-width: 1.4; }

svg.multi-line-chart .legend-dot.multi-series-0 { fill: #2563eb; }
svg.multi-line-chart .legend-dot.multi-series-1 { fill: #ea580c; }
svg.multi-line-chart .legend-dot.multi-series-2 { fill: #1f8a3a; }
svg.multi-line-chart .legend-dot.line-strategy  { fill: #2563eb; }
svg.multi-line-chart .legend-dot.line-benchmark { fill: #f59e0b; }
svg.multi-line-chart .legend-dot.line-portfolio   { fill: #2563eb; }
svg.multi-line-chart .legend-dot.line-component-a { fill: #06b6d4; }
svg.multi-line-chart .legend-dot.line-component-b { fill: #be185d; }
svg.multi-line-chart .legend-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  fill: #333;
}

/* --- Rolling Returns summary table (7 cols depuis 6.9.1) --- */
table.rolling-summary {
  margin: 0.5rem 0 0.75rem 0;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
table.rolling-summary th,
table.rolling-summary td        { padding: 0.3rem 0.55rem; }
table.rolling-summary td:nth-child(1) { text-align: center; font-weight: 600; }
table.rolling-summary td:nth-child(n+2) { text-align: right; }
/* Visual separator between the DM and B&H column groups */
table.rolling-summary th:nth-child(5),
table.rolling-summary td:nth-child(5) { border-left: 2px solid #ccc; }

/* --- Table of contents (Étape 6.8.3) --- */
nav.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  margin: 0.5rem 0 1.5rem 0;
  padding: 0.6rem 0.9rem;
  background: #f5f5f5;
  border-left: 3px solid #4a90e2;
  border-radius: 0 3px 3px 0;
  font-size: 0.85rem;
}
nav.toc a {
  color: #4a90e2;
  text-decoration: none;
  font-weight: 500;
}
nav.toc a:hover { text-decoration: underline; }
nav.toc a + a::before {
  content: "·";
  color: #aaa;
  margin-right: 0.6rem;
  font-weight: bold;
}

/* --- Étape 6.17 : form intégré en haut des pages résultats --------- */
.form-result-separator {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid #ddd;
}
.placeholder {
  color: #888;
  font-style: italic;
  text-align: center;
  margin: 2rem 0;
}

/* --- Future signal page (Étape 6.37.4) ---------------------------- */
/* Header band at the top of the live-signal page : market-state badge
   + universe + lookback preset + fetched-at timestamp. Wraps gracefully
   on narrow viewports. */
.future-signal-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  align-items: baseline;
  padding: 0.6rem 0.9rem;
  margin: 0.6rem 0 1rem;
  background: #f5f7fb;
  border: 1px solid #e1e6f0;
  border-radius: 6px;
  font-size: 0.9rem;
}
.future-signal-meta-row { color: #444; }
.future-signal-note     { color: #b58900; font-style: italic; }
/* Perf line (6.48) — held-strategy MTD/YTD, set apart with a left rule and a
   light wash; the +/- figures inherit .positive / .negative colouring. */
.future-signal-perf {
  font-weight: 600;
  padding-left: 0.7rem;
  border-left: 2px solid #cdd6e6;
  cursor: help;
}
.future-signal-intro    { color: #555; font-size: 0.95rem; margin: 0.4rem 0 1.4rem; }
.future-signal-error    { color: #c0392b; font-weight: 600; margin: 1rem 0 0.4rem; }
.future-signal-error-detail {
  background: #faf0ee;
  border-left: 4px solid #c0392b;
  padding: 0.6rem 0.9rem;
  white-space: pre-wrap;
  font-size: 0.85rem;
  color: #6a1f15;
  margin: 0.4rem 0 1rem;
}

/* Market-state pill. Color tracks the trading session state — green
   when open, amber pre/after-hours, grey closed, red on error. */
.market-state-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: #6b7a8f;
}
.market-state-open        { background: #1f8a3a; }
.market-state-pre_market  { background: #b58900; }
.market-state-after_hours { background: #b58900; }
.market-state-closed      { background: #6b7a8f; }
.market-state-error       { background: #c0392b; }

/* Snapshots table : same baseline as table.metrics, plus a monospace
   timestamp column and tinted source pill. */
.snapshots-note { color: #555; font-size: 0.9rem; margin: 0.3rem 0 0.6rem; }
table.snapshots-table td.numeric   { text-align: right; font-variant-numeric: tabular-nums; }
table.snapshots-table td.timestamp { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85rem; color: #555; }
table.snapshots-table td.source    { font-size: 0.85rem; color: #555; }
table.snapshots-table td.source.source-latest_trade { color: #1f8a3a; font-weight: 600; }
table.snapshots-table td.source.source-daily_bar    { color: #555; }

/* Composite aggregate-allocation table. Compact (2 cols), right-aligned
   weights. Sits below the side-by-side .signal-cards-pair. */
.aggregate-note { color: #555; font-size: 0.9rem; margin: 0.3rem 0 0.6rem; }
table.aggregate-allocation-table { max-width: 28rem; }
table.aggregate-allocation-table td.score-cell {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Future-signal button : the CTA placed on each DM result page (mono +
   composite) between the static Current signal and Annual Returns. Drives
   the user to /portfolio/cgi-bin/future-signal.pl with the current
   universe + lookback preset preserved in the query string. */
.future-signal-blurb {
  color: #555;
  font-size: 0.95rem;
  max-width: 50rem;
  margin: 0.4rem 0 0.8rem;
}
a.btn-future-signal {
  display: inline-block;
  padding: 0.55em 1.1em;
  background: #2563eb;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  margin: 0 0 1.2rem;
}
a.btn-future-signal:hover { background: #1d4ed8; }

/* Back-form : a submit button styled to mimic the existing back-link.
   Reusing .back-link on the <button> handles most of the styling; this
   override strips the default form margin/border. */
form.future-signal-back-form {
  margin-top: 1.5rem;
}
form.future-signal-back-form button.back-link {
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

/* ===================================================================
   Étape 6.40.3 — Page de revue de rebalancement (rebalance-review.pl).
   Réutilise .market-state-badge, table.metrics, a.back-link.
   =================================================================== */
.rebalance-strategy { color: #555; font-size: 0.95rem; margin: 0 0 1rem; font-weight: 600; }
.rebalance-intro    { color: #555; font-size: 0.95rem; max-width: 52rem; margin: 0.4rem 0 1.2rem; }
.rebalance-note     { color: #b58900; font-weight: 600; margin: 0.6rem 0; }
.rebalance-empty    { color: #555; font-style: italic; margin: 0.4rem 0 1rem; }
.rebalance-back     { margin-top: 1.6rem; }
.rebalance-seq-note { color: #555; font-size: 0.88rem; font-style: italic; margin: 0.3rem 0 0.8rem; }
.rebalance-plan-meta { color: #333; font-size: 0.95rem; margin: 0.4rem 0 0.8rem; }

.rebalance-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  align-items: baseline;
  padding: 0.6rem 0.9rem;
  margin: 0.6rem 0 1rem;
  background: #f5f7fb;
  border: 1px solid #e1e6f0;
  border-radius: 6px;
  font-size: 0.9rem;
}
.rebalance-meta-row { color: #444; }

/* Tables : right-align numeric cells (baseline table.metrics). */
table.rebalance-account td.numeric,
table.rebalance-signal  td.numeric,
table.rebalance-target  td.numeric,
table.rebalance-current td.numeric,
table.rebalance-orders  td.numeric,
table.rebalance-submitted td.numeric,
table.rebalance-failed  td.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
table.rebalance-account { max-width: 40rem; }
table.rebalance-account th { text-align: left; }

/* Signal rows tinted by decision (vert in-market / amber out). */
tr.signal-row.risk          td { background: #eef7f0; }
tr.signal-row.out_of_market td { background: #faf5e6; }

/* Order rows : ventes en ambre, achats en bleu, échecs en rouge. */
tr.order-row.order-sell   td { background: #fdf3e3; }
tr.order-row.order-buy    td { background: #eef3fd; }
tr.order-row.order-failed td { background: #faf0ee; }

.badge-to-zero {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: #c0392b;
}
.order-id  { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.82rem; color: #555; }
.error-cell { font-size: 0.85rem; color: #6a1f15; }

.rebalance-warning {
  background: #faf5e6;
  border-left: 4px solid #b58900;
  padding: 0.5rem 0.9rem;
  margin: 0.6rem 0;
  font-size: 0.9rem;
  color: #6a5300;
}
.rebalance-capped {
  background: #faf0ee;
  border-left-color: #c0392b;
  color: #6a1f15;
  font-weight: 600;
}

/* Bannière d'exécution (rapport). */
.execution-banner {
  padding: 0.7rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  margin: 0.6rem 0 1.2rem;
}
.execution-banner.exec-ok      { background: #eef7f0; border: 1px solid #1f8a3a; color: #1f6b30; }
.execution-banner.exec-partial { background: #faf5e6; border: 1px solid #b58900; color: #6a5300; }

.rebalance-error { color: #c0392b; font-weight: 600; margin: 1rem 0 0.4rem; }
.rebalance-error-detail {
  background: #faf0ee;
  border-left: 4px solid #c0392b;
  padding: 0.6rem 0.9rem;
  white-space: pre-wrap;
  font-size: 0.85rem;
  color: #6a1f15;
  margin: 0.4rem 0 1rem;
}

/* Formulaires (entry + panorama). */
form.rebalance-form {
  background: #f9fafc;
  border: 1px solid #e1e6f0;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin: 0.6rem 0 1.2rem;
  max-width: 40rem;
}
.passphrase-row, .rebalance-field-row { margin: 0.6rem 0; display: flex; flex-direction: column; gap: 0.3rem; }
.passphrase-row label, .rebalance-field-row label, .order-type-fieldset legend {
  font-weight: 600; color: #444; font-size: 0.9rem;
}
.passphrase-row input, .rebalance-field-row input[type="text"] {
  padding: 0.5em 0.7em;
  border: 1px solid #c8d0de;
  border-radius: 4px;
  font: inherit;
  max-width: 22rem;
}
.field-hint { color: #777; font-size: 0.82rem; }
.order-type-fieldset { border: 1px solid #e1e6f0; border-radius: 6px; padding: 0.6rem 0.9rem; }
.order-type-fieldset label { display: block; font-weight: 400; margin: 0.3rem 0; }

.rebalance-actions { margin-top: 1rem; display: flex; gap: 0.8rem; flex-wrap: wrap; }
.btn-primary, .btn-secondary, .btn-danger {
  padding: 0.6em 1.2em;
  border: none;
  border-radius: 4px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary   { background: #2563eb; color: #fff; }
.btn-primary:hover   { background: #1d4ed8; }
.btn-secondary { background: #e1e6f0; color: #333; }
.btn-secondary:hover { background: #d2d9e8; }
.btn-danger    { background: #c0392b; color: #fff; }
.btn-danger:hover    { background: #a93226; }

/* --- Print mode (Étape 6.8.3, A4 portrait calibration 6.9.6) ------- */
/* Fix the paper size + outer margins so @media print rules below can
   target the printable area predictably. 8 mm leaves ~194 mm of usable
   width on A4 portrait (210 mm - 2 × 8 mm), which is what the
   Monthly Returns override below assumes. */
@page { size: A4 portrait; margin: 8mm; }

@media print {
  /* Hide on paper what only makes sense interactively. */
  nav.toc,
  a.back-link             { display: none !important; }

  /* Keep coloured cells / chart fills on paper (browsers default to
     stripping backgrounds when printing). */
  body,
  .monthly-returns .cell,
  table.rolling-summary,
  table.metrics,
  table.comparison,
  table.annual-returns,
  table.drawdowns-table,
  table.trades,
  .signal-card,
  svg                     { -webkit-print-color-adjust: exact;
                            print-color-adjust:         exact; }

  /* Atomic blocks: never split across pages. */
  svg,
  table.metrics,
  table.comparison,
  table.annual-returns,
  table.drawdowns-table,
  table.rolling-summary,
  .signal-card,
  .note                   { page-break-inside: avoid;
                            break-inside:      avoid; }

  /* Long tables CAN split between pages, but a row must stay together. */
  table.monthly-returns,
  table.trades            { page-break-inside: auto; break-inside: auto; }
  table.monthly-returns tr,
  table.trades tr         { page-break-inside: avoid; break-inside: avoid; }

  /* Slightly tighter type so the result fits in fewer pages. */
  body                    { font-size: 11pt; }
  h1                      { font-size: 1.3rem; }
  h2                      { font-size: 1.05rem; }

  /* Monthly Returns: shrink for A4 portrait fit (Étape 6.9.6).
     The 820 px / 0.75 rem / 0.2 rem calibration of 6.8.1 targets the
     HTML viewport. On A4 portrait at 8 mm margins (~194 mm usable),
     12 month columns + year column at 0.75 rem clip the Dec column.
     0.65 rem cells with 0.1/0.15 rem padding give ~115 mm of table
     width, well inside the print area. */
  .monthly-returns-wrapper { overflow: visible; }
  table.monthly-returns    { font-size: 0.65rem; max-width: 100%; }
  table.monthly-returns th,
  table.monthly-returns td { padding: 0.1rem 0.15rem; }
}