/* Global Styles */
* {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .container {
        width: 100%;
        padding: 0 15px;
    }
    
    /* Make tables responsive */
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Adjust font sizes for mobile */
    body {
        font-size: 14px;
    }
    
    h1 {
        font-size: 24px;
    }
    
    h2 {
        font-size: 20px;
    }
    
    h3 {
        font-size: 18px;
    }
    
    /* Make buttons full width on mobile */
    .btn {
        width: 100%;
        margin-bottom: 10px;
    }
    
    /* Adjust form elements for mobile */
    input, select, textarea {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* Additional responsive utilities */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Ensure proper spacing on mobile */
.row {
    margin-left: -15px;
    margin-right: -15px;
}

/* Make sure modals are responsive */
.modal-dialog {
    margin: 10px;
    max-width: 100%;
}

@media (min-width: 576px) {
    .modal-dialog {
        margin: 1.75rem auto;
        max-width: 500px;
    }
}