/* Phone and tablet layer for every admin screen */
html, body { max-width: 100%; overflow-x: hidden; }

/* The demo account list makes the login page taller than the screen */
.login-page { height: auto; min-height: 100vh; padding: 1.5rem 0; }
.app-header .nav-link.text-truncate { max-width: 9rem; }

@media (max-width: 767.98px) {
    .app-content { padding: .5rem !important; }
    .card-body { padding: .85rem; }
    h3 { font-size: 1.25rem; }

    /* Touch friendly controls. 16px text stops phones zooming into inputs. */
    .btn, .btn-sm { min-height: 42px; min-width: 42px; display: inline-flex; align-items: center; justify-content: center; }
    .form-control, .form-select, .form-control-sm, .form-select-sm { min-height: 44px; font-size: 16px; }
    .input-group > .form-control, .input-group > .form-select { min-width: 0; }
    .form-check-input { width: 1.25em; height: 1.25em; }
    .select2-container .select2-selection--single { min-height: 44px; }

    form > .btn[type=submit], .mb-3 > .btn[type=submit] { width: 100%; }

    /* Tables become labelled cards */
    table.stack-table { min-width: 0 !important; border: 0; }
    table.stack-table thead { display: none; }
    table.stack-table, table.stack-table tbody, table.stack-table tfoot, table.stack-table tr, table.stack-table td, table.stack-table tfoot th { display: block; width: 100% !important; }
    table.stack-table tr { border: 1px solid var(--bs-border-color); border-radius: .5rem; margin-bottom: .6rem; padding: .35rem .6rem; background: var(--bs-body-bg); }
    table.stack-table td, table.stack-table tfoot th { display: flex; justify-content: space-between; align-items: center; gap: .75rem; border: 0; padding: .3rem 0; text-align: right !important; overflow-wrap: anywhere; }
    table.stack-table td::before { content: attr(data-label); font-weight: 600; text-align: left; flex: 0 0 42%; color: var(--bs-secondary-color); }
    table.stack-table td[data-label=""]::before, table.stack-table td[colspan]::before { display: none; }
    table.stack-table td[colspan] { justify-content: center; text-align: center !important; }
    table.stack-table td > .form-control, table.stack-table td > .form-select, table.stack-table td > input { flex: 1 1 auto; width: auto !important; min-width: 0; }
    table.stack-table td > form, table.stack-table td > .d-flex { flex-wrap: wrap; justify-content: flex-end; }

    /* DataTables controls stack */
    .dt-container .row, .dataTables_wrapper .row { row-gap: .5rem; }
    .dt-search, .dt-length, .dt-info, .dt-paging { text-align: left !important; }
    .dt-search { display: flex; gap: .5rem; align-items: center; }
    .dt-search input { flex: 1; margin-left: 0 !important; }
    .pagination { flex-wrap: wrap; }

    .modal-dialog { margin: .5rem; }
    .toast-top-right { top: .5rem; right: .5rem; left: .5rem; }
    #toast-container > div { width: auto !important; }
}

@media print {
    .app-sidebar, .app-header, .app-footer { display: none !important; }
}