/* ===== Client mobile bottom navigation - stage 3 ===== */
.client-bottom-nav,
.client-mobile-more-backdrop,
.client-mobile-more-sheet {
    display: none;
}

@media (max-width: 991.98px) {
    :root {
        --client-mobile-nav-height: 72px;
        --client-mobile-nav-bg: rgba(255, 255, 255, 0.96);
        --client-mobile-nav-border: #e7edf5;
        --client-mobile-nav-text: #6b7280;
        --client-mobile-nav-active: #0d6efd;
        --client-mobile-nav-shadow: 0 -10px 28px rgba(15, 23, 42, 0.12);
        --client-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    body {
        padding-bottom: calc(var(--client-mobile-nav-height) + var(--client-mobile-safe-bottom));
    }

    .content,
    #kt_content {
        padding-bottom: calc(24px + var(--client-mobile-nav-height) + var(--client-mobile-safe-bottom)) !important;
    }

    .footer,
    #kt_footer {
        padding-bottom: calc(18px + var(--client-mobile-nav-height) + var(--client-mobile-safe-bottom)) !important;
    }

    .client-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9990;
        height: calc(var(--client-mobile-nav-height) + var(--client-mobile-safe-bottom));
        padding: 7px max(10px, env(safe-area-inset-left, 0px)) calc(7px + var(--client-mobile-safe-bottom)) max(10px, env(safe-area-inset-right, 0px));
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 5px;
        background: var(--client-mobile-nav-bg);
        border-top: 1px solid var(--client-mobile-nav-border);
        box-shadow: var(--client-mobile-nav-shadow);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .client-bottom-nav-item {
        position: relative;
        min-width: 0;
        border: 0;
        background: transparent;
        color: var(--client-mobile-nav-text);
        text-decoration: none !important;
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        font-weight: 700;
        font-size: 11px;
        line-height: 1.15;
        padding: 5px 3px;
        transition: .18s ease;
        outline: none !important;
    }

    .client-bottom-nav-item:hover,
    .client-bottom-nav-item:focus {
        color: var(--client-mobile-nav-active);
        background: rgba(13, 110, 253, 0.08);
    }

    .client-bottom-nav-item.is-active {
        color: var(--client-mobile-nav-active);
        background: rgba(13, 110, 253, 0.11);
    }

    .client-bottom-nav-icon {
        width: 27px;
        height: 25px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
    }

    .client-bottom-nav-label {
        display: block;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .client-mobile-more-backdrop {
        position: fixed;
        inset: 0;
        z-index: 10000;
        background: rgba(15, 23, 42, 0.46);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease;
        display: block;
    }

    .client-mobile-more-backdrop.is-active {
        opacity: 1;
        pointer-events: auto;
    }

    .client-mobile-more-backdrop[hidden] {
        display: none !important;
    }

    .client-mobile-more-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10001;
        display: block;
        background: #ffffff;
        border-radius: 26px 26px 0 0;
        box-shadow: 0 -22px 52px rgba(15, 23, 42, 0.22);
        border: 1px solid rgba(226, 232, 240, 0.95);
        padding: 10px 16px calc(18px + var(--client-mobile-nav-height) + var(--client-mobile-safe-bottom));
        max-height: min(78vh, 620px);
        overflow-y: auto;
        transform: translateY(110%);
        transition: transform .24s ease;
    }

    .client-mobile-more-sheet.is-active {
        transform: translateY(0);
    }

    .client-mobile-sheet-handle {
        width: 44px;
        height: 5px;
        border-radius: 999px;
        background: #d6deea;
        margin: 0 auto 12px;
    }

    .client-mobile-sheet-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding: 2px 2px 14px;
        border-bottom: 1px solid #eef2f7;
        margin-bottom: 14px;
    }

    .client-mobile-sheet-title {
        font-weight: 800;
        color: #111827;
        font-size: 17px;
    }

    .client-mobile-sheet-subtitle {
        margin-top: 3px;
        font-size: 12px;
        color: #6b7280;
        font-weight: 600;
        word-break: break-word;
    }

    .client-mobile-sheet-close {
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 14px;
        background: #f2f6fb;
        color: #475569;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 38px;
    }

    .client-mobile-more-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .client-mobile-more-item {
        border: 1px solid #e6edf6;
        border-radius: 18px;
        background: #f8fbff;
        min-height: 82px;
        color: #263548;
        text-decoration: none !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 6px;
        font-weight: 800;
        text-align: center;
        transition: .18s ease;
    }

    .client-mobile-more-item:hover,
    .client-mobile-more-item:focus,
    .client-mobile-more-item.is-active {
        border-color: rgba(13, 110, 253, .28);
        background: rgba(13, 110, 253, .09);
        color: #0d6efd;
    }

    .client-mobile-more-icon {
        width: 38px;
        height: 38px;
        border-radius: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        color: #0d6efd;
        font-size: 17px;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
    }

    .client-mobile-more-icon.is-danger {
        color: #dc2626;
        background: #fff1f2;
    }

    .client-mobile-more-icon.is-admin {
        color: #7c3aed;
        background: #f5f3ff;
    }

    .client-mobile-more-text {
        max-width: 100%;
        font-size: 12px;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.client-mobile-more-open {
        overflow: hidden;
        touch-action: none;
    }

    body.client-mobile-more-open .client-bottom-nav {
        z-index: 10002;
    }

    /* Keep floating widgets above content but below the menu sheet. */
    .select2-container--open,
    .select2-dropdown {
        z-index: 10005 !important;
    }
}

@media (max-width: 420px) {
    .client-bottom-nav {
        gap: 2px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .client-bottom-nav-item {
        font-size: 10px;
        border-radius: 12px;
        padding-left: 1px;
        padding-right: 1px;
    }

    .client-bottom-nav-icon {
        font-size: 16px;
        width: 24px;
    }

    .client-mobile-more-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    body.client-mobile-more-open {
        overflow: auto;
        touch-action: auto;
    }
}

/* Dark mode */
body.theme-dark .client-bottom-nav {
    --client-mobile-nav-bg: rgba(21, 28, 38, 0.96);
    --client-mobile-nav-border: #2d3948;
    --client-mobile-nav-text: #aebbd0;
    --client-mobile-nav-active: #60a5fa;
    --client-mobile-nav-shadow: 0 -10px 28px rgba(0, 0, 0, 0.35);
}

body.theme-dark .client-mobile-more-sheet {
    background: #151c26;
    border-color: #2d3948;
    color: #e5edf8;
}

body.theme-dark .client-mobile-sheet-title {
    color: #f8fafc;
}

body.theme-dark .client-mobile-sheet-subtitle {
    color: #aebbd0;
}

body.theme-dark .client-mobile-sheet-close,
body.theme-dark .client-mobile-more-icon {
    background: #202a38;
    color: #8ec5ff;
}

body.theme-dark .client-mobile-sheet-header {
    border-bottom-color: #2d3948;
}

body.theme-dark .client-mobile-more-item {
    background: #1b2532;
    border-color: #2d3948;
    color: #e5edf8;
}

body.theme-dark .client-mobile-more-item:hover,
body.theme-dark .client-mobile-more-item:focus,
body.theme-dark .client-mobile-more-item.is-active {
    background: rgba(96, 165, 250, 0.14);
    border-color: rgba(96, 165, 250, 0.38);
    color: #93c5fd;
}