/* ================================================================
   ADMIN MOBILE BOTTOM NAV + FULL-SCREEN MOBILE LAYOUT
   admin-mobile-nav.css — load after admin.css
   All layout rules here target ≤ 900 px (MOBILE_ADMIN_QUERY).
   ================================================================ */

/* ── Base: hidden on desktop ─────────────────────────────────── */
.admin-bottom-nav,
.admin-more-drawer {
    display: none;
}

@media (max-width: 900px) {

    /* ─────────────────────────────────────────────────────────
       FLOATING PILL NAV
       ───────────────────────────────────────────────────────── */
    .admin-bottom-nav {
        display: flex;
        position: fixed;
        bottom: max(16px, env(safe-area-inset-bottom, 0px));
        left: 50%;
        transform: translateX(-50%);
        width: min(440px, calc(100vw - 24px));
        background: rgba(255, 255, 255, 0.90);
        backdrop-filter: blur(24px) saturate(170%);
        -webkit-backdrop-filter: blur(24px) saturate(170%);
        border: 1px solid rgba(255, 255, 255, 0.68);
        border-radius: 40px;
        padding: 6px 8px;
        gap: 2px;
        z-index: 990;
        box-shadow:
            0 8px 40px rgba(15, 23, 42, 0.16),
            0 2px 8px rgba(15, 23, 42, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
        align-items: center;
        justify-content: space-around;
    }

    html[data-theme='dark'] .admin-bottom-nav {
        background: rgba(8, 14, 28, 0.92);
        border-color: rgba(255, 255, 255, 0.07);
        box-shadow:
            0 8px 40px rgba(0, 0, 0, 0.48),
            0 2px 8px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    /* Each nav item button */
    .admin-bnav-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        flex: 1;
        min-width: 0;
        min-height: 56px;
        padding: 5px 2px;
        border: none;
        background: transparent;
        border-radius: 28px;
        cursor: pointer;
        color: var(--theme-text-muted, #64748b);
        touch-action: manipulation;
        transition: color 0.18s ease;
        -webkit-tap-highlight-color: transparent;
    }

    /* Icon circle container */
    .admin-bnav-icon-wrap {
        position: relative;
        width: 38px;
        height: 38px;
        border-radius: 19px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
    }

    .admin-bnav-item i {
        font-size: 1.1rem;
    }

    .admin-bnav-label {
        font-size: 0.58rem;
        font-weight: 600;
        letter-spacing: 0.015em;
        line-height: 1;
    }

    /* Active state: filled blue circle, white icon, label accent */
    .admin-bnav-item.active {
        color: var(--theme-accent, #4f80f7);
    }

    .admin-bnav-item.active .admin-bnav-icon-wrap {
        background: var(--theme-accent, #4f80f7);
        box-shadow: 0 4px 16px rgba(79, 128, 247, 0.36);
        transform: translateY(-2px);
    }

    .admin-bnav-item.active i {
        color: #ffffff;
    }

    html[data-theme='dark'] .admin-bnav-item.active .admin-bnav-icon-wrap {
        box-shadow: 0 4px 18px rgba(91, 141, 248, 0.42);
    }

    /* Notification badge */
    .admin-bnav-badge {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 16px;
        height: 16px;
        background: #ef4444;
        color: #fff;
        border-radius: 8px;
        font-size: 0.58rem;
        font-weight: 700;
        padding: 2px 4px;
        border: 2px solid rgba(255, 255, 255, 0.9);
        transform: translate(30%, -30%);
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    html[data-theme='dark'] .admin-bnav-badge {
        border-color: rgba(8, 14, 28, 0.9);
    }

    .admin-bnav-badge.hidden {
        display: none !important;
    }

    /* ─────────────────────────────────────────────────────────
       MORE DRAWER (bottom sheet)
       ───────────────────────────────────────────────────────── */
    .admin-more-drawer {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: flex;
        align-items: flex-end;
    }

    .admin-more-drawer.hidden {
        display: none;
    }

    .admin-more-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.42);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    .admin-more-sheet {
        position: relative;
        width: 100%;
        background: var(--theme-surface-card, #ffffff);
        border-radius: 24px 24px 0 0;
        padding: 12px 20px max(28px, env(safe-area-inset-bottom, 28px)) 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        max-height: 65vh;
        overflow-y: auto;
    }

    html[data-theme='dark'] .admin-more-sheet {
        background: #0d1424;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    .admin-more-sheet-handle {
        width: 36px;
        height: 4px;
        background: var(--theme-border, rgba(100, 116, 139, 0.28));
        border-radius: 2px;
        margin: 0 auto 2px auto;
        flex-shrink: 0;
    }

    .admin-more-sheet-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--theme-text-primary, #0f172a);
        margin: 0;
        flex-shrink: 0;
    }

    html[data-theme='dark'] .admin-more-sheet-title {
        color: #f0f6ff;
    }

    .admin-more-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .admin-more-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 18px 8px;
        background: var(--theme-surface-shell, rgba(100, 116, 139, 0.06));
        border: 1px solid var(--theme-border, rgba(100, 116, 139, 0.12));
        border-radius: 18px;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--theme-text-primary, #0f172a);
        cursor: pointer;
        touch-action: manipulation;
        transition: background 0.15s, transform 0.12s;
        -webkit-tap-highlight-color: transparent;
    }

    html[data-theme='dark'] .admin-more-item {
        color: #e2eaf8;
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.07);
    }

    .admin-more-item:active {
        transform: scale(0.95);
        background: rgba(79, 128, 247, 0.1);
    }

    .admin-more-item i {
        font-size: 1.4rem;
        color: var(--theme-accent, #4f80f7);
    }

    .admin-more-dashboard-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 16px;
        border-radius: 18px;
        background: var(--theme-accent, #4f80f7);
        color: #ffffff;
        font-size: 0.9rem;
        font-weight: 700;
        text-decoration: none;
        transition: opacity 0.15s;
        flex-shrink: 0;
    }

    .admin-more-dashboard-btn:hover,
    .admin-more-dashboard-btn:focus-visible {
        opacity: 0.88;
    }

    /* ─────────────────────────────────────────────────────────
       LAYOUT: hide sidebar, full-screen content
       ───────────────────────────────────────────────────────── */

    /* Hide desktop sidebar entirely */
    .admin-sidebar {
        display: none !important;
    }

    /* Full-height admin container */
    .admin-container {
        flex-direction: column !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        height: 100svh !important;
        overflow: hidden !important;
    }

    @supports not (height: 100svh) {
        .admin-container {
            height: 100vh !important;
        }
    }

    /* Content fills space between glass-nav and bottom-nav */
    .admin-content {
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin-top: 72px !important;
        padding-bottom: max(88px, calc(68px + env(safe-area-inset-bottom, 0px))) !important;
    }

    /* Simplify top glass-nav to logo + notifications only */
    body[data-page='admin'] .glass-nav .nav-links,
    body[data-page='admin'] .glass-nav .nav-toggle {
        display: none !important;
    }

    body[data-page='admin'] .glass-nav .admin-nav-actions .nav-shop-btn,
    body[data-page='admin'] .glass-nav .admin-nav-actions .nav-dashboard-btn,
    body[data-page='admin'] .glass-nav .admin-nav-actions .nav-signout-btn {
        display: none !important;
    }

    /* Panels fill their parent */
    .admin-panel {
        height: 100% !important;
        overflow: hidden !important;
    }

    /* ─────────────────────────────────────────────────────────
       SPLIT-LAYOUT: slide animation (iOS-style pane push)
       ───────────────────────────────────────────────────────── */
    .admin-split-layout {
        display: block !important;
        position: relative !important;
        height: 100% !important;
        overflow: hidden !important;
        grid-template-columns: unset !important;
    }

    /* Both panes overlap and fill the container */
    .admin-split-left,
    .admin-split-right {
        position: absolute !important;
        inset: 0 !important;
        height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        border: none !important;
        transition:
            transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.22s ease !important;
    }

    /* Right pane starts hidden off-screen to the right */
    .admin-split-right {
        transform: translateX(100%) !important;
        opacity: 0 !important;
    }

    /* Chat/detail active — left slides away, right slides in */
    #admin-open-layout.mobile-chat-active .admin-split-left,
    #admin-support-layout.mobile-chat-active .admin-split-left {
        transform: translateX(-30%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    #admin-open-layout.mobile-chat-active .admin-split-right,
    #admin-support-layout.mobile-chat-active .admin-split-right {
        transform: translateX(0) !important;
        opacity: 1 !important;
    }

    /* Back button always visible on mobile */
    .admin-mobile-back {
        display: inline-flex !important;
    }

    /* Right-flex column layout */
    .admin-right-flex {
        flex-direction: column !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    /* Detail sidebar scrolls below the chat area */
    .admin-detail-sidebar {
        max-height: 42vh;
        overflow-y: auto;
        border-top: 1px solid var(--lg-glass-border);
        border-left: none !important;
        flex-shrink: 0;
    }
}

/* ── Extra-small phones (≤ 480 px) ──────────────────────────── */
@media (max-width: 480px) {
    /* Ensure mobile-polish icon strip is never shown (sidebar stays hidden) */
    body[data-page='admin'] .admin-sidebar {
        display: none !important;
    }

    .admin-bottom-nav {
        width: calc(100vw - 16px);
        padding: 5px 6px;
        border-radius: 32px;
    }

    /* Icon-only nav at smallest size — no labels */
    .admin-bnav-label {
        display: none;
    }

    .admin-bnav-item {
        min-height: 52px;
    }

    .admin-bnav-icon-wrap {
        width: 42px;
        height: 42px;
        border-radius: 21px;
    }
}