/* ============================================================
   Phone-portrait sales-demo subset.

   Target: ~390 px (iPhone portrait) up to ~640 px (small landscape
   phones). The grids (Staff / Units / KPIs etc.) are NOT redesigned
   here - they get a horizontal-scroll fallback. The focus is on the
   surfaces a demo lead will actually walk through on a phone:

     - Login
     - Inbox (the daily-driver landing surface)
     - Sign-off modal (inline action from Inbox)
     - Approvals + vote modal (HRD / CNO / FD flow)
     - Account menu (top-right) + What is new modal

   The rules below are deliberately limited to what improves those
   flows; nothing tries to make every page perfect at 390 px.
   ============================================================ */
@media (max-width: 640px) {
    /* Page chrome ---------------------------------------------- */
    .top-bar {
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .top-bar .trust-picker,
    .top-bar select,
    .top-bar .secondary-button {
        max-width: 100%;
    }

    /* Tabs + sub-tabs scroll horizontally instead of wrapping.
       Wrapping caused two rows of tabs at phone widths, which
       read as the app not fitting; horizontal scroll with snap
       is the standard mobile pattern. */
    .tab-bar { overflow: visible; }
    .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 2px;
    }
    .tabs > .tab {
        flex: 0 0 auto;
        scroll-snap-align: start;
        /* Bigger hit target. Ward-Manager memory: 24 px floor;
           touch convention bumps that to ~40 px on phone. */
        padding: 0.55rem 1rem;
        min-height: 40px;
    }
    /* Right-cluster auto-margin (pushes Inbox / Audit / Approvals
       to the right on desktop) is meaningless inside a horizontal
       scroll - kill it so the right-cluster tabs sit adjacent to
       Triangulation as the user scrolls. */
    .tabs > .tab.tab-myinbox { margin-left: 0; }

    .subtab-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    .subtab {
        flex: 0 0 auto;
        scroll-snap-align: start;
        min-height: 36px;
    }

    /* Toolbar parm row stacks vertically. The Staff-style filter-
       row is flex with auto-wrapping inputs at desktop; on phone
       the user wants each control to fill the line. */
    .toolbar .filter-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
    }
    .toolbar .filter-row > .filter-group {
        width: 100%;
    }
    .toolbar .filter-row > .filter-group > .filter-input {
        width: 100%;
        min-height: 40px;
    }
    /* The ask + nav cluster stays inline but wraps so the Upload
       buttons do not push off-screen. */
    .toolbar .parm-row-ask-cluster {
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
    }

    /* Flying tiles wrap to two-up at phone width instead of
       horizontal overflow. The strip is a sample-of-status, not
       a primary nav - wrapping is fine here. */
    .health-card,
    #health-card,
    .budgets-headline-strip,
    .leave-headline-strip {
        flex-wrap: wrap;
    }
    .health-card .health-tile,
    .budgets-headline-strip .budgets-stat,
    .leave-headline-strip .leave-stat {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 0;
    }

    /* Grids stay desktop-first. A horizontal-scroll wrapper means
       the table does not squeeze to unreadable - the user pages
       sideways like they would in a spreadsheet. The wrappers
       already exist; the rule is just constrain to viewport. */
    .balance-grid-container,
    .balance-grid-scroll {
        max-width: 100vw;
    }

    /* Modals ------------------------------------------------- */
    /* The shared #detail-modal dialog takes 100 vw / 100 vh on
       phone - native modal sheet behaviour. Same for the inbox
       inline modal, the AI dialog and the staff modal. */
    dialog#detail-modal,
    dialog#inbox-modal,
    dialog#ai-dialog {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
        padding: 0;
    }
    dialog#detail-modal::backdrop,
    dialog#inbox-modal::backdrop,
    dialog#ai-dialog::backdrop {
        background: rgba(0, 0, 0, 0.5);
    }
    .staff-modal,
    .upload-diff-modal {
        max-width: 100vw;
        min-width: 0;
        border-radius: 0;
        padding: 0.75rem 0.75rem 1rem;
    }
    .staff-modal-scroll {
        max-height: calc(100vh - 3rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .staff-modal-close {
        /* Bigger tap target than the desktop x */
        width: 44px;
        height: 44px;
        font-size: 24px;
    }

    /* Inbox + Audit row list -------------------------------- */
    /* Collapse the inbox / audit grid into a card-per-row list
       on phone so the primary action button sits at the bottom
       of each card at full width instead of being cramped to a
       right-edge column. */
    .work-section table,
    .work-section .balance-grid {
        display: block;
    }
    .work-section .balance-grid thead { display: none; }
    .work-section .balance-grid tbody { display: block; }
    .work-section .balance-grid tr {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        padding: 0.65rem 0.5rem;
        border-bottom: 1px solid var(--rule);
    }
    .work-section .balance-grid td {
        display: block;
        padding: 0.15rem 0;
        border: none;
    }
    /* Per-row action button gets full content width on phone so a
       thumb can hit it without aiming. */
    .work-section .balance-grid td .secondary-button,
    .work-section .balance-grid td .primary-button {
        display: block;
        width: 100%;
        min-height: 44px;
        text-align: center;
    }

    /* Approvals + vote modal -------------------------------- */
    /* Vote buttons (Approve / Reject) get full-width thumb targets
       on phone so the HRD / CNO / FD can act on the train without
       aiming. */
    .approve-row .secondary-button,
    .approve-row .primary-button,
    .vote-actions .secondary-button,
    .vote-actions .primary-button {
        flex: 1 1 0;
        min-height: 44px;
    }

    /* Login ---------------------------------------------------- */
    .login-wrap,
    .login-card {
        max-width: 100vw;
        padding: 1rem;
    }
    .login-card input[type="email"],
    .login-card input[type="password"] {
        font-size: 16px; /* iOS will not auto-zoom on focus when >= 16 px */
        min-height: 44px;
        width: 100%;
    }
    .login-card .primary-button {
        width: 100%;
        min-height: 44px;
    }

    /* Account menu --------------------------------------------- */
    /* The user-menu dropdown anchors to the top-right name link.
       At desktop it is a compact menu; on phone it should fill
       the width as a bottom sheet so menu items are easy to tap. */
    .user-menu-popover {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        max-height: 70vh;
        border-radius: 8px 8px 0 0;
        overflow-y: auto;
    }
    .user-menu-popover a,
    .user-menu-popover button,
    .user-menu-popover .user-menu-item {
        min-height: 44px;
        font-size: 14px;
    }

    /* Reduce overall padding so the small viewport does not waste
       a quarter of its width on chrome. */
    main, .balances-page, .budgets-page, .work-page, .leave-page {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Tighter still - the 390 px iPhone portrait state. Mostly drops
   horizontal padding to the bone and stacks the toolbar header. */
@media (max-width: 420px) {
    main, .balances-page, .budgets-page, .work-page, .leave-page {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    .toolbar { padding: 0.4rem 0.5rem; }
    .work-toolbar-row {
        flex-direction: column;
        align-items: stretch;
    }
}