/**
 * PMO live preview ? Tenali mesh canvas + Smart Migrate junction + hidden aside scrollbars.
 * UI only.
 */

:root {
  --app-shell-curve: 0.75rem;
  --app-shell-topbar-h: 69px;
  /* Soft frost ? mesh shows through so circular chrome chips read clearly */
  --app-shell-glass-fill: rgb(255 255 255 / 0.36);
  --pmo-page-gradient-base: #f7fafc;
  /* Soft mesh photo ? pale blue on white; covers full app canvas. */
  --pmo-page-gradient: url("/page-mesh-gradient.png?v=meshbg2");
  --pmo-page-gradient-scroll: url("/page-mesh-gradient.png?v=meshbg2");
}

.dark {
  --app-shell-glass-fill: rgb(15 23 42 / 0.62);
  --pmo-page-gradient-base: #0b1220;
  --pmo-page-gradient:
    radial-gradient(ellipse 38% 34% at 9% 6%, rgb(12 74 110 / 0.32) 0%, transparent 72%),
    radial-gradient(ellipse 28% 26% at 72% 4%, rgb(14 116 144 / 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 32% 28% at 92% 28%, rgb(30 58 95 / 0.28) 0%, transparent 70%),
    radial-gradient(ellipse 26% 24% at 18% 46%, rgb(8 47 73 / 0.26) 0%, transparent 72%),
    radial-gradient(ellipse 34% 30% at 86% 78%, rgb(14 116 144 / 0.2) 0%, transparent 68%),
    radial-gradient(ellipse 24% 22% at 8% 82%, rgb(12 74 110 / 0.24) 0%, transparent 70%),
    linear-gradient(180deg, #0b1220 0%, #0f172a 55%, #111827 100%);
  --pmo-page-gradient-scroll:
    radial-gradient(ellipse 42% 36% at 10% 4%, rgb(12 74 110 / 0.3) 0%, transparent 72%),
    radial-gradient(ellipse 38% 32% at 88% 12%, rgb(14 116 144 / 0.2) 0%, transparent 70%),
    linear-gradient(180deg, #0b1220 0%, #0f172a 55%, #111827 100%);
}

/* Full-app canvas ? mesh gradient photo behind glass chrome. */
#root > div.flex.h-screen,
#root > div.app-shell-canvas {
  background-color: var(--pmo-page-gradient-base) !important;
  background-image: var(--pmo-page-gradient) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

html,
body {
  background-color: var(--pmo-page-gradient-base) !important;
  background-image: var(--pmo-page-gradient) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

.dark #root > div.flex.h-screen,
.dark #root > div.app-shell-canvas,
.dark html,
.dark body {
  /* Keep dark theme on CSS mesh; photo is light-mode only. */
  background-image: var(--pmo-page-gradient) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/*
 * Shell glass L (expanded): ONE panel on [data-shell-glass-l]
 * (aside ? topbar ? 14px inner curve). Chrome-row / content-well stay clear.
 */
#root .app-shell-chrome-row,
#root > div.app-shell-canvas > div.flex.flex-1 {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

@media (min-width: 768px) {
  #root {
    --app-zoom: 1 !important;
    zoom: 1 !important;
  }

  #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) aside[data-app-shell-aside],
  #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) aside.flex-shrink-0.flex-col,
  #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) [data-app-shell-topbar],
  #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) .app-shell-glass-topbar {
    /* Glass lives on [data-shell-glass-l] ? keep chrome chrome clear. */
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) [data-shell-glass-l] {
    background: linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.48) 0%,
      rgba(255, 255, 255, 0.34) 55%,
      rgba(255, 255, 255, 0.4) 100%
    ) !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(28px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .dark #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) [data-shell-glass-l] {
    background: linear-gradient(
      155deg,
      rgba(15, 23, 42, 0.52) 0%,
      rgba(15, 23, 42, 0.36) 55%,
      rgba(15, 23, 42, 0.4) 100%
    ) !important;
    background-color: rgba(15, 23, 42, 0.4) !important;
  }

  #root [data-shell-glass-scoop],
  #root [data-shell-glass-corner] {
    display: none !important;
  }
}

/* Aside / brand stack ? above the glass L layer (glass is z-index: 1) */
#root aside.flex-shrink-0.flex-col,
#root aside[data-app-shell-aside],
#root .app-shell-glass,
#root [data-app-shell-brand] {
  border: 0 !important;
  border-right: 0 !important;
  position: relative !important;
  z-index: 40 !important;
}

.dark #root aside.flex-shrink-0.flex-col,
.dark #root aside[data-app-shell-aside],
.dark #root .app-shell-glass {
  border-right: 0 !important;
}

/*
 * Collapsed icon rail (Tenali): drop the solid chrome/aside panel so only
 * floating squircles sit on the mesh. Expanded sidebar keeps the panel above.
 *
 * Must beat `#root > div.app-shell-canvas > div.flex.flex-1` (higher
 * specificity than class-only chrome-row selectors).
 */
#root .app-shell-chrome-row.app-shell-chrome-row--icon-rail,
#root .app-shell-chrome-row--icon-rail,
#root > div.app-shell-canvas > div.flex.flex-1.app-shell-chrome-row--icon-rail,
#root > div.app-shell-canvas > div.app-shell-chrome-row.app-shell-chrome-row--icon-rail {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dark #root .app-shell-chrome-row.app-shell-chrome-row--icon-rail,
.dark #root .app-shell-chrome-row--icon-rail,
.dark #root > div.app-shell-canvas > div.flex.flex-1.app-shell-chrome-row--icon-rail,
.dark #root > div.app-shell-canvas > div.app-shell-chrome-row.app-shell-chrome-row--icon-rail {
  background: transparent !important;
}

@media (min-width: 768px) {
  #root .app-shell-chrome-row.app-shell-chrome-row--icon-rail,
  #root .app-shell-chrome-row--icon-rail,
  #root > div.app-shell-canvas > div.flex.flex-1.app-shell-chrome-row--icon-rail,
  #root > div.app-shell-canvas > div.app-shell-chrome-row.app-shell-chrome-row--icon-rail {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .dark #root .app-shell-chrome-row.app-shell-chrome-row--icon-rail,
  .dark #root .app-shell-chrome-row--icon-rail,
  .dark #root > div.app-shell-canvas > div.flex.flex-1.app-shell-chrome-row--icon-rail,
  .dark #root > div.app-shell-canvas > div.app-shell-chrome-row.app-shell-chrome-row--icon-rail {
    background: transparent !important;
  }
}

/* Collapsed rail: NO panel ? icons float on mesh (PMO reference). */
#root aside[data-app-shell-aside][data-sidebar-collapsed="true"],
#root .app-shell-chrome-row--icon-rail aside[data-app-shell-aside],
#root .app-shell-chrome-row--icon-rail aside.flex-shrink-0.flex-col {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  z-index: 50 !important;
}

.dark #root aside[data-app-shell-aside][data-sidebar-collapsed="true"],
.dark #root .app-shell-chrome-row--icon-rail aside[data-app-shell-aside],
.dark #root .app-shell-chrome-row--icon-rail aside.flex-shrink-0.flex-col {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

#root aside > div.pointer-events-none.absolute.blur-3xl {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Brand bands sit on the solid menu fill */
#root aside [data-app-shell-brand],
#root aside > div.relative.h-16 {
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dark #root aside [data-app-shell-brand],
.dark #root aside > div.relative.h-16 {
  background: transparent !important;
}

#root [data-testid="sidebar-brand"],
#root [data-testid="sidebar-brand"] > div {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dark #root [data-testid="sidebar-brand"],
.dark #root [data-testid="sidebar-brand"] > div {
  background: transparent !important;
}

/* Org mark tile ? frosted chip on glass (not opaque white slab) */
#root aside [data-testid="sidebar-org-logo"] {
  background: rgb(255 255 255 / 0.55) !important;
  border: 1px solid rgb(255 255 255 / 0.75) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.85) !important;
}

.dark #root aside [data-testid="sidebar-org-logo"] {
  background: rgb(255 255 255 / 0.1) !important;
  border-color: rgb(255 255 255 / 0.12) !important;
}

/* Top nav ? glass when expanded (see rules above); clear only on icon-rail */
#root .app-shell-chrome-row--icon-rail header[data-app-topbar],
#root .app-shell-chrome-row--icon-rail header[data-app-shell-topbar],
#root .app-shell-chrome-row--icon-rail .app-shell-glass-topbar {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.dark #root .app-shell-chrome-row--icon-rail header[data-app-topbar],
.dark #root .app-shell-chrome-row--icon-rail header[data-app-shell-topbar] {
  background: transparent !important;
}

/*
 * Concave junction (red mark):
 * Scoop on the content well BELOW the topbar ? aside ? topbar stay a
 * continuous L; chrome fill shows through the rounded cut ? inverted curve.
 */
main.flex-1.flex.flex-col.overflow-hidden,
main.app-shell-main {
  background: transparent !important;
  position: relative !important;
  border-top-left-radius: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

main.app-shell-main::before,
main.app-shell-main::after,
#root main.flex-1.flex.flex-col.overflow-hidden::before,
#root main.flex-1.flex.flex-col.overflow-hidden::after,
.app-shell-concave-tl,
.app-shell-concave-tl::before {
  display: none !important;
  content: none !important;
  box-shadow: none !important;
}

/*
 * Page well ? transparent so the mesh canvas shows through uniformly.
 * No diamond-glass box, no hatch, no facet overlay.
 */

#root [data-layout-page-scroll].app-shell-content-well,
#root [data-layout-page-scroll] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  isolation: isolate;
  backface-visibility: hidden;
}

/* Facet tile overlay removed ? plain gradient only */
#root [data-layout-page-scroll].app-shell-content-well::after {
  content: none !important;
  display: none !important;
}

#root [data-layout-page-scroll].app-shell-content-well::before,
#root [data-layout-page-scroll]::before,
#root [data-layout-page-scroll] > [data-layout-route-outlet]::before {
  content: none !important;
  display: none !important;
}

#root [data-layout-page-scroll] > [data-layout-route-outlet] {
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
  isolation: auto;
}

/* Collapsed icon rail: outlet scrolls; well stays a fixed flex clip. */
#root [data-layout-page-scroll][data-icon-rail="true"] > [data-layout-route-outlet],
#root .app-shell-chrome-row--icon-rail [data-layout-page-scroll] > [data-layout-route-outlet] {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  align-self: stretch !important;
  -webkit-overflow-scrolling: touch !important;
}

.dark #root [data-layout-page-scroll].app-shell-content-well,
.dark #root [data-layout-page-scroll] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.dark #root [data-layout-page-scroll].app-shell-content-well::after {
  content: none !important;
  display: none !important;
}

/* One scrollbar only ? shell chrome never scrolls; page well does. */
html,
body,
#root {
  height: 100% !important;
  overflow: hidden !important;
}

#root .app-shell-canvas,
#root .app-shell-chrome-row,
#root main.app-shell-main {
  overflow: hidden !important;
}

#root [data-layout-page-scroll],
#root .app-shell-content-well {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  /* Hide scrollbar ? scrolling still works (matches RM / aside). */
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
#root [data-layout-page-scroll]::-webkit-scrollbar,
#root .app-shell-content-well::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Header / topbar ? do NOT clear expanded glass here (icon-rail only). */
#root .app-shell-chrome-row--icon-rail [data-app-shell-topbar],
#root .app-shell-chrome-row--icon-rail .app-shell-glass-topbar {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dark #root .app-shell-chrome-row--icon-rail [data-app-shell-topbar],
.dark #root .app-shell-chrome-row--icon-rail .app-shell-glass-topbar {
  background: transparent !important;
}

@media (min-width: 768px) {
  /*
   * Body well: ALWAYS clear ? no white content panel.
   * Curve lives on the aside ? topbar glass L only (14px).
   */
  #root .app-shell-chrome-row [data-layout-page-scroll],
  #root .app-shell-chrome-row .app-shell-page-gradient,
  #root .app-shell-chrome-row .app-shell-content-well,
  #root [data-layout-page-scroll][data-icon-rail="true"],
  #root .app-shell-chrome-row--icon-rail .app-shell-content-well,
  #root .app-shell-chrome-row--icon-rail [data-layout-page-scroll] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
  }
}

/* Always allow body area to scroll (all breakpoints) */
#root [data-layout-page-scroll],
#root .app-shell-content-well {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  min-height: 0 !important;
}

/*
 * Resource Management ? lock the page well to the viewport so the glass
 * panel + inner cards end above the bottom edge (marked gap). Persons /
 * plan lists scroll inside the glass, not past it.
 */
#root [data-layout-page-scroll]:has([data-page="people"]),
#root [data-layout-page-scroll]:has([data-resource-plan-dense]),
#root .app-shell-content-well:has([data-page="people"]) {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

#root [data-layout-page-scroll]:has([data-page="people"]) > [data-layout-route-outlet],
#root [data-layout-page-scroll]:has([data-resource-plan-dense]) > [data-layout-route-outlet] {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  /* Do not override padding-top ? keep 4% title inset like other screens */
  padding-bottom: 0.75rem !important;
  box-sizing: border-box !important;
}

@media (min-width: 768px) {
  #root [data-layout-page-scroll]:has([data-page="people"]) > [data-layout-route-outlet],
  #root [data-layout-page-scroll]:has([data-resource-plan-dense]) > [data-layout-route-outlet] {
    padding-bottom: 0.875rem !important;
  }
}

#root [data-page="people"],
#root [data-resource-plan-dense],
#root .people-hub,
#root .people-hub-shell[data-testid="people-hub-glass-panel"],
#root .people-hub-content,
#root .people-hub-scroll {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
}

#root [data-layout-route-content]:has([data-page="people"]) {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#root [data-page="people"] {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

#root .people-hub-shell[data-testid="people-hub-glass-panel"] {
  overflow: hidden !important;
  border-radius: 16px !important;
}

/*
 * Resource Management ? hide scrollbars on the page well + hub scroller.
 * Keep overflow scrolling (do not lock the well to overflow:hidden ? that
 * collapsed the authenticated shell to an empty mesh canvas).
 */
#root .app-shell-content-well:has([data-page="people"]),
#root [data-layout-page-scroll]:has([data-page="people"]),
#root [data-people-hub-scroll],
#root .people-hub-scroll,
#root .people-hub,
#root .people-hub * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
#root .app-shell-content-well:has([data-page="people"])::-webkit-scrollbar,
#root [data-layout-page-scroll]:has([data-page="people"])::-webkit-scrollbar,
#root [data-people-hub-scroll]::-webkit-scrollbar,
#root .people-hub-scroll::-webkit-scrollbar,
#root .people-hub::-webkit-scrollbar,
#root .people-hub *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

#root .people-hub .recharts-responsive-container,
#root .people-hub .recharts-wrapper,
#root .people-hub .recharts-surface,
#root .people-hub .recharts-wrapper svg,
#root .people-hub .people-overview-chart-card .recharts-wrapper,
#root .people-hub [data-testid="people-overview-charts"] .recharts-surface {
  touch-action: pan-y !important;
  overscroll-behavior: contain;
}

#root .people-filter-select-content {
  border-radius: 8px !important;
}

/* Hide aside scrollbar ? scroll still works */
#root aside nav,
#root aside .app-shell-aside-nav,
#root aside [data-app-shell-aside-nav],
#root aside .overflow-y-auto {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#root aside nav::-webkit-scrollbar,
#root aside .app-shell-aside-nav::-webkit-scrollbar,
#root aside [data-app-shell-aside-nav]::-webkit-scrollbar,
#root aside .overflow-y-auto::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Sidebar resize handle ? visible hit target (do not kill opacity) */
#root aside [data-testid="sidebar-resize-handle"] {
  opacity: 1 !important;
  width: 12px !important;
  background: transparent !important;
  pointer-events: auto !important;
  cursor: col-resize !important;
}
#root aside [data-testid="sidebar-resize-handle"]:hover,
#root aside [data-testid="sidebar-resize-handle"]:active {
  background: rgb(15 23 42 / 0.06) !important;
}

html {
  font-size: clamp(15.5px, 0.42vw + 13.2px, 20px) !important;
  /* Shared open-palette chrome stroke (search field + dropdown + junction) */
  --pmo-palette-stroke-color: rgb(100 116 139 / 0.9);
  --pmo-palette-stroke-color-dark: rgb(148 163 184 / 0.75);
  --pmo-palette-stroke: 1px solid var(--pmo-palette-stroke-color);
  --pmo-palette-stroke-dark: 1px solid var(--pmo-palette-stroke-color-dark);
}

#root {
  --app-zoom: 1 !important;
  zoom: 1 !important;
}

@media print {
  #root {
    zoom: 1 !important;
  }
}

@media (min-width: 1536px) {
  [data-layout-page-scroll] > [data-layout-route-outlet] {
    padding-left: clamp(1.5rem, 1.2vw, 2.75rem) !important;
    padding-right: clamp(1.5rem, 1.2vw, 2.75rem) !important;
  }
}

/* Body content ? 94% width, even 3% gutters (page outlet only; never in-well rail). */
[data-layout-page-scroll] > [data-layout-route-outlet] {
  width: 94% !important;
  max-width: 94% !important;
  margin-left: 3% !important;
  margin-right: 3% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  padding-top: 4% !important;
}

/* Icon rail: page outlet only ? never the in-well rail strip. */
@media (min-width: 768px) {
  #root .app-shell-chrome-row--icon-rail [data-layout-page-scroll] > [data-layout-route-outlet],
  #root [data-layout-page-scroll][data-icon-rail="true"] > [data-layout-route-outlet] {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0.5rem !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #root [data-testid="in-well-collapsed-rail"] {
    width: 4.5rem !important;
    max-width: 4.5rem !important;
    min-width: 4.5rem !important;
    flex: 0 0 4.5rem !important;
    margin: 0 !important;
  }

  #root .app-shell-chrome-row--icon-rail .app-shell-content-well,
  #root [data-layout-page-scroll][data-icon-rail="true"].app-shell-content-well {
    margin-left: 0.875rem !important;
    margin-right: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    border-radius: 0.75rem !important;
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  #root .app-shell-chrome-row--icon-rail .app-shell-main,
  #root .app-shell-chrome-row--icon-rail main.app-shell-main {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    z-index: 1 !important;
  }
}


[data-layout-page-scroll] > [data-layout-route-outlet] > * {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Topbar search pill ? closed: soft frosted float (no hard border); open: continuous shell.
 * Width is capped to the flex slot beside the icon rail (not 52vw), so the pill
 * never overlaps bell / help / avatar on narrow viewports. */
header[data-app-topbar] [data-topbar-search-center] > div {
  max-width: min(640px, 100%) !important;
  width: 100% !important;
  min-width: 0 !important;
  pointer-events: auto !important;
}

header[data-app-topbar] [data-topbar-search-center] {
  position: relative !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  pointer-events: none !important;
}

/*
 * When open: keep the in-flow measure shell (same left/width as collapsed).
 * Do NOT switch to viewport-fixed full-bleed ? that thrash widened the bar.
 * Real search is portaled to body; this node stays as a width/position ghost.
 */
header[data-app-topbar][data-palette-open="true"] [data-topbar-search-center],
[data-topbar-search-center][data-palette-elevated="true"] {
  z-index: 100 !important;
  pointer-events: none !important;
}

header[data-app-topbar][data-palette-open="true"] [data-topbar-search-center] > div,
[data-topbar-search-center][data-palette-elevated="true"] > div {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 101 !important;
}

/* Portaled open search ? locked to measured collapsed rect */
.pmo-palette-search-layer,
[data-testid="palette-search-layer"] {
  z-index: 100 !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}
.pmo-palette-search-layer > div,
[data-testid="palette-search-layer"] > div {
  pointer-events: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Glass fade scrim when palette is open ? below search + dropdown */
.pmo-palette-scrim,
[data-testid="palette-scrim"] {
  background: rgb(15 23 42 / 0.28) !important;
  backdrop-filter: blur(10px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(112%) !important;
  animation: pmo-palette-scrim-in 180ms ease-out both !important;
  z-index: 80 !important;
}

.dark .pmo-palette-scrim,
.dark [data-testid="palette-scrim"] {
  background: rgb(2 6 23 / 0.45) !important;
}

@keyframes pmo-palette-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Closed = borderless but clearly visible floated pill */
[data-testid="palette-trigger"]:not([data-palette-open="true"]),
[data-tour="topbar-search"]:not([data-palette-open="true"]),
header[data-app-topbar] [data-tour="topbar-search"]:not([data-palette-open="true"]),
header[data-app-topbar] [data-testid="palette-trigger"]:not([data-palette-open="true"]) {
  max-width: none !important;
  width: 100% !important;
  height: 39px !important;
  border-top-left-radius: 9999px !important;
  border-top-right-radius: 9999px !important;
  border-bottom-left-radius: 9999px !important;
  border-bottom-right-radius: 9999px !important;
  background: rgb(255 255 255 / 0.88) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow:
    0 1px 2px rgb(15 23 42 / 0.05),
    0 6px 16px -8px rgb(15 23 42 / 0.12),
    inset 0 1px 0 rgb(255 255 255 / 0.9) !important;
  transform: translateY(-1px) !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  overflow: hidden !important;
  backdrop-filter: blur(18px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(118%) !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  transition:
    border-radius 200ms ease-out,
    background-color 200ms ease-out,
    backdrop-filter 200ms ease-out,
    box-shadow 200ms ease-out,
    transform 200ms ease-out !important;
}

[data-testid="palette-trigger"]:not([data-palette-open="true"]):hover,
[data-tour="topbar-search"]:not([data-palette-open="true"]):hover,
[data-tour="topbar-search"]:not([data-palette-open="true"]):focus-within,
header[data-app-topbar] [data-tour="topbar-search"]:not([data-palette-open="true"]):hover,
header[data-app-topbar] [data-testid="palette-trigger"]:not([data-palette-open="true"]):hover,
header[data-app-topbar] [data-tour="topbar-search"]:not([data-palette-open="true"]):focus-within {
  border: 0 !important;
  outline: none !important;
  background: rgb(255 255 255 / 0.95) !important;
  box-shadow:
    0 2px 4px rgb(15 23 42 / 0.06),
    0 8px 18px -8px rgb(15 23 42 / 0.14),
    inset 0 1px 0 rgb(255 255 255 / 0.95) !important;
  transform: translateY(-1px) !important;
}

[data-testid="palette-trigger"][data-palette-open="false"]:hover,
[data-tour="topbar-search"][data-palette-open="false"]:hover,
[data-tour="topbar-search"][data-palette-open="false"]:focus-within {
  background: rgb(255 255 255 / 0.95) !important;
  border: 0 !important;
  box-shadow:
    0 2px 4px rgb(15 23 42 / 0.06),
    0 8px 18px -8px rgb(15 23 42 / 0.14),
    inset 0 1px 0 rgb(255 255 255 / 0.95) !important;
}

.dark header[data-app-topbar] [data-testid="palette-trigger"]:not([data-palette-open="true"]),
.dark header[data-app-topbar] [data-tour="topbar-search"]:not([data-palette-open="true"]),
.dark [data-testid="palette-trigger"]:not([data-palette-open="true"]),
.dark [data-tour="topbar-search"]:not([data-palette-open="true"]) {
  background: rgb(30 41 59 / 0.88) !important;
  border: 0 !important;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.25),
    inset 0 1px 0 rgb(255 255 255 / 0.08) !important;
}

.dark header[data-app-topbar] [data-tour="topbar-search"]:not([data-palette-open="true"]):hover,
.dark header[data-app-topbar] [data-testid="palette-trigger"]:not([data-palette-open="true"]):hover,
.dark header[data-app-topbar] [data-tour="topbar-search"]:not([data-palette-open="true"]):focus-within,
.dark [data-testid="palette-trigger"]:not([data-palette-open="true"]):hover,
.dark [data-tour="topbar-search"]:not([data-palette-open="true"]):hover,
.dark [data-tour="topbar-search"]:not([data-palette-open="true"]):focus-within {
  background: rgb(51 65 85 / 0.95) !important;
  border: 0 !important;
}

/*
 * Open (clicked): border on field + dropdown as one shell.
 * Solid opaque fill so the field stays visible over the glass scrim.
 */
[data-testid="palette-trigger"][data-palette-open="true"],
[data-tour="topbar-search"][data-palette-open="true"],
header[data-app-topbar] [data-tour="topbar-search"][data-palette-open="true"],
header[data-app-topbar] [data-testid="palette-trigger"][data-palette-open="true"] {
  max-width: none !important;
  width: 100% !important;
  height: 39px !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  overflow: visible !important;
  outline: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  /* Outer stroke only ? no bottom line when dropdown is open */
  border-top: var(--pmo-palette-stroke) !important;
  border-left: var(--pmo-palette-stroke) !important;
  border-right: var(--pmo-palette-stroke) !important;
  border-bottom: 0 !important;
  background: rgb(255 255 255) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: 102 !important;
  isolation: isolate !important;
}

[data-testid="palette-trigger"][data-palette-open="true"]:hover,
[data-tour="topbar-search"][data-palette-open="true"]:hover,
[data-tour="topbar-search"][data-palette-open="true"]:focus-within,
header[data-app-topbar] [data-tour="topbar-search"][data-palette-open="true"]:hover,
header[data-app-topbar] [data-testid="palette-trigger"][data-palette-open="true"]:hover,
header[data-app-topbar] [data-tour="topbar-search"][data-palette-open="true"]:focus-within {
  background: rgb(255 255 255) !important;
  border-top: var(--pmo-palette-stroke) !important;
  border-left: var(--pmo-palette-stroke) !important;
  border-right: var(--pmo-palette-stroke) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.dark [data-testid="palette-trigger"][data-palette-open="true"],
.dark [data-tour="topbar-search"][data-palette-open="true"],
.dark header[data-app-topbar] [data-testid="palette-trigger"][data-palette-open="true"],
.dark header[data-app-topbar] [data-tour="topbar-search"][data-palette-open="true"],
.dark [data-testid="palette-trigger"][data-palette-open="true"]:hover,
.dark [data-tour="topbar-search"][data-palette-open="true"]:hover,
.dark [data-tour="topbar-search"][data-palette-open="true"]:focus-within,
.dark header[data-app-topbar] [data-testid="palette-trigger"][data-palette-open="true"]:hover,
.dark header[data-app-topbar] [data-tour="topbar-search"][data-palette-open="true"]:hover,
.dark header[data-app-topbar] [data-tour="topbar-search"][data-palette-open="true"]:focus-within {
  background: rgb(15 23 42) !important;
  border-top: var(--pmo-palette-stroke-dark) !important;
  border-left: var(--pmo-palette-stroke-dark) !important;
  border-right: var(--pmo-palette-stroke-dark) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}


/* Portaled open field ? outer stroke only; no bottom divider */
[data-testid="palette-search-layer"] > div[data-palette-open="true"] {
  border-top: var(--pmo-palette-stroke) !important;
  border-left: var(--pmo-palette-stroke) !important;
  border-right: var(--pmo-palette-stroke) !important;
  border-bottom: 0 !important;
  box-sizing: border-box !important;
}
.dark [data-testid="palette-search-layer"] > div[data-palette-open="true"] {
  border-top: var(--pmo-palette-stroke-dark) !important;
  border-left: var(--pmo-palette-stroke-dark) !important;
  border-right: var(--pmo-palette-stroke-dark) !important;
  border-bottom: 0 !important;
}
/* Input inside pill ? no competing chrome (topbar + portaled open field) */
[data-testid="palette-search-input"],
header[data-app-topbar] [data-testid="palette-search-input"],
header[data-app-topbar] [data-tour="topbar-search"] input,
[data-testid="palette-search-layer"] [data-tour="topbar-search"] input {
  height: 100% !important;
  max-width: none !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 13.5px !important;
  color: rgb(51 65 85) !important;
}

.dark [data-testid="palette-search-input"],
.dark header[data-app-topbar] [data-testid="palette-search-input"],
.dark header[data-app-topbar] [data-tour="topbar-search"] input,
.dark [data-testid="palette-search-layer"] [data-tour="topbar-search"] input {
  color: rgb(241 245 249) !important;
}

header[data-app-topbar] [data-tour="topbar-search"] input::placeholder,
[data-testid="palette-search-input"]::placeholder {
  color: rgb(148 163 184) !important;
}

.dark header[data-app-topbar] [data-tour="topbar-search"] input::placeholder,
.dark [data-testid="palette-search-input"]::placeholder {
  color: rgb(148 163 184) !important;
}

header[data-app-topbar] [data-tour="topbar-search"] kbd {
  background: rgb(241 245 249 / 0.9) !important;
  border: 0 !important;
  border-radius: 0.375rem !important;
  color: rgb(71 85 105) !important;
  box-shadow:
    0 1px 1px rgb(15 23 42 / 0.04),
    inset 0 1px 0 rgb(255 255 255 / 0.75) !important;
}

.dark header[data-app-topbar] [data-tour="topbar-search"] kbd {
  background: rgb(51 65 85 / 0.95) !important;
  color: rgb(226 232 240) !important;
  box-shadow:
    0 1px 1px rgb(0 0 0 / 0.25),
    inset 0 1px 0 rgb(255 255 255 / 0.08) !important;
}


/* Keep dropdown flush under the search field ? same left/width as collapsed bar */
[data-radix-popper-content-wrapper]:has([data-testid="command-palette"]) {
  margin: 0 !important;
  padding: 0 !important;
  z-index: 101 !important;
  position: fixed !important;
  left: var(--pmo-palette-left, 0) !important;
  /* Overlap under search ? covers subpixel gaps at 100% and lower browser zoom */
  top: calc(var(--pmo-palette-top, 0px) - 3px) !important;
  width: var(--pmo-palette-width, auto) !important;
  max-width: var(--pmo-palette-width, none) !important;
  min-width: 0 !important;
  transform: none !important;
  will-change: auto !important;
}

[data-testid="command-palette"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border-radius: 0 0 10px 10px !important;
  /* Continuous with search ? no top edge line */
  border-top-width: 0 !important;
  border-top-style: none !important;
  border-top-color: transparent !important;
  border-left: var(--pmo-palette-stroke) !important;
  border-right: var(--pmo-palette-stroke) !important;
  border-bottom: var(--pmo-palette-stroke) !important;
  background: rgb(255 255 255) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Shadow only below ? avoid a hard band under the search field */
  box-shadow: 0 18px 40px -22px rgb(15 23 42 / 0.22) !important;
  transform-origin: top center !important;
  overflow: hidden !important;
  z-index: 101 !important;
  box-sizing: border-box !important;
  /* Kill Tailwind animate-in/out so custom keyframes are the only animation */
  animation: none !important;
  --tw-enter-translate-x: 0 !important;
  --tw-enter-translate-y: 0 !important;
  --tw-exit-translate-x: 0 !important;
  --tw-exit-translate-y: 0 !important;
  --tw-enter-scale: 1 !important;
  --tw-exit-scale: 1 !important;
  --tw-enter-opacity: 1 !important;
  --tw-exit-opacity: 1 !important;
}


.dark [data-testid="command-palette"] {
  background: rgb(15 23 42) !important;
  border-top-width: 0 !important;
  border-top-style: none !important;
  border-top-color: transparent !important;
  border-left: var(--pmo-palette-stroke-dark) !important;
  border-right: var(--pmo-palette-stroke-dark) !important;
  border-bottom: var(--pmo-palette-stroke-dark) !important;
}

/* No divider between open search field and dropdown */
[data-testid="command-palette"] > .border-b,
[data-testid="command-palette"] > div.border-b,
.dark [data-testid="command-palette"] > .border-b,
.dark [data-testid="command-palette"] > div.border-b {
  border-bottom: 0 !important;
}
[data-testid="command-palette"] [cmdk-list],
[data-testid="command-palette"] [cmdk-group],
[data-testid="command-palette"] [cmdk-group-heading] {
  border-top: 0 !important;
  box-shadow: none !important;
}

/* Zoom-proof seam cover: white bridge under open search (any browser zoom) */
[data-testid="palette-search-layer"] > div[data-palette-open="true"]::after {
  content: "" !important;
  position: absolute !important;
  left: 1px !important;
  right: 1px !important;
  top: calc(100% - 2px) !important;
  height: 8px !important;
  background: rgb(255 255 255) !important;
  z-index: 103 !important;
  pointer-events: none !important;
}
.dark [data-testid="palette-search-layer"] > div[data-palette-open="true"]::after {
  background: rgb(15 23 42) !important;
}
[data-testid="command-palette"] {
  position: relative !important;
}
[data-testid="command-palette"]::before {
  content: "" !important;
  position: absolute !important;
  left: 1px !important;
  right: 1px !important;
  top: 0 !important;
  height: 6px !important;
  background: rgb(255 255 255) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}
.dark [data-testid="command-palette"]::before {
  background: rgb(15 23 42) !important;
}

/* Closing: round bottom corners to match top (10px) before pill swap */
[data-testid="palette-trigger"][data-palette-closing="true"],
[data-surface="topbar-search"][data-palette-closing="true"],
[data-testid="palette-search-layer"] > div[data-palette-closing="true"] {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  border-bottom: var(--pmo-palette-stroke) !important;
  transition:
    border-radius 280ms cubic-bezier(0.22, 1, 0.36, 1),
    border-bottom-color 200ms ease !important;
}
[data-testid="palette-search-layer"] > div[data-palette-closing="true"]::after {
  opacity: 0 !important;
  height: 0 !important;
}
.dark [data-testid="palette-trigger"][data-palette-closing="true"],
.dark [data-surface="topbar-search"][data-palette-closing="true"],
.dark [data-testid="palette-search-layer"] > div[data-palette-closing="true"] {
  border-bottom: var(--pmo-palette-stroke-dark) !important;
}

/* Force no bottom seam on open search (while expanded, not closing) */
[data-testid="palette-trigger"][data-palette-open="true"],
[data-surface="topbar-search"][data-palette-open="true"],
[data-testid="palette-search-layer"] > div[data-palette-open="true"] {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* Ultra-smooth expand / collapse from the search field edge (scaleY from top) */
@keyframes pmo-palette-open {
  from {
    opacity: 0;
    transform: translateY(-6px) scaleY(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

@keyframes pmo-palette-close {
  from {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
  to {
    opacity: 0;
    transform: translateY(-4px) scaleY(0.96);
  }
}

/* Higher specificity than the base animation:none so open/close always run.
   Radix Presence listens for animationend on these named animations. */
[data-testid="command-palette"][data-state="open"] {
  animation-name: pmo-palette-open !important;
  animation-duration: 380ms !important;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation-fill-mode: both !important;
  animation-iteration-count: 1 !important;
}

[data-testid="command-palette"][data-state="closed"] {
  animation-name: pmo-palette-close !important;
  animation-duration: 300ms !important;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
  animation-fill-mode: both !important;
  animation-iteration-count: 1 !important;
}

[data-testid="command-palette"] [cmdk-group-heading] {
  padding: 0.5rem 0.85rem !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: rgb(148 163 184) !important;
}

/* Full-bleed hover row ? no side gaps, 0 radius (yellow marks) */
[data-testid="command-palette"] [cmdk-item] {
  position: relative !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  padding: 0.65rem 0.85rem 0.65rem 1rem !important;
  text-transform: none !important;
  background: transparent !important;
  width: 100% !important;
}

[data-testid="command-palette"] [cmdk-item][data-selected="true"],
[data-testid="command-palette"] [cmdk-item][aria-selected="true"],
[data-testid="command-palette"] [cmdk-item]:hover {
  background: rgb(241 245 249) !important;
  border-radius: 0 !important;
}

.dark [data-testid="command-palette"] [cmdk-item][data-selected="true"],
.dark [data-testid="command-palette"] [cmdk-item][aria-selected="true"],
.dark [data-testid="command-palette"] [cmdk-item]:hover {
  background: rgb(255 255 255 / 0.08) !important;
}

[data-testid="command-palette"] [cmdk-item]::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 3.5px !important;
  border-radius: 9999px !important;
  background: transparent !important;
  transition: background 120ms ease !important;
}

[data-testid="command-palette"] [cmdk-item][data-selected="true"]::before,
[data-testid="command-palette"] [cmdk-item][aria-selected="true"]::before,
[data-testid="command-palette"] [cmdk-item]:hover::before {
  background: #f97316 !important;
}

/* Hide palette list scrollbar ? scrolling still works */
[data-testid="command-palette"] [cmdk-list],
[data-testid="command-palette"] .app-shell-palette-list {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

[data-testid="command-palette"] [cmdk-list]::-webkit-scrollbar,
[data-testid="command-palette"] .app-shell-palette-list::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Aside section headings + collapse pill ? glass pill spans icon, label, and chevron */
#root aside [data-testid^='sidebar-section-toggle-'],
#root aside [data-sidebar-section-heading],
#root aside [data-testid="sidebar-collapse-toggle"],
#root aside [data-sidebar-collapse-pill] {
  color: #0f172a !important;
  background: rgb(255 255 255 / 0.55) !important;
  border: 1px solid rgb(255 255 255 / 0.85) !important;
  border-radius: 9999px !important;
  backdrop-filter: blur(20px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(118%) !important;
  box-shadow:
    0 1px 2px rgb(15 23 42 / 0.06),
    0 8px 20px -12px rgb(15 23 42 / 0.12) !important;
  padding: 0.375rem 0.625rem !important;
}

.dark #root aside [data-testid^='sidebar-section-toggle-'],
.dark #root aside [data-sidebar-section-heading],
.dark #root aside [data-testid="sidebar-collapse-toggle"],
.dark #root aside [data-sidebar-collapse-pill] {
  color: #f1f5f9 !important;
  background: rgb(255 255 255 / 0.08) !important;
  border-color: rgb(255 255 255 / 0.12) !important;
}

#root aside [data-testid^='sidebar-section-'] > button span.whitespace-nowrap {
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #0f172a !important;
}

.dark #root aside [data-testid^='sidebar-section-'] > button span.whitespace-nowrap {
  color: #f8fafc !important;
}

/* Sub-section headings ? Favorites reference (label + chevron) */
#root aside [data-testid^='nav-sublabel-'] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-left: 0.625rem !important;
  padding-right: 0.625rem !important;
  margin-left: 0 !important;
  margin-top: 0.35rem !important;
}
#root aside [data-testid^='nav-sublabel-'] > span {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #1e293b !important;
}
.dark #root aside [data-testid^='nav-sublabel-'] > span {
  color: #cbd5e1 !important;
}
#root aside [data-app-shell-aside-nav] a[data-tour^='sidebar-nav-link-'],
#root aside [data-app-shell-aside-nav] [data-testid^='nav-link-disabled-'] {
  margin-left: 0 !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  /* +3px row height vs Tailwind py-1.5 (0.375rem); keeps icon/label centered */
  padding-block: calc(0.375rem + 1.5px) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  color: #0f172a !important;
  overflow: hidden !important;
  border-radius: 9999px !important;
}
.dark #root aside [data-app-shell-aside-nav] a[data-tour^='sidebar-nav-link-'],
.dark #root aside [data-app-shell-aside-nav] [data-testid^='nav-link-disabled-'] {
  color: #e2e8f0 !important;
}
#root aside [data-app-shell-aside-nav] a[data-tour^='sidebar-nav-link-']:has([data-active-nav-pill]) {
  color: #fff !important;
  font-weight: 500 !important;
}
#root aside [data-app-shell-aside-nav] a[data-tour^='sidebar-nav-link-'] svg,
#root aside [data-app-shell-aside-nav] [data-testid^='nav-link-disabled-'] svg {
  width: 14px !important;
  height: 14px !important;
  color: #1e293b !important;
}
.dark #root aside [data-app-shell-aside-nav] a[data-tour^='sidebar-nav-link-'] svg,
.dark #root aside [data-app-shell-aside-nav] [data-testid^='nav-link-disabled-'] svg {
  color: #cbd5e1 !important;
}
#root aside [data-app-shell-aside-nav] a[data-tour^='sidebar-nav-link-']:has([data-active-nav-pill]) svg {
  color: #fff !important;
}

/* Active aside nav pill ? stadium / pill like reference (full round + primary) */
#root aside [data-active-nav-pill] {
  border-radius: 9999px !important;
  background: hsl(var(--primary)) !important;
  box-shadow: none !important;
}

/* Hero / kit action pills ? login blue, not grey or violet */
[data-hero-primary][data-hero-tone="purple"],
[data-hero-tone="purple"] {
  color: #fff !important;
  background: linear-gradient(90deg, #0369a1 0%, #38bdf8 100%) !important;
  box-shadow: 0 4px 12px rgb(3 105 161 / 0.28) !important;
  border: 0 !important;
}
[data-hero-tone="teal"] {
  color: #fff !important;
  background: linear-gradient(90deg, #1E7E6A 0%, #36D1B1 100%) !important;
  box-shadow: 0 4px 12px rgb(30 126 106 / 0.28) !important;
  border: 0 !important;
}
[data-hero-tone="orange"] {
  color: #fff !important;
  background: linear-gradient(90deg, #C44C10 0%, #F98740 100%) !important;
  box-shadow: 0 4px 12px rgb(196 76 16 / 0.28) !important;
  border: 0 !important;
}

/* Kit / dialog action pills that use the same tones */
[data-action-tone="teal"] {
  color: #fff !important;
  background: linear-gradient(90deg, #1E7E6A 0%, #36D1B1 100%) !important;
  box-shadow: 0 4px 12px rgb(30 126 106 / 0.28) !important;
  border: 0 !important;
}
[data-action-tone="orange"] {
  color: #fff !important;
  background: linear-gradient(90deg, #C44C10 0%, #F98740 100%) !important;
  box-shadow: 0 4px 12px rgb(196 76 16 / 0.28) !important;
  border: 0 !important;
}
[data-action-tone="purple"] {
  color: #fff !important;
  background: linear-gradient(90deg, #0369a1 0%, #38bdf8 100%) !important;
  box-shadow: 0 4px 12px rgb(3 105 161 / 0.28) !important;
  border: 0 !important;
}

/* QuantumBay FAB ? no pop rings / bounce circles (glow only on the button). */
[data-testid="dashboard-quantumbay-fab"] {
  border-color: rgb(125 211 252 / 0.55) !important;
  background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 48%, #38bdf8 100%) !important;
  box-shadow: 0 8px 20px -6px rgb(3 105 161 / 0.4) !important;
  animation: quantumbayGlow 2.6s ease-in-out infinite !important;
  transform: none !important;
}

.quantumbay-fab-bounce {
  animation: quantumbayGlow 2.6s ease-in-out infinite !important;
  transform: none !important;
}

.quantumbay-fab-pop-ring,
.quantumbay-fab-pop-ring--delay {
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Dashboard ? glass shells (idle). Lighter blur still reads as glass; full
 * live blur on every card is what made scroll feel laggy. */
/* Dashboard glass shells ? steady frosted look (no scroll solidify flash). */
html:not(.dark) [data-page="dashboard"] [data-hero-kpi-glass] {
  border-radius: 1.5rem !important;
  border: 1px solid rgb(255 255 255 / 0.65) !important;
  background: rgba(255, 255, 255, 0.34) !important;
  backdrop-filter: blur(10px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.7) inset,
    0 10px 40px -16px rgb(15 23 42 / 0.14) !important;
  padding: 0.75rem !important;
}
@media (min-width: 640px) {
  html:not(.dark) [data-page="dashboard"] [data-hero-kpi-glass] {
    padding: 1rem !important;
  }
}

html:not(.dark) [data-page="dashboard"] .dashboard-page-card {
  background: rgba(255, 255, 255, 0.34) !important;
  backdrop-filter: blur(10px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  border-color: rgb(255 255 255 / 0.65) !important;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.65) inset,
    0 12px 32px -18px rgb(15 23 42 / 0.16) !important;
}

/* Rest only ? leave :hover free for purpose-color fills (Tailwind hover:bg-*). */
html:not(.dark) [data-page="dashboard"] [data-hero-kpi-glass] a[data-testid^="hero-kpi-"]:not(:hover),
html:not(.dark) [data-page="dashboard"] .dashboard-kpi-tile:not(:hover),
html:not(.dark) [data-page="dashboard"] [data-testid="watchtower-kpi-row"] [data-density]:not(:hover),
html:not(.dark) [data-page="dashboard"] [data-testid="programme-health-status-list"],
html:not(.dark) [data-page="dashboard"] [data-testid="portfolio-health-status-list"],
html:not(.dark) [data-page="dashboard"] [data-testid="watchtower-milestone-table"],
html:not(.dark) [data-page="dashboard"] [data-testid="watchtower-timeline-caption"] {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgb(226 232 240 / 0.95) !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04) !important;
}

html:not(.dark) [data-page="dashboard"] [data-testid="watchtower-timeline-caption"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html:not(.dark) [data-page="dashboard"] [data-testid="watchtower-status-badge-onTrack"],
html:not(.dark) [data-page="dashboard"] [data-testid="watchtower-status-badge-atRisk"],
html:not(.dark) [data-page="dashboard"] [data-testid="watchtower-status-badge-blocked"] {
  background: #ffffff !important;
  border-color: rgb(226 232 240 / 0.95) !important;
}

/* Kill nested ?number box? chrome inside KPI tiles (value + % pills). */
html:not(.dark) [data-page="dashboard"] .dashboard-kpi-tile [class*="rounded-2xl"][class*="ring-1"],
html:not(.dark) [data-page="dashboard"] .dashboard-kpi-tile [class*="rounded-lg"][class*="ring-1"],
html:not(.dark) [data-page="dashboard"] [data-testid^="hero-kpi-"] [class*="rounded-2xl"][class*="ring-1"],
html:not(.dark) [data-page="dashboard"] [data-testid^="hero-kpi-"] [class*="rounded-lg"][class*="ring-1"] {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-radius: 0 !important;
  min-width: 0 !important;
}

/* Timeline strip under watchtower ? solid white upper layer */
html:not(.dark) [data-page="dashboard"] [data-testid="watchtower-timeline"] {
  background: transparent !important;
}
html:not(.dark) [data-page="dashboard"] [data-testid="dashboard-milestone-watchtower"] > .mt-2 > .shrink-0.rounded-xl,
html:not(.dark) [data-page="dashboard"] [data-testid="dashboard-milestone-watchtower"] .mt-2.shrink-0.rounded-xl {
  background: #ffffff !important;
  border-color: rgb(226 232 240 / 0.95) !important;
}

/* KPI row matches timeline/table width (no side inset) */
html:not(.dark) [data-page="dashboard"] [data-testid="watchtower-kpi-row"],
html.dark [data-page="dashboard"] [data-testid="watchtower-kpi-row"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Milestone list reserves ~5 rows */
html:not(.dark) [data-page="dashboard"] [data-testid="watchtower-milestone-list"] {
  min-height: 14rem !important;
}

/* Portfolio / programme right-side status/% pills ? bright white */
html:not(.dark) [data-page="dashboard"] [data-portfolio-status-row] > span,
html:not(.dark) [data-page="dashboard"] [data-programme-status-row] > span {
  background: #ffffff !important;
  color: rgb(15 23 42) !important;
  border: 1px solid rgb(226 232 240 / 0.95) !important;
  box-shadow: none !important;
}

/* No visible scrollbars on portfolio / programme / watchtower lists */
html:not(.dark) [data-page="dashboard"] [data-testid="portfolio-health-status-scroll"],
html:not(.dark) [data-page="dashboard"] [data-testid="programme-health-status-scroll"],
html:not(.dark) [data-page="dashboard"] [data-testid="watchtower-milestone-list"],
html.dark [data-page="dashboard"] [data-testid="portfolio-health-status-scroll"],
html.dark [data-page="dashboard"] [data-testid="programme-health-status-scroll"],
html.dark [data-page="dashboard"] [data-testid="watchtower-milestone-list"] {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html:not(.dark) [data-page="dashboard"] [data-testid="portfolio-health-status-scroll"]::-webkit-scrollbar,
html:not(.dark) [data-page="dashboard"] [data-testid="programme-health-status-scroll"]::-webkit-scrollbar,
html:not(.dark) [data-page="dashboard"] [data-testid="watchtower-milestone-list"]::-webkit-scrollbar,
html.dark [data-page="dashboard"] [data-testid="portfolio-health-status-scroll"]::-webkit-scrollbar,
html.dark [data-page="dashboard"] [data-testid="programme-health-status-scroll"]::-webkit-scrollbar,
html.dark [data-page="dashboard"] [data-testid="watchtower-milestone-list"]::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Donut centers ? no white number box behind counts */
html:not(.dark) [data-page="dashboard"] [data-testid="portfolio-progress-gauge"] [class*="rounded-2xl"],
html:not(.dark) [data-page="dashboard"] [data-testid="programme-health-gauge"] [class*="rounded-2xl"],
html:not(.dark) [data-page="dashboard"] [data-testid="watchtower-status-health-ring"] [class*="rounded-full"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
  padding: 0 !important;
}

/* Status health panel ? bright white box */
html:not(.dark) [data-page="dashboard"] [data-testid="watchtower-status-health"] {
  background: #ffffff !important;
  border: 1px solid rgb(226 232 240 / 0.95) !important;
  border-radius: 0.75rem !important;
  padding: 0.5rem 0.625rem !important;
}
html:not(.dark) [data-page="dashboard"] [data-testid="watchtower-status-total"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
}

/* My Tasks / Meetings content ? bright white panel */
html:not(.dark) [data-page="dashboard"] [data-testid="my-work-content-panel"],
html:not(.dark) [data-page="dashboard"] [data-testid="dashboard-my-tasks-snapshot"] {
  background: #ffffff !important;
  border-radius: 0.75rem !important;
}
html:not(.dark) [data-page="dashboard"] [data-testid="my-work-content-panel"] {
  border: 1px solid rgb(226 232 240 / 0.95) !important;
  padding: 0.5rem !important;
}

/* Dashboard segmented toggles ? same primary as aside Dashboard nav pill */
html:not(.dark) [data-page="dashboard"] {
  --dashboard-toggle-active: hsl(var(--primary));
}
html:not(.dark) [data-page="dashboard"] [data-testid="my-work-tabs"],
html:not(.dark) [data-page="dashboard"] [data-testid="dashboard-calendar-view-toggle"],
html:not(.dark) [data-page="dashboard"] [data-testid="dashboard-calendar-scope-toggle"] {
  background: rgb(241 245 249 / 0.85) !important;
  border: 1px solid rgb(226 232 240 / 0.9) !important;
}
html:not(.dark) [data-page="dashboard"] [data-testid="my-work-tabs"] button,
html:not(.dark) [data-page="dashboard"] [data-testid="dashboard-calendar-view-toggle"] button,
html:not(.dark) [data-page="dashboard"] [data-testid="dashboard-calendar-scope-toggle"] button {
  background: transparent !important;
  color: rgb(100 116 139) !important;
  box-shadow: none !important;
}
html:not(.dark) [data-page="dashboard"] [data-testid="my-work-tabs"] button[data-state="active"],
html:not(.dark) [data-page="dashboard"] [data-testid="dashboard-calendar-view-toggle"] button[data-state="active"],
html:not(.dark) [data-page="dashboard"] [data-testid="dashboard-calendar-view-toggle"] button[aria-selected="true"],
html:not(.dark) [data-page="dashboard"] [data-testid="dashboard-calendar-scope-toggle"] button[data-state="active"],
html:not(.dark) [data-page="dashboard"] [data-testid="calendar-view-calendar"][aria-selected="true"],
html:not(.dark) [data-page="dashboard"] [data-testid="calendar-view-gantt"][aria-selected="true"] {
  background: var(--dashboard-toggle-active) !important;
  color: hsl(var(--primary-foreground)) !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.12) !important;
}

/* Universal segmented toggles ? primary blue active (app-wide) */
html:not(.dark) {
  --app-toggle-active: hsl(var(--primary));
  --app-toggle-active-fg: hsl(var(--primary-foreground));
}
html:not(.dark) [data-segmented-toggle] button[data-state="active"],
html:not(.dark) [data-segmented-toggle] button[aria-selected="true"],
html:not(.dark) [data-segmented-toggle] [data-state="active"],
html:not(.dark) [data-testid$="-view-toggle"] button[data-state="active"],
html:not(.dark) [data-testid$="-view-toggle"] button[aria-selected="true"],
html:not(.dark) [data-testid="timesheet-view-toggle"] button[data-state="active"],
html:not(.dark) [data-testid="timesheet-view-toggle"] button[aria-selected="true"],
html:not(.dark) [data-testid="mine-view-toggle"] button[data-state="active"],
html:not(.dark) [data-testid="mine-view-toggle"] button[aria-selected="true"],
html:not(.dark) [data-testid^="view-mode-"][data-state="active"],
html:not(.dark) [data-testid^="view-mode-"][aria-selected="true"],
html:not(.dark) [data-testid="my-tasks-toolbar"] [role="group"] button:has(.absolute),
html:not(.dark) [data-testid="my-tasks-toolbar"] [data-testid^="view-"].bg-primary,
html:not(.dark) [data-testid="my-tasks-toolbar"] [data-testid^="view-"][class*="bg-primary"] {
  background: var(--app-toggle-active) !important;
  color: var(--app-toggle-active-fg) !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.12) !important;
}
html:not(.dark) [data-testid="my-tasks-toolbar"] [role="group"] button:has(.absolute) span {
  color: var(--app-toggle-active-fg) !important;
}
html:not(.dark) [data-testid="my-tasks-toolbar"] [role="group"] button > div.absolute {
  background: var(--app-toggle-active) !important;
}

/* Calendar outline toolbar buttons ? match inactive toggle (neutral, not blue-grey) */
html:not(.dark) [data-page="dashboard"] [data-testid="dashboard-calendar-today"],
html:not(.dark) [data-page="dashboard"] [data-testid="dashboard-calendar-status-filter"],
html:not(.dark) [data-page="dashboard"] [data-testid="dashboard-calendar-view-person"] {
  border-color: rgb(226 232 240 / 0.95) !important;
  color: rgb(100 116 139) !important;
  background: rgb(241 245 249 / 0.85) !important;
}

/* Calendar weekday cells ? bright white at rest; hover uses purpose primary fill */
html:not(.dark) [data-page="dashboard"] [data-testid="dashboard-calendar-upcoming"] .grid.grid-cols-7 > div[class*="rounded-xl"]:not([data-weekend="true"]):not([data-today="true"]):not(:hover) {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

html:not(.dark) [data-page="dashboard"] [data-testid="dashboard-calendar-upcoming"] .grid.grid-cols-7 > div[class*="rounded-xl"]:not([data-weekend="true"]):hover {
  background: hsl(var(--primary)) !important;
  background-color: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  color: #ffffff !important;
}

/* Fri / Sat off-days ? greyed */
html:not(.dark) [data-page="dashboard"] [data-testid="dashboard-calendar-upcoming"] [data-weekend="true"]:not([data-today="true"]),
html:not(.dark) [data-page="dashboard"] [data-testid="dashboard-calendar-upcoming"] [data-weekend-header="true"] {
  background: rgb(241 245 249) !important;
  background-color: rgb(241 245 249) !important;
  color: rgb(100 116 139) !important;
}

/* Today ? bright white cell, blue outline (not filled blue); hover fills primary */
html:not(.dark) [data-page="dashboard"] [data-testid="dashboard-calendar-upcoming"] [data-today="true"]:not(:hover) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 2px solid hsl(var(--primary)) !important;
  box-shadow: none !important;
}

html:not(.dark) [data-page="dashboard"] [data-testid="dashboard-calendar-upcoming"] [data-today="true"]:hover {
  background: hsl(var(--primary)) !important;
  background-color: hsl(var(--primary)) !important;
  border: 2px solid hsl(var(--primary)) !important;
  color: #ffffff !important;
}

/* Today badge on hover: white disc + primary day number (not white-on-white). */
html:not(.dark) [data-page="dashboard"] [data-testid="dashboard-calendar-upcoming"] [data-today="true"]:hover [data-calendar-day-num] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: hsl(var(--primary)) !important;
}

html:not(.dark) [data-page="dashboard"] [data-testid^="calendar-event-"] {
  background: #ffffff !important;
  border: 1px solid rgb(226 232 240 / 0.75) !important;
}

/* Keep event chip readable on primary cell hover (tinted rest color returns) */
html:not(.dark) [data-page="dashboard"] [data-testid="dashboard-calendar-upcoming"] .grid.grid-cols-7 > div[class*="rounded-xl"]:hover [data-testid^="calendar-event-"] {
  background: rgb(255 255 255 / 0.95) !important;
  border-color: rgb(255 255 255 / 0.55) !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.12) !important;
}

/* Weekly Highlights ? Needs attention bright white */
html:not(.dark) [data-page="dashboard"] [data-testid="weekly-log-action-queue-scroll"] {
  background: #ffffff !important;
  border-color: rgb(226 232 240 / 0.95) !important;
  border-radius: 0.75rem !important;
}

/* Primary overview heroes (My Tasks, Timesheets, ?) ? 16px like Projects blue header.
 * Exclude split glass heroes: they use data-hero-split="gradient-glass". */
html:not(.dark) [data-hero-variant="overview"][data-hero-surface="primary"]:not([data-hero-split="gradient-glass"]),
html:not(.dark) [data-testid="my-tasks-hero"],
html:not(.dark) [data-testid="timesheets-hero"],
html:not(.dark) [data-testid="my-time-off-hero"],
html:not(.dark) [data-testid="my-approvals-hero"],
html:not(.dark) [data-testid="meetings-hero"],
html:not(.dark) [data-testid="notifications-hero"],
html:not(.dark) [data-testid="initiatives-hero"],
html:not(.dark) [data-testid="resource-management-hero"],
html:not(.dark) [data-testid="raid-hero"],
html:not(.dark) [data-testid="financials-hero"],
html:not(.dark) [data-testid="reports-hero"],
html:not(.dark) [data-testid="document-library-hero"],
html:not(.dark) [data-testid="weekly-logs-hero"],
html:not(.dark) [data-testid="highlights-hero"],
html:not(.dark) [data-testid="activity-hero"],
html:not(.dark) [data-testid="ccb-hero"],
html:not(.dark) [data-testid="lessons-hero"],
html:not(.dark) [data-testid="governance-hero"],
html:not(.dark) [data-testid="templates-hero"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55%),
    hsl(var(--primary)) !important;
  border: 1px solid rgb(255 255 255 / 0.28) !important;
  border-radius: 16px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 18px 44px -20px rgba(15, 23, 42, 0.42) !important;
}
html:not(.dark) [data-hero-variant="overview"][data-hero-surface="primary"] h1,
html:not(.dark) [data-hero-variant="overview"][data-hero-surface="primary"] h1 span,
html:not(.dark) [data-testid="my-tasks-hero"] h1,
html:not(.dark) [data-testid="my-tasks-hero"] h1 span,
html:not(.dark) [data-testid="timesheets-hero"] h1,
html:not(.dark) [data-testid="timesheets-hero"] h1 span,
html:not(.dark) [data-testid="my-time-off-hero"] h1,
html:not(.dark) [data-testid="my-time-off-hero"] h1 span,
html:not(.dark) [data-testid="my-approvals-hero"] h1,
html:not(.dark) [data-testid="my-approvals-hero"] h1 span,
html:not(.dark) [data-testid="meetings-hero"] h1,
html:not(.dark) [data-testid="meetings-hero"] h1 span,
html:not(.dark) [data-testid="notifications-hero"] h1,
html:not(.dark) [data-testid="notifications-hero"] h1 span,
html:not(.dark) [data-testid="portfolios-hero"] h1,
html:not(.dark) [data-testid="portfolios-hero"] h1 span,
html:not(.dark) [data-testid="programmes-hero"] h1,
html:not(.dark) [data-testid="programmes-hero"] h1 span,
html:not(.dark) [data-testid="projects-hero"] h1,
html:not(.dark) [data-testid="projects-hero"] h1 span,
html:not(.dark) [data-testid="initiatives-hero"] h1,
html:not(.dark) [data-testid="initiatives-hero"] h1 span,
html:not(.dark) [data-testid="resource-management-hero"] h1,
html:not(.dark) [data-testid="resource-management-hero"] h1 span {
  color: #ffffff !important;
}

/* Title trailing controls (toggles) sit beside h1 ? never inherit white title color */
html:not(.dark) [data-hero-title-trailing] button[data-state="active"],
html:not(.dark) [data-hero-title-trailing] button[aria-selected="true"],
html:not(.dark) [data-hero-title-trailing] button[data-state="active"] span,
html:not(.dark) [data-hero-title-trailing] button[aria-selected="true"] span,
html:not(.dark) [data-hero-title-trailing] button[data-state="active"] *,
html:not(.dark) [data-hero-title-trailing] button[aria-selected="true"] * {
  color: hsl(var(--primary)) !important;
}
html:not(.dark) [data-testid="financials-view-toggle"] button[data-state="active"],
html:not(.dark) [data-testid="financials-view-toggle"] button[aria-selected="true"] {
  background: #ffffff !important;
  color: hsl(var(--primary)) !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.12) !important;
}
html:not(.dark) [data-testid="financials-view-toggle"] button[data-state="active"] *,
html:not(.dark) [data-testid="financials-view-toggle"] button[aria-selected="true"] * {
  color: hsl(var(--primary)) !important;
  stroke: hsl(var(--primary)) !important;
}
html:not(.dark) [data-testid="financials-view-toggle"] button[data-state="inactive"],
html:not(.dark) [data-testid="financials-view-toggle"] button[aria-selected="false"] {
  background: transparent !important;
  color: rgb(255 255 255 / 0.85) !important;
  box-shadow: none !important;
}
html:not(.dark) [data-testid="financials-view-toggle"] button[data-state="inactive"] *,
html:not(.dark) [data-testid="financials-view-toggle"] button[aria-selected="false"] * {
  color: inherit !important;
  stroke: currentColor !important;
}

/* Highlights week history nav ? frosted white/blue like other hero CTAs */
html:not(.dark) [data-testid="highlights-hero"] [data-highlights-nav] {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
html:not(.dark) [data-testid="highlights-hero"] [data-highlights-nav] button,
html:not(.dark) [data-testid="highlights-hero"] [data-highlights-nav] button *,
html:not(.dark) [data-testid="highlights-hero"] [data-testid="week-history-trigger"],
html:not(.dark) [data-testid="highlights-hero"] [data-testid="week-history-trigger"] * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
html:not(.dark) [data-testid="highlights-hero"] [data-testid="week-history-trigger"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html:not(.dark) [data-testid="highlights-hero"] [data-highlights-nav] button:hover,
html:not(.dark) [data-testid="highlights-hero"] [data-testid="week-history-trigger"]:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

/* Highlights audience segment on primary blue hero */
html:not(.dark) [data-testid="highlights-hero"] [data-highlights-audience] button[data-state="active"],
html:not(.dark) [data-testid="highlights-hero"] [data-highlights-audience] button[aria-pressed="true"] {
  background: #ffffff !important;
  color: hsl(var(--primary)) !important;
}
html:not(.dark) [data-testid="highlights-hero"] [data-highlights-audience] button[data-state="inactive"],
html:not(.dark) [data-testid="highlights-hero"] [data-highlights-audience] button[aria-pressed="false"] {
  background: transparent !important;
  color: rgb(255 255 255 / 0.9) !important;
}
html:not(.dark) [data-testid="highlights-hero"] [data-highlights-language] {
  color: rgb(255 255 255 / 0.92) !important;
  border-color: rgb(255 255 255 / 0.35) !important;
}

/* Financials / meetings hero action cluster ? breathing room from edge */
html:not(.dark) [data-testid="financials-hero-toolbar"],
html:not(.dark) [data-testid="meetings-hero-toolbar"],
html:not(.dark) [data-testid="highlights-hero-toolbar"] {
  padding-inline-end: 0.125rem;
}
html:not(.dark) [data-testid="financials-hero-toolbar"] [data-print-hide],
html:not(.dark) [data-testid="highlights-hero-toolbar"] > div {
  gap: 0.5rem;
}
html:not(.dark) [data-hero-variant="overview"][data-hero-surface="primary"] p,
html:not(.dark) [data-testid="my-tasks-hero"] p,
html:not(.dark) [data-testid="timesheets-hero"] p,
html:not(.dark) [data-testid="my-time-off-hero"] p,
html:not(.dark) [data-testid="my-approvals-hero"] p,
html:not(.dark) [data-testid="meetings-hero"] p,
html:not(.dark) [data-testid="notifications-hero"] p,
html:not(.dark) [data-testid="portfolios-hero"] p,
html:not(.dark) [data-testid="programmes-hero"] p,
html:not(.dark) [data-testid="projects-hero"] p,
html:not(.dark) [data-testid="initiatives-hero"] p,
html:not(.dark) [data-testid="resource-management-hero"] p {
  color: rgb(255 255 255 / 0.78) !important;
}
/* Primary overview heroes ? no accent underline under the title */
html:not(.dark) [data-hero-variant="overview"][data-hero-surface="primary"] .h-\[3px\].rounded-full,
html:not(.dark) [data-testid="timesheets-hero"] .h-\[3px\].w-\[52px\],
html:not(.dark) [data-testid="my-tasks-hero"] .h-\[3px\].w-\[52px\],
html:not(.dark) [data-testid="my-time-off-hero"] .h-\[3px\].w-\[52px\],
html:not(.dark) [data-testid="my-approvals-hero"] .h-\[3px\].w-\[52px\],
html:not(.dark) [data-testid="meetings-hero"] .h-\[3px\].w-\[52px\],
html:not(.dark) [data-testid="notifications-hero"] .h-\[3px\].w-\[52px\],
html:not(.dark) [data-testid="portfolios-hero"] .h-\[3px\].w-\[52px\],
html:not(.dark) [data-testid="programmes-hero"] .h-\[3px\].w-\[52px\],
html:not(.dark) [data-testid="projects-hero"] .h-\[3px\].w-\[52px\],
html:not(.dark) [data-testid="initiatives-hero"] .h-\[3px\].w-\[52px\],
html:not(.dark) [data-testid="resource-management-hero"] .h-\[3px\].w-\[52px\] {
  display: none !important;
}

/* Hero primary actions ? frosted glass (Add Task / Request time-off / Schedule meeting / Delivery CTAs) */
html:not(.dark) [data-hero-variant="overview"][data-hero-surface="primary"] [data-hero-primary],
html:not(.dark) [data-hero-variant="overview"][data-hero-surface="primary"] [data-hero-ghost],
html:not(.dark) [data-hero-variant="overview"][data-hero-surface="primary"] [data-hero-tone],
html:not(.dark) [data-testid="my-tasks-add-task-hero"],
html:not(.dark) [data-testid="btn-new-time-off-request"],
html:not(.dark) [data-testid="schedule-meeting-button"],
html:not(.dark) [data-testid="button-create-portfolio"],
html:not(.dark) [data-testid="button-create-programme"],
html:not(.dark) [data-testid="button-open-roadmap"],
html:not(.dark) [data-testid="button-new-project"],
html:not(.dark) [data-testid="button-import-project"],
html:not(.dark) [data-testid="initiatives-new-btn"],
html:not(.dark) [data-testid="initiatives-rollback-btn"],
html:not(.dark) [data-testid="people-hub-refresh"] {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
html:not(.dark) [data-hero-variant="overview"][data-hero-surface="primary"] [data-hero-primary]:hover,
html:not(.dark) [data-hero-variant="overview"][data-hero-surface="primary"] [data-hero-ghost]:hover,
html:not(.dark) [data-hero-variant="overview"][data-hero-surface="primary"] [data-hero-tone]:hover,
html:not(.dark) [data-testid="my-tasks-add-task-hero"]:hover,
html:not(.dark) [data-testid="btn-new-time-off-request"]:hover,
html:not(.dark) [data-testid="schedule-meeting-button"]:hover,
html:not(.dark) [data-testid="button-create-portfolio"]:hover,
html:not(.dark) [data-testid="button-create-programme"]:hover,
html:not(.dark) [data-testid="button-open-roadmap"]:hover,
html:not(.dark) [data-testid="button-new-project"]:hover,
html:not(.dark) [data-testid="button-import-project"]:hover,
html:not(.dark) [data-testid="initiatives-new-btn"]:hover,
html:not(.dark) [data-testid="initiatives-rollback-btn"]:hover,
html:not(.dark) [data-testid="people-hub-refresh"]:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Financials hero view toggle ? white active chip; primary text (not white-on-white) */
html:not(.dark) [data-testid="financials-view-toggle"] button[data-state="active"],
html:not(.dark) [data-testid="financials-view-toggle"] button[aria-selected="true"] {
  background: #ffffff !important;
  color: hsl(var(--primary)) !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.12) !important;
}
html:not(.dark) [data-testid="financials-view-toggle"] button[data-state="active"] *,
html:not(.dark) [data-testid="financials-view-toggle"] button[aria-selected="true"] * {
  color: hsl(var(--primary)) !important;
  stroke: hsl(var(--primary)) !important;
}
html:not(.dark) [data-testid="financials-view-toggle"] button[data-state="inactive"],
html:not(.dark) [data-testid="financials-view-toggle"] button[aria-selected="false"] {
  background: transparent !important;
  color: rgb(255 255 255 / 0.85) !important;
  box-shadow: none !important;
}
html:not(.dark) [data-testid="financials-view-toggle"] button[data-state="inactive"] *,
html:not(.dark) [data-testid="financials-view-toggle"] button[aria-selected="false"] * {
  color: inherit !important;
  stroke: currentColor !important;
}
html:not(.dark) [data-testid="notifications-hero"] [data-testid="select-all-unread"],
html:not(.dark) [data-testid="notifications-hero"] [data-testid="mark-all-read"],
html:not(.dark) [data-testid="notifications-hero"] [data-testid="notification-preferences"] {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
html:not(.dark) [data-testid="notifications-hero"] [data-testid="select-all-unread"]:hover,
html:not(.dark) [data-testid="notifications-hero"] [data-testid="mark-all-read"]:hover,
html:not(.dark) [data-testid="notifications-hero"] [data-testid="notification-preferences"]:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}
html:not(.dark) [data-testid="notifications-hero"] [data-testid="select-all-unread"]:disabled,
html:not(.dark) [data-testid="notifications-hero"] [data-testid="mark-all-read"]:disabled {
  opacity: 0.45 !important;
}

/* KPI tiles ? bright glass chips on primary (My Tasks + Delivery).
   Do NOT style the grid wrapper ? that painted a square box around the row. */
html:not(.dark) [data-testid="my-tasks-hero"] [data-testid^="my-tasks-kpi-"]:not([data-testid$="-hint"]):not([data-testid$="-progress"]),
html:not(.dark) [data-testid="my-time-off-hero"] [data-testid^="kpi-timeoff-"]:not([data-testid$="-hint"]):not([data-testid$="-progress"]),
html:not(.dark) [data-testid="my-approvals-hero"] [data-testid^="kpi-approvals-"]:not([data-testid$="-hint"]):not([data-testid$="-progress"]),
html:not(.dark) [data-testid="meetings-hero"] [data-testid^="kpi-meetings-"]:not([data-testid$="-hint"]):not([data-testid$="-progress"]),
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-unread"],
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-mentions"],
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-approvals"],
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-overdue"],
html:not(.dark) [data-testid="portfolios-hero"] [data-testid^="kpi-portfolio-"]:not([data-testid$="-hint"]):not([data-testid$="-progress"]),
html:not(.dark) [data-testid="programmes-hero"] [data-testid^="kpi-"]:not([data-testid$="-hint"]):not([data-testid$="-progress"]),
html:not(.dark) [data-testid="projects-hero"] [data-testid^="kpi-project-"]:not([data-testid$="-hint"]):not([data-testid$="-progress"]),
html:not(.dark) [data-testid="initiatives-hero"] [data-testid^="kpi-initiatives-"]:not([data-testid$="-hint"]):not([data-testid$="-progress"]),
html:not(.dark) [data-testid="resource-management-hero"] [data-testid^="team-kpi-"]:not([data-testid$="-hint"]):not([data-testid$="-progress"]),
html:not(.dark) [data-testid="raid-hero"] [data-testid^="kpi-raid-"]:not([data-testid$="-hint"]):not([data-testid$="-progress"]),
html:not(.dark) [data-testid="activity-hero"] [data-testid^="kpi-activity-"]:not([data-testid$="-hint"]):not([data-testid$="-progress"]),
html:not(.dark) [data-testid="lessons-hero"] [data-testid^="stat-"]:not([data-testid$="-hint"]):not([data-testid$="-progress"]),
html:not(.dark) [data-testid="document-library-hero"] [data-testid^="kpi-docs-"]:not([data-testid$="-hint"]):not([data-testid$="-progress"]) {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  border-radius: 0.75rem !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 22px -12px rgba(15, 23, 42, 0.28) !important;
  color: #ffffff !important;
  min-height: 5.5rem !important;
}
html:not(.dark) [data-testid="my-tasks-hero"] [data-testid="my-tasks-hero-footer"] [data-density]:not([data-testid]),
html:not(.dark) [data-testid="my-tasks-hero"] [data-testid="my-tasks-hero-footer"] [data-kpi-surface],
html:not(.dark) [data-testid="my-time-off-hero"] [data-testid="my-time-off-hero-footer"] [data-density]:not([data-testid]),
html:not(.dark) [data-testid="my-time-off-hero"] [data-testid="my-time-off-hero-footer"] [data-kpi-surface],
html:not(.dark) [data-testid="my-approvals-hero"] [data-testid="my-approvals-hero-footer"] [data-density]:not([data-testid]),
html:not(.dark) [data-testid="my-approvals-hero"] [data-testid="my-approvals-hero-footer"] [data-kpi-surface],
html:not(.dark) [data-testid="meetings-hero"] [data-testid="meetings-hero-footer"] [data-density]:not([data-testid]),
html:not(.dark) [data-testid="meetings-hero"] [data-testid="meetings-hero-footer"] [data-kpi-surface],
html:not(.dark) [data-testid="notifications-hero"] [data-testid="notifications-hero-footer"] [data-density]:not([data-testid]),
html:not(.dark) [data-testid="notifications-hero"] [data-testid="notifications-hero-footer"] [data-kpi-surface],
html:not(.dark) [data-testid="portfolios-hero"] [data-testid="portfolios-hero-footer"] [data-density]:not([data-testid]),
html:not(.dark) [data-testid="portfolios-hero"] [data-testid="portfolios-hero-footer"] [data-kpi-surface],
html:not(.dark) [data-testid="programmes-hero"] [data-testid="programmes-hero-footer"] [data-density]:not([data-testid]),
html:not(.dark) [data-testid="programmes-hero"] [data-testid="programmes-hero-footer"] [data-kpi-surface],
html:not(.dark) [data-testid="projects-hero"] [data-testid="projects-hero-footer"] [data-density]:not([data-testid]),
html:not(.dark) [data-testid="projects-hero"] [data-testid="projects-hero-footer"] [data-kpi-surface],
html:not(.dark) [data-testid="initiatives-hero"] [data-testid="initiatives-hero-footer"] [data-density]:not([data-testid]),
html:not(.dark) [data-testid="initiatives-hero"] [data-testid="initiatives-hero-footer"] [data-kpi-surface],
html:not(.dark) [data-testid="resource-management-hero"] [data-testid="resource-management-hero-footer"] [data-density]:not([data-testid]),
html:not(.dark) [data-testid="resource-management-hero"] [data-testid="resource-management-hero-footer"] [data-kpi-surface],
html:not(.dark) [data-testid="raid-hero"] [data-testid="raid-hero-footer"] [data-density]:not([data-testid]),
html:not(.dark) [data-testid="raid-hero"] [data-testid="raid-hero-footer"] [data-kpi-surface],
html:not(.dark) [data-testid="activity-hero"] [data-testid="activity-hero-footer"] [data-density]:not([data-testid]),
html:not(.dark) [data-testid="activity-hero"] [data-testid="activity-hero-footer"] [data-kpi-surface],
html:not(.dark) [data-testid="lessons-hero"] [data-testid="lessons-hero-footer"] [data-density]:not([data-testid]),
html:not(.dark) [data-testid="lessons-hero"] [data-testid="lessons-hero-footer"] [data-kpi-surface],
html:not(.dark) [data-testid="document-library-hero"] [data-testid="document-library-hero-footer"] [data-density]:not([data-testid]),
html:not(.dark) [data-testid="document-library-hero"] [data-testid="document-library-hero-footer"] [data-kpi-surface] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html:not(.dark) [data-testid="my-tasks-hero"] [data-testid^="my-tasks-kpi-"] .font-bold,
html:not(.dark) [data-testid="my-tasks-hero"] [data-testid^="my-tasks-kpi-"] .font-display,
html:not(.dark) [data-testid="my-tasks-hero"] [data-testid^="my-tasks-kpi-"] p,
html:not(.dark) [data-testid="my-tasks-hero"] [data-testid^="my-tasks-kpi-"] span,
html:not(.dark) [data-testid="my-time-off-hero"] [data-testid^="kpi-timeoff-"] .font-bold,
html:not(.dark) [data-testid="my-time-off-hero"] [data-testid^="kpi-timeoff-"] .font-display,
html:not(.dark) [data-testid="my-time-off-hero"] [data-testid^="kpi-timeoff-"] p,
html:not(.dark) [data-testid="my-time-off-hero"] [data-testid^="kpi-timeoff-"] span,
html:not(.dark) [data-testid="my-approvals-hero"] [data-testid^="kpi-approvals-"] .font-bold,
html:not(.dark) [data-testid="my-approvals-hero"] [data-testid^="kpi-approvals-"] .font-display,
html:not(.dark) [data-testid="my-approvals-hero"] [data-testid^="kpi-approvals-"] p,
html:not(.dark) [data-testid="my-approvals-hero"] [data-testid^="kpi-approvals-"] span,
html:not(.dark) [data-testid="meetings-hero"] [data-testid^="kpi-meetings-"] .font-bold,
html:not(.dark) [data-testid="meetings-hero"] [data-testid^="kpi-meetings-"] .font-display,
html:not(.dark) [data-testid="meetings-hero"] [data-testid^="kpi-meetings-"] p,
html:not(.dark) [data-testid="meetings-hero"] [data-testid^="kpi-meetings-"] span,
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-unread"] .font-bold,
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-unread"] .font-display,
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-unread"] p,
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-unread"] span,
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-mentions"] .font-bold,
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-mentions"] .font-display,
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-mentions"] p,
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-mentions"] span,
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-approvals"] .font-bold,
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-approvals"] .font-display,
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-approvals"] p,
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-approvals"] span,
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-overdue"] .font-bold,
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-overdue"] .font-display,
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-overdue"] p,
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-overdue"] span,
html:not(.dark) [data-testid="portfolios-hero"] [data-testid^="kpi-portfolio-"] .font-bold,
html:not(.dark) [data-testid="portfolios-hero"] [data-testid^="kpi-portfolio-"] .font-display,
html:not(.dark) [data-testid="portfolios-hero"] [data-testid^="kpi-portfolio-"] p,
html:not(.dark) [data-testid="portfolios-hero"] [data-testid^="kpi-portfolio-"] span,
html:not(.dark) [data-testid="programmes-hero"] [data-testid^="kpi-"] .font-bold,
html:not(.dark) [data-testid="programmes-hero"] [data-testid^="kpi-"] .font-display,
html:not(.dark) [data-testid="programmes-hero"] [data-testid^="kpi-"] p,
html:not(.dark) [data-testid="programmes-hero"] [data-testid^="kpi-"] span,
html:not(.dark) [data-testid="projects-hero"] [data-testid^="kpi-project-"] .font-bold,
html:not(.dark) [data-testid="projects-hero"] [data-testid^="kpi-project-"] .font-display,
html:not(.dark) [data-testid="projects-hero"] [data-testid^="kpi-project-"] p,
html:not(.dark) [data-testid="projects-hero"] [data-testid^="kpi-project-"] span,
html:not(.dark) [data-testid="initiatives-hero"] [data-testid^="kpi-initiatives-"] .font-bold,
html:not(.dark) [data-testid="initiatives-hero"] [data-testid^="kpi-initiatives-"] .font-display,
html:not(.dark) [data-testid="initiatives-hero"] [data-testid^="kpi-initiatives-"] p,
html:not(.dark) [data-testid="initiatives-hero"] [data-testid^="kpi-initiatives-"] span,
html:not(.dark) [data-testid="resource-management-hero"] [data-testid^="team-kpi-"] .font-bold,
html:not(.dark) [data-testid="resource-management-hero"] [data-testid^="team-kpi-"] .font-display,
html:not(.dark) [data-testid="resource-management-hero"] [data-testid^="team-kpi-"] p,
html:not(.dark) [data-testid="resource-management-hero"] [data-testid^="team-kpi-"] span,
html:not(.dark) [data-testid="raid-hero"] [data-testid^="kpi-raid-"] .font-bold,
html:not(.dark) [data-testid="raid-hero"] [data-testid^="kpi-raid-"] .font-display,
html:not(.dark) [data-testid="raid-hero"] [data-testid^="kpi-raid-"] p,
html:not(.dark) [data-testid="raid-hero"] [data-testid^="kpi-raid-"] span,
html:not(.dark) [data-testid="activity-hero"] [data-testid^="kpi-activity-"] .font-bold,
html:not(.dark) [data-testid="activity-hero"] [data-testid^="kpi-activity-"] .font-display,
html:not(.dark) [data-testid="activity-hero"] [data-testid^="kpi-activity-"] p,
html:not(.dark) [data-testid="activity-hero"] [data-testid^="kpi-activity-"] span,
html:not(.dark) [data-testid="lessons-hero"] [data-testid^="stat-"] .font-bold,
html:not(.dark) [data-testid="lessons-hero"] [data-testid^="stat-"] .font-display,
html:not(.dark) [data-testid="lessons-hero"] [data-testid^="stat-"] p,
html:not(.dark) [data-testid="lessons-hero"] [data-testid^="stat-"] span,
html:not(.dark) [data-testid="document-library-hero"] [data-testid^="kpi-docs-"] .font-bold,
html:not(.dark) [data-testid="document-library-hero"] [data-testid^="kpi-docs-"] .font-display,
html:not(.dark) [data-testid="document-library-hero"] [data-testid^="kpi-docs-"] p,
html:not(.dark) [data-testid="document-library-hero"] [data-testid^="kpi-docs-"] span {
  color: #ffffff !important;
}
html:not(.dark) [data-testid="my-tasks-hero"] [data-testid="my-tasks-kpi-today"] .font-display,
html:not(.dark) [data-testid="my-tasks-hero"] [data-testid="my-tasks-kpi-today"] [data-testid$="-progress"],
html:not(.dark) [data-testid="my-tasks-hero"] [data-testid="my-tasks-kpi-today"] p,
html:not(.dark) [data-testid="my-time-off-hero"] [data-testid="kpi-timeoff-pending-mine"] .font-display,
html:not(.dark) [data-testid="my-time-off-hero"] [data-testid="kpi-timeoff-pending-mine"] [data-testid$="-progress"],
html:not(.dark) [data-testid="my-time-off-hero"] [data-testid="kpi-timeoff-pending-mine"] p {
  color: #ffedd5 !important;
}
html:not(.dark) [data-testid="my-tasks-hero"] [data-testid="my-tasks-kpi-overdue"] .font-display,
html:not(.dark) [data-testid="my-tasks-hero"] [data-testid="my-tasks-kpi-overdue"] [data-testid$="-progress"],
html:not(.dark) [data-testid="my-tasks-hero"] [data-testid="my-tasks-kpi-overdue"] p {
  color: #fecaca !important;
}
html:not(.dark) [data-testid="my-tasks-hero"] [data-testid^="my-tasks-kpi-"] [class*="bg-slate-200"],
html:not(.dark) [data-testid="my-tasks-hero"] [data-testid^="my-tasks-kpi-"] [role="progressbar"],
html:not(.dark) [data-testid="my-time-off-hero"] [data-testid^="kpi-timeoff-"] [class*="bg-slate-200"],
html:not(.dark) [data-testid="my-time-off-hero"] [data-testid^="kpi-timeoff-"] [role="progressbar"],
html:not(.dark) [data-testid="my-approvals-hero"] [data-testid^="kpi-approvals-"] [class*="bg-slate-200"],
html:not(.dark) [data-testid="my-approvals-hero"] [data-testid^="kpi-approvals-"] [role="progressbar"],
html:not(.dark) [data-testid="meetings-hero"] [data-testid^="kpi-meetings-"] [class*="bg-slate-200"],
html:not(.dark) [data-testid="meetings-hero"] [data-testid^="kpi-meetings-"] [role="progressbar"],
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-unread"] [class*="bg-slate-200"],
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-unread"] [role="progressbar"],
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-mentions"] [class*="bg-slate-200"],
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-mentions"] [role="progressbar"],
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-approvals"] [class*="bg-slate-200"],
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-approvals"] [role="progressbar"],
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-overdue"] [class*="bg-slate-200"],
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-overdue"] [role="progressbar"] {
  background: rgba(255, 255, 255, 0.28) !important;
}
html:not(.dark) [data-testid="my-tasks-hero"] [data-testid="my-tasks-kpi-overdue"] [role="progressbar"] > div,
html:not(.dark) [data-testid="meetings-hero"] [data-testid="kpi-meetings-overdue"] [role="progressbar"] > div,
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-overdue"] [role="progressbar"] > div {
  background: #fb7185 !important;
}
html:not(.dark) [data-testid="my-tasks-hero"] [data-testid="my-tasks-kpi-today"] [role="progressbar"] > div,
html:not(.dark) [data-testid="my-time-off-hero"] [data-testid="kpi-timeoff-pending-mine"] [role="progressbar"] > div,
html:not(.dark) [data-testid="my-approvals-hero"] [data-testid="kpi-approvals-accept"] [role="progressbar"] > div,
html:not(.dark) [data-testid="meetings-hero"] [data-testid="kpi-meetings-open-actions"] [role="progressbar"] > div,
html:not(.dark) [data-testid="notifications-hero"] [data-testid="kpi-approvals"] [role="progressbar"] > div {
  background: #fb923c !important;
}
html:not(.dark) [data-testid="my-tasks-hero"] [data-testid$="-hint"],
html:not(.dark) [data-testid="my-time-off-hero"] [data-testid$="-hint"],
html:not(.dark) [data-testid="my-approvals-hero"] [data-testid$="-hint"],
html:not(.dark) [data-testid="meetings-hero"] [data-testid$="-hint"],
html:not(.dark) [data-testid="notifications-hero"] [data-testid$="-hint"] {
  color: rgb(255 255 255 / 0.65) !important;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* My time-off hero tabs ? white strip, primary-blue active pill */
html:not(.dark) [data-testid="my-time-off-hero"] [data-testid="tab-mine"],
html:not(.dark) [data-testid="my-time-off-hero"] [data-testid="tab-inbox"] {
  color: rgb(71 85 105) !important;
  background: transparent !important;
}
html:not(.dark) [data-testid="my-time-off-hero"] [data-testid="tab-mine"][data-state="active"],
html:not(.dark) [data-testid="my-time-off-hero"] [data-testid="tab-inbox"][data-state="active"] {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}
html:not(.dark) [data-testid="my-time-off-hero"] [role="tablist"],
html:not(.dark) [data-testid="my-time-off-hero"] [data-slot="tabs-list"] {
  background: #ffffff !important;
  border-color: rgb(255 255 255 / 0.9) !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.06) !important;
}

/* My Approvals tabs on primary hero ? white strip / blue active (match time-off) */
html:not(.dark) [data-testid="my-approvals-hero"] [data-testid="tab-approvals-accept"],
html:not(.dark) [data-testid="my-approvals-hero"] [data-testid="tab-approvals-overtime"] {
  color: rgb(71 85 105) !important;
  background: transparent !important;
}
html:not(.dark) [data-testid="my-approvals-hero"] [data-testid="tab-approvals-accept"][data-state="active"],
html:not(.dark) [data-testid="my-approvals-hero"] [data-testid="tab-approvals-overtime"][data-state="active"] {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}
html:not(.dark) [data-testid="my-approvals-hero"] [role="tablist"],
html:not(.dark) [data-testid="my-approvals-hero"] [data-slot="tabs-list"] {
  background: #ffffff !important;
  border-color: rgb(255 255 255 / 0.9) !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.06) !important;
}

/* Toolbar shell ? allow horizontal scroll (was clipped by overflow:hidden) */
html:not(.dark) [data-testid="my-tasks-workspace"] [data-testid="my-tasks-toolbar"],
html:not(.dark) [data-testid="my-tasks-toolbar"][data-compact="true"] {
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.4rem !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: thin !important;
}
html:not(.dark) [data-testid="my-tasks-workspace"] .overflow-hidden:has([data-testid="my-tasks-toolbar"]) {
  overflow-x: auto !important;
  overflow-y: visible !important;
}


/* Force primary on active My Tasks view/sort pills (dist fallback) */
html:not(.dark) [data-testid="my-tasks-toolbar"] [data-testid^="view-"][class*="bg-background"],
html:not(.dark) [data-testid="my-tasks-toolbar"] [data-testid^="view-"][class*="bg-primary"],
html:not(.dark) [data-testid="my-tasks-toolbar"] button[class*="bg-primary"] {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  box-shadow: none !important;
}

/* Active sort / view toggles ? tool primary blue */
html:not(.dark) [data-testid="my-tasks-toolbar"] button[data-testid^="view-"].bg-primary,
html:not(.dark) [data-testid="my-tasks-toolbar"] [data-testid^="view-"][class*="bg-primary"] {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}
html:not(.dark) [data-testid="my-tasks-toolbar"] [role="group"] button .absolute.inset-0,
html:not(.dark) [data-testid="my-tasks-toolbar"] [role="group"] button > div.absolute {
  background: hsl(var(--primary)) !important;
  box-shadow: none !important;
  border: none !important;
}
html:not(.dark) [data-testid="my-tasks-toolbar"] [role="group"] button:has(.absolute) {
  color: hsl(var(--primary-foreground)) !important;
}
html:not(.dark) [data-testid="my-tasks-toolbar"] [role="group"] button:has(.absolute) span {
  color: hsl(var(--primary-foreground)) !important;
  position: relative;
  z-index: 1;
}

/* Dark mode ? steady glass (no scroll solidify flash). */
html.dark [data-page="dashboard"] [data-hero-kpi-glass],
html.dark [data-page="dashboard"] .dashboard-page-card {
  background: rgb(15 23 42 / 0.72) !important;
  border-color: rgb(255 255 255 / 0.12) !important;
  backdrop-filter: blur(10px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(110%) !important;
}

html.dark [data-page="dashboard"] [data-hero-kpi-glass] a[data-testid^="hero-kpi-"],
html.dark [data-page="dashboard"] .dashboard-kpi-tile,
html.dark [data-page="dashboard"] [data-testid="watchtower-kpi-row"] [data-density],
html.dark [data-page="dashboard"] [data-testid="programme-health-status-list"],
html.dark [data-page="dashboard"] [data-testid="portfolio-health-status-list"],
html.dark [data-page="dashboard"] [data-testid="watchtower-milestone-table"] {
  background: rgb(15 23 42 / 0.95) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgb(255 255 255 / 0.12) !important;
}

/* Hide screen DLP watermarks (email / name overlays) across all pages */
[data-testid="screen-watermark"],
.screen-watermark,
[data-watermark] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Topbar icon cluster ? no shared panel; each control is its own compact chip */
header[data-app-topbar] [data-topbar-icon-glass] {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  gap: 0.375rem !important;
  height: 39px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

header[data-app-topbar] [data-topbar-chip="icon"],
header[data-app-topbar] [data-testid="bell-trigger"],
header[data-app-topbar] [data-testid="help-menu-trigger"] {
  height: 2rem !important;
  width: 2rem !important;
  min-height: 2rem !important;
  min-width: 2rem !important;
  border-radius: 9999px !important;
  background: rgb(255 255 255 / 0.62) !important;
  border: 1px solid rgb(148 163 184 / 0.45) !important;
  backdrop-filter: blur(16px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(115%) !important;
  box-shadow: 0 1px 3px rgb(15 23 42 / 0.08) !important;
}

header[data-app-topbar] [data-topbar-chip="lang"],
header[data-app-topbar] [data-testid="topbar-language-pill"] {
  height: 2rem !important;
  border-radius: 9999px !important;
  background: rgb(255 255 255 / 0.62) !important;
  border: 1px solid rgb(148 163 184 / 0.45) !important;
  backdrop-filter: blur(16px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(115%) !important;
  box-shadow: 0 1px 3px rgb(15 23 42 / 0.08) !important;
  padding-left: 0.125rem !important;
  padding-right: 0.125rem !important;
}

header[data-app-topbar] [data-topbar-chip="profile"],
header[data-app-topbar] [data-testid="user-menu-trigger"] {
  height: 2rem !important;
  min-height: 2rem !important;
  border-radius: 9999px !important;
  background: rgb(255 255 255 / 0.62) !important;
  border: 1px solid rgb(148 163 184 / 0.45) !important;
  backdrop-filter: blur(16px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(115%) !important;
  box-shadow: 0 1px 3px rgb(15 23 42 / 0.08) !important;
  padding-left: 0.25rem !important;
  padding-right: 0.5rem !important;
}

.dark header[data-app-topbar] [data-topbar-chip="icon"],
.dark header[data-app-topbar] [data-testid="bell-trigger"],
.dark header[data-app-topbar] [data-testid="help-menu-trigger"],
.dark header[data-app-topbar] [data-topbar-chip="lang"],
.dark header[data-app-topbar] [data-testid="topbar-language-pill"],
.dark header[data-app-topbar] [data-topbar-chip="profile"],
.dark header[data-app-topbar] [data-testid="user-menu-trigger"] {
  background: rgb(255 255 255 / 0.12) !important;
  border-color: rgb(255 255 255 / 0.18) !important;
  color: #e2e8f0 !important;
}

header[data-app-topbar] [data-topbar-chip="icon"]:hover,
header[data-app-topbar] [data-testid="bell-trigger"]:hover,
header[data-app-topbar] [data-testid="help-menu-trigger"]:hover,
header[data-app-topbar] [data-topbar-chip="profile"]:hover,
header[data-app-topbar] [data-testid="user-menu-trigger"]:hover,
header[data-app-topbar] [data-topbar-chip="lang"]:hover,
header[data-app-topbar] [data-testid="topbar-language-pill"]:hover {
  background: rgb(255 255 255 / 0.78) !important;
}

.dark header[data-app-topbar] [data-topbar-chip="icon"]:hover,
.dark header[data-app-topbar] [data-testid="bell-trigger"]:hover,
.dark header[data-app-topbar] [data-testid="help-menu-trigger"]:hover,
.dark header[data-app-topbar] [data-topbar-chip="profile"]:hover,
.dark header[data-app-topbar] [data-testid="user-menu-trigger"]:hover,
.dark header[data-app-topbar] [data-topbar-chip="lang"]:hover,
.dark header[data-app-topbar] [data-testid="topbar-language-pill"]:hover {
  background: rgb(255 255 255 / 0.18) !important;
}

.dark #root aside [data-testid="sidebar-org-name"] {
  color: #f8fafc !important;
}
.dark #root aside [data-testid="sidebar-org-tagline"] {
  color: rgb(226 232 240 / 0.72) !important;
}
.dark #root aside [aria-label="Collapse sidebar"],
.dark #root aside [aria-label="Expand sidebar"] {
  color: #e2e8f0 !important;
  background: rgb(255 255 255 / 0.1) !important;
  border-color: rgb(255 255 255 / 0.16) !important;
}

/* Portfolios section search ? same glass-pill language as topbar search, compact height */
[data-surface="portfolios-section-search"] {
  height: 32px !important;
  border-radius: 9999px !important;
  border: 0 !important;
  outline: none !important;
  background: rgb(255 255 255 / 0.88) !important;
  box-shadow:
    0 1px 2px rgb(15 23 42 / 0.05),
    0 6px 16px -8px rgb(15 23 42 / 0.12),
    inset 0 1px 0 rgb(255 255 255 / 0.9) !important;
  transform: translateY(-1px) !important;
  backdrop-filter: blur(18px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(118%) !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}

[data-surface="portfolios-section-search"]:hover,
[data-surface="portfolios-section-search"]:focus-within {
  background: rgb(255 255 255 / 0.95) !important;
  box-shadow:
    0 2px 4px rgb(15 23 42 / 0.06),
    0 8px 18px -8px rgb(15 23 42 / 0.14),
    inset 0 1px 0 rgb(255 255 255 / 0.95) !important;
}

.dark [data-surface="portfolios-section-search"] {
  background: rgb(30 41 59 / 0.9) !important;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.25),
    inset 0 1px 0 rgb(255 255 255 / 0.08) !important;
}

.dark [data-surface="portfolios-section-search"]:hover,
.dark [data-surface="portfolios-section-search"]:focus-within {
  background: rgb(51 65 85 / 0.95) !important;
}

[data-surface="portfolios-section-search"] input {
  height: 100% !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  color: rgb(51 65 85) !important;
}

[data-surface="portfolios-section-search"] input::placeholder {
  color: rgb(148 163 184) !important;
}

.dark [data-surface="portfolios-section-search"] input {
  color: rgb(241 245 249) !important;
}

/* FAB ? hide pop rings; kill translate bounce (glow only). */
@keyframes quantumbayFabBounce {
  0%, 100% {
    transform: none;
    box-shadow:
      0 0 0 1px rgba(3, 105, 161, 0.32),
      0 0 12px -2px rgba(14, 165, 233, 0.4);
  }
  50% {
    transform: none;
    box-shadow:
      0 0 0 1px rgba(56, 189, 248, 0.5),
      0 0 16px 2px rgba(14, 165, 233, 0.45),
      0 0 24px 4px rgba(3, 105, 161, 0.22);
  }
}

.quantumbay-fab-bounce {
  animation: quantumbayGlow 2.6s ease-in-out infinite !important;
  transform: none !important;
}

.quantumbay-fab-pop-ring,
.quantumbay-fab-pop-ring--delay {
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

@keyframes quantumbayGlow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(3, 105, 161, 0.32),
      0 0 12px -2px rgba(14, 165, 233, 0.4);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(56, 189, 248, 0.5),
      0 0 16px 2px rgba(14, 165, 233, 0.45),
      0 0 24px 4px rgba(3, 105, 161, 0.22);
  }
}

/* Hero panel images stay opaque ? late CSS must not restart a fade (left-panel flick). */
#root [data-auth-screen] [data-login-hero-panel] img {
  animation: none !important;
  opacity: 1 !important;
}


/* Auth wallpaper ? never fade/animate with the card. */
#root [data-auth-screen] > picture,
#root [data-auth-screen] > picture img {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

/* My Approvals ? no page/table horizontal scroll */
[data-page="my-approvals"] {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}
[data-page="my-approvals"] [data-testid="my-approvals-hero"],
[data-page="my-approvals"] [data-testid="my-approvals-hero-footer"] {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}
[data-page="my-approvals"] div.relative.w-full.overflow-auto:has(> [data-slot="table"]) {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
[data-page="my-approvals"] [data-slot="table"] {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

/* Icon-rail: page well stays transparent on the mesh canvas. */
html #root .app-shell-chrome-row--icon-rail [data-layout-page-scroll],
html #root .app-shell-chrome-row--icon-rail [data-layout-page-scroll].app-shell-content-well,
html #root .app-shell-chrome-row--icon-rail .app-shell-content-well,
html #root [data-layout-page-scroll][data-icon-rail="true"],
html #root [data-layout-page-scroll][data-icon-rail="true"].app-shell-content-well {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html.dark #root .app-shell-chrome-row--icon-rail [data-layout-page-scroll],
html.dark #root .app-shell-chrome-row--icon-rail [data-layout-page-scroll].app-shell-content-well,
html.dark #root .app-shell-chrome-row--icon-rail .app-shell-content-well,
html.dark #root [data-layout-page-scroll][data-icon-rail="true"],
html.dark #root [data-layout-page-scroll][data-icon-rail="true"].app-shell-content-well {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
/* Final icon-rail: no panel ? icons only on mesh. */
html #root aside[data-app-shell-aside][data-sidebar-collapsed="true"],
html #root .app-shell-chrome-row--icon-rail aside[data-app-shell-aside],
html #root .app-shell-chrome-row--icon-rail aside.flex-shrink-0.flex-col,
html.dark #root aside[data-app-shell-aside][data-sidebar-collapsed="true"],
html.dark #root .app-shell-chrome-row--icon-rail aside[data-app-shell-aside],
html.dark #root .app-shell-chrome-row--icon-rail aside.flex-shrink-0.flex-col {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  z-index: 50 !important;
}

html #root .app-shell-chrome-row--icon-rail aside [data-app-shell-aside-nav],
html #root .app-shell-chrome-row--icon-rail aside .app-shell-aside-nav,
html #root .app-shell-chrome-row--icon-rail aside nav,
html #root .app-shell-chrome-row--icon-rail [data-testid="sidebar-collapsed-rail"],
html #root aside[data-sidebar-collapsed="true"] [data-app-shell-aside-nav],
html #root aside[data-sidebar-collapsed="true"] .app-shell-aside-nav,
html #root aside[data-sidebar-collapsed="true"] [data-testid="sidebar-collapsed-rail"],
html #root aside[data-sidebar-collapsed="true"] [data-app-shell-brand],
html #root .app-shell-chrome-row--icon-rail aside [data-app-shell-brand] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

html #root .app-shell-chrome-row--icon-rail .app-shell-main,
html #root .app-shell-chrome-row--icon-rail main.app-shell-main {
  z-index: 1 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Page well ? soft radius; in-well rail needs no external left inset. */
html #root .app-shell-chrome-row--icon-rail .app-shell-content-well,
html #root [data-layout-page-scroll][data-icon-rail="true"].app-shell-content-well {
  margin-left: 0.875rem !important;
  margin-right: 0.75rem !important;
  border-radius: 0.75rem !important;
  z-index: 1 !important;
}

/* In-well collapsed rail ? center icons in the strip */
html #root [data-testid="in-well-collapsed-rail"] [data-testid="sidebar-collapsed-rail"] {
  align-items: center !important;
  width: 100% !important;
}

html #root [data-testid="in-well-collapsed-rail"] [data-testid^="sidebar-rail-icon-"] {
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}

/* Projects directory ? frosted glass shell; no grey border; cards/charts on top */
html:not(.dark) #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-directory-chrome] {
  background: rgb(255 255 255 / 0.3) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  border: 0 !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.58),
    0 16px 40px -24px rgb(15 23 42 / 0.14) !important;
}
html.dark #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-directory-chrome] {
  background: rgb(15 23 42 / 0.38) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  border: 0 !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 16px 40px -24px rgb(0 0 0 / 0.35) !important;
}
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-kpi-toggle-seam"] {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-directory-chrome-divider],
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-directory-chrome-divider] > div {
  border-color: transparent !important;
}
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-section-heading"] {
  border-bottom: 0 !important;
}

/* Projects / workspace tabs ? primary active (not black); idle stays clear */
html:not(.dark) #root [data-workspace-tabbar] button[aria-selected="true"],
html:not(.dark) #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-workspace-tabbar] button[aria-selected="true"] {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: 0 !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.12) !important;
}
html:not(.dark) #root [data-workspace-tabbar] button[aria-selected="false"],
html:not(.dark) #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-workspace-tabbar] button[aria-selected="false"] {
  background: transparent !important;
  color: rgb(100 116 139) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* KPI collapse control ? squircle; expanded vs collapsed chrome */
html #root [data-testid$="-kpi-toggle"] {
  border-radius: 10px !important;
  width: 1.875rem !important;
  height: 1.875rem !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
}
html #root [data-testid$="-kpi-toggle"][data-collapsed="false"],
html #root [data-testid$="-kpi-toggle"][data-collapsed="true"] {
  transform: translateX(-50%) !important;
  translate: none !important;
  background: linear-gradient(
    100deg,
    #12379e 0%,
    #1e50c8 30%,
    #3b7ae0 55%,
    #1e50c8 78%,
    #12379e 100%
  ) !important;
  box-shadow: 0 6px 16px -6px rgba(18, 55, 158, 0.55) !important;
}
/* Expanded: center of 10px gap between hero + tabs cards */
html #root [data-testid$="-kpi-toggle"][data-collapsed="false"] {
  top: calc(100% + 5px - 0.9375rem) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: 0 6px 16px -6px rgba(18, 55, 158, 0.55) !important;
}
/* Collapsed: 1px white stroke on squircle + sit on header/tabs seam */
html #root [data-testid$="-kpi-toggle"][data-collapsed="true"],
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-kpi-toggle"][data-collapsed="true"] {
  top: calc(100% - 0.9375rem) !important;
  border: 1px solid #ffffff !important;
  border-color: #ffffff !important;
  border-width: 1px !important;
  outline: none !important;
  box-shadow:
    0 0 0 1px #ffffff,
    0 6px 16px -6px rgba(18, 55, 158, 0.55) !important;
}

/* Projects KPI tray ? transparent so page glass shows behind the cards */
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-hero-kpi-glass],
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-hero-footer"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-top-color: rgb(255 255 255 / 0.18) !important;
}

/* Overview tab ? hide grid/list view toggle (directory only) */
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]):has([data-testid$="-tab-overview"][aria-selected="true"]) [data-testid$="-view-pill"],
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]):has([data-testid$="-tab-overview"][aria-selected="true"]) [data-testid="view-grid"],
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]):has([data-testid$="-tab-overview"][aria-selected="true"]) [data-testid="view-list"] {
  display: none !important;
}

/* Collapsed icon rail ? no vertical stroke / divider beside the menu */
html #root [data-testid="in-well-collapsed-rail"],
html #root [data-testid="in-well-collapsed-rail"] [data-testid="sidebar-collapsed-rail"] {
  border: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}
html #root [data-testid="in-well-collapsed-rail"]::before,
html #root [data-testid="in-well-collapsed-rail"]::after,
html #root [data-testid="in-well-collapsed-rail"] [data-testid="sidebar-collapsed-rail"]::before,
html #root [data-testid="in-well-collapsed-rail"] [data-testid="sidebar-collapsed-rail"]::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}
/*
 * Collapsed rail squircles ? frosted glass panel (not milky white slab).
 * Active fill = Projects page squircle gradient (--hero-facet-surface / KPI toggle).
 */
html #root [data-testid="in-well-collapsed-rail"] [data-testid^="sidebar-rail-icon-"],
html #root aside[data-sidebar-collapsed="true"] [data-testid^="sidebar-rail-icon-"],
html #root [data-testid="sidebar-collapsed-rail-elevated"] [data-testid^="sidebar-rail-icon-"] {
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  border-radius: 12px !important;
  border: 1px solid rgb(255 255 255 / 0.82) !important;
  outline: none !important;
  background:
    linear-gradient(
      155deg,
      rgb(255 255 255 / 0.82) 0%,
      rgb(255 255 255 / 0.58) 48%,
      rgb(236 244 255 / 0.62) 100%
    ) !important;
  background-color: rgb(255 255 255 / 0.45) !important;
  backdrop-filter: blur(18px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(165%) !important;
  color: rgb(51 65 85) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 0 -1px 0 rgb(15 23 42 / 0.04),
    0 6px 16px -8px rgb(15 23 42 / 0.22),
    0 1px 2px rgb(15 23 42 / 0.06) !important;
  filter: none !important;
  isolation: isolate !important;
}
html #root [data-testid="in-well-collapsed-rail"] [data-testid^="sidebar-rail-icon-"]::before,
html #root [data-testid="in-well-collapsed-rail"] [data-testid^="sidebar-rail-icon-"]::after,
html #root aside[data-sidebar-collapsed="true"] [data-testid^="sidebar-rail-icon-"]::before,
html #root aside[data-sidebar-collapsed="true"] [data-testid^="sidebar-rail-icon-"]::after,
html #root [data-testid="sidebar-collapsed-rail-elevated"] [data-testid^="sidebar-rail-icon-"]::before,
html #root [data-testid="sidebar-collapsed-rail-elevated"] [data-testid^="sidebar-rail-icon-"]::after {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
  background: none !important;
  filter: none !important;
}
html.dark #root [data-testid="in-well-collapsed-rail"] [data-testid^="sidebar-rail-icon-"],
html.dark #root aside[data-sidebar-collapsed="true"] [data-testid^="sidebar-rail-icon-"],
html.dark #root [data-testid="sidebar-collapsed-rail-elevated"] [data-testid^="sidebar-rail-icon-"] {
  border: 1px solid rgb(255 255 255 / 0.14) !important;
  background:
    linear-gradient(
      155deg,
      rgb(148 163 184 / 0.22) 0%,
      rgb(15 23 42 / 0.42) 55%,
      rgb(15 23 42 / 0.55) 100%
    ) !important;
  background-color: transparent !important;
  color: rgb(226 232 240) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    0 6px 16px -8px rgb(0 0 0 / 0.45) !important;
}
/* Active ? Projects squircle / KPI toggle brand gradient (diagonal sweep) */
html #root [data-testid="in-well-collapsed-rail"] [data-testid^="sidebar-rail-icon-"][data-active="true"],
html #root aside[data-sidebar-collapsed="true"] [data-testid^="sidebar-rail-icon-"][data-active="true"],
html #root [data-testid="sidebar-collapsed-rail-elevated"] [data-testid^="sidebar-rail-icon-"][data-active="true"] {
  border: 0 !important;
  background-image: linear-gradient(
    100deg,
    #12379e 0%,
    #1e50c8 30%,
    #3b7ae0 55%,
    #1e50c8 78%,
    #12379e 100%
  ) !important;
  background-color: transparent !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html #root [data-testid="in-well-collapsed-rail"] [data-testid^="sidebar-rail-icon-"] svg,
html #root aside[data-sidebar-collapsed="true"] [data-testid^="sidebar-rail-icon-"] svg,
html #root [data-testid="sidebar-collapsed-rail-elevated"] [data-testid^="sidebar-rail-icon-"] svg {
  width: 0.875rem !important; /* 14px ? ~35% of 40px tile */
  height: 0.875rem !important;
  stroke-width: 1.85 !important;
}

/* Collapsed rail ? expand toggle matches section-icon squircle glass */
html #root [data-testid="in-well-collapsed-rail"] [data-testid="sidebar-collapse-toggle"] {
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  border-radius: 12px !important;
  border: 1px solid rgb(255 255 255 / 0.82) !important;
  outline: none !important;
  background:
    linear-gradient(
      155deg,
      rgb(255 255 255 / 0.82) 0%,
      rgb(255 255 255 / 0.58) 48%,
      rgb(236 244 255 / 0.62) 100%
    ) !important;
  background-color: rgb(255 255 255 / 0.45) !important;
  backdrop-filter: blur(18px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(165%) !important;
  color: rgb(51 65 85) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 0 -1px 0 rgb(15 23 42 / 0.04),
    0 6px 16px -8px rgb(15 23 42 / 0.22),
    0 1px 2px rgb(15 23 42 / 0.06) !important;
}
html #root [data-testid="in-well-collapsed-rail"] [data-testid="sidebar-collapse-toggle"] svg {
  width: 0.875rem !important;
  height: 0.875rem !important;
  stroke-width: 1.85 !important;
}

/* Collapsed rail brand ? keep expanded wordmark height (h-10) */
html #root [data-testid="in-well-collapsed-rail"] [data-testid="sidebar-brand"] img {
  height: 2.5rem !important;
  max-width: 100% !important;
  width: auto !important;
}
html #root [data-layout-page-scroll][data-icon-rail="true"],
html #root .app-shell-chrome-row--icon-rail .app-shell-content-well,
html #root [data-layout-page-scroll][data-icon-rail="true"] > [data-layout-route-outlet] {
  border: 0 !important;
  border-left: 0 !important;
  outline: none !important;
}
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-directory-chrome] {
  border: 0 !important;
  border-left: 0 !important;
  outline: none !important;
}

/* Projects ? two stacked glass cards (hero+KPIs / tabs+content) */
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-directory-chrome-stack] {
  gap: 10px !important;
}
/*
 * Live / split: transparent outer chrome; glass + 16px clip on the hero
 * card itself so top/bottom corners round (squircle stays on the frame).
 */
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-directory-chrome"]:not([data-directory-hero-card]),
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-directory-hero-card],
html #root [data-testid$="-directory-chrome"][data-directory-hero-card] {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
}
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-directory-hero-card] {
  gap: 0 !important;
  display: block !important;
}

/* Frame = positioning only for squircle */
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-hero-frame"] {
  position: relative !important;
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/*
 * Hero shell: transparent ? never paint white glass under the blue title band.
 * White frost lives on the KPI footer / body card only, so top corners cannot
 * peek out behind a tighter blue radius.
 */
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-hero-frame"] > [data-testid$="-hero"],
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-directory-hero-card] [data-testid$="-hero"] {
  border-radius: var(--directory-chrome-radius, 16px) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: 0 16px 40px -24px rgb(15 23 42 / 0.14) !important;
}
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-hero-split="gradient-glass"][data-kpis-expanded="true"],
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-hero"][data-kpis-expanded="true"] {
  border-radius: var(--directory-chrome-radius, 16px) !important;
  border-bottom-left-radius: var(--directory-chrome-radius, 16px) !important;
  border-bottom-right-radius: var(--directory-chrome-radius, 16px) !important;
  overflow: hidden !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
html.dark #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-hero-frame"] > [data-testid$="-hero"],
html.dark #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-directory-hero-card] [data-testid$="-hero"] {
  background: transparent !important;
  box-shadow: 0 16px 40px -24px rgb(0 0 0 / 0.35) !important;
}

/* Expanded KPI tray ? white glass + bottom corners match body cards */
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-kpis-expanded="true"] [data-testid$="-hero-footer"],
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-kpis-expanded="true"] [data-hero-kpi-glass] {
  border-bottom-left-radius: var(--directory-chrome-radius, 16px) !important;
  border-bottom-right-radius: var(--directory-chrome-radius, 16px) !important;
  overflow: hidden !important;
  background: rgb(255 255 255 / 0.78) !important;
  background-color: rgb(255 255 255 / 0.78) !important;
  backdrop-filter: blur(24px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(165%) !important;
}
html.dark #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-kpis-expanded="true"] [data-testid$="-hero-footer"],
html.dark #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-kpis-expanded="true"] [data-hero-kpi-glass] {
  background: rgb(15 23 42 / 0.72) !important;
  background-color: rgb(15 23 42 / 0.72) !important;
}

/* Tabs + content glass ? same density as overview section cards (bg-card frost) */
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-directory-body-card],
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-directory-section-panel],
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-section-panel"] {
  border-radius: 16px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  /* No clip-path ? it disables backdrop-filter in Chromium */
  clip-path: none !important;
  -webkit-clip-path: none !important;
  -webkit-mask-image: -webkit-radial-gradient(white, white) !important;
  mask-image: radial-gradient(white, white) !important;
  background: rgb(255 255 255 / 0.78) !important;
  background-color: rgb(255 255 255 / 0.78) !important;
  backdrop-filter: blur(24px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(165%) !important;
  border: 0 !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.85),
    0 16px 40px -24px rgb(15 23 42 / 0.14) !important;
}
html.dark #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-directory-body-card],
html.dark #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-directory-section-panel],
html.dark #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-section-panel"] {
  background: rgb(15 23 42 / 0.72) !important;
  background-color: rgb(15 23 42 / 0.72) !important;
}

/*
 * Projects / Portfolios / Programmes ? shared 16px chrome.
 * Blue title band is SQUARE; the transparent 16px shell clips it.
 * No white glass behind the blue (that caused the corner crescent).
 */
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) {
  --directory-chrome-radius: 16px;
}

/*
 * App-wide blue title band ? 16px top corners (Projects standard).
 */
html #root [data-hero-title-band] {
  border-radius: 16px 16px 0 0 !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  overflow: hidden !important;
}

html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-hero-title-band],
html #root [data-testid$="-directory-chrome"] [data-hero-title-band],
html #root [data-hero-facets="diamond"] [data-hero-title-band] {
  background-image: var(--hero-facet-surface) !important;
  background-color: #12379e !important;
}

/*
 * Collapsed ? transparent stack clips square blue to 16px (Projects parity).
 */
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-directory-chrome-stack]:has([data-kpis-expanded="false"]),
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-directory-chrome"]:not([data-directory-hero-card]):has([data-kpis-expanded="false"]) {
  gap: 0 !important;
  border-radius: var(--directory-chrome-radius, 16px) !important;
  overflow: hidden !important;
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 16px 40px -24px rgb(15 23 42 / 0.14) !important;
}
html.dark #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-directory-chrome-stack]:has([data-kpis-expanded="false"]),
html.dark #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-directory-chrome"]:not([data-directory-hero-card]):has([data-kpis-expanded="false"]) {
  background: transparent !important;
  box-shadow: 0 16px 40px -24px rgb(0 0 0 / 0.35) !important;
}

html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]):has([data-kpis-expanded="false"]) [data-testid$="-hero-frame"] > [data-testid$="-hero"],
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]):has([data-kpis-expanded="false"]) [data-directory-hero-card] [data-testid$="-hero"] {
  border-radius: 0 !important;
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]):has([data-kpis-expanded="false"]) [data-hero-title-band] {
  border-radius: 16px 16px 0 0 !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  background-image: var(--hero-facet-surface) !important;
  background-color: #12379e !important;
}

html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]):has([data-kpis-expanded="false"]) [data-directory-body-card],
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]):has([data-kpis-expanded="false"]) [data-directory-section-panel],
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]):has([data-kpis-expanded="false"]) [data-testid$="-section-panel"] {
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  background: rgb(255 255 255 / 0.78) !important;
  background-color: rgb(255 255 255 / 0.78) !important;
  backdrop-filter: blur(24px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(165%) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  box-shadow: none !important;
  border-top: 1px solid rgb(203 213 225 / 0.95) !important;
}

html.dark #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]):has([data-kpis-expanded="false"]) [data-directory-body-card],
html.dark #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]):has([data-kpis-expanded="false"]) [data-testid$="-section-panel"] {
  background: rgb(15 23 42 / 0.72) !important;
  background-color: rgb(15 23 42 / 0.72) !important;
  border-top-color: rgb(71 85 105 / 0.85) !important;
}

/* Expanded ? hero clips square blue to 16px; KPI tray holds the white frost */
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]):has([data-kpis-expanded="true"]) [data-testid$="-hero"] {
  border-radius: var(--directory-chrome-radius, 16px) !important;
  overflow: hidden !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]):has([data-kpis-expanded="true"]) [data-hero-title-band] {
  border-radius: 16px 16px 0 0 !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
}
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]):has([data-kpis-expanded="true"]) [data-directory-body-card],
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]):has([data-kpis-expanded="true"]) [data-testid$="-section-panel"] {
  border-radius: var(--directory-chrome-radius, 16px) !important;
}
/* Tabs row ? same top gap collapsed + expanded (green line) */
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-section-heading"] > div {
  padding-top: 12px !important;
}

/* Overview ? hide By portfolio section card */
html #root [data-page="projects"] [data-testid="projects-overview-portfolio-chart"] {
  display: none !important;
}

/*
 * Overview auto grid ? flatten nested row wrappers so cards flow
 * 3-up (xl), 2-up (md), 1-up (mobile). Last partial row can be 2.
 */
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-overview-root"] {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.25rem !important;
  align-items: stretch !important;
}
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-overview-root"] > div {
  display: contents !important;
}
@media (min-width: 768px) {
  html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-overview-root"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1280px) {
  html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-overview-root"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Overview section cards ? no stroke; float on the glass panel */
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-overview-root"] [data-testid*="-overview-"] {
  border: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow:
    0 10px 28px -16px rgb(15 23 42 / 0.18),
    0 2px 6px -2px rgb(15 23 42 / 0.06) !important;
  background: rgb(255 255 255 / 0.96) !important;
}
html.dark #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-overview-root"] [data-testid*="-overview-"] {
  background: rgb(15 23 42 / 0.88) !important;
  box-shadow:
    0 10px 28px -16px rgb(0 0 0 / 0.45),
    0 2px 6px -2px rgb(0 0 0 / 0.25) !important;
}

/* Overview section headings ? soft band like reference ?Overall readiness? */
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-overview-root"] [data-overview-panel-head] {
  background: rgb(248 250 252 / 0.98) !important;
  border-bottom: 1px solid rgb(226 232 240 / 0.95) !important;
}
html.dark #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-overview-root"] [data-overview-panel-head] {
  background: rgb(15 23 42 / 0.55) !important;
  border-bottom-color: rgb(51 65 85 / 0.85) !important;
}

/*
 * Projects Directory search ? shorter height (keep width), sit beside
 * the cards/list view pill (right cluster) instead of page-center.
 */
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-section-heading"] [class*="absolute"][class*="inset-x-0"] {
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  right: 10.75rem !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  justify-content: flex-end !important;
  width: auto !important;
  max-width: 18rem !important;
  padding-inline: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-section-heading"] [class*="absolute"] [class*="max-w"] {
  width: 18rem !important;
  max-width: 18rem !important;
  pointer-events: auto !important;
}
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-section-search"],
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-surface$="-section-search"] {
  height: 1.75rem !important;
  min-height: 1.75rem !important;
  max-height: 1.75rem !important;
  box-shadow: none !important;
  transform: none !important;
}
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-section-search"] svg,
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-surface$="-section-search"] svg {
  width: 0.75rem !important;
  height: 0.75rem !important;
}
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-testid$="-section-search"] input,
html #root :is([data-page="projects"], [data-page="portfolios"], [data-page="programmes"]) [data-surface$="-section-search"] input {
  font-size: 12px !important;
}

/* Dashboard hero portrait squircle ? no stroke / ring / dark rim */
html [data-testid="dashboard-hero-photo-upload"],
html #root [data-testid="dashboard-hero-photo-upload"] {
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
}
html [data-testid="dashboard-hero-photo-upload"]:focus,
html [data-testid="dashboard-hero-photo-upload"]:focus-visible,
html #root [data-testid="dashboard-hero-photo-upload"]:focus,
html #root [data-testid="dashboard-hero-photo-upload"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}
html [data-testid="dashboard-hero-photo-upload"] img,
html #root [data-testid="dashboard-hero-photo-upload"] img {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgb(0 0 0 / 0.35) 10%,
    #000 36%
  ) !important;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgb(0 0 0 / 0.35) 10%,
    #000 36%
  ) !important;
}
html [data-testid="dashboard-hero-role-badge"],
html #root [data-testid="dashboard-hero-role-badge"] {
  left: 50% !important;
  bottom: 0 !important;
  transform: translate(-50%, 50%) !important;
  z-index: 20 !important;
}

/* ==========================================================================
 * FINAL ? One continuous glass L (data-shell-glass-l). Aside/topbar clear.
 * Inner 14px curve is the L clip-path in layout.tsx.
 * ========================================================================== */
@media (min-width: 768px) {
  html body #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail),
  html #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  html body #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) [data-layout-page-scroll],
  html body #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) .app-shell-page-gradient,
  html body #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) .app-shell-content-well {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  html body #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) aside[data-app-shell-aside],
  html body #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) [data-app-shell-topbar],
  html body #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) .app-shell-glass-topbar,
  html body #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) .app-shell-main,
  html body #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) main.app-shell-main {
    z-index: 40 !important;
    position: relative !important;
  }

  html body #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) aside[data-app-shell-aside],
  html body #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) [data-app-shell-topbar],
  html body #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) .app-shell-glass-topbar {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: 0 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  /* Search + icon chips must stay opaque above the glass L */
  html body #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) [data-topbar-search-center],
  html body #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) [data-topbar-icon-glass] {
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) [data-shell-glass-l] {
    background: linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.48) 0%,
      rgba(255, 255, 255, 0.34) 55%,
      rgba(255, 255, 255, 0.4) 100%
    ) !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(28px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  html[data-pmo-loading="1"] #root .app-shell-chrome-row:not(.app-shell-chrome-row--icon-rail) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html[data-pmo-loading="1"] #root .app-shell-content-well,
  html[data-pmo-loading="1"] #root [data-layout-page-scroll] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }
}
/* Project detail header — Projects-parity blue banner + connected glass tray */
html #root [data-page="project-detail"] [data-testid="project-header-card"][data-hero-split="gradient-glass"] {
  border-radius: 16px !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: 0 16px 40px -24px rgb(15 23 42 / 0.14) !important;
}
html #root [data-page="project-detail"] [data-testid="project-header-card"] [data-hero-title-band] {
  border-radius: 16px 16px 0 0 !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  /* Lock to Projects directory blue banner height */
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  min-height: 3.75rem !important;
  box-sizing: border-box !important;
}
@media (min-width: 768px) {
  html #root [data-page="project-detail"] [data-testid="project-header-card"] [data-hero-title-band] {
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
    min-height: 4rem !important;
  }
}
html #root [data-testid="projects-hero"] [data-hero-title-band] {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  min-height: 3.75rem !important;
  box-sizing: border-box !important;
}
@media (min-width: 768px) {
  html #root [data-testid="projects-hero"] [data-hero-title-band] {
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
    min-height: 4rem !important;
  }
}
/* Glass tray — slight white frost + bottom corners match blue header top (16px) */
html #root [data-page="project-detail"] [data-testid="project-header-card"][data-kpis-expanded="true"] [data-hero-kpi-glass],
html #root [data-page="project-detail"] [data-testid="project-header-card"][data-kpis-expanded="true"] [data-testid="project-header-card-footer"] {
  border-radius: 0 0 16px 16px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
  overflow: hidden !important;
  background: rgb(255 255 255 / 0.92) !important;
  background-color: rgb(255 255 255 / 0.92) !important;
  backdrop-filter: blur(24px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(165%) !important;
}
html.dark #root [data-page="project-detail"] [data-testid="project-header-card"][data-kpis-expanded="true"] [data-hero-kpi-glass],
html.dark #root [data-page="project-detail"] [data-testid="project-header-card"][data-kpis-expanded="true"] [data-testid="project-header-card-footer"] {
  background: rgb(15 23 42 / 0.88) !important;
  background-color: rgb(15 23 42 / 0.88) !important;
}