/* =============================================================
   SELEÇÃO EM MASSA NA BASE DE CONTATOS
   -------------------------------------------------------------
   A decisão que organiza esta folha: a barra de ações só existe
   quando há seleção, e ela diz QUANTOS. Botão de apagar sempre
   visível numa tela de base de clientes é um convite ao acidente —
   e "Apagar" sem número não dá para conferir antes de clicar.
============================================================= */

/* ---------- a coluna de marcar ---------- */
.ct-col-marca {
    width: 40px;
    text-align: center;
    padding-right: 0 !important;
}

.ct-check {
    width: 17px;
    height: 17px;
    accent-color: var(--accent);
    cursor: pointer;
    /* A caixa tem 17px; o dedo precisa de bem mais. A área cresce sem
       o desenho crescer junto. */
    margin: 6px;
    vertical-align: middle;
}

/* A linha escolhida se anuncia inteira, não só na caixinha: numa
   tabela de oito colunas, um tique de 17px no canto esquerdo passa
   despercebido quando se olha para o nome do contato. */
.ct-linha-on {
    background: var(--accent-soft) !important;
}
.ct-linha-on td:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
}

/* ---------- a barra de ações ---------- */
.ct-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 11px 14px;
    border: 1px solid var(--accent-line);
    border-radius: var(--r, 14px);
    background: var(--accent-soft);
    animation: ct-barra-entra .16s var(--ease-out, ease) both;
}

@keyframes ct-barra-entra {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.ct-barra-conta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}
.ct-barra-conta strong {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--accent-hi);
    white-space: nowrap;
}

.ct-limpar {
    border: 0;
    background: none;
    padding: 0;
    color: var(--text-faint);
    font-family: var(--font-body);
    font-size: 11.5px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    white-space: nowrap;
}
.ct-limpar:hover { color: var(--text); }

.ct-barra-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ct-select {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--surface-3);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 12.5px;
    cursor: pointer;
    outline: none;
}
.ct-select:focus-visible { box-shadow: var(--ring); }
.ct-select option {
    background: var(--surface-solid);
    color: var(--text-strong);
}

/* O apagar é o único em vermelho, e só ganha o vermelho cheio quando
   o ponteiro está nele: pintado o tempo todo, ele puxa o olhar de uma
   tela onde a maior parte do trabalho não é apagar. */
.ct-apagar {
    color: var(--danger) !important;
    border-color: rgba(var(--danger-rgb), .28) !important;
}
.ct-apagar:hover:not(:disabled) {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    color: #fff !important;
}
.ct-apagar:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- celular ---------- */
@media (max-width: 780px) {
    /* A tabela vira lista de cartões no celular (regra da casa, com
       `data-label`). A célula da marca não tem rótulo para mostrar,
       então ela sobe para o canto do cartão em vez de virar uma linha
       vazia com um tique solto. */
    .ct-col-marca {
        width: auto;
        text-align: left;
    }
    .ct-barra {
        position: sticky;
        /* Grudada embaixo enquanto se rola a lista: com cinquenta
           contatos, a barra sumiria no topo justamente quando a pessoa
           ainda está escolhendo. */
        bottom: calc(var(--altura-navbar, 64px) + 8px);
        z-index: 50;
        background: var(--flutuante, rgba(14, 14, 20, .96));
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: var(--sh-lg);
    }
    .ct-barra-acoes { flex: 1 1 100%; }
    .ct-barra-acoes .ct-select,
    .ct-barra-acoes .btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .ct-barra { animation: none; }
}