/*
 * CAMADA 6 — COMPONENTES · TABELAS E LISTAS
 *
 * Conteúdo permitido: o hover de tabela do tema e as listagens que usam
 * <table> como layout — Meus Projetos, Meus Índices, Meus Modelos e a tabela
 * de ferramentas complementares. É aqui que essas listagens viram cartões em
 * mobile.
 *
 * Tabelas com estilo próprio de um módulo (ex.: as tabelas ESG, que usam os
 * tokens --color-esg-table-hover-*) ficam no arquivo do módulo.
 */


/* ==========================================================================
   1. HOVER DE TABELA
   ========================================================================== */

.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    color: var(--color-table-hover-text);
    background-color: var(--color-table-hover-surface);
}

/* Mantém links e ações legíveis sobre o hover do tema Mafmine. */
@scope (:root[data-theme="mafmine"]) {

.table-hover > tbody > tr:hover :is(.project-title, small, a:not(.btn)) {
    color: inherit;
}

.table-hover > tbody > tr:hover .btn.btn-white,
.table-hover > tbody > tr:hover .btn.btn-white:is(:hover, :focus, :active) {
    border-color: var(--color-border);
    color: var(--color-primary);
    background-color: var(--color-white);
}

}


/* ==========================================================================
   2. LINHAS CLICÁVEIS
   ========================================================================== */

.tools-table {
    caret-color: var(--color-transparent);
}

.tr-link {
    cursor: pointer;
}


/* ==========================================================================
   3. COLUNA DE STATUS
   ========================================================================== */

.project-status > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
}

.project-status > div > span {
    margin-right: 10px;
}


/* ==========================================================================
   4. MOBILE — cada linha vira um cartão
   ========================================================================== */

@media (max-width: 991px) {

    /* -- 4.1 Lista de projetos --------------------------------------------- */

    /*
     * <tr>/<td> continuam no DOM (só mudam de display), então o
     * button.parents('tr').fadeOut() de js/page.meusProjetos.js segue
     * funcionando. A ordem do DOM já é a desejada: #id -> título -> data -> ações.
     */
    .project-list > .table > tbody > tr {
        display: block;
        padding: 14px 12px;
        border-bottom: var(--border-thin);
    }

    .project-list > .table > tbody > tr > td {
        display: block;
        width: auto;
        padding: 0 0 8px;
        border: var(--border-none);
        text-align: left;
    }

    .project-list .project-status {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .project-list .project-title {
        font-weight: 700;
        word-break: break-word;
    }

    .project-list .project-title small {
        display: block;
        margin-top: 4px;
        color: var(--color-muted);
        font-weight: 400;
    }

    .project-list .project-actions {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 0;
        gap: 8px;
    }

    .project-list .project-actions .btn {
        display: inline-flex;
        min-width: 44px;
        min-height: 38px;
        align-items: center;
        justify-content: center;
        font-size: 15px;
    }

    /* Separa a ação destrutiva das demais. */
    .project-list .project-actions .btnExcluirProj {
        margin-left: auto;
    }

    /* -- 4.2 Ferramentas complementares ------------------------------------ */

    .tools-table thead {
        display: none;
    }

    .tools-table,
    .tools-table > tbody,
    .tools-table > tbody > tr,
    .tools-table > tbody > tr > td {
        display: block;
        width: auto;
    }

    .tools-table > tbody > tr {
        padding: 14px 12px;
        border-bottom: var(--border-thin);
    }

    .tools-table > tbody > tr > td {
        padding: 2px 0;
        border: var(--border-none);
    }

    .tools-table .project-status > div {
        flex-wrap: wrap;
        gap: 8px;
        height: auto;
    }

    .tools-table .project-status > div > span {
        margin-right: 0;
    }

    /* Sem o <thead> o ano perderia o rótulo; o data-label vem do template. */
    .tools-table .tool-year::before {
        content: attr(data-label) ": ";
        color: var(--color-muted);
    }

    .tools-table .tool-year,
    .tools-table .project-title {
        color: var(--color-muted);
        font-size: 13px;
    }
}