/* ==========================================================================
   EXXAT DESIGN SYSTEM — create-exxat-app starter globals.css
   ------------------------------------------------------------------
   Canonical theme tokens, custom variants, and base-layer styles live
   in `@exxatdesignux/ui/globals.css`. Synced from apps/web via
   `pnpm sync-ui-template` — sidebar utilities below; @source paths are
   template-specific.

   Standard: WCAG 2.1 Level AA
   ========================================================================== */

@import "@exxatdesignux/ui/globals.css";


/* App shell — scroll lives in `[data-page-scroll]` / hub insets, not the document. */
@layer base {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  #root {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
}

/* This app's own files (templates auto-scan these regardless of CSS file location). */
@source "../../components";
@source "../../contexts";
@source "../../hooks";
@source "../../lib";
@source "../../stores";
@source "../";

/* Sidebar nav labels — beat stale package dist that still applies truncate. */
@layer utilities {
  /* Use data-sidebar (stable) — TooltipTrigger asChild on collapsible parents
     overwrites data-slot to tooltip-trigger, skipping slot-based rules. */
  [data-sidebar="menu-button"]:not([data-size="lg"]) {
    overflow: visible !important;
    height: auto !important;
    min-height: 1.75rem !important;
    align-items: center !important;
    padding-block: var(--exxat-spacing-1) !important;
    padding-inline: var(--exxat-spacing-2) !important;
  }

  [data-sidebar="menu-button"] > span[aria-hidden="true"] i,
  [data-sidebar="menu-button"] > i[aria-hidden="true"] {
    display: block;
    line-height: 1;
  }

  [data-sidebar-nav-label] {
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    word-break: break-word;
  }

  /* Child rows — flex centering; no translate nudge into the guide line. */
  [data-slot="sidebar-menu-sub-button"] {
    overflow: visible !important;
    height: auto !important;
    width: 100% !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    align-items: center !important;
    box-sizing: border-box !important;
    translate: none !important;
    padding-block: var(--exxat-spacing-1) !important;
    padding-inline: var(--exxat-spacing-2) !important;
  }

  /* Primary sidebar collapsible — indent sub-menu rows; no vertical guide (overlaps icons). */
  [data-sidebar="menu-item"].group\/collapsible {
    position: relative;
  }

  [data-sidebar="menu-item"].group\/collapsible::before {
    content: none !important;
    display: none !important;
  }

  [data-slot="sidebar-menu-sub"] {
    margin-inline: 0 !important;
    margin-inline-start: var(--exxat-spacing-3) !important;
    padding-inline-end: 0 !important;
    padding-inline-start: 0 !important;
    translate: none !important;
    width: calc(100% - var(--exxat-spacing-3)) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-inline-start: none !important;
  }

  /* Nested collapsible inside a sub-menu (e.g. Compliance under Program). */

  [data-slot="outline-tree-menu-item"]:has(
      > .group\/collapsible[data-state="open"] [data-slot="outline-tree-sub"]
    ),
  li:has(> .group\/collapsible[data-state="open"] [data-slot="outline-tree-sub"]) {
    position: relative !important;
  }

  [data-slot="outline-tree-menu-item"]:has(
      > .group\/collapsible[data-state="open"] [data-slot="outline-tree-sub"]
    )::before,
  li:has(> .group\/collapsible[data-state="open"] [data-slot="outline-tree-sub"])::before {
    content: "";
    position: absolute;
    left: calc(
      var(--outline-tree-row-padding-x) + var(--outline-tree-depth, 0) *
        var(--outline-tree-depth-step) + var(--outline-tree-chevron-half)
    );
    top: var(--outline-tree-guide-overhang);
    bottom: calc(-1 * var(--outline-tree-guide-overhang));
    border-left: 1px solid var(--sidebar-border);
    pointer-events: none;
    z-index: 0;
  }

  [data-slot="secondary-panel"] [data-slot="outline-tree-menu-item"]:has(
      > .group\/collapsible[data-state="open"] [data-slot="outline-tree-sub"]
    )::before,
  [data-slot="secondary-panel"]
    li:has(> .group\/collapsible[data-state="open"] [data-slot="outline-tree-sub"])::before {
    content: none !important;
    display: none !important;
  }

  [data-slot="outline-tree-sub"][data-guide-layout="chevronRail"] {
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-inline-start: none !important;
  }

  [data-slot="sidebar-menu-sub-item"] {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  [data-slot="sidebar-menu-sub-item"].group\/collapsible-sub {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  [data-sidebar="nav-sub-badge"] {
    position: static !important;
    transform: none !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    margin-inline-end: var(--exxat-spacing-2) !important;
    pointer-events: none !important;
  }

  /*
   * App shell row — Ask Leo is a sibling rail on the right. SidebarInset
   * horizontal margins (mx-2 / collapsed ms-2) plus w-full overflow the outlet
   * wrapper and clip the main card's trailing rounded-xl — move gutters to
   * padding on [data-app-shell-main] instead.
   */
  [data-app-shell-row] [data-slot="sidebar-inset"] {
    margin-inline: 0 !important;
    width: 100%;
    max-width: 100%;
  }

  [data-app-shell-workspace-body] > [data-slot="secondary-panel"]:not([data-overlay]),
  [data-app-shell-workspace-body] [data-slot="sidebar-inset"] {
    margin-block-end: 0 !important;
    margin-block-start: 0 !important;
  }

  [data-app-shell-main] {
    margin-inline-start: 0;
    padding-inline-start: 0;
    padding-inline-end: 0.5rem;
  }

  /*
   * Scope rail closed (record detail, dashboards, etc.) — main column needs a
   * start gutter so the inset card is not flush to the workspace edge.
   */
  [data-app-shell-workspace-body]:not(:has(
      [data-slot="secondary-panel"][data-state="open"]:not([data-overlay])
    ))
    [data-app-shell-main] {
    padding-inline-start: 0.5rem;
  }

  /* Primary nav unmounted (focus shell) or flyout-only — no sidebar-gap spacer. */
  [data-app-shell-row]:not(:has([data-slot="sidebar"]:not([data-nav-flyout="true"])))
    [data-app-shell-main],
  [data-app-shell-row]:has([data-slot="sidebar"][data-nav-flyout="true"]) [data-app-shell-main] {
    padding-inline-start: 0.5rem;
  }

  @media (min-width: 768px) {
    [data-app-shell-main] {
      padding-inline-end: 0.5rem;
    }
  }

  [data-app-shell-workspace-body]:has(
    [data-slot="secondary-panel"][data-state="open"]:not([data-overlay])
  ) [data-app-shell-main] {
    padding-inline-start: 0;
  }

  /* Docked Ask Leo panel only — set when the right rail claims flex width.
     Floating window mode must leave this attribute unset so main does not shift. */
  [data-app-shell-row][data-ask-leo-open="true"] [data-app-shell-main] {
    padding-inline-end: 0;
  }

  [data-shell-utility-bar-full] [data-app-shell-workspace] {
    padding-top: 0;
  }

  [data-shell-utility-bar-full] [data-app-shell-row] [data-slot="sidebar"]:not([data-nav-flyout="true"]) [data-slot="sidebar-container"] {
    top: 3rem;
  }

  /* ── Product glyph tiles ─────────────────────────────────────────────────
     One product mark, worn the same way by the switcher rows and the home
     page. `--product-brand` is set inline per product by `productTileStyle`;
     everything about how it is worn is decided here.

     The tile and the glyph are pinned to opposite ends of the lightness scale
     rather than being two alphas of the same colour. Brand hue and chroma
     survive untouched; lightness is taken over, because lightness is the
     channel WCAG 1.4.11 is measured in and a brand palette makes no promises
     about it. Measured by `scripts/icon-contrast-probe.mjs`, which exists
     because axe cannot see a Font Awesome glyph: it is drawn from a
     pseudo-element, and `color-contrast` skips pseudo-element text.

     Chroma is scaled down on the tile so a saturated hue does not read as a
     colour chip, and left near full on the glyph so the product is still
     recognisable at 13px. */
  .product-tile {
    background: oklch(from var(--product-brand) 0.95 calc(c * 0.32) h);
  }

  .product-tile-glyph {
    color: oklch(from var(--product-brand) 0.5 c h);
  }

  .dark .product-tile {
    background: oklch(from var(--product-brand) 0.27 calc(c * 0.34) h);
  }

  .dark .product-tile-glyph {
    color: oklch(from var(--product-brand) 0.8 calc(c * 0.85) h);
  }
}

/* This app's own files (Tailwind skip binary assets). */