/* =====================================================================
   SACCO on phones and tablets: bottom bar, slide-up sheets, roomy pages
   (file: public/css/sacco-mobile.css)
   ===================================================================== */

/* hidden on laptops */
.sx-bottom,
.sx-sheet,
.sx-sheet-backdrop {
    display: none;
}

@media (max-width: 1023px) {

    /* ---------- page spacing ---------- */
    body:has(.sx-shell) .fi-main {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* the bottom bar replaces the top-left menu button */
    .sx-menu-btn {
        display: none !important;
    }

    /* ---------- bottom bar ---------- */
    .sx-bottom {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 45;
        gap: 4px;
        padding: 8px max(8px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
        background: #fff;
        border-top: 1px solid var(--sx-border);
        box-shadow: 0 -6px 24px rgba(23, 37, 84, .08);
    }

    .sx-bottom-btn {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 7px 4px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: var(--sx-muted);
        font-family: inherit;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
    }

    .sx-bottom-btn span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sx-bottom-btn.is-active {
        color: var(--sx-cobalt);
        background: #EEF4FF;
    }

    .sx-bottom-ico {
        width: 22px;
        height: 22px;
    }

    /* ---------- slide-up sheet ---------- */
    .sx-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 46;
        background: rgba(15, 23, 42, .45);
    }

    .sx-sheet {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 47;
        max-height: 70vh;
        overflow-y: auto;
        padding: 10px 16px calc(24px + env(safe-area-inset-bottom, 0px));
        border-radius: 22px 22px 0 0;
        background: #fff;
        box-shadow: 0 -20px 50px rgba(15, 23, 42, .25);
    }

    .sx-sheet-grab {
        width: 40px;
        height: 5px;
        margin: 4px auto 12px;
        border-radius: 3px;
        background: #D5DCEA;
    }

    .sx-sheet .sx-flyout-link {
        padding: 14px 12px;
        font-size: 15px;
    }

    /* ---------- profile menu fits the screen ---------- */
    .sx-user-menu {
        position: fixed;
        top: 68px;
        right: 12px;
        width: min(320px, calc(100vw - 24px));
    }

    /* ---------- page headers ---------- */
    body:has(.sx-shell) .fi-header {
        gap: 12px;
    }

    body:has(.sx-shell) .fi-header-heading {
        font-size: 24px !important;
    }

    /* header buttons (e.g. "Add staff member") full width */
    body:has(.sx-shell) .fi-header .fi-ac,
    body:has(.sx-shell) .fi-header .fi-ac .fi-btn {
        width: 100%;
    }

    /* ---------- tables: scroll inside the card ---------- */
    body:has(.sx-shell) .fi-ta-header-toolbar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px !important;
    }

    body:has(.sx-shell) .fi-ta-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ---------- forms ---------- */
    .sx-form-foot {
        flex-direction: column;
        align-items: stretch;
    }

    .sx-form-btns {
        width: 100%;
        margin-left: 0;
    }

    .sx-form-btns .sx-btn {
        flex: 1;
    }
}

/* small phones */
@media (max-width: 480px) {
    .sx-form-body {
        padding: 18px !important;
    }

    .sx-form-foot {
        padding: 14px 18px !important;
    }

    .sx-role-pills label:has(input[type="radio"]) {
        padding: 10px 14px;
        font-size: 13.5px;
    }

    .sx-top-center {
        font-size: 14px !important;
        letter-spacing: .14em !important;
    }
}