/* The scrollResize plugin sizes a table's scroll body to the space left between
   the wrapper's top and the bottom of the viewport. In normal flow that space is
   measured from an element the table itself just made taller, so every resize or
   redraw feeds the growth back in and the table expands without bound. Taking the
   wrapper out of flow -- fixed top, pinned to the viewport bottom -- gives
   scrollResize a stable box to measure, the same way every other tool here does it.

   The top offsets clear whatever sits above the table (page heading, tabs, and any
   filter row or note) and are hand-tuned, as elsewhere in the app. Anything placed
   above the wrapper in the markup must be accounted for here or it ends up
   underneath the table. */

#proj_pipe_projects_resize_wrapper {
    position: absolute;
    top: 16em;
    left: 0;
    right: 0;
    bottom: 0;
}

#proj_pipe_clients_resize_wrapper {
    position: absolute;
    top: 12.5em;
    left: 0;
    right: 0;
    bottom: 0;
}

#proj_pipe_phase_types_resize_wrapper {
    position: absolute;
    top: 12.5em;
    left: 0;
    right: 0;
    bottom: 0;
}

#proj_pipe_milestone_types_resize_wrapper {
    position: absolute;
    top: 12.5em;
    left: 0;
    right: 0;
    bottom: 0;
}

#proj_pipe_milestone_eopc_levels_resize_wrapper {
    position: absolute;
    top: 12.5em;
    left: 0;
    right: 0;
    bottom: 0;
}

/* The overview landing page has no tab strip above its table, so it clears less
   than #proj_pipe_projects_resize_wrapper does on the edit page. */
#proj_pipe_overview_projects_resize_wrapper {
    position: absolute;
    top: 12em;
    left: 0;
    right: 0;
    bottom: 0;
}

/* A phase that was dropped or superseded rather than never scheduled. It stays
   on the edit grid -- the overview leaves it out -- and reads in red there so it
   is not mistaken for part of the schedule.

   DataTables writes its own colour onto the cells of striped and hovered rows,
   so the rule has to reach the cells rather than sit on the row and be
   inherited, and it has to outweigh those. The parent project row says the same
   thing with .text-danger on the lines of its Phases cell; that one is a
   Bootstrap utility and already carries !important. */
tr.proj-pipe-phase-inactive > td {
    color: var(--bs-danger) !important;
}

/* The program cost breakdown behind the info button beside a project's program
   cost -- see ProjPipe::Project#program_cost_info. Three columns, phase type,
   year and quarter, cost, laid out as a grid so each lines up down the popover;
   Bootstrap's popover sanitizer strips table tags, so a table is not an option.
   The type column takes what is left and wraps a long name; the other two keep
   to one line. The total's label spans the type and period columns.

   Bootstrap caps a popover at 276px, too narrow for the three, so this one is
   widened through the custom class the button hands it. */
.proj-pipe-program-cost-popover {
    --bs-popover-max-width: 32rem;
}

.proj-pipe-program-cost-info {
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 1rem;
}

.proj-pipe-program-cost-info-total-label {
    grid-column: span 2;
}

/* The note under the total explaining the warning icon on a phase with no
   cost. It runs the full width of the breakdown rather than sitting in a
   column. */
.proj-pipe-program-cost-info-note {
    grid-column: 1 / -1;
}

/* The future construction cost breakdown behind the info button beside a
   milestone's future construction cost -- see
   ProjPipe::Milestone#future_construction_cost_info. The same grid as the
   program cost's, with a fourth column: phase type, year, the milestone-year
   cost and the future cost. The total's label spans the first three, and the
   note explaining the escalation runs the full width. */
.proj-pipe-future-cost-popover {
    --bs-popover-max-width: 36rem;
}

.proj-pipe-future-cost-info {
    display: grid;
    grid-template-columns: auto auto auto auto;
    column-gap: 1rem;
}

.proj-pipe-future-cost-info-total-label {
    grid-column: span 3;
}

.proj-pipe-future-cost-info-note {
    grid-column: 1 / -1;
}