/* Mobile Responsive Improvements */

/* General Mobile Improvements */
@media (max-width: 767.98px) {
    /* Increase touch targets for better mobile usability */
    .btn, .form-control, .form-select, .nav-link {
        padding: 0.5rem 0.75rem;
        min-height: 44px;
    }
    
    /* Improve form elements spacing */
    .form-group, .mb-3 {
        margin-bottom: 1.25rem !important;
    }
    
    /* Adjust container padding */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Improve card readability */
    .card-body {
        padding: 1.25rem;
    }
    
    /* Fix table overflow issues */
    .table-responsive {
        margin-bottom: 1rem;
    }
    
    /* Improve modal usability */
    .modal-dialog {
        margin: 0.5rem;
    }
    
    .modal-header {
        padding: 0.75rem 1rem;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .modal-footer {
        padding: 0.75rem 1rem;
    }
}

/* Ticket Listing Page Improvements */
@media (max-width: 767.98px) {
    /* Improve search bar layout */
    .input-group {
        flex-wrap: wrap;
    }
    
    .input-group > .form-control {
        border-radius: 0.25rem !important;
        margin-bottom: 0.5rem;
    }
    
    .input-group > .btn {
        border-radius: 0.25rem !important;
        margin-right: 0.25rem;
        margin-bottom: 0.5rem;
    }
    
    /* Improve filter display */
    #advancedFilters .card-body {
        padding: 0.75rem;
    }
    
    /* Ticket table improvements */
    .ticket-table th,
    .ticket-table td {
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
    }
    
    /* Make ticket rows more compact */
    .ticket-row {
        display: flex;
        flex-direction: column;
        padding: 0.75rem;
        border-bottom: 1px solid #dee2e6;
    }
    
    .ticket-row-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5rem;
    }
    
    .ticket-row-body {
        margin-bottom: 0.5rem;
    }
    
    .ticket-row-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

/* Ticket Detail Page Improvements */
@media (max-width: 767.98px) {
    /* Improve ticket header */
    .card-header {
        flex-direction: column;
        align-items: flex-start !important;
    }
    
    .card-header h5 {
        margin-bottom: 0.5rem;
    }
    
    .card-header .btn-group,
    .card-header .d-flex {
        width: 100%;
        justify-content: space-between;
        margin-top: 0.5rem;
    }
    
    /* Improve ticket details layout */
    .ticket-details-row {
        flex-direction: column;
    }
    
    .ticket-details-col {
        width: 100%;
        margin-bottom: 1rem;
    }
    
    /* Improve comment section */
    .comment-timeline:before {
        left: 18px;
    }
    
    .comment-card {
        margin-left: 2.5rem;
    }
    
    .comment-avatar {
        width: 36px;
        height: 36px;
    }
    
    /* Improve attachment display */
    .attachment-card {
        flex-direction: column;
    }
    
    .attachment-preview {
        width: 100%;
        height: auto;
        max-height: 150px;
        object-fit: cover;
        margin-bottom: 0.5rem;
    }
    
    /* Comment form improvements */
    .comment-form textarea {
        min-height: 100px;
    }
    
    .comment-form-actions {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .comment-form-actions .form-check {
        margin-bottom: 0.5rem;
    }
}

/* Dashboard Improvements */
@media (max-width: 767.98px) {
    /* Make dashboard cards full width */
    .dashboard-card {
        width: 100%;
        margin-bottom: 1rem;
    }
    
    /* Adjust dashboard stats */
    .dashboard-stats {
        flex-direction: column;
    }
    
    .stat-card {
        width: 100%;
        margin-bottom: 1rem;
    }
    
    /* Improve recent activity widget */
    #ticket-activity-content {
        max-height: 400px;
    }
}

/* Navigation Improvements */
@media (max-width: 767.98px) {
    /* Improve navbar */
    .navbar-brand img {
        max-height: 30px;
    }
    
    .navbar-toggler {
        padding: 0.5rem;
    }
    
    /* Improve dropdown menus */
    .dropdown-menu {
        width: 100%;
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .dropdown-item {
        padding: 0.75rem 1rem;
    }
}

/* Utility Classes for Mobile */
@media (max-width: 767.98px) {
    .mobile-full-width {
        width: 100% !important;
    }
    
    .mobile-text-center {
        text-align: center !important;
    }
    
    .mobile-mt-0 {
        margin-top: 0 !important;
    }
    
    .mobile-mb-0 {
        margin-bottom: 0 !important;
    }
    
    .mobile-p-2 {
        padding: 0.5rem !important;
    }
    
    .mobile-hidden {
        display: none !important;
    }
    
    .mobile-visible {
        display: block !important;
    }
    
    .mobile-flex-column {
        flex-direction: column !important;
    }
}