/* VYBO Staff Management - Mobile Responsive Styles */

/* Base Mobile Styles */
@media (max-width: 768px) {
    /* General layout adjustments */
    .container {
        padding: 0 10px;
    }

    /* Navigation - expanded from the existing styles */
    .navbar-container {
        flex-direction: column;
        padding: 10px;
    }
    
    .logo {
        margin-bottom: 10px;
    }
    
    .nav-links {
        margin-top: 10px;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .nav-links li {
        margin: 5px 8px;
    }

    /* Dashboard Header */
    .dashboard-header {
        padding: 20px 0;
    }
    
    .dashboard-title {
        font-size: 24px;
    }
    
    .dashboard-subtitle {
        font-size: 14px;
    }

    /* Cards and Stat Cards */
    .card {
        margin-bottom: 15px;
        overflow-x: auto; /* Allow tables to scroll horizontally */
    }
    
    .stats-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .stat-card {
        padding: 15px;
    }
    
    .service-grid {
        grid-template-columns: 1fr !important;
    }

    /* Tables */
    table {
        min-width: 600px; /* Ensure tables can be scrolled on small screens */
    }
    
    .table-container {
        overflow-x: auto;
        margin-bottom: 15px;
    }
    
    /* Form Controls */
    .form-group {
        margin-bottom: 15px;
    }
    
    .input-group {
        flex-direction: column;
    }
    
    .input-group > * {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .input-group button {
        width: 100%;
    }
    
    /* Search and Filter sections */
    .search-filters {
        flex-direction: column;
    }
    
    .search-filters > div {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .filters {
        margin-top: 10px;
    }

    /* Buttons */
    .btn {
        padding: 8px 12px;
        font-size: 14px;
    }
    
    .btn-group {
        flex-direction: column;
    }
    
    .btn-group .btn {
        margin: 5px 0;
        width: 100%;
    }
    
    /* Pagination */
    .pagination {
        flex-wrap: wrap;
    }
    
    /* Modals */
    .modal-content {
        width: 95%;
        max-width: 95%;
        padding: 15px;
    }

    /* Transaction Details */
    .transaction-details {
        flex-direction: column;
    }
    
    .transaction-amount {
        font-size: 22px;
        margin-bottom: 15px;
    }
    
    /* User Management */
    .user-grid {
        grid-template-columns: 1fr;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .dashboard-title {
        font-size: 20px;
    }
    
    .card-title {
        font-size: 18px;
    }
    
    .navbar-container {
        padding: 8px;
    }
    
    .nav-links a {
        font-size: 14px;
    }
    
    .btn {
        padding: 6px 10px;
        font-size: 13px;
    }
    
    .pagination {
        gap: 5px !important;
    }
    
    .pagination a {
        padding: 4px 8px;
        font-size: 13px;
    }
}

/* Table-specific mobile adjustments */
.table-responsive {
    overflow-x: auto;
    width: 100%;
}

/* Utility classes for mobile */
.mobile-hidden {
    display: none !important;
}

@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
    
    .mobile-hidden {
        display: initial !important;
    }
}

/* Fix for search and filter alignment */
@media (max-width: 768px) {
    .d-flex {
        flex-direction: column;
    }
    
    .d-flex > * {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .ml-2 {
        margin-left: 0 !important;
    }
}