﻿/* Compact on small screens */
@media (max-width: 800px) {
    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, 320px);
        max-width: none;
        z-index: 1600;
        box-shadow: var(--nx-box-shadow);
    }

        .fx-splitpanel-info.fx-splitpanel-info-open .fx-splitpanel-info-content {
            display: flex;
        }

    .fx-splitpanel-overlay {
        display: block;
        position: absolute;
        inset: 0;
        background: var(--nx-dim-bg);
        z-index: 1500;
    }

    .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: 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-page-info-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-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);
        max-width: none;
        z-index: 1600;
        box-shadow: var(--nx-box-shadow);
    }

        .fx-page-info.fx-page-info-open .fx-page-info-content {
            display: flex;
        }

    .fx-page-info-overlay {
        display: block;
        position: absolute;
        inset: 0;
        background: var(--nx-dim-bg);
        z-index: 1500;
    }

    .fx-page-body .fx-page-content {
        flex: 1 1 auto;
    }
}
