/* ==========================================================================
   finance.css — Business & Finance page styles
   Layered on top of Bootstrap 5.3 + fnp.css
   ========================================================================== */

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  --fin-green:     #198754;
  --fin-red:       #dc3545;
  --fin-neutral:   #6c757d;
  --fin-ticker-bg: #0f172a;
  --fin-sb-bg:     #f8fafc;
  --fin-sb-border: #e2e8f0;
  --fin-card-bg:   #ffffff;
  --fin-section-border: #198754;
  --fin-text:      #1e293b;
  --fin-muted:     #64748b;
  --fin-border:    #e2e8f0;
}
[data-theme="dark"] {
  --fin-sb-bg:     #1e293b;
  --fin-sb-border: #334155;
  --fin-card-bg:   #1e293b;
  --fin-text:      #f1f5f9;
  --fin-muted:     #94a3b8;
  --fin-border:    #334155;
}

/* ── Ticker tape ──────────────────────────────────────────────────────────── */
.fnp-fin-ticker-bar {
  background: var(--fin-ticker-bg);
  border-bottom: 1px solid #1e3a5f;
  overflow: hidden;
  height: 34px;
  display: flex;
  align-items: center;
}
.fnp-fin-ticker-inner {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.fnp-fin-ticker-track {
  display: inline-block;
  white-space: nowrap;
  animation: fnp-ticker-scroll 55s linear infinite;
}
.fnp-fin-ticker-track:hover {
  animation-play-state: paused;
}
@keyframes fnp-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.fnp-fin-t-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 1.1rem;
  font-size: 0.75rem;
  border-right: 1px solid #1e3a5f;
}
.fnp-fin-t-sym  { color: #94a3b8; font-weight: 600; letter-spacing: 0.02em; }
.fnp-fin-t-prc  { color: #e2e8f0; font-weight: 700; font-variant-numeric: tabular-nums; }
.fnp-fin-t-chg  { font-variant-numeric: tabular-nums; font-size: 0.72rem; }
.fnp-fin-ticker-loading { color: #64748b; font-size: 0.75rem; padding: 0 1rem; }

/* ── Up / Down / Neutral colour classes ──────────────────────────────────── */
.fnp-fin-up  { color: var(--fin-green) !important; }
.fnp-fin-dn  { color: var(--fin-red)   !important; }
.fnp-fin-nc  { color: var(--fin-neutral) !important; }

/* ── Market status badge ─────────────────────────────────────────────────── */
.fnp-fin-badge-open    { background: #198754; color: #fff; font-size: 0.7rem; padding: 0.25em 0.6em; border-radius: 999px; }
.fnp-fin-badge-closed  { background: #6c757d; color: #fff; font-size: 0.7rem; padding: 0.25em 0.6em; border-radius: 999px; }
.fnp-fin-badge-neutral { background: #334155; color: #94a3b8; font-size: 0.7rem; padding: 0.25em 0.6em; border-radius: 999px; }

/* ── Page header ─────────────────────────────────────────────────────────── */
.fnp-fin-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--fin-text);
  letter-spacing: -0.3px;
}

/* ── Market brief card ───────────────────────────────────────────────────── */
.fnp-fin-brief {
  background: var(--fin-card-bg);
  border: 1px solid var(--fin-border);
  border-left: 4px solid var(--fin-green);
  border-radius: 6px;
  padding: 1rem 1.2rem;
}
.fnp-fin-brief-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fin-green);
  margin-bottom: 0.4rem;
}
.fnp-fin-brief-headline {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--fin-text);
  margin-bottom: 0.3rem;
  line-height: 1.3;
}
.fnp-fin-brief-headline:hover { color: var(--fin-green); }
.fnp-fin-brief-sub {
  font-size: 0.85rem;
  color: var(--fin-muted);
  margin-bottom: 0;
}

/* ── Tab navigation ──────────────────────────────────────────────────────── */
.fnp-fin-tabs-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 0;
  border-bottom: 2px solid var(--fin-border);
}
.fnp-fin-tabs-wrap::-webkit-scrollbar { display: none; }

.fnp-fin-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  border-bottom: none;
  min-width: max-content;
}
.fnp-fin-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.65rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--fin-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -2px;
}
.fnp-fin-tab:hover  { color: var(--fin-text); }
.fnp-fin-tab.active { color: var(--fin-green); border-bottom-color: var(--fin-green); }

/* ── Tab content ─────────────────────────────────────────────────────────── */
.fnp-fin-tab-content { padding-top: 1.4rem; }

/* ── Section headers inside tabs ────────────────────────────────────────── */
.fnp-fin-section       { margin-bottom: 2rem; }
.fnp-fin-section-hdr   {
  font-size: 1rem;
  font-weight: 700;
  border-left: 3px solid var(--fin-section-border);
  padding-left: 0.6rem;
  color: var(--fin-text);
  margin-bottom: 0.25rem;
}
.fnp-fin-section-sub   {
  font-size: 0.77rem;
  color: var(--fin-muted);
  padding-left: 0.9rem;
  margin-bottom: 0.8rem;
}

/* ── TradingView widget wrapper ──────────────────────────────────────────── */
.fnp-tv-wrap {
  background: var(--fin-card-bg);
  border: 1px solid var(--fin-border);
  border-radius: 6px;
  overflow: hidden;
}
.fnp-tv-credit {
  font-size: 0.68rem;
  color: var(--fin-muted);
  margin-top: 0.4rem;
  text-align: right;
}
.fnp-tv-credit a { color: var(--fin-muted); text-decoration: none; }
.fnp-tv-credit a:hover { text-decoration: underline; }

/* ── Symbol selector buttons (commodity chart) ───────────────────────────── */
.fnp-fin-sym-btns { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fnp-sym-btn {
  background: var(--fin-card-bg);
  border: 1px solid var(--fin-border);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--fin-text);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fnp-sym-btn:hover,
.fnp-sym-btn.active {
  background: var(--fin-green);
  border-color: var(--fin-green);
  color: #fff;
}

/* ── Commodity cards ─────────────────────────────────────────────────────── */
.fnp-comm-groups  { display: flex; flex-direction: column; gap: 1rem; }
.fnp-comm-group-label {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fin-muted);
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--fin-border);
  margin-bottom: 0.5rem;
}
.fnp-comm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}
.fnp-comm-card {
  background: var(--fin-card-bg);
  border: 1px solid var(--fin-border);
  border-top: 3px solid var(--fin-border);
  border-radius: 5px;
  padding: 0.65rem 0.8rem;
  transition: border-top-color 0.2s;
}
.fnp-comm-card.up { border-top-color: var(--fin-green); }
.fnp-comm-card.dn { border-top-color: var(--fin-red); }
.fnp-comm-name  { font-size: 0.78rem; font-weight: 700; color: var(--fin-text); margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fnp-comm-sub   { font-size: 0.63rem; color: var(--fin-muted); margin-bottom: 0.4rem; }
.fnp-comm-price { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fin-text); }
.fnp-comm-card.up .fnp-comm-price { color: var(--fin-green); }
.fnp-comm-card.dn .fnp-comm-price { color: var(--fin-red); }
.fnp-comm-chg   { font-size: 0.72rem; font-variant-numeric: tabular-nums; margin-top: 2px; }
.fnp-comm-loading { color: var(--fin-muted); font-size: 0.8rem; padding: 0.5rem 0; }

/* ── Right sidebar ───────────────────────────────────────────────────────── */
.fnp-fin-sidebar {
  position: sticky;
  top: 72px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fnp-fin-sb-widget {
  background: var(--fin-sb-bg);
  border: 1px solid var(--fin-sb-border);
  border-radius: 6px;
  overflow: hidden;
}
.fnp-fin-sb-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.8rem;
  background: var(--fin-card-bg);
  border-bottom: 1px solid var(--fin-sb-border);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fin-text);
}
.fnp-fin-sb-note   { font-size: 0.63rem; color: var(--fin-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.fnp-fin-sb-refresh {
  background: none;
  border: none;
  color: var(--fin-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 0.2rem;
  transition: color 0.15s, transform 0.3s;
}
.fnp-fin-sb-refresh:hover { color: var(--fin-green); }
.fnp-fin-sb-refresh.spin  { animation: fnp-spin 0.7s linear infinite; }
@keyframes fnp-spin { to { transform: rotate(360deg); } }

.fnp-fin-sb-body {
  padding: 0.4rem 0;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #e2e8f0;
}
.fnp-fin-sb-body::-webkit-scrollbar       { width: 6px; }
.fnp-fin-sb-body::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 6px; }
.fnp-fin-sb-body::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 6px; }
.fnp-fin-sb-body::-webkit-scrollbar-thumb:hover { background: #64748b; }
[data-theme="dark"] .fnp-fin-sb-body { scrollbar-color: #64748b #1e293b; }
[data-theme="dark"] .fnp-fin-sb-body::-webkit-scrollbar-track { background: #1e293b; }
[data-theme="dark"] .fnp-fin-sb-body::-webkit-scrollbar-thumb { background: #64748b; }
.fnp-fin-sb-loading { padding: 0.5rem 0.8rem; font-size: 0.78rem; color: var(--fin-muted); }
.fnp-fin-sb-err     { padding: 0.5rem 0.8rem; font-size: 0.78rem; color: var(--fin-red); }
.fnp-fin-sb-err a   { color: var(--fin-red); }

/* ── Price rows (sidebar) ────────────────────────────────────────────────── */
.fnp-fin-qrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.8rem;
  border-bottom: 1px solid var(--fin-sb-border);
  gap: 0.5rem;
}
.fnp-fin-qrow:last-child { border-bottom: none; }
.fnp-fin-q-left  { display: flex; flex-direction: column; min-width: 0; }
.fnp-fin-q-right { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.fnp-fin-q-name  { font-size: 0.78rem; font-weight: 700; color: var(--fin-text); white-space: nowrap; }
.fnp-fin-q-sub   { font-size: 0.63rem; color: var(--fin-muted); }
.fnp-fin-q-price { font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fin-text); }
.fnp-fin-q-chg   { font-size: 0.7rem; font-variant-numeric: tabular-nums; }

/* ── Articles section ────────────────────────────────────────────────────── */
.fnp-fin-articles-section {
  background: var(--fin-sb-bg);
  border-top: 1px solid var(--fin-border);
}

/* ── Earnings search ─────────────────────────────────────────────────────── */
.fnp-earn-search-wrap { max-width: 320px; }
.fnp-earn-search {
  width: 100%;
  padding: 0.45rem 0.75rem;
  font-size: 0.85rem;
  border: 1px solid var(--fin-border);
  border-radius: 6px;
  outline: none;
  background: var(--fin-card-bg);
  color: var(--fin-text);
  transition: border-color .15s;
}
.fnp-earn-search:focus { border-color: var(--fin-green); box-shadow: 0 0 0 3px rgba(25,135,84,.12); }
.fnp-earn-search::placeholder { color: var(--fin-muted); }

/* ── Earnings calendar ───────────────────────────────────────────────────── */
.fnp-earn-empty {
  padding: 2.5rem 0;
  text-align: center;
  color: var(--fin-muted);
}
.fnp-earn-group { margin-bottom: 1.75rem; }
.fnp-earn-date-hdr {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fin-green);
  padding: 0.5rem 0 0.4rem;
  border-bottom: 2px solid var(--fin-border);
  margin-bottom: 0;
}
.fnp-earn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.fnp-earn-table thead th {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fin-muted);
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--fin-border);
  white-space: nowrap;
}
.fnp-earn-table tbody tr { border-bottom: 1px solid var(--fin-border); }
.fnp-earn-table tbody tr:last-child { border-bottom: none; }
.fnp-earn-table tbody tr:hover { background: var(--fin-sb-bg); }
.fnp-earn-table td { padding: 0.45rem 0.5rem; vertical-align: middle; }
.fnp-earn-sym { font-weight: 700; color: var(--fin-text); font-size: 0.85rem; letter-spacing: 0.02em; }
.fnp-earn-co  { display: block; font-weight: 400; font-size: 0.71rem; color: var(--fin-muted); letter-spacing: 0; }
.fnp-earn-num { font-variant-numeric: tabular-nums; color: var(--fin-text); }
.fnp-earn-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  white-space: nowrap;
}
.earn-bmo { background: #d1fae5; color: #065f46; }
.earn-amc { background: #dbeafe; color: #1e40af; }
.earn-dmh { background: #fef3c7; color: #92400e; }
[data-theme="dark"] .earn-bmo { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .earn-amc { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .earn-dmh { background: #451a03; color: #fcd34d; }

/* ── Earnings show-more ──────────────────────────────────────────────────── */
.fnp-earn-extra { display: none; }
.fnp-earn-more-row td {
  padding: 0.35rem 0.5rem;
  border-top: 1px solid var(--fin-border);
}
.fnp-earn-more-btn {
  background: none;
  border: 1px solid var(--fin-border);
  border-radius: 999px;
  padding: 0.22rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--fin-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fnp-earn-more-btn:hover {
  background: var(--fin-green);
  border-color: var(--fin-green);
  color: #fff;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .fnp-fin-sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}
@media (max-width: 575px) {
  .fnp-comm-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .fnp-fin-title { font-size: 1.3rem; }
}