/* ==========================================================================
   LIGHT UP OS — App Shell Layout
   ========================================================================== */

.app-shell{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  min-height:100vh;
}

/* ---------------- Sidebar ---------------- */
.sidebar{
  background:var(--surface);
  border-right:1px solid var(--border);
  padding:var(--sp-6) var(--sp-4);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  z-index:40;
}

.sidebar__brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 var(--sp-2) var(--sp-7);
}

.sidebar__brand-mark{
  width:32px; height:32px;
  border-radius:9px;
  background:var(--text-primary);
  color:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px;
  letter-spacing:-0.02em;
}

.sidebar__brand-text{
  font-weight:700;
  font-size:15px;
  letter-spacing:-0.01em;
  line-height:1.2;
}
.sidebar__brand-text span{
  display:block;
  font-weight:500;
  font-size:11px;
  color:var(--text-tertiary);
  letter-spacing:0.02em;
}

.nav{ display:flex; flex-direction:column; gap:2px; flex:1; }

.nav__item{
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 12px;
  border-radius:var(--r-md);
  font-size:14px;
  font-weight:500;
  color:var(--text-secondary);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  cursor:pointer;
  position:relative;
}
.nav__item svg{ width:18px; height:18px; opacity:0.85; }

.nav__item:hover{ background:var(--surface-hover); color:var(--text-primary); }

.nav__item.is-active{
  background:var(--text-primary);
  color:var(--bg);
}
.nav__item.is-active svg{ opacity:1; }

.nav__badge{
  margin-left:auto;
  font-size:11px;
  font-weight:700;
  background:var(--red);
  color:#fff;
  border-radius:var(--r-full);
  min-width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 5px;
}
.nav__item.is-active .nav__badge{ background:rgba(255,255,255,0.25); }

.sidebar__footer{
  border-top:1px solid var(--border);
  padding-top:var(--sp-4);
  margin-top:var(--sp-4);
}

.sidebar__user{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  border-radius:var(--r-md);
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease);
}
.sidebar__user:hover{ background:var(--surface-hover); }
.sidebar__user-name{ font-size:13px; font-weight:600; }
.sidebar__user-role{ font-size:11.5px; color:var(--text-tertiary); }

/* ---------------- Main ---------------- */
.main{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.topbar{
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  padding:0 var(--sp-7);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px) saturate(1.4);
  z-index:30;
}

.topbar__title{ font-size:16px; font-weight:700; letter-spacing:-0.01em; }
.topbar__sub{ font-size:12.5px; color:var(--text-tertiary); margin-top:1px; }

.topbar__search{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-full);
  padding:8px 14px;
  width:280px;
  color:var(--text-tertiary);
  transition:border-color var(--dur-fast) var(--ease), width var(--dur-base) var(--ease);
}
.topbar__search:focus-within{ border-color:var(--border-strong); }
.topbar__search svg{ width:16px; height:16px; }
.topbar__search input{
  border:none; background:none; outline:none; width:100%;
  font-size:13.5px; color:var(--text-primary);
}
.topbar__search input::placeholder{ color:var(--text-tertiary); }

.topbar__actions{ display:flex; align-items:center; gap:8px; }

.icon-btn{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-full);
  color:var(--text-secondary);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  position:relative;
}
.icon-btn:hover{ background:var(--surface-hover); color:var(--text-primary); }
.icon-btn svg{ width:19px; height:19px; }

.icon-btn__dot{
  position:absolute;
  top:8px; right:8px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--red);
  border:2px solid var(--bg);
}

.content{
  flex:1;
  padding:var(--sp-7);
  max-width:var(--content-max);
  width:100%;
  margin:0 auto;
}

.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:var(--sp-7);
  gap:var(--sp-4);
  flex-wrap:wrap;
}

.page-head__eyebrow{
  font-size:12.5px;
  font-weight:600;
  color:var(--text-tertiary);
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-bottom:6px;
}

/* ---------------- Grids ---------------- */
.grid{ display:grid; gap:var(--sp-5); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-projects{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.grid-team{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.grid-split{ grid-template-columns:2fr 1fr; }

/* ---------------- Mobile ---------------- */
.mobile-topbar{ display:none; }
.sidebar__close{ display:none; }
.sidebar-scrim{ display:none; }

@media (max-width: 1100px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-split{ grid-template-columns:1.6fr 1fr; }
}

@media (max-width: 980px){
  .app-shell{ grid-template-columns:1fr; }
  .sidebar{
    position:fixed;
    left:0; top:0;
    transform:translateX(-100%);
    width:270px;
    box-shadow:var(--shadow-lg);
    transition:transform var(--dur-base) var(--ease);
  }
  .sidebar.is-open{ transform:translateX(0); }
  .sidebar__close{ display:flex; margin-left:auto; }
  .topbar{ display:none; }
  .mobile-topbar{
    display:flex; align-items:center; justify-content:space-between;
    height:60px; padding:0 var(--sp-5);
    border-bottom:1px solid var(--border);
    position:sticky; top:0; background:var(--bg); z-index:20;
  }
  .sidebar-scrim{
    display:none;
    position:fixed; inset:0; background:rgba(0,0,0,0.35);
    z-index:39;
  }
  .sidebar-scrim.is-open{ display:block; }
  .content{ padding:var(--sp-5); }
  .grid-2,.grid-3,.grid-4,.grid-split{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  .topbar__search{ display:none; }
  .stat-card__value{ font-size:26px; }
  .content{ padding:var(--sp-4); }
  .page-head{ flex-direction:column; align-items:flex-start; gap:var(--sp-3); }
}