/* ferramentas-dropdown.css - dropdown hover do header "Ferramentas".
 * Identidade Breeze (vars base.css). Desktop-only (>768px); mobile usa
 * hamburger menu existente.
 */

.fd-wrap { position: relative; display: inline-block; }

/* Mantém o anchor original (link Ferramentas) com styling existente do nav-links.
 * Apenas adiciona indicador de submenu. */
.fd-trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fd-trigger::after {
  content: "\25BE"; /* ▾ */
  font-size: 10px;
  opacity: .7;
  transition: transform .15s ease, opacity .15s ease;
}
.fd-wrap.fd-open .fd-trigger::after {
  transform: rotate(180deg);
  opacity: 1;
}

/* Painel raiz */
.fd-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 10px;
  box-shadow: var(--shh);
  display: none;
  z-index: 1000;
  font-size: 13px;
  color: var(--az);
  /* REV2-A11Y-MISC: responsivo p/ evitar scroll horizontal em zoom 200%/viewport
   * estreito (WCAG 1.4.10 reflow). min-width cede quando a tela aperta. */
  min-width: min(720px, 92vw);
  max-width: min(920px, 96vw);
}
.fd-wrap.fd-open .fd-panel { display: flex; }

/* Colunas */
.fd-col {
  flex: 0 0 auto;
  max-height: 480px;
  overflow-y: auto;
  padding: 8px 0;
}
.fd-col-cats   { width: 240px; border-right: 1px solid var(--bd); }
.fd-col-scores { width: 240px; border-right: 1px solid var(--bd); display: none; }
.fd-col-desc   { width: 280px; padding: 16px; display: none; align-self: flex-start; }

.fd-wrap.fd-has-cat   .fd-col-scores { display: block; }
.fd-wrap.fd-has-score .fd-col-desc   { display: block; }

/* Itens. Especificidade alta para vencer .nav-links a { color: rgba(255,255,255,.75) } */
.fd-panel .fd-item,
.nav-links .fd-panel a.fd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  text-decoration: none;
  color: var(--az);
  background: transparent;
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
  line-height: 1.35;
  border-left: 3px solid transparent;
  border-radius: 0;
}
.fd-panel .fd-item:hover,
.fd-panel .fd-item.fd-active,
.fd-panel .fd-item:focus-visible,
.nav-links .fd-panel a.fd-item:hover,
.nav-links .fd-panel a.fd-item.fd-active {
  background: rgba(1, 169, 206, .08);
  color: var(--ci);
  border-left-color: var(--ci);
  outline: none;
}
.fd-item-label  { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-item-count  { font-size: 11px; color: var(--ci2); }
.fd-item-arrow  { font-size: 11px; color: var(--ci2); flex-shrink: 0; }

/* Coluna de descrição */
.fd-desc-title  { font-size: 14px; font-weight: 600; color: var(--az); margin: 0 0 8px; }
.fd-desc-text   { font-size: 12px; line-height: 1.55; color: var(--ci2); margin: 0; }
.fd-desc-empty  { font-size: 12px; color: var(--ci2); font-style: italic; }

/* Mobile: oculta dropdown; link Ferramentas mantém comportamento padrão (→ apps.html) */
@media (max-width: 768px) {
  .fd-trigger::after { display: none; }
  .fd-panel { display: none !important; }
  .fd-wrap.fd-open .fd-trigger::after { display: none; }
}