/*
 * Habillage de l'app d'administration.
 *
 * Volontairement mince: les composants viennent de WordPress, donc l'interface suit deja
 * l'apparence de l'administration du marchand. Ce fichier ne fait que la mise en page propre a
 * Convrail: metriques, etapes d'installation, graphique.
 */

.convrail-app {
  max-width: 1120px;
}

/*
 * Barre d'onglets en flex qui passe a la ligne: les onglets de WordPress flottent, et en francais
 * l'onglet renvoye a la ligne se logeait sous l'onglet actif au lieu de commencer la rangee
 * suivante (revue visuelle du 2026-09-23).
 */
.convrail-tabs {
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
  margin-bottom: 20px;
}

.convrail-tabs .nav-tab {
  float: none;
  background: none;
  border-bottom: 0;
  cursor: pointer;
  font-size: 14px;
}

/*
 * Un avis ne se colle jamais a ce qui le suit (carte, interrupteurs): le composant Notice de
 * WordPress n'a pas de marge basse dans l'app. En fin de carte, la marge interne suffit.
 */
.convrail-app .components-notice {
  margin: 0 0 16px;
}

.convrail-section .components-notice:last-child {
  margin-bottom: 0;
}

/* Le bouton d'essai d'un onglet reserve a une offre respire sous le texte qui le presente. */
.convrail-plan-locked__cta {
  margin: 16px 0 0;
}

.convrail-headline {
  font-size: 16px;
  margin: 0 0 20px;
}

.convrail-section {
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 16px 20px 20px;
}

.convrail-section > h2 {
  font-size: 14px;
  margin: 0 0 12px;
}

.convrail-help {
  color: #646970;
  margin: 4px 0 16px;
}

.convrail-empty {
  color: #646970;
  margin: 8px 0;
}

.convrail-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.convrail-metric {
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 4px;
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
}

.convrail-metric__label {
  color: #646970;
  font-size: 12px;
}

.convrail-metric__value {
  font-size: 22px;
  line-height: 1.2;
}

/* Etat vide d'une tuile: une phrase, en taille de texte courante. */
.convrail-metric__empty {
  color: #646970;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 4px;
}

.convrail-metric__hint {
  color: #646970;
  font-size: 12px;
}

.convrail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.convrail-steps {
  list-style: none;
  margin: 0;
}

.convrail-step {
  border-top: 1px solid #f0f0f1;
  padding: 10px 0;
}

.convrail-step:first-child {
  border-top: 0;
}

.convrail-step__badge {
  background: #f0f0f1;
  border-radius: 2px;
  color: #3c434a;
  display: inline-block;
  font-size: 11px;
  margin-right: 8px;
  padding: 2px 8px;
}

.convrail-step__badge.is-done {
  background: #edfaef;
  color: #00650f;
}

.convrail-step__badge.is-error {
  background: #fcf0f1;
  color: #8a2424;
}

.convrail-step__hint {
  color: #646970;
  margin: 6px 0 0;
}

.convrail-step__action {
  margin-top: 8px;
}

.convrail-chart {
  margin: 0;
}

.convrail-chart__bar {
  fill: #2271b1;
}

.convrail-chart__spend {
  fill: none;
  stroke: #d63638;
  stroke-width: 1.5;
}

.convrail-chart__legend {
  color: #646970;
  display: flex;
  font-size: 12px;
  gap: 16px;
  margin-top: 8px;
}

.convrail-chart__key::before {
  border-radius: 2px;
  content: '';
  display: inline-block;
  height: 8px;
  margin-right: 6px;
  width: 8px;
}

.convrail-chart__key--revenue::before {
  background: #2271b1;
}

.convrail-chart__key--spend::before {
  background: #d63638;
}

.convrail-chart__range {
  margin-left: auto;
}

.convrail-share__bar {
  border-radius: 3px;
  display: flex;
  height: 14px;
  overflow: hidden;
}

.convrail-share__part.is-ads {
  background: #2271b1;
}

.convrail-share__part.is-organic {
  background: #72aee6;
}

.convrail-share__part.is-rest {
  background: #dcdcde;
}

.convrail-share__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  margin: 10px 0 0;
}

.convrail-share__dot {
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  margin-right: 6px;
  width: 8px;
}

.convrail-share__dot.is-ads {
  background: #2271b1;
}

.convrail-share__dot.is-organic {
  background: #72aee6;
}

.convrail-share__dot.is-rest {
  background: #dcdcde;
}

.convrail-attention {
  margin: 0 0 12px;
}

.convrail-attention li {
  border-left: 3px solid #dba617;
  margin-bottom: 8px;
  padding-left: 10px;
}

.convrail-attention li.is-critical {
  border-left-color: #d63638;
}

.convrail-attention strong {
  display: block;
}

.convrail-table {
  margin-top: 8px;
}

/*
 * Espacement des champs. Les composants de WordPress sont utilises avec
 * `__nextHasNoMarginBottom` (leur marge historique est en cours de retrait cote WordPress): sans
 * cette regle, les cases a cocher se collaient au champ precedent et les unes aux autres, vu a
 * l'ecran sur une vraie boutique.
 */
.convrail-section .components-base-control,
.convrail-section .components-checkbox-control,
.convrail-section .components-toggle-control {
  margin-bottom: 16px;
}

.convrail-section .components-base-control:last-child {
  margin-bottom: 0;
}

.convrail-section .components-checkbox-control__label {
  padding-left: 4px;
}

/* Grille des offres: meme lecture que la grille de l'app Shopify, aux composants de WordPress pres. */
.convrail-toggle {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.convrail-plans {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 16px 0;
}

.convrail-plan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 4px;
}

.convrail-plan h3 {
  margin: 0;
}

.convrail-plan__price {
  margin: 4px 0 0;
  font-size: 28px;
  font-weight: 600;
}

.convrail-plan__note {
  margin: 0;
  color: #646970;
}

/* Descente sous le catalogue reel: une ligne, avant le bouton. */
.convrail-plan__warning {
  margin: 0;
  color: #996800;
  font-weight: 500;
}

.convrail-plan ul {
  margin: 8px 0 16px;
  padding-left: 18px;
  list-style: disc;
}

.convrail-plan .components-button {
  margin-top: auto;
  justify-content: center;
}

/* Alertes: une liste lisible, gravite et etat en pastilles. */
.convrail-alerts {
  margin: 0;
  list-style: none;
}
.convrail-alert {
  padding: 12px 0;
  border-top: 1px solid #f0f0f1;
}
.convrail-alert:first-child {
  border-top: 0;
}
.convrail-alert p {
  margin: 4px 0;
}
.convrail-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 18px;
  background: #f0f0f1;
  color: #1d2327;
}
.convrail-badge--critical {
  background: #fcf0f1;
  color: #8a2424;
}
.convrail-badge--warning {
  background: #fcf9e8;
  color: #6d5310;
}
.convrail-badge--info {
  background: #f0f6fc;
  color: #0a4b78;
}
.convrail-badge--success {
  background: #edfaef;
  color: #005c12;
}

/*
 * Formulaire du flux: un espacement regulier entre les champs. Les controles WordPress sont
 * rendus sans marge basse (`__nextHasNoMarginBottom`), et une aide placee sous un champ touchait
 * le libelle suivant. Les champs a jetons (pays, categories) etaient aussi un peu plus larges que
 * les autres: meme calcul de largeur pour tous.
 */
.convrail-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.convrail-form .convrail-help {
  margin: -8px 0 0;
}

.convrail-form .components-base-control,
.convrail-form .components-form-token-field,
.convrail-form .components-form-token-field__input-container {
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
}