/* Responsive Design Improvements for Mobile Devices */

/* Tablet and smaller desktop */
@media (max-width: 991.98px) {
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    .btn {
        font-size: 0.875rem !important;
        padding: 0.375rem 0.75rem !important;
    }
    
    .table {
        font-size: 0.875rem !important;
    }
    
    .table-responsive {
        font-size: 0.875rem !important;
    }
    
    .badge {
        font-size: 0.75rem !important;
    }
    
    .form-control, .form-select {
        font-size: 0.875rem !important;
    }
    
    .alert {
        font-size: 0.875rem !important;
    }
    
    .modal-dialog {
        margin: 1rem !important;
    }
    
    .navbar-brand {
        font-size: 1rem !important;
    }
    
    .navbar-nav .nav-link {
        font-size: 0.85rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    .dropdown-menu {
        font-size: 0.875rem !important;
    }
}

/* Mobile devices */
@media (max-width: 575.98px) {
    .container {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    .card-body {
        padding: 0.75rem !important;
    }
    
    .btn {
        font-size: 0.8rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    .h1, .h2, .h3, .h4, .h5, .h6 {
        font-size: 1.25rem !important;
    }
    
    .table {
        font-size: 0.8rem !important;
    }
    
    .table td, .table th {
        padding: 0.5rem 0.25rem !important;
    }
    
    .badge {
        font-size: 0.7rem !important;
    }
    
    .form-control, .form-select {
        font-size: 0.8rem !important;
        padding: 0.375rem 0.5rem !important;
    }
    
    .alert {
        font-size: 0.875rem !important;
        padding: 0.75rem !important;
    }
    
    .modal-dialog {
        margin: 0.5rem !important;
    }
    
    .modal-body {
        padding: 1rem !important;
    }
    
    .modal-footer {
        padding: 0.75rem !important;
    }
    
    .dropdown-menu {
        font-size: 0.8rem !important;
        min-width: 200px !important;
    }
    
    .navbar-brand {
        font-size: 0.9rem !important;
    }
    
    .navbar-nav .nav-link {
        font-size: 0.8rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    .navbar-toggler {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.875rem !important;
    }
}

/* Extra small devices */
@media (max-width: 375px) {
    .container {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }
    
    .card-body {
        padding: 0.5rem !important;
    }
    
    .btn {
        font-size: 0.75rem !important;
        padding: 0.2rem 0.4rem !important;
    }
    
    .table {
        font-size: 0.75rem !important;
    }
    
    .form-control, .form-select {
        font-size: 0.75rem !important;
    }
    
    .h1, .h2, .h3, .h4, .h5, .h6 {
        font-size: 1.1rem !important;
    }
}

/* Mobile-specific layout improvements */
@media (max-width: 767.98px) {
    .d-flex {
        flex-wrap: wrap !important;
    }
    
    .gap-2 {
        gap: 0.5rem !important;
    }
    
    .row {
        margin-left: -5px !important;
        margin-right: -5px !important;
    }
    
    .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
    .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
    .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    /* Improve table responsiveness */
    .table-responsive {
        border: none !important;
    }
    
    .table-responsive .table {
        margin-bottom: 0 !important;
    }
    
    /* Stack buttons vertically on mobile */
    .btn-group {
        flex-direction: column !important;
    }
    
    .btn-group .btn {
        border-radius: 0.375rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .btn-group .btn:last-child {
        margin-bottom: 0 !important;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    .form-control, .form-select {
        min-height: 44px !important;
    }
    
    .nav-link {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .dropdown-item {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
}

/* Specific improvements for signature canvas */
@media (max-width: 991.98px) {
    #admin-signature-pad {
        height: 150px !important;
    }
}

@media (max-width: 575.98px) {
    #admin-signature-pad {
        height: 120px !important;
    }
}

/* Mobile navigation improvements */
@media (max-width: 767.98px) {
    .navbar-collapse {
        background: rgba(33, 37, 41, 0.95) !important;
        border-radius: 8px !important;
        margin-top: 0.5rem !important;
        padding: 0.5rem !important;
    }
    
    .navbar-nav .nav-item {
        margin-bottom: 0.25rem !important;
    }
    
    .navbar-nav .nav-link {
        border-radius: 4px !important;
        margin: 0.125rem 0 !important;
    }
}

/* Mobile card improvements */
@media (max-width: 575.98px) {
    .card {
        margin-bottom: 1rem !important;
    }
    
    .card-header {
        padding: 0.75rem !important;
    }
    
    .card-header h6 {
        font-size: 0.9rem !important;
    }
    
    .card-body {
        padding: 0.75rem !important;
    }
}

/* Mobile form improvements */
@media (max-width: 575.98px) {
    .form-label {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
    }
    
    .form-text {
        font-size: 0.75rem !important;
    }
    
    .input-group {
        flex-wrap: wrap !important;
    }
    
    .input-group > .form-control,
    .input-group > .form-select {
        flex: 1 1 100% !important;
        margin-bottom: 0.25rem !important;
    }
}

/* Mobile table improvements */
@media (max-width: 767.98px) {
    .table-responsive {
        border: none !important;
        border-radius: 0.375rem !important;
        overflow: hidden !important;
    }
    
    .table {
        margin-bottom: 0 !important;
    }
    
    .table thead th {
        position: sticky !important;
        top: 0 !important;
        background: #f8f9fa !important;
        z-index: 1 !important;
    }
}

/* Mobile button improvements */
@media (max-width: 575.98px) {
    .btn-group-vertical .btn {
        margin-bottom: 0.25rem !important;
    }
    
    .btn-group-vertical .btn:last-child {
        margin-bottom: 0 !important;
    }
    
    .d-grid .btn {
        margin-bottom: 0.5rem !important;
    }
    
    .d-grid .btn:last-child {
        margin-bottom: 0 !important;
    }
}

/* Mobile modal improvements */
@media (max-width: 575.98px) {
    .modal-content {
        border-radius: 0.5rem !important;
    }
    
    .modal-header {
        padding: 1rem !important;
    }
    
    .modal-body {
        padding: 1rem !important;
    }
    
    .modal-footer {
        padding: 0.75rem 1rem !important;
    }
}

/* Mobile alert improvements */
@media (max-width: 575.98px) {
    .alert {
        border-radius: 0.375rem !important;
        margin-bottom: 1rem !important;
    }
    
    .alert-dismissible .btn-close {
        padding: 0.75rem !important;
    }
}

/* Mobile badge improvements */
@media (max-width: 575.98px) {
    .badge {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
    }
}

/* Mobile text improvements */
@media (max-width: 575.98px) {
    .text-break {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .small {
        font-size: 0.75rem !important;
    }
    
    .text-muted {
        font-size: 0.8rem !important;
    }
}

/* Mobile spacing improvements */
@media (max-width: 575.98px) {
    .mt-4 {
        margin-top: 1rem !important;
    }
    
    .mb-4 {
        margin-bottom: 1rem !important;
    }
    
    .py-3 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    
    .px-3 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* Dashboard specific improvements */
@media (max-width: 767.98px) {
    /* Remove offset on mobile for centered cards */
    .col-md-6.offset-md-3 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Make all cards full width on mobile */
    .col-md-6 {
        width: 100% !important;
    }
    
    /* Improve card spacing on mobile */
    .card {
        margin-bottom: 1rem !important;
    }
    
    .card-header h5 {
        font-size: 1rem !important;
    }
    
    .card-text {
        font-size: 0.875rem !important;
    }
    
    .btn {
        font-size: 0.875rem !important;
        padding: 0.5rem 1rem !important;
    }
}

@media (max-width: 575.98px) {
    .card-header h5 {
        font-size: 0.9rem !important;
    }
    
    .card-text {
        font-size: 0.8rem !important;
    }
    
    .btn {
        font-size: 0.8rem !important;
        padding: 0.375rem 0.75rem !important;
    }
    
    /* Ensure proper spacing for dashboard cards */
    .row .col-md-6 {
        margin-bottom: 1rem !important;
    }
}