/* Phone layout fixes shared by every page that includes globalnavigation.php.
   Pages each carry their own header CSS (48px title absolutely positioned over a
   100px logo), so these rules are deliberately specific / !important to win on phones. */

/* Wrap wide tables in <div class="table-scroll"> so they scroll sideways inside the page */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 600px) {
    /* Page header: logo, title and the signed-in name in one tidy row */
    body > header {
        display: flex !important;
        align-items: center !important;
        gap: 12px;
        padding: 10px 14px !important;
        min-height: 0 !important;
        height: auto !important;
    }
    body > header .logo { flex: 0 0 auto; margin: 0 !important; }
    body > header .logo img,
    body > header > a > img,
    body > header > img { height: 46px !important; width: auto !important; }
    body > header .header-text,
    body > header .header-title {
        position: static !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        flex: 1 1 auto;
        min-width: 0;
        font-size: 21px !important;
        line-height: 1.15 !important;
        overflow-wrap: break-word;
    }
    body > header .header-text h1 { font-size: 21px !important; line-height: 1.15 !important; margin: 0 !important; }
    body > header .header-text p { font-size: 12px !important; line-height: 1.3 !important; margin: 2px 0 0 !important; }
    body > header .user-info {
        position: static !important;
        transform: none !important;
        flex: 0 1 auto;
        max-width: 34%;
        margin-left: auto;
        font-size: 11px !important;
        line-height: 1.3 !important;
        text-align: right;
        overflow-wrap: anywhere;
    }
    body > header .user-info * { font-size: 11px !important; }

    /* Bootstrap-style pagination wraps instead of running off the screen */
    .pagination { flex-wrap: wrap; row-gap: 4px; }
}