/* ============================================================
   Shell layout: sidebar + topbar + content
   ============================================================ */
.app{position:relative;z-index:1;display:grid;grid-template-columns:264px 1fr;min-height:100vh}
.sidebar-scrim{position:fixed;inset:0;background:var(--scrim);z-index:25;display:none}

.sidebar{
  background:var(--surface);
  border-right:1px solid var(--border);
  box-shadow:4px 0 24px rgba(0,0,0,.12);
  padding:30px 22px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
  display:flex; flex-direction:column;
}
.brand{display:flex;align-items:center;gap:12px;padding:0 0 24px;border-bottom:1px solid var(--border);margin-bottom:26px}
.brand-mark{
  width:34px;height:34px;flex:none;border-radius:var(--radius-sm);
  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:18px;font-weight:600;letter-spacing:-.01em;line-height:1.1}
.brand-org{font-size:10.5px;color:var(--text-faint);letter-spacing:.05em;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;text-transform:uppercase}

.nav-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);font-weight:600;margin:26px 2px 10px;border-top:1px solid var(--border);padding-top:18px}
#orgNavGroups > .nav-label:first-child,
.nav-label:first-of-type{margin-top:0;border-top:0;padding-top:0}

.nav{display:flex;flex-direction:column;gap:1px;counter-reset:navidx}
.nav-btn{
  counter-increment:navidx;
  border:0;background:transparent;color:var(--text-dim);
  padding:9px 2px;text-align:left;font-weight:500;font-size:13.5px;
  display:flex;gap:11px;align-items:center;position:relative;
  border-radius:0;
  transition:color .16s var(--ease), padding-left .16s var(--ease);
}
.nav-btn::before{
  content:counter(navidx,decimal-leading-zero);
  font-family:var(--font-mono);font-size:10.5px;color:var(--text-faint);
  flex:none;width:18px;transition:color .16s var(--ease);
}
.nav-btn .icon{display:none}
.nav-btn:hover{color:var(--text);padding-left:5px}
.nav-btn.active{color:var(--text);font-weight:700}
.nav-btn.active::before{color:var(--accent)}
.nav-btn.active::after{
  content:"";position:absolute;right:2px;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--accent);
}
.nav-btn .count{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--text-faint)}

.sidebar-foot{margin-top:auto;padding-top:22px;border-top:1px solid var(--border)}
.theme-row{display:flex;gap:8px;padding:2px}
.theme-dot{
  width:20px;height:20px;border-radius:50%;border:1px solid var(--border-strong);
  cursor:pointer;position:relative;flex:none;
}
.theme-dot[data-theme-opt="ink"]{background:#141210}
.theme-dot[data-theme-opt="parchment"]{background:#f4ecda}
.theme-dot[data-theme-opt="slate"]{background:#12161d}
.theme-dot.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}

.main{min-width:0;position:relative;z-index:1}
.topbar{
  min-height:70px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:20px;padding:0 34px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(16px);
  box-shadow:0 6px 20px rgba(0,0,0,.1);
  position:sticky;top:0;z-index:8;
}
.search{
  display:flex;align-items:center;gap:9px;
  border-bottom:1px solid var(--border);
  padding:0 2px; height:38px; min-width:220px; flex:0 1 280px;
  transition:border-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:0; border-bottom:1px solid var(--border); color:var(--text-dim);
  border-radius:0; padding:8px 18px 8px 0; font-size:12px; font-weight:500; letter-spacing:.02em;
  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='%237d7362' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right center;
  transition:border-color .16s var(--ease), color .16s var(--ease);
}
.select-chip:hover{color:var(--text);border-color:var(--border-strong)}

.avatar{
  width:34px;height:34px;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:1px solid var(--border-strong);
  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}

.icon-btn{
  width:34px;height:34px;border-radius:50%;border:0;background:transparent;
  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-2)}
.icon-btn .icon{width:17px;height:17px}
.notif-dot{
  position:absolute;top:2px;right:2px;min-width:7px;height:7px;padding:0;border-radius:99px;
  background:var(--neg);color:transparent;font-size:0;display:block;
  border:1.5px solid var(--bg);
}

.mobile-toggle{display:none}

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

@media(max-width:1080px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;z-index:30;left:0;top:0;transform:translateX(-104%);transition:transform .28s var(--ease);width:280px;box-shadow:var(--shadow-2)}
  .sidebar.open{transform:translateX(0)}
  .mobile-toggle{display:grid}
  .topbar{padding:0 18px}
  .search{flex:1 1 100%;order:3;min-width:0}
  .content{padding:22px 18px 50px}
  .sidebar-scrim.show{display:block}
}