/* ==========================================================================
   App shell — twee menubalken naast elkaar
   ┌───────────────────┬──────────────────────────────┐
   │ logo              │ workspace ▾ / module / pagina │  ← appbar (app-breed)
   ├──────┬────────────┼──────────────────────────────┤
   │ rail │  sidebar   │  main                        │
   │ (mod │  (module-  │                              │
   │ ules)│  navigatie)│                              │
   └──────┴────────────┴──────────────────────────────┘
   Workspace wissel je op één plek: in de appbar, als begin van het pad.
   De rail toont de modules van die workspace, de sidebar de navigatie van
   de actieve module. Beide zijn altijd zichtbaar (≥ 900px).
   ========================================================================== */

/* De app-pagina zelf scrolt nooit; alleen .view (en de sidebar) scrollen.
   Zo blijven de appbar en beide menubalken altijd staan. */
html:has(.shell), html:has(.shell) body { height: 100%; overflow: hidden; overscroll-behavior: none; }

.shell {
  display: grid;
  grid-template-columns: var(--rail-w) var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  height: 100vh; height: 100dvh;
  background: var(--bg);
}

/* --- Rail (modules) ------------------------------------------------------ */
.rail {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 0;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
}
.rail-sep { width: 28px; height: 1px; background: var(--border); margin: 8px 0; }
.rail-modules { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.rail-item {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--radius-md); background: none; border: 0; cursor: pointer;
  color: var(--fg-subtle);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-instant), transform var(--dur-fast) var(--ease-out);
}
.rail-item svg.lucide { width: 20px; height: 20px; }
.rail-item:hover { color: var(--fg); background: var(--surface-sunken); }
.rail-item:active { transform: scale(.92); }
.rail-item.is-active { color: var(--fg); background: transparent; }
.rail-item .dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--highlight); box-shadow: 0 0 0 2px var(--surface-2); }
/* Actief-indicator die tussen modules schuift */
.rail-indicator {
  position: absolute; z-index: 0; left: 0; top: 0; width: 40px; height: 40px;
  background: var(--surface-hover); border-radius: var(--radius-md);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-fast);
}
.rail-bottom { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* --- Sidebar (module-navigatie) ------------------------------------------ */
.sidebar {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
}
/* --- Appbar (app-breed) ------------------------------------------------- */
.appbar {
  grid-column: 1 / -1; position: relative; z-index: calc(var(--z-overlay) + 2);
  display: grid; grid-template-columns: calc(var(--rail-w) + var(--sidebar-w)) minmax(0, 1fr); align-items: center;
  height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--border);
}
/* Logo: beeldmerk gecentreerd boven de rail, woordmerk boven de sidebar */
/* Lockup: beeldmerk + woordmerk als één geheel. Het beeldmerk blijft optisch
   gecentreerd boven de rail; het woord volgt op een vaste, kleine afstand. */
.brand { display: flex; align-items: center; gap: 8px; height: 100%; padding-left: calc((var(--rail-w) - 24px) / 2); border-right: 1px solid var(--border); color: var(--fg); text-decoration: none; }
.brand-mark { display: block; flex-shrink: 0; width: 24px; height: 24px; }
/* Logo-animatie: zie motion.css (.vlogo) en assets/js/logo.js */
/* Woordmerk (SVG) op de kaphoogte van 17px tekst */
.brand-word { display: block; height: 12.5px; color: var(--fg); }
.brand-word .vwordmark { display: block; height: 100%; width: auto; }
.appbar-main { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0 20px 0 14px; }

/* Workspace-switcher: één plek, begin van het kruimelpad */
.ws-switch {
  display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 260px; height: 34px; padding: 0 8px 0 5px;
  border-radius: var(--radius-md); background: none; border: 0; cursor: pointer; text-align: left;
  transition: background-color var(--dur-instant), transform var(--dur-fast) var(--ease-out);
}
.ws-switch .ws-logo { --size: 24px; }
.ws-switch:hover, .ws-switch[aria-expanded="true"] { background: var(--surface-hover); }
.ws-switch:active { transform: scale(.97); }
.ws-switch .name { font-weight: 500; font-size: var(--text-sm); letter-spacing: var(--tracking-snug); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-switch .sub { font-size: var(--text-2xs); color: var(--fg-subtle); }
.ws-switch .chev { margin-left: 2px; color: var(--fg-subtle); width: 14px; height: 14px; }

.sidebar-module { padding: 18px 14px 10px; }
.sidebar-module h2 { font-size: var(--text-lg); font-weight: 600; letter-spacing: var(--tracking-snug); }

.sidebar-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px 16px; }
.sidebar-body::-webkit-scrollbar { width: 0; }
.nav-section + .nav-section { margin-top: 18px; }
.nav-section .t-overline { padding: 0 10px 6px; display: flex; align-items: center; justify-content: space-between; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px;
  font: 400 var(--text-sm)/1 var(--font-sans); color: var(--fg-muted); text-align: left;
  border-radius: var(--radius-md); background: none; border: 0; cursor: pointer;
  transition: background-color var(--dur-instant), color var(--dur-instant);
}
.nav-item svg.lucide { width: 17px; height: 17px; }
.nav-item:hover { background: var(--surface-sunken); color: var(--fg); }
.nav-item.is-active { background: var(--surface-hover); color: var(--fg); font-weight: 500; }
.nav-item .count { margin-left: auto; }
.nav-item .chev { margin-left: auto; width: 14px; height: 14px; color: var(--fg-subtle); transition: transform var(--dur-base) var(--ease-out); }
.nav-item[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Inklapbare subnavigatie met verticale lijn */
.nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.nav-sub.is-open { grid-template-rows: 1fr; }
.nav-sub > div { overflow: hidden; }
.nav-sub ul { position: relative; margin: 2px 0 4px 18px; padding-left: 12px; }
.nav-sub ul::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--border-strong); }
.nav-sub .nav-item { height: 30px; }

.sidebar-foot { padding: 10px; border-top: 1px solid var(--border); }

/* --- Main ---------------------------------------------------------------- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--fg-muted); min-width: 0; white-space: nowrap; }
.crumbs .sep { color: var(--fg-subtle); }
.crumbs .current { color: var(--fg); font-weight: 500; }
.view { flex: 1; min-height: 0; overflow-y: auto; view-transition-name: main-view; }
.view-inner { max-width: var(--content-max); margin: 0 auto; padding: 28px 32px 64px; }
.view-inner.is-wide { max-width: none; }  /* modules met wide: true (bijv. kanban) */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }

/* Module-wissel animaties (sidebar en view) */
.swap-out { animation: fade-out var(--dur-fast) var(--ease-in) both; }
.swap-in  { animation: slide-in-l var(--dur-slow) var(--ease-out) both; }

/* --- Responsive: < 900px wordt de sidebar een drawer --------------------- */
.sidebar-toggle { display: none; }
@media (max-width: 900px) {
  .shell { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .appbar { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .brand-word { display: none; }
  .appbar-main { padding: 0 12px 0 8px; }
  .rail { position: relative; z-index: calc(var(--z-overlay) + 1); }
  .crumbs > :not(.current):not(:nth-last-child(2)) { display: none; }
  .sidebar {
    position: fixed; z-index: var(--z-overlay); top: var(--topbar-h); bottom: 0; left: var(--rail-w); width: var(--sidebar-w);
    transform: translateX(-110%); box-shadow: var(--shadow-xl);
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .shell.sidebar-open .sidebar { transform: none; }
  .sidebar-toggle { display: inline-flex; }
  .view-inner { padding: 20px 16px 48px; }
}
@media (max-width: 560px) {
  :root { --rail-w: 56px; }
  .appbar .hide-sm { display: none; }
  .ws-switch { max-width: 150px; }
}