/* Botão de ação de linha em forma de ícone, e a dica que diz o nome dele.
   O conversor está em ui-row-icons.js.

   A APARÊNCIA não mora mais aqui: desde 12/09/2026 o conversor também marca
   `j-icon-button`, o padrão de ícone redondo do sistema (components.css,
   desenhado a partir do pin de fixar menu). O que sobra nesta folha é o que é
   específico de LINHA DE TABELA — o tamanho de 31px que a densidade da lista
   pede, e as áreas onde nem isso cabe. */
@media screen {
  /* Quadrado, e do MESMO lado que a pílula de texto tinha (31px). Trocar a
     altura junto com o formato mexeria na altura da linha da tabela inteira, e
     o pedido era sobre o botão, não sobre a densidade da lista.

     `!important` na largura porque três folhas antigas fixam larguras de
     pílula por posição (`.schedules-panel tbody td:last-child > .row-button`
     chega a 70px). Aquelas regras existiam para alinhar palavras de tamanhos
     diferentes — problema que deixa de existir quando o conteúdo é um desenho
     de tamanho fixo. */
  /* Só o tamanho. Círculo, borda, hover, foco e o recuo ao clicar vêm de
     `.j-icon-button`. Trocar a altura junto com o formato mexeria na altura da
     linha da tabela inteira, e o pedido era sobre o botão, não sobre a
     densidade da lista. */
  .j-row-icon.j-row-icon {
    --j-icon-size: 31px;
    --j-icon-glyph: 15px;
  }

  /* Ação destrutiva: o padrão tem a variante, e aqui ela é deduzida do nome —
     o conversor não sabe quais rótulos destroem coisas. */
  .j-row-icon.j-row-icon[data-row-label="Excluir"]:not(:disabled):hover,
  .j-row-icon.j-row-icon[data-row-label="Apagar"]:not(:disabled):hover,
  .j-row-icon.j-row-icon[data-row-label="Remover"]:not(:disabled):hover,
  .j-row-icon.j-row-icon[data-row-label="Cancelar"]:not(:disabled):hover,
  .j-row-icon.j-row-icon[data-row-label="Desvincular"]:not(:disabled):hover {
    border-color: #f3c9ce;
    background: #fdeff1;
    color: #b42335;
  }

  /* A dica.
     Elemento único, movido e reposicionado a cada abertura por
     ui-row-icons.js — ver o comentário longo lá sobre por que ela não pode ser
     um ::after do botão (a moldura da tabela recorta, e ainda ganharia barra
     de rolagem). Estreita e sem quebra de linha de propósito: o texto é uma
     palavra, e uma caixa de 270px sobre uma tabela esconderia a linha vizinha.

     Mesmo desenho das outras duas dicas do painel (fundo branco, borda clara,
     corpo de 10px), para as três serem lidas como a mesma coisa. */
  .j-row-tip {
    position: absolute;
    /* 45: acima do conteúdo da página e ABAIXO da .topbar (50), igual às outras
       duas dicas. A topbar cria contexto de empilhamento, e um valor maior faria
       a caixa pintar por cima do painel de avisos aberto — ver
       test-camada-topbar-20260821. */
    z-index: 45;
    left: 0;
    top: 0;
    max-width: min(260px, 72vw);
    padding: 6px 9px;
    border: 1px solid #d9e3ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(18, 39, 68, .16);
    color: #42566f;
    font-size: 10px;
    font-weight: 640;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    /* Nasce 3px ABAIXO e sobe: a caixa abre em cima do ícone (ui-row-icons.js),
       e o movimento tem de vir do botão para ela, não ao contrário. */
    transform: translateY(3px);
    /* Ao fechar, a visibilidade só cai depois do fade. */
    transition: opacity .13s ease, transform .13s ease, visibility 0s linear .13s;
  }

  .j-row-tip.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .13s ease, transform .13s ease, visibility 0s linear;
  }

  @media (prefers-reduced-motion: reduce) {
    .j-row-tip {
      transition: visibility 0s linear;
    }
  }

  /* O grupo fica mais estreito com ícones; sem isto as ações continuariam
     espalhadas na largura que as palavras pediam. */
  .schedule-row-actions:has(.j-row-icon),
  .vacation-row-actions:has(.j-row-icon),
  .vacation-grant:has(.j-row-icon) {
    gap: 6px;
  }

  /* Central de assinaturas. `.signature-center-actions .outline-button` (0,2,0)
     traz `padding:6px 9px!important` de people.css e ganharia de `.j-row-icon`
     (0,1,0) mesmo com !important dos dois lados. Mesma especificidade aqui, e
     esta folha carrega depois. */
  .signature-center-actions {
    align-items: center;
  }

  .signature-center-actions .j-row-icon {
    font-size: 0 !important;
  }

  /* As vias de cada destinatário ficam DENTRO da coluna de destinatários, ao
     lado da pílula de status — ali o alvo de 31px empurraria a linha inteira
     para baixo. Menor, e ainda com área de toque suficiente. */
  .signable-doc-recipient .j-row-icon.j-row-icon {
    --j-icon-size: 22px;
    --j-icon-glyph: 12px;
  }

  /* Holerites e comprovantes: a evidência virou uma linha só, e o alvo tem de
     caber nela sem esticar a altura. */
  .payroll-payment-evidence .j-row-icon,
  .payroll-link-proof .j-row-icon {
    flex: none;
  }

  /* Coluna de ações da tabela de jornadas: as regras antigas reservavam a
     largura de duas pílulas de 70px por botão. */
  .schedules-panel tbody td:last-child > .j-row-icon.j-row-icon,
  .schedules-panel .schedule-row-actions .j-row-icon.j-row-icon {
    width: var(--j-icon-size) !important;
    min-width: var(--j-icon-size) !important;
    height: var(--j-icon-size) !important;
    min-height: var(--j-icon-size) !important;
  }
}