/* ============================================================================
   160-gantt-ui-pro-polish.css  —  ui-ux-pro-max "Data-Dense Dashboard" polish
   ----------------------------------------------------------------------------
   Visual-only micro-polish for the Gantt SAFE ZONE (toolbar/header controls and
   KPI cards). Reuses the existing `--g-*` tokens from 070-gantt-premium-ui-v13.css.

   PERF GUARD (non-negotiable): NO selector here targets .p6-row / .p6-left /
   .p6-right / .p6-act-bar / .p6-sum-bar / .bar* / .ga-link-node / .ga-edge-link-handle.
   Transitions are added ONLY to interactive controls that live OUTSIDE the
   per-row render hot path, so the scroll/drag/relation perf fixes are preserved.

   Loaded LAST among gantt styles, so it wins the cascade. Reversible: remove the
   single <link> in index.html.
   ============================================================================ */

/* ---- 1. Interactive affordance: cursor + smooth control transitions -------- */
body #ganttOut .p6-tb-btn,
body #ganttOut .v12-menu-trigger,
body #ganttOut .v12-switch-btn,
body #ganttOut .aipe-tool-block,
body #ganttOut .gpx-kpi[role="button"],
body #ganttOut .gpx-kpi--clickable {
  cursor: pointer;
}

/* Only color/shadow/transform transitions (GPU-friendly), never layout props. */
body #ganttOut .p6-tb-btn,
body #ganttOut .v12-menu-trigger,
body #ganttOut .v12-switch-btn {
  transition: background-color .18s ease, border-color .18s ease,
    color .18s ease, box-shadow .18s ease, transform .15s ease;
}

/* ---- 2. Hover micro-interaction (stable: no layout shift) ------------------ */
body #ganttOut .p6-tb-btn:hover,
body #ganttOut .v12-menu-trigger:hover {
  background-color: var(--g-surface-2);
  border-color: var(--g-line-2);
  color: var(--g-tx-strong);
  box-shadow: var(--g-shadow-sm);
}

body #ganttOut .p6-tb-btn:active,
body #ganttOut .v12-menu-trigger:active {
  transform: translateY(1px);
}

/* Active / selected control: subtle project accent (primary token). */
body #ganttOut .p6-tb-btn.is-active,
body #ganttOut .p6-tb-btn[aria-pressed="true"],
body #ganttOut .v12-switch-btn.is-active {
  border-color: color-mix(in srgb, var(--g-olive) 45%, var(--g-line-2));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--g-olive) 30%, transparent) inset, var(--g-shadow-sm);
}

/* ---- 3. Accessible keyboard focus rings ----------------------------------- */
body #ganttOut .p6-tb-btn:focus-visible,
body #ganttOut .v12-menu-trigger:focus-visible,
body #ganttOut .v12-switch-btn:focus-visible,
body #ganttOut .gpx-kpi[role="button"]:focus-visible {
  outline: 2px solid var(--g-olive);
  outline-offset: 2px;
  border-radius: var(--g-r3);
}

/* ---- 4. Tool-block grouping: cohesive density ----------------------------- */
body #ganttOut .aipe-tool-block {
  transition: box-shadow .18s ease, border-color .18s ease;
}

body #ganttOut .aipe-tool-block:hover {
  box-shadow: var(--g-shadow-sm);
}

/* ---- 5. KPI cards: gentle elevation on hover (header zone, not rows) ------- */
body #ganttOut .gpx-kpi {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body #ganttOut .gpx-kpi:hover {
  transform: translateY(-1px);
  box-shadow: var(--g-shadow-md);
}

/* ---- 6. Dropdown menus: consistent elevation/surface ---------------------- */
body #ganttOut .v12-export-menu,
body #ganttOut .v12-menu-panel {
  box-shadow: var(--g-shadow-lg);
  border-radius: var(--g-r2);
  transform-origin: top center;
}

/* ============================================================================
   STATIC CHART POLISH (visible, perf-safe — colours/shape only, NO transitions
   on rows/bars, so the scroll/drag suppression system is untouched).
   ============================================================================ */

/* ---- 8. Activity bars: square edges (rounded corners removed per preference) */
body #ganttOut .p6-act-bar,
body #ganttOut .p6-sum-bar {
  border-radius: 1px !important;
}

/* Crisper readable label sitting on the bar. */
body #ganttOut .p6-act-bar .p6-bar-lbl,
body #ganttOut .p6-act-bar .bar-txt {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* ---- 9. Milestones: cleaner diamond ---------------------------------------- */
body #ganttOut .p6-ms {
  filter: saturate(1.05);
}

/* ---- 10. Left table: sharper header + tabular, legible cells --------------- */
body #ganttOut .p6-hdr-left {
  letter-spacing: .04em;
  font-weight: 700;
}

/* Activity-ID column: monospaced + tabular reads like a clean code reference.
   (ID colour is left to the existing theme — it is a deliberate muted slate.) */
body #ganttOut .p6-act-row .p6-c-id {
  font-family: var(--g-num, ui-monospace, 'JetBrains Mono', Consolas, monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* Numbers align cleanly in their columns. */
body #ganttOut .p6-c-dur,
body #ganttOut .p6-c-date {
  font-variant-numeric: tabular-nums;
}

/* Name column: a touch more weight for scan-ability. */
body #ganttOut .p6-act-row .p6-c-name {
  font-weight: 500;
}

/* ============================================================================
   12. LINK-EDIT POPUP (#ga-link-badge) — match the light project theme.
   The base style (024/051) is a dark navy badge; the rest of the Gantt runs in
   light theme, so the dark popup looked out of place. Re-skin it to the project
   surface/olive/amber system. Scoped to light theme; dark mode keeps its style.
   ============================================================================ */
body[data-gantt-theme="light"] #ga-link-badge {
  background: linear-gradient(180deg, #FFFFFF, #F8FAFC) !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .16), 0 0 0 1px rgba(255, 255, 255, .6) inset !important;
  color: #334155 !important;
}

body[data-gantt-theme="light"] #ga-link-badge .ga-link-rel {
  color: var(--g-olive-d) !important;
}

body[data-gantt-theme="light"] #ga-link-badge .ga-link-rel .ga-link-type {
  background: color-mix(in srgb, var(--g-sage) 14%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--g-sage) 42%, transparent) !important;
  color: var(--g-olive-d) !important;
}

body[data-gantt-theme="light"] #ga-link-badge .ga-link-name {
  color: #0F172A !important;
}

body[data-gantt-theme="light"] #ga-link-badge .ga-link-name.pred {
  color: #15803D !important;
}

body[data-gantt-theme="light"] #ga-link-badge .ga-link-name.succ {
  color: #B45309 !important;
}

body[data-gantt-theme="light"] #ga-link-badge .ga-link-arrow {
  color: #94A3B8 !important;
}

/* edit form inside the badge */
body[data-gantt-theme="light"] #ga-link-badge .geb-edit {
  border-top: 1px solid #E2E8F0 !important;
}

body[data-gantt-theme="light"] #ga-link-badge label.geb-lbl {
  color: #64748B !important;
}

body[data-gantt-theme="light"] #ga-link-badge select.geb-sel,
body[data-gantt-theme="light"] #ga-link-badge input.geb-inp {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

body[data-gantt-theme="light"] #ga-link-badge select.geb-sel:focus,
body[data-gantt-theme="light"] #ga-link-badge input.geb-inp:focus {
  border-color: var(--g-olive) !important;
}

body[data-gantt-theme="light"] #ga-link-badge .geb-btn.ok {
  border-color: rgba(22, 163, 74, .45) !important;
  color: #15803D !important;
  background: rgba(22, 163, 74, .10) !important;
}

body[data-gantt-theme="light"] #ga-link-badge .geb-btn.ok:hover {
  background: rgba(22, 163, 74, .20) !important;
}

body[data-gantt-theme="light"] #ga-link-badge .geb-btn.rm {
  border-color: rgba(220, 38, 38, .40) !important;
  color: #DC2626 !important;
  background: rgba(220, 38, 38, .08) !important;
}

body[data-gantt-theme="light"] #ga-link-badge .geb-btn.rm:hover {
  background: rgba(220, 38, 38, .18) !important;
}

body[data-gantt-theme="light"] #ga-link-badge .geb-btn.cl {
  border-color: #E2E8F0 !important;
  color: #64748B !important;
  background: #F1F5F9 !important;
}

body[data-gantt-theme="light"] #ga-link-badge .geb-btn.cl:hover {
  color: #334155 !important;
  background: #E2E8F0 !important;
}

/* ============================================================================
   13. ACTIVITY INSPECTOR — dock & reflow instead of covering the chart.
   On wide screens, when an activity is open the panel pins to the right edge
   (full height) and the Gantt shrinks to fit beside it, so nothing is hidden.
   On narrow screens it keeps the original floating behaviour.
   Engaged by body.gap-docked (added/removed in 007 open/closePanel).
   ============================================================================ */
@media (min-width: 1100px) {
  body.gap-docked #gap-panel {
    left: auto !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    width: 440px !important;
    max-width: 440px !important;
    border-radius: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  /* Reflow the chart so it occupies the remaining width (its own h-scroll adapts). */
  body.gap-docked #ganttOut {
    margin-right: 452px;
  }
}

/* ============================================================================
   14. SURFACE THEME — light surface + white/light header & toolbar
   Background/surfaces: #F6F8F9.  Toolbar/Header: #F8FAFC.
   ============================================================================ */
:root,
body #ganttOut {
  --aipe-beige: #F6F8F9;
  --aipe-beige-2: #F1F3F4;
  --aipe-beige-3: #ECEEEF;
  --aipe-toolbar: #F8FAFC;
  --aipe-toolbar-2: #F1F5F9;
}

/* Project color source for the Gantt accent tokens.
   The legacy --g-olive / --g-sage names stay for compatibility. */
body #ganttOut {
  --aipe-toolbar-border: #E2E8F0;
  --aipe-scroll: #355F8C;
  --aipe-scroll-2: #1F4E79;
  --aipe-scroll-d: #0F1B2E;
  --g-olive: var(--aipe-scroll-2);
  --g-olive-d: var(--aipe-scroll-d);
  --g-sage: var(--aipe-scroll);
}

/* --- 14a. Surfaces -------------------------------------------------------- */
body #ganttOut {
  --g-bg: var(--aipe-beige);
  --g-surface: var(--aipe-beige);
  --g-surface-2: var(--aipe-beige-2);
  --g-surface-3: var(--aipe-beige-3);
  background: var(--aipe-beige) !important;
}

/* Header strip + chart/table headers → light (#F8FAFC) */
body[data-gantt-theme] #ganttOut .p6-hdr-left,
body[data-gantt-theme] #ganttOut .p6-hdr-right,
body[data-gantt-theme] #ganttOut .gh-l,
body[data-gantt-theme] #ganttOut .gh-r,
body[data-gantt-theme] #ganttOut .p6-head,
body[data-gantt-theme] #ganttOut .p6-mo-row,
body[data-gantt-theme] #ganttOut .p6-year-row,
body[data-gantt-theme] #ganttOut .months-row {
  background: #F8FAFC !important;
  background-image: none !important;
}

/* Header text → dark navy for readability */
body #ganttOut .p6-hdr-cell,
body #ganttOut .p6-month-lbl,
body #ganttOut .p6-year-lbl {
  color: #0F1B2E !important;
}

body #ganttOut .p6-year-row {
  border-bottom: none !important;
}

/* Activity (non-critical) rows: white → surface. Critical red tint kept. */
body #ganttOut .p6-left.p6-act-row:not(.crit),
body #ganttOut .p6-row:not(.crit) .p6-left.p6-act-row {
  background: var(--aipe-beige) !important;
}

/* Milestone/activity chart lane stays transparent so the beige shows through. */
body #ganttOut .p6-right.p6-act-row:not(.crit) {
  background: transparent !important;
}

/* --- 14b. Toolbar → grey-mint (#7DB8AD) with charcoal controls ------------ */
body #ganttOut .p6-toolbar,
body #ganttOut .p6-toolbar.aipe-gantt-tools-v2,
body[data-gantt-theme] #ganttOut .p6-toolbar,
body[data-gantt-theme="light"] #ganttOut .p6-toolbar.aipe-gantt-tools-v2,
body[data-gantt-theme="dark"] #ganttOut .p6-toolbar,
body[data-gantt-theme="dark"] #ganttOut .p6-toolbar.aipe-gantt-tools-v2 {
  background: #6BA89D !important;
  border: 1px solid #BAC0BE !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important;
}

/* Toolbar label/icon text → charcoal. */
body #ganttOut #gpx-toolset .gpx-btn,
body #ganttOut #gpx-toolset .gpx-menu-trigger,
body #ganttOut #gpx-toolset .gpx-menu-trigger>span,
body #ganttOut #gpx-toolset .gpx-menu-trigger>i,
body #ganttOut #gpx-toolset .gpx-btn>span,
body #ganttOut #gpx-toolset .gpx-tool-left>span,
body #ganttOut #gpx-toolset .gpx-label {
  color: #F6F8F9 !important;
}

body #ganttOut #gpx-toolset .gpx-btn svg,
body #ganttOut #gpx-toolset .gpx-btn svg *,
body #ganttOut #gpx-toolset .gpx-menu-trigger svg,
body #ganttOut #gpx-toolset .gpx-menu-trigger svg * {
  color: #F6F8F9 !important;
  stroke: #F6F8F9 !important;
}

body #ganttOut #gpx-toolset .gpx-toggle-btn,
body #ganttOut #gpx-toolset .gpx-toggle-btn>span {
  color: #2A2F36 !important;
}

body #ganttOut #gpx-toolset .gpx-toggle-btn svg,
body #ganttOut #gpx-toolset .gpx-toggle-btn svg * {
  color: #2A2F36 !important;
  stroke: #2A2F36 !important;
}

/* Value chips → white pill with navy text. */
body #ganttOut #gpx-toolset .gpx-menu-trigger>b,
body #ganttOut #gpx-toolset .gpx-menu>b,
body #ganttOut #gpx-toolset .gpx-toggle-btn>b,
body #ganttOut #gpx-toolset .gpx-link-btn b,
body #ganttOut #gpx-toolset #gpx-link-mode b {
  background: #FFFFFF !important;
  color: #0F1B2E !important;
  border: 1px solid rgba(15, 27, 46, .10) !important;
}

/* Link Mode → subtle translucent on light bar. */
body #ganttOut #gpx-toolset .gpx-link-btn,
body #ganttOut #gpx-toolset #gpx-link-mode {
  background: rgba(15, 27, 46, .04) !important;
  border: 1px solid rgba(15, 27, 46, .10) !important;
  color: #2A2F36 !important;
}

body #ganttOut #gpx-toolset .gpx-link-btn span,
body #ganttOut #gpx-toolset #gpx-link-mode span {
  color: #2A2F36 !important;
}

body #ganttOut #gpx-toolset .gpx-link-btn svg,
body #ganttOut #gpx-toolset .gpx-link-btn svg *,
body #ganttOut #gpx-toolset #gpx-link-mode svg,
body #ganttOut #gpx-toolset #gpx-link-mode svg * {
  color: #2A2F36 !important;
  stroke: #2A2F36 !important;
}

/* Hover: subtle dark wash. */
body #ganttOut #gpx-toolset .gpx-btn:hover,
body #ganttOut #gpx-toolset .gpx-menu-trigger:hover,
body #ganttOut #gpx-toolset .gpx-toggle-btn:hover,
body #ganttOut #gpx-toolset .gpx-link-btn:hover,
body #ganttOut #gpx-toolset #gpx-link-mode:hover {
  background: rgba(15, 27, 46, .06) !important;
  border-color: rgba(15, 27, 46, .16) !important;
}

body #ganttOut #gpx-toolset .gpx-btn:active,
body #ganttOut #gpx-toolset .gpx-menu-trigger:active,
body #ganttOut #gpx-toolset .gpx-toggle-btn:active,
body #ganttOut #gpx-toolset .gpx-link-btn:active,
body #ganttOut #gpx-toolset #gpx-link-mode:active {
  background: rgba(15, 27, 46, .10) !important;
  border-color: rgba(15, 27, 46, .22) !important;
  outline: none !important;
}

/* ── STABILITY: kill 1px press-jump ─────────────────────────────────────── */
body #ganttOut #gpx-toolset .gpx-btn,
body #ganttOut #gpx-toolset .gpx-toggle-btn,
body #ganttOut #gpx-toolset .gpx-link-btn,
body #ganttOut #gpx-toolset .gpx-icon-btn,
body #ganttOut #gpx-toolset .gpx-menu-trigger {
  transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}

body #ganttOut #gpx-toolset .gpx-btn:hover,
body #ganttOut #gpx-toolset .gpx-btn:active,
body #ganttOut #gpx-toolset .gpx-toggle-btn:hover,
body #ganttOut #gpx-toolset .gpx-toggle-btn:active,
body #ganttOut #gpx-toolset .gpx-link-btn:hover,
body #ganttOut #gpx-toolset .gpx-link-btn:active,
body #ganttOut #gpx-toolset .gpx-icon-btn:hover,
body #ganttOut #gpx-toolset .gpx-icon-btn:active,
body #ganttOut #gpx-toolset .gpx-menu-trigger:hover,
body #ganttOut #gpx-toolset .gpx-menu-trigger:active,
body #ganttOut .p6-toolbar .v12-menu-trigger:active,
body #ganttOut .p6-toolbar .p6-tb-btn.v12-direct:active {
  transform: none !important;
}

/* ── PRESSED / ACTIVE STATE ─────────────────────────────────────────────── */
body #ganttOut #gpx-toolset .gpx-btn.on,
body #ganttOut #gpx-toolset .gpx-toggle-btn.on,
body #ganttOut #gpx-toolset .gpx-pill.on,
body #ganttOut #gpx-toolset .gpx-link-pill.on,
body #ganttOut #gpx-toolset .gpx-menu.open .gpx-menu-trigger {
  background: rgba(15, 27, 46, .08) !important;
  border-color: rgba(15, 27, 46, .22) !important;
  color: #2A2F36 !important;
}

/* Critical Path active → red accent. */
body #ganttOut #gpx-toolset #gpx-critical.on {
  background: rgba(220, 38, 38, .10) !important;
  border-color: rgba(220, 38, 38, .25) !important;
  color: #B91C1C !important;
}

body #ganttOut #gpx-toolset #gpx-critical.on svg,
body #ganttOut #gpx-toolset #gpx-critical.on svg * {
  color: #B91C1C !important;
  stroke: #B91C1C !important;
}

/* ── ID-styled buttons ──────────────────────────────────────────────────── */
body #ganttOut #gpx-toolset #gpx-show-logic,
body #ganttOut #gpx-toolset #gpx-link-mode,
body #ganttOut #gpx-toolset #gpx-link-mode.on,
body #ganttOut #gpx-toolset #gpx-show-logic.on {
  background: rgba(15, 27, 46, .04) !important;
  border-color: rgba(15, 27, 46, .12) !important;
  color: inherit !important;
}

body #ganttOut #gpx-toolset #gpx-show-logic span,
body #ganttOut #gpx-toolset #gpx-link-mode span {
  color: inherit !important;
}

body #ganttOut #gpx-toolset #gpx-show-logic svg,
body #ganttOut #gpx-toolset #gpx-show-logic svg *,
body #ganttOut #gpx-toolset #gpx-link-mode svg,
body #ganttOut #gpx-toolset #gpx-link-mode svg *,
body #ganttOut #gpx-toolset #gpx-critical svg,
body #ganttOut #gpx-toolset #gpx-critical svg * {
  color: currentColor !important;
  stroke: currentColor !important;
}

/* Group separators → subtle dark line. */
body #ganttOut #gpx-toolset .gpx-tool-right::before,
body #ganttOut #gpx-toolset .gpx-search::before,
body #ganttOut #gpx-toolset .gpx-tool-right::after {
  background: rgba(15, 27, 46, .08) !important;
  border-color: rgba(15, 27, 46, .08) !important;
}

body #ganttOut #gpx-toolset #gpx-search-inp {
  border-color: rgba(15, 27, 46, .14) !important;
}

body #ganttOut .p6-toolbar input {
  color: #2A2F36 !important;
}

body #ganttOut .p6-toolbar input::placeholder {
  color: rgba(15, 27, 46, .35) !important;
}

body #ganttOut #gpx-toolset .gpx-tool-right,
body #ganttOut #gpx-toolset .gpx-search,
body #ganttOut #gpx-toolset .gpx-tool-left {
  border-color: rgba(15, 27, 46, .08) !important;
}

body #ganttOut .p6-toolbar .p6-tb-sep,
body #ganttOut #gpx-toolset .gpx-sep {
  background: rgba(15, 27, 46, .08) !important;
}

/* --- 14c. KPI / Stats cards → white bg, 20px radius, soft shadow ---------- */
body #tp-gantt #gpx-stats {
  border-radius: 20px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05) !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
}

body #tp-gantt #gpx-stats .gpx-snapshot-grid {
  border-radius: 20px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05) !important;
  border: 1px solid #E2E8F0 !important;
}

body #tp-gantt #gpx-stats .gpx-kpi {
  border-left: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
}

body #tp-gantt #gpx-stats .gpx-kpi:first-child {
  border-left: none !important;
}

/* KPI hover lift */
body #ganttOut .gpx-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}

/* --- 14d. Left panel / activity list → clean separation ------------------- */
body #ganttOut .p6-left {
  border-right: 1px solid #E2E8F0 !important;
}

body #ganttOut .p6-act-row .p6-c-id {
  color: #64748B !important;
}

/* ============================================================================
   15. DEMO PROJECTS → compact toolbar dropdown (declutter the header)
   ============================================================================ */
body #ganttOut .p6-toolbar .aipe-demo-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

body #ganttOut .p6-toolbar .aipe-demo-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 27, 46, .04);
  color: #2A2F36;
  border: 1px solid rgba(15, 27, 46, .10);
  border-radius: 10px;
  padding: 6px 11px;
  font: 700 12px/1 'DM Sans', system-ui, sans-serif;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}

body #ganttOut .p6-toolbar .aipe-demo-trigger:hover {
  background: rgba(15, 27, 46, .08);
  border-color: rgba(15, 27, 46, .18);
}

body #ganttOut .p6-toolbar .aipe-demo-trigger:active,
body #ganttOut .p6-toolbar .aipe-demo-trigger:focus-visible {
  background: rgba(15, 27, 46, .12);
  border-color: rgba(15, 27, 46, .24);
  outline: none;
}

body #ganttOut .p6-toolbar .aipe-demo-trigger svg {
  stroke: #2A2F36 !important;
}

body #ganttOut .p6-toolbar .aipe-demo-trigger i {
  font-style: normal;
  opacity: .8;
  font-size: 10px;
}

body #ganttOut .p6-toolbar .aipe-demo-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 70;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .20);
}

body #ganttOut .p6-toolbar .aipe-demo-panel[hidden] {
  display: none;
}

body #ganttOut .p6-toolbar .aipe-demo-panel-title {
  font: 800 9px/1 'DM Sans', system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #64748B;
  padding: 2px 6px 5px;
}

body #ganttOut .p6-toolbar .aipe-demo-item {
  text-align: left;
  background: #FFFFFF;
  color: #0F1B2E;
  border: 1px solid rgba(15, 27, 46, .14);
  border-radius: 8px;
  padding: 8px 11px;
  font: 600 12px/1 'DM Sans', system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
  outline: none;
}

body #ganttOut .p6-toolbar .aipe-demo-item:hover {
  background: rgba(15, 27, 46, .05);
  color: #0F1B2E;
  border-color: rgba(15, 27, 46, .16);
}

body #ganttOut .p6-toolbar .aipe-demo-item:active,
body #ganttOut .p6-toolbar .aipe-demo-item:focus-visible {
  background: #0F1B2E;
  color: #FFFFFF;
  border-color: #0F1B2E;
  outline: none;
}

/* Original demo bar is kept in the DOM (for proxy clicks) but hidden once the
   toolbar menu is mounted. Body flag survives demo-loader rebuilds of the bar. */
body.aipe-demo-menu-on #perf-demo-bar {
  display: none !important;
}

/* ---- 7. Respect user motion preference: kill ALL added motion -------------- */
@media (prefers-reduced-motion: reduce) {

  body #ganttOut .p6-tb-btn,
  body #ganttOut .v12-menu-trigger,
  body #ganttOut .v12-switch-btn,
  body #ganttOut .aipe-tool-block,
  body #ganttOut .gpx-kpi {
    transition: none !important;
  }

  body #ganttOut .p6-tb-btn:active,
  body #ganttOut .v12-menu-trigger:active,
  body #ganttOut .gpx-kpi:hover {
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   16 · EXPORT BUTTON + LIST → MINT THEME
   ══════════════════════════════════════════════════════════════════════════ */
body[data-gantt-theme="light"] #ganttOut .v12-export-icon,
body[data-gantt-theme="dark"] #ganttOut .v12-export-icon {
  background: rgba(36, 180, 126, .14) !important;
  color: #188D68 !important;
}
body[data-gantt-theme="light"] #ganttOut .v12-export-trigger .v12-chip,
body[data-gantt-theme="dark"] #ganttOut .v12-export-trigger .v12-chip {
  background: rgba(36, 180, 126, .12) !important;
  color: #188D68 !important;
}
body[data-gantt-theme="light"] #ganttOut .v12-export-trigger {
  border-color: rgba(36, 180, 126, .35) !important;
  box-shadow: 0 9px 18px rgba(36, 180, 126, .10), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
body[data-gantt-theme="light"] #ganttOut .v12-export-menu:hover .v12-export-trigger,
body[data-gantt-theme="light"] #ganttOut .v12-export-menu.open .v12-export-trigger {
  border-color: rgba(36, 180, 126, .60) !important;
  box-shadow: 0 12px 24px rgba(36, 180, 126, .14), 0 0 0 3px rgba(36, 180, 126, .10) !important;
}
/* Export list items → mint subtle hover & active */
body[data-gantt-theme="light"] #ganttOut .v12-export-item:hover,
body[data-gantt-theme="dark"] #ganttOut .v12-export-item:hover {
  background: rgba(36, 180, 126, .06) !important;
}
body[data-gantt-theme="light"] #ganttOut .v12-export-item:active,
body[data-gantt-theme="dark"] #ganttOut .v12-export-item:active {
  background: rgba(36, 180, 126, .12) !important;
}
/* Dots → refined mint palette */
body[data-gantt-theme="light"] #ganttOut .v12-export-item.excel .v12-export-dot,
body[data-gantt-theme="dark"] #ganttOut .v12-export-item.excel .v12-export-dot { background: #24B47E !important; }
body[data-gantt-theme="light"] #ganttOut .v12-export-item.pdf .v12-export-dot,
body[data-gantt-theme="dark"] #ganttOut .v12-export-item.pdf .v12-export-dot { background: #F97316 !important; }
body[data-gantt-theme="light"] #ganttOut .v12-export-item.xer .v12-export-dot,
body[data-gantt-theme="light"] #ganttOut .v12-export-item.xml .v12-export-dot,
body[data-gantt-theme="dark"] #ganttOut .v12-export-item.xer .v12-export-dot,
body[data-gantt-theme="dark"] #ganttOut .v12-export-item.xml .v12-export-dot { background: #0EA5E9 !important; }

/* Header export trigger → mint */
body .aipe-header-export-trigger {
  border-color: rgba(36, 180, 126, .30) !important;
  background: linear-gradient(180deg, #f4fdf9 0%, #e3f5ed 100%) !important;
  color: #188D68 !important;
  box-shadow: 0 8px 20px rgba(36, 180, 126, .10), inset 0 1px 0 rgba(255,255,255,.90) !important;
}
body .aipe-header-export-mark {
  background: rgba(36, 180, 126, .14) !important;
  color: #188D68 !important;
}
body .aipe-header-export:hover .aipe-header-export-trigger,
body .aipe-header-export.open .aipe-header-export-trigger {
  border-color: rgba(36, 180, 126, .60) !important;
  background: linear-gradient(180deg, #ffffff 0%, #d4f0e4 100%) !important;
  box-shadow: 0 12px 26px rgba(36, 180, 126, .14), 0 0 0 3px rgba(36, 180, 126, .10) !important;
}

/* Header export panel → elevated card with mint accent */
body .aipe-header-export-panel {
  border-color: rgba(36, 180, 126, .18) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 54px rgba(15, 23, 42, .14), 0 0 0 1px rgba(36, 180, 126, .08) inset !important;
  padding: 10px !important;
  gap: 4px !important;
}

/* Title → crisp with divider */
body .aipe-header-export-title {
  padding: 2px 6px 10px !important;
  font: 800 9.5px/1 "DM Sans", system-ui, sans-serif !important;
  letter-spacing: .10em !important;
  color: rgba(24, 141, 104, .65) !important;
  border-bottom: 1px solid rgba(36, 180, 126, .10) !important;
  margin-bottom: 4px !important;
}

/* Items → bigger cards with proper spacing */
body .aipe-header-export .v12-export-item {
  min-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #1B1A17 !important;
  font: 800 12.5px/1.2 "DM Sans", system-ui, sans-serif !important;
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease !important;
}
body .aipe-header-export .v12-export-item:hover {
  background: linear-gradient(180deg, #edfaf4, #dbefe7) !important;
  transform: translateX(0) scale(1.01) !important;
  box-shadow: inset 0 0 0 1px rgba(36, 180, 126, .18) !important;
}
body .aipe-header-export .v12-export-item:active {
  background: linear-gradient(180deg, #d4f0e4, #c0e4d4) !important;
}

/* Dots → format-tag badges (colored pill with format abbreviation) */
body .aipe-header-export .v12-export-dot {
  width: auto !important;
  height: 20px !important;
  flex: 0 0 auto !important;
  border-radius: 5px !important;
  padding: 0 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font: 900 8.5px/1 "DM Sans", system-ui, sans-serif !important;
  letter-spacing: .04em !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.20) !important;
}
body .aipe-header-export .v12-export-item.excel .v12-export-dot {
  background: #24B47E !important;
}
body .aipe-header-export .v12-export-item.excel .v12-export-dot::before {
  content: 'XLSX' !important;
}
body .aipe-header-export .v12-export-item.pdf .v12-export-dot {
  background: #F97316 !important;
}
body .aipe-header-export .v12-export-item.pdf .v12-export-dot::before {
  content: 'PDF' !important;
}
body .aipe-header-export .v12-export-item.xer .v12-export-dot {
  background: #0EA5E9 !important;
}
body .aipe-header-export .v12-export-item.xer .v12-export-dot::before {
  content: 'XER' !important;
}
body .aipe-header-export .v12-export-item.xml .v12-export-dot {
  background: #8B5CF6 !important;
}
body .aipe-header-export .v12-export-item.xml .v12-export-dot::before {
  content: 'XML' !important;
}

/* Hide subtitle descriptions */
body .aipe-header-export .v12-export-item .sub {
  display: none !important;
}

/* Separator between (Excel/PDF) and (XER/XML) groups */
body .aipe-header-export .v12-export-item.xer {
  margin-top: 6px !important;
  border-top: 1px solid rgba(36, 180, 126, .08) !important;
  padding-top: 6px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   17 · REMAINING GOLD → MINT OVERRIDES (016 / 162 / 147 / 165)
   ══════════════════════════════════════════════════════════════════════════ */

/* 016: toolbar button hover states */
body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .v12-menu-trigger:hover,
body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .p6-tb-btn.v12-direct:hover,
body[data-gantt-theme="light"] #ganttOut .aipe-gantt-tools-v2 #ganttLinkHandlesToggle:hover {
  border-color: rgba(36, 180, 126, .45) !important;
  background: #E8F8F0 !important;
}

/* 016: toolbar active switch / active button */
body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .v12-switch-btn.active {
  background: linear-gradient(180deg, #D8F0E4, #C0E4D4) !important;
  box-shadow: 0 8px 16px rgba(36,180,126,.10), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

/* 016: toolbar border */
body[data-gantt-theme="light"] #ganttOut .p6-toolbar.aipe-gantt-tools-v2 {
  border-color: rgba(36, 180, 126, .20) !important;
}

/* 016: icon button ::before badges */
body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .v12-menu-trigger::before,
body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .p6-tb-btn.v12-direct::before,
body[data-gantt-theme="light"] #ganttOut .aipe-gantt-tools-v2 #ganttLinkHandlesToggle::before,
body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .v12-switch-btn::before {
  background: rgba(36, 180, 126, .14) !important;
  color: #188D68 !important;
}

/* 016: dark theme icon badges */
body[data-gantt-theme="dark"] #ganttOut .aipe-tool-block .v12-menu-trigger::before,
body[data-gantt-theme="dark"] #ganttOut .aipe-tool-block .p6-tb-btn.v12-direct::before,
body[data-gantt-theme="dark"] #ganttOut .aipe-gantt-tools-v2 #ganttLinkHandlesToggle::before,
body[data-gantt-theme="dark"] #ganttOut .aipe-tool-block .v12-switch-btn::before {
  background: rgba(36, 180, 126, .18) !important;
  color: #24B47E !important;
}

/* 016: demo bar borders → mint */
body[data-gantt-theme="light"] #perf-demo-bar.aipe-perf-demo-v2 > div,
body[data-gantt-theme="dark"] #perf-demo-bar.aipe-perf-demo-v2 > div {
  border-color: rgba(36, 180, 126, .20) !important;
}
body[data-gantt-theme="light"] #perf-demo-bar.aipe-perf-demo-v2 b::before,
body[data-gantt-theme="dark"] #perf-demo-bar.aipe-perf-demo-v2 b::before {
  background: rgba(36, 180, 126, .18) !important;
  color: #FFFFFF !important;
}
body[data-gantt-theme="light"] #perf-demo-bar.aipe-perf-demo-v2 b,
body[data-gantt-theme="dark"] #perf-demo-bar.aipe-perf-demo-v2 b {
  color: #24B47E !important;
}
body[data-gantt-theme="light"] #perf-demo-bar.aipe-perf-demo-v2 button:hover,
body[data-gantt-theme="dark"] #perf-demo-bar.aipe-perf-demo-v2 button:hover {
  border-color: rgba(36, 180, 126, .48) !important;
}
body[data-gantt-theme="light"] #perf-demo-bar.aipe-perf-demo-v2 button:nth-of-type(5),
body[data-gantt-theme="dark"] #perf-demo-bar.aipe-perf-demo-v2 button:nth-of-type(5) {
  background: rgba(36, 180, 126, .15) !important;
  border-color: rgba(36, 180, 126, .40) !important;
  color: #B8EACC !important;
}

/* 162: Deadline tool → mint */
body #ganttOut .aipe-deadline-toolbar {
  border-color: rgba(36, 180, 126, .45) !important;
}
body #ganttOut .aipe-deadline-toolbar button:focus-visible {
  box-shadow: 0 0 0 3px rgba(36, 180, 126, .14) !important;
}
body #ganttOut .aipe-deadline-set.active {
  box-shadow: 0 0 0 3px rgba(36, 180, 126, .15) !important;
}
body #ganttOut .aipe-deadline-item:focus-visible {
  outline: 3px solid rgba(36, 180, 126, .18) !important;
}

/* 147: Inline edit → mint border */
body #ganttOut .aipe-ie-wrap {
  border-color: rgba(36, 180, 126, .55) !important;
}

/* 165: Smart context menu → mint */
body #ganttOut .aipe-gantt-smart-menu .aipe-gsm-row.new {
  background-image: linear-gradient(90deg, rgba(36, 180, 126, .12), rgba(36, 180, 126, .06), transparent) !important;
  box-shadow: inset 0 0 0 2px rgba(15, 42, 76, .78), inset 4px 0 0 rgba(36, 180, 126, .95) !important;
}
body #ganttOut .aipe-gantt-smart-menu .aipe-gsm-badge.new {
  filter: drop-shadow(0 0 5px rgba(36, 180, 126, .28)) !important;
}