/* =============================================================================
   InfinityCore — Responsive app shell (Phase 1)

   Mobile/tablet behaviour for the authenticated app shell only. Loaded
   AFTER ds.css and tokens.css so the desktop rules in tokens.css stay
   authoritative at the desktop breakpoint and these mobile overrides
   apply below 900px.

   Scope:
     · sidebar slides off-canvas below 900px (transform-driven)
     · .app-main loses its left margin and content padding tightens
     · topbar reveals a hamburger menu button
     · sidebar reveals a close (×) button inside its logo row
     · an overlay scrim sits behind the open drawer, click closes
     · RTL flips the slide direction

   Not in scope (Phase 2):
     · responsive tables, filters, cards, modals
     · checkout/return flow tweaks
     · table → card transformation
   ============================================================================= */


/* ---------------------------------------------------------------------------
   Mobile-only chrome controls — hidden by default on desktop. The mobile
   media block below flips them to display:flex.
   --------------------------------------------------------------------------- */
.app-topbar__menu-btn,
.app-sidebar__close-btn,
.app-scrim {
    display: none;
}


/* ---------------------------------------------------------------------------
   Mobile / tablet breakpoint
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {

    /* App-main loses the 232px gutter; main content takes full width. */
    .app-main {
        margin-left: 0;
    }
    [dir="rtl"] .app-main {
        margin-right: 0;
    }

    /* Tighten content padding so phones get usable horizontal space. */
    .app-content {
        padding: 16px 16px;
    }

    /* Sidebar becomes a slide-in drawer. */
    .app-sidebar {
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
        will-change: transform;
    }
    .app-sidebar.app-sidebar--open {
        transform: translateX(0);
    }

    /* RTL: drawer slides in from the right. */
    [dir="rtl"] .app-sidebar {
        transform: translateX(100%);
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
    }
    [dir="rtl"] .app-sidebar.app-sidebar--open {
        transform: translateX(0);
    }

    /* Hamburger menu button — visible only on mobile, lives in the
       topbar row before the breadcrumb. */
    .app-topbar__menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin-right: 6px;
        padding: 0;
        background: transparent;
        border: 1px solid var(--line);
        border-radius: 6px;
        cursor: pointer;
        color: var(--ink);
        flex-shrink: 0;
    }
    .app-topbar__menu-btn:hover {
        background: var(--surface-2);
    }
    .app-topbar__menu-btn:focus-visible {
        outline: var(--focus-ring);
        outline-offset: var(--focus-ring-offset);
    }
    [dir="rtl"] .app-topbar__menu-btn {
        margin-right: 0;
        margin-left: 6px;
    }

    /* Close (×) button inside the sidebar logo row. Pushed to the
       far end of the row so it never overlaps the wordmark. */
    .app-sidebar__logo {
        justify-content: space-between;
    }
    .app-sidebar__close-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 6px;
        cursor: pointer;
        color: var(--on-sidebar);
        font-size: 22px;
        line-height: 1;
    }
    .app-sidebar__close-btn:hover {
        background: var(--sidebar-2);
        color: var(--on-sidebar-2);
    }
    .app-sidebar__close-btn:focus-visible {
        outline: var(--focus-ring);
        outline-offset: var(--focus-ring-offset);
    }

    /* Overlay scrim behind the open drawer. Click closes the drawer
       via Alpine in base.html; the click handler does not affect
       the desktop layout because the scrim never renders on desktop. */
    .app-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.42);
        z-index: 49;
        cursor: pointer;
    }
}


/* ---------------------------------------------------------------------------
   Narrow phones — small extra tightening. Topbar breadcrumb can wrap
   without overflowing, and the bell badge stays readable.
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .app-topbar__row {
        gap: 6px;
    }
    .app-topbar__breadcrumb {
        min-width: 0;
        flex: 1 1 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .app-content {
        padding: 12px 12px;
    }
}