/* Cosmos unified Sidebar — rail + module/chrome rules.
   Shipped as a static web asset of Cosmos.Common.AspNetCore.Blazor.Sidebar and
   linked once by the host. Intentionally a plain (non-isolated) stylesheet:
   CSS isolation does not reach RenderFragment slot content, and the host's Logo
   and Footer slots use the .cosmos-rail-* classes below. Relies on design tokens
   (--navy-900, --bad-500, --accent-500, --mod-tone) defined by the host theme. */

.cosmos-sidebar {
  display:flex; flex-direction:row;
  position:sticky; top:0; height:100vh; align-self:flex-start;
  flex-shrink:0;
  /* position:sticky makes this a stacking context; raise it so the fixed
     function flyout (rendered inside the rail) paints above the page content
     instead of being trapped behind it. */
  z-index:1000;
}

.cosmos-sidebar-icons {
  width:60px; background:var(--navy-900); padding:12px 0;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  overflow-y:auto; overflow-x:hidden;
  height:100%;
}
.cosmos-sidebar-icons.is-labels {
  width:210px; align-items:stretch; padding:12px 8px;
}

/* Logo */
.cosmos-rail-logo { width:40px; height:40px; display:grid; place-items:center; margin-bottom:10px; text-decoration:none; }
.cosmos-rail-logo img { width:36px; height:36px; display:block; }
.cosmos-sidebar-icons.is-labels .cosmos-rail-logo { justify-self:start; margin-left:2px; }

.cosmos-rail-module-wrap { width:100%; }

/* Module button */
.cosmos-rail-module {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:2px 0; border:none; background:transparent; cursor:pointer;
  position:relative; color:var(--mod-tone); opacity:.7;
}
.cosmos-sidebar-icons:not(.is-labels) .cosmos-rail-module { justify-content:center; }
.cosmos-rail-module:hover { opacity:1; }
.cosmos-rail-module.active { opacity:1; }
.cosmos-rail-bar { position:absolute; left:-2px; top:8px; width:3px; height:24px; border-radius:2px; background:transparent; }
.cosmos-rail-module.active .cosmos-rail-bar { background:var(--mod-tone); }
.cosmos-rail-ico { width:40px; height:40px; border-radius:9px; display:grid; place-items:center; flex-shrink:0; position:relative; }
.cosmos-rail-module.active .cosmos-rail-ico { background:rgba(255,255,255,.10); }
.cosmos-rail-ico i { font-size:16px; }
.cosmos-rail-badge {
  position:absolute; top:3px; right:3px; min-width:14px; height:14px; padding:0 4px;
  border-radius:7px; background:var(--bad-500); color:#fff; font-size:9px; font-weight:700;
  display:grid; place-items:center; border:2px solid var(--navy-900);
}
.cosmos-rail-label { font-size:13px; font-weight:600; color:rgba(255,255,255,.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.cosmos-rail-spacer { flex:1; min-height:8px; }

/* Widen/collapse toggle */
.cosmos-sidebar-toggle {
  width:30px; height:30px; border:none; background:transparent; border-radius:7px;
  display:grid; place-items:center; color:rgba(255,255,255,.5); cursor:pointer;
  font-size:17px; font-weight:700; line-height:1; margin:2px 0;
}
.cosmos-sidebar-icons.is-labels .cosmos-sidebar-toggle { justify-self:end; }
.cosmos-sidebar-toggle:hover { background:rgba(255,255,255,.08); color:#fff; }

/* Messages / user rows (host Footer slot) */
.cosmos-rail-btn {
  display:flex; align-items:center; gap:10px; width:100%; height:36px;
  border:none; background:transparent; color:rgba(255,255,255,.5); cursor:pointer;
}
.cosmos-sidebar-icons:not(.is-labels) .cosmos-rail-btn { justify-content:center; }
.cosmos-rail-btn:hover { color:#fff; }
.cosmos-rail-btn i { width:40px; text-align:center; font-size:14px; }
.cosmos-rail-btn-label { font-size:12.5px; }
.cosmos-rail-user { display:flex; align-items:center; gap:10px; width:100%; margin-top:6px; cursor:pointer; }
.cosmos-sidebar-icons:not(.is-labels) .cosmos-rail-user { justify-content:center; }
.cosmos-rail-avatar {
  width:30px; height:30px; border-radius:50%; background:var(--accent-500); color:var(--navy-900);
  display:grid; place-items:center; font-size:11px; font-weight:700; flex-shrink:0; margin-left:5px;
}