/* Phones. Decisions of ours that only apply on a small screen. */

/* An installed app runs under the status bar and the home bar, so it steps clear of them. Only when
   installed: a browser already keeps a page out of those areas. */
@media (display-mode: standalone) {
    .main-header { padding-top: env(safe-area-inset-top); height: calc(64px + env(safe-area-inset-top)); }
    .main-content { margin-top: calc(80px + env(safe-area-inset-top)) !important; padding-bottom: env(safe-area-inset-bottom); }
    .app-sidebar { padding-top: env(safe-area-inset-top); }
    .login-shell { padding-top: calc(1.5rem + env(safe-area-inset-top)); padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 991.98px) {
    /* A browser's own full screen button means nothing on a phone. */
    .app-fullscreen-item { display: none !important; }
    .app-user-name { display: none; }
    #back-to-top { display: none !important; }
}

@media (max-width: 767.98px) {
    /* iOS zooms the whole page into any field smaller than 16px. */
    input.form-control, select.form-select, textarea.form-control,
    .dataTables_filter input { font-size: 16px; }

    .main-container.container-fluid { padding-inline: 12px; }
    h2 { font-size: 1.35rem; }
    .stat-card .stat-value { font-size: 1.15rem; }
    .stat-card .card-body { padding: .85rem; }
    .card-body { padding: 1rem; }
    /* Text sits in the middle of a button, whichever element the button is. */
    .btn:not(.btn-sm):not(.d-none) { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; }
    .btn-sm:not(.d-none) { display: inline-flex; align-items: center; justify-content: center; }

    /* A browsing table becomes a stack of cards, each cell labelled from its column heading.
       app.js writes the labels. */
    table[data-datatable], table[data-cards] { display: block; width: 100% !important; border: 0; }
    table[data-datatable] thead, table[data-cards] thead { display: none; }
    table[data-datatable] tbody, table[data-cards] tbody { display: block; }
    table[data-datatable] tr, table[data-cards] tr {
        display: block;
        margin-bottom: .6rem;
        padding: .35rem .75rem;
        border: 1px solid #e6e9f4;
        border-radius: 10px;
        background: #fff;
    }
    table[data-cards] tbody tr:last-child { margin-bottom: 0; }
    table[data-datatable] td, table[data-cards] td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        padding: .3rem 0;
        border: 0;
        text-align: end;
        overflow-wrap: anywhere;
        white-space: normal;
    }
    table[data-datatable] td::before, table[data-cards] td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: #7987a1;
        font-size: .8rem;
        font-weight: 400;
        text-align: start;
    }
    table[data-datatable] td.cell-empty, table[data-cards] td.cell-empty { display: none; }
    /* A column with no heading holds a row's buttons or badge. */
    table[data-datatable] td:not([data-label]), table[data-cards] td:not([data-label]),
    table[data-datatable] td[data-label=""], table[data-cards] td[data-label=""] { justify-content: flex-end; }
    table[data-datatable] td[colspan] { justify-content: center; }

    /* A card's heading, and what sits in its top corner: buttons or a status. */
    table[data-datatable] tr, table[data-cards] tr { position: relative; }
    td.cell-title { justify-content: flex-start !important; align-items: center; flex-wrap: wrap; gap: 0 .35rem !important; padding-inline-end: 5.5rem !important; font-size: .95rem; font-weight: 600; text-align: start !important; }
    td.cell-title::before { display: none; }
    td.cell-corner { position: absolute !important; top: .35rem; inset-inline-end: .6rem; padding: 0 !important; gap: .25rem !important; align-items: center !important; }
    td.cell-corner::before { display: none; }
    td.cell-corner form { display: inline-block; margin: 0; }
    td.cell-actions { flex-wrap: wrap; justify-content: flex-start !important; gap: .35rem !important; padding-top: .5rem !important; }
    td.cell-actions:not(:has(button)) { display: none !important; }
    td.cell-actions::before { display: none; }
    td.cell-actions form { margin: 0; }

    /* Search takes the whole width; the page-size menu is not worth the room here. */
    .dataTables_length { display: none; }
    .dataTables_filter, .dataTables_filter label { display: block; width: 100%; margin-bottom: .6rem; }
    .dataTables_filter input { display: block; width: 100% !important; margin: 0 !important; }
    .dataTables_wrapper > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }

    /* Cards need a margin where the table used to run to the card's edge. */
    .card-body.p-0 table[data-cards] { padding: .75rem; }
    .dataTables_wrapper .dataTables_info { text-align: center; padding-top: .5rem; }
    .dataTables_wrapper .pagination { justify-content: center; flex-wrap: wrap; }
    .dataTables_wrapper .table-responsive { overflow: visible; }

    /* Dialogs get the room they need instead of floating in a margin. */
    .modal-dialog { margin: .5rem; }

    .card-header-tabs .nav-link { white-space: nowrap; padding-inline: .45rem; font-size: .85rem; }
    .card-header-tabs { flex-wrap: nowrap; overflow-x: auto; }
    .table-compact-phone th, .table-compact-phone td { padding: .5rem .35rem; font-size: .8rem; }
}