/* ============================================================
   Neoloop Dashboard — surcharge de charte par-dessus Bulma
   À charger APRÈS bulma.min.css
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --nl-bg:#FBF9F5; --nl-surface:#FFFFFF; --nl-surface-2:#F4F1EA; --nl-surface-3:#EFEBE2;
  --nl-ink:#211F1C; --nl-ink-2:#6B675F; --nl-ink-3:#9C978C; --nl-line:#E6E1D6; --nl-line-2:#D6D0C2;
  --nl-coral:#D85A30; --nl-coral-bg:#FAECE7; --nl-coral-ink:#993C1D;
  --nl-teal:#1D9E75; --nl-teal-bg:#E1F5EE; --nl-teal-ink:#0F6E56;
  --nl-amber:#EF9F27; --nl-amber-bg:#FAEEDA; --nl-amber-ink:#854F0B;
  --nl-red:#E24B4A; --nl-red-bg:#FCEBEB; --nl-red-ink:#A32D2D;
  --nl-green-ink:#3B6D11;
  --nl-purple:#534AB7; --nl-purple-bg:#EEEDFE;
  --nl-pink:#993556; --nl-pink-bg:#FBEAF0;
  --nl-serif:'Poppins',system-ui,sans-serif; --nl-mono:'JetBrains Mono',monospace;
}

/* ---- Base ---- */
html,body{background-color:var(--nl-bg)}
body{font-family:'Poppins',system-ui,sans-serif;color:var(--nl-ink);font-size:15px}
.title,.subtitle{color:var(--nl-ink)}
strong{color:inherit;font-weight:600}

/* serif display for page titles */
.nl-display{font-family:var(--nl-serif);font-weight:500;letter-spacing:-.3px}
.nl-mono{font-family:var(--nl-mono)}
.nl-muted{color:var(--nl-ink-2)!important}
.nl-dim{color:var(--nl-ink-3)!important}
.nl-label{font-size:.72rem;color:var(--nl-ink-2);margin-bottom:.25rem;text-transform:none;letter-spacing:0}
.nl-sect{font-size:.82rem;font-weight:600;color:var(--nl-ink-2);margin-bottom:.7rem}

/* ---- Layout shell ---- */
.nl-shell{display:flex;min-height:100vh}
.nl-side{width:212px;flex-shrink:0;background:var(--nl-surface);border-right:1px solid var(--nl-line);
  padding:18px 12px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh}
.nl-brand{display:flex;align-items:center;padding:2px 8px 20px;text-decoration:none;color:var(--nl-ink)}
.nl-brand:hover{color:var(--nl-coral-ink)}
.nl-brand strong{font-family:var(--nl-serif);font-weight:500;font-size:.95rem;letter-spacing:-.2px}
.nl-nav{display:flex;align-items:center;gap:10px;font-size:.85rem;padding:8px 11px;border-radius:8px;
  color:var(--nl-ink-2);cursor:pointer;text-decoration:none}
.nl-nav .ti{font-size:17px}
.nl-nav:hover{background:var(--nl-surface-2);color:var(--nl-ink)}
.nl-nav.is-active{background:var(--nl-coral-bg);color:var(--nl-coral-ink);font-weight:600}
.nl-nav-sep{font-size:.62rem;letter-spacing:.6px;text-transform:uppercase;color:var(--nl-ink-3);padding:14px 11px 6px}
.nl-side-foot{margin-top:auto;display:flex;align-items:center;gap:9px;padding:10px 8px;border-top:1px solid var(--nl-line);
  text-decoration:none;color:inherit;border-radius:8px}
.nl-side-foot:hover{background:var(--nl-surface-2)}
.nl-side-foot.is-active{background:var(--nl-coral-bg)}
.nl-main{flex:1;min-width:0;padding:26px 32px;max-width:1180px}

/* avatar */
.nl-av{width:30px;height:30px;border-radius:50%;background:var(--nl-coral-bg);color:var(--nl-coral-ink);
  display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:600;flex-shrink:0}

/* ---- Cards ---- */
.card{border:1px solid var(--nl-line);border-radius:14px;box-shadow:none;background:var(--nl-surface)}
.card-content{padding:1rem}
.nl-soft{background:var(--nl-surface-2);border:none;border-radius:10px}

/* app icon tile */
.nl-appicon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0}
.nl-ic-coral{background:var(--nl-coral-bg);color:var(--nl-coral-ink)}
.nl-ic-teal{background:var(--nl-teal-bg);color:var(--nl-teal-ink)}
.nl-ic-purple{background:var(--nl-purple-bg);color:var(--nl-purple)}
.nl-ic-pink{background:var(--nl-pink-bg);color:var(--nl-pink)}

/* ---- Tags / pills (override Bulma colors) ---- */
.tag.nl-coral{background:var(--nl-coral-bg);color:var(--nl-coral-ink)}
.tag.nl-teal{background:var(--nl-teal-bg);color:var(--nl-teal-ink)}
.tag.nl-amber{background:var(--nl-amber-bg);color:var(--nl-amber-ink)}
.tag.nl-red{background:var(--nl-red-bg);color:var(--nl-red-ink)}
.tag.nl-green{background:#EAF3DE;color:var(--nl-green-ink)}
.tag.nl-purple{background:var(--nl-purple-bg);color:var(--nl-purple)}
.tag.nl-pink{background:var(--nl-pink-bg);color:var(--nl-pink)}
.tag.nl-grey{background:var(--nl-surface-3);color:var(--nl-ink-2)}
.tag.is-rounded{font-weight:600}

/* ---- Buttons ---- */
/* Tous les boutons NLDB arrondis (is-rounded par défaut) */
.button{border-radius:9999px}
.button.nl-primary{background:var(--nl-coral);border-color:var(--nl-coral);color:#fff}
.button.nl-primary:hover{background:#c44e27;border-color:#c44e27;color:#fff}
.button.nl-ghost{background:var(--nl-surface);border-color:var(--nl-line-2);color:var(--nl-ink)}
.button.nl-ghost:hover{background:var(--nl-surface-2);border-color:var(--nl-line-2);color:var(--nl-ink)}

/* ---- Switch publier/archiver (AJAX) ---- */
.nl-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle}
.nl-switch-input{position:absolute;opacity:0;width:0;height:0}
.nl-switch-track{width:42px;height:23px;border-radius:9999px;background:var(--nl-line-2);flex-shrink:0;position:relative;transition:background .18s}
.nl-switch-track::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.nl-switch-input:checked + .nl-switch-track{background:#48c78e}
.nl-switch-input:checked + .nl-switch-track::after{transform:translateX(19px)}
.nl-switch-input:disabled + .nl-switch-track{opacity:.55;cursor:progress}
.nl-switch-input:focus-visible + .nl-switch-track{outline:2px solid var(--nl-coral);outline-offset:2px}

/* ---- Sélecteur d'icônes (catégories KB) ---- */
.nl-iconpick{display:flex;flex-wrap:wrap;gap:5px;max-height:184px;overflow-y:auto;padding:9px;
  border:1px solid var(--nl-line);border-radius:10px;background:var(--nl-surface)}
.nl-iconopt{width:38px;height:38px;flex:0 0 auto;border:1px solid transparent;border-radius:9px;cursor:pointer;
  background:var(--nl-surface-2);color:var(--nl-ink-2);display:flex;align-items:center;justify-content:center;
  font-size:18px;transition:background .12s,color .12s,border-color .12s}
.nl-iconopt:hover{background:var(--nl-surface-3);color:var(--nl-ink)}
.nl-iconopt.is-selected{background:var(--nl-coral);border-color:var(--nl-coral);color:#fff}

/* ---- Status strip card (monitoring edge) ---- */
.nl-strip{display:flex;border:1px solid var(--nl-line);border-radius:14px;overflow:hidden;background:var(--nl-surface)}
.nl-strip .edge{width:5px;flex-shrink:0}
.nl-strip .body{flex:1;padding:1rem}
.nl-strip.is-link{cursor:pointer;transition:border-color .15s}
.nl-strip.is-link:hover{border-color:var(--nl-line-2)}

/* ---- KPI ---- */
.nl-kpi .v{font-size:1.5rem;font-weight:600;line-height:1.1}

/* ---- Notification (alert banner) ---- */
.notification.nl-warn{background:var(--nl-amber-bg);border:1px solid var(--nl-amber);color:#633806}
.notification.nl-danger{background:var(--nl-red-bg);border:1px solid var(--nl-red);color:#791F1F}

/* ---- Tabs ---- */
.tabs.nl-tabs{margin-bottom:1.25rem}
.tabs.nl-tabs ul{border-bottom-color:var(--nl-line)}
.tabs.nl-tabs li a{color:var(--nl-ink-2);border-bottom-width:2px;padding:.6em 1em}
.tabs.nl-tabs li.is-active a{color:var(--nl-ink);border-bottom-color:var(--nl-coral);font-weight:600}

/* ---- sparkline ---- */
.nl-spark{display:flex;gap:3px;height:38px;align-items:flex-end}
.nl-spark i{flex:1;border-radius:2px;display:block}

/* ---- link rows ---- */
.nl-link{display:flex;align-items:center;gap:10px;color:#185FA5;font-size:.9rem;padding:9px 0;
  border-top:1px solid var(--nl-line);cursor:pointer}
.nl-link:first-child{border-top:none}
.nl-link .ext{font-size:.8rem;margin-left:auto}

/* ---- filter chips ---- */
.nl-chip{font-size:.8rem;padding:6px 12px;border-radius:20px;border:1px solid var(--nl-line-2);
  background:var(--nl-surface);color:var(--nl-ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.nl-chip.is-active{background:var(--nl-coral-bg);border-color:var(--nl-coral);color:var(--nl-coral-ink);font-weight:600}

/* ---- helpers ---- */
.nl-divider{border-top:1px solid var(--nl-line);margin:0}
.nl-row-line{display:flex;justify-content:space-between;font-size:.82rem;padding:7px 0;border-top:1px solid var(--nl-line)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}

/* ---- Toasts (bas droite) : styles injectés par public/js/nldb-toast.js
   (composant auto-suffisant, source unique). Voir _toasts.html.twig. ---- */

/* ---- responsive shell : sidebar en tiroir (≤768px), pattern VIIZIA ---- */
.nl-navbar{display:none}
.nl-backdrop{display:none}
.nl-side-mobilebar{display:none}

@media screen and (max-width:768px){
  html,body{width:100%;max-width:100%;overflow-x:clip}

  /* navbar mobile fixe (burger + marque) */
  .nl-navbar{display:flex;align-items:center;gap:10px;position:fixed;top:0;left:0;right:0;height:52px;
    padding:0 12px;background:var(--nl-surface);border-bottom:1px solid var(--nl-line);z-index:40}
  .nl-burger{background:none;border:none;cursor:pointer;color:var(--nl-ink);display:flex;align-items:center;padding:6px}
  .nl-burger .ti{font-size:1.5rem}
  .nl-navbar-brand{font-family:var(--nl-serif);font-weight:500;font-size:.95rem;color:var(--nl-ink);text-decoration:none}
  .nl-navbar-brand:hover{color:var(--nl-coral-ink)}

  /* shell en bloc : la sidebar fixed ne réserve plus de place */
  .nl-shell{display:block;width:100%;max-width:100%;overflow-x:clip;padding-top:52px}
  .nl-main{padding:16px 16px 28px;max-width:100%;width:100%;overflow-x:clip}

  /* backdrop sous la navbar */
  .nl-backdrop{display:block;position:fixed;top:52px;left:0;right:0;bottom:0;
    background:rgba(0,0,0,.38);border:none;z-index:55;cursor:pointer}
  .nl-backdrop[hidden]{display:none}

  /* sidebar → tiroir coulissant */
  .nl-side{display:flex;position:fixed;top:52px;bottom:0;left:0;width:min(284px,86vw);
    z-index:60;overflow-y:auto;transform:translateX(-103%);
    transition:transform .26s cubic-bezier(.22,1,.36,1)}
  .nl-shell.is-sidebar-open .nl-side{transform:translateX(0)}

  /* barre de fermeture, mobile uniquement */
  .nl-side-mobilebar{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
  .nl-side-close{background:none;border:none;cursor:pointer;color:var(--nl-ink-3);padding:4px;display:flex}
  .nl-side-close .ti{font-size:1.25rem}

  .nl-display.is-1{font-size:1.5rem}

  /* ---- tableaux en cartes empilées (has-mobile-cards) ---- */
  .table.nl-table.has-mobile-cards{width:100%;max-width:100%}
  .table.nl-table.has-mobile-cards thead{display:none}
  .table.nl-table.has-mobile-cards tbody tr{display:block;padding:.55rem .85rem;margin-bottom:.55rem;
    border:1px solid var(--nl-line);border-radius:10px;background:var(--nl-surface)}
  .table.nl-table.has-mobile-cards tbody tr:last-child td{border-bottom:none}
  .table.nl-table.has-mobile-cards tbody td{display:flex;justify-content:space-between;align-items:center;
    gap:.75rem;border:none;padding:.34rem 0;min-width:0}
  .table.nl-table.has-mobile-cards tbody td::before{content:attr(data-label);flex:0 0 38%;max-width:9rem;
    font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--nl-ink-3)}
  .table.nl-table.has-mobile-cards tbody td[data-label=""]::before{display:none}
  .table.nl-table.has-mobile-cards tbody td > *{min-width:0}
}

/* ============================================================
   Compléments écrans E2–E6
   ============================================================ */

/* ---- E2 : éditeur markdown + segmented list ---- */
.nl-editor{font-family:var(--nl-mono);font-size:.78rem;line-height:1.9;color:var(--nl-ink-2)}
.nl-editor .h{color:var(--nl-ink);font-weight:500}
.nl-editor .go{color:var(--nl-coral-ink)}
.nl-editor .ref{color:#185FA5}
.nl-editor-input,.nl-editor-content{font-family:var(--nl-mono);font-size:.78rem;line-height:1.7;color:var(--nl-ink-2);width:100%}
.nl-editor-content{margin:0;white-space:pre-wrap;word-break:break-word}
textarea.nl-editor-input{border:1px solid var(--nl-line);border-radius:10px;padding:14px;min-height:360px;resize:vertical;background:var(--nl-surface)}
.nl-reslist .card{cursor:pointer;margin-bottom:6px}
.nl-reslist .card.is-active{border-color:var(--nl-coral);background:var(--nl-coral-bg)}
.nl-reslist .card.is-active .nl-muted,
.nl-reslist .card.is-active strong{color:var(--nl-coral-ink)!important}
.nl-api{background:var(--nl-surface-2);border-radius:10px;padding:11px 14px}

/* ---- E5 : timeline ---- */
.nl-timeline{position:relative;padding-left:20px}
.nl-timeline::before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:var(--nl-line)}
.nl-tl-item{position:relative;margin-bottom:16px}
.nl-tl-item:last-child{margin-bottom:0}
.nl-tl-item .pip{position:absolute;left:-19px;top:3px;width:11px;height:11px;border-radius:50%;border:2px solid var(--nl-bg)}

/* ---- E4 : barres MRR ---- */
.nl-bar{height:7px;background:var(--nl-surface-3);border-radius:4px;overflow:hidden}
.nl-bar i{display:block;height:100%}

/* ---- tables (E3 / E6) : keep Bulma table but themed ---- */
.table.nl-table{background:transparent;font-size:.85rem}
.table.nl-table th{color:var(--nl-ink-3);font-weight:400;font-size:.72rem;border-bottom-color:var(--nl-line)}
.table.nl-table td{border-bottom-color:var(--nl-line);vertical-align:middle;color:var(--nl-ink)}
.table.nl-table tr:last-child td{border-bottom:none}

/* ---- E6 : matrix access icons ---- */
.nl-acc{font-size:18px}
.nl-acc.ok{color:var(--nl-teal)}
.nl-acc.read{color:#185FA5}
.nl-acc.no{color:var(--nl-ink-3)}

/* responsive: tables scroll horizontally on mobile via .table-container (Bulma native) */

/* ---- KB admin status badges (e7-kb) ---- */
.nl-state{font-size:.72rem;padding:4px 11px;border-radius:20px;font-weight:600;text-transform:lowercase;display:inline-block}
.nl-state.pub{background:var(--nl-teal-bg);color:var(--nl-teal-ink)}
.nl-state.draft{background:var(--nl-amber-bg);color:var(--nl-amber-ink)}
.nl-state.arch{background:var(--nl-surface-3);color:var(--nl-ink-2)}

/* ---- Support admin ticket thread (e8-ticket-detail) ---- */
.nl-msg{display:flex;gap:12px;margin-bottom:18px}
.nl-msg .ava{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:600;background:var(--nl-surface-3)}
.nl-msg.client .ava{background:var(--nl-coral-bg);color:var(--nl-coral-ink)}
.nl-msg.team .ava{background:var(--nl-teal-bg);color:var(--nl-teal-ink)}
.nl-msg .bubble{border-radius:12px;padding:13px 15px;font-size:.92rem;background:var(--nl-surface-2);overflow-wrap:anywhere}
.nl-msg.team .bubble{background:var(--nl-teal-bg)}
.nl-msg .meta{font-size:.74rem;color:var(--nl-ink-3);margin-bottom:5px}
.nl-note-internal{background:var(--nl-amber-bg);border-left:3px solid var(--nl-amber);border-radius:8px;padding:12px 14px}
.nl-row-line{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid var(--nl-line);font-size:.85rem}