.watchlist-header-star {
  width: 2rem;
  height: 2rem;
}

.watchlist-table-star-column {
  width: 2.25rem;
}

#watchlist-table tbody td {
  vertical-align: middle;
}

#watchlist-table .watchlist-table-company-cell img {
  width: 2rem;
  height: 2rem;
}

#watchlist-table .watchlist-icon-wrapper {
  vertical-align: middle;
}

.watchlist-page .earnings-search-input {
  max-width: 280px;
}

.watchlist-page .dropdown-card > div {
  min-width: 125px;
}

.watchlist-company-logo {
  width: 1.75rem;
  height: 1.75rem;
}

.watchlist-company-logo[data-company-type="miner"],
.watchlist-company-type-pill[data-company-type="miner"] {
  color: var(--accent-color-3);
  background: color-mix(in srgb, var(--accent-color-3) 18%, transparent);
}

.watchlist-company-logo[data-company-type="ai_infrastructure"],
.watchlist-company-type-pill[data-company-type="ai_infrastructure"] {
  color: var(--bs-success);
  background: color-mix(in srgb, var(--bs-success) 18%, transparent);
}

.watchlist-company-logo[data-company-type="btc_treasury"],
.watchlist-company-type-pill[data-company-type="btc_treasury"] {
  color: var(--btc-color);
  background: color-mix(in srgb, var(--btc-color) 22%, transparent);
}

.watchlist-company-logo[data-company-type="eth_treasury"],
.watchlist-company-type-pill[data-company-type="eth_treasury"] {
  color: var(--bs-info);
  background: color-mix(in srgb, var(--bs-info) 20%, transparent);
}

.watchlist-company-logo[data-company-type="sol_treasury"],
.watchlist-company-type-pill[data-company-type="sol_treasury"] {
  color: var(--accent-color-2);
  background: color-mix(in srgb, var(--accent-color-2) 20%, transparent);
}

.watchlist-search-results {
  max-height: 80vh;
  scrollbar-gutter: stable;
}

.watchlist-search-company {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0.25rem 0.75rem;
}

.watchlist-search-company-types {
  grid-column: 1 / -1;
}

.watchlist-search-company-action-icon {
  width: 2.25rem;
  height: 2.25rem;
}

@media (hover: hover) {
  .watchlist-search-company-action-pill--remove:hover,
  .watchlist-search-company-action-pill--remove:focus-visible,
  .watchlist-search-company-action-icon--remove:hover,
  .watchlist-search-company-action-icon--remove:focus-visible {
    color: #fff !important;
    background: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
  }
}

.watchlist-empty-state-icon {
  box-shadow: 0 8px 24px rgba(var(--bs-primary-rgb), 0.25);
}

.watchlist-empty-state-hero {
  background: radial-gradient(
      ellipse 80% 60% at 50% 0%,
      rgb(154 98 230 / 18%) 0%,
      transparent 70%
    ),
    var(--bs-body-bg-2, #fff);
}

[data-bs-theme="dark"] .watchlist-empty-state-hero {
  background: radial-gradient(
      ellipse 80% 60% at 50% 0%,
      rgb(154 98 230 / 28%) 0%,
      transparent 70%
    ),
    var(--bs-body-bg-2, #202020);
}

.watchlist-empty-state-hero .watchlist-empty-state-icon {
  width: 4rem;
  height: 4rem;
}

.watchlist-empty-state-lead {
  max-width: 36rem;
}

.watchlist-popular-companies-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.watchlist-popular-company-card:hover,
.watchlist-popular-company-card:focus-visible {
  box-shadow: 0 4px 16px rgba(var(--bs-primary-rgb), 0.18);
  transform: translateY(-1px);
}

.watchlist-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.watchlist-benefit-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--accent-color-3);
  background: color-mix(in srgb, var(--accent-color-3) 18%, transparent);
}

.watchlist-benefit-icon[data-perk="metrics"] {
  color: var(--btc-color);
  background: color-mix(in srgb, var(--btc-color) 22%, transparent);
}

.watchlist-benefit-icon[data-perk="compare"] {
  color: var(--bs-info);
  background: color-mix(in srgb, var(--bs-info) 20%, transparent);
}

@media (width < 1200px) {
  .watchlist-popular-companies-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width < 768px) {
  #watchlist-table {
    font-size: 0.85rem;
  }

  .watchlist-header-star {
    width: 1.75rem;
    height: 1.75rem;
  }

  .watchlist-company-logo {
    width: 1.5rem;
    height: 1.5rem;
  }

  .watchlist-benefits-grid {
    grid-template-columns: 1fr;
  }
}

@media (width < 576px) {
  .watchlist-popular-companies-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}