/* ── Dashboard Page Styles ── */

/* Greeting Bar */
.greeting-bar {
  display: flex;
  justify-content: space-between;
  align-items: stretch;          /* both boxes share the taller height (aligned bottoms) */
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.greeting-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--sp-4);
  flex: 1;
  min-width: 280px;
}
.greeting-text { margin-bottom: var(--sp-5); }

/* compact market status under the greeting (replaces the chip buttons) */
.greeting-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-13);
  color: var(--text-tertiary);
  margin-top: var(--sp-3);
}
.greeting-status .gs-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.greeting-status.mkt-open .gs-dot { background: var(--color-up); box-shadow: 0 0 0 3px var(--color-up-light); }
.greeting-status.mkt-closed .gs-dot { background: var(--text-tertiary); }
.greeting-status .gs-sep { opacity: 0.5; }

/* ── Your-portfolio snapshot ── */
.portfolio-snapshot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--shadow-flat);
}
.ps-head { display: flex; align-items: center; justify-content: space-between; }
.ps-title { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
.ps-view {
  font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-link);
  background: none; border: none; cursor: pointer; padding: 3px 6px; border-radius: var(--radius-xs);
}
.ps-view:hover { background: var(--bg-selected-light); }
.ps-value-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); }
.ps-value { font-size: 28px; font-weight: var(--fw-bold); color: var(--text-brand); letter-spacing: var(--ls-tight); }
.ps-change { font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.ps-today { color: var(--text-tertiary); font-weight: var(--fw-regular); font-size: var(--fs-12); }
.ps-bar { display: flex; height: 10px; border-radius: var(--radius-full); overflow: hidden; background: var(--bg-light-grey); gap: 2px; }
.ps-seg { height: 100%; border-radius: 2px; transition: width var(--transition-base); }
.ps-legend { display: flex; flex-direction: column; gap: var(--sp-3); }
.ps-leg-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--sp-4); font-size: var(--fs-13); }
.ps-leg-left { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-brand); font-weight: var(--fw-medium); }
.ps-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ps-leg-pct { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ps-leg-val { color: var(--text-brand); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; }
.ps-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding-top: var(--sp-3); border-top: 1px solid var(--border-light); }
.ps-foot-note { font-size: var(--fs-12); color: var(--text-tertiary); }
.ps-foot-pnl { font-size: var(--fs-13); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.ps-empty { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--sp-4); }
.ps-empty-text { font-size: var(--fs-14); color: var(--text-secondary); line-height: 1.55; }

/* Diversification onboarding (first-time, no holdings) — reuses .pw-* gauge */
.ps-onboard { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3); }
.ps-onboard .pw-eyebrow { font-size: var(--fs-13); }
.ps-onboard-head { font-size: var(--fs-18); margin-top: 0; min-height: 0; line-height: 1.25; }
.ps-onboard-gauge { margin-top: var(--sp-2); height: 52px; }
.ps-onboard-gauge .pw-marker { height: 52px; }
.ps-onboard .pw-marker-pill { font-size: var(--fs-11); padding: 2px 8px; }
.ps-onboard-cta { margin-top: var(--sp-3); align-self: flex-start; height: 42px; padding: 0 var(--sp-5); font-size: var(--fs-14); }

.greeting-title {
  font-size: 30px;
  font-weight: var(--fw-bold);
  color: var(--text-brand);
  letter-spacing: var(--ls-tight);
}

.greeting-sub {
  font-size: var(--fs-15);
  color: var(--text-tertiary);
  margin-top: var(--sp-2);
}

.greeting-daychange {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  background: var(--bg-white);
  box-shadow: var(--shadow-flat);
}

.greeting-daychange.is-up { border-left: 3px solid var(--color-up); }
.greeting-daychange.is-down { border-left: 3px solid var(--color-down); }

.greeting-daychange .dc-label {
  font-size: var(--fs-11);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.greeting-daychange .dc-value {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
}

.greeting-daychange.is-up .dc-value { color: var(--color-up); }
.greeting-daychange.is-down .dc-value { color: var(--color-down); }

/* Greeting news mini-box */
.greeting-news {
  width: 600px;
  max-width: 100%;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--shadow-flat);
  display: flex;
  flex-direction: column;
}
.gn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.gn-head h4 { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--text-brand); display: inline-flex; align-items: center; gap: var(--sp-2); }
.gn-ic { width: 17px; height: 17px; color: var(--text-brand); flex-shrink: 0; }
.gn-explore {
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--text-link);
  background: none; border: none; cursor: pointer; padding: 3px 6px;
  border-radius: var(--radius-xs);
}
.gn-explore:hover { background: var(--bg-selected-light); }
.gn-list { display: flex; flex-direction: column; gap: var(--sp-4); min-height: 48px; flex: 1; justify-content: space-between; }
.gn-item {
  display: flex; gap: var(--sp-4); align-items: center; text-decoration: none;
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-light);
}
.gn-item:last-child { padding-bottom: 0; border-bottom: none; }
.gn-thumb {
  width: 72px; height: 54px; flex-shrink: 0;
  border-radius: var(--radius-md); overflow: hidden; background: var(--bg-light-grey);
}
.gn-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gn-title {
  font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--text-brand);
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gn-item:hover .gn-title { color: var(--text-link); }
.gn-meta { font-size: var(--fs-12); color: var(--text-tertiary); margin-top: 4px; }
.gn-empty { font-size: var(--fs-12); color: var(--text-tertiary); }

/* News page */
.news-page .page-title { display: flex; align-items: center; gap: var(--sp-3); }
.news-live {
  font-size: var(--fs-11); font-weight: var(--fw-semibold);
  color: var(--color-up); background: rgba(25, 175, 85, 0.12);
  padding: 2px 9px; border-radius: var(--radius-full);
}
.news-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.news-card {
  display: flex; gap: var(--sp-4);
  background: var(--bg-white); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: var(--sp-4);
  text-decoration: none; transition: all var(--transition-fast);
}
.news-card:hover { border-color: var(--border-default); box-shadow: var(--shadow-raised); transform: translateY(-1px); }
.news-thumb {
  width: 104px; height: 78px; flex-shrink: 0;
  border-radius: var(--radius-md); overflow: hidden; background: var(--bg-light-grey);
}
.news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-body { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; flex: 1; }
.news-title {
  font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--text-brand); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-meta { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-3); }
.news-source { font-size: var(--fs-12); color: var(--text-link); font-weight: var(--fw-medium); }
.news-date { font-size: var(--fs-12); color: var(--text-tertiary); }

@media (max-width: 1024px) { .greeting-news { width: 100%; } }
@media (max-width: 820px) { .news-list { grid-template-columns: 1fr; } }

/* Clickable stat cards */
.stat-clickable {
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.stat-clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-raised);
  border-color: var(--border-default);
}

/* Top Gainers / Losers */
.movers-sub {
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  color: var(--text-tertiary);
}

.movers-list {
  display: flex;
  flex-direction: column;
}

.mover-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.mover-row:last-child { border-bottom: none; }

.mover-row:hover { background: var(--bg-hover-light); }

.mover-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mover-name {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--text-brand);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mover-sub {
  font-size: var(--fs-12);
  color: var(--text-tertiary);
  margin-top: 2px;
}

.mover-change {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.movers-empty {
  padding: var(--sp-6) var(--sp-2);
  text-align: center;
  font-size: var(--fs-13);
  color: var(--text-tertiary);
}

.dashboard-top {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
}

.mmi-card {
  text-align: center;
}

.mmi-gauge-wrapper {
  display: flex;
  justify-content: center;
  margin: var(--sp-4) 0;
}

.mmi-tip {
  font-size: var(--fs-13);
  color: var(--text-secondary);
  line-height: var(--lh-normal);
  text-align: left;
  padding: var(--sp-4);
  background: var(--bg-light-grey);
  border-radius: var(--radius-md);
  margin-top: var(--sp-4);
}

.mmi-foot {
  font-size: var(--fs-11);
  color: var(--text-tertiary);
  text-align: center;
  margin-top: var(--sp-3);
}

.indices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.index-card {
  padding: var(--sp-5);
}

.index-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-3);
}

.index-name {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.index-value {
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
  margin-bottom: var(--sp-1);
}

.index-change {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Category performance heatmap */
.heat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-3);
}
.heat-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  min-height: 74px;
  justify-content: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.heat-clickable { cursor: pointer; }
.heat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }
.heat-name {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
  line-height: var(--lh-tight);
}
.heat-ret {
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
}
.heat-count {
  font-size: var(--fs-11);
  color: var(--text-secondary);
}

@media (max-width: 1200px) { .heat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .heat-grid { grid-template-columns: repeat(2, 1fr); } }

/* Market & Indices grid */
.market-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2) var(--sp-7);
}
.mkt-tile {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--border-light);
}
.mkt-tile-name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--text-brand);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mkt-spark { flex-shrink: 0; }
.mkt-tile-vals {
  text-align: right;
  min-width: 88px;
  flex-shrink: 0;
}
.mkt-price {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
}
.mkt-chg {
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  margin-top: 2px;
}

@media (max-width: 1024px) {
  .market-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .market-grid { grid-template-columns: 1fr; }
}

/* Top Funds Scroll */
.top-funds-scroll {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.fund-card-mini {
  padding: var(--sp-5);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.fund-card-mini:hover {
  border-color: var(--border-default);
  background: var(--bg-hover-light);
}

.fund-card-mini .fund-name {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--text-brand);
  line-height: var(--lh-normal);
}

.fund-card-mini .fund-amc {
  font-size: var(--fs-12);
  color: var(--text-tertiary);
  margin-top: 2px;
}

.fund-card-mini .fund-return {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
}

.fund-card-mini .fund-return-label {
  font-size: var(--fs-11);
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* Allocation Chart */
.allocation-chart-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-5);
}

.allocation-legend {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-13);
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-label {
  flex: 1;
  color: var(--text-secondary);
}

.legend-value {
  font-weight: var(--fw-medium);
  color: var(--text-brand);
}

/* Table wrapper */
.table-wrapper {
  overflow-x: auto;
}

/* Responsive */
@media (max-width: 1024px) {
  .dashboard-top {
    grid-template-columns: 1fr;
  }
  
  .indices-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .indices-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Boot loader / error + inline loaders (global) ── */
.boot-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  min-height: 60vh;
  text-align: center;
  padding: var(--sp-8);
}
.boot-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid var(--border-light);
  border-top-color: var(--color-up);
  border-radius: 50%;
  animation: boot-spin 0.8s linear infinite;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }
.boot-msg { font-size: var(--fs-14); color: var(--text-tertiary); }
.boot-title { font-size: var(--fs-18); font-weight: var(--fw-semibold); color: var(--text-brand); }
.boot-icon { font-size: 40px; }

.inline-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-7);
  color: var(--text-tertiary);
  font-size: var(--fs-13);
}
.inline-loader .boot-spinner { width: 22px; height: 22px; border-width: 2px; }

/* Offline banner (shown only when the API is unreachable) */
.offline-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 24px);
  z-index: var(--z-toast);
  display: none;
  align-items: center;
  gap: var(--sp-3);
  background: var(--bg-dark);
  color: #fff;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-popup);
  opacity: 0;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.offline-banner.show { display: flex; opacity: 1; transform: translate(-50%, 0); }
.offline-banner .ob-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-warning, #f9b72f);
  box-shadow: 0 0 0 3px rgba(249,183,47,0.25);
}

/* Market status pill (dashboard) */
.market-status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-13);
  color: var(--text-secondary);
}
.mkt-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.mkt-open .mkt-dot { background: var(--color-up); box-shadow: 0 0 0 3px var(--color-up-light); }
.mkt-closed .mkt-dot { background: var(--text-tertiary); }
.mkt-chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--radius-full);
  background: var(--bg-white); border: 1px solid var(--border-light);
  font-weight: var(--fw-medium);
}

/* Screener: universe load progress */
.universe-progress {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-3); min-height: 16px;
  font-size: var(--fs-12); color: var(--text-tertiary);
}
.universe-progress .up-bar {
  flex: 0 0 120px; height: 4px; border-radius: var(--radius-full);
  background: var(--border-light); overflow: hidden;
}
.universe-progress .up-fill {
  height: 100%; background: var(--color-up);
  transition: width 0.3s ease-out;
}
.universe-progress .up-done { color: var(--color-up); font-weight: var(--fw-medium); }

/* Screener: full-width page + ad slot */
.page-content.screener-page,
.page-content.compare-page { max-width: 1640px; }

.ad-slot {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 110px;
  padding: var(--sp-6) var(--sp-7);
  margin-bottom: var(--sp-6);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--color-blue-light), var(--bg-white));
  position: relative;
  overflow: hidden;
}
.ad-slot .ad-tag {
  position: absolute;
  top: 6px; right: 8px;
  font-size: var(--fs-10);
  color: var(--text-tertiary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  background: var(--bg-white);
}
.ad-slot .ad-content { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ad-slot .ad-title {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
}
.ad-slot .ad-sub { font-size: var(--fs-12); color: var(--text-tertiary); margin-top: 2px; }
.ad-slot .ad-cta { flex-shrink: 0; }

/* Screener: pagination */
.screener-pager {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-5);
  padding: var(--sp-5) 0 var(--sp-2);
}
.screener-pager:empty { display: none; }
.pager-info { font-size: var(--fs-13); color: var(--text-secondary); font-weight: var(--fw-medium); }

/* ── Recently viewed strip ── */
.recent-strip {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-2) 0 var(--sp-3);
  scrollbar-width: thin;
}
.recent-chip {
  flex: 0 0 auto;
  width: 190px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--sp-4);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-white);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.recent-chip:hover { border-color: var(--text-link); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.recent-chip .rc-name { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-chip .rc-sub { font-size: var(--fs-11); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-chip .rc-row { display: flex; align-items: baseline; gap: var(--sp-3); margin-top: var(--sp-2); }
.recent-chip .rc-nav { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-primary); }
.recent-chip .rc-chg { font-size: var(--fs-11); font-weight: var(--fw-semibold); }

@media (max-width: 768px) {
  .recent-chip { width: 160px; padding: var(--sp-3); }
}