/* =====================================================================================
   EFICÁCIA CRM — mod-tabelas.css · Tabelas Base
   -------------------------------------------------------------------------------------
   SÓ o que o design-system.css não cobre. Tudo o que existe em ds- é usado tal como está.
   Prefixo exclusivo: .tb-  ·  Mobile-first  ·  Zero scroll horizontal do body.

   Blocos: barra de pesquisa · realce do termo · FAB mobile · células de texto longo ·
           editor de sub-categorias (modal da Categoria) · contador da condição ·
           grelha das tabelas de sistema.
   ===================================================================================== */

/* ===================================================================================
   1. BARRA DE PESQUISA + CONTAGEM
   =================================================================================== */

.tb-barra {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.tb-pesquisa {
    position: relative;
    min-width: 0;
    flex: 1 1 auto;
}

/* Esconde o "x" nativo do WebKit — temos botão próprio, com aria-label (§10.17) */
.tb-pesquisa input[type="search"]::-webkit-search-cancel-button,
.tb-pesquisa input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.tb-pesquisa .ds-input {
    padding-right: 44px;
}

.tb-limpar {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--neutral-400);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.tb-limpar:hover { background: var(--neutral-100); color: var(--neutral-600); }
.tb-limpar:active { transform: translateY(-50%) scale(0.92); }
.tb-limpar[hidden] { display: none; }

@media (min-width: 768px) {
    .tb-barra {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }
    .tb-pesquisa { max-width: 420px; }
}

/* Realce do termo pesquisado */
.tb-hl {
    background: var(--warning-50);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
    box-shadow: inset 0 -2px 0 #fde68a;
}

/* ===================================================================================
   2. TABELA — afinações
   =================================================================================== */

/* Ações: alvo de toque >= 44px em toque E em viewports estreitos
   (tokens sm são 32–36px; a auditoria mede por viewport) */
.tb-acao {
    width: 40px;
    height: 40px;
    min-width: 40px;
}
@media (pointer: coarse), (max-width: 767.98px) {
    .tb-acao { width: 44px; height: 44px; min-width: 44px; }
    /* Em modo cartões as ações são SEMPRE visíveis — não há hover fiável */
    .ds-table tbody tr .ds-row-actions { opacity: 1 !important; }
}

.tb-th-acoes { width: 96px; }

/* Nome + badge de sinalética na mesma célula */
.tb-nome-celula {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Condições de Pagamento: textos até 500 caracteres SEMPRE legíveis,
   com quebra de linha — nunca truncados sem alternativa (spec §4.4). */
@media (min-width: 768px) {
    .tb-tabela-longa td.ds-td-hero {
        white-space: normal;
        overflow-wrap: anywhere;
        max-width: 0;              /* deixa a coluna fluida ocupar o espaço disponível */
        width: 70%;
        line-height: 1.5;
    }
}

/* Em cartões (mobile) o texto longo quebra naturalmente */
.tb-texto-longo .tb-nome-celula { display: inline; }

/* Em cartões, células "—" (sem valor) não ocupam linha; no desktop mantêm a coluna */
@media (max-width: 767.98px) {
    .ds-table td.tb-td-vazia { display: none; }
}

/* ===================================================================================
   3. FAB (mobile) — o botão "Adicionar…" vira flutuante (spec §11.4)
   =================================================================================== */

.tb-add-desktop { display: none; }

.tb-fab {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--primary-600);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(218, 10, 13, 0.35), var(--shadow-lg);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 100ms ease, box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.tb-fab:hover { background: var(--primary-700); }
.tb-fab:active { transform: scale(0.92); box-shadow: 0 3px 10px rgba(218, 10, 13, 0.3); }
.tb-fab:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 3px; }

@media (min-width: 768px) {
    .tb-add-desktop { display: flex; }
    .tb-fab { display: none; }
}

/* ===================================================================================
   4. MODAIS — cabeçalho e secções
   =================================================================================== */

.tb-modal-head-txt { min-width: 0; }

.tb-sec {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.tb-sec + .tb-sec {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--neutral-100);
}

.tb-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}
.tb-sec-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--neutral-800);
    margin: 0;
}

.tb-check-sinaletica { margin-top: 2px; }

/* Rodapé do campo de texto longo: ajuda à esquerda, contador à direita */
.tb-campo-rodape {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.tb-contador {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--neutral-400);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tb-contador.is-limite { color: var(--error-600); }

/* ===================================================================================
   5. EDITOR DE SUB-CATEGORIAS (modal da Categoria)
   =================================================================================== */

.tb-subs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.tb-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.tb-sub .ds-input { flex: 1 1 auto; min-width: 0; }
.tb-sub-uso { flex-shrink: 0; white-space: nowrap; }

.tb-sub.is-removida {
    background: var(--error-50);
    border: 1px dashed var(--error-200);
    border-radius: var(--radius-md);
    padding: 8px 10px 8px 14px;
    justify-content: space-between;
}
.tb-sub-removida-txt {
    font-size: var(--text-sm);
    color: var(--error-700);
    min-width: 0;
    overflow-wrap: anywhere;
}
.tb-sub-removida-txt s { opacity: 0.75; }

.tb-input-erro,
.tb-sub .ds-input.tb-input-erro {
    border-color: var(--error-500);
    box-shadow: 0 0 0 3px var(--error-50);
}

.tb-subs-vazio {
    text-align: center;
    padding: 18px 12px;
    border: 1px dashed var(--neutral-200);
    border-radius: var(--radius-md);
    background: var(--neutral-25, var(--neutral-50));
}
.tb-subs-vazio p {
    margin: 0 0 4px;
    font-size: var(--text-sm);
    color: var(--neutral-600);
}
.tb-subs-vazio p:last-child { margin-bottom: 0; }

.tb-sub-quick { position: relative; }

/* ===================================================================================
   6. TABELAS DE SISTEMA (Unidades · IVA · Tipos de Produto)
   =================================================================================== */

.tb-sys-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    min-width: 0;
}
@media (min-width: 768px) {
    .tb-sys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .tb-sys-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tb-sys-card { min-width: 0; }

.tb-sys-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    background: var(--neutral-100);
    color: var(--neutral-400);
    flex-shrink: 0;
}

.tb-sys-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.tb-sys-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px var(--ds-card-pad);
    border-bottom: 1px solid var(--neutral-100);
    font-size: var(--text-sm);
    color: var(--neutral-700);
    min-width: 0;
}
.tb-sys-row > span:first-child { overflow-wrap: anywhere; min-width: 0; }
.tb-sys-row:last-child { border-bottom: none; }

.tb-badge-mono { font-family: var(--ds-font-mono); }

/* ===================================================================================
   7. AJUSTES FINOS
   =================================================================================== */

/* O corpo da lista nunca provoca scroll horizontal na página */
.tb-corpo { min-width: 0; }

/* Paisagem baixa (ex.: 844x390): FAB não tapa a última linha da tabela */
@media (max-height: 520px) {
    .tb-fab { width: 48px; height: 48px; right: 12px; bottom: 12px; }
    .tb-page { padding-bottom: 64px; }
}