/* ============================================================
   TABELA EM GRID UNIFICADO
   Cada coluna se ajusta ao maior conteúdo (header + body)
   Compatível com HTML do TagTable.php
   ============================================================ */

.table.modelo {
    display: grid;
    grid-auto-rows: auto;
    grid-auto-rows: min-content;
    gap: var(--gap_md);
    max-width: 100%;
    scrollbar-width: none;
}

/* =========================
   TÍTULO + BOTÕES DE AÇÃO
   ========================= */
.table.modelo .table_title_actionButtons_container {
    display: grid;
    grid-template-columns: 1fr auto;
    /* align-items: self-start; */
    /* gap: var(--gap_sm); */
}
.table.modelo .table_title_actionButtons_container:empty {
    display: none;
}
.table.modelo .table_title_actionButtons_container:has(.table_action_buttons_container) {
    gap: var(--gap_sm);
}

.table.modelo .table_title_actionButtons_container .table_title {
    background: var(--cor_principal);
    color: var(--cor_white);
    padding: var(--padding);
    box-shadow: 0px 10px 6px -6px #00000052;
    border-radius: var(--border_radius);
}

.table.modelo .table_title_actionButtons_container .table_action_buttons_container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min-content;
    gap: var(--gap_sm);
    height: 100%;
}

.table.modelo .table_action_buttons_container .action_button {
    cursor: pointer;
    padding: 0px var(--padding);
    min-width: calc(var(--padding) * 6);
    text-align: left;
    font-size: 12px;
    border-radius: var(--border_radius);
    transition: 0.3s;
}


/* =========================
   CONTAINER PRINCIPAL DA TABELA
   ========================= */
.table.modelo .table_header_body_container_shadow {
    /* box-shadow: 0px 10px 6px -6px #00000052; */
    /* border-bottom: 1px solid var(--cor_light_gray); */
    /* border-radius: var(--border_radius); */
    overflow: auto;
}

.table.modelo .table_header_body_container {
    display: grid;
    border-radius: var(--border_radius);
    overflow-x: auto;

    /* Define o grid unificado (todas as colunas compartilham largura) */
    grid-auto-rows: min-content;
    grid-template-columns: auto; /* ajusta automaticamente */
}

/* =========================
   HEADER E BODY (usam display: contents)
   ========================= */
.table.modelo .header,
.table.modelo .body {
    display: contents; /* herdam o grid do container principal */

    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
}

/* =========================
   LINHAS (usam display: contents)
   ========================= */
.table.modelo .row {
    display: contents; /* cada célula se encaixa nas colunas globais */
    background: var(--cor_principal_escura);
    
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
}

/* =========================
   CABEÇALHO
   ========================= */
.table.modelo .header .table_item {
    background: var(--cor_principal_escura);
    color: var(--cor_white);
    padding: var(--padding);
    position: sticky;
    top: 0;
    z-index: 3;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: auto; /* Somente para contrapor o .no_grow */


    /* background: var(--cor_white);
    color: var(--cor_principal);
    border-bottom: 1px solid var(--cor_light_gray);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px; */
}
.table.modelo .header .table_item:empty {
    padding: 0px;
}
.table.modelo .header .table_item[data-attr] {
    cursor: pointer;
    padding-left: 20px;
}

.table.modelo .header .table_item[data-attr]::before {
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
    font-weight: var(--fa-style, 900);
    content: "\f0dc";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    opacity: 0.6;
    transition: 0.3s;
}

.table.modelo .header .table_item[data-order="asc"]::before {
    content: "\f0d7";
    opacity: 1;
}
.table.modelo .header .table_item[data-order="desc"]::before {
    content: "\f0d8";
    opacity: 1;
}

/* =========================
   CORPO DA TABELA
   ========================= */
.table.modelo .body .table_item {
    background: var(--cor_white);
    /* border-bottom: 1px solid #eee; */
    /* padding: var(--padding); */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    align-content: center;

    min-height: 35px;
}
.table.modelo .body .table_item:has(.chip) {    
    padding: 0px var(--padding);
}
.table.modelo .body .table_item:has(.sticky_left) {    
    position: sticky !important;
    left: 0px;
    z-index: 1;
}

.table.modelo .body .row:nth-child(even) .table_item {
    background: #fafafa;
}

.table.modelo .body .row:hover .table_item {
    background: #eee;
    cursor: pointer;
}

/* =========================
   CÉLULAS
   ========================= */
.table.modelo .table_item.has_items .table_sub_item {
    height: auto;
}
.table.modelo .table_sub_item {
    padding: 3px var(--padding);
    padding: 0 var(--padding);
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    align-content: center;
    align-items: center;
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    gap: var(--gap_sm);
}

/* =========================
   LINHA DE “SEM DADOS”
   ========================= */
.table.modelo .no_data_row {
    display: grid;
    grid-auto-flow: column;
    grid-column: 1 / -1;
    background: var(--cor_lighter_red);
    color: var(--cor_dark_red);
    padding: var(--padding) calc(var(--padding) * 2);
    text-align: center;
    border-top: 2px solid var(--cor_white);
    align-items: center;
    justify-content: center;
    gap: var(--gap_sm);
}
/* =========================
   BOTÕES DE CHECKBOX (DENTRO DAS CÉLULAS)
   ========================= */
.table.modelo .table_sub_item.table_action_button input[name="selected_rows"]{

    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;

}

/* =========================
   BOTÕES DE AÇÃO (DENTRO DAS CÉLULAS)
   ========================= */
.table.modelo .table_item:has(.table_action_button) {
    /* width: max(40px, calc(var(--padding) * 5)); */
}
.table.modelo .table_sub_item.table_action_button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    min-width: calc(var(--padding) * 5);
    width: 100%;
    cursor: pointer;
    padding: var(--padding);
    text-align: center;
    transition: 0.2s;
    /* border-radius: var(--border_radius); */
    box-shadow: -3px 0px 0px 0px inset #00000017;
}

.table.modelo .table_sub_item.table_action_button:hover {
    opacity: 0.6;
}

/* Mantém as cores originais */
.table.modelo .table_action_button.action_edit,
.table.modelo .table_action_button.action_edit::before {
    background: var(--cor_yellow);
    color: var(--cor_darker_yellow);

    font-family: var(--fa-style-family, "Font Awesome 6 Free");
    font-weight: var(--fa-style, 900);
    content: var(--fa);
    --fa: "\f044";
}
.table.modelo .table_action_button.action_view,
.table.modelo .table_action_button.action_view::before {
    background: var(--cor_light_blue);
    color: var(--cor_darker_blue);
    
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
    font-weight: var(--fa-style, 900);
    content: var(--fa);
    --fa: "\f06e";
}
.table.modelo .table_action_button.action_delete,
.table.modelo .table_action_button.action_delete::before {
    background: var(--cor_red);
    color: var(--cor_white);
    
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
    font-weight: var(--fa-style, 900);
    content: var(--fa);
    --fa: "\f55a";
}
.table.modelo .table_action_button.action_add,
.table.modelo .table_action_button.action_add::before {
    background: var(--cor_light_green);
    color: var(--cor_darker_green);
    
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
    font-weight: var(--fa-style, 900);
    content: var(--fa);
    --fa: "\f0fe";
}
/* .table.modelo .table_action_button.action_sincronize,
.table.modelo .table_action_button.action_sincronize::before {
    background: var(--cor_yellow);
    color: var(--cor_darker_yellow);
    
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
    font-weight: var(--fa-style, 900);
    content: var(--fa);
    --fa: "\f247";
} */
.table.modelo .table_action_button.action_select:hover::before {
    color: var(--cor_red);
}
.table.modelo .table_action_button.action_select:has(input[type="checkbox"]:not(:checked)),
.table.modelo .table_action_button.action_select:has(input[type="checkbox"]:not(:checked))::before {
    background: var(--cor_principal_escura);
    color: var(--cor_gray);
    
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
    font-weight: var(--fa-style, 400);
    content: var(--fa);
    --fa: "\f146";
}
.table.modelo .table_action_button.action_select:has(input[type="checkbox"]:not(:checked)):hover::before{
    color: var(--cor_yellow);
}
.table.modelo .table_action_button.action_select:has(input[type="checkbox"]:checked),
.table.modelo .table_action_button.action_select:has(input[type="checkbox"]:checked)::before {
    background: var(--cor_principal_escura);
    color: var(--cor_yellow);
    
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
    font-weight: var(--fa-style, 900);
    content: var(--fa);
    --fa: "\f14a";
}
.table.modelo .table_action_button.action_select:has(input[type="radio"]:not(:checked)),
.table.modelo .table_action_button.action_select:has(input[type="radio"]:not(:checked))::before {
    background: var(--cor_principal_escura);
    color: var(--cor_gray);
    
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
    font-weight: var(--fa-style, 400);
    content: var(--fa);
    --fa: "\f111";
}
.table.modelo .table_action_button.action_select:has(input[type="radio"]:not(:checked)):hover::before{
    color: var(--cor_yellow);
}
.table.modelo .table_action_button.action_select:has(input[type="radio"]:checked),
.table.modelo .table_action_button.action_select:has(input[type="radio"]:checked)::before {
    background: var(--cor_principal_escura);
    color: var(--cor_yellow);
    
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
    font-weight: var(--fa-style, 900);
    content: var(--fa);
    --fa: "\f192";
}

/* Ícones */
.table.modelo .table_sub_item.table_action_button::before {
    text-shadow: 2px 2px 3px #0000003d;
    line-height: normal;
}

/* =========================
   COMPLEMENTOS
   ========================= */
.table.modelo .table_item i {
    /* width: 15px; */
    text-align: center;
    line-height: normal;
}

.table.modelo .table_sub_item.chip {
    width: fit-content;
    /* margin: var(--gap_sm) var(--padding); */
}

.table.modelo .table_sub_item img {
    height: 35px;
    scale: 0.8;
}

.table.modelo .body .table_item mark {
    background: var(--cor_red);
    color: var(--cor_white);
}

@media (max-width: 600px){

    
    .table.modelo .table_title_actionButtons_container {
        display: flex;
        flex-direction: column;
        .table_action_buttons_container{
            display: flex;
            .action_button{
                padding: var(--padding);
                flex: 1 1;
            }
        }
    }

    

}