/* App shell */
.app{
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
}

.app__sidebar{grid-area: sidebar; position: sticky; top: 0; height: 100vh; z-index: var(--z-sidebar);}
.app__header{grid-area: header; position: sticky; top: 0; z-index: var(--z-header);}
.app__main{grid-area: main; padding: var(--space-7) var(--space-7) var(--space-8);}

/* Sidebar */
.sidebar{
  height:100%;
  padding: var(--space-6);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-right: 1px solid var(--border);
}
.sidebar__brand{
  display:flex;
  align-items:center;
  gap: var(--space-3);
  font-weight: 700;
  letter-spacing: .2px;
}
.sidebar__logo{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--info));
  box-shadow: var(--shadow-2);
}
.sidebar__nav{margin-top: var(--space-6); display:flex; flex-direction:column; gap: var(--space-2);}
.sidebar__section{margin-top: var(--space-5); font-size: var(--fs-1); color: var(--muted-2); text-transform: uppercase; letter-spacing: .08em;}
.sidebar__link{
  display:flex;
  align-items:center;
  gap: var(--space-3);
  padding: .65rem .85rem;
  border-radius: 12px;
  text-decoration:none;
  color: var(--muted);
}
.sidebar__link[aria-current="page"], .sidebar__link:hover{
  color: var(--text);
  background: rgba(255,255,255,.05);
}
.sidebar__icon{width: 18px; height: 18px; opacity: .85}

/* Header */
.header{
  height: var(--header-h);
  display:flex;
  align-items:center;
  gap: var(--space-4);
  padding: 0 var(--space-7);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header__left{display:flex; align-items:center; gap: var(--space-3); flex: 1; min-width: 0;}
.header__title{font-size: var(--fs-4); font-weight: 700; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.header__right{display:flex; align-items:center; gap: var(--space-3);}

/* Mobile sidebar */
.burger{
  display:none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
}

.overlay{display:none}

@media (max-width: 980px){
  .app{grid-template-columns: 1fr; grid-template-areas: "header" "main";}
  .app__sidebar{position: fixed; left: 0; top: 0; width: min(92vw, var(--sidebar-w)); transform: translateX(-110%); transition: transform .2s ease; background: var(--bg);}
  .app__main{padding: var(--space-6) var(--space-5) var(--space-8);}
  .header{padding: 0 var(--space-5);}
  .burger{display:inline-flex; align-items:center; justify-content:center;}

  .app.is-sidebar-open .app__sidebar{transform: translateX(0); box-shadow: var(--shadow-1);}
  .app.is-sidebar-open .overlay{display:block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: var(--z-overlay);}
}

@media (max-width: 560px){
  .app__main{padding: var(--space-5) var(--space-4) var(--space-7);}
  .header{gap: var(--space-3);}
  .header__title{font-size: var(--fs-3);}
  .page__top{align-items:flex-start;}
}

/* Page layout */
.page{display:flex; flex-direction:column; gap: var(--space-6);}
.page__top{display:flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between;}
.page__actions{display:flex; gap: var(--space-3); flex-wrap: wrap;}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-5);
}
.col-12{grid-column: span 12}
.col-8{grid-column: span 8}
.col-6{grid-column: span 6}
.col-4{grid-column: span 4}
.col-3{grid-column: span 3}

@media (max-width: 980px){
  .col-8, .col-6, .col-4, .col-3{grid-column: span 12}
}