/* =============================================================
   WORKOVA STOCKS — account.css
   Pricing, Portfolio, Watchlist page styles
   ============================================================= */

/* ── PRICING PAGE ────────────────────────────────────────────── */
.pricing-page-hero { text-align: center; padding: var(--sp-16) 0 var(--sp-10); }

.billing-toggle {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--sp-3);
  background:    var(--surface-subtle);
  border-radius: var(--radius-pill);
  padding:       4px;
  margin-top:    var(--sp-6);
}

.billing-toggle__btn {
  padding:       8px 20px;
  border-radius: var(--radius-pill);
  border:        none;
  background:    none;
  font-size:     var(--type-sm);
  font-weight:   600;
  color:         var(--text-secondary);
  cursor:        pointer;
  transition:    background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.billing-toggle__btn.active {
  background: var(--surface-card);
  color:      var(--text-primary);
  box-shadow: var(--shadow-xs);
}

.billing-toggle__save {
  font-size: var(--type-xs);
  font-weight: 700;
  color: var(--clr-gain);
  background: var(--clr-gain-bg);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-left: 4px;
}

.pricing-compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pricing-compare-table th, .pricing-compare-table td {
  padding: var(--sp-3) var(--sp-5);
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--type-sm);
}

.pricing-compare-table th:first-child, .pricing-compare-table td:first-child {
  text-align: left;
  color: var(--text-secondary);
  font-weight: 500;
}

.pricing-compare-table thead th {
  background: var(--surface-subtle);
  font-weight: 700;
  color: var(--text-primary);
}

.pricing-compare-table .check-yes { color: var(--clr-gain); }
.pricing-compare-table .check-no  { color: var(--border-strong); }


/* ── PORTFOLIO PAGE ──────────────────────────────────────────── */
.portfolio-page { padding-top: var(--sp-8); padding-bottom: var(--sp-20); }

.portfolio-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.allocation-legend {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.allocation-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.allocation-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.allocation-label { font-size: var(--type-sm); color: var(--text-secondary); flex: 1; }

.allocation-value { font-family: var(--font-data); font-size: var(--type-sm); font-weight: 600; color: var(--text-primary); }

.holdings-table-wrap {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow-x: auto;
}


/* ── IMPORT BANNER ───────────────────────────────────────────── */
.import-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--clr-primary-muted);
  border: 1px solid rgba(37,99,235,0.15);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}

.import-banner__icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--surface-card); display: flex; align-items: center; justify-content: center;
  color: var(--clr-primary); flex-shrink: 0;
}

.broker-logos {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2);
}

.broker-chip {
  font-size: var(--type-xs); font-weight: 600; color: var(--text-secondary);
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  padding: 3px 10px; border-radius: var(--radius-pill);
}


/* ── WATCHLIST PAGE ──────────────────────────────────────────── */
.watchlist-page { padding-top: var(--sp-8); padding-bottom: var(--sp-20); }

.watchlist-tabs {
  display: flex; gap: 2px; background: var(--surface-subtle);
  border-radius: var(--radius-sm); padding: 3px; width: fit-content; margin-bottom: var(--sp-5);
  overflow-x: auto;
}

.alert-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-subtle);
}
.alert-row:last-child { border-bottom: none; }

@media (max-width: 767px) {
  .portfolio-summary { grid-template-columns: 1fr 1fr; }
}