/* =========================================================================
   v27g · MELHORIAS DE UX (acessibilidade · affordances · ritmo · feedback)
   ========================================================================= */

/* Busca dinâmica de pessoas (FONTE ÚNICA js/people-search.js) — realce global cross-produto:
   nome em cinza escuro, letras casadas em negrito. Usado por todos os campos de localização. */
.pp-name { color: #374151; }
.pp-hl { color: #0f172a; font-weight: 700; }

/* === Variáveis de espaçamento (8pt grid) e tokens visuais === */
.app-container.teams-layout {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 1px 4px rgba(0,0,0,.03);
  --shadow-2: 0 4px 12px rgba(43,99,148,.10), 0 2px 4px rgba(43,99,148,.05);
  --shadow-3: 0 8px 28px rgba(0,0,0,.10);
  --easing: cubic-bezier(.2,0,0,1);
  --color-primary: #2B6394;
  --color-primary-hover: #1F5085;
  --color-primary-tint: rgba(43,99,148,.08);
  --color-success: #107c10;
  --color-warning: #c47e00;
  --color-danger:  #c4262e;
  --t-xs: 11px;
  --t-sm: 12.5px;
  --t-md: 14px;
  --t-lg: 16px;
  --t-xl: 20px;
  --t-2xl: 22px;
  --t-3xl: 28px;
}

/* === Focus visível (WCAG · keyboard navigation) === */
.app-container.teams-layout *:focus { outline: none; }
.app-container.teams-layout button:focus-visible,
.app-container.teams-layout a:focus-visible,
.app-container.teams-layout input:focus-visible,
.app-container.teams-layout select:focus-visible,
.app-container.teams-layout textarea:focus-visible,
.app-container.teams-layout [tabindex]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.app-container.teams-layout .nav-link:focus-visible,
.app-container.teams-layout .chip:focus-visible,
.app-container.teams-layout .tab:focus-visible,
.app-container.teams-layout .cat-card:focus-visible,
.app-container.teams-layout .ns-card:focus-visible,
.app-container.teams-layout .product-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* === Tap targets · mínimo 44×44 (Apple HIG · WCAG 2.5.5) === */
@media (pointer: coarse), (max-width: 768px) {
  .app-container.teams-layout .nav-link { min-height: 44px; }
  .app-container.teams-layout .chip { min-height: 36px; padding: 0 16px; }
  .app-container.teams-layout .tab { min-height: 44px; }
  .app-container.teams-layout .cat-card,
  .app-container.teams-layout .ns-card { padding: 20px; }
}

/* === Skip-to-content (screen reader · keyboard) === */
.skip-link {
  position: absolute;
  top: -40px;
  left: 12px;
  background: var(--color-primary);
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  z-index: 1000;
  transition: top .15s var(--easing);
}
.skip-link:focus-visible { top: 12px; }

/* === Press feedback · sensação tátil em botões/cards === */
.nav-link:active:not(.active),
.chip:active,
.tab:active,
.cat-card:active,
.ns-card:active,
.product-item:active,
.teams-search-btn:active,
.prod-stub-back:active {
  transform: scale(.98);
}

/* === Cursor pointer explícito === */
.nav-link, .chip, .tab, .cat-card, .ns-card, .product-item,
.teams-search-btn, .prod-stub-back, [data-go], [data-nav],
.nav-logout-btn, .mt-hamburger {
  cursor: pointer;
}

/* === Disabled states === */
button:disabled,
[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* === Tooltip pattern (acessível · focus também mostra) === */
.product-item:focus-visible .product-tooltip { opacity: 1; }

/* === Reading rhythm · max-width pra texto longo (60-75 char) === */
.page-wrap p,
.page-sub,
.cat-desc,
.ns-desc,
.prod-stub p {
  max-width: 68ch;
  line-height: 1.55;
}
.prod-stub p { margin-left: auto; margin-right: auto; }

/* === Hierarquia tipográfica (escala consistente) === */
.page-title { font-size: var(--t-2xl); line-height: 1.2; }
.section-title { font-size: var(--t-xs); }
.page-sub { font-size: var(--t-md); }
.cat-title, .ns-title { font-size: var(--t-md); line-height: 1.35; }
.cat-desc, .ns-desc { font-size: var(--t-sm); line-height: 1.5; }
.cat-cta, .ns-cta { font-size: var(--t-xs); }
.chip { font-size: var(--t-sm); }
.tab { font-size: var(--t-sm); }

/* === Hint de atalho de teclado na search === */
.teams-search-btn .kbd-hint {
  margin-left: auto;
  padding: 2px 6px;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: #6b6b6b;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* === Empty state pattern === */
.empty-state {
  padding: 60px 24px;
  text-align: center;
  color: #6b6b6b;
  font-size: var(--t-md);
}
.empty-state-icon {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  background: rgba(43,99,148,.08);
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--color-primary);
}
.empty-state-title {
  font-size: var(--t-lg);
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 6px;
}
.empty-state-desc { max-width: 340px; margin: 0 auto; }

/* === Loading skeleton · placeholder pulse === */
.skeleton {
  background: linear-gradient(90deg, #eef0f3 0%, #f7f8fa 50%, #eef0f3 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
  border-radius: 6px;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === Notificações aria-live escondidas visualmente === */
.sr-only,
[aria-live="polite"]:empty { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* === Animações reduzidas se usuário prefere === */
@media (prefers-reduced-motion: reduce) {
  .app-container.teams-layout *,
  .app-container.teams-layout *::before,
  .app-container.teams-layout *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* === Alto contraste (prefers-contrast) === */
@media (prefers-contrast: more) {
  .app-container.teams-layout .chip,
  .app-container.teams-layout .cat-card,
  .app-container.teams-layout .ns-card,
  .app-container.teams-layout .adherence-card,
  .app-container.teams-layout .stats-card {
    border-color: #323130;
    box-shadow: none;
  }
  .app-container.teams-layout .navigation .nav-link.active {
    outline: 2px solid #fff;
  }
}

/* === Espaçamento harmônico nas páginas === */
.page-head { margin-bottom: var(--sp-5); }
.filter-row + .filter-row { margin-top: var(--sp-2); }

/* === aria-current visualmente reforçado === */
[aria-current="page"] { font-weight: 600; }

/* === Botões primários com sombra no hover === */
.prod-stub-back,
.btn-solicitar,
.btn-aprovar {
  transition: background .15s var(--easing), transform .12s var(--easing), box-shadow .15s var(--easing);
}
.prod-stub-back:hover,
.btn-solicitar:hover,
.btn-aprovar:hover {
  box-shadow: 0 2px 6px rgba(43,99,148,.25);
}

/* === Scrollbar discreta estilo Fluent === */
.app-container.teams-layout *::-webkit-scrollbar { width: 10px; height: 10px; }
.app-container.teams-layout *::-webkit-scrollbar-track { background: transparent; }
.app-container.teams-layout *::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.12);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.app-container.teams-layout *::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.22);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* === Status pills com ícone semântico (cor + glyph · WCAG 1.4.1) === */
.pill { display: inline-flex; gap: 4px; align-items: center; }

/* === Spacing utilities === */
.page-wrap { padding: var(--sp-5) var(--sp-6); }