/* 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);
  /* A flex item's minimum is its content by default, so one long un-wrappable label (an Artifacts report title in a
     folder group, it-120.7) widened the whole drawer. The basis is the width; labels truncate inside it. */
  min-width: 0;
  /* 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). z 46 (it-190): above the contact quickview (45), whose popup can sit beside
     the rail — the flyout is drawn inside this context, so the drawer itself must out-rank the popup — and still below
     the dialog scrim (50) and the app bar (60). Ladder: static/css/components/quickview.css. */
  position: relative;
  z-index: 46;
  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 */
  /* NOTE: main is deliberately NOT a stacking context here. The GrapesJS trap below
     scopes that to .main--bleed only — making EVERY page's main a context trapped a
     regular page's fixed overlays (e.g. the SMS-template editor drawer, z-index 1200)
     BELOW the z-index:60 app bar, so their top edge became unclickable under it. */
}

/* 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). position:sticky makes
   the stacking context that TRAPS GrapesJS's internal z-indexes (up to ~9,999,994)
   inside main; z-index:1 keeps that context painting BELOW the z-index:60 app bar.
   Scoped to .main--bleed so a regular page's main is NOT a context (its fixed
   overlays must be free to cover the app bar). */
.app-shell main.main--bleed {
  position: sticky;
  top: var(--app-bar-h);
  z-index: 1;
}

.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;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* a long name (an Artifacts report title, it-120.7) truncates; it never widens the drawer */
}

/* 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: 47; /* it-190: over the contact quickview (45) and its own backdrop (46) */
    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: 46; /* it-190: over the contact quickview (45), under the drawer (47) */
    background: var(--md-sys-color-scrim);
    opacity: 0.32;
  }
}

/* it-80.8 — config-health counts in the nav. The component is the house .count-pill (floating.css);
 * only its PLACEMENT is a nav concern, which is all that belongs here. An earlier cut of this
 * iteration invented a .nav-badge with its own colours and radius — a fourth way to draw a small
 * tonal number, beside .count-pill and the .badge family. Deleted. */
.nav-item .count-pill,
.nav-group__header .count-pill { margin-left: auto; }
/* The chevron follows the count, so a count cannot push it off the row. */
.nav-group__header .count-pill + .nav-group__chevron { margin-left: 0.375rem; }

/* it-120.7 — an Artifacts folder group with nothing the viewer may see in it yet: a muted, non-link row. */
.nav-item--empty { color: var(--md-sys-color-on-surface-variant); font-style: italic; cursor: default; }
.nav-item--empty:hover { background: none; }