/* =============================================================
   atlas-edn · notes perso — styles
   -------------------------------------------------------------
   Fichier compagnon de assets/notes-perso.js. Voir l'en-tête
   du JS pour les 2 ajouts standards à faire dans un nouvel item.
   ============================================================= */


/* ============================================================
   1. Toggle 📝 dans la modes-bar
   ------------------------------------------------------------
   Le bouton hérite des styles de base (.modes-bar > button) défini
   dans edition-mode.css : on ne redéfinit que l'état actif et le
   fallback flottant si la modes-bar est absente.
   ============================================================ */

.modes-bar .notes-perso-toggle.is-active {
  background-color: var(--spe-pneumo, #6b7a3a) !important;
  color: #fff !important;
  border-color: var(--spe-pneumo, #6b7a3a) !important;
}

body.dark-mode .modes-bar .notes-perso-toggle.is-active {
  background-color: var(--spe-genetique, #6b9c4d) !important;
  color: var(--bg-dark, #1a1713) !important;
  border-color: var(--spe-genetique, #6b9c4d) !important;
}

/* Fallback : modes-bar absente → on accroche le bouton en bas-droite. */
.notes-perso-toggle--floating {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9999;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--accent-dash, #c4b898);
  background: var(--bg-card, #faf6ec);
  color: var(--ink, #1a1713);
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}


/* ============================================================
   2. Zones d'insertion fantômes (visibles uniquement en mode
   édition perso, soit `body.np-editing`).
   ============================================================ */

.np-phantom {
  display: none;
}

body.np-editing .np-phantom {
  display: block;
  position: relative;
  margin: 6px 0;
  padding: 6px 0;
  border-top: 1px dashed rgba(107, 122, 58, 0.35); /* var(--spe-pneumo) atténuée */
  cursor: pointer;
  text-align: center;
  transition: border-color .18s, background-color .18s;
}

body.np-editing .np-phantom:hover,
body.np-editing .np-phantom:focus-visible {
  border-top-color: var(--spe-pneumo, #6b7a3a);
  background-color: rgba(107, 122, 58, 0.05);
  outline: none;
}

body.np-editing .np-phantom .np-phantom-label {
  display: inline-block;
  padding: 2px 10px;
  margin-top: -10px; /* fait chevaucher le label sur la ligne pointillée */
  background: var(--bg-cream, #f4efe6);
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-muted, #6b5e45);
  opacity: 0;
  transition: opacity .18s, color .18s;
}

body.np-editing .np-phantom:hover .np-phantom-label,
body.np-editing .np-phantom:focus-visible .np-phantom-label {
  opacity: 1;
  color: var(--spe-pneumo, #6b7a3a);
}

/* Dark mode : couleurs ajustées pour rester lisibles sur fond sombre. */
body.dark-mode.np-editing .np-phantom {
  border-top-color: rgba(107, 156, 77, 0.35); /* spe-genetique atténuée */
}

body.dark-mode.np-editing .np-phantom:hover,
body.dark-mode.np-editing .np-phantom:focus-visible {
  border-top-color: var(--spe-genetique, #6b9c4d);
  background-color: rgba(107, 156, 77, 0.08);
}

body.dark-mode.np-editing .np-phantom .np-phantom-label {
  background: var(--bg-dark, #1a1713);
  color: var(--accent-dash, #c4b898);
}

body.dark-mode.np-editing .np-phantom:hover .np-phantom-label,
body.dark-mode.np-editing .np-phantom:focus-visible .np-phantom-label {
  color: var(--spe-genetique, #6b9c4d);
}


/* ============================================================
   3. Éditeur inline (textarea + barre d'outils + actions)
   ============================================================ */

.np-editor {
  margin: 14px 0;
  padding: 10px 12px;
  background: var(--bg-card, #faf6ec);
  border: 1px solid var(--accent-border, #e0d5b8);
  border-left: 3px solid var(--spe-pneumo, #6b7a3a);
  border-radius: 4px;
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif);
}

.np-toolbar {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--accent-dash, #c4b898);
}

.np-tb-btn {
  min-width: 28px;
  height: 26px;
  padding: 0 6px;
  background: transparent;
  border: 1px solid var(--accent-border, #e0d5b8);
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 12px;
  color: var(--ink, #1a1713);
  transition: background-color .12s, border-color .12s;
}

.np-tb-btn:hover {
  background: var(--bg-cream, #f4efe6);
  border-color: var(--spe-pneumo, #6b7a3a);
}

.np-tb-btn:active {
  background: var(--accent-border, #e0d5b8);
}

.np-textarea {
  display: block;
  width: 100%;
  min-height: 80px;
  padding: 8px 10px;
  background: var(--bg-cream, #f4efe6);
  border: 1px solid var(--accent-border, #e0d5b8);
  border-radius: 3px;
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink, #1a1713);
  resize: vertical;
  box-sizing: border-box;
}

.np-textarea:focus {
  outline: none;
  border-color: var(--spe-pneumo, #6b7a3a);
  box-shadow: 0 0 0 2px rgba(107, 122, 58, 0.15);
}

.np-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.np-btn {
  padding: 5px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif);
  font-size: 12px;
  letter-spacing: 0.02em;
  transition: background-color .12s, border-color .12s;
}

.np-btn-cancel {
  background: transparent;
  border: 1px solid var(--accent-border, #e0d5b8);
  color: var(--ink-muted, #6b5e45);
}

.np-btn-cancel:hover {
  background: var(--bg-cream, #f4efe6);
}

.np-btn-save {
  background: var(--spe-pneumo, #6b7a3a);
  border: 1px solid var(--spe-pneumo, #6b7a3a);
  color: #fff;
}

.np-btn-save:hover {
  filter: brightness(1.08);
}

/* Dark mode pour l'éditeur. */
body.dark-mode .np-editor {
  background: var(--bg-dark, #1a1713);
  border-color: rgba(196, 184, 152, 0.18);
  border-left-color: var(--spe-genetique, #6b9c4d);
}

body.dark-mode .np-toolbar {
  border-bottom-color: rgba(196, 184, 152, 0.20);
}

body.dark-mode .np-tb-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(196, 184, 152, 0.22);
  color: var(--accent-dash, #c4b898);
}

body.dark-mode .np-tb-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--spe-genetique, #6b9c4d);
}

body.dark-mode .np-textarea {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(196, 184, 152, 0.22);
  color: var(--accent-dash, #c4b898);
}

body.dark-mode .np-textarea:focus {
  border-color: var(--spe-genetique, #6b9c4d);
  box-shadow: 0 0 0 2px rgba(107, 156, 77, 0.20);
}

body.dark-mode .np-btn-cancel {
  background: transparent;
  border-color: rgba(196, 184, 152, 0.22);
  color: var(--accent-dash, #c4b898);
}

body.dark-mode .np-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .np-btn-save {
  background: var(--spe-genetique, #6b9c4d);
  border-color: var(--spe-genetique, #6b9c4d);
  color: var(--bg-dark, #1a1713);
}


/* ============================================================
   4. Note perso en lecture (rendu markdown)
   ------------------------------------------------------------
   Décision Kevin : pas d'encadré ni de fond teinté en lecture —
   la note hérite du style normal pour passer pour du contenu.
   Indicateur ✏️ marge gauche + boutons édit/suppr arrivent en C6.
   ============================================================ */

.note-perso {
  margin: 10px 0;
}

.note-perso .np-content > :first-child { margin-top: 0; }
.note-perso .np-content > :last-child  { margin-bottom: 0; }

.note-perso .np-content h4 {
  font-family: var(--font-serif, "Fraunces", serif);
  font-size: 16px;
  font-weight: 600;
  margin: 8px 0 4px 0;
  color: var(--ink, #1a1713);
}

.note-perso .np-content p {
  margin: 6px 0;
  line-height: 1.55;
}

.note-perso .np-content ul,
.note-perso .np-content ol {
  margin: 6px 0;
  padding-left: 22px;
}

.note-perso .np-content li {
  margin: 2px 0;
  line-height: 1.5;
}

.note-perso .np-content strong { font-weight: 600; }
.note-perso .np-content em     { font-style: italic; }

.note-perso { position: relative; }

/* Indicateur ✎ discret en marge gauche (mode lecture) — assez
   visible pour identifier "c'est ma note" en relisant, assez
   discret pour ne pas agresser. */
.note-perso::before {
  content: "\270E"; /* ✎ U+270E LOWER RIGHT PENCIL — texte monochrome */
  position: absolute;
  left: -16px;
  top: 6px;
  font-size: 12px;
  line-height: 1;
  color: var(--ink-muted, #6b5e45);
  opacity: 0.4;
  pointer-events: none;
  font-feature-settings: "liga" off;
}

body.dark-mode .note-perso::before {
  color: var(--accent-dash, #c4b898);
  opacity: 0.5;
}


/* ============================================================
   5. Boutons édit/suppr au survol (mode édition uniquement)
   ============================================================ */

.np-actions-overlay {
  display: none;
  position: absolute;
  top: -8px;
  right: 6px;
  gap: 4px;
  padding: 2px;
  background: var(--bg-cream, #f4efe6);
  border: 1px solid var(--accent-border, #e0d5b8);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  z-index: 5;
}

body.np-editing .note-perso:hover .np-actions-overlay,
body.np-editing .note-perso:focus-within .np-actions-overlay {
  display: inline-flex;
}

.np-overlay-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: background-color .12s;
}

.np-overlay-btn:hover {
  background: var(--accent-border, #e0d5b8);
}

body.dark-mode .np-actions-overlay {
  background: var(--bg-dark, #1a1713);
  border-color: rgba(196, 184, 152, 0.22);
}

body.dark-mode .np-overlay-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}


/* ============================================================
   6. Note orpheline (anchor introuvable) + repositionnement
   ============================================================ */

.note-perso.np-orphan {
  border-left: 3px solid var(--warn, #c27a2c);
  padding-left: 12px;
  background: rgba(194, 122, 44, 0.04);
  margin-top: 16px;
}

.note-perso.np-orphan::before {
  content: none; /* on remplace l'indicateur ✎ par le bandeau */
}

.np-orphan-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px 0;
  padding: 4px 0;
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif);
  font-size: 12px;
  color: var(--warn, #c27a2c);
}

.np-orphan-msg {
  letter-spacing: 0.02em;
}

.np-orphan-repo-btn {
  padding: 3px 10px;
  background: var(--bg-cream, #f4efe6);
  border: 1px solid var(--warn, #c27a2c);
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif);
  font-size: 11px;
  color: var(--warn, #c27a2c);
  transition: background-color .12s;
}

.np-orphan-repo-btn:hover {
  background: rgba(194, 122, 44, 0.10);
}

body.dark-mode .note-perso.np-orphan {
  background: rgba(194, 122, 44, 0.08);
}

body.dark-mode .np-orphan-repo-btn {
  background: var(--bg-dark, #1a1713);
}

/* Hint flottant en bas d'écran pendant le mode "repositionnement". */
.np-repo-hint {
  position: fixed;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  z-index: 9998;
  padding: 10px 18px;
  background: var(--spe-pneumo, #6b7a3a);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif);
  font-size: 12px;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

body.dark-mode .np-repo-hint {
  background: var(--spe-genetique, #6b9c4d);
  color: var(--bg-dark, #1a1713);
}