/* aita: layout — app shell, sidebar, top header, main content frame. */

@layer layout {

/* App shell: dark left rail, flat stroke icons; selection = raised slate tile + right-edge depth */
.app-shell { display: flex; min-height: 100vh; width: 100%; align-items: stretch; background: var(--color-bg-app) }
.app-sidebar {
  position: relative;
  /* Above .app-top-header (900) and main content; below modals (10002+) */
  z-index: 2000;
  pointer-events: auto;
  /* Default = EXPANDED. Collapsed (icon-only) is opt-in via .collapsed.
   * MODEC layout: 280px wide with generous spacing. */
  width: 280px;
  flex-shrink: 0;
  background: var(--color-bg-sidebar);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 0 8px;
  border-right: var(--border-width-1) solid var(--color-divider);
  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.04);
  transition: width 0.2s ease;
  overflow: visible;
}
.app-sidebar.collapsed { width: 72px; }
.app-sidebar.collapsed .sidebar-nav { overflow: hidden }

/* ── Brand block (top of sidebar) — MODEC compact header layout.
 * Reference: Tag Extractor / DIGITAL & ANALYTICS pattern (Image #59).
 * Locked to 64px height so the brand/sidebar divider lines up horizontally
 * with the .app-top-header divider (also 64px). Vertical padding is 0;
 * `align-items: center` centers the content within the 64px box.
 * Sticky-pinned to viewport top so it stays anchored alongside
 * .app-top-header when the page scrolls — same 64px height, same top:0
 * anchor, so the divider lines stay aligned during scroll. */
.sidebar-brand {
  position: sticky;
  top: 0;
  z-index: 50;            /* above sidebar nav items, below .app-top-header (900) */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 64px;
  padding: 0 var(--space-4);
  background: var(--color-bg-sidebar);   /* opaque cover for nav scrolling beneath */
  border-bottom: var(--border-width-1) solid var(--color-divider);
  margin-bottom: 0;
  box-sizing: border-box;
}
.sidebar-brand-link { display: inline-flex; text-decoration: none; }
.sidebar-brand-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
  transition: opacity 0.15s ease;
}
.sidebar-brand-title {
  font-family: "Noto Sans", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: 0;
  line-height: 1.3;
  white-space: nowrap;
}
.sidebar-brand-subtitle {
  font-family: "Noto Sans", sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: 0.1em;
  line-height: 1.4;
  white-space: nowrap;
  text-transform: uppercase;
}
.app-sidebar.collapsed .sidebar-brand-text { display: none; }
.app-sidebar.collapsed .sidebar-brand {
  justify-content: center;
  padding: var(--space-4) var(--space-3);
}

/* Keep .sidebar-logo-link / .sidebar-logo-img selectors functional for legacy CSS/JS hooks */
.sidebar-logo-link:hover { background: transparent; }
.sidebar-logo-img { display: block; object-fit: contain; }
.sidebar-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  padding: 0;
}
/* static: avoid global `button { position: relative }` stacking quirks over the flyout.
 * Default (expanded) shows icon + label + chevron in a left-aligned row.
 * `.app-sidebar.collapsed button.sidebar-nav-item` overrides to the icon-only centered look. */
.app-sidebar button.sidebar-nav-item {
  position: static;
  width: 100%;
  min-height: 56px;
  height: auto;
  padding: 14px 20px;
  border: none;
  border-radius: 0;
  /* OPAQUE bg (not transparent) so it hides the open-group blue line that
   * sits behind every parent rail. The line is drawn from top: 0 to bottom: 0
   * of the group; the button is in flow on top of it and covers the segment
   * behind it. Hover/active state still override with their own colors. */
  background: var(--color-bg-sidebar);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  box-shadow: none;
  /* MODEC menu typography: 'Noto Sans' / 400 / 1rem / 1.5 / 0.15px */
  font-family: "Noto Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.15px;
}
/* Parent rails (idle): no bg (line is now per-item, not parent-level, so
 * the button no longer needs to "hide" anything). */
.app-sidebar button.sidebar-nav-item { background: transparent; }
.app-sidebar.collapsed button.sidebar-nav-item {
  justify-content: center;
  padding: 10px 0;
  gap: 0;
}
/* MODEC look (white sidebar): muted-grey idle icons, neutral-200 hover, pale-brand selection */
.app-sidebar button.sidebar-nav-item:hover {
  color: var(--color-text-primary);
  background: var(--c-neutral-200);
}
/* Selected: pale brand tint with dark text — no accent stripe (the open
 * sub-flyout's blue left line carries the "current section" cue instead). */
.app-sidebar button.sidebar-nav-item.active {
  color: var(--color-text-primary);
  background: var(--c-brand-50);
  box-shadow: none;
}
.app-sidebar button.sidebar-nav-item.active:hover {
  color: var(--color-text-primary);
  background: var(--c-brand-100);
}
.sidebar-nav-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sidebar nav: hover flyout for every item (large type, aligned with icon center) */
.sidebar-nav-group {
  position: relative;
  width: 100%;
  z-index: 2;
}
/* Invisible strip past the rail keeps :hover on the group while crossing the gap to the flyout
   (otherwise the menu vanishes and the first “click” hits the main pane). Narrow to limit overlap. */
.sidebar-nav-group::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  width: 14px;
  z-index: 1;
  pointer-events: none;
}
.sidebar-nav-group:hover::after,
.sidebar-nav-group.sidebar-nav-group--open::after {
  pointer-events: auto;
}
.sidebar-nav-group:hover {
  z-index: 1200;
}
.sidebar-nav-flyout {
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  min-width: min-content;
  max-width: min(calc(100vw - 56px), 22rem);
  padding: 10px 0;
  margin: 0;
  list-style: none;
  background: var(--color-bg-surface);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  border: var(--border-width-1) solid var(--color-divider);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
.sidebar-nav-flyout.sidebar-nav-flyout--single {
  padding: 8px 0;
}
/* Hover or click-pinned (JS adds --open) — both must receive clicks */
.sidebar-nav-group:hover .sidebar-nav-flyout,
.sidebar-nav-group.sidebar-nav-group--open .sidebar-nav-flyout {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* After navigating from a rail item, hide hover flyout until pointer leaves — does not apply when menu is pinned open */
.sidebar-nav-group.sidebar-nav-group--flyout-suppressed:hover:not(.sidebar-nav-group--open) .sidebar-nav-flyout {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.app-sidebar .sidebar-nav-flyout-item {
  display: block;
  box-sizing: border-box;
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 0;
  text-align: left;
  padding: 12px 20px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-primary);
  text-decoration: none;                       /* the items are now <a>; suppress underline */
  /* MODEC menu typography: 'Noto Sans' / 400 / 14px / 1.5 / 0.15px */
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.15px;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* MODEC look (white flyout): neutral-200 hover + pale-brand selection with dark text */
.app-sidebar .sidebar-nav-flyout-item:hover {
  background: var(--c-neutral-200);
  color: var(--color-text-primary);
}
.app-sidebar .sidebar-nav-flyout-item.active {
  background: var(--c-brand-50);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* Default = expanded: label visible. Collapsed = icon-only.
 * MODEC menu typography spec: 'Noto Sans' / 400 / 1rem / 1.5 / 0.15px. */
.sidebar-nav-label {
  display: block;
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.15px;
  color: currentColor;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-align: left;
}
.app-sidebar.collapsed .sidebar-nav-label { display: none; }

/* Chevron on the right of parent nav items with sub-items. Down (v) when closed,
 * rotated 180° (^) when the group is open. Hidden in collapsed state. */
.sidebar-nav-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23616161' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.15s ease;
}
.sidebar-nav-group.is-open > .sidebar-nav-item .sidebar-nav-chevron { transform: rotate(180deg); }
.app-sidebar.collapsed .sidebar-nav-chevron { display: none; }

/* Inline sub-item flyout when sidebar is expanded — sub-items render under their
 * parent as a static list, NOT a floating popover. Collapsed reverts to the
 * original hover-flyout pattern via the existing :hover rule above. */
.app-sidebar:not(.collapsed) .sidebar-nav-flyout {
  /* Reset the inherited `left/top/transform` from the base floating-flyout
   * rule so the flyout sits in flow under its parent button. */
  position: static;
  left: auto;
  top: auto;
  transform: none;
  z-index: auto;
  width: auto;
  max-width: none;
  background: transparent;
  /* MODEC pattern: no parent-level line. The blue stripe is rendered as a
   * per-item `border-left` on each sub-item — transparent by default,
   * accent on hover/active. See `.sidebar-nav-flyout-item` rules below. */
  border: none;
  margin-left: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 4px 0;
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  display: none;
  flex-direction: column;
}
.app-sidebar:not(.collapsed) .sidebar-nav-group.is-open > .sidebar-nav-flyout {
  display: flex;
  visibility: visible;
  pointer-events: auto;
}
/* Hover should NOT open the inline flyout when expanded — only click.
 * (The legacy hover-flyout rule below is overridden by selectors with higher
 * specificity that match only when `.is-open` is set.) */
.app-sidebar:not(.collapsed) .sidebar-nav-group:hover .sidebar-nav-flyout,
.app-sidebar:not(.collapsed) .sidebar-nav-group.sidebar-nav-group--open .sidebar-nav-flyout {
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
}
.app-sidebar:not(.collapsed) .sidebar-nav-group.is-open .sidebar-nav-flyout {
  visibility: visible;
  pointer-events: auto;
}
.app-sidebar:not(.collapsed) .sidebar-nav-flyout-item {
  /* MODEC spec for the menu sub-item:
   *   padding: 12px 16px;
   *   margin: 0 0 0 28px;          — 28px indent from sidebar left
   *   border-left: 2px solid transparent;  — reserved space; turns accent on hover/active
   *   background: transparent;     — turns rgba(63,91,255,0.08) on hover/active
   *   transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
   * Typography inherits MODEC body1 from base .sidebar-nav-flyout-item above. */
  padding: 12px 16px;
  margin: 0 0 0 28px;
  color: var(--color-text-secondary);
  background: transparent;
  border-left: 2px solid transparent;
  border-radius: 0;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 0.12s ease,
              border-color 0.12s ease;
  cursor: pointer;
  text-align: left;
}
/* Hover: light grey bg, no blue stripe — distinguishes hover from selection. */
.app-sidebar:not(.collapsed) .sidebar-nav-flyout-item:hover {
  background-color: var(--c-neutral-200);
  color: var(--color-text-primary);
}
/* Active (selected): light blue tint + blue left stripe + semibold weight. */
.app-sidebar:not(.collapsed) .sidebar-nav-flyout-item.active {
  background-color: rgba(63, 91, 255, 0.08);
  border-left-color: var(--color-accent);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}
/* Hide the invisible "hover-bridge" strip when expanded — no floating flyout there. */
.app-sidebar:not(.collapsed) .sidebar-nav-group::after { display: none; }

/* ── Toggle button — circular light-lavender pill, vertically centered on the
 * brand block, sitting astride the sidebar's right edge. MODEC layout. ── */
.sidebar-toggle {
  position: absolute;
  /* Brand block + top-header both locked to height: 64px (+1px border).
   * Center of the toggle sits on the divider line shared between the two. */
  top: 64px;
  right: -18px;
  transform: translate(0, -50%);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--c-brand-100);                 /* light lavender brand tint */
  color: var(--color-text-primary);               /* dark chevron, visible on lavender */
  border: var(--border-width-1) solid var(--color-divider);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
  padding: 0;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.sidebar-toggle:hover {
  background: var(--c-brand-200);                 /* slightly deeper lavender on hover */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14);
}
.sidebar-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(63, 91, 255, 0.3);
}
.sidebar-toggle-icon {
  /* HTML sets width/height=14 on the SVG; override to 20px and bump the
   * stroke so the chevron reads clearly against the lavender pill. */
  width: 20px;
  height: 20px;
  stroke-width: 2.75;
  transition: transform 0.2s ease;
  pointer-events: none;
}
.app-sidebar.collapsed .sidebar-toggle-icon { transform: translateY(0) rotate(180deg); }

.sidebar-spacer { flex: 1; min-height: 8px; }
.sidebar-version { font-size: 10px; color: var(--color-text-secondary); font-weight: var(--font-weight-medium); padding: 8px 4px; writing-mode: horizontal-tb; text-align: center; }
.app-main {
  position: relative;
  z-index: 0;
  isolation: isolate;
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  background: var(--color-bg-app);
  display: flex;
  flex-direction: column;
}
.app-top-header {
  position: sticky;
  top: 0;
  z-index: 900;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  /* Locked to 64px to match .sidebar-brand exactly — keeps the sidebar/main
   * divider lines aligned and the toggle button centered on the intersection. */
  height: 64px;
  background: var(--color-bg-surface);
  border-bottom: var(--border-width-1) solid var(--color-divider);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}
/* MODEC body1 spec for page title text. */
.app-page-title {
  margin: 0;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.15px;
  color: rgba(0, 0, 0, 0.87);
}
/* Page-title acting as a breadcrumb (e.g. detail view of a Plans
 * requirement). Inherits the page-title's typography so both parts
 * of the breadcrumb read at the page-title size, then the parent
 * link uses the brand blue and the current crumb uses primary text. */
.app-page-title .ds-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  padding: 0;
}
.app-page-title .ds-breadcrumb__link,
.app-page-title .ds-breadcrumb__sep,
.app-page-title .ds-breadcrumb__current {
  font: inherit;
  letter-spacing: inherit;
}
.app-page-title .ds-breadcrumb__link { color: var(--color-text-link); }
.app-page-title .ds-breadcrumb__sep { color: var(--color-text-secondary); }
.app-page-title .ds-breadcrumb__current { color: rgba(0, 0, 0, 0.87); }
.app-header-user {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Header gear opens AI configuration modal — MUI IconButton pattern:
 * just the SVG icon, no visible chrome until hover. Hover applies the
 * MUI standard 4%-black circular overlay (40px hit target), matching
 * the same pattern as .qc-dp-expand and .ds-table__filter-btn. */
.app-top-header .app-header-user-settings {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(0, 0, 0, 0.54);                  /* MUI icon-default grey */
  box-shadow: none;
  cursor: pointer;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.app-top-header .app-header-user-settings:hover {
  background: rgba(0, 0, 0, 0.04);             /* MUI IconButton hover overlay */
  color: rgba(0, 0, 0, 0.87);                  /* darken on hover */
  border-color: transparent;
}
.app-top-header .app-header-user-settings:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(63, 91, 255, 0.3);
}
.app-header-user-settings__icon {
  display: block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  pointer-events: none;
}

.user-avatar-img {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-surface-alt);
}
.user-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-text-muted) 100%);
  border: 1px solid var(--color-border-default);
}


/* Merged from legacy styles.css */
.content { padding: 24px; background: transparent; flex: 1; min-height: 0; max-width: 1920px; width: 100%; margin: 0 auto; position: relative; z-index: 1 }
} /* end @layer layout */