/* ============================================
   Swappa Market — Global Mobile Responsive
   ============================================ */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    max-width: 100%;
    min-width: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
svg,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

/* Prevent flex/grid children from forcing horizontal scroll */
.container,
.auth-container,
.dash-layout,
.dash-header .inner,
.store-header-bar .inner,
.main-content,
.tab-page,
.library-item,
.library-info,
.catalog-toolbar,
.order-card,
.modal,
.form-panel,
.auth-card {
    min-width: 0;
}

/* Touch-friendly scrolling for horizontal nav areas */
.category-nav .container,
.tab-bar .inner,
.orders-tabs,
.category-scroll,
.brands-track {
    -webkit-overflow-scrolling: touch;
}

/* Safe area for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .cart-drawer,
    .mobile-sidebar,
    .sidebar.open,
    .mobile-bottom-nav,
    .support-chat-panel {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ============================================
   TABLET / SMALL DESKTOP
   ============================================ */
@media (max-width: 968px) {
    .dash-layout {
        width: 100%;
    }

    .main-content {
        width: 100% !important;
        max-width: 100%;
    }

    .modal-overlay {
        padding: 12px !important;
        align-items: flex-end;
    }

    .modal-overlay .modal,
    .modal {
        width: 100%;
        max-width: 100%;
        max-height: min(92vh, 920px);
        border-radius: 16px 16px 0 0;
    }
}

/* ============================================
   MOBILE
   ============================================ */
@media (max-width: 768px) {
    /* Readable tap targets + no iOS zoom on focus */
    input,
    select,
    textarea,
    button {
        font-size: 16px;
    }

    button,
    .btn,
    .btn-browse,
    .btn-library-confirm,
    .add-cart,
    .login-btn-header,
    a.btn-home,
    a.btn-cart {
        min-height: 44px;
    }

    /* Tables scroll instead of breaking layout */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .orders-table,
    .finance-table-wrap,
    .monitoring-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Catalog / library rows — stack cleanly on phones */
    .library-item {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
        padding: 12px;
    }

    .library-item > img {
        width: 64px !important;
        height: 64px !important;
    }

    .library-info {
        flex: 1 1 calc(100% - 160px);
        min-width: 120px;
    }

    .library-name {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        line-height: 1.35;
        font-size: 14px !important;
    }

    .library-right {
        margin-left: auto;
        text-align: right;
    }

    .library-price {
        font-size: 16px !important;
    }

    /* Catalog management action buttons */
    .library-item .btn-pickup {
        min-height: 36px;
        padding: 6px 10px !important;
        font-size: 11px !important;
        white-space: nowrap;
    }

    .catalog-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .catalog-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .catalog-search,
    .catalog-filter {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
    }

    /* Stats / cards */
    .stats-grid,
    .quick-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .stat-card,
    .qs-card {
        min-width: 0;
    }

    /* Forms & settings */
    .settings-form .form-row,
    .form-grid,
    .form-row {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .form-group,
    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        max-width: 100%;
    }

    /* Order cards */
    .order-card .order-header,
    .order-card .order-footer,
    .order-card .order-body {
        flex-wrap: wrap;
    }

    .orders-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 14px;
        padding-bottom: 2px;
    }

    .order-tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Product grids */
    .products-grid,
    .wishlist-grid,
    .deals-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    /* Headers / toolbars */
    .tab-page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .tab-page-header .btn-browse,
    .tab-page-header > button,
    .tab-page-header > a.btn {
        width: 100%;
        justify-content: center;
    }

    /* Keep select + Add to Store on one row, above bottom nav */
    .library-bottom-bar {
        left: 0 !important;
        right: 0 !important;
        flex-wrap: nowrap !important;
        gap: 10px;
        padding: 10px 12px !important;
        bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 160 !important;
    }

    .library-bottom-bar .btn-library-confirm {
        flex: 1 1 auto;
        min-width: 132px;
        width: auto !important;
        justify-content: center;
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    /* Toast full width on small screens */
    .toast-container {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
    }

    .toast {
        min-width: 0 !important;
        width: 100%;
        max-width: 100%;
    }

    /* Store page */
    .store-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .store-search {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Charts / finance */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    .chart-wrap,
    .finance-chart-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   SMALL PHONES
   ============================================ */
@media (max-width: 480px) {
    .stats-grid,
    .quick-stats {
        grid-template-columns: 1fr !important;
    }

    .library-item {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "actions thumb price"
            "info info info";
        align-items: start;
        gap: 10px;
    }

    .library-item > div:first-child {
        grid-area: actions;
    }

    .library-item > img {
        grid-area: thumb;
        width: 56px !important;
        height: 56px !important;
    }

    .library-info {
        grid-area: info;
        flex: none;
        width: 100%;
    }

    .library-right {
        grid-area: price;
        margin-left: 0;
    }

    .library-item .qty-controls {
        flex-direction: column;
        gap: 4px;
    }

    .products-grid,
    .wishlist-grid {
        gap: 8px !important;
    }

    .product-card .info,
    .product-card .card-info {
        padding: 10px !important;
    }

    .modal-top,
    .modal-body,
    .modal-footer {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .modal-footer {
        flex-direction: column;
    }

    .modal-footer button {
        width: 100%;
    }

    .greeting-card,
    .hero-greeting {
        padding: 20px 16px !important;
    }

    .greeting-card h2,
    .hero-greeting h2 {
        font-size: 20px !important;
        line-height: 1.25;
        word-break: break-word;
    }
}

/* Landscape phones — keep usable height for modals/chat */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    .modal-overlay .modal,
    .modal {
        max-height: 94vh;
        border-radius: 12px;
    }

    .support-chat-panel {
        height: 100dvh;
        max-height: 100dvh;
    }
}