/* Common
 */

.vm-console,
.vm-console-vnc,
.vm-console-vnc > div,
.vm-console-serial {
    inline-size: 100%;
    block-size: 100%;
}

.ct-remote-viewer-popover {
    max-inline-size: 60ch;
}

/* Console card in overview page
 */

.vm-details {
    .vm-console {
        /* HACK - I only get this to behave with a two column grid.  With only
           one column, the VNC console will make the page wider
           than the browser window...
         */
        display: grid;
        grid-template-areas: 'main main'
                             'footer footer';
        grid-template-columns: 1fr;
        grid-template-rows: 1fr min-content;
    }

    .vm-console-footer {
        grid-area: footer;
        margin-block-start: var(--pf-t--global--spacer--md);
    }

    .vm-console-vnc {
        grid-area: main;
    }

    .vm-console-serial {
        grid-area: main;
    }
}

/* Expanded console
 */

.consoles-page-expanded {
    .pf-v6-c-page__main-container,
    .pf-v6-c-page__main,
    .pf-v6-c-page__main-section,
    .consoles-card {
        block-size: 100%;
    }

    .consoles-card .pf-v6-c-card__body {
        padding-inline-start: 0;
        padding-inline-end: 0;
        overflow: auto;
    }
}

/* Standalone console
 */

.consoles-page-standalone {
    block-size: 100%;
    background: var(--pf-t--global--background--color--primary--default);

    .consoles-card {
        block-size: 100%;
        border-radius: 0;
    }

    .consoles-card .pf-v6-c-card__header {
        /* NOTE: The 8 pixels padding is hard coded into consoles.jsx as
           well. It needs to be changed there as well if it is changed here.
         */
        padding-block-start: 8px !important;
        padding-block-end: 8px !important;
        padding-inline-start: 1rem !important;
        padding-inline-end: 1rem !important;
    }

    .consoles-card .pf-v6-c-card__body {
        padding-inline-start: 0;
        padding-inline-end: 0;
        padding-block-end: 0;
        overflow: auto;
    }
}
