/* ============================================================================
   070-gantt-premium-ui-v13.css  —  PREMIUM COHESIVE GANTT UI (V13)
   Visual-only redesign of the Gantt tab to match the project's warm/olive design
   system. NO markup/JS/function changes — every selector reuses existing class /
   id hooks. Reversible: remove the single <link> in index.html.

   Cascade strategy: selectors are prefixed with `body #ganttOut` (higher specificity
   than the existing `#ganttOut ...` rules, so they win regardless of source order,
   including JS-injected styles). Dark variant via `body[data-gantt-theme="dark"]`.

   PERF GUARD: no transitions/animations are added to per-row elements
   (.p6-row/.p6-left/.p6-right/bars) — only to interactive controls — so the scroll
   and drag performance fixes are preserved.
   ============================================================================ */

/* ---- 1. Gantt-scoped design tokens (mapped to the project palette) ---------- */
body #ganttOut {
  /* project cream / olive / gold system */
  --g-bg:        #F8FAFC;   /* slate-50  */
  --g-surface:   #FFFFFF;
  --g-surface-2: #F1F5F9;   /* slate-100 */
  --g-surface-3: #E2E8F0;   /* slate-200 */
  --g-line:      #E5E9EF;
  --g-line-2:    #CBD5E1;   /* slate-300 */
  --g-tx:        #334155;   /* slate-700 */
  --g-tx-strong: #0F172A;   /* slate-900 */
  --g-mu:        #64748B;   /* slate-500 */
  --g-so:        #475569;   /* slate-600 */
  --g-olive:     #1F4E79;   /* project olive primary */
  --g-olive-d:   #071A33;   /* deep toolbar green */
  --g-sage:      #5F89AE;   /* project gold accent */
  --g-amber:     #F59E0B;   /* amber-500 */
  --g-brick:     #DC2626;   /* red-600 */
  --g-terra:     #EF4444;   /* red-500 */
  --g-green:     #16A34A;   /* activity green */
  --g-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --g-shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 5px rgba(15, 23, 42, .04);
  --g-shadow-lg: 0 16px 40px rgba(15, 23, 42, .12), 0 4px 10px rgba(15, 23, 42, .06);
  --g-r:  14px;
  --g-r2: 11px;
  --g-r3: 8px;
  --g-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --g-num:  ui-monospace, 'SF Mono', 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
}

/* ---- 2. Typography unification (project font) ------------------------------- */
body #ganttOut,
body #ganttOut .p6-toolbar,
body #ganttOut .p6-legend,
body #ganttOut .p6-hdr-left,
body #ganttOut .p6-hdr-right,
body #ganttOut .p6-left,
body #ganttOut .p6-right,
body #ganttOut .p6-cell,
body #ganttOut .p6-hdr-cell,
body #ganttOut .v12-menu-trigger,
body #ganttOut .p6-tb-btn,
body #ganttOut .v12-switch-btn,
body #ganttOut .gt-block-label,
body #ganttOut .p6-side-lbl {
  font-family: var(--g-font) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- 3. Outer gantt surface ------------------------------------------------- */
body #ganttOut #v9-gantt-outer,
body #ganttOut .p6-outer {
  background: var(--g-surface) !important;
  border: 1px solid var(--g-line) !important;
  border-radius: var(--g-r) !important;
  box-shadow: var(--g-shadow-md) !important;
}

/* ============================================================================
   4. TOOLBAR — cohesive control bar
   ============================================================================ */
body #ganttOut .p6-toolbar {
  gap: 8px !important;
  padding: 9px 12px !important;
  border-radius: var(--g-r) !important;
  background: linear-gradient(180deg, var(--g-surface) 0%, var(--g-surface-2) 100%) !important;
  border: 1px solid var(--g-line) !important;
  box-shadow: var(--g-shadow-sm) !important;
  margin-bottom: 10px !important;
}

body #ganttOut .v12-toolgroup { gap: 6px !important; }

/* tool blocks → soft grouped segments */
body #ganttOut .aipe-tool-block {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 4px !important;
  padding: 6px 8px 7px !important;
  border-radius: var(--g-r2) !important;
  background: var(--g-surface) !important;
  border: 1px solid var(--g-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6) !important;
}

body #ganttOut .gt-block-label {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--g-mu) !important;
  padding: 0 2px !important;
  line-height: 1 !important;
}

/* buttons / menu triggers / switches */
body #ganttOut .v12-menu-trigger,
body #ganttOut .p6-tb-btn.v12-direct,
body #ganttOut .p6-exp-btn,
body #ganttOut .v12-switch-btn {
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: -.005em !important;
  color: var(--g-tx) !important;
  background: var(--g-surface) !important;
  border: 1px solid var(--g-line) !important;
  box-shadow: var(--g-shadow-sm) !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease !important;
}
body #ganttOut .v12-menu-trigger:hover,
body #ganttOut .p6-tb-btn.v12-direct:hover,
body #ganttOut .p6-exp-btn:hover,
body #ganttOut .v12-switch-btn:hover {
  border-color: var(--g-line-2) !important;
  background: var(--g-surface-2) !important;
  box-shadow: var(--g-shadow-md) !important;
}
body #ganttOut .v12-menu-trigger:active,
body #ganttOut .p6-tb-btn.v12-direct:active { transform: translateY(1px) !important; }

/* active / selected states use the olive accent */
body #ganttOut .v12-switch-btn.on,
body #ganttOut .v12-switch-btn[aria-pressed="true"],
body #ganttOut .p6-tb-btn.v12-direct.on,
body #ganttOut .p6-tb-btn.v12-direct.active,
body #ganttOut .p6-tb-btn.v12-direct[aria-pressed="true"] {
  color: #fff !important;
  background: linear-gradient(180deg, var(--g-sage) 0%, var(--g-olive) 100%) !important;
  border-color: var(--g-olive-d) !important;
  box-shadow: 0 2px 8px rgba(92, 107, 63, .30), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}

/* link-mode toggle accent (route icon) */
body #ganttOut #ganttLinkHandlesToggle.on {
  color: #fff !important;
  background: linear-gradient(180deg, var(--g-terra) 0%, var(--g-brick) 100%) !important;
  border-color: var(--g-brick) !important;
}

/* svg control icons inherit accent color */
body #ganttOut .gt-icon-svg svg { width: 15px !important; height: 15px !important; }

/* dropdown menu panels */
body #ganttOut .v12-menu-panel,
body #ganttOut #aipeGanttHeaderExport .aipe-header-export-menu,
body #ganttOut .v12-export-menu .v12-menu-panel {
  background: var(--g-surface) !important;
  border: 1px solid var(--g-line) !important;
  border-radius: var(--g-r2) !important;
  box-shadow: var(--g-shadow-lg) !important;
  padding: 6px !important;
}
body #ganttOut .v12-menu-item,
body #ganttOut .v12-export-item {
  border-radius: 9px !important;
  font-weight: 600 !important;
  color: var(--g-tx) !important;
}
body #ganttOut .v12-menu-item:hover,
body #ganttOut .v12-export-item:hover {
  background: var(--g-surface-2) !important;
}

/* header export trigger (top-right) */
body .aipe-header-export-trigger {
  border-radius: 11px !important;
  font-family: var(--g-font) !important;
  font-weight: 700 !important;
  border: 1px solid var(--g-line) !important;
  background: linear-gradient(180deg, var(--g-surface) 0%, var(--g-surface-2) 100%) !important;
  box-shadow: var(--g-shadow-sm) !important;
}

/* ============================================================================
   5. DEMO BAR — quiet, on-theme (kept as feature, less "dev")
   ============================================================================ */
body #perf-demo-bar.aipe-perf-demo-v2,
body #perf-demo-bar.aipe-perf-demo-v2 > div {
  background: linear-gradient(180deg, var(--g-surface) 0%, var(--g-surface-2) 100%) !important;
  border-radius: var(--g-r2) !important;
  color: var(--g-tx) !important;
  font-family: var(--g-font) !important;
}
body #perf-demo-bar.aipe-perf-demo-v2 {
  border: 1px solid var(--g-line) !important;
  box-shadow: var(--g-shadow-sm) !important;
}
body #perf-demo-bar.aipe-perf-demo-v2 b { color: var(--g-olive) !important; font-weight: 800 !important; }
body #perf-demo-bar.aipe-perf-demo-v2 button {
  border-radius: 9px !important;
  font-family: var(--g-font) !important;
  font-weight: 700 !important;
  border: 1px solid var(--g-line) !important;
}

/* ============================================================================
   6. LEGEND — refined semantic pills
   ============================================================================ */
body #ganttOut .p6-legend {
  gap: 8px !important;
  padding: 4px 2px 10px !important;
}
body #ganttOut .p6-legend .p6-leg {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 5px 12px 5px 10px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--g-tx) !important;
  background: var(--g-surface) !important;
  border: 1px solid var(--g-line) !important;
  box-shadow: var(--g-shadow-sm) !important;
}

/* ============================================================================
   7. TABLE HEADER — premium sticky header
   ============================================================================ */
body #ganttOut .p6-hdr-left,
body #ganttOut .p6-hdr-right {
  background: linear-gradient(180deg, var(--g-surface-2) 0%, var(--g-surface-3) 100%) !important;
  border-bottom: 1.5px solid var(--g-line-2) !important;
}
body #ganttOut .p6-hdr-cell {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--g-olive-d) !important;
}
body #ganttOut .p6-hdr-left .p6-hdr-cell + .p6-hdr-cell { border-left: 1px solid var(--g-line) !important; }

/* timeline scale (years / months) */
body #ganttOut .p6-year-row {
  font-weight: 800 !important;
  color: var(--g-tx-strong) !important;
  letter-spacing: .02em !important;
}
body #ganttOut .p6-mo-row {
  font-weight: 600 !important;
  color: var(--g-mu) !important;
}
body #ganttOut .p6-mo-row > * { border-left: 1px solid var(--g-line) !important; }

/* ============================================================================
   8. ROWS — WBS hierarchy + activity + milestone (transition-free for perf)
   ============================================================================ */
/* base row separators */
body #ganttOut .p6-row .p6-left,
body #ganttOut .p6-row .p6-right {
  border-bottom: 1px solid var(--g-line) !important;
}

/* activity rows: clean warm surface + subtle zebra via odd index */
body #ganttOut .p6-row[data-rowkind="activity"] .p6-left { background: var(--g-surface) !important; }
body #ganttOut .p6-row[data-rowkind="activity"] .p6-right { background: var(--g-surface) !important; }

/* V16: old section-8 WBS colour rules removed.
   Final WBS colours are owned only by section 25 below. */
/* lightweight hover (NO transition → no scroll-recalc cost) */
body #ganttOut .p6-row[data-rowkind="activity"]:hover .p6-left,
body #ganttOut .p6-row[data-rowkind="activity"]:hover .p6-right {
  background: #EFF4FF !important;
}

/* ---- left-panel cells ------------------------------------------------------ */
body #ganttOut .p6-cell { font-size: 12.5px !important; color: var(--g-tx) !important; }
body #ganttOut .p6-cell.p6-c-id {
  font-family: var(--g-num) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  color: var(--g-mu) !important;
  letter-spacing: .01em !important;
}
body #ganttOut .p6-row[data-rowkind="activity"] .p6-cell.p6-c-name { font-weight: 600 !important; color: var(--g-tx-strong) !important; }
body #ganttOut .p6-cell.p6-c-dur,
body #ganttOut .p6-cell.p6-c-date {
  font-family: var(--g-num) !important;
  font-size: 11.5px !important;
  color: var(--g-so, #6B665C) !important;
  font-variant-numeric: tabular-nums !important;
}

/* WBS expand / collapse toggles */
body #ganttOut .p6-gutter-toggle,
body #ganttOut .p6-wbs-toggle {
  border-radius: 7px !important;
  border: 1px solid var(--g-line-2) !important;
  background: rgba(255, 255, 255, .55) !important;
  color: var(--g-olive-d) !important;
  font-weight: 800 !important;
  box-shadow: var(--g-shadow-sm) !important;
  transition: background .14s ease, transform .12s ease !important;
}
body #ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="0"] .p6-gutter-toggle,
body #ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="0"] .p6-wbs-toggle {
  border-color: rgba(255, 255, 255, .35) !important;
  background: rgba(255, 255, 255, .18) !important;
  color: #fff !important;
}
body #ganttOut .p6-gutter-toggle:hover,
body #ganttOut .p6-wbs-toggle:hover { background: rgba(255, 255, 255, .9) !important; }

/* ============================================================================
   9. BARS — activity / summary / milestone / critical
   ============================================================================ */
/* activity bar — GREEN (normal) */
body #ganttOut .p6-act-bar {
  border-radius: 2px !important;
  background: linear-gradient(180deg, #34C36B 0%, #1F9B50 100%) !important;
  border: 1px solid #167A3D !important;
  box-shadow: 0 1px 3px rgba(20, 90, 45, .28), inset 0 1px 0 rgba(255, 255, 255, .32) !important;
}

/* summary / WBS bar — BLACK bracket (high specificity to beat per-row --acc color) */
body #ganttOut .p6-row .p6-right .p6-sum-bar,
body #ganttOut .p6-row .p6-sum-bar {
  border-radius: 3px !important;
  background-color: #0E0E0E !important;
  background-image: linear-gradient(180deg, #2C2C2C 0%, #0E0E0E 100%) !important;
  --acc: #111 !important;
  --sum-line: #000 !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4) !important;
}

/* milestone diamond — black (WBS-family marker) with amber core */
body #ganttOut .p6-ms {
  background: linear-gradient(135deg, #2C2C2C 0%, #0E0E0E 100%) !important;
  border: 1px solid #000 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .40) !important;
}

/* critical path — RED */
body #ganttOut .p6-act-bar.crit,
body #ganttOut .p6-act-bar.crit-bar {
  background: linear-gradient(180deg, #F0533B 0%, #CF3621 100%) !important;
  border-color: #A82A18 !important;
  box-shadow: 0 1px 4px rgba(180, 40, 24, .35), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}

/* WBS side label on bar */
body #ganttOut .p6-side-lbl.wbs {
  font-family: var(--g-font) !important;
  font-weight: 800 !important;
  font-size: 10.5px !important;
  letter-spacing: .04em !important;
  color: var(--g-olive-d) !important;
}

/* relationship arrows (only if not inline-styled by 030 — guarded, harmless if overridden) */
body #ganttOut #ga-svg .ga-link-path { stroke: rgba(69, 81, 47, .55); }

/* ============================================================================
   10. SCROLLBARS — thin, on-theme
   ============================================================================ */
body #ganttOut #v9-gantt-outer { scrollbar-width: thin; scrollbar-color: var(--g-sage) transparent; }
body #ganttOut #v9-gantt-outer::-webkit-scrollbar { width: 11px; height: 11px; }
body #ganttOut #v9-gantt-outer::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--g-sage), var(--g-olive));
  border: 3px solid var(--g-surface);
  border-radius: 999px;
}
body #ganttOut #v9-gantt-outer::-webkit-scrollbar-thumb:hover { background: var(--g-olive); }
body #ganttOut #v9-gantt-outer::-webkit-scrollbar-track { background: transparent; }

/* drag tooltip */
body .gdf-tip, body #gdf-tip {
  font-family: var(--g-font) !important;
  border-radius: 9px !important;
  box-shadow: var(--g-shadow-lg) !important;
}

/* ============================================================================
   11. DARK THEME VARIANT — warm charcoal, premium (matches sidebar)
   ============================================================================ */
body[data-gantt-theme="dark"] #ganttOut {
  --g-bg:        #0B1120;
  --g-surface:   #1E293B;   /* slate-800 */
  --g-surface-2: #172033;
  --g-surface-3: #0F172A;   /* slate-900 */
  --g-line:      rgba(148, 163, 184, .15);
  --g-line-2:    rgba(95, 137, 174, .40);
  --g-tx:        #CBD5E1;   /* slate-300 */
  --g-tx-strong: #F1F5F9;   /* slate-100 */
  --g-mu:        #94A3B8;   /* slate-400 */
  --g-so:        #94A3B8;
  --g-olive:     #5F89AE;   /* project gold on dark */
  --g-olive-d:   #1F4E79;   /* deep gold */
  --g-sage:      #E2C879;   /* light gold */
  --g-amber:     #FBBF24;
  --g-brick:     #EF4444;
  --g-terra:     #F87171;
  --g-green:     #22C55E;
  --g-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --g-shadow-md: 0 6px 18px rgba(0, 0, 0, .5);
  --g-shadow-lg: 0 18px 48px rgba(0, 0, 0, .65);
}

body[data-gantt-theme="dark"] #ganttOut #v9-gantt-outer,
body[data-gantt-theme="dark"] #ganttOut .p6-outer {
  background: var(--g-surface) !important;
  border-color: var(--g-line) !important;
}
body[data-gantt-theme="dark"] #ganttOut .p6-toolbar {
  background: linear-gradient(180deg, #1E293B 0%, #172033 100%) !important;
  border-color: var(--g-line) !important;
}
body[data-gantt-theme="dark"] #ganttOut .aipe-tool-block {
  background: #172033 !important;
  border-color: var(--g-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}
body[data-gantt-theme="dark"] #ganttOut .v12-menu-trigger,
body[data-gantt-theme="dark"] #ganttOut .p6-tb-btn.v12-direct,
body[data-gantt-theme="dark"] #ganttOut .v12-switch-btn,
body[data-gantt-theme="dark"] #ganttOut .p6-exp-btn {
  background: #273449 !important;
  color: var(--g-tx) !important;
  border-color: var(--g-line) !important;
}
body[data-gantt-theme="dark"] #ganttOut .v12-menu-trigger:hover,
body[data-gantt-theme="dark"] #ganttOut .p6-tb-btn.v12-direct:hover,
body[data-gantt-theme="dark"] #ganttOut .v12-switch-btn:hover { background: #334155 !important; }

body[data-gantt-theme="dark"] #perf-demo-bar.aipe-perf-demo-v2 {
  background: linear-gradient(180deg, #1E293B 0%, #172033 100%) !important;
  border-color: var(--g-line) !important;
  color: var(--g-tx) !important;
}
body[data-gantt-theme="dark"] #perf-demo-bar.aipe-perf-demo-v2 b { color: var(--g-sage) !important; }

body[data-gantt-theme="dark"] #ganttOut .p6-legend .p6-leg {
  background: #172033 !important;
  border-color: var(--g-line) !important;
  color: var(--g-tx) !important;
}

body[data-gantt-theme="dark"] #ganttOut .p6-hdr-left,
body[data-gantt-theme="dark"] #ganttOut .p6-hdr-right {
  background: linear-gradient(180deg, #172033 0%, #0F172A 100%) !important;
  border-bottom-color: var(--g-line-2) !important;
}
body[data-gantt-theme="dark"] #ganttOut .p6-hdr-cell { color: var(--g-sage) !important; }
body[data-gantt-theme="dark"] #ganttOut .p6-year-row { color: var(--g-tx-strong) !important; }

/* dark rows */
body[data-gantt-theme="dark"] #ganttOut .p6-row[data-rowkind="activity"] .p6-left,
body[data-gantt-theme="dark"] #ganttOut .p6-row[data-rowkind="activity"] .p6-right { background: var(--g-surface) !important; }
body[data-gantt-theme="dark"] #ganttOut .p6-row .p6-left,
body[data-gantt-theme="dark"] #ganttOut .p6-row .p6-right { border-bottom-color: var(--g-line) !important; }
body[data-gantt-theme="dark"] #ganttOut .p6-row[data-rowkind="activity"]:hover .p6-left,
body[data-gantt-theme="dark"] #ganttOut .p6-row[data-rowkind="activity"]:hover .p6-right { background: #273449 !important; }

body[data-gantt-theme="dark"] #ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="0"] .p6-left,
body[data-gantt-theme="dark"] #ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="0"] .p6-right {
  background: linear-gradient(180deg, #4A5530 0%, #353D23 100%) !important;
}
body[data-gantt-theme="dark"] #ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="0"] .p6-cell { color: #F4F0E2 !important; }
body[data-gantt-theme="dark"] #ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="1"] .p6-left,
body[data-gantt-theme="dark"] #ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="1"] .p6-right {
  background: linear-gradient(180deg, #353B26 0%, #2C311F 100%) !important;
}
body[data-gantt-theme="dark"] #ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="1"] .p6-cell { color: var(--g-sage) !important; }
body[data-gantt-theme="dark"] #ganttOut .p6-row[data-rowkind="wbs"]:not([data-rowlevel="0"]):not([data-rowlevel="1"]) .p6-left,
body[data-gantt-theme="dark"] #ganttOut .p6-row[data-rowkind="wbs"]:not([data-rowlevel="0"]):not([data-rowlevel="1"]) .p6-right {
  background: linear-gradient(180deg, #272318 0%, #211E15 100%) !important;
}
body[data-gantt-theme="dark"] #ganttOut .p6-row[data-rowkind="wbs"]:not([data-rowlevel="0"]):not([data-rowlevel="1"]) .p6-cell { color: var(--g-tx) !important; }

body[data-gantt-theme="dark"] #ganttOut .p6-cell { color: var(--g-tx) !important; }
body[data-gantt-theme="dark"] #ganttOut .p6-cell.p6-c-id { color: var(--g-mu) !important; }
body[data-gantt-theme="dark"] #ganttOut .p6-row[data-rowkind="activity"] .p6-cell.p6-c-name { color: var(--g-tx-strong) !important; }
body[data-gantt-theme="dark"] #ganttOut .p6-cell.p6-c-dur,
body[data-gantt-theme="dark"] #ganttOut .p6-cell.p6-c-date { color: #94A3B8 !important; }

/* dark bars (brighter on dark surface) */
body[data-gantt-theme="dark"] #ganttOut .p6-act-bar {
  background: linear-gradient(180deg, #A6B485 0%, #76854F 100%) !important;
  border-color: #1F4E79 !important;
}
body[data-gantt-theme="dark"] #ganttOut .p6-sum-bar {
  background: linear-gradient(180deg, #6E7C4E 0%, #4A5530 100%) !important;
}
body[data-gantt-theme="dark"] #ganttOut .p6-act-bar.crit,
body[data-gantt-theme="dark"] #ganttOut .p6-act-bar.crit-bar {
  background: linear-gradient(180deg, #D4754A 0%, #B14328 100%) !important;
  border-color: #7E2E18 !important;
}
body[data-gantt-theme="dark"] #ganttOut .p6-side-lbl.wbs { color: var(--g-sage) !important; }

body[data-gantt-theme="dark"] #ganttOut #v9-gantt-outer { scrollbar-color: var(--g-olive) transparent; }
body[data-gantt-theme="dark"] #ganttOut #v9-gantt-outer::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--g-olive), #4A5530);
  border-color: var(--g-surface);
}
body[data-gantt-theme="dark"] #ganttOut #ga-svg .ga-link-path { stroke: rgba(166, 180, 133, .5); }

/* ============================================================================
   12. NEW: STATISTICS / KPI BAR  (#gpx-stats)  — professional, dense
   ============================================================================ */
body #tp-gantt #gpx-stats {
  display: flex !important;
  align-items: stretch !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin: 0 0 10px !important;
  padding: 10px 14px !important;
  border-radius: var(--g-r) !important;
  font-family: var(--g-font) !important;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--g-surface-2) 100%) !important;
  border: 1px solid var(--g-line) !important;
  box-shadow: var(--g-shadow-md) !important;
}
body #tp-gantt #gpx-stats .gpx-stats-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-right: 14px !important;
  border-right: 1.5px solid var(--g-line) !important;
  min-width: 0 !important;
  flex: 1 1 280px !important;
}
body #tp-gantt #gpx-stats .gpx-stats-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #4FD37E, #1F9B50);
  box-shadow: 0 0 0 4px rgba(31, 155, 80, .15);
  flex: 0 0 auto;
}
body #tp-gantt #gpx-stats .gpx-stats-name {
  font-weight: 800 !important;
  font-size: 14.5px !important;
  color: var(--g-tx-strong) !important;
  letter-spacing: -.01em !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body #tp-gantt #gpx-stats .gpx-stats-range {
  margin-left: auto !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--g-mu) !important;
  white-space: nowrap;
  display: flex; align-items: center; gap: 10px;
}
body #tp-gantt #gpx-stats .gpx-stats-range b {
  font-weight: 800 !important; color: var(--g-olive-d) !important;
  background: #F4E8CA; padding: 2px 9px; border-radius: 999px;
}
body #tp-gantt #gpx-stats .gpx-kpis { display: flex !important; align-items: stretch !important; gap: 0 !important; flex: 0 0 auto !important; }
body #tp-gantt #gpx-stats .gpx-kpi {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  padding: 0 16px !important; min-width: 64px !important;
  border-left: 1px solid var(--g-line) !important;
}
body #tp-gantt #gpx-stats .gpx-kpi:first-child { border-left: none !important; }
body #tp-gantt #gpx-stats .gpx-kpi-val {
  font-size: 19px !important; font-weight: 800 !important; line-height: 1.05 !important;
  color: var(--g-tx-strong) !important; font-variant-numeric: tabular-nums !important; letter-spacing: -.02em !important;
}
body #tp-gantt #gpx-stats .gpx-kpi-val i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--g-mu); }
body #tp-gantt #gpx-stats .gpx-kpi-lbl {
  font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: .1em !important;
  text-transform: uppercase !important; color: var(--g-mu) !important; margin-top: 3px !important;
}
body #tp-gantt #gpx-stats .gpx-kpi--crit .gpx-kpi-val { color: #DC2626 !important; }
body #tp-gantt #gpx-stats .gpx-kpi--crit .gpx-kpi-val i { color: #F87171 !important; }
body #tp-gantt #gpx-stats .gpx-kpi--acts .gpx-kpi-val { color: #16A34A !important; }
body #tp-gantt #gpx-stats .gpx-kpi--wbs .gpx-kpi-val { color: var(--g-olive-d) !important; }
body #tp-gantt #gpx-stats .gpx-kpi--links .gpx-kpi-val { color: #1F4E79 !important; }
body #tp-gantt #gpx-stats .gpx-kpi--ms .gpx-kpi-val { color: #D97706 !important; }

/* ============================================================================
   13. NEW: TOOLSET  (#gpx-toolset)  — search + icon tools, dense
   ============================================================================ */
body #ganttOut #gpx-toolset {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-right: 4px !important;
}
body #ganttOut #gpx-toolset .gpx-search {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  height: 34px !important; padding: 0 10px !important;
  border-radius: 10px !important;
  background: var(--g-surface) !important;
  border: 1px solid var(--g-line) !important;
  box-shadow: var(--g-shadow-sm) !important;
}
body #ganttOut #gpx-toolset .gpx-search-ic { display: inline-flex; color: var(--g-mu); }
body #ganttOut #gpx-toolset .gpx-search-ic svg { width: 15px; height: 15px; }
body #ganttOut #gpx-toolset .gpx-search input {
  border: none !important; outline: none !important; background: transparent !important;
  font-family: var(--g-font) !important; font-size: 12.5px !important; font-weight: 600 !important;
  color: var(--g-tx) !important; width: 150px !important; padding: 0 !important;
}
body #ganttOut #gpx-toolset .gpx-search input::placeholder { color: var(--g-mu) !important; font-weight: 500 !important; }
body #ganttOut #gpx-toolset .gpx-tool-group { display: inline-flex !important; align-items: center !important; gap: 3px !important; padding: 3px !important; border-radius: 11px !important; background: var(--g-surface-2) !important; border: 1px solid var(--g-line) !important; }
body #ganttOut #gpx-toolset .gpx-tool {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 30px !important; height: 30px !important; padding: 0 !important;
  border-radius: 8px !important; border: 1px solid transparent !important;
  background: transparent !important; color: var(--g-so, #6B665C) !important; cursor: pointer !important;
  transition: background .14s ease, color .14s ease, transform .12s ease !important;
}
body #ganttOut #gpx-toolset .gpx-tool svg { width: 16px !important; height: 16px !important; }
body #ganttOut #gpx-toolset .gpx-tool:hover { background: var(--g-surface) !important; color: var(--g-olive) !important; box-shadow: var(--g-shadow-sm) !important; }
body #ganttOut #gpx-toolset .gpx-tool:active { transform: translateY(1px) !important; }

/* search hit highlight on rows */
body #ganttOut .p6-row.gpx-hit .p6-left,
body #ganttOut .p6-row.gpx-hit .p6-right { background: #FFF6C8 !important; box-shadow: inset 3px 0 0 var(--g-amber) !important; }

/* ---- dark variants for new components -------------------------------------- */
body[data-gantt-theme="dark"] #tp-gantt #gpx-stats {
  background: linear-gradient(180deg, #1E293B 0%, #172033 100%) !important;
  border-color: var(--g-line) !important;
}
body[data-gantt-theme="dark"] #tp-gantt #gpx-stats .gpx-stats-name { color: var(--g-tx-strong) !important; }
body[data-gantt-theme="dark"] #tp-gantt #gpx-stats .gpx-kpi-val { color: var(--g-tx-strong) !important; }
body[data-gantt-theme="dark"] #tp-gantt #gpx-stats .gpx-stats-range b { color: var(--g-sage) !important; background: rgba(166, 180, 133, .15); }
body[data-gantt-theme="dark"] #tp-gantt #gpx-stats .gpx-kpi--acts .gpx-kpi-val { color: #4FD37E !important; }
body[data-gantt-theme="dark"] #tp-gantt #gpx-stats .gpx-kpi--crit .gpx-kpi-val { color: #F0795F !important; }

body[data-gantt-theme="dark"] #ganttOut #gpx-toolset .gpx-search { background: #273449 !important; border-color: var(--g-line) !important; }
body[data-gantt-theme="dark"] #ganttOut #gpx-toolset .gpx-search input { color: var(--g-tx) !important; }
body[data-gantt-theme="dark"] #ganttOut #gpx-toolset .gpx-tool-group { background: #172033 !important; border-color: var(--g-line) !important; }
body[data-gantt-theme="dark"] #ganttOut #gpx-toolset .gpx-tool { color: #94A3B8 !important; }
body[data-gantt-theme="dark"] #ganttOut #gpx-toolset .gpx-tool:hover { background: #334155 !important; color: var(--g-sage) !important; }
body[data-gantt-theme="dark"] #ganttOut .p6-row.gpx-hit .p6-left,
body[data-gantt-theme="dark"] #ganttOut .p6-row.gpx-hit .p6-right { background: #0D3156 !important; box-shadow: inset 3px 0 0 var(--g-amber) !important; }

/* dark bars: keep green/red/black identity (green slightly brighter on dark) */
body[data-gantt-theme="dark"] #ganttOut .p6-act-bar { background: linear-gradient(180deg, #3FD377 0%, #20A557 100%) !important; border-color: #178A44 !important; }
body[data-gantt-theme="dark"] #ganttOut .p6-sum-bar { background: linear-gradient(180deg, #3A3A3A 0%, #0A0A0A 100%) !important; border-color: #000 !important; }
body[data-gantt-theme="dark"] #ganttOut .p6-act-bar.crit,
body[data-gantt-theme="dark"] #ganttOut .p6-act-bar.crit-bar { background: linear-gradient(180deg, #FF5B40 0%, #D63A24 100%) !important; border-color: #B02C18 !important; }
body[data-gantt-theme="dark"] #ganttOut .p6-ms { background: linear-gradient(135deg, #3A3A3A 0%, #0A0A0A 100%) !important; border-color: #000 !important; }

/* ============================================================================
   14. PROFESSIONAL LAYOUT OVERHAUL — composition / structure (P6-style)
   ============================================================================ */

/* 14.1 Demo bar → clean slim utility strip (dev tool; declutter) */
body #perf-demo-bar.aipe-perf-demo-v2,
body #perf-demo-bar.aipe-perf-demo-v2 > div {
  padding: 5px 12px !important;
  margin-bottom: 8px !important;
  font-size: 10.5px !important;
  border-radius: 10px !important;
  display: flex !important; align-items: center !important; gap: 7px !important; flex-wrap: wrap !important;
}
/* hide the verbose descriptive + status text — keep only label + load buttons */
body #perf-demo-bar.aipe-perf-demo-v2 > div > span { display: none !important; }
body #perf-demo-bar.aipe-perf-demo-v2 b {
  font-size: 10px !important; font-weight: 800 !important; letter-spacing: .06em !important;
  text-transform: uppercase !important; color: var(--g-mu) !important; margin-right: 4px !important;
}
body #perf-demo-bar.aipe-perf-demo-v2 button {
  padding: 3px 10px !important; font-size: 10.5px !important; min-height: 0 !important; height: 24px !important;
  border-radius: 7px !important; font-weight: 700 !important;
}

/* 14.2 Toolbar → single professional RIBBON (flatten the scattered cards) */
body #ganttOut .p6-toolbar {
  gap: 0 !important;
  padding: 0 6px !important;
  min-height: 50px !important;
  border-radius: var(--g-r) !important;
  align-items: stretch !important;
  overflow: visible !important;
}
/* tool blocks become inline ribbon groups separated by thin dividers — no cards */
body #ganttOut .p6-toolbar .aipe-tool-block {
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
  border: none !important;
  border-right: 1px solid var(--g-line) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 7px 12px !important;
  margin: 0 !important;
}
body #ganttOut .p6-toolbar .v12-toolgroup > .aipe-tool-block:last-of-type { border-right: none !important; }
/* group label becomes a small inline tag before the controls */
body #ganttOut .p6-toolbar .gt-block-label {
  order: -1 !important;
  margin: 0 4px 0 0 !important;
  font-size: 8.5px !important;
  letter-spacing: .14em !important;
  color: var(--g-mu) !important;
  align-self: center !important;
  writing-mode: initial !important;
}
/* the new toolset (search + tools) sits on the left with its own divider */
body #ganttOut #gpx-toolset {
  padding: 7px 12px 7px 6px !important;
  border-right: 1px solid var(--g-line) !important;
  margin-right: 0 !important;
  align-self: center !important;
}
/* compact the control buttons inside the ribbon */
body #ganttOut .p6-toolbar .v12-menu-trigger,
body #ganttOut .p6-toolbar .p6-tb-btn.v12-direct,
body #ganttOut .p6-toolbar .v12-switch-btn {
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

/* 14.3 Frame the whole gantt as one cohesive professional panel */
body #ganttOut {
  background: linear-gradient(180deg, var(--g-surface) 0%, var(--g-surface-2) 140%) !important;
  border: 1px solid var(--g-line) !important;
  border-radius: var(--g-r) !important;
  padding: 12px !important;
  box-shadow: var(--g-shadow-lg) !important;
}
/* legend → compact inline strip under the ribbon */
body #ganttOut .p6-legend { padding: 8px 2px 8px !important; gap: 7px !important; }
body #ganttOut .p6-legend .p6-leg { padding: 4px 11px !important; font-size: 11px !important; box-shadow: none !important; }

/* 14.4 Denser, sharper table (P6-style) */
body #ganttOut .p6-row .p6-left .p6-cell {
  padding-top: 0 !important; padding-bottom: 0 !important;
  display: flex !important; align-items: center !important;
}
/* crisp column dividers across the left grid */
body #ganttOut .p6-left .p6-cell + .p6-cell,
body #ganttOut .p6-hdr-left .p6-hdr-cell + .p6-hdr-cell {
  border-left: 1px solid var(--g-line) !important;
}
/* WBS indent guides — left accent bar by level */
body #ganttOut .p6-row[data-rowkind="activity"] .p6-c-name { box-shadow: inset 2px 0 0 rgba(92,107,63,.12) !important; }
/* stronger, taller sticky header band */
body #ganttOut .p6-hdr-left,
body #ganttOut .p6-hdr-right {
  box-shadow: 0 2px 6px rgba(27,26,23,.06) !important;
}
/* timeline vertical month gridlines (subtle) + cleaner scale */
body #ganttOut .p6-right { background-image: linear-gradient(90deg, var(--g-line) 1px, transparent 1px) !important; background-size: 64px 100% !important; }
body #ganttOut .p6-row[data-rowkind="wbs"] .p6-right { background-image: none !important; }

/* 14.5 dark variants for the overhaul */
body[data-gantt-theme="dark"] #ganttOut {
  background: linear-gradient(180deg, #1E293B 0%, #0F172A 140%) !important;
  border-color: var(--g-line) !important;
}
body[data-gantt-theme="dark"] #ganttOut .p6-right { background-image: linear-gradient(90deg, rgba(255,250,240,.05) 1px, transparent 1px) !important; }
body[data-gantt-theme="dark"] #ganttOut .p6-row[data-rowkind="wbs"] .p6-right { background-image: none !important; }
body[data-gantt-theme="dark"] #ganttOut .p6-row[data-rowkind="activity"] .p6-c-name { box-shadow: inset 2px 0 0 rgba(166,180,133,.18) !important; }

/* ============================================================================
   15. V14 GANTT SNAPSHOT + RIBBON REFINEMENT
   Inspired by the compact P6-style reference: lower KPI height, white controls,
   and denser command buttons. Visual only.
   ============================================================================ */
body #tp-gantt #gpx-stats {
  display: block !important;
  margin: 0 0 8px !important;
  padding: 10px 12px 12px !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  border: 1px solid #E3E8F0 !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .07), 0 1px 3px rgba(15, 23, 42, .05) !important;
}

body #tp-gantt #gpx-stats .gpx-snapshot-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
}

body #tp-gantt #gpx-stats .gpx-snapshot-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: #071A33 !important;
  font: 900 13px/1.2 var(--g-font) !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

body #tp-gantt #gpx-stats .gpx-spark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  color: #1F4E79 !important;
  background: #F3F7FB !important;
  border-radius: 7px !important;
}

body #tp-gantt #gpx-stats .gpx-regenerate {
  height: 30px !important;
  padding: 0 13px !important;
  border-radius: 8px !important;
  border: 1px solid #D8E0EA !important;
  background: linear-gradient(180deg, #FFFFFF, #F8FAFC) !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important;
  font: 800 11px/1 var(--g-font) !important;
  cursor: pointer !important;
}

body #tp-gantt #gpx-stats .gpx-snapshot-grid {
  display: grid !important;
  grid-template-columns: minmax(178px, 1.35fr) repeat(6, minmax(86px, 1fr)) minmax(88px, .9fr) minmax(116px, 1fr) !important;
  min-height: 74px !important;
  border: 1px solid #E5EAF2 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
}

body #tp-gantt #gpx-stats .gpx-review,
body #tp-gantt #gpx-stats .gpx-kpi {
  min-height: 74px !important;
  padding: 9px 10px !important;
  border-left: 1px solid #E7ECF3 !important;
  background: #FFFFFF !important;
}

body #tp-gantt #gpx-stats .gpx-review {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 30px 1fr !important;
  grid-template-rows: auto 1fr auto !important;
  column-gap: 9px !important;
  align-items: center !important;
  border-left: none !important;
}

body #tp-gantt #gpx-stats .gpx-review-check {
  grid-row: 1 / 4 !important;
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: #16A34A !important;
  color: #FFFFFF !important;
  font: 900 13px/1 var(--g-font) !important;
}

body #tp-gantt #gpx-stats .gpx-review strong {
  color: #16A34A !important;
  font: 900 16px/1.1 var(--g-font) !important;
  white-space: nowrap !important;
}

body #tp-gantt #gpx-stats .gpx-review small {
  color: #64748B !important;
  font: 700 10.5px/1.1 var(--g-font) !important;
}

body #tp-gantt #gpx-stats .gpx-kpi {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  text-align: center !important;
}

body #tp-gantt #gpx-stats .gpx-kpi-label {
  color: #334155 !important;
  font: 900 10px/1.1 var(--g-font) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

body #tp-gantt #gpx-stats .gpx-kpi-main {
  color: #0F172A !important;
  font: 900 22px/1 var(--g-font) !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums !important;
}

body #tp-gantt #gpx-stats .gpx-kpi-sub {
  color: #64748B !important;
  font: 700 10px/1.1 var(--g-font) !important;
  min-height: 11px !important;
}

body #tp-gantt #gpx-stats .gpx-kpi--acts .gpx-kpi-main { color: #0F172A !important; }
body #tp-gantt #gpx-stats .gpx-kpi--links .gpx-kpi-main { color: #071A33 !important; }
body #tp-gantt #gpx-stats .gpx-kpi--wbs .gpx-kpi-main { color: #0F172A !important; }
body #tp-gantt #gpx-stats .gpx-kpi--crit .gpx-kpi-main { color: #DC2626 !important; }
body #tp-gantt #gpx-stats .gpx-kpi--open .gpx-kpi-main,
body #tp-gantt #gpx-stats .gpx-kpi--warn .gpx-kpi-main { color: #F97316 !important; }

body #tp-gantt #gpx-stats .gpx-quality {
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: conic-gradient(#16A34A calc(var(--q) * 1%), #E2E8F0 0) !important;
  position: relative !important;
}

body #tp-gantt #gpx-stats .gpx-quality::before {
  content: "" !important;
  position: absolute !important;
  inset: 6px !important;
  background: #FFFFFF !important;
  border-radius: 50% !important;
}

body #tp-gantt #gpx-stats .gpx-quality b {
  position: relative !important;
  color: #0F172A !important;
  font: 900 10px/1 var(--g-font) !important;
}

body #tp-gantt #gpx-stats .gpx-date,
body #tp-gantt #gpx-stats .gpx-time {
  color: #1E293B !important;
  font: 900 12px/1 var(--g-font) !important;
}

body #ganttOut .p6-toolbar {
  min-height: 48px !important;
  padding: 0 8px !important;
  gap: 0 !important;
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .06) !important;
}

body #ganttOut .p6-toolbar.aipe-gantt-tools-v2,
body[data-gantt-theme="light"] #ganttOut .p6-toolbar.aipe-gantt-tools-v2 {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .06) !important;
}

body #perf-demo-bar.aipe-perf-demo-v2 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  margin: 0 0 8px !important;
  padding: 7px 12px !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .06) !important;
}

body #perf-demo-bar.aipe-perf-demo-v2::before {
  content: "Demo Projects" !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 24px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: #F3F7FB !important;
  color: #0B2A4A !important;
  font: 900 10px/1 var(--g-font) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body #perf-demo-bar.aipe-perf-demo-v2 > div {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body #perf-demo-bar.aipe-perf-demo-v2 b {
  display: none !important;
}

body #perf-demo-bar.aipe-perf-demo-v2 button {
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 11px !important;
  border-radius: 8px !important;
  border: 1px solid #D8E0EA !important;
  background: #FFFFFF !important;
  color: #334155 !important;
  font: 800 10.5px/1 var(--g-font) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}

body #ganttOut .p6-toolbar > .v12-toolgroup,
body #ganttOut .p6-toolbar > .v12-spacer,
body #ganttOut .p6-toolbar .v12-spacer,
body #ganttOut .p6-toolbar #ganttLinkHandlesToggle {
  display: none !important;
}

body #ganttOut .aipe-gantt-tools-v2 .v12-spacer,
body #ganttOut #ganttLinkHandlesToggle,
body #ganttOut #ganttLinkHandlesToggle.gantt-link-mode-compact {
  display: none !important;
}

body #ganttOut #gpx-toolset {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-right: 1px solid #E2E8F0 !important;
}

body #ganttOut #gpx-toolset:only-child {
  border-right: 0 !important;
}

body #ganttOut #gpx-toolset .gpx-tool-cluster {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 10px !important;
}

body #ganttOut #gpx-toolset .gpx-tool-cluster--left {
  border-right: 1px solid #E2E8F0 !important;
}

body #ganttOut #gpx-toolset .gpx-tool,
body #ganttOut #gpx-toolset .gpx-zoom-stepper,
body #ganttOut #gpx-toolset .gpx-search {
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
  box-shadow: none !important;
}

body #ganttOut #gpx-toolset .gpx-tool {
  width: auto !important;
  min-width: 30px !important;
  padding: 0 9px !important;
  gap: 6px !important;
  font: 800 11px/1 var(--g-font) !important;
}

body #ganttOut #gpx-toolset .gpx-tool.wide { min-width: max-content !important; }
body #ganttOut #gpx-toolset .gpx-tool.link {
  border-color: #B8CDE0 !important;
  color: #0B2A4A !important;
  background: #F3F7FB !important;
}
body #ganttOut #gpx-toolset .gpx-tool:hover,
body #ganttOut #gpx-toolset .gpx-search:focus-within {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0B2A4A !important;
}

body #ganttOut #gpx-toolset .gpx-tool svg,
body #ganttOut #gpx-toolset .gpx-search svg {
  width: 15px !important;
  height: 15px !important;
}

body #ganttOut #gpx-toolset .gpx-zoom-stepper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  border-color: #E2E8F0 !important;
  overflow: hidden !important;
}

body #ganttOut #gpx-toolset .gpx-zoom-stepper button {
  width: 27px !important;
  height: 28px !important;
  border: 0 !important;
  background: #FFFFFF !important;
  color: #334155 !important;
  font: 900 13px/1 var(--g-font) !important;
  cursor: pointer !important;
}

body #ganttOut #gpx-toolset .gpx-zoom-stepper span {
  min-width: 42px !important;
  text-align: center !important;
  color: #0F172A !important;
  font: 900 11px/1 var(--g-font) !important;
  border-left: 1px solid #E2E8F0 !important;
  border-right: 1px solid #E2E8F0 !important;
}

body #ganttOut #gpx-toolset .gpx-search {
  width: 106px !important;
  padding: 0 9px !important;
  gap: 6px !important;
  border-left: 1px solid #E2E8F0 !important;
}

body #ganttOut #gpx-toolset .gpx-search input {
  width: 64px !important;
  font-size: 11px !important;
}

body #ganttOut .p6-toolbar .aipe-tool-block {
  padding: 7px 9px !important;
}

body #ganttOut .p6-toolbar .aipe-tool-block.theme {
  display: none !important;
}

body #ganttOut .p6-toolbar .gt-block-label {
  display: none !important;
}

body #ganttOut .p6-toolbar .v12-menu-trigger,
body #ganttOut .p6-toolbar .p6-tb-btn.v12-direct,
body #ganttOut .p6-toolbar .v12-switch-btn,
body #ganttOut .p6-toolbar #ganttLinkHandlesToggle {
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 8px !important;
  padding: 0 9px !important;
  font-size: 11px !important;
  background: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body #ganttOut .p6-toolbar .p6-tb-btn.v12-direct.on,
body #ganttOut .p6-toolbar #ganttLinkHandlesToggle.on {
  background: #EEF2FF !important;
  color: #0B2A4A !important;
  border-color: #C7D2FE !important;
}

body[data-gantt-theme="dark"] #tp-gantt #gpx-stats,
body[data-gantt-theme="dark"] #tp-gantt #gpx-stats .gpx-snapshot-grid,
body[data-gantt-theme="dark"] #tp-gantt #gpx-stats .gpx-review,
body[data-gantt-theme="dark"] #tp-gantt #gpx-stats .gpx-kpi,
body[data-gantt-theme="dark"] #ganttOut .p6-toolbar,
body[data-gantt-theme="dark"] #ganttOut #gpx-toolset .gpx-tool,
body[data-gantt-theme="dark"] #ganttOut #gpx-toolset .gpx-search,
body[data-gantt-theme="dark"] #ganttOut #gpx-toolset .gpx-zoom-stepper {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
}

/* ============================================================================
   16. USER FIX PASS - compact snapshot + restore real Gantt tools
   ============================================================================ */
body #ganttOut #gpx-toolset {
  display: none !important;
}

body #ganttOut .p6-toolbar > .v12-toolgroup,
body #ganttOut .p6-toolbar .v12-toolgroup {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
}

body #ganttOut .p6-toolbar > .v12-spacer,
body #ganttOut .p6-toolbar .v12-spacer {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 7px 10px !important;
}

body #ganttOut .p6-toolbar.aipe-gantt-tools-v2 #ganttLinkHandlesToggle,
body #ganttOut #ganttLinkHandlesToggle,
body #ganttOut #ganttLinkHandlesToggle.gantt-link-mode-compact {
  display: inline-flex !important;
  align-items: center !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 11px !important;
  border-radius: 8px !important;
  border: 1px solid #B8CDE0 !important;
  background: #F3F7FB !important;
  color: #0B2A4A !important;
  font: 800 11px/1 var(--g-font) !important;
}

body #ganttOut .p6-toolbar {
  min-height: 48px !important;
  height: auto !important;
  padding: 0 10px !important;
  align-items: center !important;
}

body #ganttOut .p6-toolbar .aipe-tool-block {
  height: 48px !important;
  min-height: 48px !important;
  padding: 7px 10px !important;
  border-right: 1px solid #E2E8F0 !important;
}

body #ganttOut .p6-toolbar .aipe-tool-block.theme {
  display: none !important;
}

body #ganttOut .p6-toolbar .aipe-tool-block.zoom,
body #ganttOut .p6-toolbar .aipe-tool-block.focus,
body #ganttOut .p6-toolbar .aipe-tool-block.display,
body #ganttOut .p6-toolbar .aipe-tool-block.links {
  display: inline-flex !important;
}

body #ganttOut .p6-toolbar .v12-menu-trigger,
body #ganttOut .p6-toolbar .p6-tb-btn.v12-direct {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  border: 1px solid transparent !important;
  color: #0F172A !important;
  box-shadow: none !important;
  font: 800 11px/1 var(--g-font) !important;
}

body #ganttOut .p6-toolbar .v12-menu-trigger:hover,
body #ganttOut .p6-toolbar .p6-tb-btn.v12-direct:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0B2A4A !important;
}

body #ganttOut .p6-toolbar .p6-tb-btn.v12-direct.on,
body #ganttOut .p6-toolbar .p6-tb-btn.v12-direct.active,
body #ganttOut .p6-toolbar .p6-tb-btn.v12-direct[aria-pressed="true"] {
  background: #EEF2FF !important;
  color: #0B2A4A !important;
  border-color: #C7D2FE !important;
}

body #tp-gantt #gpx-stats {
  padding: 7px 10px 8px !important;
  margin-bottom: 7px !important;
  border-radius: 12px !important;
}

body #tp-gantt #gpx-stats .gpx-snapshot-head {
  height: 26px !important;
  margin-bottom: 5px !important;
}

body #tp-gantt #gpx-stats .gpx-snapshot-title {
  font-size: 12px !important;
  gap: 7px !important;
}

body #tp-gantt #gpx-stats .gpx-spark {
  width: 20px !important;
  height: 20px !important;
}

body #tp-gantt #gpx-stats .gpx-regenerate {
  height: 27px !important;
  padding: 0 11px !important;
  font-size: 10.5px !important;
}

body #tp-gantt #gpx-stats .gpx-snapshot-grid {
  min-height: 62px !important;
  height: 62px !important;
}

body #tp-gantt #gpx-stats .gpx-review,
body #tp-gantt #gpx-stats .gpx-kpi {
  min-height: 62px !important;
  height: 62px !important;
  padding: 6px 8px !important;
  gap: 3px !important;
}

body #tp-gantt #gpx-stats .gpx-review {
  grid-template-columns: 25px 1fr !important;
  column-gap: 7px !important;
}

body #tp-gantt #gpx-stats .gpx-review-check {
  width: 20px !important;
  height: 20px !important;
  font-size: 12px !important;
}

body #tp-gantt #gpx-stats .gpx-review strong {
  font-size: 13px !important;
}

body #tp-gantt #gpx-stats .gpx-review small {
  display: block !important;
  max-width: 118px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 9.5px !important;
}

body #tp-gantt #gpx-stats .gpx-kpi-label {
  font-size: 9.5px !important;
}

body #tp-gantt #gpx-stats .gpx-kpi-main {
  font-size: 18px !important;
}

body #tp-gantt #gpx-stats .gpx-kpi-sub {
  font-size: 9.5px !important;
}

body #tp-gantt #gpx-stats .gpx-quality {
  width: 34px !important;
  height: 34px !important;
}

body #tp-gantt #gpx-stats .gpx-quality::before {
  inset: 5px !important;
}

body #tp-gantt #gpx-stats .gpx-quality b {
  font-size: 9px !important;
}

body #tp-gantt #gpx-stats .gpx-date,
body #tp-gantt #gpx-stats .gpx-time {
  font-size: 10.5px !important;
}

/* ============================================================================
   17. FINAL TOOLBAR SKIN - real old actions, new visual language
   ============================================================================ */
body #ganttOut .p6-toolbar,
body #ganttOut .p6-toolbar.aipe-gantt-tools-v2,
body[data-gantt-theme="light"] #ganttOut .p6-toolbar.aipe-gantt-tools-v2 {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  min-height: 50px !important;
  padding: 0 12px !important;
  margin: 0 0 10px !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  border: 1px solid #DDE5EF !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .07), 0 1px 3px rgba(15, 23, 42, .04) !important;
  overflow: visible !important;
}

body #ganttOut .p6-toolbar > .v12-toolgroup,
body #ganttOut .p6-toolbar .v12-toolgroup {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  gap: 0 !important;
  min-width: 0 !important;
}

body #ganttOut .p6-toolbar .aipe-tool-block,
body[data-gantt-theme="light"] #ganttOut .p6-toolbar .aipe-tool-block {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  gap: 7px !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid #E2E8F0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body #ganttOut .p6-toolbar .aipe-tool-block.theme {
  display: none !important;
}

body #ganttOut .p6-toolbar .gt-block-label,
body #ganttOut .p6-toolbar .aipe-tool-block::before,
body #ganttOut .p6-toolbar .v12-spacer::before {
  display: none !important;
  content: none !important;
}

body #ganttOut .p6-toolbar .v12-menu,
body #ganttOut .p6-toolbar .ga-mode-menu {
  position: relative !important;
}

body #ganttOut .p6-toolbar .v12-menu-trigger,
body #ganttOut .p6-toolbar .p6-tb-btn.v12-direct,
body #ganttOut .p6-toolbar .v12-switch-btn,
body #ganttOut .p6-toolbar #ganttLinkHandlesToggle,
body #ganttOut .p6-toolbar #ganttLinkHandlesToggle.gantt-link-mode-compact {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 31px !important;
  min-height: 31px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 11px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: #FFFFFF !important;
  color: #111827 !important;
  box-shadow: none !important;
  font: 800 11px/1 var(--g-font) !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  transform: none !important;
}

body #ganttOut .p6-toolbar .v12-menu-trigger:hover,
body #ganttOut .p6-toolbar .p6-tb-btn.v12-direct:hover,
body #ganttOut .p6-toolbar #ganttLinkHandlesToggle:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0B2A4A !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important;
}

body #ganttOut .p6-toolbar .p6-tb-btn.v12-direct.on,
body #ganttOut .p6-toolbar .p6-tb-btn.v12-direct.active,
body #ganttOut .p6-toolbar .p6-tb-btn.v12-direct[aria-pressed="true"],
body #ganttOut .p6-toolbar #ganttLinkHandlesToggle.on {
  background: #F3F7FB !important;
  border-color: #B8CDE0 !important;
  color: #0B2A4A !important;
  box-shadow: none !important;
}

body #ganttOut .p6-toolbar .gt-icon-svg {
  width: 15px !important;
  height: 15px !important;
  color: currentColor !important;
  opacity: 1 !important;
}

body #ganttOut .p6-toolbar .v12-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: #EEF2FF !important;
  color: #071A33 !important;
  font: 900 10px/1 var(--g-font) !important;
}

body #ganttOut .p6-toolbar > .v12-spacer,
body #ganttOut .p6-toolbar .v12-spacer,
body[data-gantt-theme="light"] #ganttOut .aipe-gantt-tools-v2 .v12-spacer {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  align-self: stretch !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: auto !important;
  height: 50px !important;
  margin-left: auto !important;
  padding: 0 0 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid #E2E8F0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body #ganttOut .p6-toolbar #ganttLinkHandlesToggle,
body #ganttOut .p6-toolbar #ganttLinkHandlesToggle.gantt-link-mode-compact,
body[data-gantt-theme="light"] #ganttOut .aipe-gantt-tools-v2 .v12-spacer #ganttLinkHandlesToggle {
  display: inline-flex !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border-radius: 9px !important;
  border-color: #B8CDE0 !important;
  background: #F3F7FB !important;
  color: #0B2A4A !important;
  font-size: 11px !important;
}

body #ganttOut .p6-toolbar .v12-menu-panel {
  border-radius: 10px !important;
  border: 1px solid #DDE5EF !important;
  background: #FFFFFF !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .14), 0 4px 10px rgba(15, 23, 42, .07) !important;
}

body #ganttOut .p6-toolbar .v12-menu-item {
  border-radius: 8px !important;
  font-size: 12px !important;
}

body #ganttOut .p6-toolbar .v12-menu-item.active {
  background: #F3F7FB !important;
  color: #0B2A4A !important;
}

body #ganttOut .p6-toolbar .v12-export-menu,
body #ganttOut .p6-toolbar .p6-exp-btn,
body #ganttOut .p6-toolbar .p6-rowcount {
  display: none !important;
}

/* ============================================================================
   18. REQUESTED NEW FUNCTIONAL TOOLBAR
   This is the visible toolbar. Native controls stay in the DOM for their runtime
   wiring, but the user sees the compact working buttons below.
   ============================================================================ */
body #ganttOut .p6-toolbar > .v12-toolgroup,
body #ganttOut .p6-toolbar .v12-toolgroup,
body #ganttOut .p6-toolbar > .v12-spacer,
body #ganttOut .p6-toolbar .v12-spacer,
body #ganttOut .p6-toolbar > .aipe-tool-block,
body #ganttOut .p6-toolbar .aipe-tool-block,
body #ganttOut .p6-toolbar #ganttLinkHandlesToggle {
  display: none !important;
}

body #ganttOut #gpx-toolset.gpx-live-tools,
body[data-gantt-theme="dark"] #ganttOut #gpx-toolset.gpx-live-tools {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 50px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body #ganttOut #gpx-toolset .gpx-tool-left,
body #ganttOut #gpx-toolset .gpx-tool-right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body #ganttOut #gpx-toolset .gpx-tool-right {
  margin-left: auto !important;
  padding-left: 16px !important;
  border-left: 1px solid #E2E8F0 !important;
}

body #ganttOut #gpx-toolset .gpx-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 40px !important;
  min-height: 40px !important;
  min-width: 0 !important;
  padding: 0 15px !important;
  border-radius: 10px !important;
  border: 1px solid #D8E0EA !important;
  background: #FFFFFF !important;
  color: #111827 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
  font: 900 13px/1 var(--g-font) !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

body #ganttOut #gpx-toolset .gpx-pill:hover {
  border-color: #B8CDE0 !important;
  background: #F8FBFF !important;
  color: #0B2A4A !important;
}

body #ganttOut #gpx-toolset .gpx-pill.on,
body #ganttOut #gpx-toolset .gpx-link-pill.on {
  border-color: #B8CDE0 !important;
  background: #F3F7FB !important;
  color: #0B2A4A !important;
}

body #ganttOut #gpx-toolset .gpx-link-pill {
  min-width: 132px !important;
  border-color: #B8CDE0 !important;
  background: #F3F7FB !important;
  color: #0B2A4A !important;
}

body #ganttOut #gpx-toolset .gpx-pill svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto !important;
}

body #ganttOut #gpx-toolset .gpx-pill b {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 24px !important;
  min-width: 28px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: #EEF2FF !important;
  color: #0B2A4A !important;
  font: 900 11px/1 var(--g-font) !important;
}

body #ganttOut #gpx-toolset .gpx-pill i {
  color: #94A3B8 !important;
  font-style: normal !important;
  font-size: 11px !important;
}

body #ganttOut #gpx-toolset .gpx-menu {
  position: relative !important;
}

body #ganttOut #gpx-toolset .gpx-dropdown {
  display: none !important;
  position: absolute !important;
  z-index: 90 !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  min-width: 190px !important;
  padding: 7px !important;
  border-radius: 12px !important;
  border: 1px solid #D8E0EA !important;
  background: #FFFFFF !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .14), 0 4px 10px rgba(15, 23, 42, .07) !important;
}

body #ganttOut #gpx-toolset .gpx-menu.open .gpx-dropdown {
  display: grid !important;
  gap: 4px !important;
}

body #ganttOut #gpx-toolset .gpx-dropdown button {
  height: 32px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #334155 !important;
  text-align: left !important;
  padding: 0 10px !important;
  font: 800 12px/1 var(--g-font) !important;
  cursor: pointer !important;
}

body #ganttOut #gpx-toolset .gpx-dropdown button:hover {
  background: #F3F7FB !important;
  color: #0B2A4A !important;
}

/* ============================================================================
   19. FINAL REQUEST FIX - new toolbar buttons, not old toolbar skin
   ============================================================================ */
body #ganttOut .p6-toolbar,
body #ganttOut .p6-toolbar.aipe-gantt-tools-v2,
body[data-gantt-theme="light"] #ganttOut .p6-toolbar.aipe-gantt-tools-v2 {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 70px !important;
  padding: 12px 16px !important;
  margin: 0 0 10px !important;
  border-radius: 14px !important;
  border: 1px solid #DDE7F2 !important;
  background: #FFFFFF !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04) !important;
  overflow: visible !important;
}

body #ganttOut .p6-toolbar > .v12-toolgroup,
body #ganttOut .p6-toolbar .v12-toolgroup,
body #ganttOut .p6-toolbar > .v12-spacer,
body #ganttOut .p6-toolbar .v12-spacer,
body #ganttOut .p6-toolbar > .aipe-tool-block,
body #ganttOut .p6-toolbar .aipe-tool-block,
body #ganttOut .p6-toolbar > .p6-tb-lbl,
body #ganttOut .p6-toolbar > .p6-tb-sep,
body #ganttOut .p6-toolbar > .p6-tb-btn,
body #ganttOut .p6-toolbar #ganttLinkHandlesToggle,
body #ganttOut #ganttLinkHandlesToggle,
body #ganttOut .gantt-link-mode-compact,
body #ganttOut .p6-toolbar .v12-export-menu,
body #ganttOut .p6-toolbar .p6-exp-btn,
body #ganttOut .p6-toolbar .p6-rowcount {
  display: none !important;
}

body #ganttOut #gpx-toolset.gpx-live-tools {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body #ganttOut #gpx-toolset .gpx-tool-left,
body #ganttOut #gpx-toolset .gpx-tool-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}

body #ganttOut #gpx-toolset .gpx-tool-left {
  flex: 1 1 auto !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-bottom: 1px !important;
  scrollbar-width: thin !important;
}

body #ganttOut #gpx-toolset .gpx-tool-right {
  flex: 0 0 auto !important;
  margin-left: 8px !important;
  padding-left: 16px !important;
  border-left: 1px solid #E2E8F0 !important;
}

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 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 9px !important;
  border: 1px solid #D8E0EA !important;
  background: #FFFFFF !important;
  color: #111827 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
  font: 900 12px/1 var(--g-font) !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

body #ganttOut #gpx-toolset .gpx-btn:hover,
body #ganttOut #gpx-toolset .gpx-toggle-btn:hover,
body #ganttOut #gpx-toolset .gpx-link-btn:hover,
body #ganttOut #gpx-toolset .gpx-icon-btn:hover {
  border-color: #BFD2EA !important;
  background: #F8FBFF !important;
  color: #0B2A4A !important;
  box-shadow: 0 8px 18px rgba(31, 78, 121, .09), 0 1px 2px rgba(15, 23, 42, .04) !important;
}

body #ganttOut #gpx-toolset .gpx-btn:active,
body #ganttOut #gpx-toolset .gpx-toggle-btn:active,
body #ganttOut #gpx-toolset .gpx-link-btn:active,
body #ganttOut #gpx-toolset .gpx-icon-btn:active {
  transform: translateY(1px) !important;
}

body #ganttOut #gpx-toolset .gpx-btn.on {
  border-color: #B8CDE0 !important;
  background: #F3F7FB !important;
  color: #0B2A4A !important;
}

body #ganttOut #gpx-toolset .gpx-btn svg,
body #ganttOut #gpx-toolset .gpx-toggle-btn svg,
body #ganttOut #gpx-toolset .gpx-link-btn svg {
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 auto !important;
  color: currentColor !important;
}

body #ganttOut #gpx-toolset .gpx-icon-btn {
  width: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  font-size: 15px !important;
}

body #ganttOut #gpx-toolset .gpx-btn b,
body #ganttOut #gpx-toolset .gpx-link-btn b {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 22px !important;
  min-width: 26px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: #EEF2FF !important;
  color: #0B2A4A !important;
  font: 900 10px/1 var(--g-font) !important;
}

body #ganttOut #gpx-toolset .gpx-btn i {
  color: #94A3B8 !important;
  font-style: normal !important;
  font-size: 10px !important;
}

body #ganttOut #gpx-toolset .gpx-toggle-btn {
  padding-right: 12px !important;
}

body #ganttOut #gpx-toolset .gpx-toggle-btn em {
  position: relative !important;
  width: 30px !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: #CBD5E1 !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06) !important;
  flex: 0 0 auto !important;
}

body #ganttOut #gpx-toolset .gpx-toggle-btn em::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .25) !important;
  transition: transform .16s ease !important;
}

body #ganttOut #gpx-toolset .gpx-toggle-btn.on {
  border-color: #B7D7C0 !important;
  background: #F0FDF4 !important;
  color: #166534 !important;
}

body #ganttOut #gpx-toolset .gpx-toggle-btn.on em {
  background: #22C55E !important;
}

body #ganttOut #gpx-toolset .gpx-toggle-btn.on em::after {
  transform: translateX(14px) !important;
}

body #ganttOut #gpx-toolset #gpx-critical.on {
  border-color: #FECACA !important;
  background: #FEF2F2 !important;
  color: #B91C1C !important;
}

body #ganttOut #gpx-toolset #gpx-open-ends.on {
  border-color: #FED7AA !important;
  background: #FFF7ED !important;
  color: #C2410C !important;
}

body #ganttOut #gpx-toolset #gpx-link-mode {
  min-width: 132px !important;
  border-color: #B8CDE0 !important;
  background: #F3F7FB !important;
  color: #0B2A4A !important;
}

body #ganttOut #gpx-toolset #gpx-link-mode.on {
  border-color: #8EACC9 !important;
  background: #E7EEF6 !important;
  color: #071A33 !important;
}

body #ganttOut #gpx-toolset .gpx-search {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 38px !important;
  width: 160px !important;
  padding: 0 11px !important;
  border-radius: 9px !important;
  border: 1px solid #D8E0EA !important;
  background: #FFFFFF !important;
  color: #475569 !important;
}

body #ganttOut #gpx-toolset .gpx-search svg {
  width: 16px !important;
  height: 16px !important;
}

body #ganttOut #gpx-toolset .gpx-search input {
  width: 100% !important;
  min-width: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #334155 !important;
  font: 800 12px/1 var(--g-font) !important;
}

body #ganttOut #gpx-toolset .gpx-search:focus-within {
  border-color: #8EACC9 !important;
  box-shadow: 0 0 0 3px rgba(31, 78, 121, .12) !important;
}

body #ganttOut #gpx-toolset .gpx-menu {
  position: relative !important;
  flex: 0 0 auto !important;
}

body #ganttOut #gpx-toolset .gpx-dropdown {
  z-index: 300 !important;
  top: calc(100% + 9px) !important;
  min-width: 196px !important;
  padding: 7px !important;
  border-radius: 11px !important;
}

body #ganttOut #gpx-toolset .gpx-dropdown button {
  width: 100% !important;
  text-align: left !important;
}

body #ganttOut .p6-row.gpx-hit .p6-left,
body #ganttOut .p6-row.gpx-hit .p6-right {
  background: rgba(219, 234, 254, .88) !important;
}

body #ganttOut .p6-row.gpx-open-end-hit .p6-left {
  box-shadow: inset 4px 0 0 #F97316 !important;
  background: #FFF7ED !important;
}

body #ganttOut .p6-row.gpx-open-end-hit .p6-right {
  background: rgba(255, 247, 237, .72) !important;
}

body #ganttOut .p6-row.gpx-open-end-hit .p6-left::after {
  content: attr(data-open-end-side) !important;
  float: right !important;
  margin-right: 8px !important;
  color: #C2410C !important;
  font: 900 10px/1.2 var(--g-font) !important;
}

body.__gpx-baseline-compare #ganttOut .p6-act-bar,
body.__gpx-baseline-compare #ganttOut .p6-sum-bar {
  box-shadow: 0 0 0 2px rgba(31, 78, 121, .20), 0 7px 12px rgba(15, 23, 42, .10) !important;
}

body.__gpx-baseline-compare #ganttOut .p6-act-bar::after,
body.__gpx-baseline-compare #ganttOut .p6-sum-bar::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -6px !important;
  height: 2px !important;
  background: #1F4E79 !important;
  border-radius: 999px !important;
  opacity: .75 !important;
}

body #ganttOut .gpx-tool-toast {
  position: sticky !important;
  z-index: 320 !important;
  bottom: 14px !important;
  left: 16px !important;
  width: max-content !important;
  max-width: min(520px, calc(100vw - 80px)) !important;
  margin: -44px 0 10px 16px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 1px solid #B8CDE0 !important;
  background: #F3F7FB !important;
  color: #071A33 !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .14) !important;
  font: 900 12px/1.2 var(--g-font) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

body #ganttOut .gpx-tool-toast.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

body #ganttOut .gpx-tool-toast.warn {
  border-color: #FED7AA !important;
  background: #FFF7ED !important;
  color: #C2410C !important;
}

body #ganttOut .gpx-tool-toast.ok {
  border-color: #BBF7D0 !important;
  background: #F0FDF4 !important;
  color: #166534 !important;
}

@media (max-width: 1300px) {
  body #ganttOut #gpx-toolset.gpx-live-tools {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body #ganttOut #gpx-toolset .gpx-tool-left {
    width: 100% !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  body #ganttOut #gpx-toolset .gpx-tool-right {
    width: 100% !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-top: 10px !important;
    border-left: 0 !important;
    border-top: 1px solid #E2E8F0 !important;
    overflow-x: auto !important;
  }
}

/* ============================================================================
   20. CLEAN COMPACT TOOLBAR - requested new buttons only
   ============================================================================ */
body #ganttOut .p6-toolbar,
body #ganttOut .p6-toolbar.aipe-gantt-tools-v2,
body[data-gantt-theme="light"] #ganttOut .p6-toolbar.aipe-gantt-tools-v2 {
  min-height: 62px !important;
  padding: 10px 14px !important;
}

body #ganttOut #gpx-toolset.gpx-live-tools {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 40px !important;
}

body #ganttOut #gpx-toolset .gpx-tool-left {
  flex: 1 1 auto !important;
  width: auto !important;
  overflow: visible !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  padding-bottom: 0 !important;
  scrollbar-width: none !important;
}

body #ganttOut #gpx-toolset .gpx-tool-left::-webkit-scrollbar {
  display: none !important;
}

body #ganttOut #gpx-toolset .gpx-tool-right {
  flex: 0 0 auto !important;
  width: auto !important;
  margin-left: auto !important;
  padding-left: 16px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  border-left: 1px solid #E2E8F0 !important;
  overflow: visible !important;
}

body #ganttOut #gpx-toolset .gpx-btn,
body #ganttOut #gpx-toolset .gpx-link-btn {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 10px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
}

body #ganttOut #gpx-toolset .gpx-btn.on {
  border-color: #FECACA !important;
  background: #FEF2F2 !important;
  color: #B91C1C !important;
}

body #ganttOut #gpx-toolset #gpx-link-mode {
  min-width: 148px !important;
  justify-content: center !important;
}

body #ganttOut #gpx-toolset #gpx-more-menu {
  min-width: 104px !important;
}

body #ganttOut #gpx-toolset .gpx-dropdown-wide {
  min-width: 220px !important;
}

body #ganttOut #gpx-toolset .gpx-dropdown .gpx-search {
  width: 100% !important;
  margin-top: 6px !important;
}

body #ganttOut #gpx-toolset .gpx-dropdown .gpx-search input {
  font-size: 12px !important;
}

@media (max-width: 980px) {
  body #ganttOut #gpx-toolset.gpx-live-tools {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body #ganttOut #gpx-toolset .gpx-tool-left {
    flex-wrap: wrap !important;
  }

  body #ganttOut #gpx-toolset .gpx-tool-right {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-top: 10px !important;
    border-left: 0 !important;
    border-top: 1px solid #E2E8F0 !important;
  }
}

/* ============================================================================
   21. SMALL REFERENCE-LIKE TOOLBAR - no Tools menu
   ============================================================================ */
body #ganttOut .p6-toolbar,
body #ganttOut .p6-toolbar.aipe-gantt-tools-v2,
body[data-gantt-theme="light"] #ganttOut .p6-toolbar.aipe-gantt-tools-v2 {
  min-height: 48px !important;
  padding: 7px 10px !important;
  margin: 0 0 8px !important;
  border-radius: 11px !important;
  box-shadow: 0 7px 18px rgba(15, 23, 42, .055), 0 1px 2px rgba(15, 23, 42, .04) !important;
}

body #ganttOut #gpx-toolset.gpx-live-tools {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 34px !important;
}

body #ganttOut #gpx-toolset .gpx-tool-left,
body #ganttOut #gpx-toolset .gpx-tool-right {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body #ganttOut #gpx-toolset .gpx-tool-left {
  flex: 1 1 auto !important;
  width: auto !important;
  overflow: visible !important;
}

body #ganttOut #gpx-toolset .gpx-tool-right {
  flex: 0 0 auto !important;
  width: auto !important;
  margin-left: auto !important;
  padding-left: 9px !important;
  padding-top: 0 !important;
  border-left: 1px solid #E2E8F0 !important;
  border-top: 0 !important;
  overflow: visible !important;
}

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 {
  height: 30px !important;
  min-height: 30px !important;
  gap: 5px !important;
  padding: 0 8px !important;
  border-radius: 7px !important;
  border-color: #DCE4EF !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  font: 900 10px/1 var(--g-font) !important;
}

body #ganttOut #gpx-toolset .gpx-btn svg,
body #ganttOut #gpx-toolset .gpx-toggle-btn svg,
body #ganttOut #gpx-toolset .gpx-link-btn svg {
  width: 14px !important;
  height: 14px !important;
}

body #ganttOut #gpx-toolset .gpx-btn b,
body #ganttOut #gpx-toolset .gpx-link-btn b {
  height: 18px !important;
  min-width: 22px !important;
  padding: 0 6px !important;
  font-size: 9px !important;
}

body #ganttOut #gpx-toolset .gpx-btn i {
  font-size: 9px !important;
}

body #ganttOut #gpx-toolset .gpx-toggle-btn {
  padding-right: 7px !important;
}

body #ganttOut #gpx-toolset .gpx-toggle-btn em {
  width: 24px !important;
  height: 13px !important;
}

body #ganttOut #gpx-toolset .gpx-toggle-btn em::after {
  top: 2px !important;
  left: 2px !important;
  width: 9px !important;
  height: 9px !important;
}

body #ganttOut #gpx-toolset .gpx-toggle-btn.on em::after {
  transform: translateX(11px) !important;
}

body #ganttOut #gpx-toolset #gpx-link-mode {
  min-width: 96px !important;
  padding: 0 8px !important;
  border-color: #B8CDE0 !important;
  background: #F3F7FB !important;
}

body #ganttOut #gpx-toolset .gpx-search {
  width: 118px !important;
  height: 30px !important;
  padding: 0 8px !important;
  gap: 6px !important;
  border-radius: 7px !important;
}

body #ganttOut #gpx-toolset .gpx-search svg {
  width: 13px !important;
  height: 13px !important;
}

body #ganttOut #gpx-toolset .gpx-search input {
  font-size: 10.5px !important;
}

body #ganttOut #gpx-toolset .gpx-dropdown {
  top: calc(100% + 7px) !important;
  min-width: 170px !important;
  border-radius: 9px !important;
}

body #ganttOut #gpx-toolset .gpx-dropdown button {
  height: 28px !important;
  font-size: 11px !important;
}

@media (max-width: 1450px) {
  body #ganttOut #gpx-toolset .gpx-iconic span,
  body #ganttOut #gpx-toolset .gpx-mini-action span,
  body #ganttOut #gpx-toolset #gpx-filter span {
    display: none !important;
  }

  body #ganttOut #gpx-toolset .gpx-iconic,
  body #ganttOut #gpx-toolset .gpx-mini-action,
  body #ganttOut #gpx-toolset #gpx-filter {
    width: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
  }

  body #ganttOut #gpx-toolset .gpx-toggle-btn {
    padding-left: 7px !important;
  }

  body #ganttOut #gpx-toolset #gpx-show-logic span,
  body #ganttOut #gpx-toolset #gpx-open-ends span {
    display: none !important;
  }

  body #ganttOut #gpx-toolset #gpx-critical span {
    max-width: 54px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body #ganttOut #gpx-toolset .gpx-toggle-btn {
    gap: 5px !important;
    padding-right: 6px !important;
  }
}

@media (max-width: 1180px) {
  body #ganttOut #gpx-toolset #gpx-timescale-menu span,
  body #ganttOut #gpx-toolset #gpx-show-logic span,
  body #ganttOut #gpx-toolset #gpx-open-ends span {
    display: none !important;
  }

  body #ganttOut #gpx-toolset .gpx-search {
    width: 96px !important;
  }

  body #ganttOut #gpx-toolset #gpx-link-mode {
    min-width: 86px !important;
  }
}

/* ============================================================================
   22. SELECTED COMPACT TOOLBAR - only the requested controls
   ============================================================================ */
body #ganttOut #gpx-view-menu,
body #ganttOut #gpx-expand,
body #ganttOut #gpx-collapse,
body #ganttOut #gpx-open-ends,
body #ganttOut #gpx-group,
body #ganttOut #gpx-validate,
body #ganttOut #gpx-baseline {
  display: none !important;
}

body #ganttOut .p6-toolbar,
body #ganttOut .p6-toolbar.aipe-gantt-tools-v2,
body[data-gantt-theme="light"] #ganttOut .p6-toolbar.aipe-gantt-tools-v2 {
  min-height: 46px !important;
  padding: 7px 10px !important;
  border-radius: 12px !important;
  border-color: #DDE7F2 !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFDFE 100%) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04) !important;
}

body #ganttOut #gpx-toolset.gpx-live-tools[data-gpx-version="compact-selected-v1"] {
  min-height: 32px !important;
  gap: 10px !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-tool-left {
  gap: 7px !important;
  flex: 1 1 auto !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-tool-right {
  gap: 7px !important;
  padding-left: 10px !important;
  margin-left: auto !important;
  border-left: 1px solid #E5EAF1 !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-btn,
body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-toggle-btn,
body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-link-btn {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  border: 1px solid #D9E2EE !important;
  background: #FFFFFF !important;
  color: #142033 !important;
  box-shadow: 0 1px 1px rgba(15, 23, 42, .035) !important;
  font: 900 11px/1 var(--g-font) !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-btn:hover,
body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-toggle-btn:hover,
body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-link-btn:hover {
  border-color: #B9CBE2 !important;
  background: #F8FBFF !important;
  color: #1455D9 !important;
  box-shadow: 0 8px 18px rgba(31, 78, 121, .08) !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-btn svg,
body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-toggle-btn svg,
body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-link-btn svg {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 2.15 !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-btn span,
body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-toggle-btn span,
body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-link-btn span {
  display: inline !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-btn b,
body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-link-btn b {
  height: 18px !important;
  min-width: 22px !important;
  padding: 0 6px !important;
  background: #EEF3FF !important;
  color: #0B2A4A !important;
  font-size: 9px !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-toggle-btn.on {
  border-color: #F3C4C4 !important;
  background: #FFF7F7 !important;
  color: #B42318 !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-toggle-btn em {
  width: 24px !important;
  height: 13px !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-toggle-btn em::after {
  width: 9px !important;
  height: 9px !important;
  top: 2px !important;
  left: 2px !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-toggle-btn.on em::after {
  transform: translateX(11px) !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-search {
  width: 132px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border-color: #D9E2EE !important;
  background: #FFFFFF !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-search input {
  font-size: 11px !important;
  font-weight: 800 !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] #gpx-link-mode {
  min-width: 104px !important;
  border-color: #BED5FF !important;
  background: #F1F6FF !important;
  color: #155EEF !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] #gpx-link-mode.on {
  border-color: #8CB8FF !important;
  background: #E7F0FF !important;
  color: #1248B5 !important;
}

@media (max-width: 1120px) {
  body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-btn span,
  body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] #gpx-critical span {
    display: none !important;
  }

  body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] .gpx-btn,
  body #ganttOut #gpx-toolset[data-gpx-version="compact-selected-v1"] #gpx-critical {
    width: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
  }
}

/* ============================================================================
   23. ULTRA COMPACT PROFESSIONAL TOOLBAR
   ============================================================================ */
body #ganttOut .p6-toolbar,
body #ganttOut .p6-toolbar.aipe-gantt-tools-v2,
body[data-gantt-theme="light"] #ganttOut .p6-toolbar.aipe-gantt-tools-v2 {
  min-height: 40px !important;
  padding: 5px 9px !important;
  margin: 0 0 7px !important;
  border-radius: 9px !important;
  border: 1px solid #E1E8F1 !important;
  background: #FFFFFF !important;
  box-shadow: 0 7px 16px rgba(15, 23, 42, .045), 0 1px 2px rgba(15, 23, 42, .035) !important;
}

body #ganttOut #gpx-toolset.gpx-live-tools[data-gpx-version="ultra-compact-v2"] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 29px !important;
  width: 100% !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-tool-left,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-tool-right {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  min-width: 0 !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-tool-left {
  flex: 1 1 auto !important;
  overflow: visible !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-tool-right {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  padding-left: 10px !important;
  border-left: 1px solid #E6ECF3 !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-menu,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-iconic,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-critical {
  position: relative !important;
  flex: 0 0 auto !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-menu:not(:last-child)::after,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-iconic::after {
  content: none !important;
  display: none !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-sep {
  display: inline-flex !important;
  width: 1px !important;
  height: 22px !important;
  margin: 0 7px !important;
  background: #E2E8F0 !important;
  border-radius: 999px !important;
  flex: 0 0 1px !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-btn,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-toggle-btn,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-link-btn {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 7px !important;
  gap: 5px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #172033 !important;
  box-shadow: none !important;
  font: 900 10px/1 var(--g-font) !important;
  letter-spacing: 0 !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-btn:hover,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-toggle-btn:hover {
  border-color: #D7E2F0 !important;
  background: #F8FBFF !important;
  color: #155EEF !important;
  box-shadow: none !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-btn svg,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-toggle-btn svg,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-link-btn svg {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 2.2 !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-btn b,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-link-btn b {
  height: 17px !important;
  min-width: 21px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #EEF3FF !important;
  color: #0B2A4A !important;
  font: 900 8.5px/1 var(--g-font) !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-btn i {
  color: #9AA7B8 !important;
  font-size: 8px !important;
  margin-left: 1px !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-fit {
  width: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-fit span {
  display: none !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-critical {
  padding: 0 6px !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-critical.on {
  border-color: #F4C6C8 !important;
  background: #FFF7F7 !important;
  color: #B42318 !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-show-logic {
  padding: 0 6px !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-show-logic.on {
  border-color: #BBF7D0 !important;
  background: #F0FDF4 !important;
  color: #15803D !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-critical em,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-show-logic em {
  width: 22px !important;
  height: 12px !important;
  background: #D2DAE6 !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-critical em::after,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-show-logic em::after {
  width: 8px !important;
  height: 8px !important;
  top: 2px !important;
  left: 2px !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-critical.on em {
  background: #D94855 !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-show-logic.on em {
  background: #22C55E !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-critical.on em::after,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-show-logic.on em::after {
  transform: translateX(10px) !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-search {
  width: 98px !important;
  height: 28px !important;
  padding: 0 6px !important;
  gap: 5px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-search:hover,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-search:focus-within {
  border-color: #D7E2F0 !important;
  background: #F8FBFF !important;
  box-shadow: none !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-search svg {
  width: 13px !important;
  height: 13px !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-search input {
  font: 800 10px/1 var(--g-font) !important;
  color: #334155 !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-link-mode {
  height: 30px !important;
  min-height: 30px !important;
  min-width: 96px !important;
  padding: 0 8px !important;
  border: 1px solid #BBD3FF !important;
  border-radius: 8px !important;
  background: #F4F8FF !important;
  color: #155EEF !important;
  box-shadow: none !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-link-mode:hover,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-link-mode.on {
  border-color: #8CB8FF !important;
  background: #EAF2FF !important;
  color: #1248B5 !important;
}

@media (max-width: 1180px) {
  body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-btn span,
  body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-critical span,
  body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-show-logic span {
    display: none !important;
  }

  body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-wbs-menu,
  body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-timescale-menu,
  body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-zoom-menu,
  body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-critical,
  body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] #gpx-show-logic {
    width: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
  }

  body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-btn b,
  body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v2"] .gpx-btn i {
    display: none !important;
  }
}

/* v3: same compact skin, with the old arrow-mode dropdown restored */
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 29px !important;
  width: 100% !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-tool-left,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-tool-right {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  min-width: 0 !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-tool-left {
  flex: 1 1 auto !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-tool-right {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  padding-left: 10px !important;
  border-left: 1px solid #E6ECF3 !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-sep {
  display: inline-flex !important;
  width: 1px !important;
  height: 22px !important;
  margin: 0 7px !important;
  background: #E2E8F0 !important;
  border-radius: 999px !important;
  flex: 0 0 1px !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-btn,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-toggle-btn,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-link-btn {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 7px !important;
  gap: 5px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #172033 !important;
  box-shadow: none !important;
  font: 900 10px/1 var(--g-font) !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-btn:hover,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-toggle-btn:hover {
  border-color: #D7E2F0 !important;
  background: #F8FBFF !important;
  color: #155EEF !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-btn svg,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-toggle-btn svg,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-link-btn svg {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 2.2 !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] #gpx-filter {
  height: 30px !important;
  min-height: 30px !important;
  min-width: 82px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 10px !important;
  border: 1px solid #D7E2F0 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: #172033 !important;
  box-shadow: none !important;
  font: 900 10.5px/1 var(--g-font) !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] #gpx-filter:hover {
  border-color: #8EACC9 !important;
  background: #F3F7FB !important;
  color: #0B2A4A !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] #gpx-filter.on {
  border-color: #4F7FA8 !important;
  background: #E7EEF6 !important;
  color: #0B2A4A !important;
  box-shadow: inset 0 0 0 1px rgba(31, 78, 121, .12) !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] #gpx-filter svg {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 2.35 !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-btn b,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-link-btn b {
  height: 17px !important;
  min-width: 21px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #EEF3FF !important;
  color: #0B2A4A !important;
  font: 900 8.5px/1 var(--g-font) !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-btn i {
  color: #9AA7B8 !important;
  font-size: 8px !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] #gpx-fit {
  width: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] #gpx-fit span {
  display: none !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] #gpx-critical.on {
  border-color: #F4C6C8 !important;
  background: #FFF7F7 !important;
  color: #B42318 !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] #gpx-show-logic {
  border-color: #D7E2F0 !important;
  background: #FFFFFF !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] #gpx-show-logic.on {
  border-color: #BBF7D0 !important;
  background: #F0FDF4 !important;
  color: #15803D !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-search {
  width: 98px !important;
  height: 28px !important;
  padding: 0 6px !important;
  gap: 5px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-search:hover,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-search:focus-within {
  border-color: #D7E2F0 !important;
  background: #F8FBFF !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] #gpx-link-mode {
  height: 30px !important;
  min-height: 30px !important;
  min-width: 96px !important;
  padding: 0 8px !important;
  border: 1px solid #BBD3FF !important;
  border-radius: 8px !important;
  background: #F4F8FF !important;
  color: #155EEF !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] #gpx-link-mode:hover,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] #gpx-link-mode.on {
  border-color: #8CB8FF !important;
  background: #EAF2FF !important;
  color: #1248B5 !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-dropdown button.active {
  background: #F3F7FB !important;
  color: #155EEF !important;
}

/* ============================================================================
   24. V16 REMOVED DUPLICATE WBS PALETTE BLOCK
   Final WBS colours are owned only by section 25 below.
   ============================================================================ */
/* ============================================================================
   25. PROFESSIONAL WBS LEVEL PALETTE - CSS source of truth
   --------------------------------------------------------------------------
   V16: default colours match core/994-appearance-engine.js PROJECT_NAVY_LEVELS.
   142 only writes CSS custom properties when a user-selected AppearancePalette
   differs; it never repaints backgrounds directly.
   ============================================================================ */
body #ganttOut .p6-row[data-rowkind="wbs"],
body #ganttOut .p6-left.p6-wbs-row {
  --wbs-left-a: #071A33;
  --wbs-left-b: #071A33;
  --wbs-right-a: rgba(7, 26, 51, .105);
  --wbs-border: rgba(79, 127, 168, .32);
  --wbs-fg: #FFFFFF;
  --wbs-subtle: #E7EEF6;
  --wbs-summary: #111827;
}

body #ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="0"],
body #ganttOut .p6-left.p6-wbs-row.lvl0 { --wbs-left-a:#071A33; --wbs-left-b:#071A33; --wbs-right-a:rgba(7,26,51,.105); --wbs-border:rgba(79,127,168,.32); --wbs-fg:#FFFFFF; --wbs-subtle:#E7EEF6; --wbs-summary:#111827; }
body #ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="1"],
body #ganttOut .p6-left.p6-wbs-row.lvl1 { --wbs-left-a:#102A4C; --wbs-left-b:#102A4C; --wbs-right-a:rgba(16,42,76,.105); --wbs-border:rgba(95,137,174,.32); --wbs-fg:#FFFFFF; --wbs-subtle:#E7EEF6; --wbs-summary:#111827; }
body #ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="2"],
body #ganttOut .p6-left.p6-wbs-row.lvl2 { --wbs-left-a:#1F4E79; --wbs-left-b:#1F4E79; --wbs-right-a:rgba(31,78,121,.105); --wbs-border:rgba(142,172,201,.32); --wbs-fg:#FFFFFF; --wbs-subtle:#E7EEF6; --wbs-summary:#111827; }
body #ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="3"],
body #ganttOut .p6-left.p6-wbs-row.lvl3 { --wbs-left-a:#355F8C; --wbs-left-b:#355F8C; --wbs-right-a:rgba(53,95,140,.105); --wbs-border:rgba(184,205,224,.30); --wbs-fg:#FFFFFF; --wbs-subtle:#E7EEF6; --wbs-summary:#111827; }
body #ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="4"],
body #ganttOut .p6-left.p6-wbs-row.lvl4 { --wbs-left-a:#5F89AE; --wbs-left-b:#5F89AE; --wbs-right-a:rgba(95,137,174,.105); --wbs-border:rgba(201,216,232,.30); --wbs-fg:#FFFFFF; --wbs-subtle:#F8FAFC; --wbs-summary:#111827; }
body #ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="5"],
body #ganttOut .p6-left.p6-wbs-row.lvl5 { --wbs-left-a:#8EACC9; --wbs-left-b:#8EACC9; --wbs-right-a:rgba(142,172,201,.105); --wbs-border:rgba(231,238,246,.34); --wbs-fg:#0F172A; --wbs-subtle:#244C73; --wbs-summary:#111827; }
body #ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="6"],
body #ganttOut .p6-left.p6-wbs-row.lvl6 { --wbs-left-a:#B8CDE0; --wbs-left-b:#B8CDE0; --wbs-right-a:rgba(184,205,224,.105); --wbs-border:rgba(231,238,246,.38); --wbs-fg:#0F172A; --wbs-subtle:#244C73; --wbs-summary:#111827; }
body #ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="7"],
body #ganttOut .p6-left.p6-wbs-row.lvl7 { --wbs-left-a:#E7EEF6; --wbs-left-b:#E7EEF6; --wbs-right-a:rgba(231,238,246,.105); --wbs-border:rgba(184,205,224,.42); --wbs-fg:#0F172A; --wbs-subtle:#244C73; --wbs-summary:#111827; }
body #ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="8"],
body #ganttOut .p6-left.p6-wbs-row.lvl8 { --wbs-left-a:#0B2A4A; --wbs-left-b:#0B2A4A; --wbs-right-a:rgba(11,42,74,.105); --wbs-border:rgba(71,122,163,.32); --wbs-fg:#FFFFFF; --wbs-subtle:#E7EEF6; --wbs-summary:#111827; }
body #ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="9"],
body #ganttOut .p6-left.p6-wbs-row.lvl9 { --wbs-left-a:#244C73; --wbs-left-b:#244C73; --wbs-right-a:rgba(36,76,115,.105); --wbs-border:rgba(126,163,197,.32); --wbs-fg:#FFFFFF; --wbs-subtle:#E7EEF6; --wbs-summary:#111827; }
body #ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="10"],
body #ganttOut .p6-left.p6-wbs-row.lvl10 { --wbs-left-a:#477AA3; --wbs-left-b:#477AA3; --wbs-right-a:rgba(71,122,163,.105); --wbs-border:rgba(191,210,228,.32); --wbs-fg:#FFFFFF; --wbs-subtle:#F8FAFC; --wbs-summary:#111827; }
body #ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="11"],
body #ganttOut .p6-left.p6-wbs-row.lvl11 { --wbs-left-a:#7EA3C5; --wbs-left-b:#7EA3C5; --wbs-right-a:rgba(126,163,197,.105); --wbs-border:rgba(231,238,246,.34); --wbs-fg:#0F172A; --wbs-subtle:#244C73; --wbs-summary:#111827; }
body #ganttOut .p6-row[data-rowkind="wbs"][data-rowlevel="12"],
body #ganttOut .p6-left.p6-wbs-row.lvl12 { --wbs-left-a:#BFD2E4; --wbs-left-b:#BFD2E4; --wbs-right-a:rgba(191,210,228,.105); --wbs-border:rgba(231,238,246,.40); --wbs-fg:#0F172A; --wbs-subtle:#244C73; --wbs-summary:#111827; }

body #ganttOut .p6-row[data-rowkind="wbs"] .p6-left,
body #ganttOut .p6-left.p6-wbs-row {
  background: linear-gradient(90deg, var(--wbs-left-a), var(--wbs-left-b)) !important;
  border-bottom: 1px solid var(--wbs-border) !important;
  color: var(--wbs-fg) !important;
}

body #ganttOut .p6-left.p6-wbs-row + .p6-right,
body #ganttOut .p6-row[data-rowkind="wbs"] .p6-right {
  background: linear-gradient(90deg, var(--wbs-right-a), rgba(255,255,255,.018)) !important;
  border-bottom: 1px solid var(--wbs-border) !important;
}

body #ganttOut .p6-row[data-rowkind="wbs"] .p6-left .p6-cell,
body #ganttOut .p6-left.p6-wbs-row .p6-cell {
  color: var(--wbs-fg) !important;
  background: transparent !important;
  border-left-color: rgba(255,255,255,.18) !important;
}

body #ganttOut .p6-row[data-rowkind="wbs"] .p6-name-main,
body #ganttOut .p6-row[data-rowkind="wbs"] .p6-name-text,
body #ganttOut .p6-left.p6-wbs-row .p6-name-main,
body #ganttOut .p6-left.p6-wbs-row .p6-name-text,
body #ganttOut .p6-left.p6-wbs-row .p6-c-id,
body #ganttOut .p6-left.p6-wbs-row .p6-c-dur,
body #ganttOut .p6-left.p6-wbs-row .p6-c-date { color: var(--wbs-fg) !important; text-shadow: none !important; }

body #ganttOut .p6-left.p6-wbs-row .p6-toggle-mark,
body #ganttOut .p6-row[data-rowkind="wbs"] .p6-toggle-mark { color: var(--wbs-fg) !important; background: rgba(255,255,255,.20) !important; border-color: rgba(255,255,255,.30) !important; }

body #ganttOut .p6-left.p6-wbs-row + .p6-right .p6-sum-bar,
body #ganttOut .p6-row[data-rowkind="wbs"] .p6-sum-bar { --sum-line: var(--wbs-summary) !important; background: var(--wbs-summary) !important; }



/* ============================================================================
   26. V17 WBS TOGGLE GRID-SHIFT FIX
   --------------------------------------------------------------------------
   Root cause: after removing legacy visual CSS layers, .p6-gutter-toggle lost
   its absolute positioning and became the first CSS-grid child inside .p6-left.
   That pushed ID/Name/Dur/Start/Finish one column to the right for WBS rows.
   This is a source-style fix in the final Gantt CSS owner, not a repaint layer.
   ============================================================================ */
body #ganttOut .p6-left .p6-gutter-toggle {
  position: absolute !important;
  inset-inline-start: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 6 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

body #ganttOut .p6-left .p6-gutter-toggle:hover {
  transform: translateY(-50%) scale(1.06) !important;
}

body #ganttOut .p6-row.is-toggleable[data-rowkind="wbs"] .p6-c-id,
body #ganttOut .p6-row[data-can-toggle="1"][data-rowkind="wbs"] .p6-c-id {
  padding-inline-start: 28px !important;
}

body #ganttOut .p6-row.is-toggleable[data-rowkind="wbs"] .p6-name-main.with-toggle,
body #ganttOut .p6-row[data-can-toggle="1"][data-rowkind="wbs"] .p6-name-main.with-toggle {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Tighten the toolbar container to match the compact controls */
body #ganttOut .p6-toolbar,
body #ganttOut .p6-toolbar.aipe-gantt-tools-v2,
body[data-gantt-theme="light"] #ganttOut .p6-toolbar.aipe-gantt-tools-v2 {
  min-height: 34px !important;
  height: 42px !important;
  padding: 4px 8px !important;
  margin: 0 0 6px !important;
  border-radius: 10px !important;
}

body #ganttOut #gpx-toolset.gpx-live-tools[data-gpx-version="ultra-compact-v3"] {
  min-height: 30px !important;
  height: 30px !important;
}

body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-tool-left,
body #ganttOut #gpx-toolset[data-gpx-version="ultra-compact-v3"] .gpx-tool-right {
  height: 30px !important;
}


/* ============================================================================
   26. V16 SINGLE-OWNER WBS PALETTE GUARD
   --------------------------------------------------------------------------
   Keep WBS colours CSS-owned and stable. 019 emits the same first-paint palette,
   142 only tags rows and never repaints colours. These rules intentionally avoid
   transitions on WBS bands to prevent flashback while scrolling/opening Gantt.
   ============================================================================ */
body.__gpx-wbs-css-palette #ganttOut .p6-row[data-rowkind="wbs"] .p6-left,
body.__gpx-wbs-css-palette #ganttOut .p6-row[data-rowkind="wbs"] .p6-right,
body.__gpx-wbs-css-palette #ganttOut .p6-left.p6-wbs-row,
body.__gpx-wbs-css-palette #ganttOut .p6-left.p6-wbs-row + .p6-right {
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}
body.__gpx-wbs-css-palette #ganttOut .p6-row[data-rowkind="wbs"] {
  contain: paint !important;
}

/* ============================================================================
   27. V19 WBS INPLACE TOGGLE CLEANUP
   --------------------------------------------------------------------------
   Keep one WBS toggle only: the inline mark inside the WBS name cell. The old
   gutter button beside ID is legacy and is hidden defensively in case cached or
   archived renderer fragments inject it. Also remove the V17 ID-padding reserve
   that existed only to make room for that gutter button.
   ============================================================================ */
body #ganttOut .p6-left .p6-gutter-toggle {
  display: none !important;
  pointer-events: none !important;
}
body #ganttOut .p6-row.is-toggleable[data-rowkind="wbs"] .p6-c-id,
body #ganttOut .p6-row[data-can-toggle="1"][data-rowkind="wbs"] .p6-c-id {
  padding-inline-start: 8px !important;
}
body #ganttOut .p6-left.p6-wbs-row .p6-toggle-mark,
body #ganttOut .p6-row[data-rowkind="wbs"] .p6-toggle-mark {
  display: inline-grid !important;
  place-items: center !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 999px !important;
  margin-inline-end: 7px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  user-select: none !important;
  background: rgba(255,255,255,.20) !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  color: var(--wbs-fg) !important;
  box-shadow: none !important;
}
body #ganttOut .p6-left.p6-wbs-row .p6-toggle-mark:hover,
body #ganttOut .p6-row[data-rowkind="wbs"] .p6-toggle-mark:hover {
  background: rgba(255,255,255,.30) !important;
}

/* V20 — surgical bar-drag interaction guard.
   While an activity bar is being dragged, disable all visual transitions on
   row bars/labels and keep the tiny live-arrow overlay cheap. This prevents
   old theme transitions from making the bar feel heavy or delayed. */
body.__gantt-drag-active #ganttOut .p6-act-bar,
body.__gantt-drag-active #ganttOut .p6-side-lbl,
body.__gantt-drag-active #ganttOut .p6-row,
body.__gantt-drag-active #ganttOut .p6-left,
body.__gantt-drag-active #ganttOut .p6-right {
  transition: none !important;
  animation: none !important;
}
body.__gantt-drag-active #ganttOut .p6-act-bar.gdf-drag,
body.__gantt-drag-active #ganttOut .p6-act-bar.gdf-live-affected {
  will-change: transform;
  cursor: grabbing !important;
}
#ganttOut #ga-live-drag-svg .ga-live-drag-path {
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .22));
}

/* V21 — smooth bar-drag: transformed previews should stay compositor-only.
   Avoid expensive live shadows/filters on many affected downstream bars/links. */
body.__gantt-drag-active #ganttOut .p6-act-bar.gdf-live-affected {
  box-shadow: none !important;
}
body.__gantt-drag-active #ganttOut #ga-live-drag-svg .ga-live-drag-path {
  filter: none !important;
}


/* V22 — activity drag isolation.
   Keep live drag movement compositor-only and prevent hidden interaction layers
   from receiving pointer events while an activity bar is being dragged. */
body.__gantt-drag-active #ganttOut .ga-link-node,
body.__gantt-drag-active #ganttOut .ga-edge-link-handle,
body.__gantt-drag-active #ganttOut #ga-smart-link-overlay,
body.__gantt-drag-active #ganttOut #ga-link-drag-overlay {
  pointer-events: none !important;
}
body.__gantt-drag-active #ganttOut .p6-act-bar.gdf-drag,
body.__gantt-drag-active #ganttOut .p6-act-bar.gdf-live-affected,
body.__gantt-drag-active #ganttOut .p6-side-lbl.act {
  transform-style: flat !important;
  contain: paint !important;
  filter: none !important;
  text-shadow: none !important;
}
body.__gantt-drag-active #ganttOut .p6-row.gdf-live-affected,
body.__gantt-drag-active #ganttOut .p6-row.gdf-live-critical,
body.__gantt-drag-active #ganttOut .p6-row.gdf-live-normal {
  contain: layout paint !important;
}


/* V31: base renderer outputs a neutral toolbar shell only; grouped toolbar is the owner. */
#ganttOut .p6-toolbar.aipe-gantt-toolbar-pending:not(:has(#gpx-toolset)){
  min-height:56px;
  display:flex;
  align-items:center;
}
#ganttOut .p6-toolbar #gpx-toolset + .ga-mode-menu,
#ganttOut .p6-toolbar #gpx-toolset + .v12-menu[data-v12-menu="links"],
#ganttOut .p6-toolbar > .ga-mode-menu,
#ganttOut .p6-toolbar > .v12-menu[data-v12-menu="links"]{
  display:none!important;
}