/* ========================================
   MOBILE RESPONSIVE STYLES
   Vendor Portal - Optimized for all devices
   ======================================== */

/* ========================================
   BREAKPOINTS
   ======================================== */
:root {
    --mobile-xs: 320px;
    --mobile-sm: 576px;
    --tablet: 768px;
    --desktop: 992px;
    --desktop-lg: 1200px;
}

/* ========================================
   BASE MOBILE OPTIMIZATIONS
   ======================================== */

/* Touch-friendly minimum sizes */
@media (max-width: 768px) {
    /* Increase touch target sizes */
    button, .btn, a.btn, input[type="button"], input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px;
        font-size: 16px;
    }

    /* Prevent text scaling in landscape */
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Smooth scrolling */
    * {
        -webkit-overflow-scrolling: touch;
    }

    /* Remove hover states on touch devices */
    .btn:hover, button:hover, a:hover {
        opacity: 0.9;
    }
}

/* ========================================
   MOBILE NAVIGATION
   ======================================== */
@media (max-width: 768px) {
    /* Sidebar adjustments */
    .sidebar, .vendor-sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        height: 100vh;
        width: 280px;
        z-index: 1000;
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }

    .sidebar.show, .vendor-sidebar.show {
        left: 0;
    }

    /* Mobile menu toggle */
    .mobile-menu-toggle {
        display: block !important;
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 1001;
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px 15px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    /* Overlay when menu is open */
    .mobile-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }

    .mobile-overlay.show {
        display: block;
    }

    /* Main content adjustment */
    .main-content, .page-container {
        margin-left: 0 !important;
        padding: 60px 15px 15px 15px !important;
    }
}

/* ========================================
   RESPONSIVE CARDS & CONTAINERS
   ======================================== */
@media (max-width: 768px) {
    /* Stack cards vertically */
    .row.g-4 > [class*="col-"] {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .card {
        margin-bottom: 1rem;
    }

    .card-body {
        padding: 1rem;
    }

    /* Statistics cards */
    .stat-card {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }

    .stat-icon {
        margin: 0 auto 0.5rem;
    }

    /* Quick actions */
    .quick-actions {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }

    .quick-actions .btn {
        width: 100%;
    }
}

/* ========================================
   RESPONSIVE TABLES
   ======================================== */
@media (max-width: 768px) {
    /* Horizontal scroll for tables */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stack table on very small screens */
    @media (max-width: 576px) {
        .table-responsive table {
            font-size: 0.875rem;
        }

        .table-responsive th,
        .table-responsive td {
            padding: 0.5rem !important;
        }

        /* Hide less important columns */
        .table th:nth-child(n+4),
        .table td:nth-child(n+4) {
            display: none;
        }

        .table th:first-child,
        .table td:first-child,
        .table th:nth-child(2),
        .table td:nth-child(2),
        .table th:last-child,
        .table td:last-child {
            display: table-cell;
        }
    }
}

/* ========================================
   RESPONSIVE FORMS
   ======================================== */
@media (max-width: 768px) {
    /* Stack form elements */
    .form-group, .mb-3 {
        margin-bottom: 1rem;
    }

    input, select, textarea, .form-control, .form-select {
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 12px;
    }

    /* Form actions */
    .form-actions, .modal-footer {
        flex-direction: column;
    }

    .form-actions .btn,
    .modal-footer .btn {
        width: 100%;
        margin: 0.25rem 0;
    }

    /* Filter groups */
    .filter-group .row {
        margin: 0;
    }

    .filter-group [class*="col-"] {
        margin-bottom: 0.75rem;
    }
}

/* ========================================
   RESPONSIVE MODALS
   ======================================== */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: calc(100% - 1rem);
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem;
    }

    .modal-title {
        font-size: 1.25rem;
    }
}

/* ========================================
   RESPONSIVE CHARTS
   ======================================== */
@media (max-width: 768px) {
    .chart-wrapper, .chart-container {
        height: 250px !important;
        max-height: 250px !important;
    }

    canvas {
        max-height: 250px !important;
    }

    /* Chart legends */
    .chart-legend {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========================================
   RESPONSIVE PAGE HEADERS
   ======================================== */
@media (max-width: 768px) {
    .page-header, .dashboard-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }

    .page-header h2,
    .page-header h1 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .page-header .btn-group,
    .page-header .d-flex {
        width: 100%;
        flex-direction: column;
    }

    .page-header .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* ========================================
   RESPONSIVE BADGES & TAGS
   ======================================== */
@media (max-width: 576px) {
    .badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* ========================================
   RESPONSIVE IMAGES
   ======================================== */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }

    .product-thumb,
    .order-item-thumb {
        width: 40px;
        height: 40px;
    }

    .product-image {
        max-width: 100%;
        height: auto;
    }
}

/* ========================================
   RESPONSIVE PLAN CARDS (Subscription)
   ======================================== */
@media (max-width: 768px) {
    .plan-card {
        margin-bottom: 1rem;
    }

    .plan-price {
        padding: 1rem;
    }

    .plan-price .amount {
        font-size: 2rem;
    }

    .subscription-actions {
        flex-direction: column;
    }

    .subscription-actions .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* ========================================
   RESPONSIVE TABS & NAVIGATION
   ======================================== */
@media (max-width: 768px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
}

/* ========================================
   RESPONSIVE ALERTS & TOASTS
   ======================================== */
@media (max-width: 768px) {
    .alert {
        font-size: 0.875rem;
        padding: 0.75rem;
    }

    .toast-notification {
        min-width: calc(100% - 2rem);
        right: 1rem;
        left: 1rem;
    }
}

/* ========================================
   RESPONSIVE LISTS
   ======================================== */
@media (max-width: 768px) {
    .list-group-item {
        padding: 0.75rem;
        font-size: 0.875rem;
    }

    .list-group-item .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }
}

/* ========================================
   RESPONSIVE METRICS & STATS
   ======================================== */
@media (max-width: 768px) {