/*
|--------------------------------------------------------------------------
| AjonTec — User panel mobile/responsive layer  (Tabler-based layout)
|--------------------------------------------------------------------------
| Loaded last in frontend/layouts/user/partials/_head.blade.php so it
| refines the stock Tabler theme rather than replacing it.
|
| Goal: on a phone the user panel should feel like a native app — no
| horizontal scrolling, thumb-reachable controls, 44px touch targets.
|--------------------------------------------------------------------------
*/

:root {
    --atsu-radius: 14px;
    --atsu-line: #e3e8f0;
    --atsu-muted: #5b6472;
    --atsu-touch: 44px;
}

/* No page in the panel should ever scroll sideways. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ==========================================================================
   1. SIDEBAR — app-like slide-in drawer on mobile
   Tabler's `.navbar-vertical` collapses inline on small screens, which pushes
   the whole page down and loses the user's scroll position. Turning it into a
   fixed drawer with its own scrolling is what makes it feel like an app.
   ========================================================================== */
@media (max-width: 991.98px) {
    .navbar-vertical.navbar-expand-lg > .container-fluid,
    .navbar-vertical.navbar-expand-lg > .container-xl {
        position: relative;
    }

    /* The collapsible menu becomes the drawer panel itself. */
    .navbar-vertical #navbar-menu.collapse.show,
    .navbar-vertical #navbar-menu.collapsing {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1045;
        width: min(84vw, 310px);
        max-width: 310px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--tblr-bg-surface, #1a2234);
        box-shadow: 4px 0 24px rgba(0, 0, 0, .28);
        padding: 12px 10px calc(18px + env(safe-area-inset-bottom, 0px));
    }

    /* RTL: drawer comes in from the right instead. */
    [dir="rtl"] .navbar-vertical #navbar-menu.collapse.show,
    [dir="rtl"] .navbar-vertical #navbar-menu.collapsing {
        left: auto;
        right: 0;
        box-shadow: -4px 0 24px rgba(0, 0, 0, .28);
    }

    /* Dim the page behind the open drawer. */
    .navbar-vertical #navbar-menu.collapse.show::after {
        content: "";
        position: fixed;
        inset: 0;
        left: min(84vw, 310px);
        background: rgba(16, 17, 23, .45);
        z-index: -1;
    }

    [dir="rtl"] .navbar-vertical #navbar-menu.collapse.show::after {
        left: 0;
        right: min(84vw, 310px);
    }

    /* Sticky top bar so the menu button is always reachable. */
    .navbar-vertical {
        position: sticky;
        top: 0;
        z-index: 1040;
        padding-top: env(safe-area-inset-top, 0px);
    }

    .navbar-toggler {
        min-width: var(--atsu-touch);
        min-height: var(--atsu-touch);
    }

    .navbar-brand-image { max-height: 32px; width: auto; }

    /* Comfortable menu rows — stock padding is too tight for a thumb. */
    .navbar-vertical .nav-link {
        min-height: var(--atsu-touch);
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: .95rem;
    }

    .navbar-vertical .dropdown-menu .dropdown-item {
        min-height: 40px;
        display: flex;
        align-items: center;
    }
}

/* ==========================================================================
   2. TOP ACCOUNT BAR — wallet / cart / theme / profile
   These sit in one flex row that overflowed on narrow screens.
   ========================================================================== */
@media (max-width: 767.98px) {
    .page-wrapper > header.navbar .container-xl > .d-flex {
        flex-wrap: wrap;
        gap: 8px !important;
        row-gap: 8px;
    }

    .page-wrapper > header.navbar .container-xl {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Keep the balance chip readable but stop it eating the whole row. */
    .page-wrapper > header.navbar .d-flex > .d-flex { flex: 1 1 auto; min-width: 0; }
}

/* ==========================================================================
   3. PAGE BODY SPACING
   ========================================================================== */
@media (max-width: 767.98px) {
    .page-body { margin-top: 12px; }
    .page-body > .container-xl,
    .page-header > .container-xl {
        padding-left: 12px;
        padding-right: 12px;
    }

    .page-header .row > [class*="col-"] { margin-bottom: 6px; }

    /* Page title + action button stack instead of colliding. */
    .page-header .btn-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }
    .page-header .btn-list > .btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   4. CARDS, TABLES, FORMS
   ========================================================================== */
@media (max-width: 767.98px) {
    .card { border-radius: var(--atsu-radius); }
    .card-body { padding: 14px; }
    .card-header { padding: 12px 14px; }

    /* Tables scroll inside their own box, never the page. */
    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* Tabler's responsive table cards, where the markup opts in. */
    .table-mobile-md td { padding-left: 12px; padding-right: 12px; }

    /* iOS zooms the page when a focused input is under 16px. */
    .form-control,
    .form-select,
    .input-group > .form-control { font-size: 16px; }

    .form-control,
    .form-select,
    .btn { min-height: var(--atsu-touch); }

    .btn-sm { min-height: 38px; }

    /* Full-width primary actions read as app buttons. */
    .card-footer .btn,
    form .btn-primary[type="submit"] { width: 100%; justify-content: center; }

    /* Modals become near-fullscreen sheets. */
    .modal-dialog {
        margin: 8px;
        max-width: calc(100% - 16px);
    }
    .modal-body { padding: 14px; }

    /* Pagination stays centred and wraps. */
    .pagination { flex-wrap: wrap; justify-content: center; gap: 4px; }
    .page-link {
        min-width: 38px;
        min-height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Stat tiles: two per row rather than one very tall column. */
    .row-deck > .col-sm-6 { margin-bottom: 10px; }
}

/* Long values (emails, IDs, wallet addresses) must not widen the layout. */
.text-break,
.card-body dd,
.table td { word-break: break-word; }

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
    .navbar-vertical #navbar-menu,
    .card,
    .btn { transition: none !important; }
}