/* ============================================================================
 * SuperAndy — onglet « Newsletters » (catalogue Andy : modèles, blocs,
 * catégories, dossiers). Styles du module assets/newsletters/* : bandeau d'aide,
 * grilles sectionnées par dossier avec glisser-déposer, cartes, référentiels,
 * modales d'aperçu et d'édition, voiles de chargement.
 *
 * PRÉFIXE `nlc-` UNIQUEMENT. Les feuilles ambiances/ai sont chargées pour TOUS
 * les onglets : réutiliser un de leurs préfixes (adminAmbiance-, saAmb-, ai-)
 * mélangerait deux modules au premier renommage.
 *
 * N'utilise QUE les tokens SuperAndy de styles.css (--bg, --panel, --panel2,
 * --border, --text, --soft, --accent, --accent2, --ok, --ko, --warn, --radius,
 * --shadow) : le mode clair est porté par le :root de styles.css, rien à
 * redéclarer ici. Aucune dépendance aux `--palette-*` du front applicatif.
 *
 * Console de bureau assumée : sous 720 px la barre latérale disparaît déjà
 * (styles.css) et le glisser-déposer HTML5 n'existe pas sur tactile — on se
 * contente de laisser les grilles retomber en une colonne.
 * ========================================================================== */

.nlc-root{ display:flex; flex-direction:column; }
.nlc-panel{ display:flex; flex-direction:column; }

/* ---- Bandeau d'aide (« ce n'est pas un éditeur ») ---- */
.nlc-help{ background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:14px 16px; margin-bottom:14px; }
.nlc-help-t{ font-weight:700; font-size:13.5px; margin-bottom:6px; }
.nlc-help-p{ margin:0 0 6px; color:var(--soft); font-size:12.5px; line-height:1.5; }
.nlc-help-p:last-child{ margin-bottom:0; }

/* ---- Diagnostics (migration absente / lecture en panne) ---- */
.nlc-warn{ background:rgba(245,158,11,.14); color:var(--warn); border:1px solid rgba(245,158,11,.4);
  border-radius:8px; padding:9px 11px; font-size:12.5px; line-height:1.5; margin-bottom:10px; }
.nlc-alert{ background:rgba(239,68,68,.14); color:var(--ko); border:1px solid rgba(239,68,68,.4);
  border-radius:8px; padding:9px 11px; font-size:12.5px; line-height:1.5; margin-bottom:10px; }

/* ---- Barre d'outils ---- */
.nlc-toolbar{ flex-wrap:wrap; }
.nlc-toolbar .search{ min-width:220px; }

/* ---- Sections (un dossier = une section, « Sans dossier » toujours rendue) ---- */
.nlc-sections{ display:flex; flex-direction:column; gap:14px; }

.nlc-sec{ border:1px solid var(--border); border-radius:var(--radius); background:var(--panel);
  overflow:hidden; }
/* Cible de dépôt survolée : la section entière s'allume, pas seulement l'en-tête —
   c'est elle qui reçoit la carte. */
.nlc-sec.is-drop{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }

.nlc-secHead{ display:flex; align-items:center; gap:9px; padding:9px 12px; background:var(--panel2);
  border-bottom:1px solid var(--border); }
.nlc-secHead .sp{ flex:1; }
.nlc-secDot{ flex:none; width:10px; height:10px; border-radius:3px; display:inline-block; }
.nlc-secName{ font-weight:700; font-size:13.5px; }
.nlc-secCount{ background:var(--bg); color:var(--soft); border-radius:999px; padding:1px 8px;
  font-size:11.5px; font-weight:700; }

.nlc-secGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:12px;
  align-items:start; padding:12px; min-height:64px; }
/* Le repère de dépôt reste en DERNIER visuellement même quand une carte vient
   d'être appendue au-dessus de lui pendant un glissement (`order` ne change pas
   l'ordre du DOM, qui reste la source de vérité du rangement). */
.nlc-secGrid > .nlc-card{ order:1; }
.nlc-secDrop{ order:2; grid-column:1/-1; border:1px dashed var(--border); border-radius:9px;
  padding:9px 12px; color:var(--soft); font-size:12px; text-align:center; }
.nlc-secGrid:has(.nlc-card) .nlc-secDrop{ display:none; }
.nlc-sec.is-drop .nlc-secDrop{ border-color:var(--accent); color:var(--accent); display:block; }

/* ---- Cartes ---- */
.nlc-card{ background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; }
.nlc-card:hover{ border-color:var(--accent); }
.nlc-card.is-hidden{ opacity:.72; }
.nlc-card.is-dragging{ opacity:.4; border-style:dashed; border-color:var(--accent); }
.nlc-card[draggable="true"]{ cursor:grab; }

.nlc-thumb{ position:relative; height:124px; background:var(--bg); border-bottom:1px solid var(--border); }
.nlc-thumbImg{ width:100%; height:100%; object-fit:cover; display:block; }
.nlc-thumbNone{ width:100%; height:100%; display:grid; place-items:center; font-size:30px; opacity:.45; }
.nlc-grip{ position:absolute; top:8px; right:8px; background:rgba(0,0,0,.45); color:#fff; border-radius:6px;
  padding:1px 7px; font-size:14px; line-height:1.4; user-select:none; }

.nlc-body{ padding:11px 13px 13px; display:flex; flex-direction:column; gap:7px; min-width:0; }
.nlc-name{ font-weight:700; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nlc-badges{ display:flex; gap:6px; flex-wrap:wrap; }
.nlc-desc{ color:var(--soft); font-size:12.5px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nlc-tags{ display:flex; gap:5px; flex-wrap:wrap; }
.nlc-tag{ background:var(--bg); border:1px solid var(--border); border-radius:999px;
  padding:1px 8px; font-size:11px; color:var(--soft); }
.nlc-meta{ color:var(--soft); font-size:11.5px; }

.nlc-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.nlc-actionBtn{ background:var(--panel); color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:5px 10px; font-size:12.5px; font-weight:600; }
.nlc-actionBtn:hover:not(:disabled){ border-color:var(--accent); }
.nlc-actionBtn.is-danger{ color:var(--ko); }
.nlc-actionBtn.is-danger:hover:not(:disabled){ border-color:var(--ko); }
.nlc-actionBtn:disabled{ opacity:.5; cursor:not-allowed; }

.nlc-empty{ text-align:center; color:var(--soft); padding:24px 18px;
  border:1px dashed var(--border); border-radius:var(--radius); background:var(--panel); }
.nlc-emptySub{ font-size:12.5px; margin-top:6px; }

/* ---- Voiles de chargement (aucune écriture muette) ---- */
.nlc-hasBusy{ position:relative; }
.nlc-busy{ position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  gap:9px; background:rgba(0,0,0,.28); border-radius:var(--radius); backdrop-filter:blur(1px); }
@media (prefers-color-scheme: light){ .nlc-busy{ background:rgba(255,255,255,.55); } }
.nlc-busyL{ font-size:12.5px; font-weight:700; color:var(--text); }
.btn.is-busy, .nlc-actionBtn.is-busy{ opacity:.7; }

/* ---- Référentiels : catégories & dossiers ---- */
.nlc-taxoHead{ display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.nlc-taxoHeadL{ font-size:12.5px; color:var(--soft); font-weight:600; }
.nlc-taxoHead .sp{ flex:1; }

.nlc-seg{ display:inline-flex; background:var(--panel2); border:1px solid var(--border);
  border-radius:9px; padding:2px; gap:2px; }
.nlc-segBtn{ background:transparent; border:0; color:var(--soft); font-weight:700; font-size:12.5px;
  padding:6px 14px; border-radius:7px; }
.nlc-segBtn:hover{ color:var(--text); }
.nlc-segBtn.is-on{ background:var(--accent); color:#fff; }

.nlc-taxoCols{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; align-items:start; }
@media (max-width:900px){ .nlc-taxoCols{ grid-template-columns:1fr; } }
.nlc-taxoList{ display:flex; flex-direction:column; }
.nlc-taxoRow{ background:var(--panel2); }
.nlc-taxoEmpty{ color:var(--soft); font-size:12.5px; border:1px dashed var(--border);
  border-radius:9px; padding:12px; text-align:center; }

/* ---- Champ de référentiel : select + bouton « + » ---- */
.nlc-inlineAdd{ display:flex; gap:8px; align-items:stretch; }
.nlc-inlineAdd .std-select{ flex:1; min-width:0; }

/* ---- Sélecteur de couleur ---- */
.nlc-swatches{ display:flex; gap:6px; flex-wrap:wrap; }
.nlc-swatch{ width:26px; height:26px; border-radius:7px; border:1px solid var(--border); padding:0;
  color:var(--soft); font-size:12px; line-height:1; }
.nlc-swatch--none{ background:var(--panel2); }
.nlc-swatch.is-on{ box-shadow:0 0 0 2px var(--accent); border-color:var(--accent); }

/* ---- Modales larges (aperçu / éditeur) ---- */
.modal.nlc-wideModal{ width:min(900px,100%); }
.modal.nlc-editorModal{ width:min(1080px,100%); }

/* ---- Aperçu structuré ---- */
.nlc-preview{ display:flex; flex-direction:column; gap:12px; }
.nlc-previewMeta{ color:var(--soft); font-size:12.5px; }
.nlc-previewMeta:empty{ display:none; }
.nlc-kvgrid{ display:grid; grid-template-columns:1fr 1fr; gap:0 24px; margin-bottom:12px; }
@media (max-width:700px){ .nlc-kvgrid{ grid-template-columns:1fr; } }

.nlc-warns{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }

.nlc-strip{ border:1px solid var(--border); border-radius:9px; background:var(--panel2); padding:9px 11px; }
.nlc-stripH{ font-size:12px; font-weight:700; color:var(--soft); margin-bottom:7px; }
.nlc-stripRow{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; min-height:30px; }
.nlc-stripImg{ width:56px; height:56px; object-fit:cover; border-radius:7px; border:1px solid var(--border);
  background:var(--bg); }
.nlc-stripMiss{ width:56px; height:56px; border-radius:7px; border:1px dashed var(--border);
  display:grid; place-items:center; color:var(--soft); font-size:15px; }

.nlc-tree{ display:flex; flex-direction:column; gap:8px; }
.nlc-row{ border:1px solid var(--border); border-radius:9px; background:var(--panel2); overflow:hidden; }
.nlc-rowH{ background:var(--bg); border-bottom:1px solid var(--border); padding:7px 11px;
  font-size:12.5px; font-weight:700; }
.nlc-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px; padding:9px 11px; }
/* min-width:0 obligatoire : sans lui un extrait long empêche la colonne de
   grille de rétrécir et l'ellipse de .nlc-blockEx ne se déclenche jamais. */
.nlc-col{ min-width:0; }
.nlc-colH{ font-size:11.5px; color:var(--soft); font-weight:700; margin-bottom:5px; }
.nlc-blocks{ display:flex; flex-direction:column; gap:4px; }
.nlc-block{ display:flex; gap:7px; align-items:baseline; font-size:12.5px; min-width:0; }
.nlc-blockType{ flex:none; font-weight:700; background:var(--panel); border:1px solid var(--border);
  border-radius:6px; padding:1px 7px; font-size:11.5px; }
.nlc-blockEx{ color:var(--soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nlc-blockEmpty{ color:var(--soft); font-size:12px; font-style:italic; }

.nlc-details{ border:1px solid var(--border); border-radius:9px; background:var(--panel2); }
.nlc-details>summary{ cursor:pointer; padding:9px 12px; font-weight:700; font-size:12.5px; user-select:none; }
.nlc-detailsBody{ padding:0 12px 12px; }
.nlc-detailsBar{ display:flex; gap:8px; margin-bottom:8px; }
.nlc-json{ background:var(--bg); border:1px solid var(--border); border-radius:7px; padding:9px 11px; margin:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; line-height:1.5;
  white-space:pre-wrap; word-break:break-word; max-height:420px; overflow:auto; }

/* ---- Éditeurs (métadonnées + import / export JSON) ---- */
.nlc-editor{ display:grid; grid-template-columns:minmax(260px,1fr) minmax(300px,1.15fr); gap:0 20px; }
@media (max-width:820px){ .nlc-editor{ grid-template-columns:1fr; } }
.nlc-editorCol{ min-width:0; }
.nlc-check{ display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.nlc-check input{ width:16px; height:16px; }

.nlc-thumbBox{ width:100%; height:140px; border:1px solid var(--border); border-radius:9px;
  background:var(--panel2); overflow:hidden; }
.nlc-thumbPrev{ width:100%; height:100%; object-fit:cover; display:block; }
.nlc-thumbActions{ display:flex; gap:8px; margin-top:8px; }

.nlc-docBar{ display:flex; gap:8px; margin-bottom:6px; }
.nlc-docBar .sp{ flex:1; }
.nlc-docArea{ width:100%; min-height:320px; resize:vertical; background:var(--panel); color:var(--text);
  border:1px solid var(--border); border-radius:8px; padding:9px 11px; outline:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; line-height:1.5; white-space:pre; }
.nlc-docArea:focus{ border-color:var(--accent); }