/* =====================================================================
   AESTHETIC INTEL — APP SHELL V4
   UI-only refinement layer. Loaded last.

   Purpose
   - keep a clean 76px dark rail at all times
   - expand navigation as an overlay panel without shifting page content
   - collapse automatically after navigation / outside interaction
   - remove conflicting hover-expand behavior from legacy sidebar styles
   - enforce professional, accessible contrast across common controls
   ===================================================================== */

:root {
  --ai4-rail-width: 76px;
  --ai4-drawer-width: 308px;
  --ai4-rail: #151a1f;
  --ai4-rail-2: #1d242a;
  --ai4-panel: #ffffff;
  --ai4-canvas: #f3f6f8;
  --ai4-surface: #ffffff;
  --ai4-surface-soft: #f7f9fa;
  --ai4-line: #e3e9ed;
  --ai4-line-strong: #d2dce2;
  --ai4-ink: #182128;
  --ai4-ink-2: #3f4c55;
  --ai4-muted: #7d8991;
  --ai4-accent: #2d6078;
  --ai4-accent-soft: #e7f0f4;
  --ai4-success: #447b67;
  --ai4-danger: #9c4f4f;
  --ai4-shadow: 18px 0 42px rgba(20, 32, 40, .13);
  --ai4-radius: 12px;
  --ai4-ease: 320ms cubic-bezier(.22, 1, .36, 1);
  --ai4-font: "Segoe UI Variable Text", "Segoe UI", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
}

html,
html[data-theme="light"],
html[data-theme="dark"] {
  color-scheme: light !important;
  --bg: var(--ai4-canvas) !important;
  --surface: var(--ai4-surface) !important;
  --surface-soft: var(--ai4-surface-soft) !important;
  --surface-raised: var(--ai4-surface) !important;
  --text: var(--ai4-ink) !important;
  --muted: var(--ai4-muted) !important;
  --border: var(--ai4-line) !important;
  --border-strong: var(--ai4-line-strong) !important;
  --brand-primary: var(--ai4-accent) !important;
  --brand-primary-strong: #234d62 !important;
  --brand-accent: #688ea1 !important;
  --sidebar: var(--ai4-rail) !important;
  --sidebar-text: #f3f6f8 !important;
  --sidebar-muted: #9eabb3 !important;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--ai4-font) !important;
}

body {
  color: var(--ai4-ink) !important;
  background: var(--ai4-canvas) !important;
  font-size: 14px !important;
  letter-spacing: -.008em !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A single consistent client-facing palette prevents legacy dark rules from
   producing black-on-black combinations in mixed old/new screens. */
.app-body .theme-toggle,
.public-body .theme-toggle {
  display: none !important;
}

/* ---------------------------------------------------------------------
   Desktop shell
   --------------------------------------------------------------------- */
@media (min-width: 1041px) {
  .app-shell,
  body.sidebar-expanded .app-shell,
  body:not(.sidebar-expanded) .app-shell {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: var(--ai4-rail-width) minmax(0, 1fr) !important;
    gap: 0 !important;
    overflow: visible !important;
    background: var(--ai4-canvas) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .app-shell > main,
  .app-shell > .app-content,
  .main-content,
  .app-content {
    min-width: 0 !important;
  }

  .sidebar,
  body.sidebar-expanded .sidebar,
  body:not(.sidebar-expanded) .sidebar,
  body:not(.sidebar-expanded) .sidebar:hover,
  body:not(.sidebar-expanded) .sidebar:focus-within {
    position: sticky !important;
    top: 0 !important;
    z-index: 220 !important;
    width: var(--ai4-rail-width) !important;
    min-width: var(--ai4-rail-width) !important;
    max-width: none !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    color: #eef3f5 !important;
    background: var(--ai4-rail) !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, .05) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transition:
      width var(--ai4-ease),
      box-shadow var(--ai4-ease),
      background-color var(--ai4-ease) !important;
    isolation: isolate;
  }

  body.sidebar-expanded .sidebar {
    width: var(--ai4-drawer-width) !important;
    background:
      linear-gradient(
        90deg,
        var(--ai4-rail) 0,
        var(--ai4-rail) var(--ai4-rail-width),
        var(--ai4-panel) var(--ai4-rail-width),
        var(--ai4-panel) 100%
      ) !important;
    box-shadow: var(--ai4-shadow) !important;
  }

  /* No hover expansion. Opening the sidebar is always a deliberate action. */
  .sidebar:hover,
  .sidebar:focus-within {
    width: inherit;
  }

  .sidebar-brand,
  .sidebar .brand {
    position: relative !important;
    width: 100% !important;
    min-height: 78px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: var(--ai4-rail-width) minmax(0, 1fr) !important;
    gap: 0 !important;
    align-items: center !important;
    color: var(--ai4-ink) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .sidebar .brand-mark {
    grid-column: 1 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    margin: 0 auto !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255, 255, 255, .96) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18) !important;
  }

  .sidebar .brand-mark img {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
  }

  .sidebar .brand-copy {
    grid-column: 2 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 20px 0 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-10px) !important;
    transition:
      opacity 150ms ease,
      transform var(--ai4-ease),
      visibility 0s linear 180ms !important;
  }

  body.sidebar-expanded .sidebar .brand-copy {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
    transition:
      opacity 180ms ease 90ms,
      transform var(--ai4-ease),
      visibility 0s linear 0s !important;
  }

  .sidebar .brand-copy strong {
    color: var(--ai4-ink) !important;
    font-size: 15px !important;
    font-weight: 760 !important;
    letter-spacing: -.025em !important;
    white-space: nowrap !important;
  }

  .sidebar .brand-copy small {
    margin-top: 3px !important;
    color: var(--ai4-muted) !important;
    font-size: 10.5px !important;
    font-weight: 560 !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
  }

  /* Professional toggle: centered in the rail, never floating over the panel. */
  .sidebar-desktop-toggle,
  body.sidebar-expanded .sidebar-desktop-toggle,
  body:not(.sidebar-expanded) .sidebar-desktop-toggle {
    position: absolute !important;
    top: 82px !important;
    left: 22px !important;
    right: auto !important;
    z-index: 6 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    color: #aebbc2 !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    transform: none !important;
    transition:
      color 160ms ease,
      background-color 160ms ease,
      border-color 160ms ease,
      transform 160ms ease !important;
  }

  .sidebar-desktop-toggle:hover,
  .sidebar-desktop-toggle:focus-visible {
    color: #fff !important;
    background: var(--ai4-rail-2) !important;
    border-color: rgba(255,255,255,.22) !important;
    outline: none !important;
  }

  .sidebar-desktop-toggle .nav-icon {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    margin: 0 !important;
    color: currentColor !important;
    transform: rotate(0deg) !important;
    transition: transform var(--ai4-ease) !important;
  }

  body.sidebar-expanded .sidebar-desktop-toggle .nav-icon {
    transform: rotate(180deg) !important;
  }

  .sidebar .nav-list,
  body.sidebar-expanded .sidebar .nav-list,
  body:not(.sidebar-expanded) .sidebar .nav-list,
  body:not(.sidebar-expanded) .sidebar:hover .nav-list,
  body:not(.sidebar-expanded) .sidebar:focus-within .nav-list {
    width: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    margin: 40px 0 0 !important;
    padding: 0 0 16px !important;
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5da transparent !important;
    overscroll-behavior: contain !important;
  }

  .sidebar .nav-section-label,
  body:not(.sidebar-expanded) .sidebar .nav-section-label {
    display: block !important;
    width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  body.sidebar-expanded .sidebar .nav-section-label {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: 28px !important;
    margin: 17px 18px 7px 96px !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #99a4aa !important;
    font-size: 9px !important;
    font-weight: 760 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    transition: opacity 170ms ease 90ms !important;
  }

  .sidebar .nav-link,
  .sidebar .nav-group-title,
  body.sidebar-expanded .sidebar .nav-link,
  body.sidebar-expanded .sidebar .nav-group-title,
  body:not(.sidebar-expanded) .sidebar .nav-link,
  body:not(.sidebar-expanded) .sidebar .nav-group-title {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 1px 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: var(--ai4-rail-width) minmax(0, 1fr) 30px !important;
    gap: 0 !important;
    align-items: center !important;
    color: var(--ai4-ink-2) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 630 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: color 160ms ease, background-color 160ms ease !important;
  }

  /* icon rail tile */
  .sidebar .nav-link::before,
  .sidebar .nav-group-title::before {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    z-index: 0 !important;
    width: 40px !important;
    height: 38px !important;
    transform: translateY(-50%) !important;
    border-radius: 10px !important;
    background: transparent !important;
    transition: background-color 160ms ease, box-shadow 160ms ease !important;
    pointer-events: none !important;
  }

  .sidebar .nav-link:hover::before,
  .sidebar .nav-group-title:hover::before {
    background: var(--ai4-rail-2) !important;
  }

  .sidebar .nav-link.active::before,
  .sidebar .nav-group.open > .nav-group-title::before {
    background: #25343d !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important;
  }

  /* subtle active line instead of the large white block */
  .sidebar .nav-link::after,
  .sidebar .nav-group-title::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 3px !important;
    height: 22px !important;
    transform: translateY(-50%) scaleY(0) !important;
    transform-origin: center !important;
    border-radius: 0 4px 4px 0 !important;
    background: #8fb6c8 !important;
    opacity: 0 !important;
    transition: transform 180ms ease, opacity 180ms ease !important;
  }

  .sidebar .nav-link.active::after,
  .sidebar .nav-group.open > .nav-group-title::after {
    opacity: 1 !important;
    transform: translateY(-50%) scaleY(1) !important;
  }

  body.sidebar-expanded .sidebar .nav-link:hover,
  body.sidebar-expanded .sidebar .nav-group-title:hover {
    background: linear-gradient(90deg, transparent 0 76px, #f7f9fa 76px 100%) !important;
  }

  body.sidebar-expanded .sidebar .nav-link.active,
  body.sidebar-expanded .sidebar .nav-group.open > .nav-group-title {
    background: linear-gradient(90deg, transparent 0 76px, #edf3f6 76px 100%) !important;
  }

  .sidebar .nav-icon,
  body.sidebar-expanded .sidebar .nav-icon,
  body:not(.sidebar-expanded) .sidebar .nav-icon {
    position: relative !important;
    z-index: 2 !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin: 0 auto !important;
    color: #acb9c0 !important;
    opacity: 1 !important;
    transition: color 160ms ease, transform 180ms ease !important;
  }

  .sidebar .nav-link:hover > .nav-icon:first-child,
  .sidebar .nav-group-title:hover > .nav-icon:first-child,
  .sidebar .nav-link.active > .nav-icon:first-child,
  .sidebar .nav-group.open > .nav-group-title > .nav-icon:first-child {
    color: #ffffff !important;
  }

  .sidebar .nav-text,
  body:not(.sidebar-expanded) .sidebar .nav-text {
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-8px) !important;
    color: var(--ai4-ink-2) !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    transition:
      max-width var(--ai4-ease),
      opacity 130ms ease,
      transform var(--ai4-ease),
      visibility 0s linear 160ms !important;
  }

  body.sidebar-expanded .sidebar .nav-text {
    max-width: 168px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
    transition:
      max-width var(--ai4-ease),
      opacity 180ms ease 85ms,
      transform var(--ai4-ease),
      visibility 0s linear 0s !important;
  }

  .sidebar .nav-group-title > .nav-icon:last-child {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    margin: 0 14px 0 auto !important;
    color: #89969d !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: transform 200ms ease, opacity 150ms ease !important;
  }

  body.sidebar-expanded .sidebar .nav-group-title > .nav-icon:last-child {
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.sidebar-expanded .sidebar .nav-group.open > .nav-group-title > .nav-icon:last-child {
    transform: rotate(90deg) !important;
  }

  .sidebar .nav-submenu,
  .sidebar .nav-group.open .nav-submenu,
  body:not(.sidebar-expanded) .sidebar .nav-submenu {
    width: auto !important;
    max-height: 0 !important;
    margin: 0 14px 0 96px !important;
    padding: 0 0 0 11px !important;
    display: grid !important;
    gap: 2px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-4px) !important;
    pointer-events: none !important;
    border: 0 !important;
    border-left: 1px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    transition:
      max-height 280ms cubic-bezier(.22,1,.36,1),
      opacity 150ms ease,
      transform 220ms ease,
      visibility 0s linear 170ms !important;
  }

  body.sidebar-expanded .sidebar .nav-group.open .nav-submenu {
    max-height: 760px !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    border-left-color: #d7e0e5 !important;
    transition:
      max-height 340ms cubic-bezier(.22,1,.36,1),
      opacity 170ms ease 60ms,
      transform 220ms ease,
      visibility 0s linear 0s !important;
  }

  .sidebar .nav-sublink {
    min-height: 36px !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #68757d !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    transition: color 150ms ease, background-color 150ms ease !important;
  }

  .sidebar .nav-sublink > span {
    min-width: 22px !important;
    height: 22px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 6px !important;
    color: #526b78 !important;
    background: #edf2f4 !important;
    font-size: 8px !important;
    font-weight: 800 !important;
  }

  .sidebar .nav-sublink:hover,
  .sidebar .nav-sublink.active {
    color: var(--ai4-ink) !important;
    background: #f2f6f8 !important;
    box-shadow: none !important;
  }

  .sidebar-user,
  body.sidebar-expanded .sidebar-user,
  body:not(.sidebar-expanded) .sidebar-user {
    position: relative !important;
    width: 100% !important;
    min-height: 72px !important;
    margin: auto 0 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: var(--ai4-rail-width) minmax(0,1fr) 42px !important;
    gap: 0 !important;
    align-items: center !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  body.sidebar-expanded .sidebar-user {
    border-top-color: var(--ai4-line) !important;
  }

  .sidebar-user .avatar {
    grid-column: 1 !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 auto !important;
    display: grid !important;
    place-items: center !important;
    color: #182128 !important;
    background: #ffffff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  .sidebar-user-copy {
    min-width: 0 !important;
    padding-left: 16px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-8px) !important;
    transition: opacity 150ms ease, transform var(--ai4-ease), visibility 0s linear 160ms !important;
  }

  body.sidebar-expanded .sidebar-user-copy {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
    transition: opacity 180ms ease 80ms, transform var(--ai4-ease), visibility 0s linear 0s !important;
  }

  .sidebar-user-copy strong {
    display: block !important;
    color: var(--ai4-ink) !important;
    font-size: 12px !important;
    font-weight: 720 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .sidebar-user-copy small {
    display: block !important;
    margin-top: 2px !important;
    color: var(--ai4-muted) !important;
    font-size: 9.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .sidebar-logout {
    grid-column: 3 !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 auto !important;
    display: grid !important;
    place-items: center !important;
    color: #7e8c94 !important;
    background: transparent !important;
    border: 1px solid var(--ai4-line) !important;
    border-radius: 9px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-6px) !important;
    transition: opacity 150ms ease, transform var(--ai4-ease), background-color 150ms ease !important;
  }

  body.sidebar-expanded .sidebar-logout {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
  }

  .sidebar-logout:hover {
    color: var(--ai4-danger) !important;
    background: #fff4f4 !important;
    border-color: #ead4d4 !important;
  }

  .sidebar-logout .nav-icon {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    color: currentColor !important;
  }

  .sidebar-scrim {
    position: fixed !important;
    inset: 0 !important;
    z-index: 210 !important;
    display: block !important;
    background: rgba(17, 25, 30, .18) !important;
    backdrop-filter: blur(1px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 180ms ease, visibility 0s linear 180ms !important;
  }

  body.sidebar-expanded .sidebar-scrim {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 180ms ease, visibility 0s linear 0s !important;
  }

  .mobile-app-bar {
    display: none !important;
  }

  /* content never jumps when the drawer opens */
  .main-content,
  .app-content {
    width: 100% !important;
    max-width: 1720px !important;
    margin: 0 auto !important;
    padding: 32px clamp(24px, 3.5vw, 58px) 92px !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------
   Mobile / tablet drawer
   --------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .app-shell,
  body.sidebar-expanded .app-shell,
  body:not(.sidebar-expanded) .app-shell {
    display: block !important;
    min-height: 100vh !important;
    background: var(--ai4-canvas) !important;
  }

  .mobile-app-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 190 !important;
    min-height: 58px !important;
    padding: 8px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    color: var(--ai4-ink) !important;
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid var(--ai4-line) !important;
    backdrop-filter: blur(14px) !important;
  }

  .mobile-menu {
    position: static !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    display: grid !important;
    place-items: center !important;
    color: #fff !important;
    background: var(--ai4-rail) !important;
    border: 0 !important;
    border-radius: 10px !important;
  }

  .mobile-brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--ai4-ink) !important;
    font-size: 13px !important;
    font-weight: 720 !important;
  }

  .mobile-brand img {
    width: 26px !important;
    height: 26px !important;
  }

  .sidebar,
  body.sidebar-expanded .sidebar,
  body:not(.sidebar-expanded) .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 230 !important;
    width: min(304px, calc(100vw - 30px)) !important;
    height: 100vh !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background:
      linear-gradient(
        90deg,
        var(--ai4-rail) 0,
        var(--ai4-rail) 72px,
        #fff 72px,
        #fff 100%
      ) !important;
    border: 0 !important;
    border-right: 1px solid var(--ai4-line) !important;
    border-radius: 0 !important;
    box-shadow: 20px 0 52px rgba(22,34,42,.18) !important;
    transform: translateX(-105%) !important;
    transition: transform var(--ai4-ease) !important;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0) !important;
  }

  .sidebar-desktop-toggle {
    display: none !important;
  }

  .sidebar-brand,
  .sidebar .brand {
    min-height: 72px !important;
    display: grid !important;
    grid-template-columns: 72px minmax(0,1fr) !important;
    align-items: center !important;
    padding: 0 !important;
    color: var(--ai4-ink) !important;
    background: transparent !important;
    border: 0 !important;
  }

  .sidebar .brand-mark {
    width: 38px !important;
    height: 38px !important;
    margin: 0 auto !important;
    display: grid !important;
    place-items: center !important;
    background: #fff !important;
    border-radius: 10px !important;
  }

  .sidebar .brand-mark img {
    width: 26px !important;
    height: 26px !important;
  }

  .sidebar .brand-copy {
    padding-left: 15px !important;
    display: grid !important;
  }

  .sidebar .brand-copy strong {
    color: var(--ai4-ink) !important;
    font-size: 14px !important;
  }

  .sidebar .brand-copy small {
    color: var(--ai4-muted) !important;
    font-size: 10px !important;
  }

  .sidebar .nav-list {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 8px 0 14px !important;
    overflow-y: auto !important;
  }

  .sidebar .nav-section-label {
    display: block !important;
    margin: 14px 16px 7px 90px !important;
    color: #99a4aa !important;
    font-size: 9px !important;
    font-weight: 760 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
  }

  .sidebar .nav-link,
  .sidebar .nav-group-title {
    width: 100% !important;
    min-height: 44px !important;
    margin: 1px 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 72px minmax(0,1fr) 28px !important;
    align-items: center !important;
    color: var(--ai4-ink-2) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 12.5px !important;
    font-weight: 630 !important;
  }

  .sidebar .nav-link > .nav-icon:first-child,
  .sidebar .nav-group-title > .nav-icon:first-child {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin: 0 auto !important;
    color: #b0bcc2 !important;
  }

  .sidebar .nav-link:hover,
  .sidebar .nav-link.active,
  .sidebar .nav-group-title:hover,
  .sidebar .nav-group.open > .nav-group-title {
    background: linear-gradient(90deg, transparent 0 72px, #f2f6f8 72px 100%) !important;
  }

  .sidebar .nav-link.active > .nav-icon:first-child,
  .sidebar .nav-group.open > .nav-group-title > .nav-icon:first-child {
    color: #fff !important;
  }

  .sidebar .nav-text {
    color: var(--ai4-ink-2) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    max-width: none !important;
    white-space: nowrap !important;
  }

  .sidebar .nav-group-title > .nav-icon:last-child {
    width: 12px !important;
    height: 12px !important;
    margin: 0 12px 0 auto !important;
    color: #849199 !important;
  }

  .sidebar .nav-group.open > .nav-group-title > .nav-icon:last-child {
    transform: rotate(90deg) !important;
  }

  .sidebar .nav-submenu {
    max-height: 0 !important;
    margin: 0 12px 0 88px !important;
    padding: 0 0 0 10px !important;
    display: grid !important;
    gap: 2px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    border-left: 1px solid #d8e1e6 !important;
    transition: max-height 280ms ease, opacity 160ms ease !important;
  }

  .sidebar .nav-group.open .nav-submenu {
    max-height: 760px !important;
    padding-top: 4px !important;
    padding-bottom: 6px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .sidebar .nav-sublink {
    min-height: 35px !important;
    padding: 7px 8px !important;
    color: #68757d !important;
    border-radius: 8px !important;
    font-size: 11px !important;
  }

  .sidebar-user {
    min-height: 68px !important;
    margin: auto 0 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 72px minmax(0,1fr) 40px !important;
    align-items: center !important;
    border-top: 1px solid var(--ai4-line) !important;
  }

  .sidebar-user .avatar {
    width: 38px !important;
    height: 38px !important;
    margin: 0 auto !important;
    color: #172128 !important;
    background: #fff !important;
  }

  .sidebar-user-copy {
    min-width: 0 !important;
    padding-left: 14px !important;
  }

  .sidebar-user-copy strong {
    color: var(--ai4-ink) !important;
    font-size: 11.5px !important;
  }

  .sidebar-user-copy small {
    color: var(--ai4-muted) !important;
    font-size: 9.5px !important;
  }

  .sidebar-logout {
    width: 31px !important;
    height: 31px !important;
    display: grid !important;
    place-items: center !important;
    color: #7e8b93 !important;
    background: transparent !important;
    border: 1px solid var(--ai4-line) !important;
    border-radius: 8px !important;
  }

  .sidebar-scrim {
    position: fixed !important;
    inset: 0 !important;
    z-index: 220 !important;
    display: block !important;
    background: rgba(18,27,33,.38) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 180ms ease, visibility 0s linear 180ms !important;
  }

  body.sidebar-open .sidebar-scrim {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 180ms ease, visibility 0s linear 0s !important;
  }

  .main-content,
  .app-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 24px 18px 88px !important;
  }
}

@media (max-width: 620px) {
  .main-content,
  .app-content {
    padding: 18px 12px 86px !important;
  }
}

/* ---------------------------------------------------------------------
   Contrast and typography safety across legacy screens
   --------------------------------------------------------------------- */
.app-body h1,
.app-body h2,
.app-body h3,
.app-body h4,
.app-body h5,
.app-body h6,
.app-body label,
.app-body legend,
.app-body th,
.app-body strong {
  color: inherit;
}

.app-body input,
.app-body select,
.app-body textarea {
  color: var(--ai4-ink) !important;
  background: #fff !important;
  border-color: var(--ai4-line-strong) !important;
}

.app-body input::placeholder,
.app-body textarea::placeholder {
  color: #9aa5ac !important;
  opacity: 1 !important;
}

.app-body .panel,
.app-body .content-card,
.app-body .form-panel,
.app-body .table-wrap,
.app-body .metric-card,
.app-body .source-card:not(.hok-source-card) {
  color: var(--ai4-ink) !important;
}

/* Explicit contrast for intentionally dark presentation cards. */
.hok-weekly-brief,
.hok-admin-primary-card,
.hok-source-card.is-dark,
.page-admin-dashboard .ai-admin-kpi-grid .kpi-card:nth-child(1),
.ai-login-story,
.ai-cam-admin-button {
  color: #ffffff !important;
}

.hok-weekly-brief h1,
.hok-weekly-brief h2,
.hok-weekly-brief h3,
.hok-weekly-brief strong,
.hok-admin-primary-card h1,
.hok-admin-primary-card h2,
.hok-admin-primary-card h3,
.hok-admin-primary-card strong,
.page-admin-dashboard .ai-admin-kpi-grid .kpi-card:nth-child(1) h1,
.page-admin-dashboard .ai-admin-kpi-grid .kpi-card:nth-child(1) h2,
.page-admin-dashboard .ai-admin-kpi-grid .kpi-card:nth-child(1) h3,
.page-admin-dashboard .ai-admin-kpi-grid .kpi-card:nth-child(1) strong,
.ai-login-story h1,
.ai-login-story h2,
.ai-login-story h3,
.ai-login-story strong {
  color: #ffffff !important;
}

.hok-weekly-brief p,
.hok-weekly-brief small,
.hok-admin-primary-card p,
.hok-admin-primary-card small,
.ai-login-story p,
.ai-login-story small {
  color: rgba(255,255,255,.70) !important;
}

/* Buttons retain readable foregrounds regardless of legacy page CSS. */
.app-body .btn-primary,
.app-body a.btn-primary,
.app-body button.btn-primary {
  color: #fff !important;
  background: #1c2429 !important;
  border-color: #1c2429 !important;
}

.app-body .btn-primary:hover,
.app-body a.btn-primary:hover,
.app-body button.btn-primary:hover {
  color: #fff !important;
  background: #2b363d !important;
  border-color: #2b363d !important;
}

.app-body .btn-secondary,
.app-body a.btn-secondary,
.app-body button.btn-secondary {
  color: var(--ai4-ink-2) !important;
  background: #fff !important;
  border-color: var(--ai4-line-strong) !important;
}

body.sidebar-transitioning,
body.sidebar-transitioning * {
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar *,
  .sidebar-scrim {
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================================
   2026-09-29 — SIDEBAR NAVIGATION STABILITY PATCH
   ---------------------------------------------------------------------
   Keeps the existing V4 rail/drawer design, but removes the visual
   clipping/overlap seen with long Data Tools/Settings menus.
   ===================================================================== */

:root {
  --ai4-drawer-width: 324px;
}

@media (min-width: 1041px) {
  .sidebar-brand,
  .sidebar .brand,
  .sidebar-user {
    flex: 0 0 auto !important;
  }

  .sidebar .nav-list,
  body.sidebar-expanded .sidebar .nav-list,
  body:not(.sidebar-expanded) .sidebar .nav-list {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    padding-bottom: 24px !important;
    scroll-padding-top: 12px !important;
    scroll-padding-bottom: 24px !important;
    overscroll-behavior: contain !important;
  }

  /* Keep the compact rail visually clean; show the thin scrollbar only
     when the full navigation drawer is open. */
  body:not(.sidebar-expanded) .sidebar .nav-list {
    scrollbar-width: none !important;
  }

  body:not(.sidebar-expanded) .sidebar .nav-list::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  body.sidebar-expanded .sidebar .nav-list {
    scrollbar-width: thin !important;
    scrollbar-color: #c8d3d9 transparent !important;
    scrollbar-gutter: stable !important;
  }

  body.sidebar-expanded .sidebar .nav-list::-webkit-scrollbar {
    width: 5px !important;
  }

  body.sidebar-expanded .sidebar .nav-list::-webkit-scrollbar-track {
    background: transparent !important;
  }

  body.sidebar-expanded .sidebar .nav-list::-webkit-scrollbar-thumb {
    background: #c8d3d9 !important;
    border-radius: 999px !important;
  }

  body.sidebar-expanded .sidebar .nav-text {
    max-width: 188px !important;
  }

  body.sidebar-expanded .sidebar .nav-group.open .nav-submenu {
    margin-left: 92px !important;
    margin-right: 18px !important;
    padding-left: 12px !important;
  }

  .sidebar .nav-sublink {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    white-space: normal !important;
  }

  .sidebar .nav-sublink > span {
    flex: 0 0 22px !important;
  }

  .sidebar .nav-group {
    scroll-margin-top: 12px !important;
    scroll-margin-bottom: 18px !important;
  }

  /* The account footer is a fixed flex item, not part of the scrolling
     navigation. Giving it its own opaque split background prevents menu
     rows from appearing underneath it while the drawer is scrolled. */
  .sidebar-user,
  body.sidebar-expanded .sidebar-user,
  body:not(.sidebar-expanded) .sidebar-user {
    z-index: 5 !important;
    overflow: hidden !important;
    background: var(--ai4-rail) !important;
  }

  body.sidebar-expanded .sidebar-user {
    background:
      linear-gradient(
        90deg,
        var(--ai4-rail) 0,
        var(--ai4-rail) var(--ai4-rail-width),
        var(--ai4-panel) var(--ai4-rail-width),
        var(--ai4-panel) 100%
      ) !important;
  }

  body.sidebar-expanded .sidebar-user-copy {
    max-width: 178px !important;
  }
}

@media (max-width: 1040px) {
  .sidebar .nav-list {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    padding-bottom: 22px !important;
    overscroll-behavior: contain !important;
  }

  .sidebar .nav-sublink {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  .sidebar-user {
    flex: 0 0 auto !important;
    z-index: 5 !important;
    background:
      linear-gradient(
        90deg,
        var(--ai4-rail) 0,
        var(--ai4-rail) 72px,
        #fff 72px,
        #fff 100%
      ) !important;
  }
}

/* =====================================================================
   AESTHETIC INTEL — SIDEBAR V3 COMPACT POLISH
   2026-09-29
   Keeps the expanded drawer compact, readable and footer-safe.
   ===================================================================== */
@media (min-width: 1041px) {
  :root { --ai4-drawer-width: 320px; }

  #sidebar.sidebar { height: 100dvh !important; min-height: 0 !important; }
  #sidebar .sidebar-brand { min-height: 68px !important; flex: 0 0 68px !important; }
  #sidebar .sidebar-desktop-toggle { top: 72px !important; }

  #sidebar .nav-list {
    margin-top: 20px !important;
    padding-bottom: 10px !important;
    scroll-padding-bottom: 14px !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd6dc transparent !important;
  }
  #sidebar .nav-list::-webkit-scrollbar { width: 4px !important; }
  #sidebar .nav-list::-webkit-scrollbar-track { background: transparent !important; }
  #sidebar .nav-list::-webkit-scrollbar-thumb { background: #cbd6dc !important; border-radius: 999px !important; }
  #sidebar .nav-list::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; }

  body.sidebar-expanded #sidebar .nav-section-label {
    margin: 10px 14px 4px 92px !important;
    max-height: 22px !important;
    font-size: 8.5px !important;
  }

  #sidebar .nav-link,
  #sidebar .nav-group-title {
    min-height: 40px !important;
    margin: 0 !important;
    grid-template-columns: var(--ai4-rail-width) minmax(0, 1fr) 26px !important;
    font-size: 12.5px !important;
    line-height: 1.15 !important;
  }
  #sidebar .nav-link::before,
  #sidebar .nav-group-title::before {
    left: 19px !important;
    width: 38px !important;
    height: 34px !important;
    border-radius: 9px !important;
  }
  #sidebar .nav-link::after,
  #sidebar .nav-group-title::after { height: 20px !important; }
  #sidebar .nav-icon { width: 17px !important; height: 17px !important; min-width: 17px !important; }
  body.sidebar-expanded #sidebar .nav-text {
    max-width: 205px !important;
    margin: 0 !important;
    padding: 0 10px 0 14px !important;
  }
  #sidebar .nav-group-title > .nav-icon:last-child {
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
    margin-right: 11px !important;
  }

  #sidebar .nav-submenu,
  #sidebar .nav-group.open .nav-submenu,
  body:not(.sidebar-expanded) #sidebar .nav-submenu {
    margin-left: 90px !important;
    margin-right: 10px !important;
    padding-left: 9px !important;
    gap: 1px !important;
  }
  body.sidebar-expanded #sidebar .nav-group.open > .nav-submenu {
    max-height: 520px !important;
    margin-top: 2px !important;
    margin-bottom: 6px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    overflow: hidden !important;
    border-left-color: #dbe4e8 !important;
  }
  #sidebar .nav-sublink {
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 5px 7px !important;
    gap: 8px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #sidebar .nav-sublink > span:first-child {
    flex: 0 0 22px !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
  }

  #sidebar .sidebar-user,
  body.sidebar-expanded #sidebar .sidebar-user,
  body:not(.sidebar-expanded) #sidebar .sidebar-user {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 64px !important;
    min-height: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    grid-template-columns: var(--ai4-rail-width) minmax(0, 1fr) 40px !important;
    z-index: 8 !important;
  }
  body.sidebar-expanded #sidebar .sidebar-user {
    background: linear-gradient(90deg, var(--ai4-rail) 0, var(--ai4-rail) var(--ai4-rail-width), #fff var(--ai4-rail-width), #fff 100%) !important;
    border-top: 1px solid var(--ai4-line) !important;
  }
  #sidebar .sidebar-user .avatar { width: 34px !important; height: 34px !important; font-size: 11px !important; }
  #sidebar .sidebar-user-copy { padding-left: 14px !important; }
  #sidebar .sidebar-user-copy strong { font-size: 11.5px !important; }
  #sidebar .sidebar-user-copy small { margin-top: 1px !important; font-size: 9px !important; }
  #sidebar .sidebar-logout { width: 30px !important; height: 30px !important; border-radius: 8px !important; }
}

/* =====================================================================
   AESTHETIC INTEL — SIDEBAR V4 HEADER / SPACING FIX
   2026-09-29
   Removes excess space above WORKSPACE and displays the existing
   Aesthetic Intel image asset directly instead of inside a white tile.
   ===================================================================== */
@media (min-width: 1041px) {
  #sidebar .sidebar-brand {
    flex: 0 0 60px !important;
    min-height: 60px !important;
    height: 60px !important;
  }

  #sidebar .brand-mark,
  #sidebar .brand-logo {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #sidebar .brand-logo-image {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  #sidebar .brand-logo-fallback {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    color: #f3f6f8 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: -.04em !important;
  }

  #sidebar .brand-logo-fallback[hidden] { display: none !important; }

  #sidebar .sidebar-desktop-toggle,
  body.sidebar-expanded #sidebar .sidebar-desktop-toggle,
  body:not(.sidebar-expanded) #sidebar .sidebar-desktop-toggle {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 4px 0 6px 21px !important;
  }

  #sidebar .nav-list,
  body.sidebar-expanded #sidebar .nav-list,
  body:not(.sidebar-expanded) #sidebar .nav-list {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 8px !important;
    scroll-padding-top: 4px !important;
  }

  body.sidebar-expanded #sidebar .nav-section-label {
    margin: 5px 14px 3px 92px !important;
    max-height: 18px !important;
    line-height: 1 !important;
  }

  #sidebar .nav-link,
  #sidebar .nav-group-title {
    min-height: 38px !important;
    height: 38px !important;
  }

  #sidebar .nav-group { margin: 0 !important; }

  body.sidebar-expanded #sidebar .nav-group.open > .nav-submenu {
    margin-top: 1px !important;
    margin-bottom: 4px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
  }

  #sidebar .nav-sublink {
    min-height: 30px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}

@media (max-width: 1040px) {
  #sidebar .brand-mark,
  #sidebar .brand-logo {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #sidebar .brand-logo-image {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}


/* =====================================================================
   AESTHETIC INTEL — SIDEBAR V5 PRECISION ALIGNMENT
   Mirrors the final inline safety override in views/sidebar.php.
   ===================================================================== */

/*
 * V5 precision alignment pass.
 * This is intentionally last in the partial so legacy theme styles cannot
 * shift the logo, rail icons, section labels or account footer out of place.
 */
@media (min-width: 1041px) {
    #sidebar.sidebar {
        --ai5-rail: 76px;
        --ai5-drawer: 328px;
        --ai5-text-pad: 14px;
        width: var(--ai5-rail) !important;
        min-width: var(--ai5-rail) !important;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.sidebar-expanded #sidebar.sidebar {
        width: var(--ai5-drawer) !important;
    }

    /* ---------- Brand / logo ---------- */
    #sidebar .sidebar-brand,
    #sidebar .brand.sidebar-brand {
        position: relative !important;
        inset: auto !important;
        flex: 0 0 68px !important;
        width: 100% !important;
        min-width: 100% !important;
        height: 68px !important;
        min-height: 68px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: var(--ai5-rail) minmax(0, 1fr) !important;
        align-items: center !important;
        justify-items: stretch !important;
        gap: 0 !important;
        transform: none !important;
        overflow: hidden !important;
    }

    #sidebar .brand-mark,
    #sidebar .brand-logo {
        position: static !important;
        inset: auto !important;
        grid-column: 1 !important;
        justify-self: center !important;
        align-self: center !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        transform: none !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    #sidebar .brand-logo-image {
        position: static !important;
        inset: auto !important;
        display: block !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        max-height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
        object-position: 50% 50% !important;
        transform: none !important;
        filter: none !important;
    }

    #sidebar .brand-copy {
        grid-column: 2 !important;
        align-self: center !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 18px 0 var(--ai5-text-pad) !important;
        transform: translateX(-6px) !important;
    }

    body.sidebar-expanded #sidebar .brand-copy {
        transform: none !important;
    }

    /* ---------- Collapse button ---------- */
    #sidebar .sidebar-desktop-toggle,
    body.sidebar-expanded #sidebar .sidebar-desktop-toggle,
    body:not(.sidebar-expanded) #sidebar .sidebar-desktop-toggle {
        position: relative !important;
        inset: auto !important;
        flex: 0 0 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        margin: 2px 0 8px calc((var(--ai5-rail) - 36px) / 2) !important;
        padding: 0 !important;
        place-self: auto !important;
        transform: none !important;
    }

    /* ---------- Scrollable navigation ---------- */
    #sidebar .nav-list,
    body.sidebar-expanded #sidebar .nav-list,
    body:not(.sidebar-expanded) #sidebar .nav-list {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 10px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scroll-padding-top: 6px !important;
        scroll-padding-bottom: 12px !important;
    }

    /* Section headings use the exact same x-origin as primary nav text. */
    body.sidebar-expanded #sidebar .nav-section-label {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: 20px !important;
        max-height: 20px !important;
        margin: 7px 0 4px !important;
        padding: 0 14px 0 calc(var(--ai5-rail) + var(--ai5-text-pad)) !important;
        line-height: 20px !important;
        text-align: left !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* ---------- Primary rows / rail alignment ---------- */
    #sidebar .nav-link,
    #sidebar .nav-group-title {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: var(--ai5-rail) minmax(0, 1fr) 34px !important;
        align-items: center !important;
        gap: 0 !important;
        transform: none !important;
    }

    /* Active / hover tile is mathematically centered in the 76px rail. */
    #sidebar .nav-link::before,
    #sidebar .nav-group-title::before {
        left: calc((var(--ai5-rail) - 40px) / 2) !important;
        top: 50% !important;
        width: 40px !important;
        height: 38px !important;
        margin: 0 !important;
        transform: translateY(-50%) !important;
        border-radius: 10px !important;
    }

    #sidebar .nav-link::after,
    #sidebar .nav-group-title::after {
        left: 0 !important;
        width: 3px !important;
        height: 22px !important;
    }

    #sidebar .nav-link > .nav-icon:first-child,
    #sidebar .nav-group-title > .nav-icon:first-child {
        position: relative !important;
        inset: auto !important;
        grid-column: 1 !important;
        justify-self: center !important;
        align-self: center !important;
        width: 18px !important;
        min-width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    #sidebar .nav-link:hover > .ai-pack-icon:first-child,
    #sidebar .nav-group-title:hover > .ai-pack-icon:first-child {
        transform: none !important;
    }

    body.sidebar-expanded #sidebar .nav-text {
        grid-column: 2 !important;
        justify-self: stretch !important;
        align-self: center !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 10px 0 var(--ai5-text-pad) !important;
        text-align: left !important;
        transform: none !important;
    }

    #sidebar .nav-group-title > .nav-icon:last-child {
        grid-column: 3 !important;
        justify-self: center !important;
        align-self: center !important;
        width: 11px !important;
        min-width: 11px !important;
        height: 11px !important;
        margin: 0 !important;
    }

    /* ---------- Submenus ---------- */
    #sidebar .nav-submenu,
    #sidebar .nav-group.open .nav-submenu,
    body:not(.sidebar-expanded) #sidebar .nav-submenu {
        width: auto !important;
        max-width: none !important;
        margin-left: calc(var(--ai5-rail) + var(--ai5-text-pad)) !important;
        margin-right: 14px !important;
        padding-left: 10px !important;
    }

    body.sidebar-expanded #sidebar .nav-group.open > .nav-submenu {
        max-height: 560px !important;
        margin-top: 2px !important;
        margin-bottom: 5px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        overflow: hidden !important;
    }

    #sidebar .nav-sublink {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 5px 8px !important;
        box-sizing: border-box !important;
        gap: 8px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.18 !important;
    }

    #sidebar .nav-sublink > span:first-child {
        flex: 0 0 22px !important;
        width: 22px !important;
        min-width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
    }

    /* ---------- Account footer ---------- */
    #sidebar .sidebar-user,
    body.sidebar-expanded #sidebar .sidebar-user,
    body:not(.sidebar-expanded) #sidebar .sidebar-user {
        position: relative !important;
        inset: auto !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        flex: 0 0 72px !important;
        width: 100% !important;
        min-width: 100% !important;
        height: 72px !important;
        min-height: 72px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: var(--ai5-rail) minmax(0, 1fr) 52px !important;
        align-items: center !important;
        gap: 0 !important;
        transform: none !important;
        border: 0 !important;
        background: #151a1f !important;
        overflow: hidden !important;
    }

    body.sidebar-expanded #sidebar .sidebar-user {
        background: linear-gradient(
            90deg,
            #151a1f 0,
            #151a1f var(--ai5-rail),
            #ffffff var(--ai5-rail),
            #ffffff 100%
        ) !important;
    }

    body.sidebar-expanded #sidebar .sidebar-user::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: var(--ai5-rail) !important;
        right: 0 !important;
        height: 1px !important;
        background: #e3e9ed !important;
        pointer-events: none !important;
    }

    #sidebar .sidebar-user .avatar {
        position: static !important;
        inset: auto !important;
        grid-column: 1 !important;
        justify-self: center !important;
        align-self: center !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        transform: none !important;
    }

    #sidebar .sidebar-user-copy {
        grid-column: 2 !important;
        align-self: center !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 8px 0 var(--ai5-text-pad) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        transform: translateX(-6px) !important;
    }

    body.sidebar-expanded #sidebar .sidebar-user-copy {
        transform: none !important;
    }

    #sidebar .sidebar-user-copy strong,
    #sidebar .sidebar-user-copy small {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left !important;
    }

    #sidebar .sidebar-user-copy strong {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    #sidebar .sidebar-user-copy small {
        margin-top: 3px !important;
        font-size: 9.5px !important;
        line-height: 1.25 !important;
    }

    #sidebar .sidebar-logout {
        position: static !important;
        inset: auto !important;
        grid-column: 3 !important;
        justify-self: center !important;
        align-self: center !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateX(-4px) !important;
    }

    body.sidebar-expanded #sidebar .sidebar-logout {
        transform: none !important;
    }
}

@media (max-width: 1040px) {
    #sidebar .brand-mark,
    #sidebar .brand-logo {
        position: static !important;
        inset: auto !important;
        justify-self: center !important;
        align-self: center !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    #sidebar .brand-logo-image {
        display: block !important;
        margin: 0 auto !important;
        object-position: 50% 50% !important;
        transform: none !important;
    }

    #sidebar .sidebar-user {
        position: relative !important;
        inset: auto !important;
        left: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        transform: none !important;
    }
}