/* "Reservatórios vinculados" (show da OS): no mobile a tabela vira uma
   lista de cards empilhados (thead oculto, cada <tr> vira um card e cada
   <td> uma linha rotulada via data-label). O DOM da tabela é preservado
   porque o JS da tela depende dele (#reservoirsTable tbody tr,
   closest('tr'), .reservoir-status-cell). */
@media (max-width: 576px) {
    .linked-water-tanks {
        max-width: 100%;
        overflow-x: hidden;
    }

    .linked-water-tanks .table-responsive {
        overflow-x: visible;
    }

    #reservoirsTable {
        margin-bottom: 0;
        border: 0;
    }

    #reservoirsTable thead {
        display: none;
    }

    #reservoirsTable tbody {
        display: block;
    }

    #reservoirsTable tbody tr {
        display: block;
        border: 1px solid rgba(0, 0, 0, 0.125);
        border-radius: 0.5rem;
        padding: 0.25rem 0.75rem;
        margin-bottom: 0.75rem;
    }

    #reservoirsTable tbody tr:last-child {
        margin-bottom: 0;
    }

    #reservoirsTable tbody td {
        display: block;
        width: 100%;
        max-width: 100%;
        border: 0;
        padding: 0.5rem 0;
        overflow-wrap: anywhere;
    }

    #reservoirsTable tbody td + td {
        border-top: 1px solid rgba(0, 0, 0, 0.075);
    }

    #reservoirsTable tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: #6c757d;
        margin-bottom: 0.125rem;
    }

    #reservoirsTable .badge {
        white-space: normal;
        display: inline-block;
        text-align: left;
    }

    /* Botões de ação (PT/APR, Dados do Serviço, Assinar, Salvar): empilham
       ocupando a largura do card, com área de toque confortável. */
    #reservoirsTable td .d-flex {
        flex-wrap: wrap;
        row-gap: 0.375rem;
    }

    #reservoirsTable td .d-flex .btn {
        flex: 1 1 auto;
        min-height: 2.375rem;
    }

    /* Checklist PT/APR dentro do modal: no mobile cada linha da tabela
       empilha (nome do item em cima; "Consta" + Observação embaixo), sem
       nenhum scroll horizontal. O DOM da tabela é preservado porque o JS
       usa .pt-apr-item-checkbox e os names dos inputs. */
    [id^="modalPtApr-"] .card-body.p-0 {
        overflow-x: hidden;
    }

    [id^="modalPtApr-"] table,
    [id^="modalPtApr-"] tbody {
        display: block;
        width: 100%;
    }

    [id^="modalPtApr-"] thead {
        display: none;
    }

    [id^="modalPtApr-"] tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.375rem 0.75rem;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.075);
    }

    [id^="modalPtApr-"] tbody tr:last-child {
        border-bottom: 0;
    }

    [id^="modalPtApr-"] tbody td {
        display: block;
        border: 0;
        padding: 0;
    }

    /* Nome do item ocupa a linha inteira e quebra sem estourar. */
    [id^="modalPtApr-"] tbody td:first-child {
        flex: 1 1 100%;
        overflow-wrap: anywhere;
    }

    /* "Consta" + checkbox lado a lado, com área de toque confortável. */
    [id^="modalPtApr-"] tbody td:nth-child(2) {
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    [id^="modalPtApr-"] tbody td:nth-child(2)::before {
        content: "Consta";
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: #6c757d;
    }

    [id^="modalPtApr-"] tbody td:nth-child(2) .form-check-input {
        width: 1.375rem;
        height: 1.375rem;
        margin: 0;
        flex-shrink: 0;
    }

    /* Observação ocupa o espaço restante da linha do checkbox. */
    [id^="modalPtApr-"] tbody td:nth-child(3) {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Checklist PT/APR (tablet/desktop): a tabela tem larguras inline fixas
   (80px/200px) e pode vazar do card em larguras intermediárias; confina o
   scroll ao card. No mobile (≤576px) o empilhamento acima elimina o scroll. */
[id^="modalPtApr-"] .card-body.p-0 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Nomes de item em caixa alta sem espaços (ex.: GASES/VAPORES/POEIRAS/NÉVOAS)
   podem quebrar em vez de alargar a coluna e forçar scroll. */
[id^="modalPtApr-"] td:first-child {
    overflow-wrap: anywhere;
}

/* Ajustes globais de responsividade para modais no admin (mobile). */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 0.5rem auto;
        display: flex;
        align-items: center;
        min-height: calc(100% - 1rem);
        max-width: calc(100% - 1rem);
    }

    .modal-content {
        width: 100%;
    }

    .modal-body {
        max-height: 75vh;
        overflow-y: auto;
    }

    body.modal-open {
        overflow-x: hidden;
    }
}