/* Global font size reduction */
body {
    font-size: 0.9rem;
}

.content-header h1 {
    font-size: 1.5rem;
}

.card-title {
    font-size: 1.1rem;
}

/* Fix for Select2 with Input Groups */
.input-group > .select2-container--default {
    width: auto !important;
    flex: 1 1 auto;
}

.input-group > .select2-container--default .select2-selection--single {
    height: calc(2.25rem + 2px); /* Standard Bootstrap 4 input height */
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(2.25rem + 2px);
    right: 3px;
}

.input-group > .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    padding-left: 0;
    color: #495057;
    margin-top: -4px; /* Adjust vertical alignment */
}

/* Modern Pill Filters (Non-Superadmin) */
.filter-scroll-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.filter-pill-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    padding: 0.5rem 2rem 0.5rem 1rem;
    font-size: 0.9rem;
    color: #4a5568;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1em;
    min-width: 140px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.filter-pill-select:hover, .filter-pill-select:focus {
    border-color: #cbd5e0;
    outline: none;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

.filter-pill-btn {
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
    font-size: 0.9rem;
    border: 1px solid #e2e8f0;
    background-color: #f8f9fa;
    color: #4a5568;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}

.filter-pill-btn:hover {
    background-color: #e2e8f0;
    color: #2d3748;
    text-decoration: none;
}

/* Larger Company Modals (nearly full page and taller) */
#createCompanyModal .modal-dialog,
#editCompanyModal .modal-dialog {
    max-width: 95%;
    width: 95%;
    margin: 0.75rem auto;
}

#createCompanyModal .modal-content,
#editCompanyModal .modal-content {
    max-height: calc(100vh - 40px);
}

#createCompanyModal .modal-body,
#editCompanyModal .modal-body {
    max-height: calc(94vh - 120px);
    overflow-y: hidden;
}

/* Make service zone maps inside company modals bigger */
#createCompanyModal #service-map,
#createCompanyModal #service-map-secondary,
#editCompanyModal #edit-service-map,
#editCompanyModal #edit-service-map-secondary {
    height: 500px !important;
}

#createCompanyModal .modal-content-container,
#editCompanyModal .modal-content-container {
    height: 750px;
    overflow-y: auto;
}

#createCompanyModal .modal-footer,
#editCompanyModal .modal-footer {
    justify-content: flex-end;
}

#createCompanyModal .card-tabs .card-header,
#editCompanyModal .card-tabs .card-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
}

#createCompanyModal .card-tabs .card-body,
#editCompanyModal .card-tabs .card-body {
    max-height: calc(94vh - 160px);
    overflow-y: auto;
}

img, .img-fluid {
    max-width: 100%;
    height: auto;
}

.select2-container {
    width: 100% !important;
}

.filter-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: .5rem;
}
.filter-scroll-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.3) transparent;
}
.filter-scroll-container::-webkit-scrollbar {
    height: 6px;
}
.filter-scroll-container::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.3);
    border-radius: 3px;
}
.filter-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

@media (max-width: 991.98px) {
    .card-body .table:not(.dataTable),
    .content .table:not(.dataTable) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

@media (max-width: 575.98px) {
    .input-group {
        flex-wrap: wrap;
    }
    .input-group > .form-control,
    .input-group > .custom-select,
    .input-group > .custom-file,
    .input-group .select2-container {
        flex: 1 0 100%;
        width: 100% !important;
    }
    .input-group .input-group-append,
    .input-group .input-group-prepend {
        width: 100%;
        justify-content: flex-end;
        margin-top: .25rem;
    }
}

.btn-group,
.btn-toolbar {
    flex-wrap: wrap;
}

.breadcrumb,
.pagination,
.nav {
    flex-wrap: wrap;
}

@media (max-width: 575.98px) {
    .card .card-header,
    .card .card-body,
    .card .card-footer {
        padding-left: .75rem;
        padding-right: .75rem;
    }
}

@media (max-width: 575.98px) {
    .modal .modal-dialog:not(.modal-dialog-centered) {
        margin: .75rem;
        max-width: calc(100% - 1.5rem);
    }
}

.overflow-x-auto { overflow-x: auto !important; }
.text-wrap { white-space: normal !important; word-break: break-word !important; }
.text-nowrap-xs { white-space: nowrap; }

/* --------------------------------------------
   Modal Global Responsiveness
   -------------------------------------------- */
.modal .modal-dialog:not(.modal-dialog-centered) {
    margin: 0.75rem;
}
.modal .modal-dialog.modal-dialog-centered {
    margin: .5rem auto;
}
.modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 1.5rem);
}
@media (min-width: 576px) {
    .modal .modal-dialog { max-width: 95vw; }
    .modal .modal-content { max-height: calc(100vh - 3rem); }
}
@media (min-width: 768px) {
    .modal .modal-dialog { max-width: 90vw; }
}
@media (min-width: 992px) {
    .modal .modal-dialog.modal-lg { max-width: 900px; }
}
@media (min-width: 1200px) {
    .modal .modal-dialog.modal-xl { max-width: 1200px; }
}
.modal .modal-header,
.modal .modal-footer {
    flex-shrink: 0;
}
.modal .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.modal .modal-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.3) transparent;
}
.modal .modal-body::-webkit-scrollbar {
    width: 6px;
}
.modal .modal-body::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.3);
    border-radius: 3px;
}
.modal .modal-body::-webkit-scrollbar-track {
    background: transparent;
}

/* Dropdowns inside modals above content */
.modal .select2-container,
.modal .dropdown-menu {
    z-index: 2000;
}

/* DataTables fallback horizontal scroll when responsive extension not active */
@media (max-width: 991.98px) {
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .dataTables_wrapper table.dataTable {
        min-width: 720px;
    }
}

/* Sidebar Scroll */
.main-sidebar .sidebar {
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.main-sidebar .sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.3) transparent;
}
.main-sidebar .sidebar::-webkit-scrollbar {
    width: 6px;
}
.main-sidebar .sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.3);
    border-radius: 3px;
}
.main-sidebar .sidebar::-webkit-scrollbar-track {
    background: transparent;
}