/* 
 * Componente Tables - ESTILO UNIFICADO PARA TODAS AS P�GINAS V2
 * Sistema de tabelas padronizadas para o sistema de frete
 * Usa variáveis de tema padrão para suporte a light/dark
 */

/* === PADRÃO GLOBAL UNIFICADO === */
/* TODAS AS TABELAS: Base consistente */
table,
.table,
.config-table,
#tabelaopcao, #faixas_oc {
    width: 100% !important;
    margin-bottom: var(--spacing-4) !important;
    color: var(--text-primary) !important;
    border-collapse: collapse !important;
    vertical-align: top !important;
    background-color: transparent!important;
    border-radius: var(--form-control-border-radius) !important;
}

/* TODAS AS CÉLULAS: Headers e dados com padrão unificado */
table th,
table td,
.table th,
.table td,
.config-table th,
.config-table td,
#tabelaopcao th,
#tabelaopcao td, #faixas_oc th, #faixas_oc td {
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    vertical-align: middle !important;
    border-bottom: var(--border-width) solid var(--table-border-color) !important;
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* Remover borda vertical do meio da tabela de configurações */
#tabelaopcao td,
#tabelaopcao th, #faixas_oc th, #faixas_oc th {
    border-left: none !important;
    border-right: none !important;
    border-top: var(--border-width) solid var(--table-border-color) !important;
    border-bottom: var(--border-width) solid var(--table-border-color) !important;
}

/* Remover borda vertical da tabela de depoimentos */
.table-responsive table.table td,
.table-responsive table.table th,
.table-responsive .table td,
.table-responsive .table th {
    border-left: none !important;
    border-right: none !important;
    border-top: var(--border-width) solid var(--table-border-color) !important;
}

/* Sobrescrever especificamente o Bootstrap */
.table-responsive table.table tbody td,
.table-responsive table.table thead th,
.table-responsive .table tbody td,
.table-responsive .table thead th {
    border-left: none !important;
    border-right: none !important;
    border-top: var(--border-width) solid var(--table-border-color) !important;
}

/* Forçar remoção de bordas verticais - máxima especificidade */
div.table-responsive table.table tbody tr td,
div.table-responsive table.table thead tr th,
div.table-responsive .table tbody tr td,
div.table-responsive .table thead tr th, tr td, tr th {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
}

/* TODOS OS HEADERS: Estilo consistente e uniforme */
table thead th,
table th,
.table thead th,
.table th,
.config-table th {
    background-color: transparet !important;
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-semibold) !important;
    vertical-align: bottom !important;
    font-size: var(--font-size-base) !important;
    text-align: left !important;
    border-bottom: var(--border-width) solid var(--table-border-color) !important;
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x) !important;
}

/* Cabeçalho específico da tabela de opções - sem cor de fundo */
#tabelaopcao th, #faixas_oc th {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-semibold) !important;
    vertical-align: middle !important;
    font-size: var(--font-size-base) !important;
    text-align: left !important;
    border: var(--border-width) solid var(--table-border-color) !important;
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x) !important;
}

/* === CORREÇÃO ESPECÍFICA PARA BORDAS PRETAS === */
/* Forçar bordas suaves em todas as tabelas de configuração */
.config-table,
#tabelaopcao,
#faixas_oc,
table.config-table {
    border-color: var(--card-header-border-color) !important;
}

.config-table th,
.config-table td,
#tabelaopcao th,
#tabelaopcao td,
table.config-table th,
table.config-table td,
#faixas_oc th,
#faixas_oc td {
    border-color: var(--card-header-border-color) !important;
}

/* Tabela de faixas de peso - bordas suaves */
table[class*="faixa"],
table[class*="peso"],
table[class*="frete"] {
    border-color: var(--card-header-border-color) !important;
}

table[class*="faixa"] th,
table[class*="faixa"] td,
table[class*="peso"] th,
table[class*="peso"] td,
table[class*="frete"] th,
table[class*="frete"] td {
    border-color: var(--card-header-border-color) !important;
}

/* === FORÇAR BORDAS SUAVES EM TODAS AS TABELAS === */
/* Sobrescrever qualquer CSS que esteja causando bordas pretas */
table,
.table,
.config-table,
#tabelaopcao,
table[class*="faixa"],
table[class*="peso"],
table[class*="frete"] {
    border-color: var(--card-header-border-color) !important;
}

table th,
table td,
.table th,
.table td,
.config-table th,
.config-table td,
#tabelaopcao th,
#tabelaopcao td,
table[class*="faixa"] th,
table[class*="faixa"] td,
table[class*="peso"] th,
table[class*="peso"] td,
table[class*="frete"] th,
table[class*="frete"] td {
    border-color: var(--card-header-border-color) !important;
}

/* === SOBRESCREVER BORDAS PRETAS ESPECÍFICAS === */
/* Forçar bordas suaves mesmo em casos extremos */
table[style*="border-color: #000"],
table[style*="border-color: black"],
table[style*="border: 1px solid #000"],
table[style*="border: 1px solid black"] {
    border-color: var(--card-header-border-color) !important;
}

table th[style*="border-color: #000"],
table td[style*="border-color: #000"],
table th[style*="border-color: black"],
table td[style="border-color: black"] {
    border-color: var(--card-header-border-color) !important;
}

/* === VARIANTES ESPECÍFICAS === */

/* Tabela listrada */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

/* Tabela com hover */
.table-hover tbody tr:hover {
    background-color: var(--table-hover-bg);
}

/* Tabela com bordas completas */
.table-bordered {
    border: var(--border-width) solid var(--card-header-border-color);
}

.table-bordered th,
.table-bordered td {
    border: var(--border-width) solid var(--card-header-border-color);
}

/* Tabela sem bordas */
.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
    border: 0;
}

/* Tabela compacta */
.table-sm th,
.table-sm td {
    padding: var(--spacing-1);
}

/* === RESPONSIVIDADE === */

/* Container responsivo */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive .table {
    margin-bottom: 0;
}

/* Stack em mobile */
@media (max-width: 767px) {
    .table-responsive-stack {
        display: block !important;
    }

    .table-responsive-stack thead {
        display: none;
    }

    .table-responsive-stack tbody,
    .table-responsive-stack tr,
    .table-responsive-stack td {
        display: block !important;
        border: none !important;
    }

    .table-responsive-stack tr {
        border: var(--border-width) solid var(--table-border-color);
        border-radius: var(--border-radius);
        margin-bottom: var(--spacing-4);
        padding: var(--spacing-4);
        background-color: transparent;
        box-shadow: var(--shadow-sm);
    }

    .table-responsive-stack td {
        text-align: right !important;
        padding: var(--spacing-2) 0 !important;
        border-bottom: var(--border-width) solid var(--color-gray-200) !important;
    }

    .table-responsive-stack td::before {
        content: attr(data-label) ": ";
        font-weight: var(--font-weight-semibold);
        float: left;
        text-align: left;
    }
}

/* === UTILITÁRIOS === */

/* Ações da tabela */
.table-actions {
    white-space: nowrap;
}

.table-actions .btn {
    padding: var(--spacing-1) var(--spacing-2);
    margin-right: var(--spacing-1);
}

.table-actions .btn:last-child {
    margin-right: 0;
}

/* Texto centralizado */
.table .text-center {
    text-align: center !important;
}

.table .text-right {
    text-align: right !important;
}

.table .text-nowrap {
    white-space: nowrap !important;
}

/* === CONFIGURAÇÃO ESPECÍFICA === */

/* Tabela de configuração */
.config-table {
    background-color: transparent;
    border-radius: var(--border-radius);
}

.config-table th {
    background-color: var(--color-gray-50);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.config-table td {
    font-size: var(--font-size-base);
}

.config-table .form-control {
    border: none;
    padding: var(--spacing-2);
    background-color: transparent;
}

.config-table .form-check-group {
    display: flex;
    gap: var(--spacing-4);
    align-items: center;
}

/* === TABELA DE DADOS === */

.data-table {
    font-size: var(--font-size-base);
}

.data-table .badge {
    font-size: 0.75em;
}

/* Formatação de valores */
.data-table .currency {
    text-align: right;
    font-family: var(--font-family-monospace);
    font-weight: var(--font-weight-semibold);
}

.data-table .percentage {
    text-align: right;
    font-family: var(--font-family-monospace);
}

/* === ALINHAMENTO DE FORM CONTROLS EM TABELAS === */

/* Form check groups dentro de tabelas */
/* table .form-check-group,
.table .form-check-group,
#tabelaopcao .form-check-group {
    display: flex !important;
    align-items: center !important;
    gap: var(--spacing-6) !important;
    margin: 0 !important;
    padding: 0 !important;
} */

/* Form checks individuais dentro de tabelas */
table .form-check,
.table .form-check,
#tabelaopcao .form-check {
    display: flex !important;
    align-items: center !important;
    padding-left: 0 !important;
} 

/* Inputs de radio e checkbox dentro de tabelas */
table .form-check-input,
.table .form-check-input,
#tabelaopcao .form-check-input {
    width: 1rem !important;
    height: 1rem !important;
    margin: 0 var(--spacing-2) 0 0 !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Labels de radio e checkbox dentro de tabelas */
table .form-check-label,
.table .form-check-label,
#tabelaopcao .form-check-label, #faixas_oc {
    margin-bottom: 0 !important;
    line-height: 1rem !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    font-size: var(--font-size-base) !important;
    color: var(--text-base) !important;
}

/* Alinhamento vertical para primeira coluna da tabela */
#tabelaopcao td:first-child {
    width: 250px !important;
    font-weight: var(--font-weight-medium) !important;
    color: var(--text-base) !important;
    vertical-align: middle !important;
    text-align: left !important;
}

/* PADRÃO GLOBAL PARA TODOS OS CONFIG-LABEL DO SISTEMA */
.config-label,
td.config-label,
th.config-label {
    font-size: var(--font-size-sm) !important;  /* 14px - menor como no padrão */
    font-weight: var(--font-weight-medium) !important;  /* 500 - peso médio */
    color: var(--text-base) !important;  /* Cor padrão do sistema */
    vertical-align: middle !important;
    text-align: left !important;
    white-space: nowrap !important;
}

/* Alinhamento vertical para segunda coluna da tabela */
#tabelaopcao td:last-child, #faixas_oc td:last-child {
    vertical-align: middle !important;
}

@media (max-width: 576px) {
    #tabelaopcao td, #tabelaopcao thead tr th, #faixas_oc td, #faixas_oc thead tr th {
        min-width: 150px !important;
    }
}