@import "variables.css";

/* Layout: top nav + sidebar + content */
.app {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100vh;
}

/* When no sidebar (e.g. not logged in) */
.app.no-sidebar {
  grid-template-columns: 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "header"
    "main";
}

/* Ensure header spans full width when sidebar is hidden */
.app.no-sidebar .header { grid-column: 1 / -1 }

.header {
  grid-area: header;
  background: linear-gradient(90deg, rgba(11,95,255,0.12), rgba(0,184,148,0.06));
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 20px; box-shadow: var(--shadow-1);
}

.sidebar {
  grid-area: sidebar;
  background: linear-gradient(180deg, var(--sidebar), var(--sidebar-contrast));
  color: #dbeafe;
  padding: 20px; 
}

.brand {
  display:flex; align-items:center; gap:12px; font-weight:700; color:#fff;
}

.nav {
  margin-top:18px;
}

.nav a {
  display:block; color: rgba(255,255,255,0.88); padding:10px; border-radius:6px; margin-bottom:6px;
}
.nav a:hover { background: rgba(255,255,255,0.04); }

.main {
  grid-area: main; padding: 28px;
}

.footer {
  text-align:center; padding:12px; color:var(--muted); font-size:13px;
}