/**
 * Copyright (c) 2026 Estait Group LLC
 * All rights reserved.
 *
 * WEB-286 (epic WEB-285): shared compact layout for the ABBI app and admin
 * surfaces -- the [*_manager] shortcodes, the linkers, /stats, /schedule.
 * Loaded on EVERY blog (functions.php), unlike abbi-home.css which is
 * main-site only, so a tenant's /storefront gets the same phone layout as
 * /clients on the network main site.
 *
 * How "mobile" is decided: by viewport and input, in CSS. There is no
 * server-side user-agent branching (wp_is_mobile) because CloudFront caches
 * pages without the UA in the cache key -- a phone-rendered page would be
 * served to desktop and the reverse.
 *
 * The two compact breakpoints. Every rule in this file sits inside one of
 * them, so nothing here can change the desktop layout. js/theme.js mirrors
 * the same two queries as html.abbi-compact for behaviour-only switches;
 * keep the strings identical in both places.
 *
 *   phone            (max-width: 639px)
 *   phone-landscape  (max-height: 500px) and (orientation: landscape) and (pointer: coarse)
 *
 * phone-landscape exists because a phone held sideways is ~844px wide --
 * past the 839px desktop header breakpoint -- while only ~390px tall.
 *
 * Specificity. The managers print their own <style> in the page body
 * (".tm-table td { padding: 16px }"), and abbi-home.css re-skins them on the
 * main site at "body.abbi-site .abbi-admin .tm-table td". The prefix
 * :is(body.abbi-site .abbi-admin, body) takes the specificity of its most
 * specific argument, so it ties the abbi-home rules (and wins on load order:
 * this sheet depends on abbi-home where both load) and beats the inline
 * manager styles, while still matching on tenant blogs through plain `body`.
 */

/* ---- phone ------------------------------------------------------------ */

@media (max-width: 639px) {
    /* Page gutter: 32px a side leaves ~311px of a 375px phone. */
    body.abbi-site .abbi-container {
        padding: 0 16px;
    }

    :is(body.abbi-site .abbi-admin, body) .tm-manager {
        padding-left: 0;
        padding-right: 0;
    }

    :is(body.abbi-site .abbi-admin, body) .tm-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    :is(body.abbi-site .abbi-admin, body) .tm-header-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    /* Tables become one card per row. Cells carrying data-label print it as
       a caption; cells without one render as before (WEB-288 adds labels). */
    :is(body.abbi-site .abbi-admin, body) .tm-table-container {
        overflow-x: visible;
    }

    :is(body.abbi-site .abbi-admin, body) .tm-table thead {
        display: none;
    }

    :is(body.abbi-site .abbi-admin, body) .tm-table,
    :is(body.abbi-site .abbi-admin, body) .tm-table tbody {
        display: block;
        width: 100%;
    }

    :is(body.abbi-site .abbi-admin, body) .tm-table tbody tr {
        display: block;
        height: auto;
        padding: 12px 16px;
    }

    :is(body.abbi-site .abbi-admin, body) .tm-table td {
        display: block;
        padding: 6px 0;
        overflow-wrap: anywhere;
    }

    :is(body.abbi-site .abbi-admin, body) .tm-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 12px;
        font-weight: 600;
        opacity: 0.7;
    }

    :is(body.abbi-site .abbi-admin, body) .tm-table .tm-col-optional {
        display: none;
    }
}

/* ---- phone and phone-landscape ---------------------------------------- */

@media (max-width: 639px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
    /* Touch targets: 44px minimum for controls on app/admin surfaces only --
       tenant page content is the agents' and is left alone. */
    :is(.tm-manager, .abbi-admin, .abbi-app) :is(button, .button, .mdc-button, input[type="submit"], select) {
        min-height: 44px;
    }

    :is(.tm-manager, .abbi-admin, .abbi-app) input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }

    /* A bar of primary actions pinned to the bottom of the viewport. Static
       (an ordinary block) above these breakpoints. */
    .abbi-sticky-actions {
        position: sticky;
        bottom: 0;
        z-index: 5;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: var(--abbi-surface, #fff);
        border-top: 1px solid var(--abbi-border, #e0e0e0);
    }

    .abbi-sticky-actions > * {
        flex: 1 1 auto;
    }
}