/*
 * Mobile presentation fixes for narrow viewports only.
 * Loaded last (see assets/AppAsset.php) so it wins the cascade over
 * style.css / new-style.css at max-width: 767px. Nothing here applies
 * above that width - desktop is untouched.
 *
 * Covers: (1) sidebar menu overlay instead of push, (2) logo sizing,
 * (3) menu label wrapping, (4) header/table overflow.
 */
@media (max-width: 767px) {

    /* ---------------------------------------------------------------
     * 1. Sidebar menu: real off-canvas overlay, not a content push.
     * The desktop rules (style.css .menu / .show-menu .page, and
     * new-style.css's later fixed-320px .show-menu .page) fight each
     * other and never overlay on a phone. These rules replace both,
     * reusing the existing .site-container.show-menu toggle from
     * web/js/main.js untouched.
     * --------------------------------------------------------------- */
    .as-sidebar-menu {
        width: 85%;
        max-width: 320px;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        z-index: 1050;
    }
    .show-menu .as-sidebar-menu {
        transform: translateX(0);
    }
    /* Neutralize both competing desktop push rules so content never
       shifts - the menu overlays instead. */
    .show-menu .page {
        transform: none !important;
    }
    .main-overlay {
        z-index: 1040;
    }

    /* ---------------------------------------------------------------
     * 2. Logo: a small mark, not a focal point.
     * The inline style="width:242px" and new-style.css's
     * "!important 180px" both need beating - later !important wins.
     * --------------------------------------------------------------- */
    .as-sidebar-menu .logo {
        padding: 8px 0;
        margin-top: 0;
    }
    .as-sidebar-menu .logo img {
        width: 56px !important;
        height: 56px !important;
        box-shadow: none;
        animation: none;
    }
    .as-sidebar-menu .name {
        font-size: 14px;
        padding: 6px 10px;
        margin: 6px 0;
    }

    /* ---------------------------------------------------------------
     * 3. Menu labels: stop wrapping/clipping. Most of this is simply
     * a side effect of the menu now being wide enough (up to 320px
     * instead of the desktop-driven ~150px); the rest is padding.
     * --------------------------------------------------------------- */
    .as-sidebar-menu ul.sidebar-menu-wrap li a {
        font-size: 14px;
        line-height: 1.3;
        padding: 10px 12px 10px 42px;
        white-space: normal;
    }
    .as-sidebar-menu ul.sidebar-menu-wrap li a span {
        left: 12px;
    }

    /* ---------------------------------------------------------------
     * 4a. Header bar: stop clipping its own content. .header has a
     * fixed height + overflow:hidden built for a single-row desktop
     * layout; below Bootstrap's md breakpoint the two .col-md-* halves
     * inside .menu-container stack, which the fixed 100px height then
     * silently cuts off (notifications/account menu, etc).
     * --------------------------------------------------------------- */
    .header {
        height: auto;
        min-height: 60px;
        overflow: visible;
        padding-bottom: 8px;
    }
    .header, .menu-container, .n-menu-search, .header-navi {
        max-width: 100%;
        box-sizing: border-box;
    }
    .header > div.title {
        line-height: 1.4;
        font-size: 1.1em;
        white-space: normal;
    }

    /* ---------------------------------------------------------------
     * 4b. Data tables: horizontally scroll instead of spilling off
     * the viewport. Bootstrap's .table-responsive already handles the
     * views that use it; this is a CSS-only fallback for the many
     * plain/GridView tables that have no such wrapper, without having
     * to edit ~40 view files. Tables already inside .table-responsive
     * are reset to their normal display so only the outer wrapper
     * scrolls (avoids a redundant nested scroll box).
     * --------------------------------------------------------------- */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-responsive table {
        display: table;
        overflow-x: visible;
    }
}