/*
 * The trip dialog of the charging plan.
 *
 * PrimeFaces places a dialog with jQuery UI's position(), and every page of this template loads its
 * own jQuery (3.1.1) on top of the one PrimeFaces brings (4.x) - so the plugin it asks for is not
 * on the jQuery it ends up using, and the call quietly leaves the dialog in the top left corner of
 * the window: half of it under the header, taller than the screen, with the Save button below the
 * fold. The trip could be filled in and not saved.
 *
 * These rules place the dialog and cap its height without asking jQuery UI for anything.
 * !important is what it takes - PrimeFaces writes top, left and z-index into the element's own
 * style attribute as it shows it.
 *
 * The same conflict is why the dialog is declared draggable="false", and why its fields are plain
 * selects and native date and time inputs rather than the PrimeFaces components that open a panel.
 */
.trip-dialog {
    position: fixed !important;
    top: 84px !important;
    left: 50% !important;
    transform: translateX(-50%);
    max-width: 94vw;
    max-height: calc(100vh - 104px);
    /* over the fixed header of the template, which would otherwise cover the dialog's own title */
    z-index: 1200 !important;
}

/* A long form stays reachable: the dialog keeps its frame, the fields inside it scroll. */
.trip-dialog .ui-dialog-content {
    max-height: calc(100vh - 104px - 3rem);
    overflow-y: auto;
}

/* The modal mask covers the header too, or a menu stays clickable behind an open dialog. */
.ui-widget-overlay {
    z-index: 1190 !important;
}

/* On a phone the header is shorter and every pixel of width counts. */
@media (max-width: 576px) {
    .trip-dialog {
        top: 64px !important;
        max-width: 96vw;
        max-height: calc(100vh - 80px);
    }

    .trip-dialog .ui-dialog-content {
        max-height: calc(100vh - 80px - 3rem);
    }
}