/* ============================================================
   MARKETVISTA AI — GLOBAL PAGE HERO + MINI WIDGET SYSTEM
   FILE: /assets/css/mv-shell-page-system.css
   VERSION: 2.0
   DATE: 2026-04-02
   PURPOSE:
   - Add a shared page-title hero across app pages
   - Keep settings width aligned with the rest of the shell
   - Normalize left-side mini-widget accent bars globally
============================================================ */

:root{
  --mv-page-hero-radius: 30px;
  --mv-page-hero-shadow: 0 20px 48px rgba(15,23,42,.18);
  --mv-page-hero-bg:
    radial-gradient(circle at top left, rgba(96,165,250,.26), transparent 30%),
    radial-gradient(circle at bottom right, rgba(14,165,233,.16), transparent 34%),
    linear-gradient(90deg, #1f3a6b 0%, #041125 42%, #0f4b68 100%);
  --mv-page-hero-text: #f8fbff;
  --mv-page-hero-copy: #e7f1fb;
  --mv-page-hero-kicker: #9fd0ff;
  --mv-page-hero-border: rgba(255,255,255,.10);
  --mv-page-accent-1: linear-gradient(180deg, #3b82f6 0%, #6366f1 100%);
  --mv-page-accent-2: linear-gradient(180deg, #10b981 0%, #06b6d4 100%);
  --mv-page-accent-3: linear-gradient(180deg, #f59e0b 0%, #ef4444 100%);
  --mv-page-accent-4: linear-gradient(180deg, #8b5cf6 0%, #ec4899 100%);
}

html[data-bs-theme="dark"],
body[data-bs-theme="dark"],
html.dark,
body.dark{
  --mv-page-hero-bg:
    radial-gradient(circle at top left, rgba(59,130,246,.18), transparent 28%),
    radial-gradient(circle at bottom right, rgba(34,197,94,.10), transparent 32%),
    linear-gradient(90deg, #183667 0%, #07101f 44%, #10314f 100%);
  --mv-page-hero-shadow: 0 24px 54px rgba(0,0,0,.34);
  --mv-page-hero-border: rgba(255,255,255,.08);
}

/* Settings width should match the shared shell width, not shrink the site */
.mv-settings-shell{
  width: 100% !important;
  max-width: none !important;
}

.mv-page-hero-shell{
  margin-top: 16px;
  margin-bottom: 18px;
}

.mv-page-hero-card{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 22px;
  min-height: 220px;
  padding: 38px 38px;
  border-radius: var(--mv-page-hero-radius);
  background: var(--mv-page-hero-bg);
  border: 1px solid var(--mv-page-hero-border);
  box-shadow: var(--mv-page-hero-shadow);
  color: var(--mv-page-hero-text);
}

.mv-page-hero-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 46%, rgba(255,255,255,.02));
  pointer-events: none;
}

.mv-page-hero-card > *{
  position: relative;
  z-index: 1;
}

.mv-page-hero-card__copy{
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
}

.mv-page-hero-card__eyebrow{
  margin: 0 0 12px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mv-page-hero-kicker);
}

.mv-page-hero-card__title{
  margin: 0 0 14px;
  font-size: clamp(1.95rem, 2.7vw, 2.7rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 800;
  color: var(--mv-page-hero-text);
}

.mv-page-hero-card__desc,
.mv-page-hero-card__copy .mv-page-subtitle,
.mv-page-hero-card__lead{
  margin: 0;
  max-width: 58rem;
  font-size: 1.04rem;
  line-height: 1.55;
  font-weight: 800;
  color: var(--mv-page-hero-text) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
}

.mv-page-hero-card__detail{
  margin: 10px 0 0;
  max-width: 62rem;
  font-size: .96rem;
  line-height: 1.68;
  font-weight: 500;
  color: var(--mv-page-hero-copy) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.14);
}

.mv-page-hero-card__side{
  flex: 0 0 min(100%, 380px);
  display: grid;
  align-content: center;
  gap: 14px;
}

.mv-page-hero-card__meta{
  display: grid;
  gap: 14px;
}

.mv-page-hero-card__metric{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 18px 20px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.mv-page-hero-card__metric-label{
  display: block;
  margin-bottom: 6px;
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: #c1defe;
}

.mv-page-hero-card__metric-value{
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
}


.mv-page-hero-card__utility{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 18px 20px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.mv-page-hero-card__utility-label{
  margin-bottom: 10px;
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: #c1defe;
}

.mv-page-hero-card__utility-copy{
  margin: 0 0 12px;
  font-size: .95rem;
  line-height: 1.5;
  color: rgba(241,245,249,.95);
}

.mv-page-hero-card__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.mv-page-hero-card__chip{
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.12);
  color: #f8fbff;
  font-size: .77rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.mv-page-hero-card__action-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mv-page-hero-card__action-grid .btn,
.mv-page-hero-card__action-grid a.btn{
  width: 100%;
  justify-content: center;
  border-radius: 12px;
}

.mv-page-hero-card__action-grid .btn-outline-light,
.mv-page-hero-card__action-grid a.btn-outline-light{
  color: #f8fbff !important;
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.06) !important;
}

.mv-page-hero-card__action-grid .btn-light,
.mv-page-hero-card__action-grid a.btn-light{
  color: #102038 !important;
}

.mv-page-hero-card__actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.mv-page-hero-card__actions .btn,
.mv-page-hero-card__actions a.btn{
  border-radius: 14px;
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.08);
  color: #fff !important;
  box-shadow: none;
}

.mv-page-hero-card__actions .btn:hover,
.mv-page-hero-card__actions a.btn:hover{
  background: rgba(255,255,255,.14);
  transform: translateY(-1px);
}

.mv-page-hero-card__side:empty,
.mv-page-hero-card__actions:empty,
.mv-page-hero-card__meta:empty{
  display: none;
}

@media (max-width: 991.98px){
  .mv-page-hero-card{
    min-height: 0;
    padding: 26px 22px;
    border-radius: 24px;
    flex-direction: column;
  }

  .mv-page-hero-card__side{
    width: 100%;
    flex-basis: auto;
  }

  .mv-page-hero-card__actions{
    justify-content: flex-start;
  }

  .mv-page-hero-card__action-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px){
  .mv-page-hero-card__title{
    font-size: 1.92rem;
  }

  .mv-page-hero-card__desc,
  .mv-page-hero-card__copy .mv-page-subtitle,
  .mv-page-hero-card__lead{
    font-size: .97rem;
  }

  .mv-page-hero-card__detail{
    font-size: .9rem;
  }

  .mv-page-hero-card__metric{
    padding: 16px 16px;
  }

  .mv-page-hero-card__actions .btn,
  .mv-page-hero-card__actions a.btn{
    width: 100%;
    justify-content: center;
  }
}

/* Left accent bars for mini widgets */
.mv-overview-grid > .mv-stat,
.mv-kpi-card,
.mv-analysis-mini-card,
.mv-analysis-kpi-card,
.mv-ai-mini-card,
.mv-ai-summary-card,
.mv-ai-chip-card,
.mv-ai-stat,
.mv-sig-stat-card,
.mv-at-stat-card,
.mv-news-stat,
.mv-settings-pill,
.mv-status-tile,
.mv-live-status-card,
.mv-paper-stat-card,
.mv-command-mini,
.um-stat{
  position: relative;
  overflow: hidden;
}

.mv-overview-grid > .mv-stat::before,
.mv-kpi-card::before,
.mv-analysis-mini-card::before,
.mv-analysis-kpi-card::before,
.mv-ai-mini-card::before,
.mv-ai-summary-card::before,
.mv-ai-chip-card::before,
.mv-ai-stat::before,
.mv-sig-stat-card::before,
.mv-at-stat-card::before,
.mv-news-stat::before,
.mv-settings-pill::before,
.mv-status-tile::before,
.mv-live-status-card::before,
.mv-paper-stat-card::before,
.mv-command-mini::before,
.um-stat::before{
  content: "";
  position: absolute;
  left: 0 !important;
  top: 10px !important;
  bottom: 10px !important;
  right: auto !important;
  width: 6px !important;
  height: auto !important;
  border-radius: 0 999px 999px 0 !important;
  background: var(--mv-mini-accent, var(--mv-page-accent-1)) !important;
  z-index: 2;
}

.mv-overview-grid > .mv-stat:nth-child(4n + 1),
.mv-kpi-card:nth-child(4n + 1),
.mv-analysis-mini-card:nth-child(4n + 1),
.mv-analysis-kpi-card:nth-child(4n + 1),
.mv-ai-mini-card:nth-child(4n + 1),
.mv-ai-summary-card:nth-child(4n + 1),
.mv-ai-chip-card:nth-child(4n + 1),
.mv-ai-stat:nth-child(4n + 1),
.mv-sig-stat-card:nth-child(4n + 1),
.mv-at-stat-card:nth-child(4n + 1),
.mv-news-stat:nth-child(4n + 1),
.mv-settings-pill:nth-child(4n + 1),
.mv-status-tile:nth-child(4n + 1),
.mv-live-status-card:nth-child(4n + 1),
.mv-paper-stat-card:nth-child(4n + 1),
.mv-command-mini:nth-child(4n + 1),
.um-stat:nth-child(4n + 1){ --mv-mini-accent: var(--mv-page-accent-1); }

.mv-overview-grid > .mv-stat:nth-child(4n + 2),
.mv-kpi-card:nth-child(4n + 2),
.mv-analysis-mini-card:nth-child(4n + 2),
.mv-analysis-kpi-card:nth-child(4n + 2),
.mv-ai-mini-card:nth-child(4n + 2),
.mv-ai-summary-card:nth-child(4n + 2),
.mv-ai-chip-card:nth-child(4n + 2),
.mv-ai-stat:nth-child(4n + 2),
.mv-sig-stat-card:nth-child(4n + 2),
.mv-at-stat-card:nth-child(4n + 2),
.mv-news-stat:nth-child(4n + 2),
.mv-settings-pill:nth-child(4n + 2),
.mv-status-tile:nth-child(4n + 2),
.mv-live-status-card:nth-child(4n + 2),
.mv-paper-stat-card:nth-child(4n + 2),
.mv-command-mini:nth-child(4n + 2),
.um-stat:nth-child(4n + 2){ --mv-mini-accent: var(--mv-page-accent-2); }

.mv-overview-grid > .mv-stat:nth-child(4n + 3),
.mv-kpi-card:nth-child(4n + 3),
.mv-analysis-mini-card:nth-child(4n + 3),
.mv-analysis-kpi-card:nth-child(4n + 3),
.mv-ai-mini-card:nth-child(4n + 3),
.mv-ai-summary-card:nth-child(4n + 3),
.mv-ai-chip-card:nth-child(4n + 3),
.mv-ai-stat:nth-child(4n + 3),
.mv-sig-stat-card:nth-child(4n + 3),
.mv-at-stat-card:nth-child(4n + 3),
.mv-news-stat:nth-child(4n + 3),
.mv-settings-pill:nth-child(4n + 3),
.mv-status-tile:nth-child(4n + 3),
.mv-live-status-card:nth-child(4n + 3),
.mv-paper-stat-card:nth-child(4n + 3),
.mv-command-mini:nth-child(4n + 3),
.um-stat:nth-child(4n + 3){ --mv-mini-accent: var(--mv-page-accent-3); }

.mv-overview-grid > .mv-stat:nth-child(4n + 4),
.mv-kpi-card:nth-child(4n + 4),
.mv-analysis-mini-card:nth-child(4n + 4),
.mv-analysis-kpi-card:nth-child(4n + 4),
.mv-ai-mini-card:nth-child(4n + 4),
.mv-ai-summary-card:nth-child(4n + 4),
.mv-ai-chip-card:nth-child(4n + 4),
.mv-ai-stat:nth-child(4n + 4),
.mv-sig-stat-card:nth-child(4n + 4),
.mv-at-stat-card:nth-child(4n + 4),
.mv-news-stat:nth-child(4n + 4),
.mv-settings-pill:nth-child(4n + 4),
.mv-status-tile:nth-child(4n + 4),
.mv-live-status-card:nth-child(4n + 4),
.mv-paper-stat-card:nth-child(4n + 4),
.mv-command-mini:nth-child(4n + 4),
.um-stat:nth-child(4n + 4){ --mv-mini-accent: var(--mv-page-accent-4); }


/* keep shared hero copy readable regardless of theme compliance overrides */
.mv-page-hero-card__eyebrow{color:var(--mv-page-hero-kicker) !important}
.mv-page-hero-card__title{color:var(--mv-page-hero-text) !important}
.mv-page-hero-card__lead,
.mv-page-hero-card__copy .mv-page-subtitle{color:var(--mv-page-hero-text) !important}
.mv-page-hero-card__detail{color:var(--mv-page-hero-copy) !important}
.mv-page-hero-card__utility-copy{color:rgba(241,245,249,.95) !important}