/* ============================================================
   EURIDIUM SIDEBAR — STYLES
   Version 2.0 — Mai 2026
   
   Dépend de : euridium-design-system.css
   À inclure APRÈS le design system dans chaque page.
   ============================================================ */

/* ============================================================
   1. CONTAINER PRINCIPAL DE LA SIDEBAR
   ============================================================ */

.eu-sidebar {
  background: var(--eu-bg-elevated);
  border-right: 0.5px solid var(--eu-border-default);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: var(--eu-z-sidebar);
  width: var(--eu-sidebar-width);
}

/* Scrollable middle area (sections de nav) */
.eu-sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--eu-space-7) var(--eu-space-4);
}

/* ============================================================
   2. BRAND (Logo + Workspace selector)
   ============================================================ */

.eu-sidebar-brand {
  padding: var(--eu-space-8) var(--eu-space-8) var(--eu-space-9);
  border-bottom: 0.5px solid var(--eu-border-subtle);
}

.eu-sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--eu-space-3);
  margin-bottom: var(--eu-space-6);
}

.eu-sidebar-logo-mark {
  width: 28px;
  height: 28px;
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eu-sidebar-logo-mark svg { width: 28px; height: 28px; display: block; }

.eu-sidebar-logo-text {
  color: var(--eu-text-primary);
  font-size: var(--eu-text-lg);
  font-weight: var(--eu-weight-medium);
  letter-spacing: 0.2px;
}

/* Workspace selector */
.eu-sidebar-workspace {
  padding: var(--eu-space-3) var(--eu-space-4);
  background: var(--eu-bg-card);
  border: 0.5px solid var(--eu-border-default);
  border-radius: var(--eu-radius-md);
  display: flex;
  align-items: center;
  gap: var(--eu-space-3);
  cursor: pointer;
  transition: border-color var(--eu-transition-fast);
}

.eu-sidebar-workspace:hover {
  border-color: var(--eu-border-strong);
}

.eu-sidebar-workspace-avatar {
  width: 22px;
  height: 22px;
  background: var(--eu-accent-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.eu-sidebar-workspace-avatar span {
  color: var(--eu-accent);
  font-size: var(--eu-text-xs);
  font-weight: var(--eu-weight-medium);
}

.eu-sidebar-workspace-info {
  flex: 1;
  min-width: 0;
}

.eu-sidebar-workspace-user {
  font-size: var(--eu-text-base);
  color: var(--eu-text-secondary);
  font-weight: var(--eu-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eu-sidebar-workspace-name {
  font-size: var(--eu-text-xs);
  color: var(--eu-text-subtle);
}

.eu-sidebar-workspace-chevron {
  color: var(--eu-text-subtle);
  font-size: 12px;
  flex-shrink: 0;
}

/* ============================================================
   3. SECTIONS (groupes d'items)
   ============================================================ */

.eu-sidebar-section {
  margin-bottom: var(--eu-space-8);
}

.eu-sidebar-section:last-child {
  margin-bottom: 0;
}

.eu-sidebar-section-label {
  padding: 0 var(--eu-space-3) var(--eu-space-3);
  font-size: 11px;
  color: var(--eu-text-subtle);
  letter-spacing: 1.4px;
  font-weight: var(--eu-weight-medium);
}

.eu-sidebar-section-items {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* ============================================================
   4. ITEMS DE NAVIGATION
   ============================================================ */

.eu-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--eu-space-4);
  padding: 7px var(--eu-space-4);
  border-radius: var(--eu-radius-md);
  cursor: pointer;
  color: var(--eu-text-muted);
  text-decoration: none;
  position: relative;
  transition: all var(--eu-transition-fast);
}

.eu-sidebar-item:hover {
  background: var(--eu-bg-hover);
  color: var(--eu-text-secondary);
}

.eu-sidebar-item i {
  font-size: 15px;
  flex-shrink: 0;
}

.eu-sidebar-item-label {
  font-size: var(--eu-text-base);
  flex: 1;
}

/* Theme toggle reuses the footer-item look but is a <button> — reset chrome */
.eu-sidebar-theme-toggle {
  width: 100%;
  background: transparent;
  border: none;
  font-family: inherit;
  text-align: left;
  appearance: none;
}
.eu-sidebar-theme-toggle .eu-sidebar-item-label { text-align: left; }

/* Item actif */
.eu-sidebar-item-active {
  background: var(--eu-accent-bg);
  color: var(--eu-text-primary);
}

.eu-sidebar-item-active:hover {
  background: var(--eu-accent-bg-strong);
  color: var(--eu-text-primary);
}

.eu-sidebar-item-active .eu-sidebar-item-label {
  font-weight: var(--eu-weight-medium);
}

.eu-sidebar-item-marker {
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 2px;
  background: var(--eu-accent);
  border-radius: 0 2px 2px 0;
}

/* Badge sur item */
.eu-sidebar-badge {
  font-size: 11px;
  color: var(--eu-accent);
  font-family: var(--eu-font-mono);
  background: var(--eu-accent-bg-strong);
  padding: 1px 5px;
  border-radius: 2px;
  font-weight: var(--eu-weight-medium);
}

.eu-sidebar-badge-subtle {
  color: var(--eu-text-subtle);
  background: transparent;
}

/* ============================================================
   5. SOUS-ITEMS (children — Lenses)
   ============================================================ */

.eu-sidebar-children {
  padding: var(--eu-space-1) 0 var(--eu-space-1) var(--eu-space-7);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.eu-sidebar-child {
  display: flex;
  align-items: center;
  gap: var(--eu-space-3);
  padding: 5px var(--eu-space-4);
  border-radius: var(--eu-radius-sm);
  cursor: pointer;
  color: var(--eu-text-muted);
  text-decoration: none;
  transition: all var(--eu-transition-fast);
}

.eu-sidebar-child:hover {
  background: var(--eu-bg-hover);
  color: var(--eu-text-secondary);
}

.eu-sidebar-child-label {
  font-size: var(--eu-text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.eu-sidebar-child-active {
  background: var(--eu-accent-bg-soft);
  color: var(--eu-text-secondary);
}

.eu-sidebar-child-active:hover {
  background: var(--eu-accent-bg);
}

.eu-sidebar-child-badge {
  font-size: 11px;
  color: var(--eu-accent);
  font-family: var(--eu-font-mono);
  font-weight: var(--eu-weight-medium);
}

/* Bouton "New Lens" */
.eu-sidebar-child-add {
  color: var(--eu-text-subtle);
}

.eu-sidebar-child-add i {
  font-size: 12px;
}

.eu-sidebar-child-add span {
  font-size: var(--eu-text-sm);
}

/* ============================================================
   6. FOOTER (Settings + Countdown)
   ============================================================ */

.eu-sidebar-footer {
  padding: var(--eu-space-5) var(--eu-space-4);
  border-top: 0.5px solid var(--eu-border-subtle);
  flex-shrink: 0;
}

.eu-sidebar-footer-items {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Countdown widget */
.eu-sidebar-countdown {
  padding: var(--eu-space-4);
  margin-top: var(--eu-space-4);
  background: var(--eu-accent-bg-soft);
  border: 0.5px solid var(--eu-border-accent);
  border-radius: var(--eu-radius-md);
}

.eu-sidebar-countdown-label {
  font-size: var(--eu-text-xs);
  color: var(--eu-accent);
  letter-spacing: 0.6px;
  margin-bottom: var(--eu-space-1);
  font-weight: var(--eu-weight-medium);
}

.eu-sidebar-countdown-value {
  display: flex;
  align-items: baseline;
  gap: var(--eu-space-2);
}

.eu-sidebar-countdown-number {
  font-size: var(--eu-text-2xl);
  color: var(--eu-text-primary);
  font-weight: var(--eu-weight-medium);
  font-family: var(--eu-font-mono);
  line-height: 1;
}

.eu-sidebar-countdown-unit {
  font-size: var(--eu-text-xs);
  color: var(--eu-text-subtle);
}

/* ============================================================
   7. RESPONSIVE (mobile / tablette — futur)
   ============================================================ */

@media (max-width: 768px) {
  /* Aligne la colonne de grille sur la sidebar réduite (sinon colonne fantôme de 220px). */
  .eu-app {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .eu-sidebar {
    width: 64px;
  }
  
  .eu-sidebar-brand,
  .eu-sidebar-workspace-info,
  .eu-sidebar-workspace-chevron,
  .eu-sidebar-section-label,
  .eu-sidebar-item-label,
  .eu-sidebar-badge,
  .eu-sidebar-children,
  .eu-sidebar-countdown {
    display: none;
  }
  
  .eu-sidebar-logo {
    justify-content: center;
    margin: 0;
  }
}

/* ============================================================
   MENU WORKSPACE (déroulant sous le sélecteur de la sidebar)
   ============================================================ */

.eu-sidebar-brand { position: relative; }

.eu-ws-menu {
  position: absolute;
  left: 12px; right: 12px; top: calc(100% - 6px);
  background: var(--eu-bg-elevated);
  border: 0.5px solid var(--eu-border-strong);
  border-radius: var(--eu-radius-md);
  box-shadow: var(--eu-shadow-lg, 0 10px 30px rgba(0,0,0,.4));
  padding: 6px;
  z-index: calc(var(--eu-z-sidebar) + 10);
}

.eu-ws-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer;
  padding: 8px 10px; border-radius: var(--eu-radius-sm);
  color: var(--eu-text-secondary); font-family: inherit; font-size: var(--eu-text-sm);
}
.eu-ws-item:hover { background: var(--eu-bg-hover); }
.eu-ws-item.on { color: var(--eu-text-primary); }
.eu-ws-item.on i { color: var(--eu-success); }
.eu-ws-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eu-ws-item em {
  font-style: normal; font-family: var(--eu-font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .4px; color: var(--eu-text-subtle);
}

.eu-ws-manage {
  display: block; padding: 8px 10px; margin-top: 2px;
  border-top: 0.5px solid var(--eu-border-subtle);
  font-size: 11px; color: var(--eu-accent); text-decoration: none;
}
.eu-ws-manage:hover { background: var(--eu-bg-hover); border-radius: var(--eu-radius-sm); }

/* ============================================================
   CLOCHE DE NOTIFICATIONS (topbar — partagée par toutes les pages)
   ============================================================ */

.eu-topbar-bell {
  position: relative;
  background: transparent; border: none; cursor: pointer;
  color: var(--eu-text-subtle); font-size: 17px;
  padding: 6px; border-radius: var(--eu-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
}
.eu-topbar-bell:hover { color: var(--eu-text-secondary); background: var(--eu-bg-hover); }

.eu-bell-badge {
  position: absolute; top: 0; right: 0;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: var(--eu-radius-full);
  background: var(--eu-critical, #D24A5B); color: #fff;
  font-family: var(--eu-font-mono); font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  pointer-events: none;
}

.eu-notif-panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: min(340px, calc(100vw - 88px)); max-height: 420px; overflow-y: auto;
  background: var(--eu-bg-elevated);
  border: 0.5px solid var(--eu-border-strong);
  border-radius: var(--eu-radius-md);
  box-shadow: var(--eu-shadow-lg, 0 10px 30px rgba(0,0,0,.4));
  z-index: 200;
}

.eu-notif-head {
  padding: 11px 14px 9px;
  font-size: var(--eu-text-sm); font-weight: var(--eu-weight-medium);
  color: var(--eu-text-primary);
  border-bottom: 0.5px solid var(--eu-border-subtle);
  display: flex; flex-direction: column; gap: 2px;
}
.eu-notif-note { font-size: 10px; font-weight: 400; color: var(--eu-text-subtle); }

.eu-notif-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; text-decoration: none;
  border-bottom: 0.5px solid var(--eu-border-subtle);
}
.eu-notif-item:last-child { border-bottom: none; }
.eu-notif-item:hover { background: var(--eu-bg-hover); }
.eu-notif-item i { font-size: 15px; margin-top: 1px; flex: 0 0 auto; }
.eu-notif-item i.tone-crit { color: var(--eu-critical, #D24A5B); }
.eu-notif-item i.tone-warn { color: var(--eu-warning); }
.eu-notif-item i.tone-info { color: var(--eu-text-subtle); }
.eu-notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.eu-notif-label {
  font-size: var(--eu-text-sm); color: var(--eu-text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eu-notif-sub { font-family: var(--eu-font-mono); font-size: 10px; color: var(--eu-text-subtle); }
.eu-notif-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--eu-accent); flex: 0 0 auto; margin-top: 5px;
}
.eu-notif-empty { padding: 22px 14px; font-size: var(--eu-text-sm); color: var(--eu-text-subtle); text-align: center; }

/* ============================================================
   FIN — euridium-sidebar.css
   ============================================================ */