/* ==========================================================================
   Trihedron ERP — phones, and the installed app
   --------------------------------------------------------------------------
   Loaded LAST by all three layouts, after every other stylesheet, so that
   what it says about a narrow screen wins.

   WHY THE APP COULD BE ZOOMED OUT. On a phone, anything wider than the screen
   makes the browser lay the whole page out at that width and then shrink it
   to fit — which is what made the installed app look like a web page seen
   through a keyhole. Three rows were doing it: the contractor portal's tab
   row (686px wide on a 360px phone), and the user block — full email address
   plus "Sign out" — in the top bar of the cube and of every module. Each is
   fixed below at its source; the overflow-x: clip on the page is only the
   safety net for whatever the next page adds.

   WHAT MAKES IT FEEL LIKE AN APP rather than a site:
     - navigation in a tab bar along the bottom, where a thumb is;
     - no double-tap zoom, no grey flash on tap, no rubber-band bounce;
     - form fields at 16px, which is what stops an iPhone zooming the whole
       page in every time somebody taps a field;
     - content kept clear of the notch and the home bar.
   Pinch-zoom is switched off in the installed app only — see pwa.js. In a
   browser tab it stays, for anybody who needs it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Everywhere
   -------------------------------------------------------------------------- */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    /* The safety net. clip, not hidden: hidden makes the body a scroll
       container and every position: sticky top bar stops sticking. */
    overflow-x: clip;
}

a,
button,
input,
select,
textarea,
label,
summary {
    /* No 300ms wait for a possible double tap, and no double-tap zoom. */
    touch-action: manipulation;
}

a,
button {
    -webkit-tap-highlight-color: transparent;
}

body {
    /* An iPhone on its side: keep content out from behind the notch. Zero
       in portrait and on every phone without one. */
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* --------------------------------------------------------------------------
   Installed app only
   -------------------------------------------------------------------------- */

@media (display-mode: standalone) {
    html,
    body {
        /* No bounce at the ends of the page and no pull-to-refresh glow: a
           native screen stops where it stops. */
        overscroll-behavior-y: none;
    }

    body {
        /* Clear of the notch and status bar. Zero on phones without one, and
           zero everywhere except when the layout's viewport-fit=cover lets
           the page run under the status bar in the first place. */
        padding-top: env(safe-area-inset-top, 0px);
    }

    /* Text in bars and on buttons is not something anybody means to select;
       a long press on a tab should not start highlighting its label. */
    .portal-topbar,
    .portal-nav,
    .app-topbar,
    .app-sidebar,
    .home-topbar,
    .btn {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
    :root {
        /* Height of the bottom tab bar, without the home-bar inset. */
        --m-tabbar-h: 60px;
    }

    /* 16px is the size below which Safari zooms the page in on focus. */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px;
    }

    /* The user block: the avatar says who, the icon says sign out. The full
       email address was 200px on its own. */
    .user-meta,
    .logout-form .btn-label,
    .topbar-link-label {
        display: none;
    }

    .logout-form .btn {
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }

    /* The bell's panel, pinned under the top bar across the screen rather
       than hanging off the bell — which on a phone put half of it off the
       left edge. */
    .notif-panel {
        position: fixed;
        top: calc(56px + env(safe-area-inset-top, 0px));
        left: 0.5rem;
        right: 0.5rem;
        width: auto;
        max-height: calc(100vh - 56px - var(--m-tabbar-h) - 2rem);
    }

    /* ---------------- The bottom tab bar, shared look ------------------- */

    .portal-nav,
    .app-sidebar {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0 0 env(safe-area-inset-bottom, 0px);
        background: var(--t-bg-1);
        border: 0;
        border-top: 1px solid var(--t-line-strong);
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18);

        /* More tabs than fit (the HR portal has seven) scroll sideways in
           the bar, rather than squeezing every label to nothing. */
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .portal-nav::-webkit-scrollbar,
    .app-sidebar::-webkit-scrollbar,
    .nav-scroll::-webkit-scrollbar {
        display: none;
    }

    .portal-nav-item,
    .app-sidebar .home-return,
    .app-sidebar .nav-item {
        position: relative;
        flex: 1 0 64px;
        min-width: 64px;
        min-height: var(--m-tabbar-h);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        margin: 0;
        padding: 0.4rem 0.25rem;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--t-text-faint);
        font-size: 0.66rem;
        font-weight: 500;
        line-height: 1.1;
        text-align: center;
        text-decoration: none;
    }

    /* Up to two lines, so "My timesheets" reads as "My / timesheets"
       rather than "My times…". */
    .portal-nav-item span,
    .app-sidebar .nav-label {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        max-width: 100%;
        overflow: hidden;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .portal-nav-item .nav-icon,
    .app-sidebar .nav-icon {
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
        margin: 0;
    }

    .portal-nav-item:hover,
    .app-sidebar .nav-item:hover,
    .app-sidebar .home-return:hover {
        background: transparent;
        color: var(--t-text);
    }

    /* The current tab: the label in the brand colour and a bar across the
       top of the tab, the way Android and iOS both mark it. */
    .portal-nav-item.is-active,
    .app-sidebar .nav-item.is-active,
    .app-sidebar .nav-item.active {
        background: transparent;
        border: 0;
        color: var(--t-cyan);
    }

    .portal-nav-item.is-active::before,
    .app-sidebar .nav-item.is-active::before,
    .app-sidebar .nav-item.active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 22%;
        right: 22%;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--t-cyan);
    }

    .portal-nav-badge {
        position: absolute;
        top: 0.35rem;
        left: calc(50% + 6px);
    }

    /* Room at the foot of every page so the bar never covers the last field
       or the Save button. */
    body:has(.portal-nav) .portal-shell,
    body:has(.app-sidebar) .app-content {
        padding-bottom: calc(var(--m-tabbar-h) + env(safe-area-inset-bottom, 0px) + 1.5rem);
    }

    /* The install and notification offers sit above the bar, not under it. */
    body:has(.portal-nav) .pwa-banner,
    body:has(.app-sidebar) .pwa-banner {
        bottom: calc(var(--m-tabbar-h) + env(safe-area-inset-bottom, 0px) + 0.6rem);
    }

    /* ---------------- The contractor portal ------------------------------ */

    .portal-shell {
        padding: 0.75rem 0.9rem 1.5rem;
    }

    .portal-topbar {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 0.5rem;
        padding-bottom: 0.75rem;
    }

    .portal-brand {
        min-width: 0;
    }

    .portal-brand .logo-full {
        height: 22px;
    }

    .portal-brand-tag {
        font-size: 0.58rem;
        white-space: nowrap;
    }

    .portal-user {
        gap: 0.35rem;
        flex: 0 0 auto;
    }

    /* "All modules" is for internal accounts looking at the portal. In a
       bar of equal tabs it is one more tab, not a button off to the right. */
    .portal-nav-item.is-internal {
        margin-left: 0;
        border: 0;
    }

    .portal-greeting {
        padding: 1rem 0 0.9rem;
    }

    .portal-greeting h1 {
        font-size: 1.4rem;
    }

    .portal-foot {
        display: none;
    }

    /* ---------------- The module screens (sidebar layout) ---------------- */

    .app-shell,
    .app-shell.is-collapsed {
        display: block;
    }

    /* The sidebar's brand block and section heading have no place in a tab
       bar: the top bar already says where you are. */
    .app-sidebar .brand,
    .app-sidebar .section-title,
    .app-sidebar .sidebar-toggle {
        display: none;
    }

    .app-sidebar .nav-scroll,
    .app-sidebar .nav-group {
        display: contents;
    }

    .app-topbar {
        height: 52px;
        flex-basis: 52px;
        padding: 0 0.75rem;
        gap: 0.35rem;
    }

    .topbar-title {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar-user {
        gap: 0.35rem;
    }

    .app-content {
        padding: 1rem 0.9rem 1.5rem;
    }

    /* ---------------- The cube ------------------------------------------- */

    /* The buttons along the top, the greeting underneath on its own line:
       side by side, "Welcome back, Euwin" was squeezed into three. */
    .home-topbar {
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }

    .home-user {
        order: 1;
        margin-left: auto;
    }

    .home-greeting {
        order: 2;
        flex: 1 0 100%;
        min-width: 0;
    }

    .home-greeting h1 {
        font-size: 1.1rem;
    }

    .home-greeting p {
        font-size: 0.8rem;
    }

    .home-user {
        gap: 0.35rem;
        flex: 0 0 auto;
    }
}