/* it-64 — left navigation drawer + app shell.
   Replaces the old horizontal nav.site-header__nav (rules removed from header.css).
   Theme-aware via MD3 tokens; the only raw values are the two drawer widths. */

:root {
  --nav-w: 264px;      /* expanded drawer */
  --nav-rail-w: 72px;  /* collapsed rail */
}

.app-root { display: block; }

/* Header + shell stack vertically; the shell is a flex row: drawer | main.
   min-height fills the viewport below the app bar so the drawer runs full height
   even on a short page; align-items:stretch lets it match a taller main. */
.app-shell {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - var(--app-bar-h));
}

/* --- Drawer ------------------------------------------------------------- */

.nav-drawer {
  flex: 0 0 var(--nav-w);
  /* Relative (not sticky) + no internal scroll: the drawer sits in normal flow and
     its height feeds the ONE document scroll, same as main. A nav taller than the
     viewport lengthens the page instead of growing a nested scrollbar. `relative`
     keeps a positioning context so the rail hover-flyout (abs, z:50) still wins over
     main (its own stacking context, z:1). */
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  padding: 0.75rem 0.6rem;
  background: var(--md-sys-color-surface-container-low);
  border-right: 1px solid var(--md-sys-color-outline-variant);
  transition: flex-basis var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
}

.app-shell main {
  flex: 1 1 auto;
  min-width: 0; /* let wide tables / the email canvas shrink instead of blowing out the row */
  /* Make main its own stacking context so a full-bleed tool's internal z-indexes
     (grapesjs uses up to ~9,999,994) stay TRAPPED inside main instead of escaping
     into the app-shell layer and painting over the nav drawer / rail flyout. The
     drawer then only needs a z-index just above main — no arms race. */
  position: relative;
  z-index: 1;
}

/* A full-bleed editor is a fixed-height pane (base.css: height 100vh - app-bar-h).
   Pin it to the viewport, below the sticky app bar, so a nav drawer TALLER than
   one screen scrolls past it on the one document scroll instead of shoving the
   editor out of view and leaving an empty gutter beside the nav's tail. The nav
   keeps its exact behavior (normal flow, no internal scrollbar); only the editor
   is pinned. No-op when the nav fits (the page doesn't scroll). z-index:1 carries
   from the rule above — sticky + z-index still makes the stacking context that
   traps GrapesJS's internal z-indexes inside main. */
.app-shell main.main--bleed {
  position: sticky;
  top: var(--app-bar-h);
}

.nav-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Rows: leaf links, group headers, child links, and the collapse toggle all
   share one set of row metrics. */
.nav-item,
.nav-group__header,
.nav-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  height: 44px;
  padding: 0 0.75rem;
  border: none;
  background: none;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
              color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.nav-item:hover,
.nav-group__header:hover,
.nav-toggle:hover {
  color: var(--md-sys-color-on-surface);
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
  text-decoration: none;
}

/* The collapse toggle's only bespoke metric — a little breathing room below it. */
.nav-toggle { margin-bottom: 0.35rem; }

.nav-item__icon {
  font-size: 22px;
  flex: 0 0 auto;
}
.nav-item__label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active row — matches the contact-type switcher's .is-active language. */
.nav-item.is-active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-weight: 600;
}

/* Child rows sit under a group header — indented, no icon, slightly shorter.
   Class-driven (not x-show) so a rail :hover flyout can override the display,
   which an inline x-show display:none could not. */
.nav-group__items {
  display: none;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0.1rem 0 0.25rem;
}
.nav-group.is-open > .nav-group__items { display: flex; }
.nav-item--child {
  height: 38px;
  padding-left: 2.9rem; /* align labels under the header label (icon + gap) */
}

/* Group header chevron rotates when open. */
.nav-group__chevron {
  font-size: 20px;
  flex: 0 0 auto;
  transition: transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.nav-group.is-open .nav-group__chevron { transform: rotate(180deg); }

/* App-bar hamburger — the modal-drawer opener; mobile-only (shown in the query
   below). Desktop keeps the drawer always present, so its toggle is in the sidebar. */
.nav-menu-btn { display: none; color: var(--md-sys-color-on-surface); }

/* Off-canvas backdrop — only used by the mobile drawer (shown in the query below). */
.nav-backdrop { display: none; }

/* --- Rail + flyout: DESKTOP ONLY ---------------------------------------
   Scoped to >=961px on purpose: below that the drawer is off-canvas (expanded
   layout), so none of the rail/hover-flyout rules must apply — otherwise a
   persisted <html>.nav-rail would leak the flyout onto touch and hide open
   groups' items on mobile. */
@media (min-width: 961px) {
  .nav-rail .nav-drawer {
    flex-basis: var(--nav-rail-w);
    overflow: visible; /* let the hover flyout escape; the rail is short, nothing scrolls */
  }
  .nav-rail .nav-item__label,
  .nav-rail .nav-group__chevron { display: none; }
  .nav-rail .nav-group__items { display: none; }
  .nav-rail .nav-item,
  .nav-rail .nav-group__header,
  .nav-rail .nav-toggle {
    justify-content: center;
    padding: 0;
    gap: 0;
  }

  /* Hover a rail group icon → its children pop out beside the rail (the
     recognizable rail pattern). Click still expands the drawer (touch fallback). */
  .nav-rail .nav-group { position: relative; }
  .nav-rail .nav-group.is-open > .nav-group__items { display: none; } /* no inline-open in rail */
  .nav-rail .nav-group:hover > .nav-group__items {
    display: flex;
    position: absolute;
    left: calc(100% + 6px);
    top: 0;
    min-width: 210px;
    margin: 0;
    padding: 0.4rem;
    z-index: 50;
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-medium);
    box-shadow: var(--md-sys-elevation-level2);
  }
  /* Invisible bridge across the 6px gap so moving icon→flyout keeps :hover alive. */
  .nav-rail .nav-group:hover > .nav-group__items::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 0;
    width: 6px;
    height: 100%;
  }
  /* Flyout children render as normal left-aligned rows (undo the rail centering)
     with their labels re-shown (a child row's only content). */
  .nav-rail .nav-group:hover > .nav-group__items .nav-item--child {
    justify-content: flex-start;
    padding: 0 0.6rem;
    height: 36px;
    gap: 0.5rem;
  }
  .nav-rail .nav-group:hover > .nav-group__items .nav-item__label { display: block; }
}

/* --- Off-canvas overlay: MOBILE (<=960px) ------------------------------ */
@media (max-width: 960px) {
  .nav-drawer {
    position: fixed;
    top: var(--app-bar-h);
    left: 0;
    bottom: 0;
    max-height: none;
    z-index: 40;
    flex-basis: var(--nav-w);
    transform: translateX(-100%);
    transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
    box-shadow: var(--md-sys-elevation-level2);
  }
  /* The app-bar hamburger opens the off-canvas drawer; the in-sidebar toggle is
     redundant there. */
  .nav-menu-btn { display: inline-flex; }
  .nav-toggle { display: none; }

  .app-shell.nav-open .nav-drawer { transform: translateX(0); }
  .app-shell.nav-open .nav-backdrop {
    display: block;
    position: fixed;
    inset: var(--app-bar-h) 0 0 0;
    z-index: 39;
    background: var(--md-sys-color-scrim);
    opacity: 0.32;
  }
}