/*
 * Force white text on navigation switcher items.
 * The app-switcher panel always renders on a dark background regardless of page theme.
 * CSS custom properties pierce shadow DOM, so this overrides Carbon's token values
 * inside the <cds-switcher-item> shadow root without JS patching.
 */
cds-switcher-item {
  --cds-text-primary: #ffffff;
  --cds-text-on-color: #ffffff;
  color: #ffffff;
}

/* Hide Carbon Web Components until they are defined/upgraded to prevent FOUC flash */
cds-header:not(:defined),
cds-header-nav:not(:defined),
cds-header-nav-item:not(:defined),
cds-header-global-action:not(:defined),
cds-header-panel:not(:defined) {
  visibility: hidden;
}

/* Global font family - IBM Plex Sans */
body,
html {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* AI label - theme-aware colors and visual states */
.ai-label-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--cds-border-strong-01, #124c5f);
  background: transparent;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  border-radius: 2px;
  user-select: none;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.ai-label-trigger:hover {
  border-color: var(--cds-border-strong-02, #0d3a4a);
  background: var(--cds-layer-hover-01, rgba(18, 76, 95, 0.08));
}

.ai-label-trigger:focus-visible {
  outline: 2px solid var(--cds-focus, #0f62fe);
  outline-offset: 2px;
}

/* Light theme (g10) - ensure label is readable */
body.cds-theme--g10 .ai-label-trigger {
  border-color: var(--cds-border-strong-01, #124c5f);
  color: var(--cds-text-primary, #124c5f);
}
body.cds-theme--g10 .ai-label-trigger:hover {
  border-color: #0d3a4a;
  background: rgba(18, 76, 95, 0.06);
}
body.cds-theme--g10 .ai-label-trigger:focus-visible {
  outline-color: var(--cds-focus, #0f62fe);
}

/* Dark theme (g100) - light border and text */
body.cds-theme--g100 .ai-label-trigger {
  border-color: var(--cds-border-strong-01, #4c4c4c);
  color: var(--cds-text-on-color, #f4f4f4);
}
body.cds-theme--g100 .ai-label-trigger:hover {
  border-color: var(--cds-border-strong-02, #6e6e6e);
  background: var(--cds-layer-hover-01, rgba(255, 255, 255, 0.08));
}
body.cds-theme--g100 .ai-label-trigger:focus-visible {
  outline-color: var(--cds-focus, #78a9ff);
}

/* Explainability Popover - below title row, left-aligned so it doesn't overlap heading */
.ai-explainability-popover {
  position: absolute;
  left: 0;
  right: auto;
  top: 100%;
  margin-top: 8px;
  width: 340px;
  max-width: min(92vw, 340px);
  border: 1px solid var(--cds-border-subtle-01);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 20;
  background: var(--cds-layer-01, #ffffff);
}
body.cds-theme--g100 .ai-explainability-popover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  background: transparent;
}

.ai-explainability-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 0 12px;
}

.ai-explainability-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--cds-text-secondary);
}

.ai-explainability-close {
  border: none;
  background: transparent;
  color: var(--cds-text-primary);
  font-size: 20px;
  line-height: 1;
  width: 32px;
  height: 32px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.ai-explainability-close:hover {
  background: var(--cds-layer-hover-01);
}

.ai-explainability-close:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: 2px;
}

.ai-explainability-body {
  padding: 8px 12px 12px 12px;
}

.ai-explainability-metric-value {
  font-size: 44px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--cds-text-primary);
}

.ai-explainability-section {
  margin-top: 12px;
}

.ai-explainability-section-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--cds-text-primary);
}

.ai-explainability-section-text {
  color: var(--cds-text-secondary);
  font-size: 13px;
  line-height: 1.35;
}

.ai-explainability-divider {
  margin: 12px 0;
  border-top: 1px solid var(--cds-border-subtle-01);
}

/* News headline styling - match "See More" link color */
body.cds-theme--g10 .tile-header {
  color: #124c5f;
}

body.cds-theme--g10 .tile-header:hover {
  color: #0d3a4a;
}

body.cds-theme--g100 .tile-header {
  color: #28add8;
}

body.cds-theme--g100 .tile-header:hover {
  color: #5cc5e8;
}

/* Apply to all elements and Carbon components */
*,
cds-header,
cds-header-name,
cds-header-nav-item,
cds-button,
cds-link,
cds-table,
cds-table-cell,
cds-tile,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
a {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Hyperlink colors - Light (g10) theme */
body.cds-theme--g10 a {
  color: #124c5f;
}

body.cds-theme--g10 a:hover {
  color: #0d3a4a;
}

/* Hyperlink colors - Dark (g100) theme */
body.cds-theme--g100 a {
  color: #28add8;
}

body.cds-theme--g100 a:hover {
  color: #5cc5e8;
}

cds-header~cds-side-nav {
  block-size: calc(100% - 3rem);
  margin-block-start: 3rem
}

.cds-ce-demo-devenv--container {
  transition: margin-left .11s cubic-bezier(.2, 0, 1, .9);
  will-change: margin-left
}

@media (min-width: 66rem) {
  .cds-ce-demo-devenv--container {
    margin-inline-start: 16rem
  }
}

/* Ensure badge indicator is absolutely positioned and doesn't affect icon centering */
cds-header-global-action cds-badge-indicator {
  position: absolute !important;
  top: 0.25rem;
  right: 0.25rem;
}

/* Centered search box in header */
cds-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000;
}

.header-search-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  max-width: 90%;
}

/* Native header search input (homepage fallback for cds-search) */
#header-search-input.input-autosuggest {
  width: 100%;
  min-width: 270px;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #124c5f26;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.2;
  color: #124c5f;
  background-color: transparent;
}

#header-search-input.input-autosuggest:focus {
  outline: none;
  border-color: #3c5b6f;
  box-shadow: 0 0 0 3px rgba(60, 91, 111, 0.1);
  background-color: rgba(255, 255, 255, 0.05);
}

#header-search-input.input-autosuggest:hover {
  border-color: #3c5b6f;
  background-color: rgba(255, 255, 255, 0.02);
}

/* ── Market Status Badge (to the right of search) ── */
.market-status-badge {
  position: absolute;
  left: calc(50% + 220px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
  user-select: none;
  background-color: color-mix(in srgb, var(--cds-text-secondary, #525252) 10%, transparent);
  color: var(--cds-text-primary, #124c5f);
}

@media (max-width: 820px) {
  .market-status-badge {
    display: none !important;
  }
}

/* Style cds-search to match .input-autosuggest */
cds-search {
  --cds-field: transparent;
  --cds-field-hover: rgba(255, 255, 255, 0.02);
  --cds-field-focus: rgba(255, 255, 255, 0.05);
  --cds-border-subtle: #124c5f26;
  --cds-border-interactive: #3c5b6f;
  --cds-text-primary: #124c5f;
  --cds-focus: #3c5b6f;
}

cds-search::part(input) {
  min-width: 270px;
  padding: 12px 12px 12px 40px !important;
  border: 1px solid #124c5f26 !important;
  font-size: 14px;
  color: #124c5f !important;
  border-radius: 12px !important;
  background-color: transparent !important;
  font-family: 'IBM Plex Sans', sans-serif;
}

cds-search::part(input):focus {
  outline: none !important;
  border-color: #3c5b6f !important;
  box-shadow: 0 0 0 3px rgba(60, 91, 111, 0.1) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

cds-search::part(input):active {
  border-color: #2a4a5a !important;
  box-shadow: 0 0 0 2px rgba(42, 74, 90, 0.15) !important;
}

cds-search::part(input):hover {
  border-color: #3c5b6f !important;
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Target the input element directly if part doesn't work */
cds-search input,
cds-search input[type="text"] {
  min-width: 270px !important;
  padding: 12px 12px 12px 40px !important;
  border: 1px solid #124c5f26 !important;
  font-size: 14px !important;
  color: #124c5f !important;
  border-radius: 12px !important;
  background-color: transparent !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}

/* Ensure icon doesn't overlap with text */
cds-search::part(input) {
  padding-left: 40px !important;
}

/* Style the search container to ensure proper spacing */
cds-search {
  width: 100%;
}

/* Ensure icon is positioned correctly */
cds-search svg,
cds-search [slot="icon"],
cds-search::part(icon) {
  position: absolute;
  left: 12px;
  pointer-events: none;
  z-index: 1;
}

cds-search input:focus,
cds-search input[type="text"]:focus {
  outline: none !important;
  border-color: #3c5b6f !important;
  box-shadow: 0 0 0 3px rgba(60, 91, 111, 0.1) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

cds-search input:active,
cds-search input[type="text"]:active {
  border-color: #2a4a5a !important;
  box-shadow: 0 0 0 2px rgba(42, 74, 90, 0.15) !important;
}

cds-search input:hover,
cds-search input[type="text"]:hover {
  border-color: #3c5b6f !important;
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Dark mode search box text color - match paragraph text */
body.cds-theme--g100 cds-search::part(input),
body.cds-theme--g100 cds-search input,
body.cds-theme--g100 cds-search input[type="text"] {
  color: #c6c6c6 !important;
}

body.cds-theme--g100 cds-search::part(input)::placeholder,
body.cds-theme--g100 cds-search input::placeholder,
body.cds-theme--g100 cds-search input[type="text"]::placeholder {
  color: #8d8d8d !important;
}

/* Dark mode search box focus colors - match link color */
body.cds-theme--g100 cds-search {
  --cds-focus: #28add8;
  --cds-border-interactive: #28add8;
}

/* Hide header navigation at higher breakpoint to avoid clashing with search box */
@media (max-width: 1500px) {
  cds-header-nav {
    display: none !important;
  }
}

/* Mobile responsive: wrap search to second line */
@media (max-width: 820px) {
  .header-search-container {
    position: static !important;
    left: auto;
    transform: none;
    width: 100% !important;
    max-width: 100%;
    padding: .5rem 1rem;
    flex-basis: 100%;
    order: 999;
    /* Explicitly match header background instead of relying on inherit,
       since the Carbon header uses a shadow DOM wrapper that can break
       background-color inheritance at some breakpoints / themes. */
    background-color: #fbfeff !important;
    /* Move to end of flex container */
    transition: padding-right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Match dark theme header background on mobile */
  body.cds-theme--g100 .header-search-container {
    background-color: #03181f !important;
  }

  /* Add padding to search container when right panel is open to prevent overlap */
  body.right-panel-open .header-search-container {
    padding-right: calc(450px + 1rem) !important;
  }

  cds-header {
    display: flex !important;
    flex-wrap: wrap !important;
    min-height: 100px;
    /* Override inline `style="height: 100px"` used in templates so the header
       can grow when the search box wraps on small screens (prevents overlap). */
    height: auto !important;
    /* Keep header sticky on mobile */
    position: sticky !important;
    top: 0 !important;
    z-index: 1000;
  }
}

/* Mobile bottom app bar - base layout (hidden by default, shown via media query) */
.mobile-bottom-app-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: center;
  justify-content: space-around;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
  z-index: 900;
}

.mobile-bottom-app-bar__item {
  flex: 1 1 0;
  min-width: 64px;
  max-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
}

.mobile-bottom-app-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-bottom-app-bar__icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.mobile-bottom-app-bar__icon svg path {
  fill: currentColor;
}

/* Dedicated icon classes keep app-bar icon rendering isolated from generic button/link SVG rules. */
.mobile-bottom-app-bar__svg {
  width: 20px;
  height: 20px;
}

.mobile-bottom-app-bar__svg--fill,
.mobile-bottom-app-bar__svg--fill path,
.mobile-bottom-app-bar__svg--fill circle {
  fill: currentColor !important;
  stroke: none !important;
}

.mobile-bottom-app-bar__svg--stroke,
.mobile-bottom-app-bar__svg--stroke * {
  fill: none !important;
  stroke: currentColor !important;
}

.mobile-bottom-app-bar__item.is-active .mobile-bottom-app-bar__svg--fill,
.mobile-bottom-app-bar__item.is-active .mobile-bottom-app-bar__svg--fill path,
.mobile-bottom-app-bar__item.is-active .mobile-bottom-app-bar__svg--fill circle {
  fill: #ffffff !important;
}

.mobile-bottom-app-bar__item.is-active .mobile-bottom-app-bar__svg--stroke,
.mobile-bottom-app-bar__item.is-active .mobile-bottom-app-bar__svg--stroke * {
  fill: none !important;
  stroke: #ffffff !important;
}

/* News globe guard: keep globe ring hollow even under broad theme SVG rules. */
body.cds-theme--g10 .mobile-bottom-app-bar__item[data-nav="news"] .mobile-bottom-app-bar__svg--stroke circle,
body.cds-theme--g100 .mobile-bottom-app-bar__item[data-nav="news"] .mobile-bottom-app-bar__svg--stroke circle {
  fill: none !important;
}

.mobile-bottom-app-bar__label {
  white-space: nowrap;
}

.mobile-bottom-app-bar__item:focus-visible {
  outline: 2px solid var(--cds-focus, #0f62fe);
  outline-offset: 2px;
}

.mobile-bottom-app-bar__item[aria-disabled="true"] {
  cursor: default;
  pointer-events: none;
}

/* ── Light theme ────────────────────────────────────────────────────────── */
body.cds-theme--g10 .mobile-bottom-app-bar {
  background-color: var(--cds-layer, #fbfeff);
}

body.cds-theme--g10 .mobile-bottom-app-bar__item {
  color: var(--cds-text-primary, #124c5f);
}

body.cds-theme--g10 .mobile-bottom-app-bar__item:hover {
  background-color: rgba(18, 76, 95, 0.06);
  border-radius: 8px;
}

body.cds-theme--g10 .mobile-bottom-app-bar__item.is-active {
  background-color: #124c5f;
  color: #ffffff !important;
  border-color: #124c5f;
  border-radius: 8px;
}

body.cds-theme--g10 .mobile-bottom-app-bar__item.is-active .mobile-bottom-app-bar__icon {
  color: #ffffff !important;
}

/* ── Dark theme ─────────────────────────────────────────────────────────── */
body.cds-theme--g100 .mobile-bottom-app-bar {
  background-color: var(--cds-layer, #03181f);
}

body.cds-theme--g100 .mobile-bottom-app-bar__item {
  color: var(--cds-text-on-color, #f4f4f4);
}

body.cds-theme--g100 .mobile-bottom-app-bar__item:hover {
  background-color: rgba(244, 244, 244, 0.08);
  border-radius: 8px;
}

body.cds-theme--g100 .mobile-bottom-app-bar__item.is-active {
  background-color: #124c5f;
  color: #ffffff !important;
  border-color: #7ee1ee;
  border-radius: 8px;
}

body.cds-theme--g100 .mobile-bottom-app-bar__item.is-active .mobile-bottom-app-bar__icon {
  color: #ffffff !important;
}

/* Show bottom app bar on small viewports and reserve space for it */
@media (max-width: 820px) {
  .mobile-bottom-app-bar {
    display: flex;
  }

  body.has-mobile-bottom-app-bar main {
    padding-bottom: 72px;
  }
}

@media (min-width: 821px) {
  .mobile-bottom-app-bar {
    display: none;
  }
}

/* ── Vertical Desktop Sidebar ────────────────────────────────────────────
   Mirrors mobile-bottom-app-bar styles but stacked vertically.
   Shown on desktop (>820px) only; hidden on mobile.
   ─────────────────────────────────────────────────────────────────────── */
.vertical-sidebar {
  position: fixed;
  top: 100px; /* overridden by JS to match actual header height */
  left: 0;
  width: 72px;
  height: calc(100vh - 100px);
  height: calc(100dvh - 100px);
  display: none; /* revealed via media query below */
  flex-direction: column;
  align-items: center;
  padding: 16px 16px 8px;
  border-right: 1px solid;
  z-index: 850;
  overflow-y: auto;
  overflow-x: hidden;
}

.vertical-sidebar__item {
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  text-decoration: none;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
  margin: 2px 0;
}

.vertical-sidebar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vertical-sidebar__svg {
  width: 20px;
  height: 20px;
}

.vertical-sidebar__svg--fill,
.vertical-sidebar__svg--fill path,
.vertical-sidebar__svg--fill circle {
  fill: currentColor !important;
  stroke: none !important;
}

.vertical-sidebar__svg--stroke,
.vertical-sidebar__svg--stroke * {
  fill: none !important;
  stroke: currentColor !important;
}

/* News globe guard */
body.cds-theme--g10 .vertical-sidebar__item[data-nav="news"] .vertical-sidebar__svg--stroke circle,
body.cds-theme--g100 .vertical-sidebar__item[data-nav="news"] .vertical-sidebar__svg--stroke circle {
  fill: none !important;
}

.vertical-sidebar__item.is-active .vertical-sidebar__svg--fill,
.vertical-sidebar__item.is-active .vertical-sidebar__svg--fill path,
.vertical-sidebar__item.is-active .vertical-sidebar__svg--fill circle {
  fill: #ffffff !important;
}

.vertical-sidebar__item.is-active .vertical-sidebar__svg--stroke,
.vertical-sidebar__item.is-active .vertical-sidebar__svg--stroke * {
  fill: none !important;
  stroke: #ffffff !important;
}

.vertical-sidebar__label {
  white-space: nowrap;
}

/* Admin gear — layout wrapper only, no hover of its own */
.vertical-sidebar__item--admin {
  position: relative;
  width: 56px;
  margin-top: auto; /* push to bottom of sidebar */
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vertical-sidebar__admin-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: none;
  width: 100%;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
  font-family: inherit;
}

/* Admin flyout panel — fixed, positioned to the right of the sidebar by JS */
.vertical-sidebar__admin-panel {
  display: none;
  position: fixed;
  left: 72px;
  min-width: 160px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  z-index: 9600;
  padding: 8px 0;
}

.vertical-sidebar__admin-panel.is-open {
  display: block;
}

.vertical-sidebar__admin-item {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}

.vertical-sidebar__item:focus-visible,
.vertical-sidebar__admin-btn:focus-visible {
  outline: 2px solid var(--cds-focus, #0f62fe);
  outline-offset: 2px;
}

/* Show sidebar on desktop; offset main content */
@media (min-width: 821px) {
  .vertical-sidebar {
    display: flex;
  }

  body.has-vertical-sidebar main,
  body.has-vertical-sidebar > .main-container {
    margin-left: 72px;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ── Light theme ── */
body.cds-theme--g10 .vertical-sidebar {
  background-color: var(--cds-layer, #fbfeff);
  border-right-color: #124c5f26;
}

body.cds-theme--g10 .vertical-sidebar__item {
  color: var(--cds-text-primary, #124c5f);
}

body.cds-theme--g10 .vertical-sidebar__item:hover {
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}

body.cds-theme--g10 .vertical-sidebar__item.is-active {
  background-color: var(--cds-interactive-01, #124c5f);
  color: #ffffff !important;
  border-color: var(--cds-interactive-01, #124c5f);
}

body.cds-theme--g10 .vertical-sidebar__item.is-active .vertical-sidebar__icon {
  color: #ffffff !important;
}

body.cds-theme--g10 .vertical-sidebar__admin-btn {
  color: var(--cds-text-primary, #124c5f);
}

body.cds-theme--g10 .vertical-sidebar__admin-btn:hover {
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}

body.cds-theme--g10 .vertical-sidebar__admin-panel {
  background-color: var(--cds-layer, #fbfeff);
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

body.cds-theme--g10 .vertical-sidebar__admin-item {
  color: var(--cds-text-primary, #124c5f);
}

body.cds-theme--g10 .vertical-sidebar__admin-item:hover {
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}

/* ── Dark theme ── */
body.cds-theme--g100 .vertical-sidebar {
  background-color: var(--cds-layer, #03181f);
  border-right-color: #124c5f26;
}

body.cds-theme--g100 .vertical-sidebar__item {
  color: var(--cds-text-on-color, #f4f4f4);
}

body.cds-theme--g100 .vertical-sidebar__item:hover {
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}

body.cds-theme--g100 .vertical-sidebar__item.is-active {
  background-color: var(--cds-interactive-01, #124c5f);
  color: #ffffff !important;
  border-color: var(--cds-border-interactive, #7ee1ee);
}

body.cds-theme--g100 .vertical-sidebar__item.is-active .vertical-sidebar__icon {
  color: #ffffff !important;
}

body.cds-theme--g100 .vertical-sidebar__admin-btn {
  color: var(--cds-text-on-color, #f4f4f4);
}

body.cds-theme--g100 .vertical-sidebar__admin-btn:hover {
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}

body.cds-theme--g100 .vertical-sidebar__admin-panel {
  background-color: var(--cds-layer, #03181f);
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

body.cds-theme--g100 .vertical-sidebar__admin-item {
  color: var(--cds-text-on-color, #f4f4f4);
}

body.cds-theme--g100 .vertical-sidebar__admin-item:hover {
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}

/* Two Column Section - responsive for tablet and below */
@media (max-width: 1200px) {
  .two-column-section {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 1.5rem 0 !important;
  }

  .two-column-section h1 {
    font-size: 24px !important;
  }
}

/* List Header - responsive for tablet */
@media (max-width: 1024px) {
  #list-header {
    flex-wrap: wrap !important;
    gap: 1rem !important;
    padding-bottom: 1rem !important;
    align-items: flex-start !important;
  }

  #list-header .info-blocks-container {
    margin-left: 0 !important;
    gap: 0.8rem !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  #list-header #gridviewButton {
    margin-left: auto !important;
    padding-left: 0 !important;
  }
}

/* List Header - responsive for mobile */
@media (max-width: 768px) {
  #list-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    padding-bottom: 1rem !important;
  }

  #list-header-text {
    font-size: 24px !important;
    margin-bottom: 0.5rem !important;
  }

  #list-header .flex {
    width: 100% !important;
  }

  /* Container holding pills and toggle - keep them in a row and allow toggle to sit on the right */
  #list-header > div:last-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  #list-header .info-blocks-container {
    width: 100% !important;
    margin-left: 0 !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
    justify-content: stretch !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Market pills - fill available space, text vertically centered */
  #list-header .info-block {
    margin: 0 !important;
    font-size: 0.9375rem !important;
    padding: 6px 10px !important;
    min-height: 28px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  #list-header .info-block > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #list-header .info-block.pill {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #list-header #gridviewButton {
    margin-left: auto !important;
    padding-left: 0 !important;
    align-self: center !important;
    margin-top: 0 !important;
  }
}

/* List Header - responsive for small mobile */
@media (max-width: 480px) {
  #list-header {
    padding-bottom: 0.75rem !important;
    gap: 0.75rem !important;
  }

  #list-header-text {
    font-size: 20px !important;
  }

  /* Container holding pills and toggle - keep them in a row */
  #list-header > div:last-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  #list-header .info-blocks-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    flex: 1 !important;
    min-width: 0 !important;
    max-width: calc(100% - 40px) !important; /* Leave room for toggle button */
    justify-content: stretch !important;
  }

  /* Market pills - fill space, text vertically centered */
  #list-header .info-block {
    font-size: 0.875rem !important;
    padding: 4px 8px !important;
    min-height: 26px !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  #list-header .info-block > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #list-header .info-block.pill {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #list-header #gridviewButton {
    margin-top: 0 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
  }

  #list-header #gridviewButton img {
    width: 24px !important;
    height: 24px !important;
  }
}

/* List Header - responsive for very small mobile (below 400px) */
@media (max-width: 400px) {
  #list-header > div:last-child {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }

  #list-header .info-blocks-container {
    max-width: calc(100% - 35px) !important;
    justify-content: stretch !important;
  }

  /* Market pills - fill space, text vertically centered */
  #list-header .info-block {
    font-size: 0.8125rem !important;
    padding: 3px 7px !important;
    min-height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  #list-header .info-block > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #list-header .info-block.pill {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #list-header #gridviewButton {
    padding: 0 !important;
  }

  #list-header #gridviewButton img {
    width: 22px !important;
    height: 22px !important;
  }
}

/* News Header - responsive for tablet */
@media (max-width: 1024px) {
  #news-header .flex-row {
    flex-wrap: wrap !important;
    gap: 1rem !important;
    padding-bottom: 1rem !important;
    align-items: center !important;
  }

  #news-header .info-blocks-container {
    margin-left: 0 !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
  }
}

/* News Header - responsive for mobile */
@media (max-width: 768px) {
  #news-header .flex-row {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    padding-bottom: 1rem !important;
    flex-wrap: wrap !important;
  }

  #news-header-text {
    font-size: 24px !important;
  }

  #news-header .info-blocks-container {
    margin-left: auto !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
  }

  #news-header .info-block {
    margin: 0 !important;
    font-size: 0.9375rem !important;
    padding: 6px 10px !important;
    min-height: 28px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #news-header .info-block > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* News Header - responsive for small mobile */
@media (max-width: 480px) {
  #news-header .flex-row {
    gap: 0.5rem !important;
    padding-bottom: 0.75rem !important;
  }

  #news-header-text {
    font-size: 20px !important;
  }

  #news-header .info-block {
    font-size: 0.875rem !important;
    padding: 4px 8px !important;
    min-height: 26px !important;
  }
}

/* News Header - responsive for very small mobile */
@media (max-width: 400px) {
  #news-header-text {
    font-size: 18px !important;
  }

  #news-header .info-block {
    font-size: 0.8125rem !important;
    padding: 3px 7px !important;
    min-height: 24px !important;
  }
}

/* AI Summary Section - responsive for tablet */
@media (max-width: 1024px) {
  #aiSummarySection {
    margin-top: 2.5rem !important;
    padding: 0px !important;
  }

  #aiSummarySection .flex-row {
    flex-wrap: wrap !important;
    gap: 1rem !important;
  }

  /* Keep the heading + AI explainer toggle on a single line */
  #aiSummarySection .flex-row:first-child {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  #aiSummarySection .flex {
    width: -webkit-fill-available !important;
  }

  #aiMarketSummary {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* AI Summary Section - responsive for mobile */
@media (max-width: 768px) {
  #aiSummarySection {
    margin-top: 2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Match Markets / other section label size on mobile */
  #aiSummarySection h1 {
    font-size: 24px !important;
    margin: 0 !important;
  }

  #aiSummarySection h2 {
    font-size: 1.25rem !important;
    margin: 0 !important;
    word-wrap: break-word !important;
  }

  #aiSummarySection p {
    font-size: 0.875rem !important;
    margin: 0 !important;
    word-wrap: break-word !important;
  }

  #aiMarketSummary {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    padding: 0 !important;
    margin: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    max-width: 100% !important;
  }

  #aiSummarySection .flex-row {
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  /* Prevent AI explainer toggle from wrapping under the heading on mobile */
  #aiSummarySection .flex-row:first-child {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  #aiSummarySection .flex {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  #aiSummarySection .line2 {
    margin: 0.75rem 0 !important;
    width: 100% !important;
  }

  #aiSummarySection > div:last-child {
    width: 100% !important;
    overflow-wrap: break-word !important;
  }
}

/* AI Summary Section - responsive for small mobile */
@media (max-width: 480px) {
  #aiSummarySection {
    margin-top: 1.5rem !important;
    padding: 0rem !important;
  }

  /* Match Markets label size on small mobile */
  #aiSummarySection h1 {
    font-size: 20px !important;
    margin: 0 !important;
  }

  #aiSummarySection h2 {
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
  }

  #aiMarketSummary {
    font-size: 0.8125rem !important;
    line-height: 1.5 !important;
  }

  #aiSummarySection p {
    font-size: 0.9rem !important;
  }

  #aiSummarySection .line2 {
    margin: 0.5rem 0 !important;
  }
}

/* Header panel background - match theme background */
cds-header-panel {
  background-color: #fbfeff; /* Default to g10 theme background */
  box-shadow: none !important;
  top: 100px !important;
  /* Align below the header */
  height: calc(100vh - 100px) !important;
  height: calc(100dvh - 100px) !important;
  /* Fill remaining viewport height */
}

/* Right panel - fixed width, hidden by default, fades in without transforming the fixed container */
cds-header-panel[placement="right"] {
  width: auto !important;
  overflow-y: hidden;
  min-width: 440px !important;
  max-width: 440px !important;
  position: fixed !important;
  right: 0 !important;
  top: 100px !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s !important;
  will-change: opacity;
  z-index: 1000;
}

/* Sidebar is a flex column: tab-nav at top, content fills remainder */
#sideBar.panel {
  display: flex;
  flex-direction: column;
  overflow: visible;
  height: 100%;
}

/* Tab navigation pinned at top of sidebar */
#sideBar.panel .tab-navigation {
  flex-shrink: 0;
  z-index: 1001;
  background-color: #fbfeff;
}

/* Content area fills remaining sidebar space; each tab handles its own scroll */
#sideBar.panel #sideBarContent {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

body.cds-theme--g100 #sideBar.panel .tab-navigation {
  background-color: #03181f;
}

/* Mobile: Right panel full width on small screens - overlay instead of push */
@media (max-width: 768px) {
  cds-header-panel[placement="right"] {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    top: 120px !important; /* Start below header + search box (compensated for removed 50px padding-top) */
    height: calc(100vh - 120px) !important; /* Adjust height to account for higher start */
    height: calc(100dvh - 120px) !important; /* Adjust height to account for higher start */
    z-index: 10000 !important; /* Higher z-index to ensure it overlays */
  }
  
  /* Disable body scrolling when sidebar is open on mobile */
  body.right-panel-open {
    overflow: hidden !important;
    width: 100% !important;
  }
  
  /* Make sidebar panel content full width on mobile */
  cds-header-panel[placement="right"] #sideBar.panel {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0px 15px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }
  
  /* Ensure tab navigation and content areas are full width */
  cds-header-panel[placement="right"] #sideBar.panel .tab-navigation {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  cds-header-panel[placement="right"] #sideBar.panel #sideBarContent {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  
  /* Ensure all content inside sidebar uses full width */
  cds-header-panel[placement="right"] #sideBar.panel * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Prevent main content from shifting on mobile - sidebar overlays */
  body.right-panel-open main {
    margin-right: 0 !important;
    position: relative;
  }
  
  /* Remove header search padding on mobile since sidebar overlays */
  body.right-panel-open .header-search-container {
    padding-right: 1rem !important;
  }
}

/* Panel when expanded - reveal without transforming the fixed container */
cds-header-panel[placement="right"][expanded="true"],
cds-header-panel[placement="right"][expanded] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s ease, visibility 0s linear 0s !important;
  right: 0 !important;
}

/* Disable transitions when restoring state (navigation scenarios) */
cds-header-panel[placement="right"].no-transition,
cds-header-panel[placement="right"].no-transition[expanded="true"],
cds-header-panel[placement="right"].no-transition[expanded] {
  transition: none !important;
}

body.no-transition main {
  transition: none !important;
}

/* Main content - shift left when right panel is open (desktop only) */
main {
  transition: margin-right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: margin-right;
}

body.right-panel-open main {
  margin-right: 450px !important;
}

/* On mobile, main content doesn't shift - sidebar overlays */
@media (max-width: 768px) {
  main {
    transition: none !important; /* No transition on mobile since content doesn't move */
  }
  
  body.right-panel-open main {
    margin-right: 0 !important;
  }
}

/* Switcher styling - using Carbon color tokens */
cds-switcher {
  background-color: var(--cds-layer, #ffffff);
}

cds-switcher-item {
  background-color: transparent;
}

cds-switcher-item:hover {
  background-color: var(--cds-layer-hover, #f4f4f4);
}

/* Dark mode header panel and switcher */
body.cds-theme--g100 cds-header-panel {
  background-color: #03181f; /* Match g100 theme background */
}

body.cds-theme--g100 cds-switcher {
  background-color: transparent;
}

body.cds-theme--g100 cds-switcher-item {
  color: #f4f4f4;
}

body.cds-theme--g100 cds-switcher-item:hover {
  background-color: #393939;
}

/* Light (g10) theme header panel and switcher */
body.cds-theme--g10 cds-header-panel {
  background-color: #fbfeff !important; /* Match g10 theme background */
}

body.cds-theme--g10 cds-switcher {
  background-color: #124c5f !important;
  --cds-layer: #124c5f !important;
  --cds-background: #124c5f !important;
}

body.cds-theme--g10 cds-switcher-item {
  color: #ffffff !important;
  --cds-text-primary: #ffffff !important;
  --cds-text-on-color: #ffffff !important;
}

body.cds-theme--g10 cds-switcher-item *,
body.cds-theme--g10 cds-switcher-item a,
body.cds-theme--g10 cds-switcher-item::part(link) {
  color: #ffffff !important;
  --cds-text-primary: #ffffff !important;
  --cds-text-on-color: #ffffff !important;
}

body.cds-theme--g10 cds-switcher-item:hover {
  background-color: #0d3a4a !important;
  color: #ffffff !important;
  --cds-text-primary: #ffffff !important;
  --cds-text-on-color: #ffffff !important;
}

body.cds-theme--g10 cds-switcher-item:hover *,
body.cds-theme--g10 cds-switcher-item:hover a {
  color: #ffffff !important;
}

/* Stock ticker tile styling */
cds-tile {
  border: 1px solid #124c5f26;
  position: relative;
  padding: 16px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  transition: border 0.5s ease, background-color 0.5s ease;
}

cds-tile:hover {
  border: 1px solid #124c5f80;
  background-color: #e7f3f7;
  cursor: pointer;
}

/* Dark mode tile styling */
body.cds-theme--g100 cds-tile {
  background-color: #15242a;
  border: 1px solid #124c5f26;
}

body.cds-theme--g100 cds-tile:hover {
  border: 1px solid #124c5f;
  background-color: #0c3b5461;
}

/* ── Dashboard tile: mirrors cds-tile surface + themed backgrounds ── */
.db-tile {
  border: 1px solid #124c5f26;
  border-radius: 8px;
  box-sizing: border-box;
  /* Non-clickable: suppress hover/press states inherited from .tile */
  cursor: default !important;
  transition: none !important;
}
.db-tile:hover,
.db-tile:active {
  border: 1px solid #124c5f26 !important;
  background-color: inherit !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: default !important;
}

body.cds-theme--g10 .db-tile {
  background-color: transparent;
}

body.cds-theme--g100 .db-tile {
  border-color: #124c5f26;
}

/* Statistics cards - match tile styling on dark theme (no hover, no rounded) */
body.cds-theme--g100 .stats-grid .panel,
body.cds-theme--g100 .top-performers .panel {
  background-color: transparent !important;
  border: 1px solid #124c5f26 !important;
  border-radius: 0 !important;
}

/* Statistics cards - match tile styling on light theme (no hover, no rounded) */
body.cds-theme--g10 .stats-grid .panel,
body.cds-theme--g10 .top-performers .panel {
  border-radius: 0 !important;
}

/* Statistics text colors for dark theme */
body.cds-theme--g100 .stat-label {
  color: #f4f4f4 !important;
}

body.cds-theme--g100 .stat-value {
  color: #f4f4f4 !important;
}

body.cds-theme--g100 .stat-value.positive {
  color: var(--wg-positive) !important;
}

body.cds-theme--g100 .stat-value.negative {
  color: var(--wg-negative) !important;
}

body.cds-theme--g100 .performer-symbol,
body.cds-theme--g100 .performer-change {
  color: #f4f4f4 !important;
}

body.cds-theme--g100 .performer-change.positive {
  color: var(--wg-positive) !important;
}

body.cds-theme--g100 .performer-change.negative {
  color: var(--wg-negative) !important;
}



/* Mobile optimizations for statistics cards */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 15px !important;
    margin-top: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .stats-grid .panel {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 15px 10px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  .stat-label {
    font-size: 11px !important;
    margin-bottom: 6px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  .stat-value {
    font-size: 14px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  .top-performers {
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .top-performers .panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 15px 10px !important;
    box-sizing: border-box !important;
  }



  /* Remove main-container padding on lists page */
  .main-container {
    padding: 0 !important;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .stats-grid .panel {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 10px !important;
    box-sizing: border-box !important;
  }

  .stat-label {
    font-size: 10px !important;
  }

  .stat-value {
    font-size: 13px !important;
  }

  .top-performers .panel {
    padding: 12px 10px !important;
  }

  /* Remove main-container padding on lists page */
  .main-container {
    padding: 0 !important;
  }
}

/* Light (g10) theme tile background */
body.cds-theme--g10 cds-tile {
  background-color: transparent;
}

body.cds-theme--g10 cds-tile:hover {
  border-color: #124c5f80;
  background-color: #e7f3f7;
  cursor: pointer;
}

/* Stock action button (plus/add button) */
cds-tile .stock-action-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s ease;
  color: var(--cds-text-primary, #124c5f);
  padding: 0;
}

cds-tile .stock-action-btn:hover {
  transform: scale(1.1);
}

/* Prevent layout shift when stockGrid tiles are swapped */
#stockGrid {
  contain: layout style;
  transition: min-height 0.3s ease;
}

/* Tile scale in animation */
cds-tile.tile-scale-in {
  opacity: 0;
  transform: scale(0.8);
  animation: tileScaleIn 0.5s ease-out forwards;
}

/* Staggered tile animation delays */
cds-tile.tile-scale-in:nth-child(1) {
  animation-delay: 0.05s;
}

cds-tile.tile-scale-in:nth-child(2) {
  animation-delay: 0.1s;
}

cds-tile.tile-scale-in:nth-child(3) {
  animation-delay: 0.15s;
}

cds-tile.tile-scale-in:nth-child(4) {
  animation-delay: 0.2s;
}

cds-tile.tile-scale-in:nth-child(5) {
  animation-delay: 0.25s;
}

cds-tile.tile-scale-in:nth-child(6) {
  animation-delay: 0.3s;
}

cds-tile.tile-scale-in:nth-child(7) {
  animation-delay: 0.35s;
}

cds-tile.tile-scale-in:nth-child(8) {
  animation-delay: 0.4s;
}

cds-tile.tile-scale-in:nth-child(9) {
  animation-delay: 0.45s;
}

/* News item animation classes */
cds-tile.news-item {
  opacity: 0;
}

cds-tile.news-item.news-enter {
  animation: newsFadeIn 0.5s ease-out forwards;
}

/* Staggered news animation delays */
cds-tile.news-item.news-enter:nth-child(1) {
  animation-delay: 0.1s;
}

cds-tile.news-item.news-enter:nth-child(2) {
  animation-delay: 0.2s;
}

cds-tile.news-item.news-enter:nth-child(3) {
  animation-delay: 0.3s;
}

cds-tile.news-item.news-enter:nth-child(4) {
  animation-delay: 0.4s;
}

cds-tile.news-item.news-enter:nth-child(5) {
  animation-delay: 0.5s;
}

/* Table row animation classes */
cds-table-row.news-enter {
  opacity: 0;
  animation: tableRowScaleIn 0.4s ease-out forwards;
}

/* Staggered table row animation delays */
cds-table-row.news-enter:nth-child(1) {
  animation-delay: 0.1s;
}

cds-table-row.news-enter:nth-child(2) {
  animation-delay: 0.2s;
}

cds-table-row.news-enter:nth-child(3) {
  animation-delay: 0.3s;
}

cds-table-row.news-enter:nth-child(4) {
  animation-delay: 0.4s;
}

cds-table-row.news-enter:nth-child(5) {
  animation-delay: 0.5s;
}

cds-table-row.news-enter:nth-child(6) {
  animation-delay: 0.6s;
}

cds-table-row.news-enter:nth-child(7) {
  animation-delay: 0.7s;
}

cds-table-row.news-enter:nth-child(8) {
  animation-delay: 0.8s;
}

cds-table-row.news-enter:nth-child(n+9) {
  animation-delay: 0.8s;
}

/* Details compare table: remove button in Carbon table (matches lists page row styling) */
#compareTable .icon-btn {
  border: 1px solid #124c5f26;
  background: transparent;
  color: #124c5f;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 50%;
}
#compareTable .icon-btn:hover {
  background-color: rgba(18, 76, 95, 0.1);
}
body.cds-theme--g100 #compareTable .icon-btn {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
}
body.cds-theme--g100 #compareTable .icon-btn:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

#compareTable cds-table-body {
  min-width: 100%;
}
#compareTable cds-table-row {
  white-space: nowrap;
}
#compareTable cds-table-cell:first-child {
  white-space: normal;
}

/* Details compare table: match portfolio positions (ticker + company column, padding) */
body.cds-theme--g10 #compareTable cds-table-header-cell:first-child,
body.cds-theme--g10 #compareTable cds-table-cell:first-child,
body.cds-theme--g100 #compareTable cds-table-header-cell:first-child,
body.cds-theme--g100 #compareTable cds-table-cell:first-child {
  width: 50% !important;
  max-width: 50% !important;
  min-width: 50% !important;
  flex: 0 0 50% !important;
}

body.cds-theme--g10 #compareTable cds-table-header-cell,
body.cds-theme--g10 #compareTable cds-table-cell,
body.cds-theme--g100 #compareTable cds-table-header-cell,
body.cds-theme--g100 #compareTable cds-table-cell {
  padding: 12px 16px !important;
}

#compareTable cds-table-header-cell:nth-child(2),
#compareTable cds-table-cell:nth-child(2) {
  text-align: right !important;
}

#compareTable cds-table-header-cell:nth-child(3),
#compareTable cds-table-cell:nth-child(3) {
  width: 48px !important;
  max-width: 48px !important;
  padding-right: 0.5rem !important;
}

#stockList .row-price,
#compareTable .row-price {
  display: block;
}

#stockList .row-change,
#compareTable .row-change {
  display: block;
  font-size: 0.9rem;
  font-weight: 300;
  margin-top: 2px;
}

@keyframes tileScaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes newsFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tableRowScaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.stock-symbol {
  font-size: 1.125rem;
  font-weight: 600;
  color: #124c5f;
  margin: 0 0 0.25rem 0;
}

/* Dark mode text colors */
body.cds-theme--g100 .stock-symbol {
  color: #28add8;
}

body.cds-theme--g100 .company-name,
body.cds-theme--g100 .stock-price,
body.cds-theme--g100 #relatedGrid cds-tile .tile-price-wrapper .price.value,
body.cds-theme--g100 #stockGrid cds-tile .tile-price-wrapper .price.value {
  color: #f4f4f4;
}

/* Stock change colors in dark mode - keep red/green */
body.cds-theme--g100 .stock-change.upTile {
  color: var(--wg-positive);
}

body.cds-theme--g100 .stock-change.downTile {
  color: var(--wg-negative);
}

/* Related stocks percent colors in dark mode - keep red/green */
body.cds-theme--g100 .percent.upTile {
  color: var(--wg-positive) !important;
}

body.cds-theme--g100 .percent.downTile {
  color: var(--wg-negative) !important;
}

.company-name {
  font-size: 1rem;
  font-weight: normal;
  margin: 0 0 0.5rem 0;
}

.stock-price-container {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: auto;
}

.stock-price {
  font-size: 1.4rem;
  font-weight: 600;
  color: #124c5f;
  margin: 0;
}

.stock-change {
  font-size: 0.875rem;
  color: #124c5f;
  margin: 0;
}

/* Stock change colors - green for positive, red for negative */
.stock-change.upTile {
  color: var(--wg-positive);
}

.stock-change.downTile {
  color: var(--wg-negative);
}

.stock-arrow {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 15px;
  height: 13px;
  color: #19cfe7;
}

.tile-header {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
}

.tile-text {
  font-size: 0.875rem;
  margin: 0 0 1rem 0;
}

/* Theme switcher styling */
.theme-switcher-container {
  position: relative;
  display: inline-block;
}

.theme-switcher-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background-color: var(--cds-layer, #ffffff);
  border: 1px solid var(--cds-border-subtle, #e0e0e0);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  min-width: 150px;
  z-index: 10010;
  display: none;
  padding: 0.5rem 0;
}

body.cds-theme--g100 .theme-switcher-dropdown {
  background-color: #393939;
  border: 1px solid #525252;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.theme-switcher-dropdown.show {
  display: block;
}

.theme-option {
  padding: 0.75rem 1rem;
  cursor: pointer;
  color: var(--cds-text-primary, #161616);
  font-size: 0.875rem;
  transition: background-color 0.2s;
}

body.cds-theme--g100 .theme-option {
  color: #f4f4f4;
}

.theme-option:hover {
  background-color: var(--cds-layer-hover, #f4f4f4);
}

body.cds-theme--g100 .theme-option:hover {
  background-color: #525252;
}

.theme-option.active {
  background-color: var(--cds-layer-selected, #e5e5e5);
  font-weight: 600;
}

body.cds-theme--g100 .theme-option.active {
  background-color: #6f6f6f;
}

/* Theme backgrounds */
body.cds-theme--g10 {
  background-color: #fbfeff;
  color: #124c5f;
  font-family: 'IBM Plex Sans', sans-serif;
  margin: 0;
  padding: 0;

  /* Custom brand colors - shades of #124c5f */
  --cds-interactive: #124c5f;
  --cds-interactive-01: #124c5f;
  --cds-interactive-02: #124c5f;
  --cds-interactive-03: #124c5f;
  --cds-interactive-04: #124c5f;
  --cds-primary: #124c5f;
  --cds-primary-hover: #0d3a4a;
  --cds-primary-active: #092d3b;
  --cds-focus: #124c5f;
  --cds-focus-inset: #ffffff;
  --cds-link-primary: #124c5f;
  --cds-link-primary-hover: #0d3a4a;
  --cds-link-visited: #3c5b6f;
  --cds-button-primary: #124c5f;
  --cds-button-primary-hover: #0d3a4a;
  --cds-button-primary-active: #092d3b;
  --cds-support-info: #1a6a85;
  --cds-border-interactive: #124c5f;
  --cds-highlight: #cfe9f3;
  --cds-layer-selected: #9dd1e6;
  --cds-layer-selected-hover: #6bb8d4;
}

/* Light (g10) theme - Button styling */
body.cds-theme--g10 cds-button {
  --cds-button-primary: #124c5f;
  --cds-button-primary-hover: #0d3a4a;
  --cds-button-primary-active: #092d3b;
}

body.cds-theme--g10 cds-button[kind="primary"],
body.cds-theme--g10 cds-button:not([kind]) {
  background-color: #124c5f;
}

body.cds-theme--g10 cds-button[kind="primary"]:hover,
body.cds-theme--g10 cds-button:not([kind]):hover {
  background-color: #0d3a4a;
}

body.cds-theme--g10 cds-button[kind="primary"]:active,
body.cds-theme--g10 cds-button:not([kind]):active {
  background-color: #092d3b;
}

/* Light (g10) theme - Link styling */
body.cds-theme--g10 cds-link {
  --cds-link-primary: #124c5f;
  --cds-link-primary-hover: #0d3a4a;
  color: #124c5f;
}

body.cds-theme--g10 cds-link:hover {
  color: #0d3a4a;
}

/* Dark (g100) theme - Link styling */
body.cds-theme--g100 {
  --cds-link-primary: #28add8;
  --cds-link-primary-hover: #5cc5e8;
}

body.cds-theme--g100 cds-link {
  color: #28add8;
}

body.cds-theme--g100 cds-link:hover {
  color: #5cc5e8;
}

/* Theme-aware inline text links (e.g., company website on details page) */
.theme-link {
  color: var(--cds-link-primary, #124c5f);
  text-decoration: underline;
}

.theme-link:hover {
  color: var(--cds-link-primary-hover, #0d3a4a);
}

/* Light (g10) theme - Focus states */
body.cds-theme--g10 *:focus {
  outline-color: #124c5f;
}

/* Dark (g100) theme - Focus states */
body.cds-theme--g100 *:focus {
  outline-color: #28add8;
}

/* Light (g10) theme - Table header cell sorting indicator */
body.cds-theme--g10 cds-table-header-cell[sort-direction] {
  --cds-interactive: #124c5f;
}

/* Light (g10) theme - Checkbox and radio styling */
body.cds-theme--g10 cds-checkbox,
body.cds-theme--g10 cds-radio-button {
  --cds-interactive: #124c5f;
}

/* Light (g10) theme - Toggle styling */
body.cds-theme--g10 cds-toggle {
  --cds-interactive: #124c5f;
  --cds-support-success: #124c5f;
}

/* Light (g10) theme - Selected/active states */
body.cds-theme--g10 cds-table-row[selected] {
  background-color: #cfe9f3;
  --cds-layer-selected: #cfe9f3;
}

body.cds-theme--g10 cds-table-row[selected]:hover {
  background-color: #9dd1e6;
}

body.cds-theme--g10 cds-table-row:hover {
  background-color: #b3ecff30;
}

/* Light (g10) theme - Toolbar search focus */
body.cds-theme--g10 cds-table-toolbar-search {
  --cds-focus: #124c5f26;
  --cds-border-interactive: #124c5f26;
}

/* Light theme - Table cell dividers */
body.cds-theme--g10 cds-table {
  --cds-border-subtle: #124c5f26;
  --cds-border-subtle-01: #124c5f26;
}

body.cds-theme--g10 cds-table-header-cell {
  --cds-border-subtle: #124c5f26;
}

body.cds-theme--g10 cds-table-header-cell:last-child {
  border-right: none;
}

body.cds-theme--g10 cds-table-cell {
  --cds-border-subtle: #124c5f26;
  color: #124c5f;
  --cds-text-primary: #124c5f;
  /* Match header cell padding (portfolio / positions tables use the same rhythm) */
  padding: 0.75rem .5rem 1rem !important;
}

body.cds-theme--g10 cds-table-cell:last-child {
  border-right: none;
}

/* Table header cells - brand color */
body.cds-theme--g10 cds-table-header-cell {
  color: #124c5f;
  --cds-text-primary: #124c5f;
  padding: 0.75rem .5rem 1rem !important;
}

/* Async list loading transition – dim existing content while fetching new data */
.list-loading-transition {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Inline spinner for list loading (shown next to header) */
#mainLoadingSpinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid #124c5f33;
  border-top-color: #124c5f;
  border-radius: 50%;
  animation: listSpinnerRotate 0.6s linear infinite;
}

@keyframes listSpinnerRotate {
  to { transform: rotate(360deg); }
}

/* Centered chart loading — same ring as #mainLoadingSpinner (lists inline spinner) */
.chart-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.list-inline-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #124c5f33;
  border-top-color: #124c5f;
  border-radius: 50%;
  animation: listSpinnerRotate 0.6s linear infinite;
}

body.cds-theme--g100 .list-inline-spinner {
  border: 2px solid rgba(244, 244, 244, 0.22);
  border-top-color: #28add8;
}

/* ── List inline edit mode ─────────────────────────────────────────── */

/* Hide entire action column for own lists when NOT in edit mode */
#stockList.own-list cds-table-header-cell:last-child,
#stockList.own-list cds-table-row cds-table-cell:last-child {
  display: none;
}
#stockList.own-list.edit-mode cds-table-header-cell:last-child,
#stockList.own-list.edit-mode cds-table-row cds-table-cell:last-child {
  display: table-cell;
}

/* Disable row hover & cursor in edit mode (list and portfolio) — both themes */
#stockList.edit-mode cds-table-row,
#positionsTable.edit-mode cds-table-row {
  cursor: default !important;
  --cds-background-hover: transparent !important;
  --cds-layer-hover: transparent !important;
}
#stockList.edit-mode cds-table-row:hover,
#positionsTable.edit-mode cds-table-row:hover,
body.cds-theme--g10 #stockList.edit-mode cds-table-row:hover,
body.cds-theme--g10 #positionsTable.edit-mode cds-table-row:hover,
body.cds-theme--g100 #stockList.edit-mode cds-table-row:hover,
body.cds-theme--g100 #positionsTable.edit-mode cds-table-row:hover,
body.cds-theme--g100 #stockList.edit-mode cds-table-row:nth-child(even):hover,
body.cds-theme--g100 #positionsTable.edit-mode cds-table-row:nth-child(even):hover {
  background-color: transparent !important;
}
/* Allow text cursor on editable inputs, pointer on remove buttons inside edit-mode rows */
#stockList.edit-mode cds-table-row input,
#positionsTable.edit-mode cds-table-row input {
  cursor: text;
}
#stockList.edit-mode cds-table-row .remove-from-list-btn,
#positionsTable.edit-mode cds-table-row .position-remove-btn {
  cursor: pointer;
}

/* Disable row hover on portfolio history table (always) — both themes */
#portfolioHistoryTable cds-table-row {
  cursor: default !important;
  --cds-background-hover: transparent !important;
  --cds-layer-hover: transparent !important;
}
#portfolioHistoryTable cds-table-row:hover,
body.cds-theme--g10 #portfolioHistoryTable cds-table-row:hover,
body.cds-theme--g100 #portfolioHistoryTable cds-table-row:hover,
body.cds-theme--g100 #portfolioHistoryTable cds-table-row:nth-child(even):hover {
  background-color: transparent !important;
}

/* Table wrapper border when edit-mode class is present on the table */
#listTableWrapper:has(> #stockList.edit-mode) {
  border: 1px solid var(--cds-border-strong, #124c5f);
  padding: 8px;
  border-radius: 8px;
  overflow: hidden;
}

/* Remove row padding in edit mode */
#ListDetails:has(#stockList.edit-mode) #listTitleRow,
#ListDetails:has(#stockList.edit-mode) #listStatsRow {
  padding: 0px !important;
}

/* Row exit animation for immediate removal */
#stockList cds-table-row.tile-exit {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.list-inline-add-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.list-inline-add-input {
  min-width: 400px;
  max-width: 400px;
  width: 400px;
  height: 34px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--cds-border-strong, #124c5f);
  color: var(--cds-text-primary, #124c5f);
  padding: 0 8px;
  font-size: 0.875rem;
  box-sizing: border-box;
}

.list-inline-add-input:focus,
.list-inline-add-input:focus-visible {
  outline: 2px solid var(--cds-focus, #0f62fe);
  outline-offset: 1px;
}

/* ── Shared inline edit action buttons (list + portfolio) ──────────── */

.inline-edit-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
  justify-content: flex-end;
  flex-shrink: 0;
}

.inline-action-btn {
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--cds-border-strong, #124c5f);
  background: transparent;
  color: var(--cds-text-primary, #124c5f);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.inline-action-btn:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.inline-action-btn:focus-visible {
  outline: 2px solid var(--cds-focus, #0f62fe);
  outline-offset: 2px;
}

.inline-action-save {
  background: var(--cds-button-primary, #0f62fe);
  border-color: var(--cds-button-primary, #0f62fe);
  color: var(--cds-text-on-color, #ffffff);
}

.inline-action-save:hover {
  background: var(--cds-button-primary-hover, #0353e9);
  border-color: var(--cds-button-primary-hover, #0353e9);
  color: var(--cds-text-on-color, #ffffff);
}

/* Vertical divider between Delete and Cancel/Save */
.inline-action-divider {
  width: 1px;
  height: 20px;
  background: var(--cds-border-strong, #124c5f);
  opacity: 0.35;
  flex-shrink: 0;
}

body.cds-theme--g100 .inline-action-btn:not(.inline-action-save) {
  border-color: var(--cds-border-strong, #4d9db4);
  color: var(--cds-text-primary, #f4f4f4);
}

/* List name inline edit input — replaces <h2> */
.list-inline-edit-name {
  font-size: 30px;
  font-family: inherit;
  height: 42px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--cds-border-strong, #124c5f);
  color: var(--cds-text-primary, #124c5f);
  padding: 0 8px;
  width: auto;
  min-width: 4ch;
  max-width: 100%;
  box-sizing: border-box;
  field-sizing: content; /* Chrome 123+; degrades gracefully in other browsers */
}

/* Dark theme adjustments for list inline edit */
body.cds-theme--g100 .list-inline-add-input,
body.cds-theme--g100 .list-inline-edit-name {
  border-color: var(--cds-border-strong, #4d9db4);
  color: var(--cds-text-primary, #f4f4f4);
}

body.cds-theme--g100 .inline-action-btn:not(.inline-action-save),
body.cds-theme--g100 .list-inline-action-btn:not(.list-inline-action-save) {
  border-color: var(--cds-border-strong, #4d9db4);
  color: var(--cds-text-primary, #f4f4f4);
}

/* Mobile: sticky Save/Cancel bar below table */
@media (max-width: 768px) {
  .list-inline-add-input {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    flex: 1 1 auto;
  }

  .list-inline-edit-name {
    width: 100%;
    min-width: 0;
    field-sizing: unset;
  }

  /* Edit mode layout adjustments on mobile */
  #ListDetails:has(#stockList.edit-mode) #listStatsRow {
    display: block !important;
  }

  /* Hide list count and stretch ticker input when in edit mode on mobile */
  #ListDetails:has(#stockList.edit-mode) #list-count-text {
    display: none !important;
  }
  #ListDetails:has(#stockList.edit-mode) #listInlineAddForm {
    width: 100%;
  }
  #ListDetails:has(#stockList.edit-mode) #listInlineTickerInput {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    color: var(--cds-text-primary, #124c5f);
  }

  /* Industries: stack label above tags on mobile */
  #list-industries-container {
    display: block !important;
  }
  #list-industries-container h3 {
    margin-bottom: 24px;
  }

  .list-inline-edit-actions--mobile-bar {
    position: sticky;
    bottom: 0;
    background: transparent;
    border-top: none;
    padding: 12px 0px;
    display: flex;
    gap: 8px;
    justify-content: stretch;
    z-index: 10;
    width: 100%;
    box-sizing: border-box;
  }
  .list-inline-edit-actions--mobile-bar .list-inline-action-btn {
    flex: 1 1 0;
    width: 100%;
    justify-content: center;
    max-width: none;
  }
  body.cds-theme--g100 .list-inline-edit-actions--mobile-bar {
    background: transparent;
    border-top: none;
  }
}

/* ── End list inline edit mode ─────────────────────────────────────── */

/* btn-ghost dark theme fix — base color is hardcoded light; override for dark */
body.cds-theme--g100 .btn-ghost {
  color: var(--cds-text-primary, #f4f4f4);
  border-color: rgba(244, 244, 244, 0.2);
}

body.cds-theme--g100 .btn-ghost:hover {
  background: rgba(244, 244, 244, 0.1);
  color: #ffffff;
}

/* Table cell content - ensure brand color for child elements */
body.cds-theme--g10 cds-table-cell *:not([style]) {
  color: #124c5f;
}

/* Preserve change percentage colors - inline styles on cell element have highest specificity */

body.cds-theme--g100 {
  background-color: #03181f;
  color: #f4f4f4;
  font-family: 'IBM Plex Sans', sans-serif;
  margin: 0;
  padding: 0;
  --cds-focus: #28add8;
  --cds-text-primary: #f4f4f4;
  --cds-text-secondary: #c6c6c6;
  --wg-positive: #42be65;
  --wg-negative: #fa4d56;
}

/* Header styling - match page background */
cds-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background-color: #fbfeff !important;
  border-bottom: 1px solid #124c5f26 !important;
}

@media (max-width: 820px) {
  cds-header {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

/* Header theme-specific backgrounds */
body.cds-theme--g10 cds-header {
  background-color: #fbfeff !important;
}


/* Header dark mode styling */
body.cds-theme--g100 cds-header {
  background-color: #03181f !important;
  border-bottom: 1px solid color-mix(in srgb, var(--cds-text-primary, #124c5f) 15%, transparent);
}

/* Header name dark theme - ensure visibility */
body.cds-theme--g100 cds-header-name {
  color: #f4f4f4 !important;
  --cds-text-primary: #f4f4f4;
  --cds-text-on-color: #f4f4f4;
}

body.cds-theme--g100 cds-header-name a,
body.cds-theme--g100 cds-header-name::part(link) {
  color: #f4f4f4 !important;
  text-decoration: none;
}

body.cds-theme--g100 cds-header-name:hover {
  color: #ffffff !important;
}

/* Navigation - remove white background using CSS custom properties */
cds-header-nav-item {
  --cds-layer: transparent !important;
  --cds-background: transparent !important;
}

/* Navigation - Light (g10) theme */
body.cds-theme--g10 cds-header-nav {
  --cds-text-primary: #124c5f;
}

body.cds-theme--g10 cds-header-nav-item {
  color: #124c5f !important;
  --cds-text-primary: #124c5f;
  --cds-link-primary: #124c5f;
}

body.cds-theme--g10 cds-header-nav-item::part(link),
body.cds-theme--g10 cds-header-nav-item a {
  color: #124c5f !important;
}

body.cds-theme--g10 cds-header-nav-item:hover {
  color: #0d3a4a !important;
}

body.cds-theme--g10 cds-header-nav-item[aria-current="page"],
body.cds-theme--g10 cds-header-nav-item[active] {
  color: #124c5f !important;
  border-bottom: 2px solid #124c5f;
}

/* Header global actions container */
.cds--header__global {
  align-items: center;
  padding-right: 24px;
}

/* Sidebar toggle button - icon only, no background, no padding, no Carbon focus ring.
   Layout was previously declared via inline style="" on the element; consolidated here so
   theme overrides (g10/g100 above) win without an inline-style specificity fight. */
.header-sidebar-toggle {
  border: none;
  cursor: pointer;
  padding: 0;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  text-decoration: none;
  color: inherit;
  outline: none !important;
}
.header-sidebar-toggle:focus {
  outline: none !important;
}
.header-sidebar-toggle:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 1px currentColor;
}
.header-sidebar-toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
}
.header-sidebar-toggle-icon svg {
  width: 32px;
  height: 32px;
  display: block;
}

/* Unread count on sidebar toggle: same footprint / elevation as tile add buttons (cds-tile .stock-action-btn).
   Pill styles apply only with .header-sidebar-unread-badge--visible so an empty span never draws a circle. */
#app-switcher-action {
  position: relative;
}
.header-sidebar-unread-badge {
  position: absolute;
  top: -9px;
  right: -9px;
  display: none !important;
  pointer-events: none;
  z-index: 1;
}
.header-sidebar-unread-badge.header-sidebar-unread-badge--visible {
  display: flex !important;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: none;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #124c5f;
  border: 1px solid #124c5f26;
  background-color: #b6ff00;
  transition: transform 0.2s ease;
}
.header-sidebar-unread-badge.header-sidebar-unread-badge--visible.header-sidebar-unread-badge--wide {
  width: auto;
  min-width: 24px;
  padding: 0 6px;
  border-radius: 12px;
}
#app-switcher-action:hover .header-sidebar-unread-badge.header-sidebar-unread-badge--visible {
  transform: scale(1.1);
}
/* Never show the header count while the sidebar is open (tab already shows the same count). */
body.right-panel-open #app-switcher-action .header-sidebar-unread-badge {
  display: none !important;
  visibility: hidden !important;
}
body.cds-theme--g100 .header-sidebar-unread-badge.header-sidebar-unread-badge--visible {
  /* Match tile add: same solid control on dark header */
  background-color: #b6ff00;
  color: #124c5f;
  border: none;

}
.header-sidebar-unread-badge[hidden],
.header-sidebar-unread-badge[hidden].header-sidebar-unread-badge--visible {
  display: none !important;
}

body.cds-theme--g10 .header-sidebar-toggle .header-sidebar-toggle-icon,
body.cds-theme--g10 .header-sidebar-toggle .header-sidebar-toggle-icon svg {
  color: var(--cds-text-primary, #124c5f) !important;
  stroke: var(--cds-text-primary, #124c5f) !important;
}
body.cds-theme--g100 .header-sidebar-toggle .header-sidebar-toggle-icon,
body.cds-theme--g100 .header-sidebar-toggle .header-sidebar-toggle-icon svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Header global actions - Light (g10) theme */
body.cds-theme--g10 cds-header-global-action {
  color: #124c5f;
}

body.cds-theme--g10 cds-header-global-action:hover {
  color: #0d3a4a !important;
}

body.cds-theme--g10 cds-header-global-action:hover svg {
  fill: #0d3a4a !important;
  color: #0d3a4a !important;
}

/* Navigation - Dark (g100) theme */
body.cds-theme--g100 cds-header-nav {
  --cds-text-primary: #ffffff;
}

body.cds-theme--g100 cds-header-nav-item {
  color: #ffffff !important;
  --cds-text-primary: #ffffff;
  --cds-link-primary: #ffffff;
}

body.cds-theme--g100 cds-header-nav-item::part(link),
body.cds-theme--g100 cds-header-nav-item a {
  color: #ffffff !important;
}

body.cds-theme--g100 cds-header-nav-item:hover {
  color: #ffffff !important;
}

body.cds-theme--g100 cds-header-nav-item:focus {
  outline: 2px solid #28add8;
  outline-offset: -2px;
}

body.cds-theme--g100 cds-header-nav-item[aria-current="page"],
body.cds-theme--g100 cds-header-nav-item[active] {
  color: #ffffff !important;
  border-bottom: 2px solid #28add8;
}

/* Header global actions - Dark (g100) theme */
body.cds-theme--g100 cds-header-global-action {
  color: #f4f4f4;
}

body.cds-theme--g100 cds-header-global-action:hover {
  color: #ffffff !important;
}

/* Main content area */
main {
  padding: 1rem 1rem;
  min-height: calc(100vh - 3rem);
  min-height: calc(100dvh - 3rem);
}

body.cds-theme--g10 main {
  background-color: #fbfeff;
}

body.cds-theme--g100 main {
  background-color: #03181f;
}

/* Content container */
.content-container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1rem 1rem;
}

/* Site footer: uses second .content-container so width/padding match page content */
.app-site-footer {
  margin-top: 1.25rem;
  margin-bottom: 2rem;
  padding: 0;
}

.app-site-footer-rule {
  margin: 0 0 1.25rem 0;
}

.app-site-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.app-site-footer-copy {
  font-size: 14px;
  margin: 0;
}

.app-site-footer-links {
  display: flex;
  gap: 1.25rem;
}

.app-site-footer-links a {
  font-size: 14px;
  color: var(--cds-text-secondary, #525252);
  text-decoration: none;
}

.app-site-footer-links a:hover {
  color: var(--cds-link-primary, #0f62fe);
  text-decoration: underline;
}

@media (max-width: 671px) {
  .app-site-footer,
  .wg-global-footer-inset {
    display: none;
  }
}

/* Hide market table without display:none so cds-table shadow DOM initializes properly.
   position:absolute removes it from flow so it leaves no gap beneath the grid. */
.market-table-hidden {
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Mobile optimizations for content container - apply to all smaller breakpoints */
@media (max-width: 1024px) {
  /* Table scrolling on smaller screens - JS toggles .market-table-hidden class */
  #stockList:not(.market-table-hidden) {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
  }

  /* Ensure table body can scroll properly */
  #stockList cds-table-body {
    min-width: 100% !important;
  }

  /* Price column stays compact; first column holds stacked ticker + company */
  #stockList cds-table-cell:nth-child(2),
  #stockList cds-table-header-cell:nth-child(2) {
    white-space: nowrap !important;
  }
}

@media (max-width: 768px) {
  .content-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
  }

  /* Table container wrapper for mobile scrolling */
  .content-container > #stockList:not(.market-table-hidden) {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    overflow-x: visible !important;
  }

  #stockList:not(.market-table-hidden) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible !important;
    position: relative !important;
  }

  /* Reduce table cell padding on mobile */
  cds-table-header-cell,
  cds-table-cell {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
  }

  /* Narrow first column elsewhere; lists/markets first column is ticker + company */
  cds-table-header-cell:first-child,
  cds-table-cell:first-child {
    width: 60px !important;
    max-width: 60px !important;
    min-width: 60px !important;
    flex: 0 0 60px !important;
  }

  #stockList cds-table-header-cell:first-child,
  #stockList cds-table-cell:first-child {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  #compareTable cds-table-header-cell:first-child,
  #compareTable cds-table-cell:first-child {
    width: 50% !important;
    max-width: 50% !important;
    min-width: 50% !important;
    flex: 0 0 50% !important;
  }

  #compareTable cds-table-header-cell,
  #compareTable cds-table-cell {
    padding: 12px 16px !important;
  }

  /* Prevent Price column from being clipped on initial load (list view) */
  #stockList cds-table-header-cell:nth-child(2),
  #stockList cds-table-cell:nth-child(2) {
    min-width: 5rem !important;
  }

  /* Fix details page layout on tablet */
  #details {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #details .flex-row {
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  /* Override inline min-width styles */
  #details > .flex-row > div,
  #details .flex-row > div {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Force override all inline min-width */
  #details [style*="min-width"] {
    min-width: 0 !important;
  }

  /* Make related stocks full width on mobile — horizontal scroll like home page #stockGrid */
  #relatedStocks,
  #relatedGrid {
    width: 100% !important;
    max-width: 100% !important;
  }

  #relatedGrid {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    align-items: stretch !important;
    padding-bottom: 8px;
  }

  #relatedGrid::-webkit-scrollbar {
    display: none;
  }

  #relatedGrid cds-tile {
    flex: 0 0 auto !important;
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    box-sizing: border-box !important;
  }
}



@media (max-width: 480px) {
  .content-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
  }

  @media (max-width: 480px) {
    body.profile-page .content-container {
      padding: 0px !important;
    }
  }

  @media (max-width: 480px) {
    body.details-page .content-container {
      padding: 0px !important;
      margin: 0px !important;
    }
  }

  /* Table scrolling on very small screens - full width, no truncation (match Related Stocks table) */
  #stockList:not(.market-table-hidden) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible !important;
    position: relative !important;
  }

  /* Table container wrapper - no negative margins so table is not truncated */
  .content-container > #stockList:not(.market-table-hidden) {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    overflow-x: visible !important;
  }

  /* Ensure table body can scroll properly */
  #stockList cds-table-body {
    min-width: 100% !important;
  }

  /* Price column stays compact; first column holds stacked ticker + company */
  #stockList cds-table-cell:nth-child(2),
  #stockList cds-table-header-cell:nth-child(2) {
    white-space: nowrap !important;
  }

  /* Further reduce table cell padding on very small screens */
  cds-table-header-cell,
  cds-table-cell {
    padding: 0.4rem 0.5rem !important;
    font-size: 0.8125rem !important;
  }

  /* Further reduce first column on very small screens (not #stockList company column) */
  cds-table-header-cell:first-child,
  cds-table-cell:first-child {
    width: 50px !important;
    max-width: 50px !important;
    min-width: 50px !important;
    flex: 0 0 50px !important;
  }

  #stockList cds-table-header-cell:first-child,
  #stockList cds-table-cell:first-child {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  #compareTable cds-table-header-cell:first-child,
  #compareTable cds-table-cell:first-child {
    width: 50% !important;
    max-width: 50% !important;
    min-width: 50% !important;
    flex: 0 0 50% !important;
  }

  #compareTable cds-table-header-cell,
  #compareTable cds-table-cell {
    padding: 12px 16px !important;
  }

  /* Force all children to respect container on mobile, except table */
  .content-container > *:not(#stockList) {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Fix details page children with inline min-width */
  #details [style*="min-width: 500px"],
  #details [style*="min-width:500px"],
  #details [style*="min-width: 450px"],
  #details [style*="min-width:450px"] {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Fix flex layouts */
  #details .flex-row {
    flex-direction: column !important;
    gap: 15px !important;
  }

  #details .flex-row > div {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Fix gap on mobile */
  .gap-50 {
    gap: 15px !important;
  }

  /* Fix lastchild-grid */
  .lastchild-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
  }

  /* Fix all grid layouts */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* Typography */
h1 {
  font-size: 2.625rem;
  font-weight: 300;
  line-height: 1.19;
}

body.cds-theme--g100 h1 {
  color: #f4f4f4;
}

p.timestamp-text,
span.timestamp-text,
.timestamp-text {
  font-size: 0.6rem;
  margin: 0;
}

body.cds-theme--g10 .timestamp-text {
  color: #124c5f;
}

body.cds-theme--g100 .timestamp-text {
  color: #c6c6c6;
}

p {
  font-size: .8rem;
  color: #124c5f;
}

body.cds-theme--g100 p {
  color: #c6c6c6;
}


body.cds-theme--g100 #list-header-text {
  color: #f4f4f4;
}

/* Pills active/selected state in gray 10 theme - ensure visibility */
body.cds-theme--g10 .info-block.pill.active {
  background-color: #124c5f !important;
  color: #ffffff !important;
  border-color: #7ee1ee !important;
}

/* Info blocks dark mode - transparent like pills (not interactive) */
body.cds-theme--g100 .info-block {
  background-color: transparent !important;
  color: #f4f4f4;
}

body.cds-theme--g100 .info-block:hover {
  background-color: transparent !important;
}

/* Pills transparent background in gray 100 theme */
body.cds-theme--g100 .info-block.pill {
  background-color: transparent !important;
}

body.cds-theme--g100 .info-block.pill:hover {
  background-color: #124c5f !important;
  color: #ffffff !important;
  border-color: #7ee1ee !important;
}

/* Pills active/selected state in gray 100 theme */
body.cds-theme--g100 .info-block.pill.active {
  background-color: #124c5f !important;
  color: #ffffff !important;
  border-color: #7ee1ee !important;
}

/* Sidebar list items in gray 100 theme - match pills styling exactly */
body.cds-theme--g100 .stocks-list-item {
  background-color: transparent !important;
  color: #f4f4f4 !important;
  border: none !important;
}

body.cds-theme--g100 .stocks-list-item:hover:not(.active),
body.cds-theme--g100 .stocks-list-item:focus:not(.active) {
  background-color: #124c5f !important;
  color: #ffffff !important;
  border-color: #7ee1ee !important;
}

body.cds-theme--g100 .stocks-list-item.active {
  background-color: #124c5f !important;
  color: #ffffff !important;
  border-color: #7ee1ee !important;
}

/* Sidebar list item icon buttons in gray 100 theme */
body.cds-theme--g100 .stocks-list-item .icon-btn {
  color: #f4f4f4 !important;
}

body.cds-theme--g100 .stocks-list-item:hover:not(.active) .icon-btn,
body.cds-theme--g100 .stocks-list-item.active .icon-btn {
  color: #ffffff !important;
}

body.cds-theme--g100 .stocks-list-item:hover:not(.active) .icon-btn:hover,
body.cds-theme--g100 .stocks-list-item.active .icon-btn:hover {
  background-color: #ffffff57 !important;
}

/* AI suggestion buttons in gray 100 theme - match pills styling exactly */
body.cds-theme--g100 .ai-suggestion-btn {
  background-color: transparent !important;
  color: #f4f4f4 !important;
  border: 1px solid #124c5f26 !important;
}

body.cds-theme--g100 .ai-suggestion-btn:hover {
  background-color: #124c5f !important;
  color: #ffffff !important;
  border-color: #7ee1ee !important;
}

/* Filter buttons in sidebar feed tab - match pills styling in gray 100 theme */
body.cds-theme--g100 .filter-btn {
  background-color: transparent !important;
  color: #f4f4f4 !important;
  border: 1px solid #124c5f26 !important;
}

body.cds-theme--g100 .filter-btn:hover {
  background-color: #124c5f !important;
  color: #ffffff !important;
  border-color: #7ee1ee !important;
}

body.cds-theme--g100 .filter-btn.active {
  background-color: #124c5f !important;
  color: #ffffff !important;
  border-color: #7ee1ee !important;
}

/* All post/poll media cards dark theme */
body.cds-theme--g100 .post-media {
  background: #0f222d;
}

/* List and portfolio post cards in feed - dark theme (inline styles are light-only) */
body.cds-theme--g100 .post-media[data-list-url] {
  background-color: #0f222d !important;
  border-color: #6bbed926 !important;
}

body.cds-theme--g100 .post-media[data-list-url] h2 {
  color: #f4f4f4 !important;
}

body.cds-theme--g100 .post-media[data-list-url] .btn-ghost {
  background-color: transparent !important;
  border: 1px solid rgba(244, 244, 244, 0.3) !important;
  color: #f4f4f4 !important;
  height: 30px !important;
}

body.cds-theme--g100 .post-media[data-list-url] .btn-ghost:hover {
  background-color: rgba(244, 244, 244, 0.1) !important;
  border-color: rgba(244, 244, 244, 0.5) !important;
  color: #ffffff !important;
}

body.cds-theme--g100 .post-media[data-list-url] .feed-shared-list-description {
  color: #c6c6c6 !important;
}

body.cds-theme--g100 .post-media[data-list-url] .feed-shared-list-meta {
  color: #c6c6c6 !important;
}

body.cds-theme--g100 .post-media[data-list-url] .feed-shared-list-meta strong {
  color: #f4f4f4 !important;
}

body.cds-theme--g100 .post-media[data-list-url] .list-symbol-circle-overflow {
  background-color: #393939 !important;
  border-color: #525252 !important;
  color: #f4f4f4 !important;
}

body.cds-theme--g100 .post-media[data-list-url] .line2 {
  background-color: #6bbed926 !important;
}

/* Chart share card in feed - dark theme (same panel style as list/portfolio) */
body.cds-theme--g100 .chart-share-card {
  background-color: #0f222d !important;
  border-color: #6bbed926 !important;
}
body.cds-theme--g100 .chart-share-card h2 {
  color: #f4f4f4 !important;
}
body.cds-theme--g100 .chart-share-card .chart-share-company {
  color: #c6c6c6 !important;
}
body.cds-theme--g100 .chart-share-card .chart-share-price {
  color: #f4f4f4 !important;
}

/* Tab buttons in gray 100 theme - match pills styling exactly */
body.cds-theme--g100 .tab-btn:not(.active) {
  background-color: transparent !important;
  color: #f4f4f4 !important;
  border-color: #124c5f26 !important;
}

body.cds-theme--g100 .tab-navigation .tab-btn:not(.active) {
  background-color: transparent !important;
  color: #f4f4f4 !important;
  border-color: #124c5f26 !important;
}

/* Tab buttons hover state - match pills hover exactly (cyan border) */
body.cds-theme--g100 .tab-btn:not(.active):hover {
  background-color: #124c5f !important;
  color: #ffffff !important;
  border-color: #7ee1ee !important;
}

body.cds-theme--g100 .tab-navigation .tab-btn:not(.active):hover {
  background-color: #124c5f !important;
  color: #ffffff !important;
  border-color: #7ee1ee !important;
}

/* Tab buttons active/selected state - match pills hover state exactly (cyan border) */
body.cds-theme--g100 .tab-btn.active {
  background-color: #124c5f !important;
  color: #ffffff !important;
  border-color: #7ee1ee !important;
}

body.cds-theme--g100 .tab-navigation .tab-btn.active {
  background-color: #124c5f !important;
  color: #ffffff !important;
  border-color: #7ee1ee !important;
}

/* AI chat panel in gray 100 theme - improve contrast and match sidebar styling */
body.cds-theme--g100 #chat-tab .ai-chat-panel {
  background: transparent !important;
  border-color: #124c5f26 !important;
}

body.cds-theme--g100 #chat-tab .ai-chat-messages {
  background: transparent !important;
}

/* Assistant and user message bubbles in gray 100 theme */
body.cds-theme--g100 .ai-assistant-message .ai-message-content {
  background-color: #0f222d !important;
  color: #f4f4f4 !important;
  border-color: #124c5f26 !important;
}

body.cds-theme--g100 .ai-assistant-message .ai-message-content p {
  color: #f4f4f4 !important;
}

body.cds-theme--g100 .ai-user-message .ai-message-content {
  background-color: #124c5f !important;
  color: #ffffff !important;
  border-color: #7ee1ee !important;
}

/* Chat input area in gray 100 theme */
body.cds-theme--g100 .ai-chat-input-container {
  background: transparent !important;
  border-top-color: #124c5f26 !important;
}

body.cds-theme--g100 .ai-chat-input {
  background-color: #0f222d !important;
  color: #f4f4f4 !important;
  border-color: #124c5f26 !important;
}

body.cds-theme--g100 .ai-chat-input::placeholder {
  color: #8d8d8d !important;
}

/* Chat send button in gray 100 theme */
body.cds-theme--g100 .ai-send-btn {
  background-color: #124c5f !important;
  border-color: #7ee1ee !important;
  color: #ffffff !important;
}

body.cds-theme--g100 .ai-send-btn:hover {
  background-color: #0f222d !important;
  border-color: #7ee1ee !important;
}

/* Social post transparent background in gray 100 theme */
body.cds-theme--g100 .social-post {
  border-bottom: 1px solid #124c5f26 !important;
}

/* Social post text colors for gray 100 theme - ensure accessibility */
body.cds-theme--g100 .social-post,
body.cds-theme--g100 .social-post * {
  color: #f4f4f4 !important;
}

/* Preserve positive/negative colors inside social posts (override wildcard) */
body.cds-theme--g100 .social-post .positive,
body.cds-theme--g100 .social-post .chart-share-change.positive,
body.cds-theme--g100 .feed-post .positive,
body.cds-theme--g100 .feed-post .chart-share-change.positive {
  color: var(--wg-positive) !important;
}
body.cds-theme--g100 .social-post .negative,
body.cds-theme--g100 .social-post .chart-share-change.negative,
body.cds-theme--g100 .feed-post .negative,
body.cds-theme--g100 .feed-post .chart-share-change.negative {
  color: var(--wg-negative) !important;
}

/* Social post user info - use link color */
body.cds-theme--g100 .social-post .post-user-info h4,
body.cds-theme--g100 .social-post .user-name-clickable {
  color: #28add8 !important;
}

body.cds-theme--g100 .social-post .post-user-info h4:hover,
body.cds-theme--g100 .social-post .user-name-clickable:hover {
  color: #5cc5e8 !important;
}

body.cds-theme--g100 .social-post .post-user-sub {
  color: #c6c6c6 !important;
}

/* Social post content */
body.cds-theme--g100 .social-post .post-content p {
  color: #f4f4f4 !important;
}

/* Social post buttons */
body.cds-theme--g100 .social-post .btn-like,
body.cds-theme--g100 .social-post .btn-comment,
body.cds-theme--g100 .social-post .vote-btn {
  color: #f4f4f4 !important;
  border-color: rgba(244, 244, 244, 0.3) !important;
}

body.cds-theme--g100 .social-post .btn-like:hover,
body.cds-theme--g100 .social-post .btn-comment:hover,
body.cds-theme--g100 .social-post .vote-btn:hover {
  background-color: rgba(244, 244, 244, 0.1) !important;
  border-color: rgba(244, 244, 244, 0.5) !important;
}

/* Social post context button */
body.cds-theme--g100 .social-post .post-context-btn {
  color: #f4f4f4 !important;
}

body.cds-theme--g100 .social-post .post-context-btn:hover {
  background-color: rgba(244, 244, 244, 0.1) !important;
}

/* Social post poll styles — dark theme handled by --cds-text-primary on g100 body;
   base var()/color-mix() rules in sidebar-component.html resolve automatically. */

/* Portfolio chart range buttons - Light (g10) theme */
body.cds-theme--g10 .range-controls .range-btn,
body.cds-theme--g10 .chart-container .range-controls .range-btn,
body.cds-theme--g10 .range-btn {
  color: #124c5f;
  border: 1px solid transparent;
}

body.cds-theme--g10 .range-controls .range-btn:hover,
body.cds-theme--g10 .chart-container .range-controls .range-btn:hover,
body.cds-theme--g10 .range-btn:hover {
  background-color: transparent;
  border: 1px solid #124c5f26;
}

body.cds-theme--g10 .range-controls .range-btn.active,
body.cds-theme--g10 .chart-container .range-controls .range-btn.active,
body.cds-theme--g10 .range-btn.active {
  background-color: #124c5f;
  color: #ffffff;
}

/* Portfolio chart range buttons - Dark (g100) theme */
body.cds-theme--g100 .range-controls .range-btn,
body.cds-theme--g100 .chart-container .range-controls .range-btn,
body.cds-theme--g100 .range-btn {
  color: #ffffff;
}

body.cds-theme--g100 .range-controls .range-btn:hover,
body.cds-theme--g100 .chart-container .range-controls .range-btn:hover,
body.cds-theme--g100 .range-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

body.cds-theme--g100 .range-controls .range-btn.active,
body.cds-theme--g100 .chart-container .range-controls .range-btn.active,
body.cds-theme--g100 .range-btn.active {
  color: #28add8;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  background-color: transparent;
}

/* Social post mentions, hashtags, and tickers - use lighter accessible colors */
body.cds-theme--g100 .social-post .mention,
body.cds-theme--g100 .social-post .mention-link {
  color: #28add8 !important;
}

body.cds-theme--g100 .social-post .hashtag,
body.cds-theme--g100 .social-post .hashtag-link {
  color: #28add8 !important;
}

body.cds-theme--g100 .social-post .stock-ticker {
  color: #42be65 !important;
}

/* Override any inline styles with dark colors */
body.cds-theme--g100 .social-post [style*="color: #124c5f"],
body.cds-theme--g100 .social-post [style*="color:#124c5f"] {
  color: #f4f4f4 !important;
}

/* DataTable dark mode styling */
body.cds-theme--g100 cds-table {
  --cds-layer: rgba(255, 255, 255, 0.01);
  --cds-layer-accent: rgba(255, 255, 255, 0.025);
  --cds-text-primary: #f4f4f4;
  --cds-text-secondary: #c6c6c6;
  --cds-border-subtle: rgba(255, 255, 255, 0.03);
  --cds-background: #03181f;
  --cds-background-hover: rgba(255, 255, 255, 0.015);
  background-color: rgba(255, 255, 255, 0.006);
}

/* DataTable g100 specific background */
body.cds-theme--g100 cds-table {
  --cds-background: #03181f;
}

body.cds-theme--g100 cds-table-toolbar {
  background-color: rgba(255, 255, 255, 0.015);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

body.cds-theme--g100 cds-table-toolbar-search {
  --cds-field: rgba(255, 255, 255, 0.01);
  --cds-text-primary: #f4f4f4;
  --cds-icon-primary: #f4f4f4;
}

body.cds-theme--g100 cds-table-head {
  background-color: rgba(255, 255, 255, 0.015);
}

body.cds-theme--g100 cds-table-header-row {
  background-color: rgba(255, 255, 255, 0.015);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

body.cds-theme--g100 cds-table-header-cell {
  background-color: rgba(255, 255, 255, 0.015);
  color: #f4f4f4;
  --cds-text-primary: #f4f4f4;
  --cds-layer: rgba(255, 255, 255, 0.015);
  padding: 0.75rem 1rem !important;
}

body.cds-theme--g100 cds-table-body {
  background-color: transparent;
}

body.cds-theme--g100 cds-table-row {
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  --cds-layer: transparent;
  --cds-layer-hover: rgba(255, 255, 255, 0.015);
}

body.cds-theme--g100 cds-table-row:hover {
  background-color: #b3ecff08 !important;
}

/* Zebra striping for dark mode - removed, using transparent like g10 */
body.cds-theme--g100 cds-table-row:nth-child(even) {
  background-color: transparent;
}

/* Ensure hover works on even rows too */
body.cds-theme--g100 cds-table-row:nth-child(even):hover {
  background-color: #b3ecff08 !important;
}

body.cds-theme--g100 cds-table-cell {
  color: #f4f4f4;
  --cds-text-primary: #f4f4f4;
  --cds-text-secondary: #c6c6c6;
  background-color: transparent;
  padding: 0.75rem 1rem !important;
}

/* Price column: bold and right-aligned */
#stockList cds-table-cell:nth-child(2) {
  font-weight: 600 !important;
  text-align: right !important;
}

/* Right-align Price column header */
#stockList cds-table-header-cell:nth-child(2) {
  text-align: right !important;
}

/* Lists / markets table: company column takes slack; price stays content-width; action stays fixed */
#stockList cds-table-header-cell:first-child,
#stockList cds-table-cell:first-child {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}

#stockList cds-table-header-cell:nth-child(2),
#stockList cds-table-cell:nth-child(2) {
  flex: 0 0 auto !important;
  width: 0;
}

#stockList cds-table-header-cell:nth-child(2),
#stockList cds-table-cell:nth-child(2) {
  padding-right: 0.5rem !important;
}

#stockList cds-table-header-cell:nth-child(3),
#stockList cds-table-cell:nth-child(3) {
  flex: 0 0 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  padding-left: 0 !important;
  padding-right: 0.5rem !important;
  text-align: right !important;
}

/* Details page — Related Stocks table: wide name column; tight Price ↔ Change (same flex model as #stockList) */
#relatedStocksTable cds-table-header-cell:first-child,
#relatedStocksTable cds-table-cell:first-child {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}

#relatedStocksTable cds-table-header-cell:nth-child(2),
#relatedStocksTable cds-table-cell:nth-child(2),
#relatedStocksTable cds-table-header-cell:nth-child(3),
#relatedStocksTable cds-table-cell:nth-child(3) {
  flex: 0 0 auto !important;
  width: 0 !important;
}

#relatedStocksTable cds-table-header-cell:nth-child(2),
#relatedStocksTable cds-table-cell:nth-child(2) {
  padding-right: 0.25rem !important;
}

#relatedStocksTable cds-table-header-cell:nth-child(3),
#relatedStocksTable cds-table-cell:nth-child(3) {
  padding-left: 0.25rem !important;
}

#relatedStocksTable cds-table-cell:nth-child(2),
#relatedStocksTable cds-table-cell:nth-child(3) {
  white-space: nowrap !important;
}

/* Add-to-list button in stock list (matches #compareTable .icon-btn) */
#stockList .icon-btn {
  border: 1px solid #124c5f26;
  background: transparent;
  color: #124c5f;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 50%;
}
#stockList .icon-btn:hover {
  background-color: rgba(18, 76, 95, 0.1);
}
body.cds-theme--g100 #stockList .icon-btn {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
}
body.cds-theme--g100 #stockList .icon-btn:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Legacy flex rows (e.g. featured list fallback): plus must not stay brand teal on dark bg */
body.cds-theme--g100 .stock-list-row .icon-btn {
  color: #ffffff;
}
body.cds-theme--g100 .stock-list-row .icon-btn:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Button column: no padding, minimal width, centered */
#stockList cds-table-cell:nth-child(4) {
  width: 48px !important;
  max-width: 48px !important;
  padding: 0 !important;
  text-align: center;
}
#stockList cds-table-cell:nth-child(4) .icon-btn {
  margin: 0 auto;
}
#stockList cds-table-header-cell:nth-child(4) {
  width: 48px !important;
  max-width: 48px !important;
  padding: 0 !important;
}

/* Desktop table font size - larger screens only */
@media (min-width: 1025px) {
  cds-table-cell {
    font-size: larger !important;
  }

  cds-table-header-cell {
    font-size: larger !important;
  }
}

body.cds-theme--g100 cds-table h2 {
  color: #f4f4f4;
}

/* Link styling in table for dark mode */
body.cds-theme--g100 cds-table cds-link {
  --cds-link-primary: #28add8;
  --cds-link-primary-hover: #5cc5e8;
  color: #28add8;
}

/* Button in toolbar dark mode */
body.cds-theme--g100 cds-table-toolbar cds-button {
  --cds-button-primary: #0f62fe;
  --cds-button-primary-hover: #0353e9;
}

/* ============================================
   SVG Icon Theme Colors - Light (g10) Theme
   ============================================ */

/* Set default color for currentColor-based SVGs */
body.cds-theme--g10 svg,
body.cds-theme--g10 svg * {
  color: #124c5f !important;
}

/* Override ALL fills in SVGs - catch everything */
body.cds-theme--g10 svg path,
body.cds-theme--g10 svg circle,
body.cds-theme--g10 svg rect,
body.cds-theme--g10 svg polygon,
body.cds-theme--g10 svg ellipse,
body.cds-theme--g10 svg line,
body.cds-theme--g10 svg polyline,
body.cds-theme--g10 svg g {
  fill: currentColor !important;
}

/* Handle SVGs with fill="none" - only apply stroke */
body.cds-theme--g10 svg path[fill="none"],
body.cds-theme--g10 svg circle[fill="none"],
body.cds-theme--g10 svg rect[fill="none"],
body.cds-theme--g10 svg polygon[fill="none"],
body.cds-theme--g10 svg ellipse[fill="none"] {
  fill: none !important;
}

/* Handle currentColor - ensure it resolves to theme color */
body.cds-theme--g10 svg[fill="currentColor"],
body.cds-theme--g10 svg path[fill="currentColor"],
body.cds-theme--g10 svg circle[fill="currentColor"],
body.cds-theme--g10 svg rect[fill="currentColor"],
body.cds-theme--g10 svg polygon[fill="currentColor"],
body.cds-theme--g10 svg ellipse[fill="currentColor"] {
  fill: #124c5f !important;
}

body.cds-theme--g10 svg[stroke="currentColor"],
body.cds-theme--g10 svg path[stroke="currentColor"],
body.cds-theme--g10 svg circle[stroke="currentColor"],
body.cds-theme--g10 svg rect[stroke="currentColor"],
body.cds-theme--g10 svg polygon[stroke="currentColor"],
body.cds-theme--g10 svg ellipse[stroke="currentColor"] {
  stroke: #124c5f !important;
}

/* Special handling for SVGs in header actions */
body.cds-theme--g10 cds-header-global-action svg,
body.cds-theme--g10 cds-header-global-action svg *,
body.cds-theme--g10 cds-header-global-action svg path,
body.cds-theme--g10 cds-header-global-action svg circle,
body.cds-theme--g10 cds-header-global-action svg rect {
  fill: #124c5f !important;
  color: #124c5f !important;
  stroke: #124c5f !important;
}

body.cds-theme--g10 cds-header-global-action:hover svg,
body.cds-theme--g10 cds-header-global-action:hover svg *,
body.cds-theme--g10 cds-header-global-action:hover svg path {
  fill: #0d3a4a !important;
  color: #0d3a4a !important;
  stroke: #0d3a4a !important;
}

/* Ensure icons in Carbon components use theme color */
body.cds-theme--g10 [slot="icon"],
body.cds-theme--g10 [slot="icon"] *,
body.cds-theme--g10 [slot="icon"] path,
body.cds-theme--g10 [slot="icon"] circle,
body.cds-theme--g10 [slot="icon"] rect {
  fill: #124c5f !important;
  color: #124c5f !important;
  stroke: #124c5f !important;
}

/* Special handling for stock-arrow class SVGs */
body.cds-theme--g10 .stock-arrow,
body.cds-theme--g10 .stock-arrow path {
  fill: #124c5f !important;
  stroke: #124c5f !important;
}

/* Handle SVG images loaded via img tags - use filter for Light (g10) */
body.cds-theme--g10 img[src$=".svg"] {
  filter: brightness(0) saturate(100%) invert(27%) sepia(45%) saturate(1200%) hue-rotate(160deg) brightness(0.8) contrast(0.9);
}

/* ============================================
   SVG Icon Theme Colors - Dark (g100) Theme
   ============================================ */

/* All icons white in dark themes - catch everything */
body.cds-theme--g100 svg,
body.cds-theme--g100 svg * {
  color: #ffffff !important;
}

/* Override ALL fills in SVGs - catch everything */
body.cds-theme--g100 svg path,
body.cds-theme--g100 svg circle,
body.cds-theme--g100 svg rect,
body.cds-theme--g100 svg polygon,
body.cds-theme--g100 svg ellipse,
body.cds-theme--g100 svg line,
body.cds-theme--g100 svg polyline,
body.cds-theme--g100 svg g {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Handle SVGs with fill="none" - only apply stroke */
body.cds-theme--g100 svg path[fill="none"],
body.cds-theme--g100 svg circle[fill="none"],
body.cds-theme--g100 svg rect[fill="none"],
body.cds-theme--g100 svg polygon[fill="none"],
body.cds-theme--g100 svg ellipse[fill="none"] {
  fill: none !important;
  stroke: #ffffff !important;
}

/* Handle currentColor - ensure it resolves to white */
body.cds-theme--g100 svg[fill="currentColor"],
body.cds-theme--g100 svg path[fill="currentColor"],
body.cds-theme--g100 svg circle[fill="currentColor"],
body.cds-theme--g100 svg rect[fill="currentColor"],
body.cds-theme--g100 svg polygon[fill="currentColor"],
body.cds-theme--g100 svg ellipse[fill="currentColor"] {
  fill: #ffffff !important;
}

body.cds-theme--g100 svg[stroke="currentColor"],
body.cds-theme--g100 svg path[stroke="currentColor"],
body.cds-theme--g100 svg circle[stroke="currentColor"],
body.cds-theme--g100 svg rect[stroke="currentColor"],
body.cds-theme--g100 svg polygon[stroke="currentColor"],
body.cds-theme--g100 svg ellipse[stroke="currentColor"] {
  stroke: #ffffff !important;
}

/* AI send button icon - ensure white in dark theme */
body.cds-theme--g100 .ai-send-btn svg,
body.cds-theme--g100 .ai-send-btn svg path,
body.cds-theme--g100 .ai-send-btn svg * {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* AI send button background in Dark (g100) theme */
body.cds-theme--g100 .ai-send-btn {
  background: #124c5f !important;
  border-color: #124c5f !important;
  color: #ffffff !important;
}

body.cds-theme--g100 .ai-send-btn:hover:not(:disabled) {
  background: #0e3a47 !important;
}

body.cds-theme--g100 cds-header-global-action svg,
body.cds-theme--g100 cds-header-global-action svg *,
body.cds-theme--g100 cds-header-global-action svg path,
body.cds-theme--g100 cds-header-global-action svg circle,
body.cds-theme--g100 cds-header-global-action svg rect {
  fill: #ffffff !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
}

body.cds-theme--g100 cds-header-global-action:hover svg,
body.cds-theme--g100 cds-header-global-action:hover svg *,
body.cds-theme--g100 cds-header-global-action:hover svg path {
  fill: #f4f4f4 !important;
  color: #f4f4f4 !important;
  stroke: #f4f4f4 !important;
}

/* Icon color for Carbon components */
body.cds-theme--g100 [slot="icon"],
body.cds-theme--g100 [slot="icon"] *,
body.cds-theme--g100 [slot="icon"] path,
body.cds-theme--g100 [slot="icon"] circle,
body.cds-theme--g100 [slot="icon"] rect {
  fill: #ffffff !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Special handling for stock-arrow class SVGs */
body.cds-theme--g100 .stock-arrow,
body.cds-theme--g100 .stock-arrow path {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Handle SVG images loaded via img tags - invert to white for Dark (g100) */
body.cds-theme--g100 img[src$=".svg"] {
  filter: brightness(0) invert(1);
}

/* Chart component - Dark (g100) theme */
body.cds-theme--g100 #stock-chart-container {
  background-color: transparent !important;
  border-color: #124c5f26 !important;
}

body.cds-theme--g100 #chartContainer {
  background-color: transparent !important;
}

/* Ensure chart canvas text is white in gray 100 theme */
body.cds-theme--g100 #chartContainer canvas {
  color: #ffffff !important;
  fill: #f4f4f4 !important;
}

/* Portfolio chart container - transparent in g100 theme */
body.cds-theme--g100 .chart-container {
  background-color: transparent !important;
}

/* ── Custom pagination bar (replaces Carbon cds-pagination) ── */
.wg-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid;
  margin-top: 0;
  font-size: 14px;
  min-height: 48px;
  box-sizing: border-box;
  padding: 16px 15px 0px 16px
}
body.cds-theme--g10 .wg-pagination  { border-top-color: #124c5f26; color: #124c5f; background: transparent; }
body.cds-theme--g100 .wg-pagination { border-top-color: rgba(255,255,255,0.02); color: #f4f4f4; background: transparent; }

.wg-pagination__size { display: flex; align-items: center; gap: 6px; }
.wg-pagination__label { white-space: nowrap; }
.wg-pagination__select {
  appearance: auto;
  border: 0px;
  border-radius: 0;
  padding: 4px 8px;
  font-size: 14px;
  min-height: 32px;
  cursor: pointer;
  background: transparent;
  color: inherit;
}
body.cds-theme--g10 .wg-pagination__select  { border-color: #124c5f26; }
body.cds-theme--g100 .wg-pagination__select { border-color: rgba(255,255,255,0.08); }
.wg-pagination__select:hover { border-color: currentColor; }
.wg-pagination__select:focus { outline: 2px solid; outline-offset: -2px; }
body.cds-theme--g10 .wg-pagination__select:focus  { outline-color: #124c5f; }
body.cds-theme--g100 .wg-pagination__select:focus { outline-color: #78a9ff; }

.wg-pagination__range { margin-left: auto; white-space: nowrap; }

.wg-pagination__nav { display: flex; align-items: center; gap: 4px; }
.wg-pagination__page { white-space: nowrap; padding: 0 6px; font-variant-numeric: tabular-nums; }
.wg-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0px;
  border: 0px;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.1s;
}
body.cds-theme--g10 .wg-pagination__btn  { border-color: #124c5f26; }
body.cds-theme--g100 .wg-pagination__btn { border-color: rgba(255,255,255,0.08); }
.wg-pagination__btn svg { fill: currentColor; }
.wg-pagination__btn:hover:not(:disabled) { background: rgba(0,0,0,0.06); }
body.cds-theme--g100 .wg-pagination__btn:hover:not(:disabled) { background: rgba(255,255,255,0.04); }
.wg-pagination__btn:focus { outline: 2px solid; outline-offset: -2px; }
body.cds-theme--g10 .wg-pagination__btn:focus  { outline-color: #124c5f; }
body.cds-theme--g100 .wg-pagination__btn:focus { outline-color: #78a9ff; }
.wg-pagination__btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Responsive: compact on mobile */
@media (max-width: 480px) {
  .wg-pagination { padding: 8px 16px; gap: 6px; justify-content: space-between; }
  .wg-pagination__size { display: none; }
  .wg-pagination__range { margin-left: 0; font-size: 13px; }
  .wg-pagination__page { font-size: 13px; }
}
@media (max-width: 768px) {
  .wg-pagination__label { display: none; }
}

/* Autosuggest theme-agnostic styling - should not change with theme switching */
body .autosuggest-list,
body [data-autosuggest="true"] {
  background-color: #cadfe4;
  border: 1px solid #124c5f26;
  color: #124c5f;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  scrollbar-width: none !important;
}

body .autosuggest-list div,
body [data-autosuggest="true"] div {
  color: #124c5f;
  background-color: transparent;
  border-top: 1px solid #124c5f26;
}

body .autosuggest-list div strong,
body [data-autosuggest="true"] div strong {
  color: #124c5f;
}

body .autosuggest-list div span,
body [data-autosuggest="true"] div span {
  color: #124c5f;
}

/* Ensure autosuggest is not affected by theme classes */
body.cds-theme--g10 .autosuggest-list,
body.cds-theme--g10 [data-autosuggest="true"],
body.cds-theme--g100 .autosuggest-list,
body.cds-theme--g100 [data-autosuggest="true"] {
  background-color: #cadfe4;
  border: 1px solid #124c5f26;
  color: #124c5f;
}

body.cds-theme--g10 .autosuggest-list div,
body.cds-theme--g10 [data-autosuggest="true"] div,
body.cds-theme--g100 .autosuggest-list div,
body.cds-theme--g100 [data-autosuggest="true"] div {
  color: #124c5f;
  background-color: transparent;
}

body.cds-theme--g10 .autosuggest-list div:hover,
body.cds-theme--g10 [data-autosuggest="true"] div:hover,
body.cds-theme--g100 .autosuggest-list div:hover,
body.cds-theme--g100 [data-autosuggest="true"] div:hover {
  background-color: #124c5f;
  color: #ffffff;
}

body.cds-theme--g10 .autosuggest-list div:hover strong,
body.cds-theme--g10 .autosuggest-list div:hover span,
body.cds-theme--g10 [data-autosuggest="true"] div:hover strong,
body.cds-theme--g10 [data-autosuggest="true"] div:hover span,
body.cds-theme--g100 .autosuggest-list div:hover strong,
body.cds-theme--g100 .autosuggest-list div:hover span,
body.cds-theme--g100 [data-autosuggest="true"] div:hover strong,
body.cds-theme--g100 [data-autosuggest="true"] div:hover span {
  color: #ffffff;
}

/* Preserve highlight colors within autosuggest (for matched text) */
body .autosuggest-list .highlight,
body [data-autosuggest="true"] .highlight {
  /* Avoid "blocky" highlighted boxes inside rows; keep it as a text emphasis */
  background: transparent;
  color: #0b728a;
  font-weight: 700;
  padding: 0;
  border-radius: 0;
}

body.cds-theme--g10 .autosuggest-list .highlight,
body.cds-theme--g10 [data-autosuggest="true"] .highlight,
body.cds-theme--g100 .autosuggest-list .highlight,
body.cds-theme--g100 [data-autosuggest="true"] .highlight {
  background: transparent;
  color: #0b728a;
  font-weight: 700;
  padding: 0;
  border-radius: 0;
}

/* Preserve highlight colors even on hover */
body .autosuggest-list div:hover .highlight,
body [data-autosuggest="true"] div:hover .highlight {
  background: transparent;
  color: #7ee1ee;
  font-weight: 700;
  padding: 0;
  border-radius: 0;
}

body.cds-theme--g10 .autosuggest-list div:hover .highlight,
body.cds-theme--g10 [data-autosuggest="true"] div:hover .highlight,
body.cds-theme--g100 .autosuggest-list div:hover .highlight,
body.cds-theme--g100 [data-autosuggest="true"] div:hover .highlight {
  background: transparent;
  color: #7ee1ee;
  font-weight: 700;
  padding: 0;
  border-radius: 0;
}

/* ============================================
   Discussions Input - Dark (g100) Theme
   ============================================ */

/* Discussions textarea input */
body.cds-theme--g100 #postContent {
  background-color: rgba(255, 255, 255, 0.01) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f4f4f4 !important;
}

body.cds-theme--g100 #postContent::placeholder {
  color: #c6c6c6 !important;
  opacity: 0.7;
}

body.cds-theme--g100 #postContent:focus {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-color: #28add8 !important;
  outline: 2px solid #28add8 !important;
  outline-offset: 2px !important;
}

body.cds-theme--g100 #postContent:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

body.cds-theme--g100 #newPostForm .discussion-post-btn:disabled {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.35);
}

body.cds-theme--g100 #newPostForm .discussion-post-btn:not(:disabled) {
  background: #124c5f !important;
  color: #ffffff !important;
  border: 1px solid #124c5f !important;
}

body.cds-theme--g100 #newPostForm .discussion-post-btn:not(:disabled):hover {
  background: #3c5b6f !important;
  border-color: #3c5b6f !important;
}

body.cds-theme--g100 .submit-reply-btn:disabled {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.35) !important;
}

body.cds-theme--g100 .submit-reply-btn:not(:disabled) {
  background-color: #124c5f !important;
  color: #ffffff !important;
}

body.cds-theme--g100 .submit-reply-btn:not(:disabled):hover {
  background-color: #3c5b6f !important;
}

body.cds-theme--g100 .cancel-reply-btn {
  color: #f4f4f4;
  border-color: rgba(255, 255, 255, 0.15);
}

body.cds-theme--g100 .cancel-reply-btn:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

/* Discussions section heading */
body.cds-theme--g100 #discussions h2 {
  color: #f4f4f4 !important;
}

/* ============================================
   Global Modals - Gray 100 Theme
   Styles for all modals created by globalModalManager
   ============================================ */

/* All modal surfaces - apply to any modal in gray 100 theme */
body.cds-theme--g100 .modal-content {
  background-color: #03181f !important;
  color: #f4f4f4 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* Modal headers */
body.cds-theme--g100 .modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Modal titles */
body.cds-theme--g100 .modal-title {
  color: #f4f4f4 !important;
}

/* Close buttons */
body.cds-theme--g100 .modal .close {
  color: #f4f4f4 !important;
}

body.cds-theme--g100 .modal .close:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #f4f4f4 !important;
}

/* Modal body text */
body.cds-theme--g100 .modal-body {
  color: #f4f4f4 !important;
}

body.cds-theme--g100 .modal-body p {
  color: #f4f4f4 !important;
}

/* Portfolio empty state — readable text on dark layer */
body.cds-theme--g100 .portfolio-empty-state__title {
  color: var(--cds-text-primary, #ffffff);
}

body.cds-theme--g100 .portfolio-empty-state__hint {
  color: var(--cds-text-primary, #ffffff);
}

/* Modal buttons - secondary */
body.cds-theme--g100 .modal-btn.secondary {
  background-color: transparent !important;
  color: #c6c6c6 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.cds-theme--g100 .modal-btn.secondary:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #f4f4f4 !important;
}

/* Modal buttons - primary */
body.cds-theme--g100 .modal-btn.primary {
  background-color: #28add8 !important;
  border: 1px solid #28add8 !important;
  color: #ffffff !important;
}

body.cds-theme--g100 .modal-btn.primary:hover {
  background-color: #1e8fb8 !important;
  border-color: #1e8fb8 !important;
}

/* Modal buttons - danger */
body.cds-theme--g100 .modal-btn.danger {
  background-color: #da1e28 !important;
  border: 1px solid #da1e28 !important;
  color: #ffffff !important;
}

body.cds-theme--g100 .modal-btn.danger:hover {
  background-color: #b81922 !important;
  border-color: #b81922 !important;
}

/* Modal inputs */
body.cds-theme--g100 .modal input[type="text"],
body.cds-theme--g100 .modal input[type="email"],
body.cds-theme--g100 .modal input[type="password"],
body.cds-theme--g100 .modal textarea {
  background-color: rgba(255, 255, 255, 0.01) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f4f4f4 !important;
}

body.cds-theme--g100 .modal input[type="text"]:focus,
body.cds-theme--g100 .modal input[type="email"]:focus,
body.cds-theme--g100 .modal input[type="password"]:focus,
body.cds-theme--g100 .modal textarea:focus {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-color: #28add8 !important;
  outline: 2px solid #28add8 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Modal labels */
body.cds-theme--g100 .modal label {
  color: #c6c6c6 !important;
}

/* ============================================
   Post Modals (Create Post + Post Detail) - Gray 100 Theme
   Reuse discussions input tokens; use profile modal surface palette
   ============================================ */

/* Modal surfaces */
body.cds-theme--g100 #postCreationModal .modal-content,
body.cds-theme--g100 #postModal .modal-content {
  background-color: #03181f !important;
  color: #f4f4f4 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

body.cds-theme--g100 #postCreationModal .modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.cds-theme--g100 #postCreationModal .modal-title {
  color: #f4f4f4 !important;
}

body.cds-theme--g100 #postCreationModal .close,
body.cds-theme--g100 #postModal .close {
  color: #f4f4f4 !important;
}

body.cds-theme--g100 #postCreationModal .close:hover,
body.cds-theme--g100 #postModal .close:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Inputs / textareas / selects (match discussions focus/hover/placeholder) */
body.cds-theme--g100 #postCreationModal .form-control,
body.cds-theme--g100 #postCreationModal select,
body.cds-theme--g100 #postCreationModal .input-main,
body.cds-theme--g100 #postModal .form-control,
body.cds-theme--g100 #postModal select {
  background-color: rgba(255, 255, 255, 0.01) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f4f4f4 !important;
}

body.cds-theme--g100 #postCreationModal .form-control::placeholder,
body.cds-theme--g100 #postCreationModal .input-main::placeholder,
body.cds-theme--g100 #postModal .form-control::placeholder {
  color: #c6c6c6 !important;
  opacity: 0.7 !important;
}

body.cds-theme--g100 #postCreationModal .form-control:hover,
body.cds-theme--g100 #postCreationModal select:hover,
body.cds-theme--g100 #postCreationModal .input-main:hover,
body.cds-theme--g100 #postModal .form-control:hover,
body.cds-theme--g100 #postModal select:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

body.cds-theme--g100 #postCreationModal .form-control:focus,
body.cds-theme--g100 #postCreationModal select:focus,
body.cds-theme--g100 #postCreationModal .input-main:focus,
body.cds-theme--g100 #postModal .form-control:focus,
body.cds-theme--g100 #postModal select:focus {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-color: #28add8 !important;
  outline: 2px solid #28add8 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Buttons in post modals */
body.cds-theme--g100 #postCreationModal .modal-btn.secondary,
body.cds-theme--g100 #postModal .modal-btn.secondary {
  color: #c6c6c6 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.cds-theme--g100 #postCreationModal .modal-btn.secondary:hover,
body.cds-theme--g100 #postModal .modal-btn.secondary:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #f4f4f4 !important;
}

body.cds-theme--g100 #postCreationModal .modal-btn.primary,
body.cds-theme--g100 #postModal .modal-btn.primary {
  background-color: #28add8 !important;
  border: 1px solid #28add8 !important;
  color: #ffffff !important;
}

body.cds-theme--g100 #postCreationModal .modal-btn.primary:hover,
body.cds-theme--g100 #postModal .modal-btn.primary:hover {
  background-color: #5cc5e8 !important;
  border-color: #5cc5e8 !important;
}

body.cds-theme--g100 #postCreationModal .modal-btn.primary:disabled,
body.cds-theme--g100 #postModal .modal-btn.primary:disabled {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(244, 244, 244, 0.4) !important;
  cursor: not-allowed !important;
}

/* Create Post modal: option panels */
body.cds-theme--g100 #postCreationModal .post-type-options {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.cds-theme--g100 #postCreationModal .post-type-options h5 {
  color: #f4f4f4 !important;
}

body.cds-theme--g100 #postCreationModal .selection-item {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.cds-theme--g100 #postCreationModal .selection-item:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

body.cds-theme--g100 #postCreationModal .selection-info h6 {
  color: #f4f4f4 !important;
}

body.cds-theme--g100 #postCreationModal .selection-info p {
  color: #c6c6c6 !important;
}

body.cds-theme--g100 #postCreationModal .image-upload-area {
  background: rgba(255, 255, 255, 0.01) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Post creation footer — dark mode */
body.cds-theme--g100 #postCreationModal .post-creation-footer {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* Mobile bottom sheet drag handle — dark mode */
@media (max-width: 600px) {
  body.cds-theme--g100 #postCreationModal .post-creation-modal::before {
    background: rgba(255, 255, 255, 0.15) !important;
  }

  body.cds-theme--g100 #postCreationModal .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  }
}

/* Overrides for inline-styled chart previews inside the modal */
body.cds-theme--g100 #postCreationModal .chart-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Post detail modal: text colors + inline style overrides */
body.cds-theme--g100 #postModal .post-modal-post .post-author {
  color: #28add8 !important;
  cursor: pointer;
  display: inline-block;
}

body.cds-theme--g100 #postModal .post-modal-post .post-author:hover {
  color: #5cc5e8 !important;
}

body.cds-theme--g100 #postModal .post-modal-post .post-content {
  color: #f4f4f4 !important;
}

body.cds-theme--g100 #postModal .post-modal-post .post-time {
  color: rgba(244, 244, 244, 0.8) !important;
  display: inline-block;
}

body.cds-theme--g100 #postModal .post-modal-post .avatar-circle,
body.cds-theme--g100 #postModal .comments-section .comment-avatar:not(:has(img)) {
  background: #28add8 !important;
  color: #03181f !important;
}

body.cds-theme--g100 #postModal .post-modal-post .post-context-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Post detail modal engagement buttons */
body.cds-theme--g100 #postModal .btn-like,
body.cds-theme--g100 #postModal .btn-comment,
body.cds-theme--g100 #postModal .vote-btn {
  color: #f4f4f4 !important;
  border-color: rgba(244, 244, 244, 0.3) !important;
}

body.cds-theme--g100 #postModal .btn-like:hover,
body.cds-theme--g100 #postModal .btn-comment:hover,
body.cds-theme--g100 #postModal .vote-btn:hover {
  background-color: rgba(244, 244, 244, 0.1) !important;
  border-color: rgba(244, 244, 244, 0.5) !important;
}

/* Post detail modal poll styles — dark theme handled by --cds-text-primary on g100 body;
   base var()/color-mix() rules in sidebar-component.html resolve automatically. */

/* Feed post dark theme — mirror .social-post overrides */
body.cds-theme--g100 .feed-post {
  border-color: rgba(255, 255, 255, 0.1);
}
body.cds-theme--g100 .feed-post:hover {
  background: transparent;
}

/* Single-post full-page view dark theme */
body.cds-theme--g100 .feed-post.single-post-view {
  border-color: rgba(255, 255, 255, 0.1);
}
body.cds-theme--g100 .feed-post.single-post-view:hover {
  border-color: rgba(255, 255, 255, 0.1);
}
body.cds-theme--g100 .back-to-feed-link {
  color: #f4f4f4;
}

/* Mentions/hashtags inside modal content (override inline light-theme colors) */
body.cds-theme--g100 #postModal .mention-link,
body.cds-theme--g100 #postModal .hashtag-link {
  color: #28add8 !important;
}

/* Override inline light-theme colors, but preserve link colors for usernames */
body.cds-theme--g100 #postModal [style*="color: #124c5f"]:not(.post-author):not(.user-name-clickable):not(.username-clickable),
body.cds-theme--g100 #postModal [style*="color:#124c5f"]:not(.post-author):not(.user-name-clickable):not(.username-clickable) {
  color: #f4f4f4 !important;
}

body.cds-theme--g100 #postModal .comments-section-header h4 {
  color: #f4f4f4 !important;
}

body.cds-theme--g100 #postModal #modal-replying-indicator {
  color: #c6c6c6 !important;
}

body.cds-theme--g100 #postModal #modal-cancel-reply {
  background-color: rgba(255, 255, 255, 0.01) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #c6c6c6 !important;
}

body.cds-theme--g100 #postModal #modal-cancel-reply:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #f4f4f4 !important;
}

body.cds-theme--g100 #postModal .comments-section .comment-author,
body.cds-theme--g100 #postModal .comments-section .comment-content {
  color: #f4f4f4 !important;
}

body.cds-theme--g100 #postModal .comments-section .comment-time {
  color: rgba(244, 244, 244, 0.7) !important;
}

body.cds-theme--g100 #postModal .comments-section .reply-comment-btn,
body.cds-theme--g100 #postModal .comments-section .delete-comment-btn {
  color: #c6c6c6 !important;
}

body.cds-theme--g100 #postModal .comments-section .reply-comment-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f4f4f4 !important;
}

body.cds-theme--g100 #postModal .comments-section .delete-comment-btn:hover {
  background: rgba(255, 77, 77, 0.1) !important;
  color: #ff4d4d !important;
}

/* Inline-styled ticker header inside post modal */
body.cds-theme--g100 #postModal .stock-list-row {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ============================================
   Shared Vote / Action Bar — Dark Theme
   ============================================ */
body.cds-theme--g100 .vote-btn {
  color: #c6c6c6 !important;
}

body.cds-theme--g100 .vote-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

body.cds-theme--g100 .vote-btn.upvoted {
  color: var(--wg-positive) !important;
}

body.cds-theme--g100 .vote-btn.downvoted {
  color: var(--wg-negative) !important;
}

body.cds-theme--g100 .vote-score {
  color: #f4f4f4 !important;
}

body.cds-theme--g100 .action-reply-btn,
body.cds-theme--g100 .action-replies-count {
  color: #c6c6c6 !important;
}

body.cds-theme--g100 .action-reply-btn:hover,
body.cds-theme--g100 .action-replies-count:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f4f4f4 !important;
}

/* Emoji picker — dark theme (inline, no panel background needed) */
body.cds-theme--g100 .emoji-picker-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================
   Inline Post Comments (pageview mode) — Dark Theme
   ============================================ */

body.cds-theme--g100 .inline-post-comments {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.cds-theme--g100 .inline-post-comments .comments-section-header h4 {
  color: var(--cds-text-primary, #f4f4f4) !important;
}

body.cds-theme--g100 .inline-post-comments .comment-form-container .form-control {
  background-color: rgba(255, 255, 255, 0.01) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--cds-text-primary, #f4f4f4) !important;
}

body.cds-theme--g100 .inline-post-comments .comment-form-container .form-control::placeholder {
  color: var(--cds-text-secondary, #c6c6c6) !important;
  opacity: 0.7 !important;
}

body.cds-theme--g100 .inline-post-comments .comment-form-container .form-control:focus {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-color: var(--cds-focus, #28add8) !important;
  outline: 2px solid var(--cds-focus, #28add8) !important;
  outline-offset: 2px !important;
}

body.cds-theme--g100 .inline-post-comments .modal-btn.primary {
  background-color: var(--cds-interactive-01, #28add8) !important;
  border-color: var(--cds-interactive-01, #28add8) !important;
  color: #ffffff !important;
}

body.cds-theme--g100 .inline-post-comments .modal-btn.primary:hover {
  background-color: color-mix(in srgb, var(--cds-interactive-01, #28add8) 85%, white 15%) !important;
}

/* ============================================
   Reply Form - Gray 100 Theme
   ============================================ */

/* Reply textarea input */
body.cds-theme--g100 textarea[id^="replyContent-"] {
  background-color: rgba(255, 255, 255, 0.01) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f4f4f4 !important;
}

body.cds-theme--g100 textarea[id^="replyContent-"]::placeholder {
  color: #c6c6c6 !important;
  opacity: 0.7;
}

body.cds-theme--g100 textarea[id^="replyContent-"]:focus {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-color: #28add8 !important;
  outline: 2px solid #28add8 !important;
  outline-offset: 2px !important;
}

body.cds-theme--g100 textarea[id^="replyContent-"]:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Reply form container border */
body.cds-theme--g100 div[id^="replyForm-"] {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* Cancel button */
body.cds-theme--g100 .cancel-reply-btn {
  background-color: rgba(255, 255, 255, 0.01) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #c6c6c6 !important;
}

body.cds-theme--g100 .cancel-reply-btn:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #f4f4f4 !important;
}

body.cds-theme--g100 .cancel-reply-btn:active {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Submit reply button */
body.cds-theme--g100 .submit-reply-btn {
  background-color: #28add8 !important;
  color: #ffffff !important;
  border: 1px solid #28add8 !important;
}

body.cds-theme--g100 .submit-reply-btn:hover:not(:disabled) {
  background-color: #5cc5e8 !important;
  border-color: #5cc5e8 !important;
}

body.cds-theme--g100 .submit-reply-btn:active:not(:disabled) {
  background-color: #1a6a85 !important;
  border-color: #1a6a85 !important;
}

body.cds-theme--g100 .submit-reply-btn:disabled {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: rgba(244, 244, 244, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  cursor: not-allowed !important;
}

/* Inline reply form (social modal comments) — Dark Theme */
body.cds-theme--g100 .inline-reply-form {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

body.cds-theme--g100 .inline-reply-form textarea {
  background-color: rgba(255, 255, 255, 0.01) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f4f4f4 !important;
}

body.cds-theme--g100 .inline-reply-form textarea::placeholder {
  color: #c6c6c6 !important;
  opacity: 0.7;
}

body.cds-theme--g100 .inline-reply-form textarea:focus {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-color: #28add8 !important;
}

body.cds-theme--g100 .cancel-inline-reply-btn {
  background-color: rgba(255, 255, 255, 0.01) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #c6c6c6 !important;
}

body.cds-theme--g100 .cancel-inline-reply-btn:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #f4f4f4 !important;
}

body.cds-theme--g100 .submit-inline-reply-btn {
  background-color: #28add8 !important;
  color: #ffffff !important;
}

body.cds-theme--g100 .submit-inline-reply-btn:disabled {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: rgba(244, 244, 244, 0.4) !important;
  cursor: not-allowed !important;
}

/* Comment edit form — Dark Theme */
body.cds-theme--g100 .comment-edit-form textarea {
  background-color: rgba(255, 255, 255, 0.01) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f4f4f4 !important;
}

body.cds-theme--g100 .comment-edit-form .cancel-edit-btn {
  background-color: rgba(255, 255, 255, 0.01) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #c6c6c6 !important;
}

body.cds-theme--g100 .comment-edit-form .save-edit-btn {
  background-color: #28add8 !important;
  color: #ffffff !important;
}

/* Comment children border — Dark Theme */
body.cds-theme--g100 .comment-children {
  border-left-color: rgba(255, 255, 255, 0.1) !important;
}

/* Comment border-bottom — Dark Theme */
body.cds-theme--g100 .comments-section .comment-content {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Reply button/link text */
body.cds-theme--g100 .reply-btn {
  color: #c6c6c6 !important;
}

body.cds-theme--g100 .reply-btn:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #f4f4f4 !important;
}

body.cds-theme--g100 .reply-btn:active {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Reply button icon */
body.cds-theme--g100 .reply-btn img {
  filter: brightness(0) invert(0.8);
}

body.cds-theme--g100 .reply-btn:hover img {
  filter: brightness(0) invert(1);
}

/* Ensure all "Reply" text labels are visible */
body.cds-theme--g100 .reply-btn,
body.cds-theme--g100 button[title="Reply"] {
  color: #c6c6c6 !important;
}

/* Toggle replies button */
body.cds-theme--g100 .toggle-replies-btn {
  color: #c6c6c6 !important;
}

body.cds-theme--g100 .toggle-replies-btn:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #f4f4f4 !important;
}

body.cds-theme--g100 .toggle-replies-btn img {
  filter: brightness(0) invert(0.8);
}

body.cds-theme--g100 .toggle-replies-btn:hover img {
  filter: brightness(0) invert(1);
}

/* ============================================
   Discussions Usernames and Hashtags - Gray 100 Theme
   ============================================ */

/* Username links in discussion posts */
body.cds-theme--g100 .user-name-clickable,
body.cds-theme--g100 .username-clickable,
body.cds-theme--g100 span.username-clickable,
body.cds-theme--g100 .username,
body.cds-theme--g100 span.username {
  color: #28add8 !important;
}

body.cds-theme--g100 .user-name-clickable:hover,
body.cds-theme--g100 .username-clickable:hover,
body.cds-theme--g100 span.username-clickable:hover,
body.cds-theme--g100 .username:hover,
body.cds-theme--g100 span.username:hover {
  color: #5cc5e8 !important;
}

/* Mention links in discussion post content */
body.cds-theme--g100 .mention-link,
body.cds-theme--g100 #discussions .mention-link,
body.cds-theme--g100 #postsContainer .mention-link {
  color: #28add8 !important;
}

body.cds-theme--g100 .mention-link:hover,
body.cds-theme--g100 #discussions .mention-link:hover,
body.cds-theme--g100 #postsContainer .mention-link:hover {
  color: #5cc5e8 !important;
}

/* Hashtag links in discussion post content */
body.cds-theme--g100 .hashtag-link,
body.cds-theme--g100 #discussions .hashtag-link,
body.cds-theme--g100 #postsContainer .hashtag-link {
  color: #28add8 !important;
}

body.cds-theme--g100 .hashtag-link:hover,
body.cds-theme--g100 #discussions .hashtag-link:hover,
body.cds-theme--g100 #postsContainer .hashtag-link:hover {
  color: #5cc5e8 !important;
}

/* Override inline styles for mentions and hashtags in discussions */
body.cds-theme--g100 #discussions [style*="color: #124c5f"].mention-link,
body.cds-theme--g100 #discussions [style*="color:#124c5f"].mention-link,
body.cds-theme--g100 #postsContainer [style*="color: #124c5f"].mention-link,
body.cds-theme--g100 #postsContainer [style*="color:#124c5f"].mention-link {
  color: #28add8 !important;
}

body.cds-theme--g100 #discussions [style*="color: #124c5f"].hashtag-link,
body.cds-theme--g100 #discussions [style*="color:#124c5f"].hashtag-link,
body.cds-theme--g100 #postsContainer [style*="color: #124c5f"].hashtag-link,
body.cds-theme--g100 #postsContainer [style*="color:#124c5f"].hashtag-link {
  color: #28add8 !important;
}

/* ============================================
   Profile Page - Input and Button Dark Theme
   Generalize dark theme styles for inputs and buttons
   ============================================ */

/* Input dark theme - generalize from modal inputs */
body.cds-theme--g100 .input-main,
body.cds-theme--g100 .input-autosuggest {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #f4f4f4 !important;
}

body.cds-theme--g100 .input-main::placeholder,
body.cds-theme--g100 .input-autosuggest::placeholder {
  color: rgba(244, 244, 244, 0.6) !important;
}

body.cds-theme--g100 .input-main:focus,
body.cds-theme--g100 .input-autosuggest:focus {
  border-color: #78a9ff !important;
  box-shadow: 0 0 0 3px rgba(120, 169, 255, 0.2) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

body.cds-theme--g100 .input-main:hover,
body.cds-theme--g100 .input-autosuggest:hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

body.cds-theme--g100 textarea.input-main {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #f4f4f4 !important;
}

body.cds-theme--g100 textarea.input-main::placeholder {
  color: rgba(244, 244, 244, 0.6) !important;
}

/* Profile page - Button dark theme */
body.cds-theme--g100 .save-btn {
  background: #78a9ff !important;
  color: #03181f !important;
  border: 1px solid #78a9ff !important;
}

body.cds-theme--g100 .save-btn:hover {
  background: #a6c8ff !important;
  border-color: #a6c8ff !important;
}

body.cds-theme--g100 .cancel-btn {
  background: transparent !important;
  color: #f4f4f4 !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

body.cds-theme--g100 .cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

body.cds-theme--g100 .profile-container .btn {
  background: #124c5f !important;
  color: #ffffff !important;
  border: 1px solid #124c5f !important;
}

body.cds-theme--g100 .profile-container .btn:hover {
  background: #3c5b6f !important;
  border-color: #3c5b6f !important;
}

/* Profile – Notification Settings: flex layout and dark theme text */
.notification-settings-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.notification-settings-options .checkbox {
  display: flex;
  align-items: center;
}

body.cds-theme--g100 #siteSettingsTab .notification-settings-options .checkbox,
body.cds-theme--g100 #siteSettingsTab .notification-settings-options .checkbox span:not(.checkbox-indicator) {
  color: #f4f4f4 !important;
}

/* Profile – AI tab: dark theme text contrast */
body.cds-theme--g100 #aiTab .settings-section h3,
body.cds-theme--g100 #aiTab h3 {
  color: #f4f4f4 !important;
}

body.cds-theme--g100 #aiTab .settings-section p,
body.cds-theme--g100 #aiTab p {
  color: #c6c6c6 !important;
}

body.cds-theme--g100 #aiTab #no-keys-message {
  color: #c6c6c6 !important;
}

body.cds-theme--g100 #aiTab label.radio,
body.cds-theme--g100 #aiTab label.radio span {
  color: #f4f4f4 !important;
}

body.cds-theme--g100 #aiTab #ai-save-message {
  color: #c6c6c6 !important;
}

/* Profile – Social Integrations: match Connect button height to input */
#integrationsTab .connection-form .input-group {
  display: flex;
  align-items: stretch;
}

#integrationsTab .connection-form .input-group .btn {
  align-self: stretch;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════════════
   Admin Dashboard shared styles
   Covers: analytics_dashboard · moderation_dashboard · system_dashboard
   Light-theme base lives in each page's own <style> block.
   Dark (g100) overrides are consolidated here so all three pages benefit.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Shared metric-value utility class ──────────────────────────────────── */
.db-metric-value {
  color: #124c5f;
}
body.cds-theme--g100 .db-metric-value {
  color: var(--cds-text-primary, #f4f4f4) !important;
}

/* ── Titles & card headings ──────────────────────────────────────────────── */
body.cds-theme--g100 .dashboard-title,
body.cds-theme--g100 .health-card-title {
  color: var(--cds-text-primary, #f4f4f4) !important;
}

/* Section h2/h3 headings that carry inline color: #124c5f */
body.cds-theme--g100 .dashboard-content h2,
body.cds-theme--g100 .dashboard-content h3,
body.cds-theme--g100 .moderation-dashboard h2,
body.cds-theme--g100 .moderation-dashboard h3,
body.cds-theme--g100 .analytics-dashboard h2,
body.cds-theme--g100 .analytics-dashboard h3 {
  color: var(--cds-text-primary, #f4f4f4) !important;
}

/* ── Analytics KPI & chart elements ─────────────────────────────────────── */
body.cds-theme--g100 .kpi-value {
  color: var(--cds-text-primary, #f4f4f4) !important;
}
body.cds-theme--g100 .kpi-label {
  color: var(--cds-text-secondary, #c6c6c6) !important;
}
body.cds-theme--g100 .dashboard-subtitle {
  color: var(--cds-text-secondary, #c6c6c6) !important;
}
body.cds-theme--g100 .chart-title {
  color: var(--cds-text-primary, #f4f4f4) !important;
}
body.cds-theme--g100 .role-pill {
  background: rgba(40, 173, 216, 0.15);
  color: #28add8;
}
body.cds-theme--g100 .metric-pill {
  background: rgba(40, 173, 216, 0.15);
  color: var(--cds-text-primary, #f4f4f4);
}
body.cds-theme--g100 .trend-up {
  color: var(--wg-positive) !important;
}
body.cds-theme--g100 .trend-down {
  color: var(--wg-negative) !important;
}

/* ── Moderation stats ────────────────────────────────────────────────────── */
body.cds-theme--g100 .stat-number {
  color: var(--cds-text-primary, #f4f4f4) !important;
}

/* ── Modals ──────────────────────────────────────────────────────────────── */
body.cds-theme--g100 .modal-content {
  background-color: #162730 !important;
  color: var(--cds-text-primary, #f4f4f4);
  border: 1px solid rgba(18, 76, 95, 0.35);
}
body.cds-theme--g100 .modal-header,
body.cds-theme--g100 .modal-footer {
  border-color: rgba(18, 76, 95, 0.35) !important;
}

/* ── Content preview (moderation) ───────────────────────────────────────── */
body.cds-theme--g100 .content-preview {
  background: #0f2329;
  color: var(--cds-text-primary, #f4f4f4);
}

/* ── Realtime log stream (analytics) ────────────────────────────────────── */
body.cds-theme--g100 #realtime-log {
  background: #0c2730 !important;
  color: var(--cds-text-primary, #f4f4f4);
  border-color: rgba(18, 76, 95, 0.3) !important;
}

/* ── System dashboard: status text & last-update ─────────────────────────── */
body.cds-theme--g100 #overall-status-text {
  color: var(--cds-text-primary, #f4f4f4) !important;
}
body.cds-theme--g100 .last-update {
  color: var(--cds-text-secondary, #c6c6c6);
}

/* ── Log detail labels ───────────────────────────────────────────────────── */
body.cds-theme--g100 .log-detail-label {
  color: #28add8;
}

/* ── Plain-HTML dashboard tables – dark theme ────────────────────────────── */
/*
 * Mirrors the cds-table dark theme (see g10 rules above).
 * The .dash-table class can be added to any <table> in the three dashboards
 * for explicit opt-in. All tables inside the dashboard containers also
 * receive these rules via the container selector.
 */

/* Shared table row class for JS-rendered rows (replaces inline border-bottom) */
.dash-table-row {
  border-bottom: 1px solid #124c5f26;
}
body.cds-theme--g100 .dash-table-row {
  border-bottom-color: rgba(18, 76, 95, 0.22) !important;
}

/* Light-theme base – shared class + container-scoped selectors */
.dash-table,
.clients-table,
.dashboard-content table,
.moderation-dashboard table,
.analytics-dashboard table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.dash-table thead tr,
.clients-table thead tr,
.dashboard-content table thead tr,
.moderation-dashboard table thead tr,
.analytics-dashboard table thead tr {
  background-color: rgba(18, 76, 95, 0.08);
}
.dash-table th,
.clients-table th,
.dashboard-content table th,
.moderation-dashboard table th,
.analytics-dashboard table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: #124c5f;
  border-bottom: 2px solid rgba(18, 76, 95, 0.3);
  border-right: 1px solid #124c5f26;
}
.dash-table th:last-child,
.clients-table th:last-child,
.dashboard-content table th:last-child,
.moderation-dashboard table th:last-child,
.analytics-dashboard table th:last-child { border-right: none; }
.dash-table td,
.clients-table td,
.dashboard-content table td,
.moderation-dashboard table td,
.analytics-dashboard table td {
  padding: 0.75rem 1rem;
  text-align: left;
  color: #124c5f;
  border-bottom: 1px solid #124c5f26;
  border-right: 1px solid #124c5f26;
}
.dash-table td:last-child,
.clients-table td:last-child,
.dashboard-content table td:last-child,
.moderation-dashboard table td:last-child,
.analytics-dashboard table td:last-child { border-right: none; }
.dash-table tbody tr:last-child td,
.clients-table tbody tr:last-child td,
.dashboard-content table tbody tr:last-child td,
.moderation-dashboard table tbody tr:last-child td,
.analytics-dashboard table tbody tr:last-child td { border-bottom: none; }
.dash-table tbody tr:hover,
.clients-table tbody tr:hover,
.dashboard-content table tbody tr:hover,
.moderation-dashboard table tbody tr:hover,
.analytics-dashboard table tbody tr:hover { background-color: rgba(179, 236, 255, 0.19); }

/* Dark-theme overrides for .dash-table, .clients-table AND all tables inside the three dashboard wrappers */
body.cds-theme--g100 .dash-table thead tr,
body.cds-theme--g100 .clients-table thead tr,
body.cds-theme--g100 .dashboard-content table thead tr,
body.cds-theme--g100 .moderation-dashboard table thead tr,
body.cds-theme--g100 .analytics-dashboard table thead tr {
  background-color: #1d3640 !important;
}

body.cds-theme--g100 .dash-table th,
body.cds-theme--g100 .clients-table th,
body.cds-theme--g100 .dashboard-content table th,
body.cds-theme--g100 .moderation-dashboard table th,
body.cds-theme--g100 .analytics-dashboard table th {
  color: var(--cds-text-primary, #f4f4f4) !important;
  border-bottom-color: rgba(18, 76, 95, 0.5) !important;
  border-right-color: rgba(18, 76, 95, 0.25) !important;
}

body.cds-theme--g100 .dash-table td,
body.cds-theme--g100 .clients-table td,
body.cds-theme--g100 .dashboard-content table td,
body.cds-theme--g100 .moderation-dashboard table td,
body.cds-theme--g100 .analytics-dashboard table td {
  color: var(--cds-text-primary, #f4f4f4) !important;
  border-bottom-color: rgba(18, 76, 95, 0.2) !important;
  border-right-color: rgba(18, 76, 95, 0.15) !important;
}

body.cds-theme--g100 .dash-table tbody tr:hover,
body.cds-theme--g100 .clients-table tbody tr:hover,
body.cds-theme--g100 .dashboard-content table tbody tr:hover,
body.cds-theme--g100 .moderation-dashboard table tbody tr:hover,
body.cds-theme--g100 .analytics-dashboard table tbody tr:hover {
  background-color: rgba(18, 76, 95, 0.18) !important;
}

/* Fix hard-coded light border-bottom on JS-rendered <tr> rows */
body.cds-theme--g100 .dashboard-content tr[style*="border-bottom"],
body.cds-theme--g100 .moderation-dashboard tr[style*="border-bottom"],
body.cds-theme--g100 .analytics-dashboard tr[style*="border-bottom"] {
  border-bottom-color: rgba(18, 76, 95, 0.22) !important;
}

/* APScheduler / system warning rows (background:#fff8e1) */
body.cds-theme--g100 .dashboard-content td[style*="background:#fff8e1"] {
  background: #2a2000 !important;
  color: #f4e2a0 !important;
}

/* Running-job status badge (background: #e3f2fd) */
body.cds-theme--g100 .dashboard-content td span[style*="background: #e3f2fd"],
body.cds-theme--g100 .dashboard-content td span[style*="background:#e3f2fd"] {
  background: rgba(40, 173, 216, 0.15) !important;
  color: #28add8 !important;
}

/* Select / filter controls with inline border: #cadfe4 or #e0e0e0 */
body.cds-theme--g100 .dashboard-content select,
body.cds-theme--g100 .moderation-dashboard select {
  background-color: #15242a;
  border-color: rgba(18, 76, 95, 0.4) !important;
  color: var(--cds-text-primary, #f4f4f4);
}

/* ── Inline color: #124c5f overrides (covers all three dashboard pages) ──── */
/* Any element inside a dashboard container with an inline primary colour.   */
body.cds-theme--g100 .dashboard-content div[style*="color: #124c5f"],
body.cds-theme--g100 .dashboard-content span[style*="color: #124c5f"],
body.cds-theme--g100 .dashboard-content p[style*="color: #124c5f"],
body.cds-theme--g100 .dashboard-content td[style*="color: #124c5f"],
body.cds-theme--g100 .moderation-dashboard div[style*="color: #124c5f"],
body.cds-theme--g100 .moderation-dashboard span[style*="color: #124c5f"],
body.cds-theme--g100 .moderation-dashboard p[style*="color: #124c5f"],
body.cds-theme--g100 .moderation-dashboard td[style*="color: #124c5f"],
body.cds-theme--g100 .analytics-dashboard div[style*="color: #124c5f"],
body.cds-theme--g100 .analytics-dashboard span[style*="color: #124c5f"],
body.cds-theme--g100 .analytics-dashboard p[style*="color: #124c5f"] {
  color: var(--cds-text-primary, #f4f4f4) !important;
}

/* ── Inline white/light backgrounds on dashboard containers ──────────────── */
body.cds-theme--g100 .dashboard-content div[style*="background: white"],
body.cds-theme--g100 .dashboard-content div[style*="background-color: #fff"],
body.cds-theme--g100 .dashboard-content div[style*="background: #fff"] {
  background: #15242a !important;
  border-color: rgba(18, 76, 95, 0.25) !important;
}

/* ── Chart.js canvas: text colour for labels drawn on canvas ─────────────── */
body.cds-theme--g100 canvas {
  color: #c6c6c6;
}

/* ============================================================================
   Explore Tag Page (#hashtag explore)
   ============================================================================ */

.explore-page-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 20px;
  flex-wrap: wrap;
}

.explore-page-header h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 600;
}

.explore-filter-pills {
  margin-bottom: 1.5rem;
}

.explore-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.explore-card {
  cursor: pointer;
  transition: box-shadow 0.15s ease;
  background: var(--cds-layer-01, #f4f4f4);
  padding: 1rem;
  border-radius: 0;
  border: 1px solid var(--cds-border-subtle-01, #e0e0e0);
}

.explore-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.explore-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.explore-type-badge {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
}

.explore-type-discussion {
  background: var(--cds-support-info-subtle, #e5f6ff);
  color: var(--cds-text-on-color-disabled, #0f62fe);
}

.explore-type-social_post {
  background: var(--cds-support-success-subtle, #defbe6);
  color: var(--cds-support-success, #24a148);
}

.explore-card-time {
  font-size: 0.75rem;
  color: var(--cds-text-secondary);
}

.explore-card-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.explore-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.explore-avatar-placeholder {
  display: inline-block;
  background: var(--cds-layer-02, #e0e0e0);
}

.explore-username {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--cds-text-primary);
}

.explore-ticker-pill {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--cds-layer-02, #e0e0e0);
  color: var(--cds-text-primary);
  margin-left: auto;
}

.explore-card-content {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--cds-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.explore-card-footer {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--cds-text-secondary);
}

.explore-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

.explore-load-more {
  display: block;
  margin: 2rem auto;
  padding: 0.75rem 2rem;
  border: 1px solid var(--cds-border-strong-01, #8d8d8d);
  background: transparent;
  color: var(--cds-text-primary);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background 0.15s;
}

.explore-load-more:hover {
  background: var(--cds-layer-hover-01);
}

.explore-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--cds-text-secondary);
  font-size: 0.9rem;
}

/* Skeleton loading cards */
.explore-skeleton {
  animation: explore-pulse 1.4s ease-in-out infinite;
}

.explore-skeleton-line {
  height: 12px;
  border-radius: 4px;
  background: var(--cds-skeleton-element, rgba(0,0,0,0.08));
  margin-bottom: 10px;
}

.explore-skeleton-line.short {
  width: 50%;
}

@keyframes explore-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Dark theme overrides */
body.cds-theme--g100 .explore-type-discussion {
  background: rgba(15, 98, 254, 0.15);
  color: #78a9ff;
}

body.cds-theme--g100 .explore-type-social_post {
  background: rgba(36, 161, 72, 0.15);
  color: #42be65;
}

body.cds-theme--g100 .explore-card {
  background: var(--cds-layer-01, #262626);
  border-color: var(--cds-border-subtle-01, #393939);
}

body.cds-theme--g100 .explore-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.cds-theme--g100 .explore-skeleton-line {
  background: rgba(255,255,255,0.06);
}

/* Responsive: single column on mobile */
@media (max-width: 768px) {
  .explore-content-grid {
    grid-template-columns: 1fr;
  }
}

/* Outline-only icons: prevent global fill overrides from filling stroke-based SVGs */
svg.icon-outline-only,
svg.icon-outline-only path,
svg.icon-outline-only circle,
svg.icon-outline-only rect,
svg.icon-outline-only ellipse,
svg.icon-outline-only polygon,
body.cds-theme--g10 svg.icon-outline-only,
body.cds-theme--g10 svg.icon-outline-only path,
body.cds-theme--g10 svg.icon-outline-only circle,
body.cds-theme--g100 svg.icon-outline-only,
body.cds-theme--g100 svg.icon-outline-only path,
body.cds-theme--g100 svg.icon-outline-only circle {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: inherit;
}