/* projects - responsive fixes for this module only. Loaded after css/shared/responsive.css
   on every page in the area (Quotes pages load css/quotes/responsive.css, not this).
   See DOCS/Showcase-Mobile.md. */

@media (max-width: 1023.98px) {

    /* All Projects / Active Projects: the "Est. completion" date range is an
       inline flex with two 150px inputs; on a phone it ran past the edge. Give
       it its own line and let the two inputs share it. */
    .date-range-filter {
        flex-wrap: wrap;
        flex-basis: 100%;
    }

    .date-range-filter .filter-date {
        flex: 1 1 120px;
        max-width: none;
    }

    /* Dashboard: the Portfolio Timeline controls. The scope select and the
       prev/label/next/Today/Fit group each wrap instead of forcing a ~380px
       row that overflowed the panel. */
    .panel-tools .filter-input {
        max-width: none;
        width: 100%;
    }

    .range-group {
        flex-wrap: wrap;
    }

    .range-label {
        min-width: 0;
    }
}

@media (max-width: 767.98px) {

    /* Templates: title and Rename/Clone/Delete/Add Phase on separate lines */
    .template-detail-head {
        flex-wrap: wrap;
    }

    .template-detail-actions {
        flex-basis: 100%;
    }

    /* Active Projects: All / Behind / Due soon / Over budget fill the width */
    .health-filter {
        display: flex;
        width: 100%;
    }

    .health-btn {
        flex: 1 1 auto;
    }

    /* Dashboard: the timeline's frozen left pane is narrower on a phone so
       some of the bars are visible before scrolling */
    .gantt-left {
        flex-basis: 240px;
    }
}