/* ===============================================
   RESPONSIVE FIXES FOR WOW-DASH
   Enhanced mobile, tablet, and desktop responsiveness
   =============================================== */

/* ===================
   1. GENERAL RESPONSIVE UTILITIES
   =================== */

/* Hide elements on mobile */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
    
    /* Make tables horizontally scrollable */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Improve message container positioning */
    .messages-container {
        top: 60px !important;
        right: 10px !important;
        left: 10px !important;
        min-width: auto !important;
        max-width: 100% !important;
    }
    
    /* Stack flex items */
    .flex-wrap-mobile {
        flex-wrap: wrap !important;
    }
    
    /* Full width buttons on mobile */
    .btn-mobile-full {
        width: 100% !important;
        justify-content: center;
    }
    
    /* Improve form inputs on mobile */
    .form-control, .form-select {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* Better spacing on mobile */
    .p-24 {
        padding: 16px !important;
    }
    
    .px-24 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .py-24 {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
}

/* Hide elements on tablet */
@media (max-width: 991px) {
    .hide-tablet {
        display: none !important;
    }
}

/* ===================
   2. NAVBAR RESPONSIVE
   =================== */

@media (max-width: 768px) {
    .navbar-header .row {
        margin: 0 !important;
    }
    
    .navbar-header .col-auto {
        padding: 0 8px !important;
    }
    
    /* Hide search bar on small screens */
    .navbar-search {
        display: none !important;
    }
    
    /* Reduce gap */
    .navbar-header .gap-3 {
        gap: 8px !important;
    }
    
    /* Smaller buttons */
    .navbar-header .w-40-px {
        width: 36px !important;
        height: 36px !important;
    }
}

/* ===================
   3. CARDS & STATS RESPONSIVE
   =================== */

/* Stat cards */
@media (max-width: 575px) {
    .gradient-card-text {
        font-size: 1.2rem !important;
    }
    
    .w-48-px.h-48-px {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Stack card content vertically on small screens */
    .card-body .d-flex.gap-2 {
        gap: 8px !important;
    }
}

/* ===================
   4. TABLES RESPONSIVE
   =================== */

/* Make tables scrollable horizontally */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Ensure minimum table width */
@media (max-width: 991px) {
    .table-responsive table {
        min-width: 800px;
    }
    
    .table-responsive.scroll-sm table {
        min-width: 600px !important;
    }
}

/* Compact table styling */
.table-compact th,
.table-compact td {
    padding: 10px 12px !important;
    font-size: 0.875rem;
}

@media (max-width: 767px) {
    .table-compact th,
    .table-compact td {
        padding: 8px 10px !important;
        font-size: 0.813rem;
    }
    
    /* Hide less important columns on mobile */
    .col-status,
    .col-action {
        min-width: 100px;
    }
}

/* ===================
   5. FORMS & FILTERS RESPONSIVE
   =================== */

/* Filter forms - let form elements be flexible but not forced full-width on tablet */
@media (max-width: 767px) {
    /* Full width form selects and inputs inside filter sections only */
    .filters-main-row .form-select,
    .filters-main-row .form-control,
    .filter-form .form-select,
    .filter-form .form-control {
        width: 100% !important;
        min-width: auto !important;
    }
}

@media (max-width: 575px) {
    /* Full width form elements in filter contexts only */
    .card-header .form-select-sm,
    .card-header .form-control-sm {
        width: 100% !important;
    }
    
    /* Date inputs */
    input[type="date"] {
        font-size: 14px !important;
    }
}

/* ===================
   6. BUTTONS RESPONSIVE
   =================== */

@media (max-width: 767px) {
    /* Make button text smaller */
    .btn-sm {
        padding: 6px 12px !important;
        font-size: 0.813rem !important;
    }
    
    /* Stack action buttons */
    .d-flex.gap-2.justify-content-center {
        flex-direction: column;
        align-items: stretch !important;
    }
    
    /* Quick action items */
    .quick-action-item {
        width: 100% !important;
        margin-bottom: 8px;
    }
}

/* ===================
   7. MODALS RESPONSIVE
   =================== */

@media (max-width: 575px) {
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }
    
    .modal-content {
        border-radius: 12px !important;
    }
    
    .modal-body {
        padding: 16px !important;
    }
}

/* ===================
   8. CHARTS RESPONSIVE
   =================== */

@media (max-width: 767px) {
    #revenueChart,
    #dailyRevenueChart,
    #userDonutChart {
        min-height: 250px !important;
    }
    
    /* Sparklines */
    #ordersSparkline,
    #revenueSparkline,
    #completionSparkline {
        display: none !important;
    }
}

/* ===================
   9. DASHBOARD SPECIFIC
   =================== */

@media (max-width: 991px) {
    /* Stack dashboard sections */
    .col-xxl-8,
    .col-xxl-4 {
        width: 100% !important;
        margin-bottom: 1rem;
    }
    
    /* Role dashboard adjustments */
    .performance-table {
        overflow-x: auto;
    }
}

@media (max-width: 575px) {
    /* Performance table mobile */
    .performance-table table {
        font-size: 0.75rem;
    }
    
    .performance-table th,
    .performance-table td {
        padding: 6px 8px !important;
    }
    
    /* Today's status progress bars */
    .max-w-66 {
        max-width: 100px !important;
    }
}

/* ===================
   10. STAFF LIST RESPONSIVE
   =================== */

@media (max-width: 767px) {
    /* Staff member row */
    .w-40-px.h-40-px.rounded-circle {
        width: 32px !important;
        height: 32px !important;
    }
    
    /* Badge adjustments */
    .px-8.py-4 {
        padding: 4px 6px !important;
        font-size: 0.75rem !important;
    }
}

/* ===================
   11. LANGUAGE LIST TABLE
   =================== */

@media (max-width: 991px) {
    /* Pricing columns */
    .table th[colspan],
    .table td {
        min-width: 80px;
        white-space: nowrap;
    }
}

/* ===================
   12. ORDERS LIST RESPONSIVE
   =================== */

@media (max-width: 767px) {
    /* Order badges and stats */
    .badge {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
    }
    
    /* Filter form mobile */
    .h-40-px {
        height: 38px !important;
    }
    
    /* View mode toggle */
    .btn-group .btn {
        font-size: 0.813rem !important;
        padding: 6px 12px !important;
    }
}

/* ===================
   13. SIDEBAR RESPONSIVE
   =================== */

@media (max-width: 1199px) {
    /* Main content full width on mobile/tablet */
    .dashboard-main {
        margin-left: 0 !important;
        margin-inline-start: 0 !important;
    }
}

/* ===================
   14. GRID IMPROVEMENTS
   =================== */

/* Ensure proper column stacking */
@media (max-width: 575px) {
    .col-sm-6,
    .col-sm-4,
    .col-sm-3 {
        width: 100% !important;
        margin-bottom: 1rem;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .col-sm-6 {
        width: 50% !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .col-md-6 {
        width: 50% !important;
    }
    
    .col-md-4 {
        width: 33.333333% !important;
    }
    
    .col-md-3 {
        width: 25% !important;
    }
}

/* ===================
   15. TEXT & TYPOGRAPHY
   =================== */

@media (max-width: 767px) {
    h1, .h1 { font-size: 1.75rem !important; }
    h2, .h2 { font-size: 1.5rem !important; }
    h3, .h3 { font-size: 1.25rem !important; }
    h4, .h4 { font-size: 1.125rem !important; }
    h5, .h5 { font-size: 1rem !important; }
    h6, .h6 { font-size: 0.875rem !important; }
    
    /* Truncate long text on mobile */
    .truncate-mobile {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ===================
   16. UTILITY CLASSES
   =================== */

/* Responsive display utilities */
.d-mobile-none { display: block; }
.d-mobile-block { display: none; }

@media (max-width: 767px) {
    .d-mobile-none { display: none !important; }
    .d-mobile-block { display: block !important; }
    .d-mobile-flex { display: flex !important; }
}

/* Spacing utilities for mobile */
@media (max-width: 767px) {
    .gap-mobile-2 { gap: 8px !important; }
    .gap-mobile-3 { gap: 12px !important; }
    .mb-mobile-3 { margin-bottom: 12px !important; }
    .mt-mobile-3 { margin-top: 12px !important; }
}

/* ===================
   17. PRINT STYLES
   =================== */

@media print {
    .sidebar,
    .navbar-header,
    .hide-print,
    .btn,
    .dropdown {
        display: none !important;
    }
    
    .dashboard-main {
        margin-left: 0 !important;
    }
    
    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }
}

/* ===================
   18. ACCESSIBILITY
   =================== */

/* Touch targets - only for standalone buttons and nav actions, NOT general links */
@media (max-width: 767px) {
    /* Only explicit button/action elements get large touch targets */
    button.btn,
    a.btn,
    .navbar-header button,
    .navbar-header a.btn {
        min-height: 44px;
    }
    
    /* Sidebar action buttons */
    .sidebar-toggle,
    .sidebar-mobile-toggle,
    .sidebar-close-btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Focus states for keyboard navigation */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #487FFF;
    outline-offset: 2px;
}