/*
 * Responsive compatibility layer.
 * This file only adjusts presentation; it does not alter forms, data, or behaviour.
 */

html,
body {
    max-width: 100%;
}

.main-content,
.container,
.container-fluid,
.card,
.card-body {
    min-width: 0;
}

.table-responsive {
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

.dataTables_wrapper {
    max-width: 100%;
}

.select2-container {
    max-width: 100%;
}

.apexcharts-canvas,
.apexcharts-svg {
    max-width: 100% !important;
}

.pagination {
    flex-wrap: wrap;
    gap: 0.2rem;
}

.sidenav-header {
    position: relative;
}

.sidenav-close-btn {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: #525f7f;
    background: #fff;
    border: 1px solid #dce2e9;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(50, 50, 93, 0.12);
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 2;
}

.sidenav-close-btn:hover,
.sidenav-close-btn:focus {
    color: #172b4d;
    background: #f6f9fc;
    outline: none;
}

/* Argon 1.2 changes this body class on desktop but does not hide the panel. */
@media (min-width: 1200px) {
    .sidenav {
        transition: transform 0.2s ease;
    }

    .g-sidenav-hidden .sidenav {
        transform: translateX(-250px);
    }

    .g-sidenav-hidden .sidenav.fixed-left + .main-content {
        margin-left: 0 !important;
    }

    .g-sidenav-pinned .sidenav {
        transform: translateX(0);
    }
}

@media (max-width: 767.98px) {
    .main-content .container-fluid {
        padding-right: 12px;
        padding-left: 12px;
    }

    .main-content .header {
        padding-bottom: 4.5rem !important;
    }

    .main-content .header h1,
    .main-content .header h2 {
        font-size: 1.55rem;
        line-height: 1.25;
    }

    .card-body,
    .card-header {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .card-header .d-flex,
    .card-body .d-flex {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .card-header .d-flex > .btn,
    .card-header .d-flex > a.btn {
        margin-left: 0 !important;
    }

    /* Legacy tables were created before Bootstrap responsive wrappers were used. */
    table.table:not(.dataTable) {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dataTables_wrapper > .row {
        min-width: 0;
        margin-right: 0;
        margin-left: 0;
    }

    .dataTables_wrapper > .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        margin-bottom: 0.65rem;
        padding-right: 0;
        padding-left: 0;
        text-align: left !important;
    }

    .dataTables_filter,
    .dataTables_length,
    .dataTables_info,
    .dataTables_paginate {
        float: none !important;
        width: 100%;
        text-align: left !important;
    }

    .dataTables_filter label,
    .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .dataTables_paginate .pagination,
    nav .pagination {
        justify-content: center !important;
    }

    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        width: auto;
        max-width: calc(100% - 1rem);
        margin: 0.5rem auto;
    }

    .modal-body,
    .modal-header,
    .modal-footer {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .modal-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .modal-footer .btn {
        margin: 0;
    }

    .form-control,
    .custom-select,
    .select2-container {
        width: 100% !important;
    }

    input[type="file"] {
        max-width: 100%;
    }

    .btn-group,
    .section-actions {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .leaflet-container,
    #mapid,
    #map {
        max-width: 100%;
    }
}

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

    h2 {
        font-size: 1.35rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    .btn {
        white-space: normal;
    }
}