que envolve o slot inteiro. O trait App\Livewire\Concerns\DsEmployerTable
carimba .jl-tablescope ali, e daqui as regras alcancam os quatro por descendencia.
TODA regra desta secao e descendente de .jl-tablescope. Sem o prefixo ela
vazaria para as 34 views que carregam este arquivo. A classe so existe onde o
trait e incluido: EmployerJobTable e JobApplicationTable.
Nada aqui repinta a
— nenhum seletor casa dentro dela. As ancoras
.width-320, #perPage, [id$="-columnSelect"] e .pagination-center so ocorrem
nas views de toolbar e paginacao.
Os dois temas saem de graca: so tokens --eds-*, que o bloco
[data-theme="dark"] ja redefine. Por isso nao ha regra especifica de escuro.
As especificidades foram escolhidas para vencer o dashboard-reskin.css, que
carrega DEPOIS deste arquivo e estiliza os mesmos elementos com
`body.overflow-x-hidden .content ...`.
-------------------------------------------------------------------------- */
/* -- Busca. Concorrente: body.overflow-x-hidden .content .search-box (0,3,1).
Esta regra e (0,4,0) e vence. O padding-left fica com o .ps-8 do tema
(2rem !important), que e o espaco da lupa. -- */
.jl-tablescope .width-320 .form-control.search-box {
font-family: var(--eds-font-body);
font-size: .9rem;
color: var(--eds-ink-strong);
background-color: var(--eds-surface);
border: 1px solid var(--eds-border-input);
border-radius: var(--eds-radius-btn-sm);
padding-top: .6rem;
padding-bottom: .6rem;
padding-right: .8rem;
box-shadow: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.jl-tablescope .width-320 .form-control.search-box::placeholder {
color: var(--eds-ink-medium);
opacity: 1;
}
.jl-tablescope .width-320 .form-control.search-box:focus {
outline: none;
border-color: var(--eds-indigo);
box-shadow: var(--eds-ring-indigo);
}
/* -- Lupa da busca. O tema declara .text-gray-600 com !important,
entao so !important alcanca. -- */
.jl-tablescope .width-320 > span.text-gray-600 {
color: var(--eds-ink-medium) !important;
}
/* -- Seletor "Show". Concorrentes: .content .data-sorting (0,3,1) e
.border-0{border:0!important} do Bootstrap. O id resolve a primeira;
a segunda so cede a !important.
A seta e desenhada com dois gradientes em vez de SVG embutido: o DS nao
tem token de caret, e data: URI nao aceita custom property — assim ela
acompanha o tema sem nenhuma cor literal. -- */
.jl-tablescope #perPage {
font-family: var(--eds-font-body);
font-size: .85rem;
color: var(--eds-ink-strong);
background-color: var(--eds-surface);
/* --eds-ink-medium, e nao ink-soft: como .form-select ja traz appearance:none
e esta regra sobrescreve o background-image do tema, esta seta e a UNICA
indicacao de que o elemento e um select. Logo e componente de interface,
piso de 3:1 pelo SC 1.4.11 — e o ink-soft dava 2,54:1 no tema claro. */
background-image:
linear-gradient(45deg, transparent 50%, var(--eds-ink-medium) 50%),
linear-gradient(135deg, var(--eds-ink-medium) 50%, transparent 50%);
background-position: right 1.05rem center, right .75rem center;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
border: 1px solid var(--eds-border-input) !important;
border-radius: var(--eds-radius-btn-sm);
padding: .45rem 2rem .45rem .7rem;
box-shadow: none;
}
.jl-tablescope #perPage:focus {
outline: none;
border-color: var(--eds-indigo) !important;
box-shadow: var(--eds-ring-indigo);
}
/* -- Botao "Columns". O id termina em -columnSelect nas duas telas
(column-select.blade.php monta "{tableName}-columnSelect"). Nao uso
.btn.dropdown-toggle porque essa combinacao tambem casa com o dropdown de
situacao DENTRO da tabela, que esta fora do escopo desta entrega. -- */
.jl-tablescope [id$="-columnSelect"] {
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: var(--eds-font-body);
font-size: .85rem;
font-weight: 600;
line-height: 1;
/* Sem declarar `color`: a cor do texto fica herdada, e medida nos dois temas
(15,43:1 no claro, 17,10:1 no escuro). O par --eds-brand-ink ja existe e
serviria aqui, mas pintar de marca um botao que hoje herda e mudanca
VISUAL, nao correcao de contraste — fica para o item que uniformizar a
barra de ferramentas. O que NAO pode voltar e o --eds-indigo-dark cru:
ele e marca escurecida e o bloco [data-theme="dark"] nao o redefine. */
background: var(--eds-surface);
border: 1px solid var(--eds-border-mid);
border-radius: var(--eds-radius-btn-sm);
padding: .5rem .85rem;
transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.jl-tablescope [id$="-columnSelect"]:hover {
background: var(--eds-surface-tonal);
border-color: var(--eds-indigo);
}
.jl-tablescope [id$="-columnSelect"]:focus-visible {
outline: none;
border-color: var(--eds-indigo);
box-shadow: var(--eds-ring-indigo);
}
/* -- Paginacao. Concorrentes do reskin:
.content .pagination .page-link (0,4,1)
.content .pagination .page-item.active .page-link (0,5,1)
Por isso a base leva .page-item no caminho, chegando a (0,5,0), e as
variantes a (0,6,0). -- */
.jl-tablescope .pagination-center .pagination {
gap: .35rem;
margin-bottom: 0;
/* Sem isto, em 320px os 38px de min-width dos botoes somam mais que a caixa;
como a lista e flex sem quebra e alinhada a direita, os dois primeiros itens
(o "anterior" inclusive) saiam pela esquerda SEM rolagem. Medido. */
flex-wrap: wrap;
}
.jl-tablescope .pagination-center .pagination .page-item .page-link {
min-width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--eds-font-body);
font-size: .85rem;
font-weight: 600;
color: var(--eds-ink-medium);
background: var(--eds-surface);
border: 1px solid var(--eds-border);
border-radius: 8px;
box-shadow: none;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.jl-tablescope .pagination-center .pagination .page-item .page-link:hover {
color: var(--eds-ink-strong);
background: var(--eds-surface-tonal-dark);
border-color: var(--eds-border-mid);
}
.jl-tablescope .pagination-center .pagination .page-item.active .page-link {
color: var(--eds-on-brand);
background: var(--eds-indigo-dark);
border-color: var(--eds-indigo-dark);
}
.jl-tablescope .pagination-center .pagination .page-item.disabled .page-link {
color: var(--eds-ink-soft);
background: var(--eds-surface);
border-color: var(--eds-border);
opacity: .55;
}
/* --------------------------------------------------------------------------
20b. Conteúdo das listagens do empregador — .jl-tablescope
Continuação da seção 20. Mesma regra, sem exceção: TODA regra daqui para
baixo é descendente de .jl-tablescope, classe que só o trait
App\Livewire\Concerns\DsEmployerTable carimba. Sem o prefixo ela vazaria para
as 34 views que carregam este arquivo.
COR: só token --eds-*. Nenhum literal, e nenhum token de PINTURA usado como
texto — foi um deles (--eds-indigo-dark, que o bloco [data-theme="dark"] não
redefine) que reprovou a #433 com 1,23:1 no escuro. Os `*-ink` semânticos e o
--eds-brand-ink são redefinidos no escuro; é deles que estas regras partem.
-------------------------------------------------------------------------- */
/* == Candidaturas: total + quanto do processo andou ======================== */
.jl-tablescope .jl-cand {
display: flex;
flex-direction: column;
gap: .25rem;
min-width: 150px;
}
.jl-tablescope .jl-cand__linha {
display: flex;
align-items: baseline;
gap: .35rem;
}
/* O total é a informação primária da célula, e ganha escala para ser lido de
relance na varredura vertical da coluna. */
.jl-tablescope .jl-cand__total {
font-family: var(--eds-font-heading);
font-size: 1.25rem;
font-weight: 700;
line-height: 1;
color: var(--eds-ink-strong);
}
.jl-tablescope .jl-cand__unidade,
.jl-tablescope .jl-cand__andamento {
font-family: var(--eds-font-body);
font-size: .78rem;
/* ink-medium e NÃO ink-soft: soft dá 2,54:1 sobre superfície clara e
reprovaria o SC 1.4.3 para texto normal. Medido. */
color: var(--eds-ink-medium);
}
.jl-tablescope .jl-cand__medidor {
max-width: 130px;
}
.jl-tablescope .jl-cand__medidor .jl-progress__track {
height: 6px;
}
/* O preenchimento do .jl-progress do DS é --eds-grad-action, gradiente montado
sobre --eds-indigo-dark/--eds-violet-dark — os dois tokens de PINTURA que o
bloco escuro não redefine. Num tenant de marca escura a barra sumiria dentro
do próprio trilho. --eds-brand-ink existe nos dois temas e é a marca legível;
é ele que pinta a barra aqui. */
.jl-tablescope .jl-cand__medidor .jl-progress__fill {
background: var(--eds-brand-ink);
}
/* Zero não é erro. Vaga recém-publicada sem candidatura é o estado normal dela,
então o vazio fala em tom neutro, sem badge vermelho nem caixa vazia. */
.jl-tablescope .jl-cand--vazia {
display: inline-flex;
/* Reseta o eixo do bloco base: `.jl-cand` empilha (column) porque a célula
cheia tem três linhas. O vazio tem uma só, e sem este reset o ícone subia
para cima do texto. Visto na tela. */
flex-direction: row;
align-items: center;
min-width: 0;
gap: .4rem;
font-family: var(--eds-font-body);
font-size: .82rem;
color: var(--eds-ink-medium);
}
/* == Expiração: urgência legível ========================================== */
/* Sem tint de fundo, de propósito: os *tints* do .jl-badge reprovam AA sobre a
linha da tabela (4,31:1 no warning, 4,11:1 no neutral — medido). O texto vai
direto sobre a linha, com a tinta semântica, que o bloco escuro redefine. */
.jl-tablescope .jl-expira {
display: inline-flex;
align-items: center;
gap: .35rem;
font-family: var(--eds-font-body);
font-size: .82rem;
font-weight: 600;
white-space: nowrap;
}
.jl-tablescope .jl-expira--vencida { color: var(--eds-danger-ink); }
.jl-tablescope .jl-expira--perto { color: var(--eds-warning-ink); }
/* Tranquila e sem prazo não pedem nada do recrutador, então não competem por
atenção: peso e cor de texto secundário. */
.jl-tablescope .jl-expira--tranquila,
.jl-tablescope .jl-expira--sem-prazo {
color: var(--eds-ink-medium);
font-weight: 500;
}
/* == Ações da linha ======================================================== */
.jl-tablescope .jl-rowactions {
display: flex;
align-items: center;
justify-content: center;
gap: .15rem;
}
.jl-tablescope .jl-rowactions__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
font-size: .95rem;
line-height: 1;
background: transparent;
border: 1px solid transparent;
border-radius: var(--eds-radius-btn-sm);
text-decoration: none;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.jl-tablescope .jl-rowactions__btn:hover {
background: var(--eds-surface-tonal-dark);
}
.jl-tablescope .jl-rowactions__btn:focus-visible {
outline: none;
border-color: var(--eds-indigo);
box-shadow: var(--eds-ring-indigo);
}
.jl-tablescope .jl-rowactions__btn--info { color: var(--eds-info-ink); }
/* Editar fica NEUTRO, e não na cor da marca. Visto na tela num tenant de marca
vermelha (Caucaia, #b61615), o lápis saía vermelho encostado na lixeira
vermelha: duas ações de peso oposto com a mesma cor. Nenhum ícone de ação usa
a marca — a marca não é semântica de ação. */
.jl-tablescope .jl-rowactions__btn--neutro { color: var(--eds-ink-medium); }
.jl-tablescope .jl-rowactions__btn--neutro:hover { color: var(--eds-ink-strong); }
.jl-tablescope .jl-rowactions__btn--success { color: var(--eds-success-ink); }
.jl-tablescope .jl-rowactions__btn--danger { color: var(--eds-danger-ink); }
/* Excluir é a única ação destrutiva e estava encostada nas reversíveis. O
separador não impede o clique errado — ele tira o alvo vermelho de dentro do
mesmo bloco visual, que é o que o olho usa para agrupar. */
.jl-tablescope .jl-rowactions__divisor {
width: 1px;
height: 18px;
margin-inline: .25rem;
background: var(--eds-border-mid);
}
/* == Filtros visíveis ====================================================== */
/* Os dois filtros saíram do menu do pacote e são desenhados por
`job_table_components/filters_inline.blade.php`, numa área configurável.
Markup nosso, classes nossas — nenhuma view do pacote foi tocada. */
.jl-tablescope .jl-tablefilters {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: .75rem;
}
/* `flex-basis` + `width: 100%` no select: sem isso o