/* Navbar « Mon espace » + « Mon espace immobilier » — composant partagé (scripts/espace-nav.js).
   Ne dépend que des variables du design system de styles.css. Toutes les classes sont préfixées `nrn-`. */

.sidebar.nrn{ overflow:visible; gap:12px; padding:14px 12px 12px; }

/* ── Logo ─────────────────────────────────────────────── */
.nrn-brand{ display:flex; justify-content:center; padding:2px 0 0; flex:0 0 auto; }
.nrn-brand img{ height:44px; width:auto; display:block; filter:drop-shadow(0 3px 6px rgba(20,30,70,.25)); }

/* ── Corps : seule la liste des serveurs défile ───────── */
.nrn-body{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:14px; }
.nrn-section{ display:flex; flex-direction:column; gap:4px; flex:0 0 auto; }
.nrn-section.nrn-servers{ flex:1 1 auto; min-height:0; }
.nrn-label{
  display:flex; align-items:center; justify-content:space-between; padding:0 8px;
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute);
}
.nrn-label small{ font-size:10px; font-weight:700; letter-spacing:0; opacity:.8; }

/* ── Carte contexte (serveur courant) ─────────────────── */
.nrn-context{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:14px; flex:0 0 auto;
  background:var(--glass); border:1px solid var(--line);
}
.nrn-context-txt{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.nrn-context-name{
  font-family:var(--font-display); font-weight:800; font-size:13px; line-height:1.25; color:var(--text-hi);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.nrn-context-sub{ font-size:10.5px; font-weight:600; color:var(--accent-text); }

/* ── Avatars (image ou initiales) ─────────────────────── */
.nrn-av{
  flex:0 0 auto; width:24px; height:24px; border-radius:8px; object-fit:cover; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-text);
  font-family:var(--font-display); font-weight:800; font-size:9.5px; letter-spacing:.02em;
}
.nrn-av.is-lg{
  width:36px; height:36px; border-radius:11px; font-size:12px; color:#fff;
  background:linear-gradient(135deg, var(--coral-strong), var(--coral));
  box-shadow:0 4px 10px -4px rgba(255,111,80,.5), inset 0 1px 0 rgba(255,255,255,.25);
}

/* ── Items (vues + serveurs) ──────────────────────────── */
.nrn-list{ display:flex; flex-direction:column; gap:2px; }
.nrn-item{
  all:unset; box-sizing:border-box; position:relative; width:100%; cursor:pointer;
  display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:10px;
  font-family:var(--font-body); font-size:12.5px; font-weight:500; line-height:1.3; color:var(--text);
  transition:background .15s ease, color .15s ease;
}
.nrn-item:hover{ background:var(--surface-hover); color:var(--text-hi); }
.nrn-item:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:1px; }
.nrn-item.is-active{ background:var(--accent-soft); color:var(--accent-text); font-weight:700; }
.nrn-item.is-active::before{
  content:""; position:absolute; left:3px; top:9px; bottom:9px; width:3px; border-radius:3px; background:var(--accent);
}
.nrn-ico{ flex:0 0 auto; width:16px; height:16px; display:flex; align-items:center; justify-content:center; }
.nrn-ico svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; opacity:.75; }
.nrn-item:hover .nrn-ico svg, .nrn-item.is-active .nrn-ico svg{ opacity:1; }
.nrn-lbl{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nrn-count{
  flex:0 0 auto; min-width:20px; padding:1px 7px; border-radius:999px; text-align:center;
  font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text-mute);
  background:color-mix(in srgb, var(--text-mute) 14%, transparent);
}
.nrn-item.is-active .nrn-count{ color:var(--accent-text); background:color-mix(in srgb, var(--accent) 22%, transparent); }
.nrn-count.is-zero{ opacity:.55; }

/* Lien de retour : discret, séparé des vues */
.nrn-back{ color:var(--text); font-size:12.5px; font-weight:600; text-decoration:none; background:var(--glass); border:1px solid var(--line); }
.nrn-back:hover{ color:var(--text-hi); }
a.nrn-item{ text-decoration:none; }

/* ── Serveurs : filtre + liste défilante ──────────────── */
.nrn-filter{
  all:unset; box-sizing:border-box; width:100%; margin:2px 0 4px; padding:6px 10px; border-radius:9px;
  font-family:var(--font-body); font-size:12px; color:var(--text-hi);
  background:var(--glass); border:1px solid var(--line);
}
.nrn-filter::placeholder{ color:var(--text-mute); }
.nrn-filter:focus{ border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); }
.nrn-scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto; margin:0 -6px; padding:0 6px;
  scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--text-mute) 40%, transparent) transparent;
}
.nrn-scroll::-webkit-scrollbar{ width:6px; }
.nrn-scroll::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--text-mute) 35%, transparent); border-radius:6px; }
.nrn-none{ padding:8px 10px; font-size:11.5px; color:var(--text-mute); }
.nrn-hint{ flex:0 0 auto; padding:6px 8px 0; font-size:10.5px; line-height:1.45; color:var(--text-mute); }
.nrn-hint b{ color:var(--text); font-weight:600; }

/* ── Pied : compte ────────────────────────────────────── */
.sidebar.nrn .im-user-foot-wrap{ flex:0 0 auto; margin-top:0; }