/* ---------------------------------------------------------------
   Custom mobile responsive tweaks for Land Tag
   Layered on top of the Modernize template defaults.
----------------------------------------------------------------*/

@media (max-width: 767.98px) {

    /* Tighter spacing so cards use the full mobile width */
    .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    .card-body {
        padding: 16px;
    }

    /* Card headers that hold a title + action button: let them wrap */
    .card-header .row > .col {
        gap: 8px;
    }

    .card-header .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 8px;
    }

    .card-header .btn {
        white-space: nowrap;
    }

    /* DataTables top/bottom controls: stack vertically and full width */
    .dataTables_wrapper .row > div[class^="col"],
    .dataTables_wrapper .row > div[class*=" col"] {
        width: 100%;
        text-align: center !important;
        margin-bottom: 8px;
    }

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        text-align: center;
        float: none;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin-left: 0;
        margin-top: 4px;
    }

    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length label {
        width: 100%;
    }

    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
    }

    /* Pagination can overflow on small screens — allow horizontal scroll */
    .dataTables_wrapper .dataTables_paginate .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    /*
     * Keep ONLY the horizontal scroll on the table list and drop the extra
     * vertical scrollbar. Setting overflow-x:auto alone makes the browser
     * compute overflow-y to auto as well, producing a second (vertical)
     * scrollbar on the list. Pinning overflow-y:hidden removes it.
     */
    .table-responsive {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Action buttons inside table rows: avoid cramped layout */
    table .btn {
        padding: 4px 10px;
        font-size: 0.8rem;
    }

    /* Modals: use the full screen width with a small margin */
    .modal-dialog {
        margin: 8px;
    }

    .modal-lg {
        max-width: calc(100% - 16px);
    }

    /* QR reader fits within the mobile modal */
    #qr-reader {
        max-width: 100% !important;
    }
}

/* Very small phones */
@media (max-width: 400px) {
    .card-header .d-flex.justify-content-between > div:first-child {
        font-size: 0.95rem;
    }
}