/*
  Wortic macOS UI Kit — Table Responsive
  wm-table-responsive — o núcleo do responsivo de dados: a MESMA <table>
  se reorganiza sozinha conforme a largura do próprio CONTÊINER (container
  query, não media query — uma tabela dentro de uma sidebar estreita já
  fica na forma estreita, mesmo num monitor grande).

  Estratégia: prioridade de coluna declarada em data-wm-prioridade="1|2|3"
  em <th> e <td>. No aperto, colunas de prioridade 2 e 3 saem da grade —
  display:none — mas o DADO não desaparece: cada linha ganha um botão de
  alcance (.wm-table-responsive__toggle) que expande uma linha de detalhe
  real (<tr>/<td> com <dl>) contendo exatamente os pares rótulo/valor das
  colunas escondidas naquela largura. A marcação continua
  <table>/<thead>/<tbody>/<tr>/<th>/<td> o tempo todo — nunca vira <div> —
  e a ordem do DOM não muda, só a visibilidade de cada célula.
*/

@layer components {
  .wm-table-responsive {
    background: var(--wm-surface-primary);
    border-radius: var(--wm-radius-list-group);
    box-shadow:
      0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-1);
    /* Fallback de segurança, não a resposta principal (ver ficha). Com
       prioridade de coluna bem escolhida, a régua de prioridade-1 cabe
       sozinha nas larguras medidas (1440/768/390) e isto nunca rola. */
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--wm-scrollbar-thumb) transparent;

    /* A tabela reage ao próprio contêiner, não ao viewport. */
    container-type: inline-size;
    container-name: wm-table-responsive;
  }
  .wm-table-responsive::-webkit-scrollbar {
    height: var(--wm-space-4);
  }
  .wm-table-responsive::-webkit-scrollbar-track {
    background: transparent;
  }
  .wm-table-responsive::-webkit-scrollbar-thumb {
    background: var(--wm-scrollbar-thumb);
    border-radius: var(--wm-radius-pill);
    border: var(--wm-border-width-thick) solid transparent;
    background-clip: padding-box;
  }
  .wm-table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--wm-scrollbar-thumb-hover);
    background-clip: padding-box;
  }

  .wm-table-responsive__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--wm-font-size-subheadline);
  }

  .wm-table-responsive__table thead th {
    text-align: start;
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-medium);
    color: var(--wm-label-secondary);
    background: var(--wm-surface-primary);
    padding: var(--wm-space-4) var(--wm-space-6);
    border-bottom: var(--wm-border-width-hairline) solid var(--wm-separator);
    white-space: nowrap;
  }

  .wm-table-responsive__table tbody td {
    max-width: 0;
    padding: var(--wm-space-5) var(--wm-space-6);
    overflow: hidden;
    color: var(--wm-label-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: var(--wm-border-width-hairline) solid var(--wm-separator);
    vertical-align: middle;
  }
  .wm-table-responsive__table tbody tr:last-child > td {
    border-bottom: none;
  }

  .wm-table-responsive__cell--numeric {
    text-align: end;
    font-variant-numeric: tabular-nums;
  }
  .wm-table-responsive__cell--secondary {
    color: var(--wm-label-secondary);
  }

  /* ------------------------------------------------------------
     Coluna de alcance — o botão que abre a linha de detalhe.
     Existe no DOM sempre (mesma marcação em qualquer largura); só fica
     visível quando o CONTÊINER esconde alguma coluna (ver @container
     abaixo). Sem hover: é alvo de toque desde o primeiro clique.
     ------------------------------------------------------------ */
  .wm-table-responsive__toggle-col,
  .wm-table-responsive__toggle-cell {
    display: none;
    width: var(--wm-control-height-md);
    padding-inline: var(--wm-space-3);
  }
  .wm-table-responsive__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wm-control-height-sm);
    height: var(--wm-control-height-sm);
    border: none;
    border-radius: var(--wm-radius-sm);
    background: transparent;
    color: var(--wm-label-tertiary);
    cursor: pointer;
    transition:
      background var(--wm-duration-fast) var(--wm-ease-standard),
      color var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-table-responsive__toggle:hover {
    background: var(--wm-fill-tertiary);
    color: var(--wm-label-primary);
  }
  .wm-table-responsive__toggle:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
    box-shadow: 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }
  .wm-table-responsive__toggle .wm-icon {
    transition: transform var(--wm-duration-fast) var(--wm-ease-emphasized);
  }
  .wm-table-responsive__toggle[aria-expanded="true"] {
    background: var(--wm-fill-tertiary);
    color: var(--wm-label-primary);
  }
  .wm-table-responsive__toggle[aria-expanded="true"] .wm-icon {
    transform: rotate(90deg);
  }

  /* ------------------------------------------------------------
     Linha de detalhe — pares rótulo/valor das colunas escondidas.
     Continua <tr>/<td>, não <div>: quem navega a tabela por leitor de
     tela encontra uma linha a mais, não um componente estranho à
     tabela. [hidden] tem que vencer qualquer display de classe (lição
     do kit) — por isso a regra abaixo é explícita, não implícita.
     ------------------------------------------------------------ */
  .wm-table-responsive__detail-row[hidden] {
    display: none;
  }
  .wm-table-responsive__detail-cell {
    padding: 0;
    border-bottom: var(--wm-border-width-hairline) solid var(--wm-separator);
  }
  .wm-table-responsive__table tbody tr:last-child > .wm-table-responsive__detail-cell {
    border-bottom: none;
  }
  .wm-table-responsive__detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--wm-space-3) var(--wm-space-6);
    margin: 0;
    padding: var(--wm-space-5) var(--wm-space-6) var(--wm-space-6)
      calc(var(--wm-control-height-md) + var(--wm-space-6));
    background: var(--wm-surface-secondary);
  }
  .wm-table-responsive__detail-term {
    color: var(--wm-label-tertiary);
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-medium);
    white-space: nowrap;
  }
  .wm-table-responsive__detail-value {
    margin: 0;
    color: var(--wm-label-primary);
    font-size: var(--wm-font-size-subheadline);
  }

  /* ------------------------------------------------------------
     Reorganização — CONTAINER query, não media query: reage à
     largura do PRÓPRIO wm-table-responsive, não do viewport. A mesma
     tabela dentro de uma sidebar de ~280px já mostra a forma estreita,
     mesmo num monitor de 1440px (ver variante "sidebar").

     Os limiares espelham --wm-bp-xs (420) e --wm-bp-md (680) de
     foundation/tokens.css — @container não aceita var() na condição.
     Mudou o token lá, espelha o valor aqui.
     ------------------------------------------------------------ */

  /* < 680px [--wm-bp-md]: prioridade 3 sai da grade, alcance aparece */
  @container wm-table-responsive (max-width: 679px) {
    [data-wm-prioridade="3"] {
      display: none;
    }
    .wm-table-responsive__toggle-col,
    .wm-table-responsive__toggle-cell {
      display: table-cell;
    }
  }

  /* < 420px [--wm-bp-xs]: prioridade 2 também sai */
  @container wm-table-responsive (max-width: 419px) {
    [data-wm-prioridade="2"] {
      display: none;
    }
  }

  /* >= 680px [--wm-bp-md]: nada escondido — trava a linha de detalhe
     fechada, mesmo que tenha sobrado aberta de uma largura menor
     (table-responsive.js também sincroniza aria-expanded neste ponto). */
  @container wm-table-responsive (min-width: 680px) {
    .wm-table-responsive__detail-row {
      display: none !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-table-responsive__toggle,
    .wm-table-responsive__toggle .wm-icon {
      transition: none;
    }
  }
}