/*
  Wortic macOS UI Kit — Nav Sidebar
  wm-nav-sidebar — navegação lateral de app: recolhível a um trilho de
  ícones, seções tituladas, contadores, nível aninhado com linha-guia e
  rodapé de conta. Diferente do wm-sidebar (vibrancy estilo Finder),
  este é o painel de navegação de produto: seleção em tint de accent,
  não em pílula sólida. Comportamento (recolher, disclosure, seleção)
  em nav-sidebar.js.
*/

@layer components {
  .wm-nav-sidebar {
    display: flex;
    flex-direction: column;
    width: var(--wm-nav-sidebar-width);
    flex: none;
    min-height: 0;
    background: var(--wm-surface-sidebar);
    border-inline-end: var(--wm-border-width-hairline) solid
      color-mix(in srgb, var(--wm-separator) 85%, transparent);
    transition: width var(--wm-duration-normal) var(--wm-ease-standard);
  }

  .wm-nav-sidebar--glass {
    background: var(--wm-material-sidebar-bg);
    backdrop-filter: blur(var(--wm-material-blur-strong))
      saturate(var(--wm-material-saturate-strong));
    -webkit-backdrop-filter: blur(var(--wm-material-blur-strong))
      saturate(var(--wm-material-saturate-strong));
  }

  /* ---------- Cabeçalho: marca + botão de recolher ---------- */

  .wm-nav-sidebar__header {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--wm-space-4);
    padding: var(--wm-space-6);
  }

  .wm-nav-sidebar__brand-mark {
    width: var(--wm-control-height-md);
    height: var(--wm-control-height-md);
    border-radius: var(--wm-radius-settings-icon);
    flex: none;
    box-shadow: 0 0 0 0.5px var(--wm-separator),
      0 1px 2px hsl(var(--wm-shadow-color) / 0.14);
  }

  .wm-nav-sidebar__brand-text {
    min-width: 0;
  }
  .wm-nav-sidebar__brand-name {
    font-size: var(--wm-font-size-headline);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-tracking-headline);
    color: var(--wm-label-primary);
    line-height: var(--wm-line-height-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wm-nav-sidebar__brand-sub {
    font-size: var(--wm-font-size-caption);
    letter-spacing: var(--wm-tracking-caption);
    color: var(--wm-label-tertiary);
    line-height: var(--wm-line-height-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .wm-nav-sidebar__collapse {
    margin-inline-start: auto;
    flex: none;
    width: var(--wm-control-height-md);
    height: var(--wm-control-height-md);
    display: inline-grid;
    place-items: center;
    border: none;
    background: transparent;
    border-radius: var(--wm-radius-md);
    color: var(--wm-label-secondary);
    cursor: pointer;
    transition: color var(--wm-duration-fast) var(--wm-ease-standard),
      background-color var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-nav-sidebar__collapse:hover {
    color: var(--wm-label-primary);
    background: var(--wm-fill-secondary);
  }
  .wm-nav-sidebar__collapse: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);
  }

  /* ---------- Corpo rolável ---------- */

  .wm-nav-sidebar__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--wm-space-2) var(--wm-space-5) var(--wm-space-6);
    scrollbar-width: thin;
    scrollbar-color: var(--wm-scrollbar-thumb) transparent;
  }

  .wm-nav-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-1);
  }

  .wm-nav-sidebar__section {
    margin-bottom: var(--wm-space-6);
  }
  .wm-nav-sidebar__section-title {
    display: block;
    padding: var(--wm-space-3) var(--wm-space-5);
    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);
  }

  /* ---------- Item ---------- */

  .wm-nav-sidebar__item {
    display: flex;
    align-items: center;
    gap: var(--wm-space-5);
    width: 100%;
    height: var(--wm-control-height-lg);
    padding-inline: var(--wm-space-5);
    border: none;
    background: transparent;
    border-radius: var(--wm-radius-md);
    font-size: var(--wm-font-size-body);
    font-weight: var(--wm-font-weight-medium);
    letter-spacing: var(--wm-tracking-body);
    color: var(--wm-label-secondary);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: color var(--wm-duration-fast) var(--wm-ease-standard),
      background-color var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-nav-sidebar__item:hover {
    color: var(--wm-label-primary);
    background: var(--wm-fill-secondary);
  }
  .wm-nav-sidebar__item:active:not(.is-selected) {
    background: var(--wm-fill-primary);
  }
  .wm-nav-sidebar__item: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-nav-sidebar__item.is-disabled {
    color: var(--wm-label-quaternary);
    pointer-events: none;
  }

  /* Seleção em tint: fundo accent-fill + texto accent-text (funciona
     nos dois temas; no dark o accent-text clareia sozinho). */
  .wm-nav-sidebar__item.is-selected {
    background: var(--wm-accent-fill);
    color: var(--wm-accent-text);
    font-weight: var(--wm-font-weight-semibold);
  }
  .wm-nav-sidebar__item.is-selected .wm-nav-sidebar__item-icon {
    color: inherit;
  }

  .wm-nav-sidebar__item-icon {
    flex: none;
    display: inline-flex;
    width: var(--wm-icon-md);
    height: var(--wm-icon-md);
    color: var(--wm-label-secondary);
    transition: color var(--wm-duration-fast) var(--wm-ease-standard);
  }

  .wm-nav-sidebar__item-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wm-nav-sidebar__item-count {
    flex: none;
    min-width: var(--wm-control-height-xs);
    height: var(--wm-control-height-xs);
    padding-inline: var(--wm-space-3);
    display: inline-grid;
    place-items: center;
    border-radius: var(--wm-radius-pill);
    background: var(--wm-fill-secondary);
    color: var(--wm-label-secondary);
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-tracking-caption);
    line-height: 1;
  }
  .wm-nav-sidebar__item.is-selected .wm-nav-sidebar__item-count {
    background: var(--wm-accent-fill-strong);
    color: var(--wm-accent-text);
  }

  /* ---------- Nível aninhado ---------- */

  .wm-nav-sidebar__item-disclosure {
    flex: none;
    display: inline-flex;
    color: var(--wm-label-quaternary);
    transition: transform var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-nav-sidebar__item[aria-expanded="true"] .wm-nav-sidebar__item-disclosure {
    transform: rotate(90deg);
  }

  .wm-nav-sidebar__nested {
    list-style: none;
    margin: var(--wm-space-1) 0 var(--wm-space-2);
    margin-inline-start: calc(var(--wm-space-5) + var(--wm-icon-md) / 2);
    padding: 0;
    padding-inline-start: var(--wm-space-5);
    border-inline-start: var(--wm-border-width-thin) solid var(--wm-separator);
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-1);
  }
  .wm-nav-sidebar__nested .wm-nav-sidebar__item {
    height: var(--wm-control-height-md);
    font-weight: var(--wm-font-weight-regular);
  }
  .wm-nav-sidebar__item[aria-expanded="false"] + .wm-nav-sidebar__nested {
    display: none;
  }

  /* ---------- Rodapé de conta ---------- */

  .wm-nav-sidebar__footer {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--wm-space-5);
    padding: var(--wm-space-5) var(--wm-space-6);
    border-top: var(--wm-border-width-hairline) solid
      color-mix(in srgb, var(--wm-separator) 85%, transparent);
  }

  .wm-nav-sidebar__footer-avatar {
    flex: none;
    width: var(--wm-control-height-lg);
    height: var(--wm-control-height-lg);
    display: inline-grid;
    place-items: center;
    border-radius: var(--wm-radius-pill);
    background: var(--wm-accent-fill);
    color: var(--wm-accent-text);
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-tracking-caption);
    overflow: hidden;
  }

  .wm-nav-sidebar__footer-info {
    flex: 1 1 auto;
    min-width: 0;
  }
  .wm-nav-sidebar__footer-name {
    font-size: var(--wm-font-size-body);
    font-weight: var(--wm-font-weight-medium);
    letter-spacing: var(--wm-tracking-body);
    color: var(--wm-label-primary);
    line-height: var(--wm-line-height-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wm-nav-sidebar__footer-mail {
    font-size: var(--wm-font-size-caption);
    letter-spacing: var(--wm-tracking-caption);
    color: var(--wm-label-tertiary);
    line-height: var(--wm-line-height-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .wm-nav-sidebar__footer-more {
    flex: none;
    width: var(--wm-control-height-md);
    height: var(--wm-control-height-md);
    display: inline-grid;
    place-items: center;
    border: none;
    background: transparent;
    border-radius: var(--wm-radius-md);
    color: var(--wm-label-secondary);
    cursor: pointer;
    transition: background-color var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-nav-sidebar__footer-more:hover {
    background: var(--wm-fill-secondary);
  }
  .wm-nav-sidebar__footer-more:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
  }

  /* ---------- Recolhida: trilho de ícones ---------- */

  .wm-nav-sidebar.is-collapsed {
    width: var(--wm-nav-sidebar-width-collapsed);
  }
  .wm-nav-sidebar.is-collapsed .wm-nav-sidebar__header {
    flex-direction: column;
    gap: var(--wm-space-4);
  }
  .wm-nav-sidebar.is-collapsed .wm-nav-sidebar__collapse {
    margin-inline-start: 0;
  }
  .wm-nav-sidebar.is-collapsed .wm-nav-sidebar__brand-text,
  .wm-nav-sidebar.is-collapsed .wm-nav-sidebar__section-title,
  .wm-nav-sidebar.is-collapsed .wm-nav-sidebar__item-label,
  .wm-nav-sidebar.is-collapsed .wm-nav-sidebar__item-count,
  .wm-nav-sidebar.is-collapsed .wm-nav-sidebar__item-disclosure,
  .wm-nav-sidebar.is-collapsed .wm-nav-sidebar__nested,
  .wm-nav-sidebar.is-collapsed .wm-nav-sidebar__footer-info,
  .wm-nav-sidebar.is-collapsed .wm-nav-sidebar__footer-more {
    display: none;
  }
  .wm-nav-sidebar.is-collapsed .wm-nav-sidebar__scroll {
    padding-inline: var(--wm-space-3);
  }
  .wm-nav-sidebar.is-collapsed .wm-nav-sidebar__item {
    justify-content: center;
    gap: 0;
    padding-inline: 0;
  }
  .wm-nav-sidebar.is-collapsed .wm-nav-sidebar__footer {
    justify-content: center;
    padding-inline: var(--wm-space-3);
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-nav-sidebar,
    .wm-nav-sidebar__item,
    .wm-nav-sidebar__item-icon,
    .wm-nav-sidebar__item-disclosure,
    .wm-nav-sidebar__collapse,
    .wm-nav-sidebar__footer-more {
      transition: none;
    }
    .wm-nav-sidebar__item[aria-expanded="true"] .wm-nav-sidebar__item-disclosure {
      transform: none;
    }
  }
}