/* =================================================================
   Mobile User Tour — Popover & Overlay Overrides
   Loaded AFTER user-tour.css. All rules scoped to max-width: 991.98px.
   ================================================================= */

@media (max-width: 991.98px) {

    /* -- Popover sizing: prevent overflow on 375px screens ---------- */
    .driver-popover {
        max-width: calc(100vw - 32px) !important;
        margin: 8px !important;
    }

    /* -- Touch-friendly tour buttons ------------------------------- */
    .driver-popover-footer button {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 1rem;
        font-size: var(--font-size-base);
    }

    /* -- Progress bar: slightly thicker for mobile visibility ------ */
    .driver-popover-progress-text {
        font-size: var(--font-size-sm);
    }

    /* -- Ensure Driver.js overlay sits ABOVE sidebar overlay ------- */
    /* Sidebar overlay: z-index 1040 (backdrop) / 1045 (sidebar)
       Driver.js default: 100000 — already higher, but be explicit */
    .driver-overlay {
        z-index: 100010 !important;
    }

    .driver-popover {
        z-index: 100011 !important;
    }

    /* -- During sidebar tour phase, prevent backdrop click-through - */
    body.sidebar-open.user-tour-sidebar-phase::after {
        pointer-events: none !important;
    }

    /* -- Popover positioning hint for sidebar items ---------------- */
    /* When sidebar is open, popovers should appear to the right
       of menu items or below them, not overlapping the sidebar */
    .driver-popover[data-side="right"] {
        max-width: calc(100vw - 300px) !important;
    }
}