/* SalBazaar Mobile CSS
 * Styles for screens < 768px
 */

@media (max-width: 767px) {
    /* Prevent horizontal overflow on mobile */
    body {
        overflow-x: hidden;
    }

    /* Typography - slightly smaller on mobile */
    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl); }
    h3 { font-size: var(--text-lg); }

    /* Header */
    .header-inner {
        height: 52px;
    }

    /* Hide desktop nav, show mobile toggle */
    .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background-color: var(--bg-dark);
        border-bottom: var(--border);
        padding: var(--space-sm);
    }

    .nav.open {
        display: flex;
    }

    .nav-link {
        padding: var(--space-md);
        border: none;
        border-bottom: var(--border);
    }

    .nav-link:last-child {
        border-bottom: none;
    }

    .menu-toggle {
        display: flex;
    }

    .menu-toggle.open .menu-bar:nth-child(1) {
        transform: rotate(45deg) translate(4px, 4px);
    }

    .menu-toggle.open .menu-bar:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.open .menu-bar:nth-child(3) {
        transform: rotate(-45deg) translate(4px, -4px);
    }

    /* Auth buttons - icon only on mobile */
    .auth-buttons .btn {
        padding: var(--space-sm);
    }

    .auth-buttons .btn-outline span {
        display: none;
    }

    /* Main content */
    .main {
        padding: var(--space-lg) 0;
    }

    /* Page header */
    .page-header {
        margin-bottom: var(--space-lg);
        padding-bottom: var(--space-md);
    }

    .page-title {
        font-size: var(--text-lg);
    }

    /* Grid - single column on mobile */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .grid-auto {
        grid-template-columns: 1fr;
    }

    /* Sidebar layout - stack on mobile */
    .layout-sidebar {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        order: -1;
        margin-bottom: var(--space-lg);
        padding-bottom: var(--space-lg);
        border-bottom: var(--border);
    }

    /* Footer */
    .footer {
        padding: var(--space-lg) 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .footer-section:first-child {
        margin-bottom: var(--space-md);
    }

    /* Cards */
    .card-body {
        padding: var(--space-md);
    }

    /* Modal - constrain width on mobile */
    .modal {
        max-width: 90vw;
    }

    /* Toast - full width */
    .toast-container {
        left: var(--space-md);
        right: var(--space-md);
        max-width: none;
    }

    /* Buttons - full width option */
    .btn-mobile-full {
        width: 100%;
    }

    /* Tables - horizontal scroll */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive .table {
        min-width: 600px;
    }

    /* Tabs - scrollable on mobile */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .tab {
        flex-shrink: 0;
    }

    /* Form - stack labels */
    .form-horizontal .form-group {
        flex-direction: column;
    }

    .form-horizontal .form-label {
        width: auto;
        text-align: left;
        padding-top: 0;
    }

    /* Dropdown - position adjustment for left-side dropdowns */
    .dropdown-menu {
        right: auto;
        left: 0;
    }

    /* User menu dropdowns - stay right-aligned */
    .user-menu .dropdown-menu {
        right: 0;
        left: auto;
        min-width: 180px;
    }

    /* Notification dropdown - centered on mobile */
    .notification-dropdown .dropdown-menu {
        position: fixed;
        top: 60px;
        left: 50%;
        right: auto;
        width: calc(100vw - 20px);
        max-width: 320px;
        transform: translateX(-50%);
    }

    .notification-dropdown.open .dropdown-menu {
        transform: translateX(-50%);
    }

    /* Pagination - compact */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .page-link {
        min-width: 36px;
        height: 36px;
    }

    /* Price - prominent on mobile */
    .price-lg {
        font-size: var(--text-lg);
    }

    /* Touch-friendly sizing */
    .btn,
    .form-input,
    .form-select,
    .form-textarea {
        min-height: 44px;
    }

    .form-check-input {
        width: 20px;
        height: 20px;
    }
}

/* Very small screens */
@media (max-width: 375px) {
    .container {
        padding: 0 var(--space-sm);
    }

    .header-actions {
        gap: var(--space-xs);
    }

    .btn {
        padding: var(--space-sm);
        font-size: var(--text-xs);
    }
}