/* layout.css — app shell: NO top bar. Full-height right sidebar + centered main.
 * #app classes set by index.js: (default) dashboard; .no-sidebar legacy/login;
 * .sidebar-open mobile drawer. WXG: flat white panels, square corners. */

:root {
  --header-h: 0px;            /* top bar removed */
  --sidebar-w: 300px;
}

/* ── Header container collapsed to nothing (only hosts the mobile menu button) ── */
#headerContainer { position: fixed; top: 0; right: 0; left: 0; height: 0; z-index: 1100; }

/* hamburger — floating, mobile only — opens the sidebar (square WXG tile) */
.sidebar-toggle {
  display: none; position: fixed; top: 12px; right: 12px; z-index: 1100;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: var(--paper, #fff); color: var(--text, #202020);
  border: 1px solid var(--border, #D9D9D9); border-radius: 0;
  font-size: 1.3em; cursor: pointer; line-height: 1;
  box-shadow: var(--shadow-2, 0 2px 10px rgba(0,0,0,0.08));
}
.sidebar-toggle:hover { border-color: var(--wxg-amber, #FCAF17); }

/* ── Main ── centered vertically + horizontally; gap on the right for the sidebar */
#mainContent {
  margin-top: 0; margin-right: var(--sidebar-w);
  display: flex; min-height: 100vh; padding: 32px;
}

/* ── Sidebar (fixed, full height, physical RIGHT side) ── */
.sidebar {
  position: fixed; top: 0; right: 0; left: auto;
  width: var(--sidebar-w); height: 100vh;
  overflow-y: auto; z-index: 900;
  background: var(--paper, #fff); border-left: 1px solid var(--divider, #E9E9E9);
  box-shadow: -2px 0 12px rgba(0,0,0,0.04);
  transition: transform .25s ease;
}

/* ── Legacy / login mode: no sidebar ── */
#app.no-sidebar #mainContent { margin-right: 0; }
#app.no-sidebar .sidebar { display: none; }
#app.no-sidebar .sidebar-toggle { display: none; }

/* ── Responsive: sidebar → off-canvas drawer (slides in from the right) ── */
@media (max-width: 768px) {
  #mainContent { margin-right: 0; padding: 64px 12px 16px; }
  .sidebar-toggle { display: inline-flex; }
  .sidebar { transform: translateX(100%); }
  #app.sidebar-open .sidebar { transform: none; box-shadow: var(--shadow-3, 0 6px 24px rgba(0,0,0,0.12)); }
}