/* Mobile Overflow Fixes */

/* Ensure html and body don't allow horizontal overflow */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Fix container overflow issues */
.container, .container-fluid {
    /* overflow-x: hidden; */
    max-width: 100% !important;
}

/* Make tables responsive on mobile */
@media (max-width: 767.98px) {
    .dashboard-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .dashboard-table > thead > tr > th {
        white-space: normal !important;
        min-width: 100px;
    }
    
    .dashboard-table > tbody > tr > td {
        white-space: normal !important;
        min-width: 100px;
    }
}

/* Fix form elements overflow */
.form-control, .form-select, input, textarea, select {
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Fix images overflow */
img {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
}

/* Fix any elements with fixed widths */
* {
    box-sizing: border-box !important;
}

/* Prevent specific elements from causing overflow */
.row {
    margin-left: -15px;
    margin-right: -15px;
    max-width: calc(100% + 30px);
}

/* Fix Bootstrap row overflow */
@media (max-width: 767.98px) {
    .row {
        margin-left: -10px;
        margin-right: -10px;
        max-width: calc(100% + 20px);
    }
    
    .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-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 {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Fix navigation and header elements */
.navbar, .header, .navigation {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Fix footer elements */
.footer {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Fix any content that might overflow */
.content, .main-content, .page-content {
    overflow-x: hidden;
    max-width: 100%;
}

/* Fix pre-formatted text */
pre, code {
    overflow-x: auto;
    max-width: 100%;
    word-wrap: break-word;
}

/* Fix buttons that might overflow */
.btn {
    word-wrap: break-word;
    max-width: 100%;
}

/* Additional table fixes for mobile */
@media (max-width: 575.98px) {
    table {
        font-size: 12px;
    }
    
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .dashboard-table > thead > tr > th,
    .dashboard-table > tbody > tr > td {
        padding: 10px 5px !important;
        font-size: 12px;
    }
}

/* Fix swiper/carousel overflow */
.swiper-container, .swiper-wrapper {
    overflow: hidden;
}

/* Fix modal overflow on mobile */
@media (max-width: 767.98px) {
    .modal-dialog {
        margin: 10px;
        max-width: calc(100vw - 20px);
    }
}