/* Shared styles for the TCG "More ▼" and the right-side "Tools ▼" dropdowns.
 * Used together with /header-responsive.js which renders the buttons and items.
 * Kept in one file so every page that ships these dropdowns gets the same look.
 */

/* Buttons */
.tools-btn {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  height: 32px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  border-radius: 6px;
  white-space: nowrap;
  position: relative;
  box-sizing: border-box;
  font-family: inherit;
}
.tools-btn:hover { background: var(--bg); }
.tools-btn.has-active { color: var(--accent); }

/* Dropdown (shared shape between Tools and TCG-more when injected by the shared module) */
.cdx-dropdown {
  display: none;
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 0;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}
.cdx-dropdown.open { display: block; }
.cdx-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.cdx-dropdown__item:hover { background: var(--bg); }
.cdx-dropdown__item.active { color: var(--accent); font-weight: 600; }
.cdx-dropdown__item .icon { display: inline-flex; align-items: center; }

/* Keep the inline nav-links from wrapping on the way down to 1691px.
 * Uses attribute selectors so it works for pages that wrap their links in
 * class="nav-link" as well as ones that still use inline styles. */
.header-right > a[href="/portfolio"],
.header-right > a[href="/alerts"],
.header-right > a[href="/reports"] { white-space: nowrap; }

/* ≤1690px: flip visibility — hide inline nav-links (via href selector so
 * class vs inline-style pages both work), show the Tools button;
 * hide 5th+ tcg-tab and show the More button. Shared across every page. */
@media (max-width: 1690px) {
  .tcg-nav > .tcg-tab:nth-child(n+5):not(.tcg-more-btn) { display: none !important; }
  .tcg-more-btn { display: flex !important; }
  .header-right > a[href="/portfolio"],
  .header-right > a[href="/alerts"],
  .header-right > a[href="/reports"] { display: none !important; }
  .tools-btn { display: flex !important; }
}