/* tab-processos.css - Estilos responsivos para #tableProcessos */

/* =========================================== */
/* CONFIGURAÇÕES GERAIS                        */
/* =========================================== */

#tableProcessos {
    font-size: 0.95rem;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 0;
}

#tableProcessos thead th {
    white-space: nowrap;
    vertical-align: middle;
}

#tableProcessos tbody td {
    padding: 0.75rem;
    vertical-align: middle;
}

/* Larguras mínimas gerais */
#tableProcessos .column1 { min-width: 160px; }
#tableProcessos .column5 { min-width: 130px; }
#tableProcessos .column6 { min-width: 90px; text-align: center; }
#tableProcessos .column7 { min-width: 120px; }

/* Desktop: colunas proporcionais, primeira à esquerda, última à direita */
@media (min-width: 992px) {
    #tableProcessos {
        table-layout: fixed;
        width: 100%;
    }

    #tableProcessos thead th:nth-child(1),
    #tableProcessos tbody td:nth-child(1) { width: 22%; } /* Nº Processo */

    #tableProcessos thead th:nth-child(2),
    #tableProcessos tbody td:nth-child(2) { width: 18%; } /* Finalidade */

    #tableProcessos thead th:nth-child(3),
    #tableProcessos tbody td:nth-child(3) { width: 15%; } /* Data Publicação */

    #tableProcessos thead th:nth-child(4),
    #tableProcessos tbody td:nth-child(4) { width: 15%; } /* Fim Vigência */

    #tableProcessos thead th:nth-child(5),
    #tableProcessos tbody td:nth-child(5) { width: 12%; } /* Status */

    #tableProcessos thead th:nth-child(6),
    #tableProcessos tbody td:nth-child(6) { width: 18%; } /* Resumo */

    #tableProcessos thead th,
    #tableProcessos tbody td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        vertical-align: middle;
    }
}

/* =========================================== */
/* MOBILE (<768px) — estilo card               */
/* =========================================== */

@media (max-width: 767.98px) {

    /* Ocultar cabeçalho */
    #tableProcessos thead {
        display: none;
    }

    /* Transformar em blocos */
    #tableProcessos,
    #tableProcessos tbody,
    #tableProcessos tr,
    #tableProcessos td {
        display: block;
        width: 100%;
    }

    /* Cada linha vira um card */
    #tableProcessos tr {
        margin-bottom: 0;
        border: none;
        border-bottom: 1px solid #dee2e6;
        border-radius: 0;
        padding: 1rem;
        box-shadow: none;
        position: relative;
    }

    #tableProcessos tr:last-child {
        border-bottom: none;
    }

    /* Células */
    #tableProcessos td {
        border: none;
        padding: 0.5rem 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
        gap: 8px;
    }

    #tableProcessos td:last-child {
        border-bottom: none;
        padding-top: 0.75rem;
    }

    /* Rótulo à esquerda */
    #tableProcessos td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #495057;
        flex-shrink: 0;
        text-align: left;
    }

    /* Valor à direita — funciona para texto puro e elementos filhos */
    #tableProcessos td {
        justify-content: space-between;
    }

    #tableProcessos td > * {
        margin-left: auto;
        text-align: right;
    }

    /* Coluna Resumo: rótulo à esquerda, botão à direita */
    #tableProcessos td[data-label="Resumo"] {
        justify-content: space-between;
    }

    #tableProcessos td[data-label="Resumo"] .btn {
        margin-left: auto;
    }

    /* Remover min/max-width fixo no mobile */
    #tableProcessos .column1,
    #tableProcessos .column5,
    #tableProcessos .column6,
    #tableProcessos .column7 {
        max-width: none;
        min-width: 0;
        text-align: left;
    }

    /* Scroll horizontal desativado no mobile (layout card não precisa) */
    .card-body.table-responsive {
        overflow-x: visible;
    }
}

/* =========================================== */
/* TELAS MUITO PEQUENAS (<576px)               */
/* =========================================== */

@media (max-width: 575.98px) {
    #tableProcessos tr {
        padding: 0.75rem;
    }
}

/* =========================================== */
/* TABLET (768px – 991px)                      */
/* =========================================== */

@media (min-width: 768px) and (max-width: 991.98px) {
    #tableProcessos th,
    #tableProcessos td {
        font-size: 0.875rem;
        padding: 0.5rem 0.6rem;
    }

    #tableProcessos .column1 { min-width: 130px; }
    #tableProcessos .column5 { min-width: 110px; }
    #tableProcessos .column6 { min-width: 80px;  }
    #tableProcessos .column7 { min-width: 100px; }
}