/* =================================================================
   sidebar.css - Sidebar repliable + content-panel
   Pattern : 2 colonnes (sidebar gauche + content panel droite)
   - Width normale : 260px / collapsed : 56px (icones seules)
   - Transition smooth
   - Etat persiste via localStorage (gere par ui-sidebar.js)

   Structure HTML attendue dans <main> :
     <aside class="sidebar">
       <div class="sidebar-head">
         <span class="sidebar-brand">Titre</span>
         <button class="sidebar-toggle">...</button>
       </div>
       <nav class="sidebar-nav">
         <button class="sidebar-item active" data-id="...">
           <span class="sidebar-icon">...</span>
           <span class="sidebar-label">Texte</span>
         </button>
       </nav>
       <div class="sidebar-foot">...</div>
     </aside>
     <section class="content-panel">
       ... contenu affiche selon ce qui est selectionne ...
     </section>
   ================================================================= */

/* Le main doit etre en flex row pour mettre sidebar a gauche et content a droite */
main.has-sidebar {
  display: flex;
  flex-direction: row;
  padding: 0 !important;   /* le padding est gere par .content-panel */
}

.sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--glass-surface-v);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-right: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  transition: width var(--transition-norm);
  overflow: hidden;
}

.sidebar.collapsed {
  width: 56px;
}

/* === SIDEBAR HEAD === */
.sidebar-head {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: var(--gap-md);
  border-bottom: 1px solid var(--border);
  min-height: 56px;
}

.sidebar-logo {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--bg-base);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.sidebar-titles {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* Brand title : DORE comme dans Crea-PGC (var --accent, 15px, 700) */
.sidebar-titles strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Brand sub "par Crise et Resilience" : gris muted, 11px (formulation EXACTE) */
.sidebar-titles small {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Variante simple : juste un texte de titre, sans logo */
.sidebar-brand {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Bouton toggle : modele unique .panel-toggle defini dans buttons.css. */
/* En mode collapsed : chevron pivote pour pointer vers la droite (deplie-moi) */
.sidebar.collapsed .sidebar-toggle {
  transform: rotate(180deg);
}

.sidebar.collapsed .sidebar-brand,
.sidebar.collapsed .sidebar-titles {
  display: none;
}
/* En collapsed : header en colonne (logo en haut, toggle en bas) */
.sidebar.collapsed .sidebar-head {
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  justify-content: center;
}

/* === SIDEBAR ACTIONS (toolbar icones juste sous le header)
   Marge verticale FINE (2px) pour faire un trait discret, pattern Crea-PGC */
.sidebar-actions {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 2px var(--gap-md);
  border-bottom: 1px solid var(--border);
  gap: 4px;
}

/* Boutons actions sidebar : juste les icones (pas de fond, pas de border).
   Decide 2026-05-14 - on veut un look depouille sous le brand. */
.sidebar-action-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: var(--transition-norm);
  flex-shrink: 0;
  font-family: var(--font-icon), var(--font);
}
.sidebar-action-btn:hover {
  color: var(--accent);
}
.sidebar-action-btn.active {
  color: var(--accent);
}

/* En mode collapsed : les actions passent en colonne verticale */
.sidebar.collapsed .sidebar-actions {
  flex-direction: column;
  padding: 2px 4px;
  gap: 4px;
}

/* === SIDEBAR NAV === */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--gap-sm) 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Items : pattern Crea-PGC (barre verticale a gauche quand actif) */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;   /* place pour la barre dore quand actif */
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition-norm);
  text-align: left;
  width: 100%;
  user-select: none;
}
.sidebar-item:hover {
  background: var(--bg-card-hover);
  color: var(--text);
}
/* Item actif : fond DEGRADE qui s'estompe vers la droite (pattern image Alex).
   Pas de barre verticale dore. Texte et icone restent en couleur normale.
   PAS de margin (sinon depasse + scroll horizontal sur le parent). */
.sidebar-item.active {
  background: linear-gradient(to right, rgba(212, 166, 74, 0.22) 0%, rgba(212, 166, 74, 0.06) 50%, transparent 100%);
  color: var(--text);
  border-left-color: transparent;
  border-radius: var(--radius-sm);
}
.sidebar-item.active .sidebar-icon {
  color: var(--text);
}

.sidebar-icon {
  font-family: var(--font-icon), var(--font);
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: var(--transition-norm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sidebar-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge variante subtile (counter discret, fond alpha) */
.sidebar-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-alpha);
  color: var(--accent);
  font-weight: 600;
  flex-shrink: 0;
}

/* Badge variante alerte (notifications, fond accent plein, pattern Crea-PGC) */
.sidebar-badge.alert {
  background: var(--accent);
  color: var(--bg-base);              /* noir sur dore : WCAG AAA */
  font-weight: 700;
  padding: 2px 7px;
}

/* Triangle pour items avec sous-menu (flyout au hover) */
.sidebar-arrow {
  margin-left: auto;
  font-size: 9px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.sidebar-item.has-submenu.open .sidebar-arrow {
  transform: rotate(90deg);
}

/* === Section header (cliquable, deroulable, avec chevron) === */
.sidebar-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--gap-md) 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  user-select: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.sidebar-section:hover { color: var(--text-dim); }
.sidebar-section .section-chevron {
  font-family: var(--font-icon), var(--font);
  font-size: 9px;
  transition: transform 0.2s ease;
}
.sidebar-section.collapsed .section-chevron {
  transform: rotate(-90deg);
}
.sidebar.collapsed .sidebar-section { display: none; }

/* === Section body : container avec trait vertical a gauche (hierarchie visuelle) === */
.sidebar-section-body {
  border-left: 1px solid var(--border);
  margin-left: 20px;
  padding-left: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-section.collapsed + .sidebar-section-body {
  display: none;
}
.sidebar.collapsed .sidebar-section-body {
  border-left: none;
  margin-left: 0;
  padding-left: 0;
}

/* === Submenu flyout (positionne par JS, en fin de body pour eviter overflow) === */
.sidebar-submenu {
  display: none;
  position: fixed;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  min-width: 220px;
  padding: 4px 0;
  z-index: var(--z-dropdown);
  box-shadow: var(--shadow-card);
}
.sidebar-submenu.open { display: block; }

.sidebar-subitem {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: var(--transition-fast);
}
.sidebar-subitem:hover {
  background: var(--bg-card-hover);
  color: var(--accent);
}

.sidebar.collapsed .sidebar-label,
.sidebar.collapsed .sidebar-badge {
  display: none;
}
.sidebar.collapsed .sidebar-item {
  justify-content: center;
  padding: 10px 0;
}

/* === SIDEBAR FOOT (riche, pattern Crea-PGC) ===
   Structure flexible : status dot + stats + horloge en accent
   En collapsed : tout cache sauf l'heure courte HH:MM */
.sidebar-foot {
  padding: var(--gap-md);
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Status (point colore + label : Charge / Sauvegarde / Erreur) */
.sidebar-foot-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 0;
}

/* Point colore qui change selon l'etat (pattern Crea-PGC) */
.save-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.save-dot.idle    { background: var(--text-muted); }
.save-dot.saving  { background: var(--warning); }
.save-dot.ok      { background: var(--success); }
.save-dot.error   { background: var(--error); }

/* Stats text (ex: Processus 8/11, Etapes 5/6 valides) */
.sidebar-foot-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 0;
}
.sidebar-foot-stats strong {
  color: var(--text-dim);
  font-weight: 600;
}

/* Horloge en DORE (var --accent), aligne a droite, font-mono - pattern Crea-PGC */
.sidebar-foot-clock {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  text-align: right;
  padding: 2px 0;
  margin-top: 2px;
}
/* En deploye : on montre la version longue HH:MM:SS, on cache la courte */
.sidebar-foot-clock .clock-short { display: none; }
.sidebar-foot-clock .clock-full  { display: inline; }

/* Texte simple optionnel (ex: version) */
.sidebar-foot-text {
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 0;
}

/* === Mode collapsed : tout cache sauf l'horloge courte centree === */
.sidebar.collapsed .sidebar-foot {
  padding: var(--gap-md) 4px;
}
.sidebar.collapsed .sidebar-foot-status,
.sidebar.collapsed .sidebar-foot-stats,
.sidebar.collapsed .sidebar-foot-text {
  display: none;
}
.sidebar.collapsed .sidebar-foot-clock {
  text-align: center;
}
.sidebar.collapsed .sidebar-foot-clock .clock-full  { display: none; }
.sidebar.collapsed .sidebar-foot-clock .clock-short { display: inline; }

/* === CONTENT PANEL === */
.content-panel {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--gap-xl);
  background: transparent;
}

.content-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  margin-bottom: var(--gap-lg);
  padding-bottom: var(--gap-md);
  border-bottom: 1px solid var(--border);
}
.content-panel-head h1,
.content-panel-head h2 {
  font-size: 18px;
  color: var(--text);
}

/* === Section "vide" (rien selectionne dans la sidebar) === */
.content-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  color: var(--text-muted);
  font-size: 13px;
  gap: var(--gap-sm);
}
.content-empty .empty-icon {
  font-size: 48px;
  opacity: 0.3;
  margin-bottom: var(--gap-md);
}