/*
 * Phone and tablet adjustments. The Metronic theme already provides the off-canvas side menu;
 * these rules fix what the app's own markup breaks.
 */

@media (max-width: 1024px) {
    /*
     * Two-row header: the brand on top; the menu button bottom-left and the signed-in user and Logout bottom-right.
     * The theme fixes the header at 65px and pads the page by the same amount, so both change together.
     */
    #m_header.m-header {
        height: 84px !important;
    }

    body.m-header--fixed-mobile .m-body {
        padding-top: 84px !important;
    }

    /* The theme paints the brand area dark grey below 1025px; keep the header's own color at every width. */
    .m-header .m-brand {
        height: 84px !important;
        padding: 0 15px;
        background-color: transparent;
    }

        .m-header .m-brand .m-brand__toggler span,
        .m-header .m-brand .m-brand__toggler span::before,
        .m-header .m-brand .m-brand__toggler span::after {
            background: rgb(14, 14, 14);
        }

    .m-header .m-brand__logo {
        display: block;
        height: auto !important;
        padding-top: 10px;
        overflow: hidden;
    }

        /* The heading has an inline width of 300px, which pushed the menu button off a phone screen. */
        .m-header .m-brand__logo h2.topheadercolor {
            width: auto !important;
            margin: 0;
            font-size: 1.25rem;
            line-height: 1.2;
            white-space: nowrap;
        }

        .m-header .m-brand__logo br {
            display: none;
        }

        .m-header .m-brand__logo span.topheadercolor {
            display: block;
            overflow: hidden;
            font-size: .7rem;
            line-height: 1.3;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

    .m-header .mobile-toolbar {
        position: absolute !important;
        left: 15px;
        bottom: 8px;
        z-index: 3;
        display: block;
        float: none !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
    }

        .m-header .mobile-toolbar > .m-stack {
            display: block !important;
            height: auto !important;
        }

        .m-header .mobile-toolbar .m-brand__tools {
            height: 26px;
            text-align: left;
        }

            .m-header .mobile-toolbar .m-brand__tools .m-brand__icon {
                margin-left: 0 !important;
            }

    .m-header .app-header-user {
        position: absolute;
        right: 15px;
        bottom: 8px;
        z-index: 3;
        display: flex;
        align-items: center;
        max-width: calc(100% - 80px);
        height: 26px !important;
        padding-right: 0;
        font-size: 13px;
    }

        .m-header .app-header-user__name {
            min-width: 0;
        }

            .m-header .app-header-user__name > span {
                overflow: hidden;
                text-overflow: ellipsis;
            }

        .m-header .app-header-user__logout {
            flex: 0 0 auto;
            margin-left: 14px;
        }
}

@media (max-width: 767px) {
    /* dialog-window links open Kendo windows at 45% of the screen; use the full width on phones. */
    .k-window {
        left: 8px !important;
        width: calc(100vw - 16px) !important;
        max-width: none !important;
    }

        .k-window .k-window-content {
            max-height: calc(100vh - 120px);
            overflow: auto;
        }

    .k-edit-form-container,
    div.k-edit-form-container {
        width: 100% !important;
    }

    /* Wide grids scroll sideways inside their card instead of being cut off. */
    .k-grid {
        max-width: 100%;
        overflow-x: auto;
    }

    /* Keep tap targets usable and stop iOS from zooming into fields with text under 16px. */
    input,
    select,
    textarea,
    .k-input-inner {
        font-size: 16px;
    }

    .k-pager .k-pager-numbers-wrap,
    .k-pager-info {
        flex-wrap: wrap;
    }
}