/* ==========================================================================
   Market Insights — the dashboard-heavy command centre.
   Bespoke widgets (breadth, economic calendar, FII/DII flows, indices strip)
   layered on the shared design system. Uses ONLY main.css tokens — no new
   palette values beyond the established rgba(brand-rgb) tint pattern.
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */
.mi-hero { padding-bottom: clamp(28px, 4vw, 48px); }
.mi-hero::before {
  background:
    radial-gradient(60% 90% at 12% -10%, rgba(16,185,129,0.16), transparent 60%),
    radial-gradient(60% 90% at 88% -10%, rgba(59,130,246,0.16), transparent 62%);
}
.mi-hero h1 { max-width: 20ch; }
.mi-hero .lead { max-width: 720px; }

.mi-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.mi-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-2);
}
.mi-pill strong { color: var(--text-0); font-weight: 600; }
.mi-pill svg { width: 15px; height: 15px; color: var(--text-3); }

.mi-disclaimer {
  display: flex; gap: 14px; align-items: flex-start;
  margin-top: var(--sp-8); max-width: 780px;
  padding: 16px 20px; border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(245,184,61,0.09), var(--glass));
  border: 1px solid var(--glass-border); border-left: 3px solid var(--gold);
}
.mi-disclaimer svg { width: 22px; height: 22px; color: var(--gold-bright); flex: none; margin-top: 1px; }
.mi-disclaimer p { font-size: 0.86rem; color: var(--text-2); line-height: 1.6; }
.mi-disclaimer strong { color: var(--gold-bright); }

/* ---- Indices strip ------------------------------------------------------- */
.index-strip { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.index-pill {
  flex: 1; min-width: 158px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 15px 18px; border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(var(--blur));
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast);
}
.index-pill:hover { transform: translateY(-3px); border-color: var(--glass-hi); }
.index-pill .ip-name { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); }
.index-pill .ip-val { font-family: var(--font-mono); font-size: 1.18rem; font-weight: 600; color: var(--text-0); }
.index-pill .q-chg { font-family: var(--font-mono); font-size: 0.8rem; }

/* ---- Dashboard shell ----------------------------------------------------- */
.mi-dash { margin-top: var(--sp-2); }
.mi-dash .widget { display: flex; flex-direction: column; }

.widget-live { display: flex; align-items: baseline; gap: 10px; }
.widget-live .wl-price { font-family: var(--font-mono); font-size: 1.35rem; color: var(--text-0); }

/* Read-only timeframe segmented indicator */
.tf { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--bg-inset); border: 1px solid var(--glass-border); }
.tf span { font-family: var(--font-mono); font-size: 0.68rem; padding: 4px 9px; border-radius: var(--r-pill); color: var(--text-3); }
.tf span.is-active { background: var(--glass-2); color: var(--text-0); }

.mi-note { font-size: 0.72rem; color: var(--text-3); font-family: var(--font-mono); margin-top: auto; padding-top: 12px; }

/* Quote-row volume line (Most Active) */
.q-vol { font-family: var(--font-mono); font-size: 0.67rem; color: var(--text-3); }

/* ---- Market breadth / advance-decline ------------------------------------ */
.breadth-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-family: var(--font-mono); font-size: 0.8rem; }
.breadth-top .b-adv-n { color: var(--up); } .breadth-top .b-dec-n { color: var(--down); }
.breadth-bar { display: flex; height: 12px; border-radius: var(--r-pill); overflow: hidden; background: var(--bg-inset); }
.breadth-bar .b-adv { background: linear-gradient(90deg, var(--emerald-deep), var(--emerald-bright)); }
.breadth-bar .b-dec { background: var(--down); }
.breadth-legend { display: flex; justify-content: space-between; margin-top: 9px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); }
.breadth-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.breadth-stat { padding: 11px 13px; border-radius: var(--r-sm); background: var(--glass); border: 1px solid var(--line-faint); }
.breadth-stat .bs-l { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.breadth-stat .bs-v { font-family: var(--font-mono); font-size: 1.02rem; color: var(--text-0); margin-top: 2px; }

/* ---- Economic calendar --------------------------------------------------- */
.eco-list { display: flex; flex-direction: column; }
.eco-item { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-faint); }
.eco-item:last-child { border-bottom: 0; }
.eco-time { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2); width: 50px; flex: none; }
.eco-body { flex: 1; min-width: 0; }
.eco-body h5 { font-size: 0.83rem; font-weight: 500; color: var(--text-1); font-family: var(--font-body); line-height: 1.4; }
.eco-body .eco-meta { font-size: 0.7rem; color: var(--text-3); font-family: var(--font-mono); }
.eco-impact { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; flex: none; }
.eco-impact.high { background: var(--down-soft); color: var(--down); }
.eco-impact.med { background: rgba(245,184,61,0.14); color: var(--gold-bright); }
.eco-impact.low { background: var(--glass-2); color: var(--text-3); }

/* ---- FII / DII flows (diverging mini bars) ------------------------------- */
.fd-top { display: flex; gap: var(--sp-4); margin-bottom: 16px; }
.fd-top > div { flex: 1; padding: 11px 13px; border-radius: var(--r-sm); background: var(--glass); border: 1px solid var(--line-faint); }
.fd-top .fd-t-l { display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }
.fd-top .fd-t-v { font-family: var(--font-mono); font-size: 1.02rem; }

.fd-chart { position: relative; display: flex; gap: 10px; height: 118px; }
.fd-zero { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-strong); }
.fd-col { position: relative; flex: 1; }
.fd-bar { position: absolute; width: 34%; }
.fd-fii { left: 11%; background: var(--blue); }
.fd-dii { right: 11%; background: var(--emerald); }
.fd-bar.pos { bottom: 50%; border-radius: 3px 3px 0 0; }
.fd-bar.neg { top: 50%; border-radius: 0 0 3px 3px; }
.fd-days { display: flex; gap: 10px; margin-top: 8px; }
.fd-days span { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-3); }
.fd-legend { display: flex; gap: 18px; margin-top: 14px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-2); }
.fd-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.fd-legend .fii { background: var(--blue); } .fd-legend .dii { background: var(--emerald); }

/* ---- Candlestick chart-of-the-day ---------------------------------------- */
.candle-head { display: flex; align-items: center; gap: 10px; }
.candle-head .q-logo { width: 30px; height: 30px; font-size: 0.72rem; }

/* ---- CTA widget spanning the grid ---------------------------------------- */
.dash-cta {
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: var(--sp-6); flex-wrap: wrap;
  background:
    radial-gradient(80% 140% at 0% 0%, rgba(16,185,129,0.14), transparent 60%),
    linear-gradient(180deg, var(--glass-2), var(--glass));
}
.dash-cta h4 { font-size: 1.15rem; }

/* ---- Sentiment commentary ------------------------------------------------ */
.sentiment { display: grid; grid-template-columns: 1.25fr 0.9fr; gap: var(--sp-10); align-items: center; }
.sentiment-quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 1rem + 1.5vw, 1.95rem); line-height: 1.4; color: var(--text-0); letter-spacing: -0.01em; }
.sentiment-quote .mark { color: var(--emerald-bright); }
.sentiment-body { color: var(--text-2); margin-top: var(--sp-5); max-width: 56ch; }
.sentiment-desk { display: flex; align-items: center; gap: 12px; margin-top: var(--sp-6); }
.sentiment-desk .avatar { width: 44px; height: 44px; }
.sentiment-desk .sd-name { font-weight: 600; color: var(--text-0); font-size: 0.92rem; }
.sentiment-desk .sd-role { font-size: 0.78rem; color: var(--text-3); font-family: var(--font-mono); }

.sentiment-metrics { display: flex; flex-direction: column; gap: 12px; }
.s-metric {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  border: 1px solid var(--glass-border);
}
.s-metric .sm-l { font-size: 0.84rem; color: var(--text-2); }
.s-metric .sm-l small { display: block; font-size: 0.68rem; color: var(--text-3); font-family: var(--font-mono); margin-top: 2px; }
.s-metric .sm-v { font-family: var(--font-mono); font-size: 1.12rem; color: var(--text-0); }

/* ---- Watchlist table ----------------------------------------------------- */
.watch-sym { display: flex; align-items: center; gap: 11px; }
.watch-sym .q-logo { width: 32px; height: 32px; font-size: 0.74rem; }
.watch-sym .ws-code { font-weight: 600; color: var(--text-0); font-size: 0.9rem; }
.watch-sym .ws-name { font-size: 0.72rem; color: var(--text-3); }
table.data td .q-spark { width: 96px; height: 34px; }
.range-cell { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-3); }
.range-track { position: relative; width: 90px; height: 5px; border-radius: var(--r-pill); background: var(--bg-inset); overflow: hidden; }
.range-track > i { position: absolute; top: 0; bottom: 0; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--down), var(--gold), var(--up)); }
.range-track > b { position: absolute; top: -2px; width: 3px; height: 9px; border-radius: 2px; background: var(--text-0); }

/* ---- Closing CTA panel --------------------------------------------------- */
.mi-cta {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(40px, 6vw, 76px) var(--sp-8);
  border-radius: var(--r-xl);
  background:
    radial-gradient(80% 130% at 50% 0%, rgba(16,185,129,0.14), transparent 60%),
    linear-gradient(180deg, var(--glass-2), var(--glass));
  border: 1px solid var(--glass-border);
}
.mi-cta h2 { max-width: 18ch; margin-inline: auto; }
.mi-cta .lead { max-width: 600px; margin-inline: auto; }
.mi-cta-feats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-6); margin-top: var(--sp-8); }
.mi-cta-feat { display: inline-flex; align-items: center; gap: 9px; font-size: 0.86rem; color: var(--text-1); }
.mi-cta-feat svg { width: 18px; height: 18px; color: var(--emerald-bright); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .dash { grid-template-columns: repeat(6, 1fr); }
  .mi-dash .widget[style*="span 8"] { grid-column: span 6 !important; }
  .mi-dash .widget[style*="span 4"] { grid-column: span 3 !important; }
  .mi-dash .widget[style*="span 12"] { grid-column: 1 / -1 !important; }
  .sentiment { grid-template-columns: 1fr; gap: var(--sp-8); }
}
@media (max-width: 760px) {
  .dash, .mi-dash { grid-template-columns: 1fr; }
  .mi-dash .widget[style*="span 8"],
  .mi-dash .widget[style*="span 4"],
  .mi-dash .widget[style*="span 12"] { grid-column: 1 / -1 !important; }
  .dash-cta { flex-direction: column; align-items: flex-start; }
  .index-pill { min-width: calc(50% - var(--sp-3)); }
}
@media (max-width: 480px) {
  .index-pill { min-width: 100%; }
  .fd-top { flex-direction: column; }
}