/* ============================================================
   Shell layout: floating sidebar + floating topbar over a gray
   canvas — sidebar and topbar are independent rounded panels,
   not flush bars (matches the Spike admin reference).
   ============================================================ */
.app{position:relative;z-index:1;display:grid;grid-template-columns:264px 1fr;gap:18px;min-height:100vh;padding:18px;background:var(--bg)}
.sidebar-scrim{position:fixed;inset:0;background:var(--scrim);z-index:25;display:none}

.sidebar{
  background:var(--surface);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md);
  padding:24px 16px;
  position:sticky; top:18px; height:calc(100vh - 36px); overflow-y:auto;
  display:flex; flex-direction:column;
}
.brand{display:flex;align-items:center;gap:12px;padding:0 8px 22px;margin-bottom:14px}
.brand-mark{
  width:36px;height:36px;flex:none;border-radius:var(--radius-md);
  display:grid;place-items:center;
  background:var(--accent);
  color:var(--accent-contrast);
  box-shadow:var(--glow-accent);
}
.brand-mark svg{width:19px;height:19px}
.brand-name{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.brand-org{font-size:10.5px;color:var(--text-faint);letter-spacing:.03em;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}

.nav-label{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);font-weight:700;margin:20px 12px 8px}
#orgNavGroups > .nav-label:first-child,
.nav-label:first-of-type{margin-top:0}

.nav{display:flex;flex-direction:column;gap:2px}
.nav-btn{
  border:0;background:transparent;color:var(--text-dim);
  padding:10px 14px;text-align:left;font-weight:500;font-size:13.5px;
  display:flex;gap:12px;align-items:center;position:relative;
  border-radius:999px;
  transition:background-color .16s var(--ease), color .16s var(--ease);
}
.nav-btn::before{display:none}
.nav-btn .icon{display:block;width:17px;height:17px;flex:none;color:var(--text-faint);transition:color .16s var(--ease)}
.nav-btn:hover{color:var(--text);background:var(--surface-2)}
.nav-btn:hover .icon{color:var(--text-dim)}
.nav-btn.active{color:var(--accent);font-weight:600;background:var(--accent-soft)}
.nav-btn.active .icon{color:var(--accent)}
.nav-btn.active::after{display:none}
.nav-btn .count{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:#fff;background:var(--text-faint);border-radius:99px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px}

.sidebar-foot{margin-top:auto;padding-top:16px}
.side-profile{
  display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;
  border-radius:999px;background:var(--accent-soft);
}
.side-profile .avatar.sm{width:34px;height:34px;font-size:12px;border-width:0}
.side-profile-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.side-profile-text b{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.side-profile-text span{font-size:10.5px;color:var(--text-faint)}
.side-profile .icon-btn{
  width:28px;height:28px;background:transparent;color:var(--accent);
  border:1.5px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.side-profile .icon-btn:hover{background:var(--surface)}
.side-profile .icon-btn .icon{width:14px;height:14px}

.main{min-width:0;position:relative;z-index:1;display:flex;flex-direction:column;gap:18px}
.topbar{
  min-height:66px;border-radius:var(--radius-xl);
  display:flex;align-items:center;gap:20px;padding:0 26px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  position:sticky;top:18px;z-index:8;
}
.search{
  display:flex;align-items:center;gap:9px;
  background:transparent;border:1px solid var(--border-strong);border-radius:999px;
  padding:0 16px; height:40px; min-width:220px; flex:0 1 280px;
  transition:border-color .16s var(--ease), background-color .16s var(--ease);
}
.search:focus-within{border-color:var(--accent)}
.search .icon{width:14px;height:14px;color:var(--text-faint);flex:none}
.search input{background:transparent;border:0;outline:none;color:var(--text);height:100%;width:100%;font-size:13px}
.search input::placeholder{color:var(--text-faint)}

.topbar-spacer{flex:1}
.topbar-actions{display:flex;align-items:center;gap:18px}
.select-chip{
  appearance:none; background:transparent; border:1px solid var(--border-strong); color:var(--text-dim);
  border-radius:999px; padding:8px 26px 8px 14px; font-size:12px; font-weight:500; letter-spacing:.01em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239498a8' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  transition:border-color .16s var(--ease), color .16s var(--ease);
}
.select-chip:hover{color:var(--text);border-color:var(--text-faint)}

.avatar{
  width:36px;height:36px;border-radius:50%;flex:none;
  background:var(--accent);
  color:var(--accent-contrast); display:grid;place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:13px;
  background-size:cover; background-position:center; cursor:pointer;
  border:2px solid var(--surface);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .16s var(--ease), transform .16s var(--ease);
}
.avatar:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.avatar.has-photo{color:transparent}

.profile-chip{
  display:flex;align-items:center;gap:10px;border:0;background:transparent;
  padding:4px;border-radius:99px;
  transition:background-color .16s var(--ease);
}
.profile-chip:hover{background:var(--surface-2)}
.profile-chip-text{display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right}
.profile-chip-text b{font-size:12.5px;font-weight:700;white-space:nowrap}
.profile-chip-text span{font-size:10.5px;color:var(--text-faint)}

/* Plain, background-less icon buttons inside the topbar cluster — the
   reference never puts a filled circle behind bell/mode-toggle icons. */
.topbar-actions .icon-btn{
  width:auto;height:auto;background:transparent;color:var(--text-faint);
}
.topbar-actions .icon-btn:hover{color:var(--text);background:transparent}

.icon-btn{
  width:36px;height:36px;border-radius:50%;border:0;background:var(--surface-2);
  display:grid;place-items:center;color:var(--text-faint);position:relative;flex:none;
  transition:.16s var(--ease);
}
.icon-btn:hover{color:var(--text);background:var(--surface-3)}
.icon-btn .icon{width:17px;height:17px}
.notif-dot{
  position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 3px;border-radius:99px;
  background:var(--accent);color:#fff;font-size:9.5px;font-weight:700;display:grid;place-items:center;
  border:2px solid var(--surface);
}

.mobile-toggle{display:none}

.content{padding:0 0 24px;max-width:1320px;margin:0 auto;width:100%}
.page{display:none}
.page.active{display:block;animation:pageIn .3s var(--ease)}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media(max-width:640px){
  .profile-chip-text{display:none}
  .profile-chip{padding:0}
}

@media(max-width:1080px){
  .app{grid-template-columns:1fr;padding:14px;gap:14px}
  .sidebar{position:fixed;z-index:30;left:14px;top:14px;height:calc(100vh - 28px);transform:translateX(-115%);transition:transform .28s var(--ease);width:270px;box-shadow:var(--shadow-2)}
  .sidebar.open{transform:translateX(0)}
  .mobile-toggle{display:grid}
  .topbar{padding:0 16px;top:14px}
  .search{flex:1 1 100%;order:3;min-width:0}
  .sidebar-scrim.show{display:block}
}