/* Global chart background overrides */
:root {
  --kekoa-hover-bg: #1c2435;
  --kekoa-input-bg: #222b44;
  --kekoa-input-color: #fff;
  --kekoa-icon-filter: brightness(0) invert(1); /* Black icon */
}

/* Symbol Lookup Filters - Show only STOCKS option */
cq-lookup-filters button.ciq-filter:not([aria-checked="true"]) {
  display: none !important;
}
/* cq-lookup-filters button.ciq-filter[aria-checked="true"] {
  display: inline-block !important;
} */
.ciq-active .ciq-radio span:after,
.ciq-radio.ciq-active span:after {
  left: 2px !important;
  bottom: 2px !important;
}

/* Target all chart containers regardless of context */
.ciq-chart-area,
.ciq-chart,
.chartContainer,
#chartContainer,
.stx-subholder,
.stx-wrapper,
.stx-chart-panel,
.stx_chart,
.stx_grid,
.stx_panel {
  background: transparent !important;
  background-color: transparent !important;
}

/* Specific override for cq-context selector causing the #f8f8f8 background */
cq-context,
*[cq-context],
.ciq-night cq-context,
.ciq-night *[cq-context],
.kekoa-theme cq-context,
.kekoa-theme *[cq-context] {
  background: transparent !important;
  background-color: transparent !important;
  color: #ccd1dd !important;
}

/* Specific override for the problematic #f8f8f8 background */
.stx_mountain_chart,
.stx_bars,
.stx_histogram,
.stx_line_chart,
.stx_candle_shadow,
.stx_bar_even,
.stx_bar_down,
.stx_bar_up,
.stx_line_down,
.stx_line_up,
.stx_baseline_down,
.stx_baseline_up,
.stx_histogram_down,
.stx_histogram_even,
.stx_histogram_up,
.stx_mountain,
.stx_line_chart,
.stx_bar_chart {
  background: none !important;
}

/* Canvas specific overrides - though this may need to be handled in JavaScript */
canvas.chartCanvas {
  background: transparent !important;
  background-color: transparent !important;
}
.ciq-menu-icon span[ciq-menu-icon],
cq-menu.ciq-preferences .menu-clickable span.icon,
cq-toggle > *:not(cq-text, cq-clickable, cq-help),
cq-toggle > cq-clickable *:not(cq-text) {
  filter: invert(1);
}
:host(*) [cq-tooltip],
* > [cq-tooltip] {
  background: #363636 !important;
}
:host(cq-menu.nav-dropdown):before,
cq-menu.nav-dropdown:before,
.ciq-nav cq-toggle::before,
.ciq-nav cq-clickable::before,
.ciq-nav cq-info-toggle-dropdown .ciq-menu.toggle-options > span::after,
.ciq-nav cq-menu.ciq-menu::before {
  background: transparent !important;
  z-index: 99999999999 !important;
}
.ciq-nav {
  border-bottom: 0px !important;
}
.ciq-footer {
  border-top: 0px !important;
}
body .cq-chart-title {
  background: transparent !important;
  color: #fff !important;
}
li.hide-sm.separator-item.item {
  display: none;
}
:host(cq-show-range) .content > .item,
cq-show-range .content > .item {
  color: #ccd1dd !important;
}

/* Additional style for current candle range price display */
:host(cq-show-range) .current,
cq-show-range .current,
.stx_current_hr_up,
.stx_current_hr_down,
.ciq-night :host(cq-show-range) .current,
.ciq-night cq-show-range .current,
.kekoa-theme :host(cq-show-range) .current,
.kekoa-theme cq-show-range .current {
  background-color: #0fedbe !important;
  color: #111827 !important;
  border-color: #0fedbe !important;
}
.stx-holder cq-study-legend {
  background-color: #303a4d !important;
  color: #fff !important;
}
cq-chart-title {
  background-color: transparent !important;
  color: #fff !important;
}
:host(cq-study-legend[chart-legend]),
cq-study-legend[chart-legend] {
  padding: 1px 0 !important;
}

cq-chart-price.stx-down {
  color: #fff !important;
}

/* Chart dropdown menu styling with signal color */
.ciq-night cq-menu-dropdown,
cq-menu-dropdown,
.ciq-menu-dropdown,
cq-context cq-menu-dropdown,
.kekoa-theme.ciq-night cq-menu-dropdown,
.kekoa-theme cq-menu-dropdown {
  background-color: #5affdc !important;
  color: #111827 !important;
  border-color: #5affdc !important;
}

/* Style for dropdown menu items */
cq-menu-dropdown cq-item,
.ciq-night cq-menu-dropdown cq-item,
.kekoa-theme cq-menu-dropdown cq-item {
  color: #111827 !important;
}

/* Hover state for dropdown items */
cq-menu-dropdown cq-item:hover,
.ciq-night cq-menu-dropdown cq-item:hover,
.kekoa-theme cq-menu-dropdown cq-item:hover {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Style for dropdown headings */
cq-menu-dropdown cq-heading,
.ciq-night cq-menu-dropdown cq-heading,
.kekoa-theme cq-menu-dropdown cq-heading {
  color: #111827 !important;
  border-bottom: 1px solid rgba(17, 24, 39, 0.2) !important;
}

/* Update dropdown menu styling with more specific selectors to match the DOM structure */
cq-dropdown,
cq-menu-dropdown,
cq-dropdown .content,
cq-menu-dropdown .content,
cq-dropdown ul.content,
cq-menu-dropdown ul.content,
cq-context cq-dropdown,
cq-context cq-menu-dropdown,
.kekoa-theme cq-dropdown,
.kekoa-theme cq-menu-dropdown,
.ciq-night cq-dropdown,
.ciq-night cq-menu-dropdown,
cq-menu > cq-dropdown,
cq-menu > cq-menu-dropdown {
  background-color: #303a4d !important;
  color: #fff !important;
  border-color: #303a4d !important;
}

/* Target specific item elements inside the dropdown */
cq-dropdown li.item,
cq-menu-dropdown li.item,
cq-dropdown cq-item,
cq-menu-dropdown cq-item,
cq-menu > cq-dropdown li.item,
cq-menu > cq-menu-dropdown li.item {
  color: #fff !important;
}

/* Style for dropdown headings */
cq-dropdown h4,
cq-menu-dropdown h4,
cq-dropdown cq-heading,
cq-menu-dropdown cq-heading,
cq-dropdown .heading-item,
cq-menu-dropdown .heading-item {
  color: #fff !important;
  border-bottom: 1px solid rgba(17, 24, 39, 0.2) !important;
}

/* Targeting radio-item hover states */
cq-dropdown li.radio-item:hover,
cq-menu-dropdown li.radio-item:hover,
cq-dropdown li.item:hover,
cq-menu-dropdown li.item:hover {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Styling for labels inside the dropdown items */
cq-dropdown span[label],
cq-menu-dropdown span[label],
cq-dropdown #label_Candle,
cq-menu-dropdown #label_Bar,
cq-dropdown li.item span,
cq-menu-dropdown li.item span {
  color: #fff !important;
}

/* Style for the radio buttons in the menu */
cq-dropdown .ciq-radio,
cq-menu-dropdown .ciq-radio,
cq-dropdown span.ciq-radio > span,
cq-menu-dropdown span.ciq-radio > span {
  border-color: #111827 !important;
}

cq-dropdown span.ciq-radio > span,
cq-menu-dropdown span.ciq-radio > span {
  background-color: transparent !important;
}

/* Active radio styling */
cq-dropdown li.ciq-active span.ciq-radio > span,
cq-menu-dropdown li.ciq-active span.ciq-radio > span {
  background-color: #111827 !important;
}

/* Icon colors */
html:not([ciq-last-interaction="touch"])
  cq-study-legend[chart-legend]
  .item:hover,
li.template-item.item .item:hover,
li.clickable-item.item:hover > cq-clickable.dropdown-clickable {
  background: #1c2435 !important;
  color: #fff !important;
}
.ciq-icon.ciq-close:after {
  filter: invert(1);
}
body cq-dropdown li.item:hover > div {
  background-color: #1c2435 !important;
}
body cq-dropdown .content > .item:not(.template-item) > *,
li.template-item.item .item:hover {
  border-radius: 0px !important;
}

.ciq-active .ciq-radio span:after,
.ciq-radio.ciq-active span:after {
  left: 2px;
  bottom: 2px;
}
.chartSize {
  background: #303a4d !important;
}
.chartSize span {
  filter: invert(1) !important;
}
.chartSize span .stx-tooltip {
  background-color: #363636;
}
cq-dialog {
  background: #303a4d !important;
}
cq-dialog h4 {
  color: #fff !important;
}
cq-close:after {
  filter: invert(1);
}
/* Hide share and shortcut buttons */
.share-clickable,
cq-share-button,
.ciq-share-button,
.ciq-shortcut-button,
.shortcuts-ui {
  display: none !important;
}
ul.ciq-lookup-results li.result,
ul.ciq-lookup-results li.result .symbol {
  color: #fff;
}

ul.ciq-lookup-results li.result:hover,
ul.ciq-lookup-results li.result:hover .symbol {
  color: #000;
}
cq-loader {
  filter: invert(1);
}
cq-toggle > *:not(cq-text, cq-clickable, cq-help) {
  z-index: 99 !important;
}
:host(*) [cq-tooltip],
* > [cq-tooltip] {
  background: #303a4d !important;
  border-radius: 2px !important;
  font-size: 16px !important;
  color: #ccd1dd !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 400 !important;
  filter: invert(3);
  border: 0px !important;
  padding: 8px !important;
}
.ciq-menu-icon span[ciq-menu-icon],
cq-menu.ciq-preferences .menu-clickable span.icon {
  position: relative !important;
  z-index: 99 !important;
}
cq-menu.ciq-preferences .menu-clickable span.icon > [cq-tooltip] {
  left: -60px !important;
}
ul.ciq-lookup-results li.result:hover .symbol,
ul.ciq-lookup-results li.result:hover .name,
ul.ciq-lookup-results li.result:hover .exchDisp {
  color: var(--kekoa-input-color);
  background-color: var(--kekoa-hover-bg, #1c2435);
}
cq-lookup-input input[type="text"][name="symbol"] {
  background: var(--kekoa-input-bg) !important;
  color: var(--kekoa-input-color);
}

cq-lookup-icon {
  filter: var(--kekoa-icon-filter);
  opacity: 1 !important;
}
.ciq-search-container button {
  height: 2rem;
  background: var(--kekoa-input-bg);
  color: var(--kekoa-input-color);
}
cq-share-button {
  filter: var(--kekoa-icon-filter);
  opacity: 1 !important;
}

.cq-message-text {
  color: var(--kekoa-input-color);
}
.cq-message-container {
  background: var(--kekoa-input-bg) !important;
}

/* Hide specific ChartIQ settings sections - Updated with correct DOM structure */

/* Hide Additional Features section and its items */
cq-menu-dropdown
  .content
  .heading-item:has(cq-heading[text="Additional Features"]),
cq-menu-dropdown .content .heading-item:has(h4:contains("Additional Features")),
cq-menu-dropdown .content li:has(span[id="label_Shortcuts/Hotkeys"]),
cq-menu-dropdown .content li:has(span[id="label_ImportData"]) {
  display: none !important;
}

/* Hide Themes section and its items */
cq-menu-dropdown .content .heading-item:has(cq-heading[text="Themes"]),
cq-menu-dropdown .content .heading-item:has(h4:contains("Themes")),
cq-menu-dropdown .content li:has(cq-themes),
cq-menu-dropdown .content li:has(span[id="label_NewTheme"]) {
  display: none !important;
}

/* Hide Locale section and its items */
cq-menu-dropdown .content .heading-item:has(cq-heading[text="Locale"]),
cq-menu-dropdown .content .heading-item:has(h4:contains("Locale")),
cq-menu-dropdown .content li:has(span[id="label_ChangeTimezone"]),
cq-menu-dropdown .content li:has(span[id="label_ChangeLanguage"]) {
  display: none !important;
}

/* Hide Preferences section and its items */
cq-menu-dropdown .content .heading-item:has(cq-heading[text="Preferences"]),
cq-menu-dropdown .content .heading-item:has(h4:contains("Preferences")),
cq-menu-dropdown .content li:has(span[id="label_DrawingTools"]) {
  display: none !important;
}

/* Fallback approach using nth-child based on the DOM structure */
/* Hide Additional Features (heading at position 12) and related items */
cq-menu-dropdown .content > li:nth-child(12), /* Additional Features heading */
cq-menu-dropdown .content > li:nth-child(13), /* Shortcuts item */
cq-menu-dropdown .content > li:nth-child(14), /* Import Data item */
cq-menu-dropdown .content > li:nth-child(15), /* Separator after Additional Features */

/* Hide Themes (heading at position 16) and related items */
cq-menu-dropdown .content > li:nth-child(16), /* Themes heading */
cq-menu-dropdown .content > li:nth-child(17), /* Theme template item */
cq-menu-dropdown .content > li:nth-child(18), /* Separator */
cq-menu-dropdown .content > li:nth-child(19), /* New Theme item */
cq-menu-dropdown .content > li:nth-child(20), /* Separator after Themes */

/* Hide Locale (heading at position 21) and related items */
cq-menu-dropdown .content > li:nth-child(21), /* Locale heading */
cq-menu-dropdown .content > li:nth-child(22), /* Change Timezone item */
cq-menu-dropdown .content > li:nth-child(23), /* English item */
cq-menu-dropdown .content > li:nth-child(24), /* Separator after Locale */

/* Hide Preferences (heading at position 25) and related items */
cq-menu-dropdown .content > li:nth-child(25), /* Preferences heading */
cq-menu-dropdown .content > li:nth-child(26)  /* Drawing Tools item */ {
  display: none !important;
}

/* Alternative approach targeting by ID attributes */
li:has(span[id*="Shortcuts"]),
li:has(span[id*="ImportData"]),
li:has(span[id*="NewTheme"]),
li:has(span[id*="ChangeTimezone"]),
li:has(span[id*="ChangeLanguage"]),
li:has(span[id*="DrawingTools"]),
li:has(cq-themes),
li:has(cq-heading[text="Additional Features"]),
li:has(cq-heading[text="Themes"]),
li:has(cq-heading[text="Locale"]),
li:has(cq-heading[text="Preferences"]) {
  display: none !important;
}

/* Remove borders from ChartIQ settings menu - Updated with correct positions */
/* Based on the DOM structure, hide separators at specific positions after hiding sections */
/* Hide separators that come after the hidden sections */
cq-menu-dropdown .content > li:nth-child(7),  /* First separator after chart preferences */
cq-menu-dropdown .content > li:nth-child(11), /* Second separator after Y-axis preferences */
cq-menu-dropdown .content > li:nth-child(15), /* Separator after Additional Features */
cq-menu-dropdown .content > li:nth-child(18), /* Separator after Themes partial */
cq-menu-dropdown .content > li:nth-child(20), /* Separator after Themes */
cq-menu-dropdown .content > li:nth-child(24), /* Separator after Locale */
/* Keep the separators at positions 7 and 11 (first two) but hide the rest */
cq-menu-dropdown .content > li:nth-child(n+15).separator-item {
  display: none !important;
}

/* More specific targeting - hide all separators except the first two */
cq-menu-dropdown
  .content
  li.separator-item:not(:nth-child(7)):not(:nth-child(11)) {
  display: none !important;
}

/* Remove borders from heading items */
cq-menu-dropdown .content .heading-item,
cq-menu-dropdown .content .heading-item h4,
cq-menu-dropdown .content .heading-item cq-heading {
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
}

/* Remove any remaining borders from the dropdown content */
cq-menu-dropdown .content,
cq-menu-dropdown ul.content {
  border: none !important;
}

/* Remove borders from individual menu items */
cq-menu-dropdown .content .item,
cq-menu-dropdown .content li.item {
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
}

/* Hide all remaining separator lines in the preferences menu */
cq-menu-dropdown .content li.separator-item hr,
cq-menu-dropdown .content .separator-item hr,
cq-menu-dropdown .content hr {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Completely hide ALL separator items and hr elements in ChartIQ preferences menu */
cq-menu-dropdown .content li.separator-item,
cq-menu-dropdown .content .separator-item,
cq-menu-dropdown ul.content li.separator-item,
cq-menu-dropdown ul.content .separator-item {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Hide all hr elements inside the preferences dropdown */
cq-menu-dropdown hr,
cq-menu-dropdown .content hr,
cq-menu-dropdown ul.content hr,
cq-menu-dropdown li hr {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Nuclear option - hide any element with role="separator" */
cq-menu-dropdown [role="separator"],
cq-menu-dropdown .content [role="separator"],
cq-menu-dropdown ul.content [role="separator"] {
  display: none !important;
}

/* Simple and direct approach - hide ALL separators in ChartIQ preferences */
cq-menu-dropdown li.separator-item {
  display: none !important;
}

cq-menu-dropdown hr {
  display: none !important;
}
li.separator-item.item {
  display: none;
}
[feature="extendedhours"] > div {
  border-bottom: 1px solid;
}

[text="Y-Axis Preferences"] {
  margin-top: 10px !important;
}