﻿/* Compact on small screens */
@media (max-width: 800px) {
    body {
        zoom: 0.9;
        -moz-transform: scale(0.9);
    }
    table {
        min-width: 200px;
    }

        table thead th,
        table td {
            padding: 0.45rem;
            font-size: 0.92rem;
        }

    .fx-page-title {
        padding-left: 40px; /*allowance for menu button */
    }

    .fx-splitpanel-info {
        display: flex;
        flex-direction: row;
        flex: 0 0 30px;
        width: 30px;
        max-width: 30px;
        padding-right: 0;
        border-right: var(--nx-border-width) solid var(--nx-border-color);
        background: var(--nx-tertiary-bg);
        box-sizing: border-box;
        overflow: hidden;
    }

    .fx-splitpanel-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 30px;
        width: 30px;
        height: 100%;
        border: none;
        background: transparent;
        color: var(--nx-primary-fg);
        cursor: pointer;
        padding: 0;
    }

    .fx-splitpanel-info-content {
        display: none;
        flex: 1 1 auto;
        min-width: 0;
        overflow-y: auto;
        padding: var(--nx-space);
    }

    .fx-splitpanel-info.fx-splitpanel-info-open {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: min(80vw, 360px);
        max-width: none;
        z-index: 2;
        box-shadow: var(--nx-box-shadow);
    }

        .fx-splitpanel-info.fx-splitpanel-info-open .fx-splitpanel-info-content {
            display: inline-table;
        }

    .fx-splitpanel-overlay {
        display: block;
        position: absolute;
        inset: 0;
        background: var(--nx-dim-bg);
        z-index: 1;
    }

    .fx-splitpanel-main {
        flex: 1 1 auto;
    }

    /* FxPage info rail — mobile drawer behavior (50px collapsed rail, expand to drawer on toggle) */
    .fx-page-info {
        display: flex;
        flex-direction: row;
        flex: 0 0 30px;
        width: 0px;
        max-width: 30px;
        padding-right: 0;
        border-right: var(--nx-border-width) solid var(--nx-border-color);
        background: var(--nx-tertiary-bg);
        box-sizing: border-box;
        overflow: hidden;
    }




    .fx-page-info-content {
        display: none;
        flex: 1 1 auto;
        min-width: 0;
        overflow-y: auto;
        padding: var(--nx-space);
    }

    .fx-page-info.fx-page-info-open {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: min(80vw, 320px);
        background-color: var(--nx-primary-bg);
        max-width: none;
        z-index: 2;
        box-shadow: var(--nx-box-shadow);
    }

        .fx-page-info.fx-page-info-open .fx-page-info-content {
            display: inline-table;
        }

    .fx-page-info-overlay {
        display: block;
        position: absolute;
        inset: 0;
        background: var(--nx-dim-bg);
        z-index: 1;
    }

    .fx-page-body {
        position: relative;
    }

    .fx-page-info-scroll {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 40px;
        max-width: 40px;
        flex: 0 0 40px;
        padding-right: 0;
        border-right: none;
        background: transparent;
        box-sizing: border-box;
        overflow: visible;
        z-index: 2;
        pointer-events: none;
    }

    .fx-page-info {
        display: none;
        flex-direction: row;
        flex: 0 0 36px;
        width: 36px;
        max-width: 36px;
        height: 100%;
        overflow: hidden;
        background: var(--nx-tertiary-bg);
        box-sizing: border-box;
        pointer-events: auto;
    }

    .fx-page-info-toggle { /*Button*/
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 36px;
        width: 36px;
        height: 100%;
        border: none;
        color: var(--nx-highlight-fg);
        box-shadow: none;
        background-color: var(--nx-secondary-bg);
        border-radius: var(--nx-border-radius);
        cursor: pointer;
        padding: 0;
    }

    .fx-page-info-content {
        display: none;
        flex: 1 1 auto;
        min-width: 0;
        overflow-y: auto;
        padding: var(--nx-space);
    }

    .fx-page-info.fx-page-info-open {
        display: flex;
        position: absolute;
        top: 0;
        height: 100%;
        width: min(80vw, 325px);
        max-width: none;
        z-index: 2;
        box-shadow: var(--nx-box-shadow);
    }

        .fx-page-info.fx-page-info-open .fx-page-info-content {
            display: inline-table;
        }

    .fx-page-info-overlay {
        display: block;
        position: absolute;
        inset: 0;
        background: var(--nx-dim-bg);
        z-index: 1;
    }

    .fx-page-body > .fx-page-scroll {
        flex: 1 1 auto;
        min-width: 0;
        padding-left: 0px;
    }

    .fx-page-body.fx-page-body-hasinfo > .fx-page-scroll {
    }
}

@media (min-width: 0px) and (max-width: 450px) {
    body {
        zoom: 0.8;
        -moz-transform: scale(0.8);
    }
}
