/*
 * INNELLIS_AUTH_PRODUCT_LIGHT_V2
 *
 * Professional light financial-product appearance.
 *
 * Hierarchy:
 *   cool canvas
 *   white primary surfaces
 *   blue/slate structural surfaces
 *   amber Innellis brand
 *   blue informational UI
 *   green/red reserved for financial meaning
 *
 * Public SEO templates do not load this file.
 */

:root {
  color-scheme: light;

  /* Canvas */
  --bg: #EEF3F8;
  --background: #EEF3F8;

  /* Primary surfaces */
  --surface: #FFFFFF;
  --surface1: #FFFFFF;

  /* Secondary / tertiary surfaces */
  --surface2: #F1F5F9;
  --surface3: #E7EDF4;

  --card: #FFFFFF;
  --card-bg: #FFFFFF;

  /* Typography */
  --text: #172033;
  --text-primary: #172033;

  --muted: #66758A;
  --text-muted: #66758A;

  /* Borders */
  --border: #D6DEE8;
  --border-light: #E4EAF1;

  /* Non-financial product accent */
  --ui-blue: #356AE6;
  --ui-blue-soft: #EAF1FF;
  --ui-blue-border: #C9D8FA;

  /* Structural slate */
  --ui-slate: #334155;
  --ui-slate-soft: #E9EFF6;

  /* Brand support */
  --brand-soft: #FFF7E8;

  --shadow:
    0 1px 2px rgba(16,24,40,.04),
    0 8px 24px rgba(34,52,73,.06);
}


/* =========================================================
   PAGE CANVAS
   ========================================================= */

html,
body {
  background: #EEF3F8 !important;
  color: #172033 !important;
}


/* =========================================================
   TOP NAVIGATION
   ========================================================= */

nav,
.topbar,
.navbar,
.mobile-header {
  background: rgba(255,255,255,.97) !important;
  border-color: #D6DEE8 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
}

.nav-inner,
header {
  border-color: #D6DEE8 !important;
}


/*
 * Neutral navigation buttons should feel like product navigation,
 * not separate gray boxes floating on white.
 */

.nav-links a:not(.active),
.tab-btn:not(.active) {
  background-color: #F1F5F9 !important;
  border-color: #D9E1EA !important;
}


/* Keep Innellis amber for the selected primary navigation state. */

.nav-links a.active,
.tab-btn.active {
  background-color: #FFF7E8 !important;
}


/* =========================================================
   MARKET / STATUS STRIPS
   ========================================================= */

.market-regime,
.regime-strip,
.market-strip,
.status-strip {
  background: #EAF1FF !important;
  border-color: #C9D8FA !important;
}


/* =========================================================
   PRIMARY CARDS
   ========================================================= */

.card,
.panel,
.section-card,
.metric-card,
.alpha-card,
.modal-content,
.modal-card,
.dialog,
.dropdown,
.popover {
  background-color: #FFFFFF !important;
  border-color: #D6DEE8 !important;
}


/*
 * Important large cards receive a very small depth cue.
 * Avoid excessive SaaS-style floating shadows.
 */

.card,
.panel,
.section-card {
  box-shadow:
    0 1px 2px rgba(15,23,42,.025),
    0 5px 16px rgba(15,23,42,.035);
}


/* =========================================================
   CARD / SECTION HEADERS
   ========================================================= */

/*
 * This specifically fixes the heavy medium-gray headers visible
 * in the Research screenshot.
 */

.card-header,
.panel-header,
.section-header,
.table-header {
  background-color: #E9EFF6 !important;
  color: #334155 !important;
  border-color: #D6DEE8 !important;
}


/*
 * Preserve brand identity in small uppercase section titles
 * without painting entire sections orange.
 */

.card-title,
.section-title,
.overview-section-title {
  color: #334155;
}


/* =========================================================
   LEFT / CONTEXT COLUMN
   ========================================================= */

.sidebar,
.left-panel,
.context-column,
.portfolio-context {
  background-color: #F5F8FB !important;
}


/*
 * Context cards should separate from the page canvas.
 */

.sidebar .card,
.left-panel .card,
.context-column .card {
  background: #FFFFFF !important;
}


/*
 * Stronger hierarchy for context-column headers while staying
 * substantially lighter than the old gray blocks.
 */

.sidebar .card-header,
.left-panel .card-header,
.context-column .card-header {
  background: #DDE7F2 !important;
  color: #29384D !important;
}


/* =========================================================
   METRIC TILES
   ========================================================= */

.metric,
.stat,
.exec-metric,
.ind-item,
.bt-metric,
.mobile-overview-metric,
.mobile-health-tile,
.mobile-intel-stat {
  background-color: #F1F5F9 !important;
  border-color: #DCE4ED !important;
}


/*
 * Light-blue informational tiles improve visual grouping
 * without competing with BUY/SELL colors.
 */

.metric:hover,
.stat:hover,
.ind-item:hover {
  background-color: #EAF1FF !important;
}


/* =========================================================
   RESEARCH WORKFLOW / TABS
   ========================================================= */

.tabs,
.tab-bar,
.committee-tabs {
  background-color: transparent !important;
  border-color: #D6DEE8 !important;
}

.workflow-tab,
.research-tab,
.committee-tab {
  border-color: #D6DEE8 !important;
}

.workflow-tab.active,
.research-tab.active,
.committee-tab.active {
  background-color: #EAF1FF !important;
  border-color: #C9D8FA !important;
}


/* =========================================================
   DECISION BRIEF
   ========================================================= */

.ds-card {
  background-color: #FFFFFF !important;
  border-top-color: #D6DEE8 !important;
  border-right-color: #D6DEE8 !important;
  border-bottom-color: #D6DEE8 !important;

  box-shadow:
    0 1px 2px rgba(15,23,42,.03),
    0 10px 28px rgba(15,23,42,.06);
}


/* Constructive recommendation */

.ds-card[style*="rgba(63,185,80"] {
  background:
    linear-gradient(
      180deg,
      rgba(232,248,237,.75) 0,
      #FFFFFF 170px
    ) !important;
}


/* Watch / mixed recommendation */

.ds-card[style*="rgba(245,166,35"] {
  background:
    linear-gradient(
      180deg,
      rgba(255,247,232,.85) 0,
      #FFFFFF 170px
    ) !important;
}


/* Reduce / sell recommendation */

.ds-card[style*="rgba(248,81,73"] {
  background:
    linear-gradient(
      180deg,
      rgba(255,238,237,.75) 0,
      #FFFFFF 170px
    ) !important;
}


/* Decision metrics */

.ds-metric,
.ds-metric-wide {
  background: #F5F8FB !important;
  border-color: #DCE4ED !important;
}


/* Expandable explanations */

.ds-metric-detail {
  background: #F8FAFC !important;
  border-color: #DCE4ED !important;
}


/* Evidence */

.ds-evidence {
  background: #FFFFFF !important;
  border-color: #DCE4ED !important;
}


/* Next-step strip */

.ds-next {
  background: #EAF1FF !important;
  border-color: #C9D8FA !important;
}


/* =========================================================
   DECISION / EVIDENCE INFORMATION BLOCKS
   ========================================================= */

/*
 * Generic pale informational areas.
 */

.info-box,
.explanation,
.summary-box,
.research-note {
  background-color: #F6F9FC !important;
  border-color: #DCE4ED !important;
}


/* =========================================================
   FORMS
   ========================================================= */

input,
select,
textarea {
  background-color: #FFFFFF !important;
  color: #172033 !important;
  border-color: #C9D3DF !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #7EA4F2 !important;
  box-shadow: 0 0 0 3px rgba(53,106,230,.10);
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: #98A3B3 !important;
}


/* =========================================================
   TABLES
   ========================================================= */

table {
  color: #172033;
}

thead,
th {
  background-color: #F1F5F9 !important;
  color: #59697D !important;
  border-color: #D6DEE8 !important;
}

td {
  border-color: #E3E9F0 !important;
}

tbody tr:nth-child(even) {
  background-color: #FBFCFD;
}

tbody tr:hover {
  background-color: #EAF1FF !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

/*
 * Do not override existing semantic BUY / SELL buttons.
 * Neutral utility buttons get stronger contrast.
 */

button:not([style*="var(--green)"])
      :not([style*="var(--red)"]) {
  border-color: #D1DAE5;
}


/* =========================================================
   MOBILE PRODUCT
   ========================================================= */

.mobile-overview-head,
.mobile-phase8-head {
  background: transparent !important;
}

.mobile-overview-metric,
.mobile-health-tile,
.mobile-intel-summary,
.mobile-intel-stat {
  background-color: #FFFFFF !important;
  border-color: #D6DEE8 !important;
}

.mobile-intel-group {
  border-color: #D6DEE8 !important;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

body,
input,
select,
textarea,
button {
  color: #172033;
}

.empty,
.loading,
.sub,
.subtitle,
.description,
.section-note,
.mobile-section-note {
  color: #66758A;
}


/* =========================================================
   SCROLLBARS
   ========================================================= */

* {
  scrollbar-color: #AEBAC8 #EEF3F8;
}

::-webkit-scrollbar-track {
  background: #EEF3F8;
}

::-webkit-scrollbar-thumb {
  background: #AEBAC8;
  border-radius: 8px;
}


/* =========================================================
   CODE / MONO
   ========================================================= */

code,
pre {
  background-color: #E9EFF6;
  color: #334155;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

::selection {
  background: rgba(53,106,230,.17);
  color: #172033;
}


/*
 * IMPORTANT:
 *
 * We intentionally DO NOT redefine:
 *
 *   --green
 *   --red
 *   --amber
 *
 * Existing financial semantics remain authoritative.
 */


/* =========================================================
   INNELLIS_AUTH_PRODUCT_LIGHT_V3
   Final customer-facing visual hierarchy
   ========================================================= */


/*
 * V3 does NOT introduce decorative rainbow colors.
 * It strengthens four roles:
 *
 * Navy  = structure
 * Blue  = information / product interaction
 * Amber = Innellis brand / attention
 * Green = constructive financial meaning
 * Red   = risk financial meaning
 */


/* ──────────────────────────────────────────────────────────
   STRONGER CANVAS SEPARATION
   ────────────────────────────────────────────────────────── */

html,
body {
  background: #EDF2F7 !important;
}


/* Main content should visibly sit above the page canvas. */

.content,
.main-content,
main {
  border-color: #D4DEE9 !important;
}


/* ──────────────────────────────────────────────────────────
   NAVIGATION — CLEAN, NOT COLORFUL
   ────────────────────────────────────────────────────────── */

nav,
.topbar,
.navbar {
  background: #FFFFFF !important;
  border-bottom: 1px solid #D7E0EA !important;
}


/* Neutral navigation */

.nav-links a:not(.active) {
  background: #F3F6F9 !important;
  color: #26364A !important;
  border-color: #DCE4EC !important;
}


/* Innellis brand state */

.nav-links a.active {
  background: #FFF6E5 !important;
  color: #E79300 !important;
  border-color: #F3BF64 !important;
}


/* ──────────────────────────────────────────────────────────
   STRUCTURAL CARD HEADERS
   ────────────────────────────────────────────────────────── */

.card-header,
.panel-header,
.section-header,
.table-header {
  background: #E3EAF2 !important;
  color: #24364B !important;
  border-color: #CDD8E4 !important;
  font-weight: 700;
}


/*
 * A restrained blue-slate top rule makes sections easier to scan
 * without turning every card into a dark box.
 */

.card-header,
.panel-header {
  box-shadow: inset 0 2px 0 rgba(53,106,230,.10);
}


/* ──────────────────────────────────────────────────────────
   MAIN RESEARCH CARD
   ────────────────────────────────────────────────────────── */

.ds-card {
  border: 1px solid #CCD8E4 !important;
  border-top-width: 4px !important;

  box-shadow:
    0 2px 5px rgba(15,23,42,.05),
    0 14px 32px rgba(30,50,72,.08) !important;
}


/*
 * Keep recommendation color on the border while allowing
 * the body itself to remain clean and readable.
 */

.ds-card[style*="rgba(63,185,80"] {
  background:
    linear-gradient(
      180deg,
      #F3FBF5 0,
      #FFFFFF 145px
    ) !important;
}

.ds-card[style*="rgba(245,166,35"] {
  background:
    linear-gradient(
      180deg,
      #FFFAF0 0,
      #FFFFFF 145px
    ) !important;
}

.ds-card[style*="rgba(248,81,73"] {
  background:
    linear-gradient(
      180deg,
      #FFF5F4 0,
      #FFFFFF 145px
    ) !important;
}


/* ──────────────────────────────────────────────────────────
   METRIC GRID — BLUE-GRAY INFORMATION LAYER
   ────────────────────────────────────────────────────────── */

.ds-metric,
.ds-metric-wide,
.metric,
.stat,
.exec-metric,
.ind-item,
.bt-metric {
  background: #EEF3F8 !important;
  border-color: #D6E0EA !important;
}

.ds-metric:hover,
.metric:hover,
.stat:hover,
.ind-item:hover {
  background: #E5EEF9 !important;
}


/* ──────────────────────────────────────────────────────────
   DECISION EXPLANATION
   ────────────────────────────────────────────────────────── */

.ds-next {
  background: #E8F0FC !important;
  border-color: #C6D7F1 !important;
  color: #29496F !important;
}


/* ──────────────────────────────────────────────────────────
   RESEARCH WORKFLOW
   ────────────────────────────────────────────────────────── */

.workflow-tab,
.research-tab,
.committee-tab,
.tab-btn {
  background: #F2F5F8 !important;
  border-color: #D7E0E9 !important;
}

.workflow-tab.active,
.research-tab.active,
.committee-tab.active,
.tab-btn.active {
  background: #E7EFFB !important;
  border-color: #AFC6EB !important;
  color: #315C9B !important;
}


/* ──────────────────────────────────────────────────────────
   PORTFOLIO / CONTEXT COLUMN
   ────────────────────────────────────────────────────────── */

/*
 * Slightly stronger contrast for the compact left-hand
 * information stack visible on desktop Research.
 */

.sidebar,
.left-panel,
.context-column,
.portfolio-context {
  background: #E6EDF5 !important;
}

.sidebar .card,
.left-panel .card,
.context-column .card {
  border-color: #CAD6E2 !important;
  box-shadow: 0 2px 8px rgba(32,51,72,.045);
}

.sidebar .card-header,
.left-panel .card-header,
.context-column .card-header {
  background: #D7E2ED !important;
  color: #20354C !important;
  border-color: #C3D0DD !important;
}


/* ──────────────────────────────────────────────────────────
   SEMANTIC INFORMATION BLOCKS
   ────────────────────────────────────────────────────────── */


/* Bullish / positive evidence */

.bull-case,
.positive-case,
.supporting-evidence {
  background: #F0FAF3 !important;
  border-color: #CBEBD4 !important;
}


/* Risk / bearish evidence */

.risk-case,
.bear-case,
.negative-case,
.main-risk {
  background: #FFF3F2 !important;
  border-color: #F2D1CF !important;
}


/* Neutral explanation / change conditions */

.why-box,
.change-view,
.falsification-box {
  background: #FFF8EA !important;
  border-color: #F0DCAA !important;
}


/* ──────────────────────────────────────────────────────────
   TABLES / HOLDINGS
   ────────────────────────────────────────────────────────── */

thead,
th {
  background: #E8EEF5 !important;
  color: #354A61 !important;
}

tbody tr:nth-child(even) {
  background: #F8FAFC !important;
}

tbody tr:hover {
  background: #EAF1FA !important;
}


/* ──────────────────────────────────────────────────────────
   SEARCH / UTILITY UI
   ────────────────────────────────────────────────────────── */

/*
 * Brand-orange stays prominent for search / primary discovery,
 * but with less visual heaviness.
 */

button {
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}


/* ──────────────────────────────────────────────────────────
   MOBILE
   ────────────────────────────────────────────────────────── */

.mobile-overview-metric,
.mobile-health-tile,
.mobile-intel-stat {
  background: #FFFFFF !important;
  border: 1px solid #D3DEE8 !important;
  box-shadow: 0 2px 7px rgba(28,47,68,.04);
}

.mobile-intel-summary {
  background: #EAF1FA !important;
  border-color: #C9D8EA !important;
}


/* ──────────────────────────────────────────────────────────
   FINAL TYPOGRAPHY CONTRAST
   ────────────────────────────────────────────────────────── */

body {
  color: #18283B !important;
}

.empty,
.loading,
.sub,
.subtitle,
.description,
.section-note,
.mobile-section-note {
  color: #63758A !important;
}


/* End INNELLIS_AUTH_PRODUCT_LIGHT_V3 */


/* =========================================================
   INNELLIS_AUTH_PRODUCT_LIGHT_V4
   Premium institutional research hierarchy
   ========================================================= */


/*
 * V4 is not a new color scheme.
 *
 * It reduces the washed-out appearance of V3 by creating
 * clearer layers:
 *
 * Canvas      = quiet
 * Sidebar     = structural
 * Cards       = white
 * Blue        = interaction
 * Amber       = Innellis / attention
 * Green/red   = financial meaning only
 */


/* ──────────────────────────────────────────────────────────
   SYSTEM TOKENS
   ────────────────────────────────────────────────────────── */

:root {
  --bg: #F3F6FA;
  --background: #F3F6FA;

  --surface: #FFFFFF;
  --surface1: #FFFFFF;
  --surface2: #F7F9FC;
  --surface3: #EDF2F7;

  --card: #FFFFFF;
  --card-bg: #FFFFFF;

  --text: #17283D;
  --text-primary: #17283D;

  --muted: #65788D;
  --text-muted: #65788D;

  --border: #D4DEE8;
  --border-light: #E3E9F0;

  --ui-blue: #356AE6;
  --ui-blue-soft: #EDF3FD;
  --ui-blue-border: #C5D5F0;

  --premium-shadow:
    0 1px 2px rgba(18,38,58,.035),
    0 8px 22px rgba(18,38,58,.055);
}


/* ──────────────────────────────────────────────────────────
   PAGE CANVAS
   ────────────────────────────────────────────────────────── */

html,
body {
  background: #F3F6FA !important;
  color: #17283D !important;
}


/* ──────────────────────────────────────────────────────────
   TOP PRODUCT NAVIGATION
   ────────────────────────────────────────────────────────── */

nav,
.topbar,
.navbar {
  background: #FFFFFF !important;

  border-bottom:
    1px solid #D5DFE9 !important;

  box-shadow:
    0 1px 2px rgba(23,40,61,.035) !important;
}


/*
 * Ordinary navigation becomes quieter.
 */

.nav-links a:not(.active) {
  background: #F7F9FC !important;
  color: #334A62 !important;
  border-color: #DCE4EC !important;
}


/*
 * Interaction = blue.
 * Amber remains only as a small Innellis accent.
 */

.nav-links a.active {
  background: #EDF3FD !important;
  color: #285AA8 !important;
  border-color: #BDD0EE !important;

  box-shadow:
    inset 0 -2px 0 #E99A00;
}


/* ──────────────────────────────────────────────────────────
   RESEARCH WORKSPACE
   ────────────────────────────────────────────────────────── */

.content,
.main-content,
main {
  background: transparent !important;
}


/* ──────────────────────────────────────────────────────────
   PORTFOLIO SIDEBAR
   ────────────────────────────────────────────────────────── */

/*
 * The sidebar is structural context, not the research itself.
 * Give it its own slightly darker canvas.
 */

.sidebar,
.left-panel,
.context-column,
.portfolio-context {
  background: #E7EDF4 !important;

  border-right:
    1px solid #CBD7E3 !important;
}


/* Sidebar cards */

.sidebar .card,
.left-panel .card,
.context-column .card,
.portfolio-context .card {
  background: #FFFFFF !important;

  border:
    1px solid #CEDAE6 !important;

  box-shadow:
    0 1px 4px rgba(23,40,61,.04) !important;
}


/* Sidebar card titles */

.sidebar .card-header,
.left-panel .card-header,
.context-column .card-header,
.portfolio-context .card-header {
  background: #DCE6F0 !important;

  color: #253B53 !important;

  border-color: #C8D5E2 !important;

  font-weight: 700;
}


/* Sidebar metric tiles */

.sidebar .metric,
.sidebar .stat,
.left-panel .metric,
.left-panel .stat,
.context-column .metric,
.context-column .stat {
  background: #F3F6FA !important;

  border:
    1px solid #E0E6ED !important;
}


/* ──────────────────────────────────────────────────────────
   PRIMARY DECISION CARD
   ────────────────────────────────────────────────────────── */

.ds-card {
  background: #FFFFFF !important;

  border:
    1px solid #C8D4E0 !important;

  border-top-width:
    4px !important;

  box-shadow:
    0 2px 6px rgba(19,39,59,.045),
    0 16px 38px rgba(19,39,59,.075) !important;
}


/*
 * Recommendation tint becomes much more restrained.
 */

.ds-card[style*="rgba(63,185,80"] {
  background:
    linear-gradient(
      180deg,
      #F7FCF8 0,
      #FFFFFF 115px
    ) !important;
}

.ds-card[style*="rgba(245,166,35"] {
  background:
    linear-gradient(
      180deg,
      #FFFBF4 0,
      #FFFFFF 115px
    ) !important;
}

.ds-card[style*="rgba(248,81,73"] {
  background:
    linear-gradient(
      180deg,
      #FFF8F7 0,
      #FFFFFF 115px
    ) !important;
}


/* ──────────────────────────────────────────────────────────
   DECISION METRICS
   ────────────────────────────────────────────────────────── */

/*
 * V3's gray metric blocks looked slightly disabled.
 * White tiles inside a soft grouping create better depth.
 */

.ds-metric,
.ds-metric-wide,
.metric,
.stat,
.exec-metric,
.ind-item,
.bt-metric {
  background: #F7F9FC !important;

  border:
    1px solid #E0E6ED !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8);
}


/*
 * Hover should feel interactive without becoming colorful.
 */

.ds-metric:hover,
.metric:hover,
.stat:hover,
.ind-item:hover {
  background: #EEF4FA !important;

  border-color:
    #C8D7E6 !important;
}


/* ──────────────────────────────────────────────────────────
   DECISION EXPLANATION
   ────────────────────────────────────────────────────────── */

.ds-next {
  background: #F9FBFD !important;

  border:
    1px solid #DDE5ED !important;

  border-left:
    3px solid #356AE6 !important;

  color: #29435F !important;
}


/* ──────────────────────────────────────────────────────────
   SECTION HEADERS
   ────────────────────────────────────────────────────────── */

.card-header,
.panel-header,
.section-header,
.table-header {
  background: #EDF2F7 !important;

  color: #21364D !important;

  border-color: #D3DEE9 !important;

  font-weight: 700;
}


/*
 * Remove the broad blue tint.
 * Use one thin Innellis accent for structure.
 */

.card-header,
.panel-header {
  box-shadow:
    inset 2px 0 0 #E99A00 !important;
}


/* ──────────────────────────────────────────────────────────
   STANDARD RESEARCH PANELS
   ────────────────────────────────────────────────────────── */

.card,
.panel {
  border-color:
    #D4DEE8 !important;

  box-shadow:
    0 1px 3px rgba(23,40,61,.035),
    0 7px 18px rgba(23,40,61,.04);
}


/* ──────────────────────────────────────────────────────────
   WORKFLOW / SUB-TABS
   ────────────────────────────────────────────────────────── */

.workflow-tab,
.research-tab,
.committee-tab,
.tab-btn {
  background: #F7F9FC !important;

  color: #607389 !important;

  border-color: #DCE4EC !important;
}

.workflow-tab:hover,
.research-tab:hover,
.committee-tab:hover,
.tab-btn:hover {
  background: #EEF3F8 !important;

  color: #334D69 !important;
}

.workflow-tab.active,
.research-tab.active,
.committee-tab.active,
.tab-btn.active {
  background: #EDF3FD !important;

  color: #315FAD !important;

  border-color: #BCD0EE !important;

  box-shadow:
    inset 0 -2px 0 #356AE6;
}


/* ──────────────────────────────────────────────────────────
   SEMANTIC EVIDENCE
   ────────────────────────────────────────────────────────── */

.bull-case,
.positive-case,
.supporting-evidence {
  background: #F6FBF7 !important;

  border-color:
    #CFE7D6 !important;
}

.risk-case,
.bear-case,
.negative-case,
.main-risk {
  background: #FFF7F6 !important;

  border-color:
    #EBCFCD !important;
}

.why-box,
.change-view,
.falsification-box {
  background: #FFFBF4 !important;

  border-color:
    #ECDDB9 !important;
}


/* ──────────────────────────────────────────────────────────
   FINANCIAL COLORS
   ────────────────────────────────────────────────────────── */

/*
 * Less fluorescent than before while remaining immediately
 * recognizable.
 */

.positive,
.profit,
.gain,
.buy,
.bullish {
  color: #25A653 !important;
}

.negative,
.loss,
.sell,
.bearish,
.risk {
  color: #E04F4B !important;
}


/* ──────────────────────────────────────────────────────────
   TRADE PLAN
   ────────────────────────────────────────────────────────── */

/*
 * Trade-plan tiles should read as decision outputs,
 * not disabled inputs.
 */

.exec-metric {
  background: #F4F7FA !important;

  border-color:
    #DCE4EC !important;

  border-radius:
    6px !important;
}


/* ──────────────────────────────────────────────────────────
   CHART / TECHNICAL CONTROLS
   ────────────────────────────────────────────────────────── */

.chart-controls button,
.chart-controls .btn,
.indicator-btn,
.timeframe-btn {
  background: #FFFFFF !important;

  color: #5C7087 !important;

  border-color:
    #D5DFE8 !important;
}

.chart-controls button:hover,
.chart-controls .btn:hover,
.indicator-btn:hover,
.timeframe-btn:hover {
  background: #F3F6FA !important;

  color: #294763 !important;
}

.chart-controls button.active,
.chart-controls .btn.active,
.indicator-btn.active,
.timeframe-btn.active {
  background: #EDF3FD !important;

  color: #315FAD !important;

  border-color:
    #AFC6EA !important;
}


/* ──────────────────────────────────────────────────────────
   TABLES / RECENT TRADES
   ────────────────────────────────────────────────────────── */

thead,
th {
  background: #E6EDF5 !important;

  color: #354B62 !important;

  border-color:
    #D0DBE6 !important;
}

tbody tr {
  background: #FFFFFF;
}

tbody tr:nth-child(even) {
  background: #FAFBFD !important;
}

tbody tr:hover {
  background: #EEF4FA !important;
}


/* ──────────────────────────────────────────────────────────
   INPUTS
   ────────────────────────────────────────────────────────── */

input,
select,
textarea {
  background: #FFFFFF !important;

  color: #17283D !important;

  border-color:
    #C9D5E1 !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color:
    #7CA2EC !important;

  box-shadow:
    0 0 0 3px rgba(53,106,230,.09);
}


/* ──────────────────────────────────────────────────────────
   MUTED TYPOGRAPHY
   ────────────────────────────────────────────────────────── */

.empty,
.loading,
.sub,
.subtitle,
.description,
.section-note,
.mobile-section-note {
  color: #65788D !important;
}


/* ──────────────────────────────────────────────────────────
   MOBILE
   ────────────────────────────────────────────────────────── */

@media (max-width: 760px) {

  html,
  body {
    background: #F7F9FC !important;
  }

  .sidebar,
  .left-panel,
  .context-column,
  .portfolio-context {
    background: #F1F5F9 !important;
  }

  .mobile-overview-metric,
  .mobile-health-tile,
  .mobile-intel-stat {
    background: #FFFFFF !important;

    border:
      1px solid #D7E0E9 !important;

    box-shadow: none !important;
  }

  .mobile-intel-summary {
    background: #F2F6FB !important;

    border-color:
      #D4DFEA !important;
  }

}


/* End INNELLIS_AUTH_PRODUCT_LIGHT_V4 */


/* =========================================================
   INNELLIS_AUTH_PRODUCT_LIGHT_V5
   Semantic color discipline + premium product polish
   ========================================================= */


/* ---------------------------------------------------------
   1. NORMAL RESEARCH TEXT MUST REMAIN NEUTRAL

   Green/red are reserved for actual investment meaning.
   --------------------------------------------------------- */

.ds-next,
.ds-next p,
.ds-next div,
.ds-next span:not(.positive):not(.negative):not(.buy):not(.sell),
.why-box,
.why-box p,
.why-box div,
.explanation,
.explanation p {
  color: #294057 !important;
}


/*
 * Keep labels distinct without turning prose orange/green.
 */

.ds-next .label,
.ds-next .eyebrow,
.why-box .label,
.why-box .eyebrow {
  color: #B87500 !important;
}


/* ---------------------------------------------------------
   2. SECTION HEADERS

   Stop repeating a strong amber stripe everywhere.
   Structural headers should mostly be neutral.
   --------------------------------------------------------- */

.card-header,
.panel-header {
  box-shadow:
    inset 2px 0 0 #B8C7D7 !important;
}


/*
 * Important research areas may retain a subtle
 * Innellis accent when their markup already exposes it.
 */

.decision-header,
.primary-section-header,
.research-primary-header {
  box-shadow:
    inset 3px 0 0 #E99A00 !important;
}


/* ---------------------------------------------------------
   3. STANDARD SECTION TITLES
   --------------------------------------------------------- */

.card-header,
.panel-header,
.section-header {
  color: #20354D !important;
}

.card-title,
.panel-title,
.section-title {
  color: #20354D !important;
}


/* ---------------------------------------------------------
   4. SYMBOLS SHOULD NOT ALL BE BRAND ORANGE

   Amber is brand. Tickers are information.
   --------------------------------------------------------- */

.symbol,
.ticker,
.trade-symbol,
.holding-symbol {
  color: #315FAD !important;
}


/*
 * Sidebar holdings are calmer in navy.
 */

.sidebar .symbol,
.sidebar .ticker,
.sidebar .holding-symbol,
.left-panel .symbol,
.left-panel .ticker,
.left-panel .holding-symbol {
  color: #294763 !important;
}


/* ---------------------------------------------------------
   5. RECENT TRADES TABLE
   --------------------------------------------------------- */

table {
  background: #FFFFFF !important;
}

tbody td {
  color: #24384E;
}


/*
 * The first column identifies an instrument.
 * It should not visually compete with BUY/SELL.
 */

tbody td:first-child {
  color: #315FAD !important;
  font-weight: 600;
}


/*
 * Side has the semantic meaning.
 */

tbody td .buy,
tbody td.buy {
  color: #22974B !important;
}

tbody td .sell,
tbody td.sell {
  color: #D84A46 !important;
}


/* ---------------------------------------------------------
   6. DECISION / MARKET METRIC TILES
   --------------------------------------------------------- */

.ds-metric,
.ds-metric-wide,
.exec-metric,
.bt-metric {
  background: #F5F8FB !important;

  border:
    1px solid #D9E2EB !important;

  box-shadow: none !important;
}


/*
 * Labels are clearly secondary.
 */

.ds-metric-label,
.exec-label,
.metric-label,
.stat-label {
  color: #728399 !important;
}


/*
 * Ordinary values use dark navy.
 * Semantic classes can still override this.
 */

.ds-metric-value,
.exec-value,
.metric-value,
.stat-value {
  color: #1E334A;
}


/* ---------------------------------------------------------
   7. TRADE PLAN

   Inputs need to look interactive.
   Output tiles need to look informational.
   --------------------------------------------------------- */

.trade-plan input,
.trade-plan select,
.trade-plan .input,
.trade-plan .field {
  background: #FFFFFF !important;

  border:
    1px solid #C5D1DE !important;

  box-shadow:
    inset 0 1px 2px rgba(23,40,61,.025);
}


/*
 * Suggested/output values are distinct from inputs.
 */

.trade-plan .exec-metric,
.trade-plan .metric,
.trade-plan .stat {
  background: #F3F6FA !important;

  border-color:
    #DCE4EC !important;
}


/* ---------------------------------------------------------
   8. BUTTON SYSTEM

   Blue = product action
   Amber = Innellis/secondary attention
   Green/red = actual trade action
   --------------------------------------------------------- */

button:not(.buy):not(.sell):not(.danger):not(.execute-buy):not(.execute-sell),
.btn:not(.buy):not(.sell):not(.danger):not(.execute-buy):not(.execute-sell) {
  border-color: #D1DCE7;
}


/* Normal selected controls */

button.active:not(.buy):not(.sell),
.btn.active:not(.buy):not(.sell),
.tab-btn.active {
  background: #EDF3FD !important;
  color: #315FAD !important;
  border-color: #B8CBEB !important;
}


/* ---------------------------------------------------------
   9. CHART CONTROLS

   Reduce visual noise from dozens of pills.
   --------------------------------------------------------- */

.timeframe-btn,
.indicator-btn,
.chart-controls button {
  box-shadow: none !important;
}


/*
 * Non-selected indicator controls should be visually quieter.
 */

.indicator-btn:not(.active),
.timeframe-btn:not(.active) {
  background: #FFFFFF !important;

  border-color:
    #DCE4EC !important;
}


/*
 * Selected timeframe gets interaction blue.
 */

.timeframe-btn.active {
  background: #EDF3FD !important;

  color: #315FAD !important;

  border-color:
    #AEC5EB !important;
}


/* ---------------------------------------------------------
   10. MARKET CONTEXT

   Make key research conclusions prominent,
   not the container background.
   --------------------------------------------------------- */

.market-context,
.market-context-panel {
  background: #FFFFFF !important;
}

.market-context .metric,
.market-context .stat {
  background: #F4F7FA !important;
}


/* ---------------------------------------------------------
   11. SIDEBAR REFINEMENT

   Context should remain visible but recede from research.
   --------------------------------------------------------- */

.sidebar,
.left-panel,
.context-column,
.portfolio-context {
  background: #E9EFF5 !important;
}


/*
 * Strong portfolio balance remains high contrast.
 */

.sidebar .portfolio-value,
.sidebar .equity-value,
.left-panel .portfolio-value,
.left-panel .equity-value {
  color: #17283D !important;
}


/* ---------------------------------------------------------
   12. SEARCH

   Search is an interaction, so blue rather than amber
   should own the focus behavior.
   --------------------------------------------------------- */

.search-input:focus,
.search-box input:focus {
  border-color: #7A9FE8 !important;

  box-shadow:
    0 0 0 3px rgba(53,106,230,.09) !important;
}


/* ---------------------------------------------------------
   13. TYPOGRAPHY HIERARCHY

   Keep mono for data; avoid making every label feel like code.
   --------------------------------------------------------- */

.card-title,
.panel-title,
.section-title,
.ds-title,
.section-header {
  letter-spacing: .01em;
}


/* ---------------------------------------------------------
   14. TABLE HEADER
   --------------------------------------------------------- */

thead,
thead tr,
th {
  background: #E8EEF5 !important;

  color: #425970 !important;

  border-color: #D2DDE8 !important;
}


/* ---------------------------------------------------------
   15. HOVER STATES

   Blue-grey interaction instead of amber everywhere.
   --------------------------------------------------------- */

.card:hover,
.panel:hover {
  border-color: #C6D4E2 !important;
}

a:not(.brand):not(.logo):not(.buy):not(.sell):hover {
  text-decoration-color: rgba(49,95,173,.35);
}


/* ---------------------------------------------------------
   16. MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

  .card-header,
  .panel-header {
    box-shadow:
      inset 2px 0 0 #C2CFDC !important;
  }

  .mobile-overview-metric,
  .mobile-health-tile,
  .mobile-intel-stat {
    background: #FFFFFF !important;
    border-color: #D8E1EA !important;
  }

}


/* End INNELLIS_AUTH_PRODUCT_LIGHT_V5 */