/* ===============================
   Stocks Signal Dashboard Styles
   =============================== */

.ssd-wrap {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: #1e293b;
  line-height: 1.5;
}

.ssd-muted { color: #64748b; font-size: 14px; }

/* Header */
.ssd-hero { margin-bottom: 24px; }
.ssd-hero h1 { font-size: 28px; font-weight: 700; margin: 0 0 4px; }
.ssd-sub { margin: 0; color: #64748b; }

/* Grid */
.ssd-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .ssd-grid-2 { grid-template-columns: 1fr; }
}

/* Card */
.ssd-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.ssd-card + .ssd-card { margin-top: 24px; }
.ssd-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.ssd-card-body { width: 100%; }

/* Table */
.ssd-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ssd-table th, .ssd-table td { padding: 8px 10px; border-bottom: 1px solid #e2e8f0; text-align: left; }
.ssd-table th { font-weight: 600; color: #475569; background: #f8fafc; }
.ssd-table td { background: #fff; }
.ssd-table td.num { text-align: right; }

/* Signal chips */
.ssd-chip { display:inline-block; padding:2px 8px; font-size:12px; border-radius:9999px; font-weight:600; }
.ssd-chip.buy { background:#dcfce7; color:#166534; }
.ssd-chip.sell { background:#fee2e2; color:#991b1b; }
.ssd-chip.hold { background:#fef9c3; color:#854d0e; }

/* Buttons / inputs */
.ssd-btn { display:inline-block; padding:6px 12px; font-size:14px; font-weight:500; background:#f1f5f9; border:1px solid #cbd5e1; border-radius:8px; text-decoration:none; color:#1e293b; transition:background .15s; }
.ssd-btn:hover { background:#e2e8f0; }
.ssd-form-row { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.ssd-form-row input[type="text"] { flex:1; border:1px solid #cbd5e1; border-radius:8px; padding:6px 10px; font-size:14px; }

/* TradingView chart */
.ssd-chart-wrap{
  width:100%;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:12px;
  overflow:hidden;
  margin-bottom:20px;
}
#ssd-chart{ width:100%; height:640px !important; }

/* News */
.ssd-news { margin-top: 8px; }
.ssd-news-list { list-style: disc; padding-left: 18px; margin: 0; }
.ssd-news-list li { margin: 8px 0; }
.ssd-news-list a { color: #1e3a8a; text-decoration: underline; }
.ssd-news-src, .ssd-news-time { color:#64748b; font-size:12px; }

/* Movers coloring */
.ssd-up   { color:#166534; font-weight:600; } /* green */
.ssd-down { color:#991b1b; font-weight:600; } /* red */

/* Suggest dropdown polish */
#ssd-suggest .ssd-sg-item:hover { background:#f8fafc; }
/* Equal columns + alignment for movers row */
.ssd-grid { display: grid; gap: 24px; }
.ssd-grid-2 { grid-template-columns: 1fr 1fr; align-items: start; }

.ssd-card { height: 100%; }

/* Movers table green/red */
.ssd-movers .num { text-align: right; }
.ssd-up   { color: #059669; font-weight: 600; }   /* green */
.ssd-down { color: #dc2626; font-weight: 600; }   /* red */

/* Controls row (so input + button stay on one line) */
.ssd-controls {
  display: flex; gap: 8px; align-items: center; margin-bottom: 12px;
}
.ssd-input { flex: 1 1 auto; min-width: 260px; }

/* Frame */
.ssd-wrap { max-width: 1100px; margin: 0 auto; padding: 12px; }

/* Cards (flex so inner content height matches) */
.ssd-card {
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  padding:14px; box-shadow:0 6px 20px rgba(2,6,23,.04);
  display:flex; flex-direction:column; height:100%;
}
.ssd-card-hd { margin-bottom:12px; }
.ssd-card-hd-row { display:flex; gap:10px; align-items:center; }
.ssd-card h3 { margin:0; line-height:1.25; }
.ssd-sub { color:#6b7280; font-size:12px; }

/* Grid: force equal height + alignment */
.ssd-grid { display:grid; gap:24px; }
.ssd-grid-2 { grid-template-columns:1fr 1fr; align-items:stretch; }

/* Controls */
.ssd-controls { display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.ssd-input {
  flex:1 1 auto; min-width:260px; padding:8px 10px;
  border:1px solid #e5e7eb; border-radius:10px;
}
.ssd-btn { padding:8px 12px; border:1px solid #e5e7eb; border-radius:10px; background:#f1f5f9; cursor:pointer; }
.ssd-btn:hover { background:#e2e8f0; }

/* Tables */
.ssd-table { width:100%; border-collapse:separate; border-spacing:0; }
.ssd-table th, .ssd-table td { padding:10px; border-bottom:1px solid #eef2f7; font-size:14px; }
.ssd-table th { text-align:left; color:#64748b; font-weight:600; }
.ssd-table .num { text-align:right; }

/* Movers colouring */
.ssd-movers .num { text-align:right; }
.ssd-up   { color:#059669; font-weight:600; }
.ssd-down { color:#dc2626; font-weight:600; }

/* Signal chips */
.ssd-chip { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.ssd-chip.buy  { background:#d1fae5; color:#065f46; }
.ssd-chip.sell { background:#fee2e2; color:#7f1d1d; }
.ssd-chip.hold { background:#fef3c7; color:#92400e; }

/* Suggest dropdown (injected by JS) */

/* Make the two cards align perfectly in height */
.ssd-grid { display:grid; gap:24px; }
.ssd-grid-2 { grid-template-columns:1fr 1fr; align-items:stretch; }

.ssd-card {
  display:flex; flex-direction:column; height:100%;
}
.ssd-card-hd { margin-bottom:12px; }

/* === Movers coloring (Top Gainers / Top Losers) === */
.ssd-up   { color: #16a34a; font-weight: 600; }   /* green */
.ssd-down { color: #dc2626; font-weight: 600; }   /* red   */
.ssd-right { text-align: right; }

/* ---- Stock Details cleanup ---- */
.ssd-details-header{
  display:flex;
  align-items:center;
  justify-content:space-between; /* back button left, spacer right */
  gap:12px;
  margin: 4px 2px 18px;
}
.ssd-details-header .ssd-title{
  margin:0;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  text-align:center;
  flex:1; /* centers between back + spacer */
}
.ssd-details-header .ssd-header-spacer{
  width: 140px; /* visual balance vs back button width */
  flex: 0 0 140px;
}

.ssd-tv-h{
  /* this sets the overall chart height; TradingView autosizes inside */
  height: 560px;
  min-height: 420px;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid #e6e8ee;
}

/* News list spacing */
.ssd-news-list {
  padding: 4px 4px 12px;
}
.ssd-news-list ul{
  margin: 0;
  padding-left: 18px;
}
.ssd-news-list li{
  margin: 8px 0;
}

/* Mobile tweaks */
@media (max-width: 640px){
  .ssd-details-header{
    gap: 8px;
  }
  .ssd-details-header .ssd-header-spacer{
    width: 96px;
    flex: 0 0 96px;
  }
  .ssd-tv-h{
    height: 480px;
    min-height: 360px;
  }
}

/* ---------- Stock Details hardening ---------- */
.ssd-details-header{
  display:flex; align-items:center; gap:12px; margin:4px 2px 18px;
}
.ssd-details-header .ssd-title{
  margin:0; font-size:clamp(22px,2.4vw,28px); font-weight:800; text-align:center; flex:1;
}
.ssd-details-header .ssd-header-spacer{ width:140px; flex:0 0 140px; }

/* Make sure the TradingView container always has height */
.ssd-chart-wrap{ width:100%; }
.tradingview-widget-container{ width:100%; }
#ssd-tv-container{ width:100%; min-height:480px; height:560px; }
@media (max-width:640px){ #ssd-tv-container{ height:480px; } }

/* News list keeps your previous spacing */
.ssd-news-list{ padding:4px 4px 12px; }
.ssd-news-list ul{ margin:0; padding-left:18px; }
.ssd-news-list li{ margin:8px 0; }

/* Force equal vertical alignment for Gainers/Losers cards */
.ssd-grid.ssd-grid-2 {
  display: flex;
  align-items: flex-start;   /* align both to the top */
  gap: 20px;                 /* keep spacing even */
}

.ssd-grid.ssd-grid-2 .ssd-card {
  flex: 1;                   /* make both cards equal width */
  margin-top: 0 !important;  /* remove any stray top margin */
}

/* === Movers colors & alignment (gainers/losers) === */
#ssd-gainers-table td.t-right,
#ssd-losers-table  td.t-right {
  text-align: right;
}

/* strong green for gainers, strong red for losers */
#ssd-gainers-table td.text-emerald-700,
#ssd-losers-table  td.text-emerald-700 {
  color: #047857;          /* emerald-700 */
  font-weight: 600;
}

#ssd-gainers-table td.text-rose-600,
#ssd-losers-table  td.text-rose-600 {
  color: #dc2626;          /* rose-600 */
  font-weight: 600;
}

/* If another theme style is winning, force it: */
#ssd-gainers-table td.text-emerald-700,
#ssd-gainers-table td.text-rose-600,
#ssd-losers-table  td.text-emerald-700,
#ssd-losers-table  td.text-rose-600 {
  color: inherit; /* fallback reset */
}
#ssd-gainers-table td.text-emerald-700 { color: #047857 !important; }
#ssd-gainers-table td.text-rose-600    { color: #dc2626 !important; }
#ssd-losers-table  td.text-emerald-700 { color: #047857 !important; }
#ssd-losers-table  td.text-rose-600    { color: #dc2626 !important; }

/* ====================================================
   Gainers/Losers header color (no markup/JS changes)
   Colors the h3 + subtitle in the card that contains
   the gainers/losers tables.
   ==================================================== */

/* Green headers for the card that holds #ssd-gainers-table */
.ssd-card:has(#ssd-gainers-table) .ssd-card-hd h3,
.ssd-card:has(#ssd-gainers-table) .ssd-card-hd .ssd-sub {
  color: #047857 !important; /* emerald-700 */
}

/* Red headers for the card that holds #ssd-losers-table */
.ssd-card:has(#ssd-losers-table) .ssd-card-hd h3,
.ssd-card:has(#ssd-losers-table) .ssd-card-hd .ssd-sub {
  color: #b91c1c !important; /* red-700 */
}

/* Hide "Stocks Signal Modern" footer text */
.site-info,
.footer-credits {
  display: none !important;
}


/* ===== Mobile polish (≤ 640px) ===== */
@media (max-width: 640px){
  /* Prevent iOS auto-zoom and odd scaling */
  .ssd-wrap { -webkit-text-size-adjust: 100%; padding: 10px; }

  /* Headings/subheads scale down a bit */
  .ssd-hero h1 { font-size: 22px; }
  .ssd-card h3 { font-size: 18px; }
  .ssd-sub     { font-size: 12px; }

  /* Cards: allow horizontal scroll when tables are wider than the viewport */
  .ssd-card,
  .ssd-table-wrap,
  #ssd-gainers-table,
  #ssd-losers-table { overflow-x: auto; }

  /* Make tables comfortably readable but compact */
  .ssd-table { font-size: 13px; min-width: 560px; }     /* watchlist */
  #ssd-gainers-table .ssd-table,
  #ssd-losers-table  .ssd-table { min-width: 520px; }   /* movers */

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

  /* Right align numeric columns consistently */
  .ssd-table th:nth-last-child(-n+4),
  .ssd-table td:nth-last-child(-n+4),
  #ssd-gainers-table .ssd-table th:last-child,
  #ssd-gainers-table .ssd-table td:last-child,
  #ssd-gainers-table .ssd-table th:nth-last-child(2),
  #ssd-gainers-table .ssd-table td:nth-last-child(2),
  #ssd-losers-table  .ssd-table th:last-child,
  #ssd-losers-table  .ssd-table td:last-child,
  #ssd-losers-table  .ssd-table th:nth-last-child(2),
  #ssd-losers-table  .ssd-table td:nth-last-child(2) {
    text-align: right;
    white-space: nowrap;
  }

  /* Let company names wrap cleanly instead of pushing layout */
  .ssd-table td { word-break: break-word; }

  /* Inputs/buttons: avoid iOS zoom on focus */
  .ssd-input { font-size: 16px; padding: 10px 12px; }
  .ssd-btn   { font-size: 16px; padding: 10px 12px; }
}

/* Slightly wider phones/phablets (≤ 768px) */
@media (max-width: 768px){
  .ssd-grid-2 { grid-template-columns: 1fr; }  /* stack gainers/losers vertically */
  .ssd-card { margin-bottom: 14px; }
}

/* ===== iOS Safari–specific polish ===== */
html.is-ios-safari {
  /* Stop iOS auto-zoom and font scaling surprises */
  -webkit-text-size-adjust: 100%;
}

/* Use the notch safe area and avoid cramped edges */
html.is-ios-safari body {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

/* Stack the two movers cards vertically on iPhone for clarity */
html.is-ios-safari .ssd-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Smooth momentum scrolling inside wide tables */
html.is-ios-safari .ssd-card,
html.is-ios-safari .ssd-table-wrap,
html.is-ios-safari #ssd-gainers-table,
html.is-ios-safari #ssd-losers-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Make tables readable without squeezing columns */
html.is-ios-safari .ssd-table {
  table-layout: fixed;     /* prevents wild column jumps */
  width: 100%;
  font-size: 15px;
  min-width: 560px;        /* allow horizontal scroll if needed */
}
html.is-ios-safari #ssd-gainers-table .ssd-table,
html.is-ios-safari #ssd-losers-table  .ssd-table {
  min-width: 520px;
}

/* Name column wraps; numeric columns do not */
html.is-ios-safari .ssd-table th:nth-child(2),
html.is-ios-safari .ssd-table td:nth-child(2) {
  white-space: normal;     /* company name can wrap */
  word-break: break-word;
}
html.is-ios-safari .ssd-table th:not(:nth-child(2)),
html.is-ios-safari .ssd-table td:not(:nth-child(2)) {
  white-space: nowrap;     /* keep numbers tidy */
  text-align: right;
}

/* Inputs 16px to avoid iOS zoom-on-focus */
html.is-ios-safari .ssd-input,
html.is-ios-safari .ssd-btn {
  font-size: 16px;
  padding: 10px 12px;
}

/* Slightly tighter headings on small screens */
@media (max-width: 640px) {
  html.is-ios-safari .ssd-hero h1 { font-size: 22px; }
  html.is-ios-safari .ssd-card h3 { font-size: 18px; }
  html.is-ios-safari .ssd-sub     { font-size: 12px; }
  html.is-ios-safari .ssd-table th,
  html.is-ios-safari .ssd-table td { padding: 8px 6px; }
}
/* (Optional) nothing else needed, but this keeps pointer events sane */
#ssd-suggest { cursor: default; }

/* ===== Add button — force light blue (overrides theme) ===== */
#ssd-add.ssd-btn {
  background:#dbeafe !important;   /* light blue fill */
  border-color:#93c5fd !important; /* soft blue border */
  color:#1e3a8a !important;        /* darker blue text */
  padding:10px 18px !important;    /* bigger target */
  font-weight:700 !important;
  border-radius:10px !important;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
#ssd-add.ssd-btn:hover { background:#bfdbfe !important; }
#ssd-add.ssd-btn:active { transform: translateY(0); }

@media (max-width:640px){
  #ssd-add.ssd-btn { padding:12px 20px !important; }
}


/* Numeric color helpers for watchlist */
.ssd-num        { font-weight: 600; }
.ssd-num-green  { color: #059669 !important; }  /* emerald-600 */
.ssd-num-red    { color: #dc2626 !important; }  /* red-600 */
.ssd-num-yellow { color: #ca8a04 !important; }  /* amber-600 */