/* ═══════════════════════════════════════════════════════════════════════
   ForgeMix Forum — CKEditor 5 Dark Theme Overrides
   Adapte CKEditor Classic au design sombre du forum.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Variables CKEditor → variables ForgeMix ───────────────────────── */
.ck.ck-editor {
  --ck-color-base-background:              #0f0f16;      /* --bg1 */
  --ck-color-toolbar-background:           #12121c;      /* --panel */
  --ck-color-toolbar-border:               rgba(200,148,42,.25); /* --gold-border */
  --ck-color-base-border:                  rgba(200,148,42,.25);
  --ck-color-base-text:                    #d4cfc0;      /* --text */
  --ck-color-focus-border:                 #c8942a;      /* --gold */
  --ck-color-focus-outer-shadow:           rgba(200,148,42,.18);

  /* Boutons de la barre d'outils */
  --ck-color-button-default-background:    transparent;
  --ck-color-button-default-hover-background: rgba(200,148,42,.12);
  --ck-color-button-default-active-background: rgba(200,148,42,.2);
  --ck-color-button-on-background:         rgba(200,148,42,.18);
  --ck-color-button-on-hover-background:   rgba(200,148,42,.28);
  --ck-color-button-on-active-background:  rgba(200,148,42,.35);
  --ck-color-button-on-color:              #dba83c;      /* --gold-light */
  --ck-color-button-default-disabled-background: transparent;

  /* Listes / dropdown */
  --ck-color-list-background:              #141420;      /* --bg2 */
  --ck-color-list-button-on-background:    rgba(200,148,42,.18);
  --ck-color-list-button-on-hover-background: rgba(200,148,42,.25);
  --ck-color-list-button-hover-background: rgba(200,148,42,.1);
  --ck-color-dropdown-panel-background:    #141420;
  --ck-color-dropdown-panel-border:        rgba(200,148,42,.25);

  /* Champs input (lien, etc.) */
  --ck-color-input-background:             #1a1a28;      /* --bg3 */
  --ck-color-input-border:                 rgba(200,148,42,.35);
  --ck-color-input-text:                   #f0ead8;      /* --text-bright */

  /* Ballon tooltip */
  --ck-color-tooltip-background:           #222235;      /* --bg4 */
  --ck-color-tooltip-text:                 #f0ead8;

  /* Couleur secondaire dans l'icône active */
  --ck-color-button-action-background:     rgba(200,148,42,.2);
  --ck-color-button-action-hover-background: rgba(200,148,42,.32);
  --ck-color-button-action-text:           #dba83c;

  /* Séparateurs */
  --ck-color-toolbar-separator:            rgba(200,148,42,.2);

  /* Contenu de l'éditeur */
  --ck-color-editor-base-text:             #d4cfc0;
  --ck-color-base-active:                  rgba(200,148,42,.18);
  --ck-color-base-active-focus:            rgba(200,148,42,.28);
  --ck-color-widget-blurred-border:        rgba(200,148,42,.15);
  --ck-color-widget-hover-border:          rgba(200,148,42,.4);
  --ck-color-widget-editable-focus-background: rgba(200,148,42,.04);

  /* Taille */
  --ck-border-radius:                      4px;
  --ck-font-face:                          'Lato', 'Segoe UI', sans-serif;
  --ck-font-size-base:                     .88rem;

  /* Ombre de l'éditeur hors focus */
  --ck-outer-shadow-geometry:              0 0 0 3px;
}

/* ─── Wrapper global ─────────────────────────────────────────────────── */
.ck-editor__top .ck-toolbar {
  border-color: var(--ck-color-toolbar-border) !important;
  border-radius: 4px 4px 0 0 !important;
}

.ck-editor__main .ck-editor__editable {
  background: #0f0f16 !important;
  color: #d4cfc0 !important;
  border: 1px solid rgba(200,148,42,.25) !important;
  border-top: none !important;
  border-radius: 0 0 4px 4px !important;
  min-height: 200px;
  font-size: .88rem;
  line-height: 1.75;
}

.ck-editor__main .ck-editor__editable.ck-focused {
  border-color: #c8942a !important;
  box-shadow: 0 0 0 2px rgba(200,148,42,.18) !important;
}

/* ─── Contenu dans l'éditeur (typo cohérente) ───────────────────────── */
.ck-content { overflow-wrap: break-word; word-break: break-word; }
.ck-content blockquote {
  border-left: 3px solid rgba(200,148,42,.45);
  padding: 6px 14px;
  margin: 10px 0;
  color: #7a7568;       /* --text-muted */
  font-style: italic;
  background: rgba(200,148,42,.05);
  border-radius: 0 4px 4px 0;
}

.ck-content code,
.ck-content pre code {
  background: #1a1a28;  /* --bg3 */
  color: #f5cc6a;       /* --gold-bright */
  border-radius: 3px;
  padding: 2px 6px;
  font-size: .84rem;
}

.ck-content pre {
  background: #1a1a28;
  border: 1px solid rgba(200,148,42,.2);
  border-radius: 4px;
  padding: 12px 16px;
  overflow-x: auto;
}

.ck-content a {
  color: #c8942a;       /* --gold */
}

.ck-content a:hover {
  color: #dba83c;       /* --gold-light */
}

.ck-content h2, .ck-content h3, .ck-content h4 {
  color: #f0ead8;       /* --text-bright */
}

/* ─── Dropdown panels ────────────────────────────────────────────────── */
.ck .ck-dropdown__panel {
  background: #141420 !important;
  border: 1px solid rgba(200,148,42,.25) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
}

.ck .ck-list__item .ck-button:hover,
.ck .ck-list__item .ck-button.ck-on {
  background: rgba(200,148,42,.15) !important;
  color: #dba83c !important;
}

/* ─── Tooltip ────────────────────────────────────────────────────────── */
.ck .ck-tooltip .ck-tooltip__text {
  background: #222235 !important;
  color: #f0ead8 !important;
}

/* ─── Barre de formatage icônes ──────────────────────────────────────── */
.ck .ck-toolbar .ck-button svg {
  fill: #7a7568 !important;
}

.ck .ck-toolbar .ck-button:hover svg,
.ck .ck-toolbar .ck-button.ck-on svg {
  fill: #dba83c !important;
}

/* ─── Champs de saisie dans les panneaux (ex : lien) ─────────────────── */
.ck .ck-labeled-field-view .ck-input {
  background: #1a1a28 !important;
  border: 1px solid rgba(200,148,42,.35) !important;
  color: #f0ead8 !important;
  border-radius: 4px !important;
}

.ck .ck-labeled-field-view .ck-input:focus {
  border-color: #c8942a !important;
  box-shadow: 0 0 0 2px rgba(200,148,42,.15) !important;
}

.ck .ck-labeled-field-view__label {
  color: #7a7568 !important;
}

/* ─── Panneau du bouton Lien / Media etc. ────────────────────────────── */
.ck.ck-balloon-panel {
  background: #141420 !important;
  border: 1px solid rgba(200,148,42,.35) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.55) !important;
}

/* ─── Heading dropdown items ────────────────────────────────────────── */
.ck .ck-heading_paragraph,
.ck .ck-heading_heading1,
.ck .ck-heading_heading2,
.ck .ck-heading_heading3 {
  color: #d4cfc0 !important;
}

/* ─── Scrollbar (Webkit) ─────────────────────────────────────────────── */
.ck-editor__editable::-webkit-scrollbar { width: 6px; height: 6px; }
.ck-editor__editable::-webkit-scrollbar-track { background: transparent; }
.ck-editor__editable::-webkit-scrollbar-thumb {
  background: rgba(200,148,42,.2);
  border-radius: 3px;
}
.ck-editor__editable::-webkit-scrollbar-thumb:hover {
  background: rgba(200,148,42,.45);
}

/* ─── Tableaux ───────────────────────────────────────────────────────── */
.ck-content .table {
  margin: 16px 0;
  overflow-x: auto;
}

.ck-content .table table {
  border-collapse: collapse;
  width: 100%;
  font-size: .85rem;
}

.ck-content .table table th,
.ck-content .table table td {
  border: 1px solid rgba(200,148,42,.3);
  padding: 8px 12px;
  vertical-align: top;
  color: #d4cfc0;
}

.ck-content .table table th {
  background: rgba(200,148,42,.1);
  color: #dba83c;
  font-weight: 600;
  text-align: left;
}

.ck-content .table table tr:nth-child(even) td {
  background: rgba(255,255,255,.025);
}

.ck-content .table table tr:hover td {
  background: rgba(200,148,42,.06);
}

/* Sélection de cellule en mode édition */
.ck .ck-editor__editable .table .ck-table-bogus-paragraph { color: #d4cfc0; }
.ck .ck-widget.ck-widget_with-selection-handle.table.ck-widget_selected .ck-widget__selection-handle,
.ck .ck-widget.ck-widget_with-selection-handle.table:hover .ck-widget__selection-handle {
  background: rgba(200,148,42,.2);
}

/* Popup des propriétés de cellule */
.ck.ck-form__row label { color: #d4cfc0 !important; }
.ck.ck-table-cell-properties-form .ck-input { background: #1a1a28 !important; color: #f0ead8 !important; }

/* ─── Images ────────────────────────────────────────────────────────── */
.ck-content .image {
  margin: 12px auto;
  text-align: center;
}

.ck-content .image img {
  max-width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(200,148,42,.2);
}

.ck-content .image > figcaption {
  font-size: .78rem;
  color: #7a7568;
  font-style: italic;
  padding: 6px 0 2px;
}

.ck-content .image.image_resized {
  max-width: 100%;
}

/* ─── Intégration média (YouTube, etc.) ─────────────────────────────── */
.ck-content .media {
  margin: 16px 0;
  border-radius: 6px;
  overflow: hidden;
}

.ck-content .media iframe,
.ck-content .ck-media__wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(200,148,42,.2);
  border-radius: 6px;
  background: #0a0a0f;
}

/* ─── Règle horizontale ─────────────────────────────────────────────── */
.ck-content hr {
  border: none;
  border-top: 1px solid rgba(200,148,42,.3);
  margin: 20px 0;
  position: relative;
}

.ck-content hr::before {
  content: '✦';
  position: absolute;
  left: 50%;
  top: -9px;
  transform: translateX(-50%);
  background: #0f0f16;
  color: rgba(200,148,42,.5);
  padding: 0 8px;
  font-size: .65rem;
}

/* ─── Surlignages personnalisés ─────────────────────────────────────── */
.ck-content .marker-gold   { background: rgba(200,148,42,.35); padding: 1px 3px; border-radius: 2px; }
.ck-content .marker-green  { background: rgba(74,222,128,.3);  padding: 1px 3px; border-radius: 2px; }
.ck-content .marker-red    { background: rgba(248,113,113,.3); padding: 1px 3px; border-radius: 2px; }
.ck-content .marker-blue   { background: rgba(96,165,250,.3);  padding: 1px 3px; border-radius: 2px; }
.ck-content .marker-purple { background: rgba(192,132,252,.3); padding: 1px 3px; border-radius: 2px; }

/* ─── Liste de tâches (todo list) ───────────────────────────────────── */
.ck-content .todo-list {
  list-style: none;
  padding-left: 4px;
}

.ck-content .todo-list .todo-list__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ck-content .todo-list .todo-list__label > input[type="checkbox"] {
  appearance:         none;
  -webkit-appearance: none;
  width:  14px;
  height: 14px;
  flex-shrink: 0;
  border: 1px solid rgba(200,148,42,.5);
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  top: 2px;
}

.ck-content .todo-list .todo-list__label > input[type="checkbox"]:checked {
  background: rgba(200,148,42,.25);
  border-color: #c8942a;
}

.ck-content .todo-list .todo-list__label > input[type="checkbox"]:checked::before {
  content: '✓';
  position: absolute;
  top: -1px;
  left: 1px;
  font-size: 10px;
  color: #c8942a;
  font-weight: bold;
}

.ck-content .todo-list .todo-list__label > .todo-list__label__description.strikethrough {
  text-decoration: line-through;
  color: #4a4840;
}

/* ─── Indentation ───────────────────────────────────────────────────── */
.ck-content .ck-list-bogus-paragraph { color: #d4cfc0; }
.ck-content ol[style*="list-style-type"],
.ck-content ul[style*="list-style-type"] { padding-left: 2em; }

/* ─── Alignement ────────────────────────────────────────────────────── */
.ck-content .ck-align-left     { text-align: left;    }
.ck-content .ck-align-center   { text-align: center;  }
.ck-content .ck-align-right    { text-align: right;   }
.ck-content .ck-align-justify  { text-align: justify; }

/* Format dans l'affichage final (hors éditeur) */
.post-content [style*="text-align:center"],
.post-content p[style*="text-align: center"]  { text-align: center; }
.post-content [style*="text-align:right"],
.post-content p[style*="text-align: right"]   { text-align: right;  }
.post-content [style*="text-align:justify"],
.post-content p[style*="text-align: justify"] { text-align: justify; }

/* ─── Titres dans post-content ──────────────────────────────────────── */
.post-content h2 { font-size: 1.15rem; color: #dba83c; margin: 16px 0 6px; border-bottom: 1px solid rgba(200,148,42,.2); padding-bottom: 4px; }
.post-content h3 { font-size: 1rem;    color: #c8942a; margin: 12px 0 4px; }
.post-content h4 { font-size: .9rem;   color: #d4cfc0; margin: 10px 0 4px; font-style: italic; }

/* ─── Sous/exposant ─────────────────────────────────────────────────── */
.ck-content sub,
.post-content sub { font-size: .75em; vertical-align: sub; }
.ck-content sup,
.post-content sup { font-size: .75em; vertical-align: super; }

/* ─── Tableaux dans post-content (affichage hors éditeur) ─────────── */
.post-content .table,
.post-content table {
  border-collapse: collapse;
  width: 100%;
  font-size: .85rem;
  margin: 12px 0;
  overflow-x: auto;
  display: block;
}

.post-content .table th,
.post-content .table td,
.post-content table th,
.post-content table td {
  border: 1px solid rgba(200,148,42,.3);
  padding: 7px 10px;
  color: #d4cfc0;
  vertical-align: top;
}

.post-content .table th,
.post-content table th {
  background: rgba(200,148,42,.1);
  color: #dba83c;
  font-weight: 600;
}

.post-content .table tr:nth-child(even) td,
.post-content table tr:nth-child(even) td {
  background: rgba(255,255,255,.02);
}

/* ─── Surlignages dans post-content (affichage hors éditeur) ─────── */
.post-content .marker-gold   { background: rgba(200,148,42,.35); padding: 1px 3px; border-radius: 2px; }
.post-content .marker-green  { background: rgba(74,222,128,.3);  padding: 1px 3px; border-radius: 2px; }
.post-content .marker-red    { background: rgba(248,113,113,.3); padding: 1px 3px; border-radius: 2px; }
.post-content .marker-blue   { background: rgba(96,165,250,.3);  padding: 1px 3px; border-radius: 2px; }
.post-content .marker-purple { background: rgba(192,132,252,.3); padding: 1px 3px; border-radius: 2px; }

/* ─── Images dans post-content ──────────────────────────────────────── */
.post-content .image img,
.post-content img:not([class]) {
  max-width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(200,148,42,.2);
}

.post-content figure.image { margin: 12px auto; text-align: center; }
.post-content figure.image figcaption {
  font-size: .78rem;
  color: #7a7568;
  font-style: italic;
  margin-top: 4px;
}

/* ─── Média dans post-content ───────────────────────────────────────── */
.post-content .media iframe,
.post-content .ck-media__wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(200,148,42,.2);
  border-radius: 6px;
  display: block;
  margin: 12px 0;
}

/* ─── HR dans post-content ──────────────────────────────────────────── */
.post-content hr {
  border: none;
  border-top: 1px solid rgba(200,148,42,.3);
  margin: 20px 0;
  position: relative;
}

.post-content hr::before {
  content: '✦';
  position: absolute;
  left: 50%;
  top: -9px;
  transform: translateX(-50%);
  background: var(--panel, #12121c);
  color: rgba(200,148,42,.5);
  padding: 0 8px;
  font-size: .65rem;
}

/* ─── Barre d'outils multi-ligne (shouldNotGroupWhenFull) ───────────── */
.ck .ck-toolbar.ck-toolbar_grouping { flex-wrap: wrap; height: auto; }

/* ─── Popup Rechercher / Remplacer ─────────────────────────────────── */
.ck.ck-find-and-replace-form {
  background: #141420 !important;
  border: 1px solid rgba(200,148,42,.3) !important;
}

.ck.ck-find-and-replace-form label { color: #d4cfc0 !important; }
.ck.ck-find-and-replace-form .ck-input {
  background: #1a1a28 !important;
  color: #f0ead8 !important;
  border-color: rgba(200,148,42,.3) !important;
}

/* ─── Caractères spéciaux — panneau ────────────────────────────────── */
.ck.ck-special-characters-navigation .ck-input {
  background: #1a1a28 !important;
  color: #f0ead8 !important;
  border-color: rgba(200,148,42,.3) !important;
}

.ck .ck-special-characters .ck-button {
  border-radius: 2px !important;
  color: #d4cfc0 !important;
}

.ck .ck-special-characters .ck-button:hover {
  background: rgba(200,148,42,.2) !important;
  color: #dba83c !important;
}

/* ─── Upload image placeholder ──────────────────────────────────────── */
.ck-content .image.ck-widget.ck-placeholder::before {
  color: #4a4840 !important;
}