/* ── Give outer a max-height so it scrolls vertically ── */
    #ganttOut #v9-gantt-outer {
      max-height: calc(100vh - 140px) !important;
      overflow: auto !important;
      overscroll-behavior: contain !important;
      /* isolation:isolate creates a proper stacking context so z-index comparisons
         between #ga-svg (z:8) and .p6-hdr-right (z:14+) work correctly —
         header always paints on top of SVG arrows. Does NOT break position:sticky. */
      isolation: isolate !important;
    }

    /* ── Sticky header — works because scroll is on the outer container ── */
    #ganttOut .p6-hdr-left {
      position: sticky !important;
      top: 0 !important;
      left: 0 !important;
      z-index: 20 !important;
    }

    #ganttOut .p6-hdr-right {
      position: sticky !important;
      top: 0 !important;
      z-index: 14 !important;
    }

    /* ── Sticky left column ── */
    #ganttOut .p6-left {
      position: sticky !important;
      left: 0 !important;
      z-index: 10 !important;
      overflow: hidden !important;
    }

    /* ── Separator ── */
    #ganttOut .p6-left,
    #ganttOut .p6-hdr-left {
      border-right: 3px solid rgba(79, 127, 168, .45) !important;
      box-shadow: 4px 0 14px rgba(0, 0, 0, .45) !important;
    }

    body[data-gantt-theme="light"] #ganttOut .p6-left,
    body[data-gantt-theme="light"] #ganttOut .p6-hdr-left {
      border-right: 3px solid rgba(30, 60, 120, .28) !important;
      box-shadow: 4px 0 10px rgba(0, 0, 0, .13) !important;
    }

    /* ── Chart area — bars must not bleed into sticky header ── */
    #ganttOut .p6-right {
      overflow: hidden !important;
      position: relative !important;
    }

    #gantt-month-overlay {
      z-index: 2 !important;
    }