/* ============================================================
   Mobile/tablet responsive overrides.

   Breakpoint mirrors js-lms/constants.js MOBILE_BREAKPOINT (768).
   Everything in this file is additive and media-query-gated — the
   desktop experience above 768px must never change as a result of
   this file. See MOBILE_RESPONSIVE_AUDIT.md for the full review
   this file implements.
   ============================================================ */

@media (max-width: 768px) {

    /* Sidebar becomes a hamburger-toggled overlay drawer instead of
       a resizable flex panel — see js-lms/lms_layout.js _initMobileToggle(). */
    .lms-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 8px;
        left: 8px;
        z-index: 1000;
        width: 40px;
        height: 40px;
        padding: 0;
        font-size: 17px;
        color: var(--lms-text);
        background: var(--lms-bg-panel, var(--lms-bg));
        border: 1px solid var(--lms-border);
        border-radius: 8px;
        cursor: pointer;
    }

    /* Shared with the Investor/Broker/Funder portal sidebars (.inv-sidebar/
       .brk-sidebar/.fnd-sidebar) — see js-lms/utils.js initMobileSidebarToggle(),
       which wires up the same drawer behaviour for those hand-rolled layouts. */
    .lms-panel-left,
    .inv-sidebar,
    .brk-sidebar,
    .fnd-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        max-width: 280px;
        transform: translateX(-100%);
        transition: transform 0.2s;
        z-index: 999;
    }

    .lms-panel-left.lms-drawer-open,
    .inv-sidebar.lms-drawer-open,
    .brk-sidebar.lms-drawer-open,
    .fnd-sidebar.lms-drawer-open {
        transform: translateX(0);
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3);
    }

    .lms-drawer-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 998;
    }

    /* Resizing is moot once the sidebar is an overlay drawer. */
    .lms-resize-handle {
        display: none;
    }

    /* The hamburger toggle is position:fixed at top:8px/left:8px (z-index
       1000), floating above whatever the main panel renders. Every panel
       (Dashboard, Settings, grid toolbars, channel headers, ...) lays its own
       content out flush from the top, so without this the toggle button sits
       directly on top of the page title/first toolbar row. Reserve a strip of
       space at the top of the main panel instead of patching each screen. */
    .lms-panel-main,
    .inv-main,
    .brk-main,
    .fnd-main {
        width: 100%;
        padding-top: 48px;
        box-sizing: border-box;
    }

    /* Message hover-action bar: hover doesn't exist on touch, and keeping
       the bar always visible made it overlap the message above (it is
       absolutely positioned for the hover case). Hidden on touch instead;
       a long-press opens the same context menu as desktop right-click,
       built from these same buttons (see _messageMenuItems). */
    .ch-msg-actions {
        display: none !important;
    }

    /* Rail section "+" buttons (new channel / new DM) are hover-revealed on
       desktop — always show them on touch. */
    .cd-section-add {
        opacity: 1 !important;
    }

    /* Row "⋯" options are hover-revealed on desktop — always show on touch
       (and keep the unread badge alongside). */
    .cd-row-more {
        display: flex !important;
    }
    .cd-row:hover .cd-row-badge {
        display: block;
    }

    /* Column sort-arrow indicator — hover-only on desktop, so force it visible
       on touch (sorting itself always worked; this is discoverability only). */
    .tabulator .tabulator-col .tabulator-col-sorter {
        opacity: 1 !important;
    }

    /* Grid toolbars — allow horizontal scroll instead of overflowing. */
    .lms-tabgrid-toolbar, .w2ui-toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .lms-tabgrid-toolbar > *, .w2ui-toolbar > * {
        flex: 0 0 auto;
    }
    .lms-tabgrid-toolbar input[type="text"],
    .lms-tabgrid-toolbar input[type="search"] {
        min-width: 130px;
    }

    /* Book Loan form two-column fields collapse to one column. */
    .lms-bd-col2, .lms-bd-col2last {
        display: block;
        width: 100%;
        margin-right: 0;
    }

    /* Book Loan form tab bar wraps instead of overflowing. */
    #bd-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
    }

    .bd-tab {
        flex: 1 1 auto;
        text-align: center;
        font-size: 11px;
        padding: 6px 8px !important;
    }

    /* @mention autocomplete — clamp to viewport width. */
    #ch-mention-menu {
        max-width: calc(100vw - 28px) !important;
    }

    /* Channels/DM master-detail: the shared rail by default, the conversation
       panel takes over once a channel/DM is selected — see _selectChannel()/
       _selectDm() toggling .lms-mobile-detail on #cd-root. */
    #cd-rail {
        width: 100% !important;
    }
    #cd-main {
        display: none !important;
    }
    #cd-root.lms-mobile-detail #cd-rail {
        display: none !important;
    }
    #cd-root.lms-mobile-detail #cd-main {
        display: flex !important;
    }
    .lms-mobile-back {
        display: inline-block !important;
    }

    /* Young conversations: desktop bottom-anchors the message list, which
       on a phone floats the welcome header mid-screen above a large void.
       Let short content start at the top instead; once messages fill the
       viewport the scroll behaviour is identical. */
    #ch-messages > :first-child,
    #dm-messages > :first-child {
        margin-top: 0;
    }

    /* Thread panel — second level of the same master-detail pattern: opening a
       thread on mobile replaces the message list with the thread view instead
       of squeezing #ch-main next to a 340px #ch-thread. Toggled by
       .lms-mobile-thread-open on #cd-root — see _openThread()/_closeThread()
       in js-lms/channels.js. !important wins over the inline style.width the
       desktop open/close logic sets directly on #ch-thread. */
    #cd-root.lms-mobile-detail.lms-mobile-thread-open #ch-main {
        display: none !important;
    }
    #cd-root.lms-mobile-detail.lms-mobile-thread-open #ch-thread {
        width: 100% !important;
        border-left: none;
    }

    /* Notification bell dropdown — clamp to viewport width. */
    #notif-dropdown {
        width: 92vw !important;
        max-width: 320px;
        right: -8px !important;
    }

    /* FK list-editor dropdown (Tabulator-generated) — cap height. */
    .tabulator-edit-list {
        max-height: 50vh !important;
        overflow-y: auto;
    }

}

@media (max-width: 768px) {

    /* Loan Risk Score: the form's inline flex-basis (360px) plus the panel's
       32px side padding overflows a phone viewport, pushing inputs off the
       right edge. Important because the sizes are inline styles. */
    #risk-score-panel {
        padding: 20px 14px !important;
    }
    #risk-score-form {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100%;
    }
}

/* ============================================================
   Mobile bottom navigation (main app only; portals keep the
   hamburger drawer). Built by js-lms/mobile_nav.js, which only
   activates below the breakpoint; these rules also hard-hide it
   above 768px in case a phone rotates into a wider viewport.
   ============================================================ */

#lms-bottom-nav, #lms-bn-sheet, #lms-bn-backdrop { display: none; }

@media (max-width: 768px) {

    /* The bottom bar replaces the floating hamburger in the main app; the
       drawer stays available for the portal SPAs, whose toggles live inside
       their own roots rather than the app shell. */
    body.lms-has-bottom-nav #lms-mobile-toggle { display: none; }
    /* Content clears the fixed header the same way it clears the bottom bar. */
    body.lms-has-bottom-nav .lms-panel-main {
        padding-top: calc(44px + env(safe-area-inset-top, 0px) + 6px);
    }

    /* Phones show no application bar (its menus are desktop conventions), so
       this carries the three things a phone does need: the mark, so the app
       has an identity on screen; the current screen's name; and notifications,
       which were otherwise two taps deep inside the menu with no visible
       badge. */
    /* The expanded detail behind a row's toggle. Tabulator ships it as a bare
       label/value table; this makes it read like the key/value rows used on the
       dashboard, so an opened row looks like a record rather than like a dump. */
    .tabulator-responsive-collapse {
        /* Full bleed, matching the grid it belongs to: that surface is
           deliberately edge to edge with no rounded cards, so a bordered panel
           floating inside it read as foreign. Two hairlines and a change of
           surface do the separating instead. Indented to 40px, flush with the
           end of the frozen actions column, so the panel begins exactly where
           the scrollable content does and a sticky column cannot sit over it.
           --vantage-surface rather than --vantage-fill: fill is a translucent
           white wash, all but invisible against the OLED theme's true black. */
        margin: 0 0 0 40px;
        padding: 2px 14px 2px 0;
        border-top: 1px solid var(--vantage-line-2);
        border-bottom: 1px solid var(--vantage-line-2);
        background: var(--vantage-surface);
    }
    /* The row whose panel is open, marked so it is obvious which record you
       are looking at once the panel is long enough to fill the screen. */
    .tabulator-row:has( .tabulator-responsive-collapse-toggle.open ) {
        background: var(--vantage-fill);
    }
    .tabulator-responsive-collapse table { width: 100%; border-collapse: collapse; }
    .tabulator-responsive-collapse tr { border-bottom: 1px solid var(--vantage-line-2); }
    .tabulator-responsive-collapse tr:last-child { border-bottom: 0; }
    .tabulator-responsive-collapse td {
        padding: 6px 0;
        font-size: 12.5px;
        line-height: 1.4;
        vertical-align: baseline;
    }
    /* Label left and quiet, value right and tabular, matching the dashboard. */
    .tabulator-responsive-collapse td:first-child,
    .tabulator-responsive-collapse td:first-child strong {
        width: 42%;
        color: var(--vantage-text-2);
        /* Tabulator wraps the label in <strong>, which reads as emphasis the
           label does not deserve next to the value it describes. */
        font-weight: 400;
    }
    .tabulator-responsive-collapse td:last-child {
        color: var(--vantage-text);
        text-align: right;
        font-variant-numeric: tabular-nums;
        /* A client name can be longer than the space left beside its label;
           wrapping is better than running under the panel's edge. */
        word-break: break-word;
    }
    /* A field with no value tells the reader nothing, and there are enough of
       them on a loan to bury the ones that do. */
    .tabulator-responsive-collapse tr:has(td:last-child:empty) { display: none; }

    .lms-rc-toggle-col .tabulator-responsive-collapse-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--vantage-fill-2);
        color: var(--vantage-text-2);
    }
    .lms-rc-toggle-col .tabulator-responsive-collapse-toggle.open {
        background: var(--vantage-fill-2);
        color: var(--vantage-text);
    }

    #lms-mobile-header {
        display: flex;
        align-items: center;
        gap: 10px;
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 1200;
        height: calc(44px + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) 6px 0 12px;
        background: var(--vantage-bg);
        border-bottom: 1px solid var(--vantage-line-2);
    }
    .lms-mh-mark { width: 22px; height: 17px; flex-shrink: 0; }
    .lms-mh-title {
        flex: 1;
        min-width: 0;
        font-family: var(--vantage-font-heading);
        font-size: 14px;
        font-weight: 500;
        color: var(--vantage-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .lms-mh-bell {
        position: relative;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 0;
        border-radius: var(--vantage-r-md);
        background: transparent;
        color: var(--vantage-text-2);
        cursor: pointer;
    }
    .lms-mh-bell:active { background: var(--vantage-fill-2); }
    .lms-mh-badge {
        position: absolute;
        top: 4px;
        right: 3px;
        min-width: 15px;
        height: 15px;
        padding: 0 4px;
        border-radius: 8px;
        font-size: 10px;
        line-height: 15px;
        text-align: center;
    }

    /* Content must clear the fixed bar (plus the phone's home indicator). */
    body.lms-has-bottom-nav .lms-panel-main {
        padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    }

    /* Touch targets in the grid bar. At 28 and 30px these were the smallest
       tappable things on any grid screen, well under the 44px a finger wants,
       and they sit next to each other so a near miss hits the wrong one. */
    .lms-gf-bar .lms-gf-add,
    .lms-gf-bar .lms-cols-btn {
        /* 44px, not 38: this was already reaching for a bigger target and
           stopped six pixels short of a thumb. */
        min-height: 44px;
        height: 44px;
        padding-top: 0;
        padding-bottom: 0;
    }

    #lms-bottom-nav {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        /* Above the menu sheet and its backdrop. The sheet deliberately stops
           short of this bar so the quick tabs stay reachable while the menu is
           open, which means the backdrop must not dim them either. */
        z-index: 1215;
        height: calc(58px + env(safe-area-inset-bottom, 0px));
        padding: 0 4px env(safe-area-inset-bottom, 0px);
        background: var(--lms-bg-panel, var(--lms-bg));
        border-top: 1px solid var(--lms-border);
    }
    .lms-bn-tab {
        position: relative;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 5px 2px 6px;
        border: none;
        background: none;
        color: var(--lms-text-muted);
        font-size: 10.5px;
        font-family: inherit;
        cursor: pointer;
    }
    .lms-bn-tab-ico {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 27px;
        border-radius: 99px;
    }
    .lms-bn-tab.lms-bn-active { color: var(--lms-text); }
    .lms-bn-tab.lms-bn-active svg { stroke-width: 2.1; }
    .lms-bn-badge {
        position: absolute;
        top: -5px;
        right: -7px;
    }

    #lms-bn-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1205;
        background: rgba(0, 0, 0, 0.45);
    }
    #lms-bn-backdrop[hidden] { display: none; }

    /* Full-screen menu: covers everything above the bar and slides up. */
    #lms-bn-sheet {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0; left: 0; right: 0;
        bottom: calc(58px + env(safe-area-inset-bottom, 0px));
        /* Above the fixed page header, which the sheet covers completely: the
           sheet carries its own head (account, close) and two stacked headers
           clipped each other. */
        z-index: 1210;
        background: var(--lms-bg);
        padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 8px;
        animation: lms-bn-slide-up 0.18s ease-out;
    }
    #lms-bn-sheet[hidden] { display: none; }

    @keyframes lms-bn-slide-up {
        from { transform: translateY(14px); opacity: 0.4; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    .lms-bn-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 6px 2px 12px;
    }
    .lms-bn-head .lms-avatar { flex-shrink: 0; }
    .lms-bn-head-meta { min-width: 0; flex: 1; }
    .lms-bn-head-name {
        font-size: 15px;
        font-weight: 600;
        color: var(--lms-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .lms-bn-head-sub {
        font-size: 12px;
        color: var(--lms-text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .lms-bn-close {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: 1px solid var(--lms-border);
        border-radius: 10px;
        background: var(--lms-bg-panel, var(--lms-bg));
        color: var(--lms-text-muted);
        cursor: pointer;
    }

    .lms-bn-search { padding: 0 0 12px; }
    .lms-bn-search input {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 14px;
        font-size: 14px;
        font-family: inherit;
        color: var(--lms-text);
        background: var(--lms-bg-panel, var(--lms-bg));
        border: 1px solid var(--lms-border);
        border-radius: 10px;
        outline: none;
    }
    .lms-bn-search input:focus { border-color: var(--lms-text-muted); }

    .lms-bn-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 16px;
    }
    .lms-bn-section-count { margin-left: 8px; }
    .lms-bn-section {
        display: flex;
        align-items: center;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--lms-text-muted);
        margin: 14px 2px 8px;
    }
    .lms-bn-list {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--lms-border);
        border-radius: 12px;
        overflow: hidden;
    }
    .lms-bn-row {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 46px;
        padding: 0 13px;
        border: 0;
        border-top: 1px solid var(--lms-border);
        background: transparent;
        color: var(--lms-text);
        font-family: inherit;
        font-size: 14.5px;
        text-align: left;
        cursor: pointer;
    }
    .lms-bn-row:first-child { border-top: 0; }
    .lms-bn-row:active { background: var(--lms-active-tint); }
    .lms-bn-row-ico {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        flex-shrink: 0;
    }
    .lms-bn-row-label {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* The count sits at the end of its row rather than floating over a
       corner, so it lines up down the list and can be read as a column. */
    .lms-bn-row-count {
        flex-shrink: 0;
        margin-left: auto;
    }
}

/* ─── Touch targets ────────────────────────────────────────── */
/* A finger needs about 44px, and the row-action button and the expand toggle
   were 26 and 34: the two controls every record is reached through.
   Only the *target* needs to grow. Growing the button made a grey slab of the
   toggle, and laying the cell out as a flex container broke the row: Tabulator
   positions cells itself and they are inline-block by design. So the cell and
   the button are left exactly as they were, and an invisible pseudo-element
   extends the area that answers a thumb. */
@media (max-width: 768px) {
    .tabulator .lms-row-act-col .lms-row-act-btn,
    .tabulator .lms-rc-toggle-col .tabulator-responsive-collapse-toggle {
        position: relative;
    }
    .tabulator .lms-row-act-col .lms-row-act-btn::after,
    .tabulator .lms-rc-toggle-col .tabulator-responsive-collapse-toggle::after {
        content: '';
        position: absolute;
        /* Out to 44px in both directions, without occupying any layout space. */
        inset: -9px;
    }

    /* The sidebar is off-canvas on a phone but was still in the tab order and
       still measurable, so ten pin buttons sat between the top of the page and
       the content, on a screen where the sidebar cannot even be seen. Hidden
       while closed puts it out of reach of the keyboard too; the delay lets it
       finish sliding out before it goes. */
    /* The remaining controls a thumb has to hit: the notification bell in the
       slim header, the filter chip, and the account row. */
    #lms-mobile-header .lms-mh-bell,
    .lms-gf-add,
    .lms-acct-trigger {
        min-height: 44px;
        min-width: 44px;
    }
    .lms-gf-bar .lms-gf-add { height: 44px; padding-inline: 14px; }
    .lms-skip-link { min-height: 44px; display: inline-flex; align-items: center; }
    .lms-tabgrid-search { min-height: 44px; }

    .lms-panel-left:not(.lms-drawer-open),
    .inv-sidebar:not(.lms-drawer-open),
    .brk-sidebar:not(.lms-drawer-open),
    .fnd-sidebar:not(.lms-drawer-open) {
        visibility: hidden;
        transition: transform 0.2s, visibility 0s linear 0.2s;
    }
}