/* Palette par défaut, utilisée uniquement si ce fichier est ouvert seul
   (hors de la doc). Dans la doc, elle est remplacée par les vraies valeurs
   du thème Material (voir le script de synchronisation ci-dessous). */
:root {
  --md-primary-fg-color: #4caf50;
  --md-primary-fg-color--light: #66bb6a;
  --md-accent-fg-color: #00c853;
  --md-default-bg-color: #ffffff;
  --md-default-fg-color: rgba(0, 0, 0, 0.87);
  --md-default-fg-color--light: rgba(0, 0, 0, 0.54);
  --md-default-fg-color--lighter: rgba(0, 0, 0, 0.32);
  --md-typeset-table-color: rgba(0, 0, 0, 0.12);
  --md-code-bg-color: #f5f5f5;
}
:root[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #009688;
  --md-primary-fg-color--light: #4db6ac;
  --md-accent-fg-color: #00bfa5;
  --md-default-bg-color: #1e2129;
  --md-default-fg-color: rgba(255, 255, 255, 0.87);
  --md-default-fg-color--light: rgba(255, 255, 255, 0.54);
  --md-default-fg-color--lighter: rgba(255, 255, 255, 0.32);
  --md-typeset-table-color: rgba(255, 255, 255, 0.12);
  --md-code-bg-color: #272a35;
}

html, body { margin: 0; padding: 0; }
body {
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font-family: Roboto, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
a { color: var(--md-accent-fg-color); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Titre et texte d'intro, repris de la page de doc. */
.cps-intro { margin-bottom: 20px; }
.cps-intro h1 {
  font-size: 1.6em;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--md-default-fg-color);
}
.cps-intro p {
  margin: 0;
  color: var(--md-default-fg-color);
  font-size: 1.2em;
}

.cps-upgrade-tool {
  border: 1px solid var(--md-typeset-table-color);
  border-radius: 6px;
  margin: 0;
  overflow: hidden;
}

/* Couleurs sémantiques fixes, indépendantes du thème Material */
.cps-upgrade-tool { --cps-mongo: #d97706; --cps-tsdb: #d97706; --cps-pg: #d97706; --cps-bkp: #7c3aed; }
[data-md-color-scheme="slate"] .cps-upgrade-tool {
  --cps-tsdb: #fbbf24; --cps-pg: #d97706; --cps-bkp: #a78bfa;
}

.cps-picker {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: var(--md-code-bg-color);
  border-bottom: 1px solid var(--md-typeset-table-color);
}
.cps-field { display: flex; flex-direction: column; gap: 4px; }
.cps-field label { font-size: 0.8em; color: var(--md-default-fg-color--light); }
.cps-field select {
  font: inherit;
  font-size: 0.9em;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid var(--md-default-fg-color--lighter);
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  min-width: 140px;
}

#cps-result { padding: 20px; }
.cps-msg { font-size: 0.9em; color: var(--md-default-fg-color--light); }
.cps-msg.ok { color: var(--md-primary-fg-color); font-weight: 600; }

.cps-timeline { list-style: none; margin: 0; padding: 0; }
.cps-timeline li {
  position: relative;
  padding: 0 0 22px 34px;
  border-left: 2px solid var(--md-typeset-table-color);
  margin-left: 8px;
  font-size: 0.88em;
}
.cps-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.cps-timeline li::before {
  content: attr(data-index);
  position: absolute;
  left: -14px;
  top: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75em;
  font-weight: 700;
  color: #fff;
  background: var(--cps-step-color, var(--md-default-fg-color--lighter));
}
.cps-timeline li[data-type="start"]       { --cps-step-color: var(--md-default-fg-color--light); }
.cps-timeline li[data-type="reconfigure"] { --cps-step-color: var(--md-primary-fg-color); }
.cps-timeline li[data-type="upgrade"]     { --cps-step-color: var(--md-accent-fg-color); }
.cps-timeline li[data-type="alter"]       { --cps-step-color: var(--cps-tsdb); }
.cps-timeline li[data-type="dump"],
.cps-timeline li[data-type="import"]      { --cps-step-color: var(--md-default-fg-color--light); }

/* Étapes mises en avant (champ "highlight" dans les données) */
.cps-timeline li[data-highlight="tsdb"]   { --cps-step-color: var(--cps-tsdb); }
.cps-timeline li[data-highlight="mongo"]  { --cps-step-color: var(--cps-mongo); }
.cps-timeline li[data-highlight="pg"]     { --cps-step-color: var(--cps-pg); }
.cps-timeline li[data-highlight="backup"] { --cps-step-color: var(--cps-bkp); }
.cps-timeline li[data-highlight] .cps-step-body {
  margin-top: -4px;
  padding: 8px 12px;
  border-left: 3px solid var(--cps-step-color);
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--cps-step-color) 10%, transparent);
}

/* Pastille de version : couleur selon la version majeure de PostgreSQL */
.cps-chip {
  --chip: var(--md-default-fg-color--light);
  padding: 1px 7px;
  border-radius: 4px;
  font-weight: 600;
  color: var(--chip);
  background: color-mix(in srgb, var(--chip) 15%, transparent);
}
.cps-chip[data-pg="15"] { --chip: var(--cps-tsdb); }
.cps-chip[data-pg="17"] { --chip: var(--cps-pg); }

.cps-step-label { font-weight: 600; }
.cps-step-tag {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.75em;
  font-weight: 600;
  color: var(--cps-step-color);
}
.cps-step-detail {
  margin-top: 2px;
  color: var(--md-default-fg-color--light);
}
.cps-step-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.85em;
}

/* Repère "documentation" : petit nœud sur le rail + trait pointillé */
.cps-timeline li[data-type="docref"] {
  padding-bottom: 22px;
}
.cps-timeline li[data-type="docref"]::before {
  display: none;
}
.cps-docref {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  position: relative;
  margin-left: -41px; /* 34px (padding du li) + 7px pour centrer le rond sur la ligne */
}
.cps-docref-anchor {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0; /* Empêche le bouton et le trait de se compresser sous Firefox */
}
.cps-docref-dot {
  box-sizing: border-box;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--md-accent-fg-color);
  border-radius: 50%;
  background: var(--md-default-bg-color);
}
.cps-docref-line {
  flex: 0 0 25px;
  width: 25px;
  margin-right: 8px; /* Espacement garanti entre la ligne pointillée et le bouton */
  border-top: 2px dashed var(--md-accent-fg-color);
}
.cps-docref a {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border: 1px solid var(--md-accent-fg-color);
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}
.cps-docref a:hover {
  background: var(--md-accent-fg-color);
  color: var(--md-default-bg-color);
}
.cps-docref-note {
  font-size: 0.82em;
  color: var(--md-default-fg-color--light);
  flex: 1 1 200px;
  margin-left: 4px; /* Espace de sécurité entre le bouton et le texte */
}

/* Repère "Warning / Attention" plein écran (prend toute la largeur) */
.cps-timeline li[data-type="warning"] { padding-bottom: 22px; }
.cps-timeline li[data-type="warning"]::before { display: none; }
.cps-warning {
  display: flex;
  align-items: center;
  width: 100%;
}
.cps-warning-anchor {
  display: inline-flex;
  align-items: center;
  margin-left: -41px;
  flex-shrink: 0;
}
.cps-warning-dot {
  box-sizing: border-box;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border: 2px solid #eab308; /* Jaune / Orange d'avertissement */
  border-radius: 50%;
  background: var(--md-default-bg-color);
}
.cps-warning-line {
  width: 25px;
  margin-right: 4px;
  border-top: 2px dashed #eab308;
}
/* Encadré prenant toute la largeur restante */
.cps-warning-box {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Permet un bon comportement sur mobile si le texte est long */
  gap: 12px;
  padding: 8px 14px;
  border: 1px solid #eab308;
  border-left: 4px solid #eab308;
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, #eab308 10%, transparent);
  font-size: 0.88em;
}
.cps-warning-content {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--md-default-fg-color);
  font-weight: bold;
}
.cps-warning-icon {
  font-size: 1.1em;
}
.cps-warning-box a {
  color: #d97706;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
}
[data-md-color-scheme="slate"] .cps-warning-box a {
  color: #fbbf24;
}