/* ============================================================
   IWS Mobile Responsiveness Overrides
   Applied globally via config/settings.php KT_THEME_ASSETS
   All rules scoped to max-width: 767.98px unless noted
   ============================================================ */

@media (max-width: 767.98px) {

    /* ----------------------------------------------------------
       Card Header Stacking
       Forces toolbar and title to stack vertically on mobile
    ---------------------------------------------------------- */
    .card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    .card-header .card-title,
    .card-header .card-toolbar {
        width: 100%;
    }

    .card-toolbar {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* ----------------------------------------------------------
       Fixed Width Overrides
       w-250px, w-200px, w-150px search inputs and filter selects
       become full-width on mobile (affects all index pages)
    ---------------------------------------------------------- */
    .form-control.w-250px,
    .form-control.w-200px,
    .form-control.w-175px,
    .form-control.w-150px,
    .form-select.w-250px,
    .form-select.w-200px,
    .form-select.w-180px,
    .form-select.w-175px,
    .form-select.w-150px,
    input.w-250px,
    input.w-200px,
    input.w-150px {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* ----------------------------------------------------------
       Drawer Fullscreen
       All drawers (11 total) become full-width on mobile
       Overrides data-kt-drawer-width="{default:'300px', 'md': '500px'}"
    ---------------------------------------------------------- */
    .drawer.drawer-end {
        width: 100vw !important;
    }

    /* Drawer inner column forms → single column
       Without this, multi-column form inside 300px drawer = unusable field widths
    */
    .drawer .col-4,
    .drawer .col-5,
    .drawer .col-6,
    .drawer .col-7 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* ----------------------------------------------------------
       Modal Constraints
       Prevents modals with fixed mw-* classes from overflowing
    ---------------------------------------------------------- */
    .modal-dialog[class*="mw-"] {
        max-width: calc(100vw - 1rem) !important;
        margin: 0.5rem auto !important;
    }

    /* ----------------------------------------------------------
       Touch Targets
       Apple HIG: minimum 44px touch target
    ---------------------------------------------------------- */
    .btn:not(.btn-icon) {
        min-height: 44px;
    }

    .btn-icon {
        min-width: 36px;
        min-height: 36px;
    }

    /* ----------------------------------------------------------
       Card Body Padding
       Reduce padding on mobile to preserve horizontal space
    ---------------------------------------------------------- */
    .card-body {
        padding: 1rem !important;
    }

    .card-header {
        padding: 0.75rem 1rem !important;
    }

    /* ----------------------------------------------------------
       Select2 Z-Index
       Ensures dropdowns render above drawers and modals on mobile
    ---------------------------------------------------------- */
    .select2-container--open {
        z-index: 99999 !important;
    }

    /* Select2 inside drawers and modals */
    .modal .select2-container,
    .drawer .select2-container {
        width: 100% !important;
    }

    /* ----------------------------------------------------------
       SweetAlert Mobile
    ---------------------------------------------------------- */
    .swal-custom-popup {
        width: 95vw !important;
        max-width: 95vw !important;
    }

    /* ----------------------------------------------------------
       Capacity Details Popup
    ---------------------------------------------------------- */
    .capacity-details-popup {
        width: 95vw !important;
        right: 2.5vw !important;
    }

    /* ----------------------------------------------------------
       iOS Zoom Prevention
       Safari auto-zooms on focus when font-size < 16px
    ---------------------------------------------------------- */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* ----------------------------------------------------------
       DataTables Responsive
    ---------------------------------------------------------- */
    /* Pagination buttons */
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.8rem !important;
    }

    /* Child row expand icon centering */
    table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* dataTables_length (show X entries) */
    .dataTables_wrapper .dataTables_length {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* dataTables_filter */
    .dataTables_wrapper .dataTables_filter {
        width: 100%;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
        display: block !important;
    }

    /* ----------------------------------------------------------
       Timeline
    ---------------------------------------------------------- */
    .timeline .timeline-content {
        margin-bottom: 1rem !important;
    }

    /* ----------------------------------------------------------
       Service Record — Radio Buttons
    ---------------------------------------------------------- */
    #kt_sr_create_form .d-flex.gap-5 {
        flex-wrap: wrap;
        gap: 0.75rem !important;
    }

    /* ----------------------------------------------------------
       Modal Tab Navigation Scrollable
    ---------------------------------------------------------- */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs .nav-item {
        flex-shrink: 0;
    }

    /* ----------------------------------------------------------
       Dispatch Map Height
    ---------------------------------------------------------- */
    #kt_dispatch_map {
        height: 300px !important;
    }

    /* ----------------------------------------------------------
       Dashboard Quick Action Buttons
    ---------------------------------------------------------- */
    .card-body .d-flex.flex-wrap > a.btn,
    .card-body > a.btn {
        flex: 1 1 calc(50% - 0.75rem);
    }

    /* ----------------------------------------------------------
       Notification Drawer
    ---------------------------------------------------------- */
    #kt_drawer_chat {
        width: 100vw !important;
    }

    /* ----------------------------------------------------------
       Body Overflow Prevention
       Prevents any horizontal scrollbar on mobile
    ---------------------------------------------------------- */
    body {
        overflow-x: hidden !important;
    }

    /* ----------------------------------------------------------
       KPI/Bonus Card Toolbar — Date Filters Stack
    ---------------------------------------------------------- */
    .card-toolbar input[type="date"] {
        width: 100% !important;
    }

    /* ----------------------------------------------------------
       Dispatch Card Toolbar Wrap
    ---------------------------------------------------------- */
    .card-toolbar .form-check {
        width: 100%;
    }
}