#container > .b-container {
    flex-flow                   : row;

    /* Shared header row height so Gantt and AG Grid line up */
    --demo-grid-header-height   : 57px;
    --demo-panel-header-height  : 3rem;
}

.b-grid-header {
    height : var(--demo-grid-header-height);
}

.b-gantt > .b-panel-header,
.b-ag-grid-panel > .b-panel-header {
    border-block-end : var(--b-grid-header-container-border-width) solid var(--b-grid-header-border-color);
}

/* Drop indicator: paint the highlighted row's bottom edge blue */
.b-grid-sub-grid-locked .drag-from-grid-target-task-before {
    overflow                  : visible;
    z-index                   : 1;

    --b-grid-row-border-color : var(--b-color-blue);
    --b-grid-row-border-width : 2px;

    .b-grid-cell {
        overflow : visible;
        height   : calc(100% + 1px);
    }
}

.b-time-axis-sub-grid {
    --b-grid-row-border-color : transparent;
}

/* Let AG Grid fill the panel content area and inherit Bryntum theme tokens */
.b-panel-content.b-ag-grid-panel-content {
    padding             : 0;
    --ag-header-height       : var(--demo-grid-header-height);
    --ag-row-border-color    : var(--b-grid-header-border-color);

    /* Force border-box so AG Grid's bottom border lands at Gantt's header container bottom */
    .ag-header {
        box-sizing                    : border-box;
        block-size                    : var(--ag-header-height) !important;
        min-block-size                : var(--ag-header-height) !important;
        --ag-header-background-color  : var(--b-grid-header-applied-background, var(--b-grid-header-background));
    }

    /* Override on .ag-row so cascade reaches .ag-row-odd too */
    .ag-row {
        --ag-data-background-color    : var(--b-grid-cell-applied-background, var(--b-grid-cell-background));
        --ag-odd-row-background-color : var(--b-grid-cell-applied-background, var(--b-grid-cell-background));
    }

    /* Vertically center cell content — Quartz aligns to top by default */
    .ag-cell {
        display     : flex;
        align-items : center;
        line-height : normal;
    }

    /* .ag-cell is flex above, so AG Grid's stock text-align: right is inert */
    .ag-cell.ag-right-aligned-cell {
        justify-content : flex-end;
        text-align      : end;
    }

    .ag-header-cell.ag-right-aligned-header .ag-header-cell-label {
        justify-content : flex-end;
    }
}

/* Compound selector beats AG Grid's runtime-injected theme stylesheet */
.b-ag-grid-panel-content .ag-root-wrapper.ag-layout-normal {
    --ag-wrapper-border-radius : 0;
    border-radius              : 0;
    border-block-start         : 0;
    border-inline-start        : 0;
}

/* Flatten left edge to sit flush against the splitter */
.b-ag-grid-panel {
    border-start-start-radius : 0;
    border-end-start-radius   : 0;
}

.unplanned-icon {
    flex              : 0 0 1.25em;
    inline-size       : 1.25em;
    text-align        : center;
    margin-inline-end : 0.5rem;
}

/* Custom drag proxy pill rendered by Drag.js#createProxy() */
.demo-drag-proxy.b-drag-proxy {
    display        : inline-flex;
    align-items    : center;
    gap            : 0.6rem;
    padding        : 0.5rem 0.85rem;
    background     : var(--b-panel-background);
    color          : var(--b-widget-color);
    border         : 1px solid var(--b-color-light-gray, #d0d0d0);
    border-radius  : 0.4rem;
    box-shadow     : 0 4px 12px 0 rgba(0, 0, 0, 0.18);
    font-size      : 0.9rem;
    white-space    : nowrap;
    pointer-events : none;

    .demo-drag-proxy-icon {
        font-size : 1.1rem;
        color     : var(--b-color-deep-orange, #ff5722);
    }

    .demo-drag-proxy-duration {
        opacity   : 0.7;
        font-size : 0.85rem;
    }

    &.b-drag-invalid {
        background : #ffd5d5;
        color      : var(--b-color-red);
    }
}