.shell-layout {
  display: grid;
  min-height: 100vh;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}
.shell-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.shell-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-sidebar-bg);
  border-inline-end: 1px solid var(--color-sidebar-border);
  overflow: hidden;
  transition: width .18s ease;
  height: 100vh;
  z-index: 40;
}
.shell-topbar {
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 24px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
  flex: 0 0 auto;
}
.topbar-start {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
html[dir="rtl"] .topbar-actions { flex-direction: row-reverse; }
html[dir="ltr"] .topbar-actions { flex-direction: row; }
.shell-content {
  flex: 1;
  overflow: auto;
  padding: 20px 24px 24px;
}
.content-container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}
.profile-layout { display: grid; gap: 12px; }
.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.profile-stack { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

/* ── Collapsed sidebar ──────────────────────────────────────── */
.shell-layout[data-sidebar-state="collapsed"] {
  grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr);
}
.shell-layout[data-sidebar-state="collapsed"] .shell-sidebar {
  width: var(--sidebar-collapsed-width);
}
.shell-layout[data-sidebar-state="collapsed"] .brand-copy,
.shell-layout[data-sidebar-state="collapsed"] .brand-separator,
.shell-layout[data-sidebar-state="collapsed"] .nav-group-title,
.shell-layout[data-sidebar-state="collapsed"] .nav-label,
.shell-layout[data-sidebar-state="collapsed"] .nav-badge,
.shell-layout[data-sidebar-state="collapsed"] .user-meta,
.shell-layout[data-sidebar-state="collapsed"] .user-actions { display: none; }
.shell-layout[data-sidebar-state="collapsed"] .brand { justify-content: center; padding-inline: 4px; }
.shell-layout[data-sidebar-state="collapsed"] .nav-item { justify-content: center; padding-inline: 0; }
.shell-layout[data-sidebar-state="collapsed"] .user-card {
  justify-content: center;
  padding-inline: 0;
  border-color: transparent;
}
html[dir="ltr"] .shell-layout:not([data-sidebar-state="collapsed"]) .sidebar-collapse-icon { transform: rotate(180deg); }
html[dir="rtl"] .shell-layout[data-sidebar-state="collapsed"] .sidebar-collapse-icon { transform: rotate(180deg); }

/* ── Login shell ────────────────────────────────────────────── */
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  /* Zaal navy backdrop — the sign-in page always renders on the zaal-navy theme,
     so --brand-primary resolves to the brand navy (#042552). */
  background: var(--brand-primary);
}

/* ── Mobile ─────────────────────────────────────────────────── */
.mobile-menu-button { display: none; }
.mobile-backdrop { display: none; }

@media (max-width: 720px) {
  .shell-layout { display: block; }
  .shell-main { height: auto; overflow: visible; }
  .shell-content { overflow: visible; }
  .shell-sidebar {
    position: fixed;
    inset-block: 0;
    inline-start: 0;
    width: var(--sidebar-width);
    height: 100%;
    transform: translateX(-100%);
    z-index: 50;
  }
  html[dir="rtl"] .shell-sidebar {
    inline-start: auto;
    inline-end: 0;
    transform: translateX(100%);
  }
  .shell-layout[data-mobile-drawer="open"] .shell-sidebar { transform: translateX(0); }
  .shell-layout[data-mobile-drawer="open"] .mobile-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--color-overlay-bg);
    z-index: 30;
  }
  .mobile-menu-button { display: inline-flex; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .shell-content { padding-inline: 14px; }
}