/*
|--------------------------------------------------------------------------
| Display Root Layout
|--------------------------------------------------------------------------
| Structure:
| header
| gap
| main
| gap
| notice
| gap
| footer
|--------------------------------------------------------------------------
*/

:root {
    --display-gap: 8px;
    --display-page-bg: #eef4ff;
    --display-surface-bg: #ffffff;
    --display-radius: 12px;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    background: var(--display-page-bg);
}

.display-app,
.display-app-vue {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/*
|--------------------------------------------------------------------------
| App Shell
|--------------------------------------------------------------------------
*/

.display-app-vue {
    display: grid;

    /*
        1. header
        2. gap between header and main
        3. main
        4. gap between main and notice
        5. notice
        6. gap between notice and footer
        7. footer
    */
    grid-template-rows:
        auto
        var(--display-gap)
        minmax(0, 1fr)
        var(--display-gap)
        auto
        var(--display-gap)
        auto;

    background: var(--display-page-bg);
}

/*
|--------------------------------------------------------------------------
| Root Sections
|--------------------------------------------------------------------------
*/

.display-app-header {
    grid-row: 1;
    overflow: hidden;
    background: var(--display-surface-bg);
}

.display-app-main {
    grid-row: 3;
    min-height: 0;
    overflow: hidden;

    padding-left: var(--display-gap);
    padding-right: var(--display-gap);
}

.display-app-notice {
    grid-row: 5;
    overflow: hidden;
}

.display-app-footer {
    grid-row: 7;
    overflow: hidden;
    background: var(--display-surface-bg);
}

/*
|--------------------------------------------------------------------------
| Main Page Layout
|--------------------------------------------------------------------------
| Structure:
| left sidebar
| gap
| content
| gap
| right sidebar
|--------------------------------------------------------------------------
*/

.display-page-layout {
    height: 100%;
    min-height: 0;
    overflow: hidden;

    display: grid;
    grid-template-columns: 25% minmax(0, 50%) 25%;
    gap: var(--display-gap);
}

/*
|--------------------------------------------------------------------------
| Two Column Layout
|--------------------------------------------------------------------------
| Used by detail pages:
| left sidebar
| gap
| content
|--------------------------------------------------------------------------
*/

.display-page-layout-two-column {
    grid-template-columns: 25% minmax(0, 75%);
    gap: var(--display-gap);
}

/*
|--------------------------------------------------------------------------
| Page Regions
|--------------------------------------------------------------------------
*/

.display-page-aside,
.display-page-content {
    min-height: 0;
    overflow: hidden;
}

.display-page-aside-primary,
.display-page-aside-charter,
.display-page-content {
    height: 100%;
    min-height: 0;
}

/*
|--------------------------------------------------------------------------
| Visual Surface Consistency
|--------------------------------------------------------------------------
*/

.display-page-content,
.display-page-aside-primary,
.display-page-aside-charter {
    border-radius: var(--display-radius);
    overflow: hidden;
}

/*
|--------------------------------------------------------------------------
| Safety: remove old Bootstrap spacing conflicts
|--------------------------------------------------------------------------
*/

.display-page-layout .container-fluid,
.display-page-layout .row {
    margin-left: 0;
    margin-right: 0;
}

/*
|--------------------------------------------------------------------------
| Small Screen / Kiosk Safety
|--------------------------------------------------------------------------
*/

@media (max-height: 760px) {
    :root {
        --display-gap: 6px;
    }
}