/* @define JobEditor */

.JobEditor {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.JobEditor-loadingSpinner {
    font-size: 10vh;
}

.JobEditor-body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.JobEditor-tabs {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.JobEditor-tabContent {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    background-color: var(--surface-subtle-light);
}

/* stylelint-disable plugin/selector-bem-pattern */
.JobEditor-tabs > .Tabs {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.JobEditor-tabs .tab-pane {
    height: 100%;
}
/* stylelint-enable plugin/selector-bem-pattern */

/*
 * #content becomes a non-scrolling flex column filling the viewport.
 */
/* stylelint-disable plugin/selector-bem-pattern */
#content.JobEditor-fixedViewport {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* CP: The unclassed <div> Vue mounts in place of <vue-main>. :has(> .JobEditor) distinguishes it from
   the GlobalSearch/ChatWidget vue-component roots that are also direct children of #content. */
#content.JobEditor-fixedViewport > div:has(> .JobEditor) {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* #view: collapsed while the Gantt is hidden,
   fills the remaining space when the Team Gantt is active */
.JobEditor-fixedViewport > #view {
    height: auto;
    flex: 0 0 auto;
}

#content.JobEditor-fixedViewport:has(.JobEditor--teamGanttActive) > div:has(> .JobEditor) {
    flex: 0 0 auto;
}

.JobEditor-fixedViewport:has(.JobEditor--teamGanttActive) > #view {
    flex: 1 1 0;
    min-height: 0;
}
/* stylelint-enable plugin/selector-bem-pattern */

/* When the Team Gantt is active the editor collapses to its header + tab strip; the empty Team
   pane and its scroll container must not consume vertical space. */
.JobEditor--teamGanttActive .JobEditor-body,
.JobEditor--teamGanttActive .JobEditor-tabContent {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
}

/* stylelint-disable plugin/selector-bem-pattern */
.JobEditor--teamGanttActive .JobEditor-tabs,
.JobEditor--teamGanttActive .JobEditor-tabs > .Tabs {
    flex: 0 0 auto;
    min-height: 0;
}

.JobEditor--teamGanttActive .JobEditor-tabs .tab-pane {
    height: auto;
}
/* stylelint-enable plugin/selector-bem-pattern */

/*
 * Show the Gantt only while the Team tab is active. .EditJobGantt is in ng-view (a sibling of
 * vue-main under #content); the modifier above sits on the editor inside vue-main.
 */
/* stylelint-disable plugin/selector-bem-pattern */
#content .EditJobGantt {
    display: none;
    height: 100%;
}

#content:has(.JobEditor--teamGanttActive) .EditJobGantt {
    display: block;
}

/* The shared .gantt-view.job-edit carries a 15px right padding that Angular needs but the
   Vue editor doesn't; drop it here (scoped to the Vue routed-addon .EditJobGantt). */
#content .EditJobGantt .gantt-view.job-edit {
    margin-top: 0;
    padding-right: 0;
}
/* stylelint-enable plugin/selector-bem-pattern */