/* Shared list layout. Desktop keeps native table semantics and presentation;
   mobile keeps every cell's mixed content together opposite its label. */
:is(.bajtica-admin, .p-body, .g-body) .mobile-cell-value {
    display: contents;
}

@media (max-width: 767.98px) {
    :is(.bajtica-admin, .p-body, .g-body) .table.table-mobile,
    :is(.bajtica-admin, .p-body, .g-body) .table.table-mobile tbody {
        display: block;
        width: 100%;
    }

    :is(.bajtica-admin, .p-body, .g-body) .table.table-mobile tbody td {
        display: grid;
        grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
        align-items: start;
        gap: 12px;
        width: 100%;
        text-align: right;
        white-space: normal !important;
    }

    :is(.bajtica-admin, .p-body, .g-body) .table.table-mobile tbody td::before {
        min-width: 0;
        text-align: left;
    }

    :is(.bajtica-admin, .p-body, .g-body) .table.table-mobile tbody td > .mobile-cell-value {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: none;
        overflow-wrap: anywhere;
    }

    :is(.bajtica-admin, .p-body, .g-body) .table.table-mobile tbody td[data-label=""] {
        grid-template-columns: minmax(0, 1fr);
    }

    :is(.bajtica-admin, .p-body, .g-body) .table.table-mobile .mobile-cell-value > .d-flex {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    :is(.bajtica-admin, .p-body, .g-body) .table.table-mobile .mobile-cell-value :is(.badge, .btn) {
        max-width: 100%;
        white-space: normal;
    }

    :is(.bajtica-admin, .p-body, .g-body) .table.table-mobile .mobile-cell-value :is(.dropdown, .btn-group) {
        display: inline-flex;
    }

    :is(.bajtica-admin, .p-body, .g-body) .table.table-mobile .table-mobile-empty-row {
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    :is(.bajtica-admin, .p-body, .g-body) .table.table-mobile .table-mobile-empty-row td {
        display: block;
        text-align: center !important;
    }

    :is(.bajtica-admin, .p-body, .g-body) .pagination {
        flex-wrap: wrap;
        gap: 4px;
    }

    :is(.p-body, .g-body) :is(.form-control, .form-select, .select2-selection, .select2-search__field) {
        font-size: 16px !important;
    }
}