.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--header-height) 1fr var(--footer-height);
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
  min-height: 100vh;
  min-height: 100dvh;       /* iOS Safari: usa il viewport "dinamico" (esclude URL bar) */
}

#header-mount  { grid-area: header; }
#sidebar-mount { grid-area: sidebar; }
#footer-mount  { grid-area: footer; }
.main          { grid-area: main; overflow-y: auto; padding: var(--space-6); }

/* HEADER */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 var(--space-6);
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
}
.header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
}
.header__brand:hover {
  color: inherit;
  text-decoration: none;
}
.header__brand:hover .header__title { color: var(--color-accent); }
.header__brand-logo { display: block; }
/* Toggle ink/white in base al tema: in light si mostra il mark ink (scuro),
   in dark il mark white. Default = light, dark sovrascrive. */
:root[data-theme="dark"]  .header__brand-logo--light { display: none; }
:root[data-theme="light"] .header__brand-logo--dark  { display: none; }
.header__title {
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* SIDEBAR */
.sidebar {
  display: flex;
  flex-direction: column;
  background: var(--color-sidebar);
  color: var(--color-sidebar-text);
  padding: var(--space-5) 0;
  height: 100vh;
  height: 100dvh;           /* iOS Safari */
  position: sticky;
  top: 0;
}
.sidebar__logo {
  padding: 0 var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;     /* è un <a href="index.html">, niente underline */
}
.sidebar__logo:hover { text-decoration: none; }
.sidebar__logo-mark { display: block; }
.sidebar__logo span {
  font-weight: 700;
  font-size: 16px;
  color: #C8D8EE;     /* branding: grigio-azzurro fisso sulla sidebar scura (sia light che dark) */
  letter-spacing: -0.02em;
}
.sidebar__nav {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sidebar__bottom {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: var(--space-3);
}
.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  color: var(--color-sidebar-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sidebar__link:hover {
  background: rgba(255,255,255,0.04);
  color: var(--color-sidebar-active);
  text-decoration: none;
}
.sidebar__link.is-active {
  color: var(--color-sidebar-active);
  background: rgba(36, 114, 232, 0.12);
  border-left-color: var(--color-accent);
}
.sidebar__link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* FOOTER */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--footer-height);
  padding: 0 var(--space-6);
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-text-muted);
}
.footer__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.footer__sep {
  color: var(--color-text-disabled);
}

/* MAIN container */
.page {
  max-width: 1100px;
  margin: 0;
}
.page__title {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}
.page__subtitle {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

/* WELCOME card (index) */
.welcome {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.welcome h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.welcome p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}
.welcome p:last-child { margin-bottom: 0; }

/* Su mobile la sidebar diventa overlay (vedi .header__sidebar-toggle in components.css).
   Il layout grid passa a 1 colonna; la sidebar è position:fixed e slide-in al toggle. */
@media (max-width: 880px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "footer";
  }
  /* La sidebar resta nel DOM ma fuori dal grid: la riposizioniamo absolute/fixed in components.css. */
}