/* Layout */

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top left, #111827 0, #020617 45%, #020617 100%);
  color: #f7f9fc;
  height: 100vh;
  overflow: hidden; /* Prevent full-page scrolling */
}

/* Top nav – shared between dashboard & analysts & new pages */

#top-nav-bar {
  position: fixed;
  top: 10px;
  right: 18px;
  display: flex;
  gap: 8px;
  z-index: 50;
}

.nav-button {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #293245;
  background: rgba(8, 12, 18, 0.9);
  color: #e5e7eb;
  font-size: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
}

.nav-button span:first-child {
  font-size: 13px;
}

.nav-button:hover {
  background: rgba(15, 23, 42, 0.95);
  border-color: #3b82f6;
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.6);
  transform: translateY(-1px);
}

.nav-button-active {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  border-color: #60a5fa;
}

/* App container */

#app-container {
  display: flex;
  flex-direction: row;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden; /* No scroll on main container */
  padding: 18px 18px 18px 18px;
}

/* Left & right panels */

#left-panel {
  width: 38%;
  min-width: 340px;
  max-width: 520px;
  border-right: 1px solid #202633;
  padding: 20px 24px;
  box-sizing: border-box;
  background: radial-gradient(circle at top, #080c12 0, #020617 85%);
  height: 100%;
  overflow: hidden; /* left side itself does not scroll */
  border-radius: 14px 0 0 14px;
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.55);
}

#right-panel {
  flex: 1;
  padding: 20px 24px;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Right side does not scroll */
  background: radial-gradient(circle at top, #050813 0, #020617 85%);
  border-radius: 0 14px 14px 0;
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.55);
}

/* Right panel vertical slices */

/* Watchlist: a little shorter to give charts more room */
#right-panel > .section:nth-of-type(1) {
  flex: 0 0 18vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Charts: big flexible middle slice */
#right-panel > .section:nth-of-type(2) {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* News: slightly taller so headlines feel comfortable */
#right-panel > .section:nth-of-type(3) {
  flex: 0 0 24vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Typography */

.app-title {
  margin: 0 0 12px 0;
  font-size: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e5e7eb;
}

.section {
  margin-top: 14px;
}

.section-title {
  margin: 0 0 6px 0;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ba4b5;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.section-subtitle {
  font-size: 12px;
  color: #788194;
}

.section-help {
  font-size: 12px;
  color: #818ba0;
  margin: 0 0 6px 0;
}

/* Inputs & buttons */

input,
textarea,
select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 9px;
  margin-top: 4px;
  border-radius: 8px;
  border: 1px solid #343c4c;
  background: radial-gradient(circle at top, #111623 0, #020617 100%);
  color: #f7f9fc;
  font-size: 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5);
  outline: none;
}

textarea {
  resize: vertical;
}

button {
  margin-top: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #2179ff, #4f46e5);
  color: #f7f9fc;
  font-weight: 500;
  font-size: 13px;
  transition: background 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}

button:hover:not(:disabled) {
  background: linear-gradient(135deg, #2c86ff, #6366f1);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.6);
  transform: translateY(-1px);
}

button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}

button:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

.section-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.section-controls select {
  width: auto;
  min-width: 80px;
}

/* Secondary-style pill button (used for Edit, Cancel etc.) */

.secondary-button {
  background: transparent;
  border: 1px solid #3b4254;
  box-shadow: none;
  color: #e5e7eb;
}

.secondary-button:hover:not(:disabled) {
  background: rgba(15, 23, 42, 0.9);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}

/* Boxes & panels */

.panel-box {
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: radial-gradient(circle at top, #111623 0, #020617 100%);
  border: 1px solid #242c3b;
  font-size: 13px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.7);
}

.empty-text {
  color: #6b7385;
}

/* Left panel – scroll only inside summary + answer */

#leftSummary,
#answerArea {
  max-height: 28vh;
  overflow-y: auto; /* Internal scroll only here */
}

/* Errors */

.error-text {
  margin-top: 4px;
  font-size: 12px;
  color: #ff6b7a;
}

/* Watchlist area slice in the right panel */

#right-panel > .section:nth-of-type(1) {
  flex: 0 0 18vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Panel box in that slice */

#right-panel > .section:nth-of-type(1) .panel-box {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: radial-gradient(circle at top, #111623 0, #020617 100%);
  border: 1px solid #242c3b;
  font-size: 13px;
}

/* Scrollable region for watchlist */

#watchlistScroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Watchlist table */

#watchlistTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

/* Header */

#watchlistTable thead {
  background: #151b27;
}

#watchlistTable th {
  padding: 4px 6px;
  text-align: right;
  border-bottom: 1px solid #1d2230;
  white-space: nowrap;
  font-weight: 500;
  color: #9ba4b5;
}

#watchlistTable th:first-child {
  text-align: left;
}

/* Body rows */

#watchlistTable td {
  padding: 3px 6px;
  text-align: right;
  border-bottom: 1px solid #1d2230;
  white-space: nowrap;
  color: #e5e7eb;
}

#watchlistTable td:first-child {
  text-align: left;
}

/* Zebra stripes */

#watchlistTable tbody tr:nth-child(even) {
  background: #0e131f;
}

/* Price coloring */

.price-positive {
  color: #38d996;
}

.price-negative {
  color: #ff6b7a;
}

/* Charts & fundamentals */

#right-panel > .section:nth-of-type(2) .section-header {
  flex: 0 0 auto;
}

/* Charts container: responsive grid with internal scroll */

.charts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 4px;
  padding-right: 4px;
  overflow-y: auto;   /* charts scroll inside their slice */
  overflow-x: hidden;
}

/* Cards tuned for up to 6 symbols (2 rows x 3 cards) */
.ticker-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 260px;
  min-width: 240px;
  max-width: 360px;
  background: radial-gradient(circle at top, #111623 0, #020617 100%);
  border-radius: 12px;
  border: 1px solid #242c3b;
  padding: 8px 10px;
  box-sizing: border-box;
  /* IMPORTANT: let height be automatic so fundamentals never get clipped */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.ticker-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.ticker-card-symbol {
  font-weight: 600;
  font-size: 14px;
}

.ticker-card-subtitle {
  font-size: 11px;
  color: #7c8598;
}

.ticker-chart-container {
  margin-top: 4px;
}

.ticker-chart {
  width: 100%;
  height: 80px;  /* slightly shorter to give fundamentals more room */
}

/* Fundamentals block under each chart – compact rows */

.ticker-fundamentals {
  padding: 6px 10px 10px;
  font-size: 11px;
}

/* 2-column grid of compact metric rows */

.fundamentals-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 3px;
}

/* Each metric is a short single row */

.fundamentals-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
  padding: 0;
  margin: 0;
  line-height: 1.15;
}

/* Small label */

.fundamentals-label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.65;
  white-space: nowrap;
}

/* Slightly larger value */

.fundamentals-value {
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* News – internal scroll only */

#right-panel > .section:nth-of-type(3) .section-header {
  flex: 0 0 auto;
}

#newsFilterWrapper {
  margin-bottom: 4px;
}

/* NEW: symbol header above news list */
.news-symbol-title {
  margin: 0 0 4px 0;
  font-size: 13px;
  font-weight: 600;
  color: #e5e7eb;
}

/* News container */

.news-box {
  flex: 1 1 auto;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.news-item {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #202633;
}

.news-item:last-child {
  border-bottom: none;
}

.news-item-title {
  font-size: 13px;
  font-weight: 500;
}

.news-item-meta {
  font-size: 11px;
  color: #7c8598;
  margin-top: 2px;
}

.news-combined {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #202633;
  font-size: 13px;
  color: #c1c9de;
}

/* News-style snippet body (used for both news + social posts) */

.news-item-snippet {
  font-size: 12px;
  color: #c1c9de;
  margin-top: 4px;
}

/* ------------------------------------------------------------------
   Embedded analysts – compact, scrollable conversations
-------------------------------------------------------------------*/

.analyst-section {
  margin-top: 14px;
}

.analyst-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.analyst-title {
  font-size: 13px;
  font-weight: 600;
  color: #dce3f5;
}

.analyst-selector label {
  font-size: 11px;
  color: #9ba4b5;
  margin-right: 4px;
}

.analyst-conversation {
  margin-top: 6px;
  max-height: 22vh;
  min-height: 90px;
  padding: 8px 10px;
  border-radius: 10px;
  background: radial-gradient(circle at top, #111623 0, #020617 100%);
  border: 1px solid #242c3b;
  font-size: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.7);
}

.analyst-input-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.analyst-input-row textarea {
  flex: 1;
  margin-top: 0;
}

.analyst-input-row button {
  align-self: flex-end;
  margin-top: 0;
}

.analyst-status {
  margin-top: 4px;
  font-size: 11px;
  color: #9ba4b5;
}

.analyst-msg {
  margin-bottom: 6px;
  display: flex;
}

.analyst-msg-user {
  justify-content: flex-end;
}

.analyst-msg-analyst {
  justify-content: flex-start;
}

.analyst-msg-bubble {
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.35;
}

.analyst-msg-user .analyst-msg-bubble {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #f9fafb;
}

.analyst-msg-analyst .analyst-msg-bubble {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid #293245;
  color: #e5e7eb;
}

/* Scrollbars (subtle, only where scroll is allowed) */

#leftSummary::-webkit-scrollbar,
#answerArea::-webkit-scrollbar,
.news-box::-webkit-scrollbar,
.charts-row::-webkit-scrollbar,
.analyst-conversation::-webkit-scrollbar {
  width: 6px;
}

#leftSummary::-webkit-scrollbar-thumb,
#answerArea::-webkit-scrollbar-thumb,
.news-box::-webkit-scrollbar-thumb,
.charts-row::-webkit-scrollbar-thumb,
.analyst-conversation::-webkit-scrollbar-thumb {
  background: #283040;
  border-radius: 3px;
}

/* Overview (left panel) */

.overview-section-title {
  margin: 12px 0 4px 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ba4b5;
}

.overview-block {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: radial-gradient(circle at top, #111623 0, #020617 100%);
  border: 1px solid #242c3b;
}

.overview-block-title {
  margin: 0 0 4px 0;
  font-size: 13px;
  font-weight: 600;
  color: #dce3f5;
}

.overview-block-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #b8c2da;
}

/* Placeholder text for sections (used by script.js) */
.section-placeholder {
  font-size: 12px;
  color: #9ba4b5;
  padding: 8px 4px;
}

/* ------------------------------------------------------------------
   NEW: Shared helpers for Social + Profile + Trading pages
-------------------------------------------------------------------*/

/* Small pill for statuses (e.g. Open / Closed) */
.badge-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid #3b4254;
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
}

/* PnL / performance coloring */
.pnl-positive {
  color: #38d996;
}

.pnl-negative {
  color: #ff6b7a;
}

/* ------------------------------------------------------------------
   Trading page: account summary + tables
-------------------------------------------------------------------*/

.account-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
  font-size: 12px;
}

.account-summary-label {
  color: #9ba4b5;
}

.account-summary-value {
  text-align: right;
  color: #dce3f5;
}

/* Shared table style for positions & orders */
.positions-table,
.orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.positions-table thead,
.orders-table thead {
  background: #151b27;
}

.positions-table th,
.orders-table th {
  padding: 4px 6px;
  text-align: right;
  border-bottom: 1px solid #1d2230;
  white-space: nowrap;
  font-weight: 500;
  color: #9ba4b5;
}

.positions-table th:first-child,
.orders-table th:first-child {
  text-align: left;
}

.positions-table td,
.orders-table td {
  padding: 3px 6px;
  text-align: right;
  border-bottom: 1px solid #1d2230;
  white-space: nowrap;
  color: #e5e7eb;
}

.positions-table td:first-child,
.orders-table td:first-child {
  text-align: left;
}

.positions-table tbody tr:nth-child(even),
.orders-table tbody tr:nth-child(even) {
  background: #0e131f;
}

/* ------------------------------------------------------------------
   Profile page specific tweaks
-------------------------------------------------------------------*/

#profBio {
  white-space: pre-wrap;
}

/* Make profile posts panel behave like feed/news */
#profilePostsContainer {
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

/* ------------------------------------------------------------------
   Global loading overlay + progress bar
   (used on dashboard, analysts, etc.)
-------------------------------------------------------------------*/

/* Generic "hidden" helper if not already defined elsewhere */
.hidden {
  display: none !important;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 20, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* above top-nav-bar */
}

.loading-box {
  min-width: 260px;
  max-width: 360px;
  padding: 16px 20px;
  border-radius: 16px;
  background: radial-gradient(circle at top, #0b1020 0, #020617 90%);
  border: 1px solid #242c3b;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85);
}

.loading-text {
  font-size: 0.95rem;
  margin: 0 0 10px 0;
  color: #e5e7eb;
  opacity: 0.95;
}

.loading-subtext {
  font-size: 11px;
  color: #9ba4b5;
  margin-bottom: 8px;
}

/* Outer track */
.loading-bar-outer {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: #111827;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.85);
}

/* Inner "progress" bar – JS will control width */
.loading-bar-inner {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #6366f1, #a855f7);
  background-size: 200% 100%;
  transition: width 0.25s ease-out;
  animation: loading-bar-sheen 1.2s linear infinite;
}

/* Subtle sheen shimmer while it's moving */
@keyframes loading-bar-sheen {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ------------------------------------------------------------------
   OLD modal overlay helpers (still here in case other pages use them)
-------------------------------------------------------------------*/

.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 10, 20, 0.85);
  z-index: 9000; /* below loading overlay (9999), above main UI */
}

.modal-box {
  width: 100%;
  max-width: 360px;
  padding: 16px 18px 14px;
  border-radius: 16px;
  background: radial-gradient(circle at top, #0b1020 0, #020617 90%);
  border: 1px solid #242c3b;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85);
  box-sizing: border-box;
}

.modal-title {
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 600;
  color: #e5e7eb;
}

.modal-subtitle {
  margin: 0 0 10px 0;
  font-size: 12px;
  color: #9ba4b5;
}

.modal-box input {
  margin-top: 4px;
}

.modal-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Secondary (ghost) button for cancel */
.btn-secondary {
  background: transparent;
  border: 1px solid #3b4254;
  box-shadow: none;
  color: #e5e7eb;
}

.btn-secondary:hover:not(:disabled) {
  background: rgba(15, 23, 42, 0.9);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------------
   NEW modal style for #editTickersModal (current dashboard page)
-------------------------------------------------------------------*/

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000; /* below loading overlay */
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 10, 20, 0.85);
}

.modal-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  padding: 16px 18px 14px;
  border-radius: 16px;
  background: radial-gradient(circle at top, #0b1020 0, #020617 90%);
  border: 1px solid #242c3b;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85);
  box-sizing: border-box;
}

.modal-content h2 {
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 600;
  color: #e5e7eb;
}

.modal-help {
  margin: 0 0 10px 0;
  font-size: 12px;
  color: #9ba4b5;
}

.modal-content input {
  margin-top: 4px;
}

.modal-content .modal-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}