/* portfolio-observation.css — version health-ui/1
 * Lot : health-ui-preparation/20261020T093213+0200 — PROPOSÉ, non déployé.
 * Étend (ne remplace pas) le CSS observation-v1 déployé.
 * Compatible mobile-first ; aucune ressource externe.
 */

/* ── Panneau de base (inchangé depuis observation-v1) ────────────────────── */
.portfolio-toolbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 18px 0;
}
.portfolio-toolbar small { max-width: 68ch; color: #526c75; }

.portfolio-observation {
  border: 1px solid var(--line, #dce4e8);
  border-radius: 12px;
  background: #fff;
  padding: 20px;
  margin: 16px 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.portfolio-observation h2,
.portfolio-observation h3 { margin: 0 0 10px; }

.portfolio-observation .portfolio-status {
  font-weight: 650; color: #126a60;
}
.portfolio-observation .portfolio-warning {
  background: #fff7e8;
  border-left: 3px solid #d99a29;
  padding: 12px;
  line-height: 1.5;
}
.portfolio-observation .portfolio-position {
  padding: 16px 0;
  border-top: 1px solid var(--line, #dce4e8);
  min-width: 0;
}
.portfolio-observation dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 8px 18px;
  margin: 12px 0;
}
.portfolio-observation dt { color: #526c75; }
.portfolio-observation dd {
  margin: 0; min-width: 0; overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.portfolio-observation .portfolio-provenance {
  font-size: .8rem; line-height: 1.5; color: #526c75; overflow-wrap: anywhere;
}
.portfolio-observation .portfolio-limit {
  font-size: .9rem; line-height: 1.5; color: #526c75;
}

/* ── Panneau de santé ────────────────────────────────────────────────────── */
.portfolio-health {
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 14px;
  border: 1px solid transparent;
  line-height: 1.5;
}

/* Indicateur coloré par état */
.portfolio-health.health-recent {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #064e3b;
}
.portfolio-health.health-recent .portfolio-health-dot { color: #10b981; }

.portfolio-health.health-stale {
  background: #fffbeb;
  border-color: #fbbf24;
  color: #78350f;
}
.portfolio-health.health-stale .portfolio-health-dot { color: #f59e0b; }

.portfolio-health.health-incident {
  background: #fff1f2;
  border-color: #fca5a5;
  color: #7f1d1d;
}
.portfolio-health.health-incident .portfolio-health-dot { color: #ef4444; }

.portfolio-health.health-auth {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #78350f;
}
.portfolio-health.health-auth .portfolio-health-dot { color: #d97706; }

.portfolio-health.health-unknown {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #374151;
}
.portfolio-health.health-unknown .portfolio-health-dot { color: #9ca3af; }

/* Contenu du panneau de santé */
.portfolio-health-status {
  margin: 0 0 6px;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.portfolio-health-dot {
  font-size: 1.1em;
  line-height: 1;
  flex-shrink: 0;
}
.portfolio-health-incident {
  margin: 4px 0;
  font-size: .9rem;
  font-weight: 600;
  padding: 6px 10px;
  background: rgba(239, 68, 68, .1);
  border-radius: 4px;
}
.portfolio-health-auth {
  margin: 4px 0;
  font-size: .9rem;
  padding: 6px 10px;
  background: rgba(217, 119, 6, .08);
  border-radius: 4px;
}
.portfolio-health-stale-note {
  margin: 4px 0;
  font-size: .85rem;
  color: #92400e;
  font-style: italic;
}
.portfolio-health-age {
  margin: 4px 0;
  font-size: .85rem;
  color: inherit;
  opacity: .85;
}
.portfolio-health-pending {
  margin: 4px 0;
  font-size: .85rem;
  font-style: italic;
}
.portfolio-health-import {
  margin: 6px 0 0;
  font-size: .88rem;
  color: inherit;
  opacity: .9;
}
.portfolio-health-note {
  margin: 8px 0 0;
  font-size: .78rem;
  color: #526c75;
  line-height: 1.45;
}

/* Details du panneau santé */
.portfolio-health-details,
.portfolio-batch-details,
.portfolio-provenance-details,
.portfolio-position-ids,
.portfolio-reserves {
  margin: 10px 0 0;
  font-size: .85rem;
}
.portfolio-health-details summary,
.portfolio-batch-details summary,
.portfolio-provenance-details summary,
.portfolio-position-ids summary,
.portfolio-reserves summary {
  cursor: pointer;
  color: #526c75;
  font-size: .82rem;
  padding: 3px 0;
  user-select: none;
}
.portfolio-health-details summary:hover,
.portfolio-batch-details summary:hover,
.portfolio-provenance-details summary:hover,
.portfolio-position-ids summary:hover,
.portfolio-reserves summary:hover {
  color: #102f39;
}
.portfolio-health-details > dl,
.portfolio-batch-details > dl,
.portfolio-provenance-details > dl,
.portfolio-position-ids > dl {
  font-size: .82rem;
}

/* Réserves */
.portfolio-reserves ul {
  margin: 6px 0;
  padding-left: 18px;
  color: #526c75;
  line-height: 1.6;
}

/* UTC inline */
.portfolio-utc {
  color: #526c75;
  font-size: .78rem;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

/* Auth required message (401) */
.portfolio-auth-required {
  padding: 12px 14px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  color: #78350f;
  margin: 8px 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .portfolio-observation { padding: 14px; }
  .portfolio-observation dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .portfolio-observation dd { margin: 0 0 9px; }
  .portfolio-health { padding: 10px 12px; }
}