/* ==========================================================================
   Portfolio (page) — sobre & institutionnel (spécifique page)
   ========================================================================== */

.portfolio-page{
  --panel:#111827; --panel-2:#162135; --panel-3:#1b2944; --panel-4:#223356;
  --border:#314162; --text:#e8ecf1; --muted:#9fb0ca; --accent:#6aa8ff;
  --positive:#22c55e; --negative:#ef4444;
  --radius:14px; --radius-sm:10px; --gap:16px; --gap-sm:12px; color:var(--text);
}
@supports (color: color-mix(in srgb, white, black)) {
  .portfolio-page{
    --panel-2: color-mix(in srgb, var(--panel), #fff 6%);
    --panel-3: color-mix(in srgb, var(--panel), #fff 14%);
    --panel-4: color-mix(in srgb, var(--panel), #fff 22%);
    --border : color-mix(in srgb, var(--panel), #fff 28%);
    --muted  : color-mix(in srgb, var(--text),  #000 35%);
  }
}

/* Header / Contexte */
.portfolio-page .page-header{ display:grid; grid-template-columns:1fr auto; gap:var(--gap); align-items:end; margin:8px 0 14px; }
.portfolio-page .page-title h1{ margin:0; font-weight:700; font-size:clamp(18px,2.1vw,22px); letter-spacing:.2px; }
.portfolio-page .page-actions{ display:inline-flex; gap:8px; }

.portfolio-page .context-section{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:12px; }
.portfolio-page .ctx-container{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); }
.portfolio-page .ctx-row{ display:grid; gap:6px; }
.portfolio-page .ctx-label{ font-size:12px; color:var(--muted); }
.portfolio-page .ctx-select{ appearance:none; width:100%; padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:var(--panel-2); color:var(--text); font-size:13px; }

/* Bandeau contexte (sur une ligne) */
.portfolio-page .context-banner{ margin:10px 0 0; }
.portfolio-page .context-card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:var(--gap-sm); }
.portfolio-page .context-line{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }
.portfolio-page .context-title{ font-weight:600; color:var(--text); }
.portfolio-page .chip{ background:var(--panel-2); border:1px solid var(--border); border-radius:999px; padding:2px 8px; font-size:12px; color:var(--text); }

/* ===================== Tuiles “Règles & Stratégie” (sous le bandeau) ===================== */
/* Conteneur (réutilise la grille KPI pour la cohérence visuelle) */
.portfolio-page #rules-strategy-page-cards{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--gap);
  margin:12px 0 6px;
}
.portfolio-page #rules-strategy-page-cards .kpi-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center;
  min-width:160px;
}
.portfolio-page #rules-strategy-page-cards .kpi-label{ font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.portfolio-page #rules-strategy-page-cards .kpi-value{ font-variant-numeric:tabular-nums; font-weight:650; font-size:17px; }

/* Résumé applicable (texte) */
.portfolio-page #stg-applicable-summary-card{
  margin:6px 0 0;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
}
.portfolio-page #stg-applicable-summary-text{
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
}

/* KPIs principaux (valeur, investi, etc.) */
.portfolio-page .kpi-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--gap); margin:14px 0; }
.portfolio-page .kpi-card{
  background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px 16px;
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; min-width:180px;
}
.portfolio-page .kpi-icon{ width:14px; height:14px; opacity:.45; display:inline-grid; place-items:center; font-size:13px; filter:saturate(.2); }
.portfolio-page .kpi-label{ font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.portfolio-page .kpi-value{ font-variant-numeric:tabular-nums; font-weight:650; font-size:17px; }
.portfolio-page .kpi-sparkline{ display:none !important; } /* pas de gadgets */

/* Table */
.portfolio-page .portfolio-table-container{ margin-top:8px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.portfolio-page .portfolio-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
.portfolio-page .portfolio-table thead th{
  text-align:left; font-weight:600; color:var(--muted); background:var(--panel-2);
  border-bottom:1px solid var(--border); padding:12px; white-space:nowrap; letter-spacing:.2px;
}
.portfolio-page .portfolio-table tbody td{ padding:12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.portfolio-page .portfolio-table tbody tr:hover{ background:var(--panel-2); }

.portfolio-page .tag-cell{ display:flex; align-items:center; gap:12px; }
.portfolio-page .tag-stack{ display:grid; gap:3px; min-width:0; }
.portfolio-page .tag-badge{ display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid var(--border); background:var(--panel-2); font-weight:600; font-size:12.5px; }
.portfolio-page .tag-line2{ display:flex; gap:10px; align-items:center; }
.portfolio-page .muted{ color:var(--muted); font-size:12.25px; }

.portfolio-page .value-cell, .portfolio-page .invested-cell{ text-align:right; }
.portfolio-page .performance-cell{ min-width:120px; }
.portfolio-page .count-cell{ text-align:center; }

/* Perf vert/rouge */
.portfolio-page .performance-indicator{ display:inline-flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; }
.portfolio-page .performance-indicator .perf-icon{ font-size:12px; opacity:.7; }
.portfolio-page .performance-indicator .perf-value{ font-weight:700; }
.portfolio-page .performance-indicator.positive .perf-value{ color:var(--positive) !important; }
.portfolio-page .performance-indicator.negative .perf-value{ color:var(--negative) !important; }

/* --- Accordéon inline (détail tag) --- */
.portfolio-page .accordion { padding: .75rem 0 0; }
.portfolio-page .accordion-head { margin-bottom: .25rem; color: var(--text-muted); }
.portfolio-page .accordion .mini-table { width: 100%; border-collapse: collapse; }
.portfolio-page .accordion .mini-table th,
.portfolio-page .accordion .mini-table td { padding: .35rem .5rem; }
.portfolio-page .accordion-row .accordion-cell { padding: 0.25rem 0.5rem 0.75rem; background: var(--panel); }



/* Chips */
.portfolio-page .position-count{
  display:inline-grid; place-items:center; min-width:40px; height:24px; padding:0 10px; border-radius:999px;
  background:var(--panel-2); border:1px solid var(--border); font-variant-numeric:tabular-nums; font-weight:600;
}
.portfolio-page .exposure-chip{
  display:inline-grid; place-items:center; min-width:66px; height:26px; padding:0 10px; border-radius:8px;
  background:var(--panel-2); border:1px solid var(--border); font-variant-numeric:tabular-nums; font-weight:600;
}

/* Accordéons (contenus) — chevrons = composants globaux */
.portfolio-page .accordion-row[hidden],
.portfolio-page .strategy-inline-row[hidden]{ display:none; }

.portfolio-page .accordion-panel{
  background:var(--panel-2);
  border-top:1px solid var(--border);
  padding:12px 10px; font-size:13px;
}
.portfolio-page .accordion-panel.is-sub{ font-size:12.75px; }

.portfolio-page .panel-surface{
  background:var(--panel-3) !important;
  border:1px solid var(--border); border-radius:10px; padding:12px;
}

/* Mini-accordéon “ligne 2” */
.portfolio-page .strategy-inline-panel{
  background:var(--panel-2); border-top:1px solid var(--border); padding:10px 12px;
}
.portfolio-page .strategy-inline-panel .panel-surface{
  background:var(--panel-3) !important; border:1px solid var(--border); border-radius:10px; padding:10px;
}

.portfolio-page .strategy-block{ display:grid; gap:8px; margin-bottom:8px; }
.portfolio-page .strategy-head{ display:flex; align-items:center; gap:10px; }
.portfolio-page .strategy-title{ font-weight:700; font-size:13.25px; }
.portfolio-page .strategy-meta{ font-size:12.25px; color:var(--muted); }
.portfolio-page .strategy-details{ margin-top:6px; }
.portfolio-page .strategy-details[hidden]{ display:none; }
.portfolio-page .strategy-list{ display:grid; gap:6px; margin-top:6px; }
.portfolio-page .strategy-list .s-row{ display:grid; grid-template-columns:96px 1fr; gap:8px; }
.portfolio-page .strategy-list .s-label{ color:var(--muted); font-size:12px; }
.portfolio-page .strategy-list .s-val{ font-size:12.5px; }

/* Table interne (positions) */
.portfolio-page .table{ width:100%; border-collapse:collapse; margin-top:8px; }
.portfolio-page .table thead th{ text-align:left; font-size:12.25px; color:var(--muted); border-bottom:1px solid var(--border); padding:6px 8px; }
.portfolio-page .table tbody td{ font-size:12.75px; padding:8px; }
.portfolio-page .table tbody td:nth-child(1){ font-weight:600; color:var(--text); }
.portfolio-page .table .positive{ color:var(--positive) !important; }
.portfolio-page .table .negative{ color:var(--negative) !important; }
.portfolio-page .insights-chip{ display:inline-block; min-width:28px; text-align:center; font-size:12px; color:var(--text); background:var(--panel-2); border:1px solid var(--border); border-radius:999px; padding:2px 6px; }

/* KPIs internes */
.portfolio-page .acc-kpis{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;
  background:var(--panel-4) !important;
  border:1px solid var(--border); border-radius:10px; padding:8px 10px; margin-bottom:10px;
}
.portfolio-page .acc-kpis .kpi span{ font-size:11px; color:var(--muted); }
.portfolio-page .acc-kpis .kpi strong{ font-size:13.5px; font-weight:600; }

/* Réactif */
@media (max-width:960px){
  .portfolio-page .kpi-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .portfolio-page .ctx-container{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* Tuiles règles/stratégie : passe à 3 colonnes */
  .portfolio-page #rules-strategy-page-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:720px){
  .portfolio-page .page-header{ grid-template-columns:1fr; align-items:start; gap:8px; }
  .portfolio-page .kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .portfolio-page .ctx-container{ grid-template-columns:1fr; gap:10px; }
  .portfolio-page .portfolio-table thead{ display:none; }
  .portfolio-page .portfolio-table tbody tr{ display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; padding:10px 8px; }
  .portfolio-page .portfolio-table tbody td{ border:none; padding:2px 0; }
  .portfolio-page .portfolio-table tbody td.tag-cell{ grid-column:1 / -1; }
  .portfolio-page .portfolio-table tbody td.actions-cell{ grid-column:2 / -1; justify-self:end; }
  .portfolio-page .strategy-list .s-row{ grid-template-columns:84px 1fr; }
  .portfolio-page .acc-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* Tuiles règles/stratégie : passe à 2 colonnes */
  .portfolio-page #rules-strategy-page-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
}

/* Boutons défensifs (si needed) */
.portfolio-page .btn{ appearance:none; border:1px solid var(--border); background:var(--panel-2); color:var(--text); padding:6px 10px; border-radius:10px; cursor:pointer; }
.portfolio-page .btn--ghost{ background:transparent; }
.portfolio-page .btn--primary{
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent), #000 20%), var(--accent));
  border:1px solid color-mix(in srgb, var(--accent), #000 50%);
}
.portfolio-page .btn--sm{ font-size:12.5px; padding:4px 8px; border-radius:8px; }

/* === portfolio.patch.css (additive) ===
   Drop this at the end of /static/css/pages/portfolio.css OR import after it.
   It adds:
   - .badge + tone variants
   - .rules-block / .rules-head / .rules-title / .rules-list
   - .tag-line2 separators (.sep) & spacing
   - Accessibility/focus for chip links
*/

/* Badges provenance (G/B/S) */
.portfolio-page .badge{
  display:inline-grid; place-items:center;
  min-width:18px; height:18px; padding:0 6px;
  border-radius:999px; border:1px solid var(--border);
  background:var(--panel-2); color:var(--text);
  font-size:11px; line-height:1; font-weight:700;
}
.portfolio-page .badge.neutral{ opacity:.85; }
.portfolio-page .badge.success{ background:color-mix(in srgb, #22c55e, var(--panel-2) 55%); border-color:color-mix(in srgb, #22c55e, var(--border) 55%); color:#081b0f; }
.portfolio-page .badge.danger { background:color-mix(in srgb, #ef4444, var(--panel-2) 55%); border-color:color-mix(in srgb, #ef4444, var(--border) 55%); color:#2a0c0c; }

/* Ligne 2: petits séparateurs (·) déjà prévus en HTML via <span class="sep">•</span> */
.portfolio-page .tag-line2 .sep{ opacity:.4; }

/* Bloc “Règles pour <Tag>” */
.portfolio-page .rules-block{ display:grid; gap:8px; margin-bottom:8px; }
.portfolio-page .rules-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.portfolio-page .rules-title{ font-weight:700; font-size:13.25px; }
.portfolio-page .rules-list{ display:grid; gap:6px; margin-top:6px; }
.portfolio-page .rules-list .s-row{ display:grid; grid-template-columns:1fr auto; gap:8px; }
.portfolio-page .rules-list .s-label{ color:var(--muted); font-size:12px; }
.portfolio-page .rules-list .s-val{ display:inline-flex; gap:6px; align-items:center; }

/* Chip links (Insights) : focus visible */
.portfolio-page .chip-link:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--color-primary-glow, rgba(124,139,255,.35));
  border-radius:6px;
}


/* --- Détail (accordéon) : badges de performance homogènes --- */
.portfolio-page .accordion { padding: .75rem 0 0; }
.portfolio-page .accordion-head { margin-bottom: .25rem; color: var(--text-muted); }
.portfolio-page .accordion .mini-table { width: 100%; border-collapse: collapse; }
.portfolio-page .accordion .mini-table th,
.portfolio-page .accordion .mini-table td { padding: .35rem .5rem; }

/* Couleurs cohérentes avec le tableau principal */
.portfolio-page .positive { color: var(--green-600, #15803d); }
.portfolio-page .negative { color: var(--red-600, #dc2626); }

/* Badge perf % dans le détail (similaire au composant de la colonne "Perf") */
.portfolio-page .perf-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: .35rem;
  padding: .15rem .45rem;
  border-radius: .375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Arrière-plan léger en fonction du signe */
.portfolio-page .perf-badge.positive {
  background: rgba(16, 185, 129, .12);   /* vert 500 ~tailwind, fallback si pas de tokens */
  color: var(--green-600, #15803d);
}
.portfolio-page .perf-badge.negative {
  background: rgba(239, 68, 68, .12);    /* rouge 500 */
  color: var(--red-600, #dc2626);
}

/* Petite icône flèche */
.portfolio-page .perf-badge .perf-icon {
  font-size: .85em;
  line-height: 1;
}

/* Valeur pourcentage compacte et lisible */
.portfolio-page .perf-badge .perf-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}

/* Harmonisation des nombres dans la mini-table */
.portfolio-page .mini-table .text-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}