/* Common Mobile Responsive Styles for Agent Portal */

/* Base Mobile Styles */
@media (max-width: 767px) {
    body, html {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    section.wrapper,
    #main-content,
    .wrapper {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 10px !important;
    }

    /* Allow table-responsive to break out of overflow-x: hidden containers */
    section.wrapper .table-responsive,
    #main-content .table-responsive,
    .wrapper .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        position: relative;
        z-index: 1;
    }

    /* Panel adjustments */
    .panel {
        margin-bottom: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .panel-body {
        padding: 15px !important;
    }

    .panel-heading {
        padding: 10px 15px !important;
    }

    .panel-heading h3,
    .panel-heading h4 {
        font-size: 16px !important;
        margin: 0 !important;
    }

    /* Table Responsive */
    .table-responsive {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        display: block;
        width: 100%;
        max-width: 100%;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        position: relative;
    }

    /* Ensure table-responsive can scroll even when parent has overflow-x: hidden */
    section.wrapper .table-responsive,
    #main-content .table-responsive,
    .wrapper .table-responsive,
    .panel-body .table-responsive,
    .form-group .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive .table {
        font-size: 11px !important;
        min-width: 600px;
        width: 100%;
        table-layout: auto;
        margin-bottom: 0;
    }

    .table {
        font-size: 11px !important;
        min-width: 600px;
        width: 100%;
        table-layout: auto;
    }

    .table th {
        font-size: 10px !important;
        padding: 8px 4px !important;
        white-space: nowrap;
    }

    .table td {
        padding: 8px 4px !important;
        font-size: 10px !important;
        word-break: break-word;
    }

    /* Buttons */
    .btn {
        font-size: 12px !important;
        padding: 6px 12px !important;
        white-space: nowrap;
    }

    .btn i {
        font-size: 11px !important;
    }

    /* Forms */
    .form-group {
        margin-bottom: 15px;
    }

    .form-control {
        font-size: 14px !important;
        padding: 8px 12px !important;
    }

    /* Row and Column adjustments */
    .row {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }

    .row > [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-bottom: 15px;
    }

    /* Ensure all columns stack properly on mobile */
    [class*="col-lg-"],
    [class*="col-md-"],
    [class*="col-sm-"] {
        width: 100% !important;
        float: none !important;
    }

    /* Labels */
    label {
        font-size: 12px !important;
        margin-bottom: 5px;
    }

    /* Nav tabs */
    .nav-tabs {
        font-size: 12px !important;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs > li {
        float: none;
        display: inline-block;
    }

    .nav-tabs > li > a {
        padding: 8px 12px !important;
        font-size: 11px !important;
        white-space: nowrap;
    }

    /* Filters and Search */
    .filter-section,
    .search-section {
        margin-bottom: 15px;
    }

    .filter-section .form-group,
    .search-section .form-group {
        margin-bottom: 10px;
    }

    /* Action buttons in tables */
    .table .btn {
        padding: 4px 8px !important;
        font-size: 10px !important;
        margin: 2px;
    }

    /* Modals */
    .modal-dialog {
        width: 95% !important;
        margin: 10px auto !important;
    }

    .modal-content {
        padding: 15px;
    }

    /* Pagination */
    .pagination {
        font-size: 11px !important;
    }

    .pagination > li > a,
    .pagination > li > span {
        padding: 6px 10px !important;
    }
}

@media (max-width: 480px) {
    /* Extra small devices */
    .table {
        font-size: 10px !important;
    }

    .table th,
    .table td {
        padding: 6px 3px !important;
        font-size: 9px !important;
    }

    .btn {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }

    .panel-heading h3,
    .panel-heading h4 {
        font-size: 14px !important;
    }

    .form-control {
        font-size: 13px !important;
    }
}