/*
  Wortic macOS UI Kit — Settings Group / Settings Row
  wm-settings — implementação do padrão do macOS System Settings.
  ESTE BLOCO É MUITO IMPORTANTE (ver AGENTS.md): é o jeito canônico de
  montar telas de configuração/preferências na Wortic.

  Glowup 2026: painel branco com anel hairline (sem borda de 1px),
  hairlines internas de 0.5px que não tocam as bordas do painel,
  ícones coloridos com brilho vertical (como os ícones do System Settings).
*/

@layer components {
  .wm-settings {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-10);
    max-width: 580px;
  }

  .wm-settings-group__label {
    font-size: var(--wm-font-size-caption2);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-letter-spacing-wide);
    text-transform: uppercase;
    color: var(--wm-label-tertiary);
    padding-inline: var(--wm-space-7);
    margin-bottom: var(--wm-space-3);
  }

  /* Painel: superfície primária + anel hairline + sombra de contato.
     Nada de border sólida de 1px — o macOS assenta o painel com sombra. */
  .wm-settings-group {
    background: var(--wm-surface-primary);
    border-radius: var(--wm-radius-settings-group, 12px);
    box-shadow:
      0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-1);
    overflow: hidden;
  }

  .wm-settings-group__footer {
    padding: var(--wm-space-3) var(--wm-space-7) 0;
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
    line-height: var(--wm-line-height-relaxed);
  }

  .wm-settings-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--wm-space-6);
    min-height: 44px;
    padding: var(--wm-space-5) var(--wm-space-7);
  }

  /* Hairline interna de 0.5px, recuada — não toca as bordas do painel. */
  .wm-settings-row + .wm-settings-row::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: var(--wm-space-7);
    border-top: var(--wm-border-width-hairline) solid var(--wm-separator);
    pointer-events: none;
  }

  /* Ícone colorido estilo System Settings: cor chapada por baixo
     (inclusive via style="background:#xxx") + verniz vertical e
     relevo aplicados por cima, para qualquer cor. */
  .wm-settings-row__icon {
    position: relative;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: var(--wm-radius-settings-icon, 7px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--wm-accent);
    box-shadow:
      inset 0 0.5px 0 rgba(255, 255, 255, 0.34),
      inset 0 -0.5px 0 rgba(0, 0, 0, 0.12),
      0 0 0 var(--wm-border-width-hairline) rgba(0, 0, 0, 0.06),
      0 1px 1.5px rgba(0, 0, 0, 0.14);
  }
  .wm-settings-row__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.22),
      rgba(255, 255, 255, 0.04) 55%,
      rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
  }
  .wm-settings-row__icon .wm-icon {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 0.5px 0.5px rgba(0, 0, 0, 0.22));
  }

  .wm-settings-row__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .wm-settings-row__label {
    font-size: var(--wm-font-size-body);
    color: var(--wm-label-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wm-settings-row__desc {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
    line-height: var(--wm-line-height-normal);
    white-space: normal;
  }

  .wm-settings-row__control {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--wm-space-3);
  }

  /* Linha inteira clicável (ex: navega para subtela) */
  .wm-settings-row--link {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-settings-row--link:hover {
    background: var(--wm-fill-quaternary);
  }
  .wm-settings-row--link:active {
    background: var(--wm-fill-tertiary);
  }
  .wm-settings-row--link .wm-settings-row__chevron {
    flex: none;
    color: var(--wm-label-quaternary);
    transition:
      color var(--wm-duration-fast) var(--wm-ease-standard),
      transform var(--wm-duration-fast) var(--wm-ease-emphasized);
  }
  .wm-settings-row--link:hover .wm-settings-row__chevron {
    color: var(--wm-label-tertiary);
    transform: translateX(1px);
  }

  /* Densidade compacta */
  [data-density="compact"] .wm-settings-row {
    min-height: 32px;
    padding-block: var(--wm-space-3);
  }
  [data-density="comfortable"] .wm-settings-row {
    min-height: 56px;
    padding-block: var(--wm-space-6);
  }
}