/* ════════════════════════════════════════════════════════════════
   SEL · Hub MJC (MJCTDB) — harmonisation topbar avec les 4 apps MJ
   Ce fichier override JUSTE les 3 éléments du header pour qu'ils
   soient strictement identiques à Mommento / Desk / Support :
     - app-switcher (segmented Sel)
     - sync pill (pilule canvas + dot coloré)
     - user chip / pill (avatar indigo + nom)
   Ne touche pas au reste de Hub MJC (qui est la référence design).
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --sel-ink:           #0F172A;
  --sel-ink-soft:      #334155;
  --sel-muted:         #64748B;
  --sel-canvas:        #FFFFFF;
  --sel-line:          #E5E7EB;
  --sel-line-soft:     #F1F5F9;
  --sel-accent:        #4F46E5;
  --sel-accent-hover:  #4338CA;
  --sel-success:       #059669;
  --sel-warn:          #D97706;
  --sel-danger:        #DC2626;
  --sel-shadow-sm:     0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --sel-font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --sel-font-display:  'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --sel-t-fast:        120ms cubic-bezier(.2, .7, .3, 1);
}

/* ─── App switcher (segmented Sel canonique) ─── */
.mjc-app-switcher {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--sel-line-soft) !important;
  border: 1px solid var(--sel-line) !important;
  border-radius: 10px !important;
  padding: 3px !important;
  gap: 2px !important;
}
.mjc-app-switcher-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 30px !important;
  padding: 0 12px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 7px !important;
  font-family: var(--sel-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  color: var(--sel-muted) !important;
  text-decoration: none !important;
  transition: all var(--sel-t-fast) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
.mjc-app-switcher-btn svg {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}
.mjc-app-switcher-btn:hover {
  color: var(--sel-ink) !important;
  background: transparent !important;
}
.mjc-app-switcher-btn.active {
  background: var(--sel-canvas) !important;
  color: var(--sel-ink) !important;
  font-weight: 600 !important;
  box-shadow: var(--sel-shadow-sm) !important;
  cursor: default !important;
}

/* ─── Sync pill ─── */
.sync-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  background: var(--sel-canvas) !important;
  border: 1px solid var(--sel-line) !important;
  font-family: var(--sel-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--sel-ink-soft) !important;
}
.sync-pill .dot,
.sync-pill .sync-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: var(--sel-success) !important;
  flex-shrink: 0;
}
.sync-pill.offline .dot,    .sync-pill.offline .sync-dot    { background: var(--sel-muted) !important; }
.sync-pill.syncing .dot,    .sync-pill.syncing .sync-dot    { background: var(--sel-warn) !important; }
.sync-pill.error .dot,      .sync-pill.error .sync-dot      { background: var(--sel-danger) !important; }
.sync-pill.connected .dot,  .sync-pill.connected .sync-dot  { background: var(--sel-success) !important; }

/* ─── User chip / pill (avatar indigo Sel + nom) ─── */
.user-chip,
.user-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 12px 4px 4px !important;
  border-radius: 999px !important;
  background: var(--sel-canvas) !important;
  border: 1px solid var(--sel-line) !important;
  font-family: var(--sel-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sel-ink) !important;
  cursor: pointer !important;
}
.user-chip:hover, .user-pill:hover { border-color: var(--sel-muted); }
.user-chip .avatar, .user-pill .avatar,
.user-chip .user-avatar, .user-pill .user-avatar {
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  background: var(--sel-accent) !important;
  color: #fff !important;
  font-family: var(--sel-font-display) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
/* Compact : on garde uniquement avatar + chevron SVG (le nom est dispo au hover/dans le dropdown) */
.user-chip > *:not(.avatar):not(.user-avatar):not(.avatar-mini):not(svg),
.user-pill > *:not(.avatar):not(.user-avatar):not(.avatar-mini):not(svg) {
  display: none !important;
}
.user-chip, .user-pill {
  padding: 4px 8px 4px 4px !important;
  max-width: 64px !important;
}
.user-chip svg, .user-pill svg { color: var(--sel-muted); }
.sync-pill, .user-chip, .user-pill { flex-shrink: 0 !important; }
.mjc-app-switcher { min-width: 0 !important; }
@media (max-width: 1280px) {
  .mjc-app-switcher-btn:not(.active) { gap: 0 !important; }
  .mjc-app-switcher-btn:not(.active) > *:not(svg) {
    max-width: 0; overflow: hidden;
  }
}