/* watchlist-table.css — Clean table UI for watchlist (dark theme)
   v2: unified onto the app's shared design tokens from index.css instead
   of a parallel --wl-* palette. This file no longer defines its own
   :root — every color/font below references the app's real tokens
   (with hardcoded fallbacks matching index.css's current values, same
   pattern stock-detail.css already uses). If index.css's palette changes,
   this file now follows automatically instead of drifting out of sync. */

#watchlist-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  overflow-y: auto;
  padding: 20px;
  transition: opacity 0.2s;
}

#watchlist-overlay.watchlist-hidden {
  display: none;
}

.watchlist-modal {
  background: var(--bg-tertiary, #14171F);
  color: var(--text-primary, #ECEEF2);
  border: 1px solid var(--border-subtle, rgba(255,255,255,.08));
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 1400px;
  margin-top: 40px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family, "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif);
}

.watchlist-modal.watchlist-table-modal {
  max-width: 1400px;
}

.watchlist-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,.08));
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.watchlist-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--text-primary, #ECEEF2);
}

.watchlist-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-secondary, #9AA1AC);
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.watchlist-close:hover {
  background: var(--bg-hover, rgba(255,255,255,.025));
  color: var(--text-primary, #ECEEF2);
}

.watchlist-toolbar {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,.08));
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.watchlist-add-btn,
.watchlist-refresh-btn {
  padding: 7px 14px;
  border-radius: var(--radius-sm, 6px);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.watchlist-add-btn {
  background: var(--brass, #C9A867);
  color: white;
  border: none;
}

.watchlist-add-btn:hover {
  background: var(--brass-2, #E4C98A);
  box-shadow: 0 2px 8px rgba(201, 168, 103, 0.3);
}

.watchlist-refresh-btn {
  background: var(--surface, #14171F);
  color: var(--text-primary, #ECEEF2);
  border: 1px solid var(--border-subtle, rgba(255,255,255,.08));
}

.watchlist-refresh-btn:hover {
  background: var(--bg-hover, rgba(255,255,255,.025));
  border-color: var(--text-tertiary, #616875);
}

.watchlist-refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.watchlist-status {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  margin-left: auto;
}

.watchlist-status-success {
  background: var(--bull-bg, rgba(69,222,154,.10));
  color: var(--accent-green, #45DE9A);
}

.watchlist-status-error {
  background: var(--bear-bg, rgba(242,109,109,.10));
  color: var(--accent-red, #F26D6D);
}

.watchlist-status-pending {
  background: rgba(127,178,255,.10);
  color: var(--accent-blue, #7FB2FF);
}

/* Table Container */
.watchlist-table-container {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* iOS momentum scroll for the wide table */
  padding: 0;
}

.watchlist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.watchlist-table thead {
  background: var(--surface, #14171F);
  position: sticky;
  top: 0;
  z-index: 10;
}

.watchlist-table th {
  padding: 9px 14px;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary, #9AA1AC);
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,.08));
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
  white-space: nowrap;
}

.watchlist-table th:hover {
  background: var(--bg-hover, rgba(255,255,255,.025));
  color: var(--text-primary, #ECEEF2);
}

.watchlist-table th.text-right {
  text-align: right;
}

.watchlist-table th.text-center {
  text-align: center;
}

.watchlist-table tbody tr {
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,.08));
  transition: background 0.2s;
}

.watchlist-table tbody tr:hover {
  background: var(--surface, #14171F);
}

.watchlist-table td {
  padding: 6px 14px;
  text-align: left;
  color: var(--text-primary, #ECEEF2);
  vertical-align: middle;
  line-height: 1.3;
}

.watchlist-table td.text-right {
  text-align: right;
  font-family: var(--font-mono, "IBM Plex Mono", "SF Mono", Monaco, "Fira Code", ui-monospace, monospace);
}

.watchlist-table td.text-center {
  text-align: center;
}

.watchlist-table td.font-bold {
  font-weight: 600;
  color: var(--text-primary, #ECEEF2);
}

.watchlist-table td.text-green {
  color: var(--accent-green, #45DE9A);
}

.watchlist-table td.text-red {
  color: var(--accent-red, #F26D6D);
}

/* Action buttons */
.holding-edit-btn,
.holding-delete-btn {
  background: none;
  border: none;
  font-size: 13px;
  cursor: pointer;
  padding: 3px 7px;
  margin: 0 2px;
  color: var(--text-secondary, #9AA1AC);
  transition: all 0.2s;
  border-radius: 3px;
}

.holding-edit-btn:hover {
  background: rgba(127,178,255,.10);
  color: var(--accent-blue, #7FB2FF);
}

.holding-delete-btn:hover {
  background: var(--bear-bg, rgba(242,109,109,.10));
  color: var(--accent-red, #F26D6D);
}

/* Empty state */
.text-center {
  text-align: center;
}

/* Modals */
.watchlist-login-modal,
.watchlist-add-modal,
.watchlist-edit-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  padding: 20px;
}

.watchlist-login-content,
.watchlist-add-content {
  background: var(--surface, #14171F);
  color: var(--text-primary, #ECEEF2);
  border: 1px solid var(--border-subtle, rgba(255,255,255,.08));
  border-radius: var(--radius-lg, 12px);
  padding: 28px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.watchlist-login-content h3,
.watchlist-add-content h3 {
  margin: 0 0 8px 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--text-primary, #ECEEF2);
}

.watchlist-login-content p,
.watchlist-add-content p {
  color: var(--text-secondary, #9AA1AC) !important;
}

.watchlist-add-form,
.watchlist-login-form,
.watchlist-edit-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--text-secondary, #9AA1AC);
}

.form-group input {
  padding: 9px 11px;
  background: var(--bg-tertiary, #14171F);
  border: 1px solid var(--border-subtle, rgba(255,255,255,.08));
  border-radius: var(--radius-sm, 6px);
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary, #ECEEF2);
  transition: border-color 0.2s;
}

.form-group input::placeholder {
  color: var(--text-tertiary, #616875);
}

.form-group input:focus {
  outline: none;
  border-color: var(--brass, #C9A867);
  box-shadow: 0 0 0 3px rgba(201, 168, 103, 0.15);
}

.form-buttons {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.form-submit,
.form-cancel {
  padding: 9px 16px;
  border-radius: var(--radius-sm, 6px);
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  flex: 1;
  transition: all 0.2s;
}

.form-submit {
  background: var(--brass, #C9A867);
  color: white;
}

.form-submit:hover {
  background: var(--brass-2, #E4C98A);
}

.form-cancel {
  background: var(--bg-hover, rgba(255,255,255,.025));
  color: var(--text-primary, #ECEEF2);
}

.form-cancel:hover {
  background: var(--border-subtle, rgba(255,255,255,.08));
}

.form-status {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
}

.form-status-success {
  background: var(--bull-bg, rgba(69,222,154,.10));
  color: var(--accent-green, #45DE9A);
}

.form-status-error {
  background: var(--bear-bg, rgba(242,109,109,.10));
  color: var(--accent-red, #F26D6D);
}

.form-status-pending {
  background: rgba(127,178,255,.10);
  color: var(--accent-blue, #7FB2FF);
}

.login-status {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 1024px) {
  .watchlist-modal {
    max-width: 95vw;
  }

  .watchlist-table {
    font-size: 12px;
  }

  .watchlist-table th,
  .watchlist-table td {
    padding: 7px 10px;
  }
}

@media (max-width: 768px) {
  .watchlist-modal {
    max-width: 100%;
    margin-top: 0;
    border-radius: 0;
    max-height: 100vh;
    max-height: 100dvh; /* iOS: 100vh is taller than the visible screen when
                           Safari's toolbar is expanded, clipping bottom UI */
  }

  .watchlist-table {
    font-size: 11px;
  }

  .watchlist-table th,
  .watchlist-table td {
    padding: 6px 8px;
  }

  .holding-edit-btn,
  .holding-delete-btn {
    padding: 2px 4px;
    font-size: 12px;
  }
}

/* ============================================================
   TradingView embeds — quote cell (with inline chart icon), popup
   ============================================================ */

/* Quote cell: widget + chart icon side by side, compact height */
.watchlist-table td.tv-quote-cell {
  padding: 4px 10px;
  width: 220px;
  min-width: 190px;
}

.tv-quote-flex {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tv-quote-container {
  flex: 1;
  min-width: 0;
  /* No max-height/overflow here: TradingView's single-quote widget needs
     ~70-80px to show both the symbol line and the price line beneath it.
     Capping this earlier clipped the price off entirely. The row grows to
     fit the widget instead of the widget being squeezed into the row. */
}

/* Chart icon button */
.holding-chart-btn {
  flex-shrink: 0;
  background: var(--surface, #14171F);
  border: 1px solid var(--border-subtle, rgba(255,255,255,.08));
  border-radius: 4px;
  cursor: pointer;
  padding: 4px 7px;
  color: var(--text-secondary, #9AA1AC);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.holding-chart-btn:hover {
  background: rgba(127,178,255,.10);
  border-color: var(--brass, #C9A867);
  color: var(--accent-blue, #7FB2FF);
}

/* Chart popup modal — sits above the watchlist overlay (1000) and the
   form modals (1001) since it can be opened while the table is visible. */
.watchlist-chart-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1003;
  padding: 20px;
}

.watchlist-chart-content {
  background: var(--surface, #14171F);
  color: var(--text-primary, #ECEEF2);
  border: 1px solid var(--border-subtle, rgba(255,255,255,.08));
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  width: 100%;
  max-width: 900px;
  height: min(560px, 85vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.watchlist-chart-header {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,.08));
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.watchlist-chart-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-primary, #ECEEF2);
}

.watchlist-chart-body {
  flex: 1;
  min-height: 0;
}

.watchlist-chart-body .tradingview-widget-container,
.watchlist-chart-body iframe {
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .watchlist-chart-content {
    max-width: 100%;
    height: min(480px, 80vh);
  }

  .watchlist-table td.tv-quote-cell {
    min-width: 160px;
  }
}