/* ============================================================
   Mr.PetzAI — Executive Campus 2.0 — Layout
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{color:var(--night-blue);font-weight:700;line-height:1.2;margin:0;letter-spacing:-.01em;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}

.serif{font-family:var(--serif);}
.mono{font-family:var(--mono);}

::selection{background:var(--cyan-tint);color:var(--night-blue);}

/* scrollbar, subtle */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#CBD7E1;border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:#AFC0CD;}

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

/* ===================== SIDEBAR ===================== */
.sidebar{
  background:linear-gradient(180deg,var(--sidebar-from) 0%,var(--sidebar-to) 100%);
  color:var(--sidebar-text);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  box-shadow:var(--shadow-sidebar);
  z-index:20;
}
.sidebar-brand{
  display:flex;align-items:center;gap:12px;
  padding:28px 24px 22px;
}
.sidebar-brand img{height:30px;width:auto;}

.sidebar-nav{flex:1;overflow-y:auto;padding:8px 14px 14px;}
.sidebar-group-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sidebar-text-dim);padding:14px 12px 8px;
}
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;margin:2px 0;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:500;color:var(--sidebar-text);
  position:relative;
  transition:background .15s ease,color .15s ease;
}
.nav-item .nav-ico{
  width:18px;height:18px;flex:none;display:flex;align-items:center;justify-content:center;
  opacity:.85;
}
.nav-item .nav-ico svg{width:18px;height:18px;stroke:currentColor;}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-item.is-active{
  background:var(--sidebar-active-bg);
  color:#fff;
}
.nav-item.is-active::before{
  content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;
  background:var(--cyan);border-radius:0 3px 3px 0;
}
.nav-item .nav-label{flex:1;}
.nav-badge{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.08);color:var(--sidebar-text-dim);
  padding:3px 7px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.12);
}
.sidebar-divider{height:1px;background:var(--sidebar-line);margin:10px 12px;}

.sidebar-footer{padding:14px 14px 20px;border-top:1px solid var(--sidebar-line);}

/* ===================== TOPBAR ===================== */
.topbar{
  height:var(--topbar-h);
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:20px;
  padding:0 36px;
  position:sticky;top:0;z-index:10;
}
.topbar-search{
  flex:1;max-width:420px;
  display:flex;align-items:center;gap:10px;
  background:var(--bg-soft);border:1px solid transparent;
  border-radius:var(--r-pill);padding:10px 16px;
  transition:border-color .15s ease,background .15s ease;
}
.topbar-search svg{width:16px;height:16px;stroke:var(--muted);flex:none;}
.topbar-search input{
  border:none;background:transparent;outline:none;width:100%;
  font-family:var(--sans);font-size:13.5px;color:var(--text);
}
.topbar-search input::placeholder{color:var(--muted);}
.topbar-search:focus-within{background:#fff;border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-tint);}

.topbar-spacer{flex:1;}

.topbar-icon-btn{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;position:relative;flex:none;
  transition:border-color .15s ease,background .15s ease;
}
.topbar-icon-btn:hover{background:var(--bg-soft);}
.topbar-icon-btn svg{width:18px;height:18px;stroke:var(--night-blue);}
.notif-dot{
  position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;
  background:var(--cyan);border:1.5px solid #fff;
}

.topbar-user{display:flex;align-items:center;gap:10px;padding-left:8px;border-left:1px solid var(--line);}
.avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--night-blue),var(--petrol));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:700;font-size:14px;flex:none;
}
.topbar-user .u-name{font-size:13.5px;font-weight:600;color:var(--night-blue);}
.topbar-user .u-role{font-size:11.5px;color:var(--muted);}

/* ===================== MAIN ===================== */
.main{min-width:0;}
.content{
  max-width:var(--content-max);
  margin:0 auto;
  padding:40px 36px 80px;
}
.page-head{margin-bottom:32px;}
.page-eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--petrol);font-weight:600;margin-bottom:8px;display:block;
}
.page-title{font-size:30px;}
.page-title.serif{font-family:var(--serif);}
.page-sub{color:var(--muted);font-size:14.5px;margin-top:8px;max-width:64ch;}

.grid{display:grid;gap:24px;}
.grid-2{grid-template-columns:2fr 1fr;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}

@media (max-width:1180px){
  .app-shell{grid-template-columns:1fr;}
  .sidebar{display:none;}
}