/*
  Wortic macOS UI Kit — Card / Group Box / Well / Stat Card
  wm-card

  Glowup 2026: sombras em camadas (anel hairline + contato + ambiente),
  cantos generosos, hover que eleva de verdade, glass com blur alto e
  borda interna clara, stat card com números tabulares e delta em pílula.
*/

@layer components {
  .wm-card {
    background: var(--wm-surface-elevated);
    border-radius: var(--wm-radius-xl);
    padding: var(--wm-space-8);
    box-shadow:
      0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-1),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .wm-card--compact {
    padding: var(--wm-space-5);
    border-radius: var(--wm-radius-lg);
  }

  .wm-card--inset {
    background: var(--wm-surface-secondary);
    box-shadow: none;
  }

  /* Sombra em 3 camadas: anel + contato + ambiente. */
  .wm-card--elevated {
    box-shadow:
      0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-2),
      var(--wm-shadow-3),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }

  .wm-card--interactive {
    cursor: pointer;
    transition:
      transform var(--wm-duration-fast) var(--wm-ease-emphasized),
      box-shadow var(--wm-duration-fast) var(--wm-ease-emphasized);
  }

  /* Card clicável é elemento REAL (<button>/<a>), nunca div com onclick.
     O reset abaixo tira a cara de botão/link sem tirar a semântica. */
  button.wm-card,
  a.wm-card {
    display: block;
    inline-size: 100%;
    text-align: start;
    font: inherit;
    color: inherit;
    border: 0;
    margin: 0;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
  }
  .wm-card--interactive: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),
      var(--wm-shadow-2);
  }
  .wm-card--interactive:hover {
    transform: translateY(-1px);
    box-shadow:
      0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-2),
      var(--wm-shadow-3),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }
  .wm-card--interactive:active {
    transform: translateY(0) scale(0.985);
    box-shadow:
      0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-1);
  }

  /* Anel duplo: accent + halo alpha. */
  .wm-card--selected {
    box-shadow:
      0 0 0 1px var(--wm-accent),
      0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill),
      var(--wm-shadow-1);
  }

  .wm-card--glass {
    background: var(--wm-material-popover-bg);
    backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
    -webkit-backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
    box-shadow:
      inset 0 0 0 var(--wm-border-width-hairline) var(--wm-material-glass-border),
      var(--wm-shadow-2),
      var(--wm-shadow-3);
  }

  .wm-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--wm-space-5);
  }
  .wm-card__title {
    font-size: var(--wm-font-size-headline);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-letter-spacing-tight);
    color: var(--wm-label-primary);
  }
  .wm-card__subtitle {
    font-size: var(--wm-font-size-subheadline);
    color: var(--wm-label-tertiary);
    margin-block-start: var(--wm-space-1);
  }

  /* Corpo e rodapé. Existiam na MARCAÇÃO de várias telas (page-layouts) e em
     nenhuma regra: o navegador desenhava dois <div> nus e o botão do rodapé
     encostava no texto (margin-top medido: 0px). O cartão já dá o padding
     externo; o que faltava era o respiro ENTRE as partes. */
  .wm-card__body {
    font-size: var(--wm-font-size-subheadline);
    color: var(--wm-label-secondary);
  }
  .wm-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wm-space-3);
    margin-block-start: var(--wm-space-6);
  }

  /* Group Box — título como legend, contorno hairline discreto */
  .wm-group-box {
    border: var(--wm-border-width-hairline) solid var(--wm-separator);
    border-radius: var(--wm-radius-lg);
    padding: var(--wm-space-6);
  }
  .wm-group-box__legend {
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-letter-spacing-wide);
    color: var(--wm-label-secondary);
    margin-block-end: var(--wm-space-4);
  }

  /* Well — superfície recuada (oposto de elevated) */
  .wm-well {
    background: var(--wm-surface-sunken);
    border-radius: var(--wm-radius-md);
    padding: var(--wm-space-5);
    box-shadow:
      inset 0 1px 3px rgba(0, 0, 0, 0.07),
      inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
  }

  /* Stat card — número grande + label + delta em pílula */
  .wm-stat-card {
    background: var(--wm-surface-elevated);
    border-radius: var(--wm-radius-xl);
    padding: var(--wm-space-8);
    box-shadow:
      0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-1),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  .wm-stat-card__label {
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-medium);
    color: var(--wm-label-secondary);
    margin-block-end: var(--wm-space-3);
  }
  .wm-stat-card__value {
    font-size: var(--wm-font-size-title1);
    font-weight: var(--wm-font-weight-bold);
    letter-spacing: var(--wm-letter-spacing-tighter);
    font-variant-numeric: tabular-nums;
    line-height: var(--wm-line-height-tight);
    color: var(--wm-label-primary);
  }
  .wm-stat-card__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-1);
    margin-block-start: var(--wm-space-4);
    padding-block: var(--wm-space-1);
    padding-inline: var(--wm-space-4);
    border-radius: var(--wm-radius-pill);
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: var(--wm-line-height-normal);
  }
  .wm-stat-card__delta--positive {
    color: var(--wm-success);
    background: var(--wm-success-fill);
  }
  .wm-stat-card__delta--negative {
    color: var(--wm-error);
    background: var(--wm-error-fill);
  }

  /* Par [hidden] de toda classe que define display — sem isto,
     esconder via atributo perde para a especificidade da classe. */
  .wm-card__header[hidden],
  .wm-stat-card__delta[hidden],
  button.wm-card[hidden],
  a.wm-card[hidden] {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-card--interactive {
      transition: none;
    }
    .wm-card--interactive:hover,
    .wm-card--interactive:active {
      transform: none;
    }
  }
}