/* Feature: Colaboradores (Camada 7, 3/13) — mesmos valores visuais da versão legada.
   O cabeçalho ordenável/filtrável vem do padrão único da Central (.dt-*, em css/main.css,
   desenhado por js/shared/dataTable.js). Aqui ficam só as colunas congeladas, que são desta aba. */

/* AS DUAS PRIMEIRAS COLUNAS FICAM PARADAS AO ROLAR PARA O LADO: as ações e o nome. Rolando, as
   outras passam por baixo delas.

   O SELETOR LEVA `.data-table`, de propósito. A regra geral do cabeçalho (`.data-table th`, em
   main.css) põe todo <th> em `position: sticky; top: 0; z-index: 10` — e, com a mesma camada para
   todos, o <th> que vem depois no HTML pinta por cima do anterior: o "AnyDesk" passava por cima do
   "Nome" e o cabeçalho das colunas paradas sumia, enquanto as células de baixo continuavam no
   lugar. Mais específico, este vence a camada e o fundo. */
.data-table th.colab-th-sticky,
.data-table td.colab-td-sticky {
    position: sticky;
    background: var(--surface);
    z-index: 20;
}

/* O canto: parado nos dois sentidos (no alto ao rolar para baixo, à esquerda ao rolar para o lado),
   por cima de tudo. */
.data-table th.colab-th-sticky {
    top: 0;
    z-index: 30;
}

/* A linha sob o mouse acende inteira — as células paradas têm fundo próprio e não herdam o do <tr>. */
.data-table tbody tr:hover td.colab-td-sticky {
    background: var(--slate-50);
}

/* A LARGURA DAS AÇÕES É EXATA, e é a mesma distância em que o nome se prende (`left` abaixo). Se a
   coluna fosse mais larga que isso, o nome daria um salto para a esquerda no começo da rolagem e
   cobriria parte das ações; mais estreita, sobraria uma fresta por onde a tabela apareceria. */
#tab-colaboradores {
    --colab-largura-acoes: 64px;
}

.data-table th.colab-th-actions,
.data-table td.colab-td-actions {
    left: 0;
    width: var(--colab-largura-acoes);
    min-width: var(--colab-largura-acoes);
    max-width: var(--colab-largura-acoes);
    box-sizing: border-box;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
}

/* O fio e a sombra na borda direita do nome: é ali que o resto da tabela passa por baixo.
   SOMBRA, E NÃO `border-right`: com `border-collapse` (o da .data-table), a borda de uma célula
   parada fica no lugar da tabela, e não da célula — ao rolar, o fio some. A sombra é da célula. */
.colab-th-nome,
.colab-td-nome {
    left: var(--colab-largura-acoes);
    box-shadow: inset -1px 0 0 var(--slate-200), 6px 0 8px -6px rgb(16 24 40 / 0.14);
}

.colab-machine-old {
    color: #94a3b8;
    font-style: italic;
}

.colab-machine-link {
    color: var(--primary-orange);
    text-decoration: none;
    font-weight: bold;
}

.colab-toggle-btn {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: 0.2s;
    background: #f1f5f9;
    color: #64748b;
}

.colab-toggle-btn.is-active {
    background: var(--navy);
    color: white;
}

/* Admissão e desligamento pelo RH (js/features/colaboradores/rh.js): a prévia dos e-mails. */
.rh-select {
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
}

.rh-previa {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rh-aviso {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
    border-left: 4px solid;
}

.rh-aviso-erro { background: #fef2f2; border-color: #dc2626; color: #991b1b; }
.rh-aviso-atencao { background: #fffbeb; border-color: #f59e0b; color: #92400e; }
.rh-aviso-info { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }

.rh-email {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    color: #334155;
}

.rh-email-titulo {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 6px;
}

.rh-email-campo span {
    color: #64748b;
}

.rh-email-corpo {
    margin: 10px 0 0;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 6px;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: 13px;
    max-height: 320px;
    overflow: auto;
}

/* Admissão: os campos de largura toda (a máquina com a configuração, e os grupos de e-mail). */
.rh-campo-largo {
    grid-column: 1 / -1;
}

/* Os grupos: uma caixa com rolagem, os de setor em cima, os outros embaixo. */
.rh-grupos {
    max-height: 240px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--slate-300);
    border-radius: var(--radius);
    background: var(--surface);
}

.rh-grupos-secao + .rh-grupos-secao {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--slate-100);
}

.rh-grupos-titulo {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-400);
}

.rh-grupos-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 4px 12px;
}

.rh-grupo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    color: var(--slate-700);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rh-grupo input {
    flex-shrink: 0;
}

/* A configuração da máquina escolhida, logo abaixo do select. */
.rh-maquina {
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    font-size: 13px;
}

.rh-maquina dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 2px 16px;
    margin: 0;
}

.rh-maquina dt {
    color: var(--slate-500);
}

.rh-maquina dd {
    margin: 0;
    color: var(--navy);
    font-weight: 500;
}

.rh-maquina-aviso {
    margin: 6px 0 0;
    color: var(--warning-800);
}

/* A regra geral dos campos (`.input-group input`, em main.css) estica todo <input> a 100% e dá
   padding e borda — inclusive às caixas de marcar dos grupos, que viravam uma coluna inteira e
   empurravam o nome do grupo para fora. Aqui a caixa volta a ser caixa. */
.input-group .rh-grupo input[type="checkbox"] {
    width: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
    flex: 0 0 auto;
}

/* A configuração à esquerda e as fotos do modelo à direita; no celular, as fotos descem. */
.rh-maquina-corpo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.rh-maquina-fotos {
    display: flex;
    gap: 6px;
}

.rh-maquina-foto {
    width: 84px;
    height: 84px;
    padding: 0;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.rh-maquina-foto:hover {
    border-color: var(--brand-400);
    box-shadow: var(--shadow-card);
}

.rh-maquina-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}