/* =====================================================
   RESET
===================================================== */

html,
body{
  height:100%;
  margin:0;
}

body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#eef2f7;
  color:#1f2937;
  min-height: 100vh;
  overflow:hidden;
}

/* =====================================================
   APP LAYOUT
===================================================== */

.app-shell {
  height: 100vh;
  display: flex;
  overflow: hidden;
  /* width:100% */
}

/* =====================================================
   SIDEBAR GAUCHE
===================================================== */

.sidebar {
  height: 100%;
  overflow-y: auto;
  flex-shrink: 0;
}

.sidebar{
  width:285px;
  min-width:285px;
  background:#111827;
  color:white;
  display:flex;
  flex-direction:column;
  border-right:1px solid rgba(255,255,255,.06);
}

.sidebar-header{
  padding:1rem 1rem .8rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.sidebar-search{
  padding:.55rem .9rem .12rem;
}

.sidebar-search input{
  height:30px;
  min-height:30px;

  padding:.18rem .62rem;

  font-size:.78rem;
  font-weight:400;

  line-height:1.1;

  background:#1f2937;
  border:1px solid rgba(255,255,255,.08);
  color:white;
  border-radius:10px;
}

.sidebar-search input::placeholder{
  color:#94a3b8;
  opacity:.62;
  font-size:.78rem;
  font-weight:300;
}

.sidebar-groups{
  flex:1;
  overflow:auto;
  padding:.4rem .7rem 1rem;
}



.sidebar-search-row{
  display:flex;
  align-items:center;
  gap:.35rem;
}

.sidebar-search{
  flex:1;
}


/* boutons pour ouvrir/fermer tous les groupes de la sidebar */

.sidebar-mini-btn{
  margin-right:.9rem;
  margin-bottom:.12rem;

  border:none;
  background:rgba(255,255,255,.06);
  color:#cbd5e1;
  font-size:.72rem;
  padding:.42rem .62rem;
  border-radius:10px;
  font-weight:600;
  white-space:nowrap;
}

.sidebar-mini-btn:hover{
  background:rgba(255,255,255,.12);
  color:white;
}

.sidebar-icon-btn{
  width:30px;
  height:30px;
  min-height:30px;

  border:none;
  outline:none;
  box-shadow:none;
  appearance:none;

  background:#1f2937;
  color:#cbd5e1;

  border-radius:10px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:.82rem;
  padding:0;
}

.sidebar-icon-btn:hover{
  background:#374151;
  color:white;
  transition:all .15s ease;
}

.sidebar-icon-btn:focus,
.sidebar-icon-btn:active{
  outline:none;
  box-shadow:none;
  background:#374151;
}
/* =====================================================
   SIDEBAR GROUPS COMPACT (groupes d'items dans la sidebar)
===================================================== */

.group{
  /* margin-bottom:.28rem;  */
  margin-bottom:.22rem;
}

.group-title{
  width:100%;
  background:transparent;
  color:#cbd5e1;

  border:none;
  text-align:left;

  font-size:.74rem; /* ← légèrement plus petit que section */
  font-weight:500;  /* ← moins dense */

  padding:.26rem .4rem;
  border-radius:8px;

  opacity:.75;
}

.group-title:hover{
  background:rgba(255,255,255,.05);
  color:#ffffff;
  opacity:1;
}

.group-items{
  display:none;
  padding-left:.5rem;
  border-left:1px solid rgba(255,255,255,.18); /* ← plus visible */
  margin-left:.2rem;
}

.group-items.open{
  display:grid;
  gap:2px;
}

/* =====================================================
   FILE BUTTON (boutons d'items dans les sections)
===================================================== */

.file-btn{
  width:100%;
  border:none;
  text-align:left;
  background:transparent;
  color:#d1d5db;
  padding:.28rem .45rem;
  font-size:.80rem;
  line-height:1.1;
  border-radius:8px;
}

.file-btn:hover{
  background:rgba(255,255,255,.06);
  color:white;
}

.file-btn.active{
  background:#2563eb;
  color:white;
  font-weight:600;
}

/* =====================================================
   MAIN PANEL
===================================================== */

/* panneau principal */
.main-panel {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* =====================================================
   TOPBAR
===================================================== */

.topbar{
  min-height:78px;
  background:white;
  border-bottom:1px solid #e5e7eb;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;

  padding:0 1.2rem;

  flex:0 0 auto;
  flex-wrap:wrap;
}

.left-top{
  flex:1;
  min-width:0;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
}

.title-row{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
}

#docTitle{
  font-size:1rem;
}

/* badges d'état du document à côté du titre */

.badges-inline{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.badges-inline .badge{
  font-size:.72rem;
  font-weight:600;
  padding:.42em .65em;
  border-radius:999px;
}

.badges-inline .med-check-badge{
  border:1px solid transparent;
}

.med-check-ok{
  background:#dcfce7;
  border-color:#86efac !important;
  color:#166534;
}

.med-check-low{
  background:#fef9c3;
  border-color:#fde047 !important;
  color:#854d0e;
}

.med-check-medium{
  background:#ffedd5;
  border-color:#fdba74 !important;
  color:#9a3412;
}

.med-check-high{
  background:#fee2e2;
  border-color:#fca5a5 !important;
  color:#991b1b;
}


/* sélecteur de niveau de détail */
.detail-select{
  width:110px;
  font-size:.82rem;
}

.btn-more-info{
  border:1px solid #15b93e;
  background:rgb(191, 255, 185);
  color:#374151;
  border-radius:999px;
  padding:.32rem .7rem;
  font-size:.78rem;
  font-weight:600;
  line-height:1;
}

.btn-more-info:hover{
  background:#f8fafc;
  color:#111827;
  border-color:#cbd5e1;
}

.zoom-group,
.action-group{
  display:flex;
  align-items:center;
  gap:.45rem;
}

/* =====================================================
   VIEWER
   Les niveaux sont :
    - viewer-wrap : wrapper global du viewer (padding, scroll, etc)
    - viewer-card : la "carte" blanche avec ombre et arrondis
    - diagram : le conteneur du diagramme Mermaid (avec svg à l'intérieur)
===================================================== */

/* zone viewer prend tout le reste */
.viewer-wrap {
  flex: 1;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  display: flex;
}

/* carte Mermaid */
.viewer-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background:white;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  padding:8px;
}

/* ======================================
   PANZOOM MINIMALISTE
   Il faut laisser le svg en taille naturelle pour que les transformations de zoom fonctionnent correctement,
   sinon le svg est redimensionné par le CSS et les transformations de zoom ne s'appliquent pas correctement
========================================= */
/* zone d'affichage du diagramme, avec svg à l'intérieur */
#diagram{
  flex:1;
  min-height:0;
  width:100%;
  overflow:hidden;
  position:relative;
  background:white;
  cursor:grab;
}

#diagram svg,
#diagram svg *{
  cursor:grab !important;
  user-select:none;
}

#diagram svg:active,
#diagram svg:active *{
  cursor:grabbing !important;
}

#diagram svg{
  display:block;
}





/* =====================================================
   EDITEUR (Panneau d'édition du code Mermaid)
===================================================== */
.editor-pane{
  position:absolute;
  top:0;
  right:0;
  bottom:0; /* 🔥 clé */
  width:520px;
  height:100%;
  background:#0f1720;
  z-index:60;
  transform:translateX(100%);
  transition:transform .35s ease;
  box-shadow:-10px 0 30px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
}

.editor-pane-body{
  flex:1;
  min-height:0; /* Corrige 90% des bugs de hauteur */
  display:flex;
}

.editor-pane.open{
  transform:translateX(0);
}

.editor-pane-header{
  height:64px;
  padding:0 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:white;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.editor-pane textarea{
  flex:1;
  width:100%;
  border:none;
  outline:none;
  resize:none;
  min-height:0;
  height:100%;
  overflow:auto;
  background:#0f1720;
  color:#d7e3f4;
  padding:1rem;
  font-family:JetBrains Mono, monospace;
  font-size:14px;
}

.preview-full{
  height:calc(100vh - 70px);
  overflow:auto;
}

@media(max-width:768px){
  .editor-pane{
    width:100%;
  }
}


/* =====================================================
   Panneau d'informations
===================================================== */

.info-pane{
  position:fixed;
  top:0;
  right:0;
  width:520px;
  max-width:92vw;
  height:100vh;
  background:#0f172a;
  color:white;
  z-index:1000;
  transform:translateX(100%);
  transition:transform .28s ease;
  display:flex;
  flex-direction:column;
  box-shadow:-12px 0 30px rgba(0,0,0,.18);
}

.info-pane.open{
  transform:translateX(0);
}

.info-pane{
  background:white;
  color:#111827;
}

.info-pane-header{
  min-height:64px;
  display:flex;
  align-items:center;
  gap:.6rem;
  justify-content:space-between;
  padding:.65rem 1rem;
  border-bottom:1px solid #e5e7eb;
}

/* wrapper du titre et du sélecteur de niveau de détail */
.info-title-wrap{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex:1;
  min-width:0;
  flex-wrap:wrap;
}

.info-title-wrap strong{
  line-height:1.2;
  margin-right:auto;
}

.info-title-wrap label{
  margin:0;
  white-space:nowrap;
}

/* sélecteur de niveau de détail */
.detail-select{
  width:88px;
  min-width:88px;
  font-size:.79rem;
}

.info-pane-body{
  flex:1;
  overflow:auto;
  padding:1rem;
}

.info-pane p{
  margin:0 0 .35rem;
}

.info-pane ul{
  margin:0 0 .65rem;
  padding-left:1.1rem;
}

.info-pane li{
  margin-bottom:.12rem;
  line-height:1.35;
}
/* =====================================================
   EDITOR
===================================================== */

#editor{
  width:100%;
  height:100%;
  min-height:100%;
  border:none;
  outline:none;
  resize:none;
  background:#0f172a;
  color:#e5e7eb;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.92rem;
  line-height:1.45;
}

/* =====================================================
   INFO CONTENT
===================================================== */

#infoContent{
  font-size:.95rem;
  line-height:1.65;
}

#infoContent h3{
  margin-bottom:1rem;
}

/* =====================================================
   BADGES PREMIUM V4
   AUTO LIGHT / DARK MODE
   Utilise prefers-color-scheme
===================================================== */

/* =====================================
   BASE
===================================== */

.badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 18px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:7px 12px;
  border-radius:999px;

  font-size:.78rem;
  font-weight:600;
  line-height:1;
  white-space:nowrap;

  transition:all .18s ease;
}

.badge:hover{
  transform:translateY(-1px);
}

/* =====================================================
   LIGHT MODE (par défaut)
===================================================== */

.badge{
  border:1px solid rgba(0,0,0,.06);

  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.75);
}

/* standard */

.badge-brain{ background:#eef2ff; color:#3949ab; }
.badge-focus{ background:#e8f4ff; color:#1565c0; }
.badge-calm{ background:#c1fae6; color:#087f5b; }
.badge-sleep{ background:#abc5ff; color:#5e35b1; }
.badge-energy{ background:#fff4e5; color:#d97706; }
.badge-warning{ background:#fff0ee; color:#d94841; }
.badge-info{ background:#f3f4f6; color:#4b5563; }

/* preuves */

.badge-evidence-high{ background:#c9fddd; color:#15803d; }
.badge-evidence-medium{ background:#fdf2c7; color:#a16207; }
.badge-evidence-low{ background:#fff1e6; color:#c2410c; }
.badge-evidence-emerging{ background:#e4d0fc; color:#7e22ce; }

/* médication */

.badge-med-safe{ background:#eafaf0; color:#15803d; }
.badge-med-low{ background:#fff8db; color:#a16207; }
.badge-med-medium{ background:#fff1e6; color:#c2410c; }
.badge-med-high{ background:#ffe8e6; color:#b91c1c; }

/* =====================================================
   BOOTSTRAP LEGACY BADGES COMPATIBILITY FULL PACK
   pour anciennes fiches custom
   à placer APRÈS bootstrap.css
===================================================== */

/* ==========================================
   BASE PREMIUM POUR TOUS LES ANCIENS BADGES
========================================== */

.badge[class*="bg-"]{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:7px 12px !important;
  border-radius:999px !important;

  font-size:.78rem;
  font-weight:600;
  line-height:1;

  border:1px solid rgba(0,0,0,.06);

  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.70);

  transition:.18s ease;
}

.badge[class*="bg-"]:hover{
  transform:translateY(-1px);
}

/* neutralisation bootstrap */
.badge.text-dark,
.badge.text-white{
  color:inherit !important;
}

/* ==========================================
   LIGHT MODE
========================================== */

/* primaire / cerveau */
/* ancien bg-primary => cerveau */

.badge.bg-primary{
  background:#eef2ff !important;
  color:#3949ab !important;
}

/* info / calme */
/* ancien bg-info => info/calme */
.badge.bg-info{
  background:#e9faf4 !important;
  color:#087f5b !important;
}

/* warning / énergie */
/* ancien bg-warning text-dark => énergie/temps */
.badge.bg-warning{
  background:#fff4e5 !important;
  color:#d97706 !important;
}

/* success / positif */

.badge.bg-success{
  background:#eafaf0 !important;
  color:#15803d !important;
}

/* secondary / sommeil */

.badge.bg-secondary{
  background:#f1edff !important;
  color:#5e35b1 !important;
}

/* danger / alerte */

.badge.bg-danger{
  background:#ffe8e6 !important;
  color:#b91c1c !important;
}

/* dark / neutre fort */

.badge.bg-dark{
  background:#e5e7eb !important;
  color:#111827 !important;
}

/* light / discret */

.badge.bg-light{
  background:#f8fafc !important;
  color:#475569 !important;
}

/* =====================================================
   DARK MODE AUTO
===================================================== */

@media (prefers-color-scheme: dark){

  .badge{
    border:1px solid rgba(255,255,255,.08);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 3px 8px rgba(0,0,0,.20);

    backdrop-filter:blur(10px);
  }

  /* standard */

  .badge-brain{
    background:rgba(92,99,255,.18);
    color:#e1e5ff;
  }

  .badge-focus{
    background:rgba(66,153,225,.18);
    color:#d8efff;
  }

  .badge-calm{
    background:rgba(0,184,148,.18);
    color:#a3fae6;
  }

  .badge-sleep{
    background:rgba(108,92,231,.18);
    color:#e4dcff;
  }

  .badge-energy{
    background:rgba(255,159,67,.18);
    color:#ffe2b7;
  }

  .badge-warning{
    background:rgba(255,118,117,.18);
    color:#ffd8d7;
  }

  .badge-info{
    background:rgba(255,255,255,.08);
    color:#eef2f7;
  }

  /* preuves */

  .badge-evidence-high{
    background:rgba(46,213,115,.18);
    color:#b4ffcf;
  }

  .badge-evidence-medium{
    background:rgba(255,196,61,.18);
    color:#fff2c2;
  }

  .badge-evidence-low{
    background:rgba(255,159,67,.18);
    color:#ffe6c4;
  }

  .badge-evidence-emerging{
    background:rgba(165,94,234,.18);
    color:#f0dcff;
  }

  /* médication */

  .badge-med-safe{
    background:rgba(46,213,115,.18);
    color:#d9ffe7;
  }

  .badge-med-low{
    background:rgba(255,196,61,.18);
    color:#fff2c2;
  }

  .badge-med-medium{
    background:rgba(255,159,67,.18);
    color:#ffe6c4;
  }

  .badge-med-high{
    background:rgba(255,99,72,.18);
    color:#ffd7cf;
  }

  /* anciens badges custom avec bg- => compatibilité auto dark mode */

  .badge[class*="bg-"]{
    border:1px solid rgba(255,255,255,.08);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 3px 8px rgba(0,0,0,.22);

    backdrop-filter:blur(10px);
  }

  .badge.bg-primary{
    background:rgba(92,99,255,.18) !important;
    color:#e1e5ff !important;
  }

  .badge.bg-info{
    background:rgba(0,184,148,.18) !important;
    color:#c9fff2 !important;
  }

  .badge.bg-warning{
    background:rgba(255,159,67,.18) !important;
    color:#ffe2b7 !important;
  }

  .badge.bg-success{
    background:rgba(46,213,115,.18) !important;
    color:#d9ffe7 !important;
  }

  .badge.bg-secondary{
    background:rgba(108,92,231,.18) !important;
    color:#e4dcff !important;
  }

  .badge.bg-danger{
    background:rgba(255,99,72,.18) !important;
    color:#ffd7cf !important;
  }

  .badge.bg-dark{
    background:rgba(255,255,255,.10) !important;
    color:#f3f4f6 !important;
  }

  .badge.bg-light{
    background:rgba(255,255,255,.06) !important;
    color:#d1d5db !important;
  }
}

/* ===============================
   Badges de petite version
=============================== */

.badge-sm{
  padding:5px 10px;
  font-size:.72rem;
}



/*
.badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:1rem;
}

.badges .badge{
  font-size:.78rem;
  padding:.52em .75em;
  border-radius:999px;
}
*/
/* BADGES DE NIVEAU DE PREUVE (evidence level) */
/*
.evidence-high{
  background:#d1e7dd;
  color:#0f5132;
}
*/
/*
.evidence-high{
  background: rgba(52,199,89,.12);
  color:#1c7c3c;
  border:1px solid rgba(52,199,89,.18);
  border-radius:999px;
  padding:4px 10px;
  font-weight:600;
  letter-spacing:.01em;
}

.evidence-medium{
  background:#fff3cd;
  color:#664d03;
}

.evidence-low{
  background:#f8d7da;
  color:#842029;
}

.evidence-emerging{
  background:#cff4fc;
  color:#055160;
}
*/
/* =====================================================
   EFFECT BARS (barres d'effets pour les suppléments)
===================================================== */
.effect-bars{
  display:grid;
  gap:.42rem;
  margin:.75rem 0 1rem;
}

.effect-bar-row{
  display:grid;
  grid-template-columns:minmax(112px, 34%) 1fr auto;
  align-items:center;
  gap:.55rem;
  font-size:.88rem;
  line-height:1.2;
}

.effect-bar-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.effect-bar-score{
  white-space:nowrap;
  font-size:.82rem;
  color:#374151;
}

.effect-progress{
  height:.65rem;
  border-radius:999px;
  background:#e5e7eb;
  overflow:hidden;
}

.effect-progress .progress-bar{
  border-radius:999px;
}

@media(max-width:520px){
  .effect-bar-row{
    grid-template-columns:minmax(92px, 40%) 1fr auto;
    gap:.42rem;
  }
}

/* =====================================================
   SCROLLBAR
===================================================== */

.sidebar-groups::-webkit-scrollbar,
.info-pane-body::-webkit-scrollbar{
  width:8px;
}

.sidebar-groups::-webkit-scrollbar-thumb,
.info-pane-body::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:999px;
}

/* ================= ACCORDEON SIDEBAR ================= */
/*
.sidebar-frame-title-btn{
  width:100%;
  background:transparent;
  color:#e5e7eb;

  border:none;
  text-align:left;

  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;

  padding:.42rem .45rem;
  border-radius:8px;

  display:flex;
  align-items:center;

  opacity:.92;
}
*/

.sidebar-frame-title-btn{
  width:100%;
  background:transparent;
  color:#e5e7eb;

  border:none;
  text-align:left;

  font-size:.71rem; /* ← .82 légèrement augmenté */
  font-weight:600;
  letter-spacing:.034em;           /* ← espace pour lisibilité */
  text-transform:uppercase;       /* ← clé */
  

  padding:.42rem .45rem;
  border-radius:8px;

  display:flex;
  align-items:center;

  opacity:.9;
}

.sidebar-frame-title-btn:hover{
  background:rgba(255,255,255,.05);
  opacity:1;
}

/* petite barre verticale à gauche du titre pour indiquer que c'est un bouton d'accordéon */
/*
.sidebar-frame-title-btn{
  position:relative;
  padding-left:.55rem;
}

.sidebar-frame-title-btn::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);

  width:3px;
  height:60%;

  background:rgba(255,255,255,.2);
  border-radius:2px;
}
*/


.sidebar-frame-content{
  height:0;
  overflow:hidden;
  transition:height .25s ease;
}

/* micro UX */

.sidebar-frame{
  transition:background .15s ease;
}

.sidebar-frame{
  padding:.45rem;
  margin-bottom:.5rem;

  border-radius:14px; /* un poil moins “bulky” que 16px */

  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);

  transition:background .15s ease, border-color .15s ease;
}
/*
.sidebar-frame{
  padding:.45rem;
  margin-bottom:.5rem;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}

.sidebar-frame{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:.38rem;
  margin-bottom:.38rem;
  background:rgba(255,255,255,.025);
}
*/
.sidebar-frame.active-frame{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
}

.sidebar-frame:hover{
  background:rgba(255,255,255,.04);
}

.sidebar-frame-title{
  font-size:.70rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  opacity:.72;
  padding:.08rem .3rem;
  margin-bottom:.12rem;
}

.btn-dynamic {
  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.15s ease;
}

.btn-dynamic:active {
  transform: scale(0.96);
}
/* OUVRIR (vert) */
.expand-0 { background: #111; }
.expand-1 { background: #0f2a0f; }
.expand-2 { background: #1f5a1f; }
.expand-3 { background: #2faa2f; }

/* FERMER (rouge) */
.collapse-0 { background: #111; }
.collapse-1 { background: #3a1212; }
.collapse-2 { background: #7a1f1f; }
.collapse-3 { background: #c0392b; }


/* =====================================================
   MOBILE
===================================================== */

@media (max-width:992px){

  .sidebar{
    width:240px;
    min-width:240px;
  }

  .topbar{
    height:auto;
    padding:.8rem;
    align-items:flex-start;
    flex-direction:column;
  }

  .viewer-wrap{
    padding:.7rem;
  }

  /* tiroir */
  .side-drawer{
    width:100%;
    max-width:100%;
  }

}