/*
 * Panels d'information (info / note / success / warning / error), façon volets Jira.
 * Trois volets :
 *   1. rendu commun des <div class="adf-panel--{type}"> — en édition (.ql-editor) ET en
 *      lecture seule (.ticket-description, .comment-card__body) pour un rendu identique ;
 *   2. picker de type dans la toolbar (intitulés FR + pastille de couleur).
 * Design : pas de bordure, fond teinté contrasté, ICÔNE colorée en haut à GAUCHE,
 * TEXTE blanc (var(--text-0) : blanc en thème sombre, lisible en clair). Couleurs via
 * tokens uniquement (cf. CLAUDE.md).
 */

/* ── Rendu commun (édition + lecture seule) ───────────────────── */
.ql-editor .adf-panel,
.ticket-description .adf-panel,
.comment-card__body .adf-panel {
  position: relative;
  padding: 10px 14px 10px 40px;
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--text-0);
  margin: 12px 0;
}

.ql-editor .adf-panel .adf-panel__line,
.ticket-description .adf-panel .adf-panel__line,
.comment-card__body .adf-panel .adf-panel__line {
  margin: 0;
}

/* Icône du type, en haut à gauche (FontAwesome 5 solid). La couleur de l'icône est
   posée par type (le texte du panneau, lui, reste blanc). */
.ql-editor .adf-panel::after,
.ticket-description .adf-panel::after,
.comment-card__body .adf-panel::after {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
}

/* Info → bleu (info-circle \f05a) */
.ql-editor .adf-panel--info,
.ticket-description .adf-panel--info,
.comment-card__body .adf-panel--info {
  background: var(--tint-blue);
}
.ql-editor .adf-panel--info::after,
.ticket-description .adf-panel--info::after,
.comment-card__body .adf-panel--info::after {
  content: "\f05a";
  color: var(--c-blue);
}

/* Note → violet (sticky-note \f249) */
.ql-editor .adf-panel--note,
.ticket-description .adf-panel--note,
.comment-card__body .adf-panel--note {
  background: var(--tint-purple);
}
.ql-editor .adf-panel--note::after,
.ticket-description .adf-panel--note::after,
.comment-card__body .adf-panel--note::after {
  content: "\f249";
  color: var(--c-purple);
}

/* Opération réussie → vert (check-circle \f058) */
.ql-editor .adf-panel--success,
.ticket-description .adf-panel--success,
.comment-card__body .adf-panel--success {
  background: var(--tint-green);
}
.ql-editor .adf-panel--success::after,
.ticket-description .adf-panel--success::after,
.comment-card__body .adf-panel--success::after {
  content: "\f058";
  color: var(--c-green);
}

/* Avertissement → orange (exclamation-triangle \f071) */
.ql-editor .adf-panel--warning,
.ticket-description .adf-panel--warning,
.comment-card__body .adf-panel--warning {
  background: var(--tint-orange);
}
.ql-editor .adf-panel--warning::after,
.ticket-description .adf-panel--warning::after,
.comment-card__body .adf-panel--warning::after {
  content: "\f071";
  color: var(--c-orange);
}

/* Erreur → rouge (times-circle \f057) */
.ql-editor .adf-panel--error,
.ticket-description .adf-panel--error,
.comment-card__body .adf-panel--error {
  background: var(--tint-red);
}
.ql-editor .adf-panel--error::after,
.ticket-description .adf-panel--error::after,
.comment-card__body .adf-panel--error::after {
  content: "\f057";
  color: var(--c-red);
}

/* ── Picker de type dans la toolbar ───────────────────────────── */
.ql-snow .ql-picker.ql-panel {
  width: auto;
}

.ql-snow .ql-picker.ql-panel .ql-picker-label {
  padding-right: 20px;
}

.ql-snow .ql-picker.ql-panel .ql-picker-label::before {
  content: "Panneau";
}

.ql-snow .ql-picker.ql-panel .ql-picker-options {
  min-width: 170px;
}

/* Pastille de couleur (::before) + intitulé FR (::after) par option. */
.ql-snow .ql-picker.ql-panel .ql-picker-item::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--border-strong);
}

.ql-snow .ql-picker.ql-panel .ql-picker-item::after {
  margin-left: 8px;
  vertical-align: middle;
}

.ql-snow .ql-picker.ql-panel .ql-picker-item[data-value="info"]::before {
  background: var(--c-blue);
}
.ql-snow .ql-picker.ql-panel .ql-picker-item[data-value="info"]::after {
  content: "Information";
}

.ql-snow .ql-picker.ql-panel .ql-picker-item[data-value="note"]::before {
  background: var(--c-purple);
}
.ql-snow .ql-picker.ql-panel .ql-picker-item[data-value="note"]::after {
  content: "Note";
}

.ql-snow .ql-picker.ql-panel .ql-picker-item[data-value="success"]::before {
  background: var(--c-green);
}
.ql-snow .ql-picker.ql-panel .ql-picker-item[data-value="success"]::after {
  content: "Opération réussie";
}

.ql-snow .ql-picker.ql-panel .ql-picker-item[data-value="warning"]::before {
  background: var(--c-orange);
}
.ql-snow .ql-picker.ql-panel .ql-picker-item[data-value="warning"]::after {
  content: "Avertissement";
}

.ql-snow .ql-picker.ql-panel .ql-picker-item[data-value="error"]::before {
  background: var(--c-red);
}
.ql-snow .ql-picker.ql-panel .ql-picker-item[data-value="error"]::after {
  content: "Erreur";
}