/*
 * Mobile / tablet fixes for the whole admin panel.
 * Loaded last from resources/views/la/layouts/partials/htmlheader.blade.php, so it only
 * adds on top of LaraAdmin.css - nothing existing is removed. Everything below is
 * inside media queries except the small table/DataTable overflow rules.
 */

/* ---- Tables (all DataTables lists scroll sideways inside their box instead of breaking the page) ---- */
.box-body,
.dataTables_wrapper {
    max-width: 100%;
}

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

.dataTables_wrapper table.dataTable {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}

/* Never let big images / selects push the page wider than the screen */
.content img,
.content .select2-container {
    max-width: 100%;
}

/* ---- Tablet and below ---- */
@media (max-width: 991px) {

    /* Page title + buttons: stack instead of overlapping (title was floated against the buttons) */
    .content-header > h1 {
        font-size: 20px;
        word-break: break-word;
    }

    .headerElems {
        float: none !important;
        margin-top: 8px !important;
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px;
    }

    .headerElems .btn,
    .headerElems a {
        margin: 0 !important;
    }
}

/* ---- Phones ---- */
@media (max-width: 767px) {

    .content {
        padding: 10px;
    }

    .content-header {
        padding: 10px 10px 0 10px;
    }

    .content-header > .breadcrumb {
        display: none;
    }

    /* Add / Export / Import buttons: two per row, full tap size */
    .headerElems .btn,
    .headerElems a {
        flex: 1 1 calc(50% - 6px);
        text-align: center;
        padding: 7px 8px !important;
        white-space: nowrap;
    }

    /* Form columns stack and use the full width */
    .form-sample .col-sm-6,
    .form-sample .col-sm-10,
    .form-sample .col-sm-2,
    .form-sample .col-sm-4,
    .form-sample .col-sm-8 {
        width: 100%;
        float: none;
    }

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

    /* Import file box on the list pages (was fixed at 75% wide) */
    .import_file {
        float: none !important;
        width: 100% !important;
        margin-bottom: 8px;
    }

    .import_button {
        margin: 0 !important;
        width: 100%;
    }

    #import_div .col-md-8 {
        width: 100%;
    }

    /* "Total amount" line and similar summary text */
    .out_amt {
        font-size: 15px !important;
    }

    /* DataTables controls: length menu, search box, info and pager each on their own line */
    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate {
        float: none !important;
        text-align: left !important;
        width: 100%;
        white-space: normal;
    }

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

    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        flex-wrap: wrap;
        margin: 6px 0;
    }

    table.dataTable th,
    table.dataTable td {
        white-space: nowrap;
        font-size: 13px;
    }

    /* "Processing..." box was a fixed 250px wide */
    .dataTables_processing {
        width: 200px !important;
        margin-left: -100px !important;
    }

    /* Dashboard cards and panels */
    .stat-card,
    .dash-panel {
        margin-bottom: 12px;
    }

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

    /* Buttons inside forms */
    .form-actions .btn,
    .box-footer .btn {
        margin-bottom: 6px;
    }
}

/* ---- Very small phones ---- */
@media (max-width: 480px) {

    .headerElems .btn,
    .headerElems a {
        flex: 1 1 100%;
    }

    .content-header > h1 {
        font-size: 18px;
    }
}

/* =====================================================================
 * Added later: report filter bars, tab bars, plain tables, long values
 * (page <style> blocks use fixed % widths + floats, e.g. .rec_date 22%, #area 25%, .area_sel 80%)
 * ===================================================================== */

/* ---- Tablet and below: the filter bar becomes a wrapping flex row, two fields per line ---- */
@media (max-width: 991px) {

    .area_box .area_sel {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        width: 100% !important;
        float: none !important;
    }

    .area_box .area_sel .form-control,
    .area_box .area_sel select,
    .area_box .area_sel input {
        display: block !important;
        float: none !important;
        flex: 1 1 calc(50% - 8px);
        width: calc(50% - 8px) !important;
        min-width: 0;
        margin: 0 !important;
        padding: 6px 12px !important;
        height: 38px;
    }

    .area_box .form-group > .import_button {
        display: block;
        width: 100%;
        margin: 10px 0 0 !important;
    }

    .area_box {
        padding: 10px 12px !important;
    }
}

/* ---- Phones: one field per line ---- */
@media (max-width: 575px) {

    .area_box .area_sel .form-control,
    .area_box .area_sel select,
    .area_box .area_sel input {
        flex-basis: 100%;
        width: 100% !important;
    }
}

/* ---- Phones: everything else that was floated / fixed width ---- */
@media (max-width: 767px) {

    /* "Pay mode" block on the add / edit forms (was 50% wide, floated) */
    .pay_mode {
        float: none !important;
        width: 100% !important;
    }

    /* Tab bars (member add / edit): scroll sideways instead of wrapping into a tall stack */
    ul.nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    ul.nav-tabs > li {
        float: none;
        white-space: nowrap;
    }

    /* Plain (non DataTables) tables inside boxes scroll sideways instead of widening the page */
    .box-body,
    .box-body .table-responsive {
        overflow-x: auto;
    }

    /* Long values (names, emails, urls) must not push the page wider than the screen */
    .content h1,
    .content h3,
    .content h4,
    .content p,
    .alert,
    .callout {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* Select2 drop-downs stay inside the screen */
    .select2-dropdown {
        max-width: calc(100vw - 20px);
    }

    /* Total amount / tender totals and other centred summary lines */
    .out_amt {
        padding: 0 6px;
    }
}

/* ---- Login / register pages on phones and small tablets ----
 * The background photo is 68vw wide and the white box is 450px wide, both absolutely positioned,
 * so on a phone a white strip showed to the right of the photo. Photo = full screen, box = full width. */
@media (max-width: 768px) {

    .login-page .bg-image,
    .register-page .bg-image {
        width: 100% !important;
        height: 100% !important;
        min-height: 100vh;
        top: 0;
        left: 0;
    }

    .login-page .login-box,
    .register-page .login-box,
    .login-page .register-box,
    .register-page .register-box {
        width: 100% !important;
        max-width: 100%;
        left: 0;
        right: 0;
        background: transparent;
    }
}