/* ================================================================
   WOI Chart Toolbar Premium v1
   - No extra rows
   - Flat terminal appearance
   - Desktop grouped toolbar
   - Mobile single-row horizontal drawing toolbar
   ================================================================ */

/* ------------------------------------------------
   Shared visual tokens
   ------------------------------------------------ */
:root {
  --woi-tool-bg: rgba(15, 23, 38, 0.88);
  --woi-tool-bg-hover: rgba(24, 35, 55, 0.96);
  --woi-tool-border: rgba(148, 163, 184, 0.11);
  --woi-tool-border-hover: rgba(96, 165, 250, 0.28);
  --woi-tool-text: rgba(203, 213, 225, 0.84);
  --woi-tool-text-strong: rgba(241, 245, 249, 0.97);

  --woi-active-bg: rgba(37, 99, 235, 0.22);
  --woi-active-border: rgba(96, 165, 250, 0.46);
  --woi-active-text: #dbeafe;

  --woi-danger-bg: rgba(127, 29, 29, 0.12);
  --woi-danger-border: rgba(248, 113, 113, 0.20);
  --woi-danger-text: #fca5a5;

  --woi-separator: rgba(148, 163, 184, 0.16);
}

/* ------------------------------------------------
   Overlay container
   ------------------------------------------------ */
.overlaybox {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  padding-bottom: 3px !important;
  margin-bottom: 2px !important;
}

.overlaybox > .lbl {
  margin-bottom: 6px !important;
  color: rgba(226, 232, 240, 0.88) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.woi-overlay-controls {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

/* ------------------------------------------------
   Overlay chips: flat premium state
   ------------------------------------------------ */
.woi-chip-group {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.woi-chip-group label {
  min-height: 28px !important;
  padding: 5px 10px !important;
  border: 1px solid var(--woi-tool-border) !important;
  border-radius: 8px !important;
  background: var(--woi-tool-bg) !important;
  color: var(--woi-tool-text) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease !important;
}

.woi-chip-group label:hover {
  background: var(--woi-tool-bg-hover) !important;
  border-color: var(--woi-tool-border-hover) !important;
  color: var(--woi-tool-text-strong) !important;
}

.woi-chip-group label:has(input[type="checkbox"]:checked) {
  background: var(--woi-active-bg) !important;
  border-color: var(--woi-active-border) !important;
  color: var(--woi-active-text) !important;
  box-shadow: none !important;
}

/* ------------------------------------------------
   Chart / Indicators triggers
   ------------------------------------------------ */
.woi-indicator-trigger {
  min-height: 30px !important;
  padding: 6px 11px !important;
  border-radius: 8px !important;
  border: 1px solid var(--woi-tool-border) !important;
  background: var(--woi-tool-bg) !important;
  color: var(--woi-tool-text) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.woi-indicator-trigger:hover {
  border-color: var(--woi-tool-border-hover) !important;
  background: var(--woi-tool-bg-hover) !important;
  color: var(--woi-tool-text-strong) !important;
}

.woi-indicator-menu[open] .woi-indicator-trigger {
  background: var(--woi-active-bg) !important;
  border-color: var(--woi-active-border) !important;
  color: var(--woi-active-text) !important;
  box-shadow: none !important;
}

/* ------------------------------------------------
   Drawing toolbar outer row
   ------------------------------------------------ */
.fibo-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 7px !important;
}

.woi-drawing-toolbar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  min-width: 0 !important;
}

/* ------------------------------------------------
   Drawing buttons
   ------------------------------------------------ */
.woi-draw-btn {
  flex: 0 0 auto !important;
  min-height: 29px !important;
  height: 29px !important;
  padding: 5px 9px !important;

  border-radius: 8px !important;
  border: 1px solid var(--woi-tool-border) !important;
  background: var(--woi-tool-bg) !important;
  color: var(--woi-tool-text) !important;
  box-shadow: none !important;

  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  transform: none !important;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease !important;
}

.woi-draw-btn:hover {
  background: var(--woi-tool-bg-hover) !important;
  border-color: var(--woi-tool-border-hover) !important;
  color: var(--woi-tool-text-strong) !important;
  transform: none !important;
}

.woi-draw-btn.is-active,
#btn-draw-pan.is-active,
#btn-draw-zoom.is-active {
  background: var(--woi-active-bg) !important;
  border-color: var(--woi-active-border) !important;
  color: var(--woi-active-text) !important;
  box-shadow: none !important;
}

/* ------------------------------------------------
   Visual groups — no new DOM and no new rows

   Navigation:
   Select Inspect Pan Zoom Reset

   Drawing:
   H-Line Zone Measure Trend Fibonacci

   Edit:
   Undo Clear

   View:
   Focus Legend

   Range:
   6M 1Y ALL
   ------------------------------------------------ */

/* Begin Drawing group after Reset */
#btn-draw-hline {
  margin-left: 10px !important;
  position: relative;
}

#btn-draw-hline::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 5px;
  bottom: 5px;
  width: 1px;
  background: var(--woi-separator);
}

/* Begin Edit group */
#btn-draw-undo {
  margin-left: 10px !important;
  position: relative;
}

#btn-draw-undo::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 5px;
  bottom: 5px;
  width: 1px;
  background: var(--woi-separator);
}

/* View controls */
#btn-chart-focus {
  margin-left: 5px !important;
  position: relative;
}

#btn-chart-focus::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 5px;
  bottom: 5px;
  width: 1px;
  background: var(--woi-separator);
}

#btn-toggle-legend {
  color: rgba(203, 213, 225, 0.76) !important;
}

/* Destructive action */
#btn-fibo-clear {
  color: var(--woi-danger-text) !important;
  border-color: var(--woi-danger-border) !important;
  background: var(--woi-danger-bg) !important;
}

#btn-fibo-clear:hover {
  color: #fecaca !important;
  border-color: rgba(248, 113, 113, 0.34) !important;
  background: rgba(127, 29, 29, 0.22) !important;
}

/* Undo stays neutral */
#btn-draw-undo {
  color: rgba(203, 213, 225, 0.82) !important;
}

/* Reset is navigation, not danger */
#btn-draw-reset {
  color: rgba(203, 213, 225, 0.82) !important;
}

/* ------------------------------------------------
   Range controls created by drawing_tools.js

   IDs currently used by the installed range buttons.
   ------------------------------------------------ */
#woi-range-6m,
#woi-range-1y,
#woi-range-all {
  flex: 0 0 auto !important;
  min-height: 29px !important;
  height: 29px !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  border: 1px solid var(--woi-tool-border) !important;
  background: var(--woi-tool-bg) !important;
  color: rgba(203, 213, 225, 0.82) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

#woi-range-6m {
  margin-left: 10px !important;
}

#woi-range-6m:hover,
#woi-range-1y:hover,
#woi-range-all:hover {
  background: var(--woi-tool-bg-hover) !important;
  border-color: var(--woi-tool-border-hover) !important;
  color: var(--woi-tool-text-strong) !important;
}

/* Support either active class used by current/future JS */
#woi-range-6m.is-active,
#woi-range-1y.is-active,
#woi-range-all.is-active,
#woi-range-6m.active,
#woi-range-1y.active,
#woi-range-all.active,
#woi-range-6m[aria-pressed="true"],
#woi-range-1y[aria-pressed="true"],
#woi-range-all[aria-pressed="true"] {
  background: var(--woi-active-bg) !important;
  border-color: var(--woi-active-border) !important;
  color: var(--woi-active-text) !important;
}

/* ------------------------------------------------
   Desktop protection
   Keep the toolbar on one line.
   If width becomes tight, it can scroll instead of wrapping.
   ------------------------------------------------ */
@media (min-width: 809px) {
  .fibo-row {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .fibo-row::-webkit-scrollbar {
    display: none !important;
  }

  .woi-drawing-toolbar {
    width: max-content !important;
  }
}

/* ------------------------------------------------
   Mobile
   Preserve current two-row structure:
   1) Overlays / Chart / Indicators
   2) Drawing / View / Range

   Drawing tools stay one horizontal row.
   ------------------------------------------------ */
@media (max-width: 808px) {
  .overlaybox {
    margin-bottom: 3px !important;
    padding: 4px 0 !important;
  }

  .overlaybox > .lbl {
    margin-bottom: 5px !important;
    font-size: 12px !important;
  }

  .woi-overlay-controls {
    align-items: center !important;
    gap: 5px !important;
  }

  .woi-chip-group {
    gap: 5px !important;
  }

  .woi-chip-group label {
    min-height: 29px !important;
    padding: 5px 9px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
  }

  .woi-indicator-trigger {
    min-height: 31px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  .fibo-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;

    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;

    gap: 4px !important;
    margin: 0 !important;
    padding: 1px 0 3px !important;

    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
  }

  .fibo-row::-webkit-scrollbar {
    display: none !important;
  }


  .fibo-row button,
  .woi-draw-btn,
  #btn-fibo-clear {
    flex: 0 0 auto !important;
    min-height: 27px !important;
    height: 27px !important;
    padding: 4px 8px !important;
    border-radius: 7px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  /* Mobile uses whitespace grouping instead of tall separator lines */
  #btn-draw-hline,
  #btn-draw-undo,
  #btn-chart-focus,
  #woi-range-6m {
    margin-left: 7px !important;
  }

  #btn-draw-hline::before,
  #btn-draw-undo::before,
  #btn-chart-focus::before {
    display: none !important;
  }

  #fibo-status {
    flex: 0 0 auto !important;
    font-size: 9px !important;
  }
}

/* Very small phones: retain readability, do not shrink to 8px buttons. */
@media (max-width: 520px) {
  .woi-chip-group label {
    min-height: 28px !important;
    padding: 5px 8px !important;
    font-size: 10px !important;
  }

  .fibo-row button,
  .woi-draw-btn,
  #btn-fibo-clear {
    min-height: 26px !important;
    height: 26px !important;
    padding: 4px 7px !important;
    font-size: 10px !important;
  }
}


/* ================================================================
   WOI toolbar icon system v2
   ================================================================ */

/* Slim unified toolbar surface */
.fibo-row {
  min-height: 37px !important;
  padding: 3px 5px !important;

  border: 1px solid rgba(148, 163, 184, 0.09) !important;
  border-radius: 9px !important;
  background: rgba(8, 14, 24, 0.42) !important;
}

/* Draw label is visually secondary */
.fibo-row .woi-draw-label {
  flex: 0 0 auto !important;
  margin: 0 3px 0 0 !important;
  color: rgba(148, 163, 184, 0.72) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

/* Unified icon + label geometry */
.woi-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}

.woi-toolbar-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;

  color: currentColor !important;
}

.woi-toolbar-icon svg {
  display: block !important;
  width: 14px !important;
  height: 14px !important;

  margin: 0 !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.woi-toolbar-label {
  display: inline-block !important;
  line-height: 1 !important;
}

/* Make the active item the clear visual anchor */
.woi-draw-btn.is-active {
  background: rgba(37, 99, 235, 0.30) !important;
  border-color: rgba(96, 165, 250, 0.58) !important;
  color: #eff6ff !important;
}

/* Slightly quieter non-primary controls */
#btn-chart-focus,
#btn-toggle-legend,
#woi-range-6m,
#woi-range-1y,
#woi-range-all {
  background: rgba(15, 23, 38, 0.68) !important;
  color: rgba(203, 213, 225, 0.76) !important;
}

/* Default 1Y state */
#woi-range-1y.is-active,
#woi-range-1y[aria-pressed="true"] {
  background: rgba(37, 99, 235, 0.28) !important;
  border-color: rgba(96, 165, 250, 0.52) !important;
  color: #dbeafe !important;
}

/* More obvious but still subtle group separators */
#btn-draw-hline::before,
#btn-draw-undo::before,
#btn-chart-focus::before {
  top: 3px !important;
  bottom: 3px !important;
  background: rgba(148, 163, 184, 0.22) !important;
}

/* Remove old emoji spacing rules */
.woi-draw-btn span {
  margin-right: 0 !important;
}

/* Clear icon follows danger state */
#btn-fibo-clear .woi-toolbar-icon {
  color: #f87171 !important;
}

/* Chart / indicators align with overlay chip height */
.woi-indicator-trigger {
  height: 30px !important;
}

/* Keep the overlay container visually lighter */
.woi-overlay-controls {
  padding: 4px 5px !important;
  border: 1px solid rgba(148, 163, 184, 0.08) !important;
  border-radius: 9px !important;
  background: rgba(8, 14, 24, 0.34) !important;
}

/* Mobile: preserve a compact one-row drawing strip */
@media (max-width: 808px) {
  .fibo-row {
    min-height: 34px !important;
    padding: 3px !important;
    border-radius: 8px !important;
  }

  .fibo-row .woi-draw-label {
    position: sticky !important;
    left: 0 !important;
    z-index: 3 !important;

    min-height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;

    padding: 0 5px !important;
    margin-right: 2px !important;

    background: rgba(8, 14, 24, 0.96) !important;
  }

  .woi-icon-btn {
    gap: 4px !important;
  }

  .woi-toolbar-icon,
  .woi-toolbar-icon svg {
    width: 12px !important;
    height: 12px !important;
  }

  .woi-toolbar-icon {
    flex-basis: 12px !important;
  }

  .woi-toolbar-label {
    font-size: 9px !important;
  }

  .woi-overlay-controls {
    padding: 5px !important;
  }
}

/* Very narrow phones: show icons while keeping essential text */
@media (max-width: 430px) {
  #btn-draw-inspect .woi-toolbar-label,
  #btn-draw-measure .woi-toolbar-label,
  #btn-toggle-legend .woi-toolbar-label {
    display: none !important;
  }

  #btn-draw-inspect,
  #btn-draw-measure,
  #btn-toggle-legend {
    width: 29px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}


/* Narrow phones: keep all labels readable instead of overlapping. */
@media (max-width: 430px) {
  .fibo-row #btn-draw-inspect .woi-toolbar-label,
  .fibo-row #btn-draw-measure .woi-toolbar-label,
  .fibo-row #btn-toggle-legend .woi-toolbar-label {
    display: inline-block !important;
  }

  .fibo-row #btn-draw-inspect,
  .fibo-row #btn-draw-measure,
  .fibo-row #btn-toggle-legend {
    width: auto !important;
    min-width: max-content !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}


/* Narrow screens: compact labels just enough to fit in two rows */
@media (max-width: 520px) {

  .fibo-row {
    gap: 3px !important;
    padding: 4px !important;
  }

  .fibo-row button,
  .fibo-row .woi-draw-btn,
  .fibo-row #btn-fibo-clear,
  .fibo-row #btn-chart-focus,
  .fibo-row #btn-toggle-legend,
  .fibo-row #woi-range-6m,
  .fibo-row #woi-range-1y,
  .fibo-row #woi-range-all {
    height: 27px !important;
    min-height: 27px !important;
    padding: 4px 7px !important;
    font-size: 9px !important;
  }

  .fibo-row .woi-toolbar-label {
    font-size: 9px !important;
  }
}

/* Very narrow phones: hide only secondary text, never the controls */
@media (max-width: 390px) {

  #btn-draw-inspect .woi-toolbar-label,
  #btn-draw-measure .woi-toolbar-label,
  #btn-toggle-legend .woi-toolbar-label {
    display: none !important;
  }

  #btn-draw-inspect,
  #btn-draw-measure,
  #btn-toggle-legend {
    width: 28px !important;
    min-width: 28px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}



/* ================================================================
   WOI Overlay + Toolbar Polish v5
   Chart title and chart height remain untouched.
   ================================================================ */

/* ------------------------------------------------
   Overlay area — desktop
   ------------------------------------------------ */
.overlaybox {
  margin-bottom: 4px !important;
}

.woi-overlay-controls {
  display: flex !important;
  align-items: center !important;
  align-content: center !important;
  flex-wrap: wrap !important;

  min-height: 42px !important;
  padding: 5px 7px !important;
  gap: 5px !important;

  border-radius: 8px !important;
  border-color: rgba(148, 163, 184, 0.075) !important;
  background: rgba(8, 14, 24, 0.24) !important;
}

/* Checklist occupies only the space its chips need. */
.woi-overlay-controls .overlays-checklist {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: none !important;
}

/* Smaller, calmer overlay chips. */
.woi-chip-group {
  gap: 5px !important;
}

.woi-chip-group label {
  min-height: 27px !important;
  height: 27px !important;

  padding: 4px 9px !important;
  border-radius: 7px !important;

  border-color: rgba(148, 163, 184, 0.085) !important;
  background: rgba(15, 23, 38, 0.74) !important;
  color: rgba(203, 213, 225, 0.78) !important;

  font-size: 10px !important;
  font-weight: 600 !important;
}

.woi-chip-group label:hover {
  background: rgba(24, 35, 55, 0.88) !important;
  border-color: rgba(96, 165, 250, 0.22) !important;
  color: rgba(241, 245, 249, 0.96) !important;
}

.woi-chip-group label:has(input[type="checkbox"]:checked) {
  background: rgba(37, 99, 235, 0.17) !important;
  border-color: rgba(96, 165, 250, 0.38) !important;
  color: #dbeafe !important;
}

/* Chart and Indicators should feel like part of the same toolbar. */
.woi-overlay-controls .woi-indicator-menu {
  align-self: center !important;
}

.woi-overlay-controls .woi-indicator-trigger {
  min-height: 29px !important;
  height: 29px !important;

  padding: 5px 10px !important;
  border-radius: 7px !important;

  font-size: 10px !important;
  font-weight: 600 !important;
}

/* Small visual separation before Chart type. */
.woi-chart-type-menu {
  margin-left: 4px !important;
  padding-left: 9px !important;
  position: relative !important;
}

.woi-chart-type-menu::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 5px;
  bottom: 5px;
  width: 1px;
  background: rgba(148, 163, 184, 0.16);
}


/* ------------------------------------------------
   Drawing toolbar — stronger group hierarchy
   ------------------------------------------------ */
.fibo-row {
  background: rgba(8, 14, 24, 0.30) !important;
  border-color: rgba(148, 163, 184, 0.075) !important;
}

.fibo-row .woi-draw-label {
  margin-right: 6px !important;
}

/* Navigation → Drawing */
#btn-draw-hline {
  margin-left: 14px !important;
}

/* Drawing → Edit */
#btn-draw-undo {
  margin-left: 14px !important;
}

/* Edit → View */
#btn-chart-focus {
  margin-left: 14px !important;
}

/* View → Range */
#woi-range-6m {
  margin-left: 14px !important;
}

/* Clearer, but still subtle separators. */
#btn-draw-hline::before,
#btn-draw-undo::before,
#btn-chart-focus::before {
  left: -9px !important;
  top: 4px !important;
  bottom: 4px !important;
  background: rgba(148, 163, 184, 0.24) !important;
}

/* Range separator is attached to the first range button. */
#woi-range-6m {
  position: relative !important;
}

#woi-range-6m::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(148, 163, 184, 0.24);
}

/* View and range controls should remain visually secondary. */
#btn-chart-focus,
#btn-toggle-legend,
#woi-range-6m,
#woi-range-1y,
#woi-range-all {
  background: rgba(15, 23, 38, 0.62) !important;
  border-color: rgba(148, 163, 184, 0.085) !important;
  color: rgba(203, 213, 225, 0.70) !important;
}

#btn-chart-focus:hover,
#btn-toggle-legend:hover,
#woi-range-6m:hover,
#woi-range-1y:hover,
#woi-range-all:hover {
  background: rgba(24, 35, 55, 0.88) !important;
  color: rgba(241, 245, 249, 0.94) !important;
}

#woi-range-6m.is-active,
#woi-range-1y.is-active,
#woi-range-all.is-active,
#woi-range-6m[aria-pressed="true"],
#woi-range-1y[aria-pressed="true"],
#woi-range-all[aria-pressed="true"] {
  background: rgba(37, 99, 235, 0.24) !important;
  border-color: rgba(96, 165, 250, 0.46) !important;
  color: #dbeafe !important;
}


/* ------------------------------------------------
   Mobile overlay compaction
   ------------------------------------------------ */
@media (max-width: 808px) {
  .overlaybox {
    margin-bottom: 4px !important;
  }

  .woi-overlay-controls {
    min-height: 0 !important;
    padding: 5px !important;
    gap: 5px !important;
    background: rgba(8, 14, 24, 0.28) !important;
  }

  .woi-chip-group {
    gap: 4px !important;
  }

  .woi-chip-group label {
    min-height: 29px !important;
    height: 29px !important;

    padding: 5px 9px !important;
    border-radius: 7px !important;

    font-size: 10px !important;
    line-height: 1 !important;
  }

  /* Chart and Indicators stay on their current second line. */
  .woi-chart-type-menu {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .woi-chart-type-menu::before {
    display: none !important;
  }

  .woi-overlay-controls .woi-indicator-trigger {
    min-height: 31px !important;
    height: 31px !important;
    padding: 6px 11px !important;
    font-size: 10px !important;
  }

  /*
   * Mobile draw toolbar already wraps to multiple lines.
   * Remove desktop group margins and separators to avoid wasted width.
   */
  .fibo-row #btn-draw-hline,
  .fibo-row #btn-draw-undo,
  .fibo-row #btn-chart-focus,
  .fibo-row #woi-range-6m {
    margin-left: 0 !important;
  }

  .fibo-row #btn-draw-hline::before,
  .fibo-row #btn-draw-undo::before,
  .fibo-row #btn-chart-focus::before,
  .fibo-row #woi-range-6m::before {
    display: none !important;
    content: none !important;
  }
}


/* ================================================================
   WOI Semantic Toolbar Colors v6
   Color is concentrated on icons and important controls.
   Layout, chart title and chart height remain untouched.
   ================================================================ */

/* ------------------------------------------------
   Stronger base icon rendering
   ------------------------------------------------ */
.woi-toolbar-icon {
  opacity: 0.96 !important;
  filter: saturate(1.12) !important;
}

.woi-toolbar-icon svg {
  stroke-width: 1.9 !important;
}

/* Text remains neutral to prevent visual noise. */
.woi-icon-btn .woi-toolbar-label {
  color: rgba(203, 213, 225, 0.82) !important;
}

/* Hover slightly strengthens both icon and label. */
.woi-icon-btn:hover .woi-toolbar-icon {
  filter: saturate(1.25) brightness(1.10) !important;
}

.woi-icon-btn:hover .woi-toolbar-label {
  color: rgba(248, 250, 252, 0.96) !important;
}


/* ------------------------------------------------
   Navigation tools
   ------------------------------------------------ */

/* Select — primary blue */
#btn-draw-select .woi-toolbar-icon {
  color: #60a5fa !important;
}

/* Inspect — violet */
#btn-draw-inspect .woi-toolbar-icon {
  color: #c084fc !important;
}

/* Pan — green */
#btn-draw-pan .woi-toolbar-icon {
  color: #4ade80 !important;
}

/* Zoom — yellow */
#btn-draw-zoom .woi-toolbar-icon {
  color: #facc15 !important;
}

/* Reset — cyan */
#btn-draw-reset .woi-toolbar-icon {
  color: #22d3ee !important;
}


/* ------------------------------------------------
   Drawing tools
   ------------------------------------------------ */

/* Horizontal level — cyan */
#btn-draw-hline .woi-toolbar-icon {
  color: #38bdf8 !important;
}

/* Zone — violet */
#btn-draw-zone .woi-toolbar-icon {
  color: #a78bfa !important;
}

/* Measure — amber */
#btn-draw-measure .woi-toolbar-icon {
  color: #fbbf24 !important;
}

/* Trend — rose */
#btn-draw-trend .woi-toolbar-icon {
  color: #fb7185 !important;
}

/* Fibonacci — teal */
#btn-draw-fibo .woi-toolbar-icon {
  color: #2dd4bf !important;
}


/* ------------------------------------------------
   Edit and view controls
   ------------------------------------------------ */

/* Undo — amber */
#btn-draw-undo .woi-toolbar-icon {
  color: #f59e0b !important;
}

/* Clear — red */
#btn-fibo-clear .woi-toolbar-icon {
  color: #f87171 !important;
}

/* Focus — blue */
#btn-chart-focus .woi-toolbar-icon {
  color: #60a5fa !important;
}

/* Legend — teal */
#btn-toggle-legend .woi-toolbar-icon {
  color: #2dd4bf !important;
}


/* ------------------------------------------------
   Active tool
   Active mode becomes one strong, consistent state.
   ------------------------------------------------ */
.woi-draw-btn.is-active {
  background: rgba(37, 99, 235, 0.30) !important;
  border-color: rgba(96, 165, 250, 0.62) !important;
  color: #f8fafc !important;
  box-shadow:
    inset 0 0 0 1px rgba(147, 197, 253, 0.08) !important;
}

.woi-draw-btn.is-active .woi-toolbar-icon,
.woi-draw-btn.is-active .woi-toolbar-label {
  color: #f8fafc !important;
}

.woi-draw-btn.is-active .woi-toolbar-icon {
  filter: none !important;
}


/* ------------------------------------------------
   Chart type control — cyan identity
   ------------------------------------------------ */
.woi-chart-type-menu .woi-indicator-trigger {
  background: rgba(8, 47, 73, 0.28) !important;
  border-color: rgba(34, 211, 238, 0.23) !important;
  color: rgba(207, 250, 254, 0.90) !important;
}

.woi-chart-type-menu .woi-chart-type-icon {
  color: #22d3ee !important;
}

.woi-chart-type-menu .woi-indicator-trigger:hover {
  background: rgba(8, 78, 102, 0.34) !important;
  border-color: rgba(34, 211, 238, 0.46) !important;
  color: #ecfeff !important;
}

.woi-chart-type-menu[open] .woi-indicator-trigger {
  background: rgba(8, 145, 178, 0.20) !important;
  border-color: rgba(34, 211, 238, 0.58) !important;
  color: #ecfeff !important;
}


/* ------------------------------------------------
   Indicators control — more prominent purple identity
   ------------------------------------------------ */
.woi-indicators-menu .woi-indicator-trigger {
  position: relative !important;

  background:
    linear-gradient(
      135deg,
      rgba(88, 28, 135, 0.30),
      rgba(76, 29, 149, 0.20)
    ) !important;

  border-color: rgba(192, 132, 252, 0.34) !important;
  color: rgba(243, 232, 255, 0.94) !important;

  box-shadow:
    inset 0 0 0 1px rgba(216, 180, 254, 0.04) !important;
}

.woi-indicators-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 16px !important;
  height: 16px !important;

  color: #d946ef !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  text-shadow: 0 0 8px rgba(217, 70, 239, 0.26) !important;
}

.woi-indicators-label {
  color: rgba(243, 232, 255, 0.94) !important;
}

.woi-indicators-menu .woi-indicator-arrow {
  color: rgba(216, 180, 254, 0.72) !important;
}

.woi-indicators-menu .woi-indicator-trigger:hover {
  background:
    linear-gradient(
      135deg,
      rgba(126, 34, 206, 0.36),
      rgba(109, 40, 217, 0.28)
    ) !important;

  border-color: rgba(216, 180, 254, 0.56) !important;
  color: #faf5ff !important;
}

.woi-indicators-menu[open] .woi-indicator-trigger {
  background:
    linear-gradient(
      135deg,
      rgba(147, 51, 234, 0.36),
      rgba(126, 34, 206, 0.28)
    ) !important;

  border-color: rgba(216, 180, 254, 0.68) !important;
  color: #faf5ff !important;

  box-shadow:
    inset 0 0 0 1px rgba(233, 213, 255, 0.07),
    0 0 12px rgba(168, 85, 247, 0.10) !important;
}


/* ------------------------------------------------
   Indicator dropdown options
   ------------------------------------------------ */
.woi-indicators-menu .woi-indicator-popover {
  border-color: rgba(192, 132, 252, 0.24) !important;
}

.woi-indicators-menu .woi-indicator-title {
  color: rgba(243, 232, 255, 0.96) !important;
}

.woi-indicators-menu .woi-indicator-checklist label:hover {
  background: rgba(126, 34, 206, 0.12) !important;
}

.woi-indicators-menu
.woi-indicator-checklist
label:has(input[type="checkbox"]:checked) {
  background: rgba(126, 34, 206, 0.16) !important;
  color: rgba(250, 245, 255, 0.96) !important;
}

.woi-indicators-menu
.woi-indicator-checklist
input[type="checkbox"] {
  accent-color: #a855f7 !important;
}


/* ------------------------------------------------
   Overlay active chips retain blue identity but gain
   a little more saturation.
   ------------------------------------------------ */
.woi-chip-group label:has(input[type="checkbox"]:checked) {
  background:
    linear-gradient(
      135deg,
      rgba(30, 64, 175, 0.30),
      rgba(37, 99, 235, 0.20)
    ) !important;

  border-color: rgba(96, 165, 250, 0.46) !important;
  color: #eff6ff !important;
}


/* ------------------------------------------------
   Range active state
   ------------------------------------------------ */
#woi-range-6m.is-active,
#woi-range-1y.is-active,
#woi-range-all.is-active,
#woi-range-6m[aria-pressed="true"],
#woi-range-1y[aria-pressed="true"],
#woi-range-all[aria-pressed="true"] {
  background: rgba(37, 99, 235, 0.32) !important;
  border-color: rgba(96, 165, 250, 0.58) !important;
  color: #eff6ff !important;
}


/* ------------------------------------------------
   Mobile adjustments
   ------------------------------------------------ */
@media (max-width: 808px) {
  .woi-indicators-menu .woi-indicator-trigger {
    min-width: 104px !important;
  }

  .woi-indicators-icon {
    width: 15px !important;
    height: 15px !important;
    font-size: 17px !important;
  }

  .woi-toolbar-icon {
    opacity: 1 !important;
  }

  .woi-toolbar-icon svg {
    stroke-width: 2 !important;
  }
}


/* ================================================================
   WOI Grouped Indicator Manager v7
   ================================================================ */

.woi-indicators-menu .woi-indicator-popover {
  width: 268px !important;
  max-height: min(680px, calc(100vh - 150px)) !important;
  overflow-y: auto !important;
  padding: 10px !important;

  scrollbar-width: thin !important;
  scrollbar-color:
    rgba(168, 85, 247, 0.34)
    transparent !important;
}

.woi-indicators-menu .woi-indicator-popover::-webkit-scrollbar {
  width: 5px !important;
}

.woi-indicators-menu .woi-indicator-popover::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(168, 85, 247, 0.34) !important;
}

.woi-indicator-groups {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.woi-indicator-group {
  padding: 7px 0 5px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.10) !important;
}

.woi-indicator-group:first-child {
  padding-top: 2px !important;
  border-top: 0 !important;
}

.woi-indicator-group-title {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;

  margin: 0 4px 5px !important;
  color: rgba(216, 180, 254, 0.82) !important;

  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
}

.woi-indicator-group-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 14px !important;
  height: 14px !important;

  color: #c084fc !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.woi-indicator-group .woi-indicator-checklist {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.woi-indicator-group .woi-indicator-checklist label {
  display: flex !important;
  align-items: center !important;

  min-height: 31px !important;
  margin: 0 !important;
  padding: 6px 8px !important;

  border: 1px solid transparent !important;
  border-radius: 7px !important;

  background: transparent !important;
  color: rgba(203, 213, 225, 0.82) !important;

  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;

  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease !important;
}

.woi-indicator-group .woi-indicator-checklist label:hover {
  border-color: rgba(192, 132, 252, 0.14) !important;
  background: rgba(126, 34, 206, 0.10) !important;
  color: rgba(250, 245, 255, 0.96) !important;
}

.woi-indicator-group
.woi-indicator-checklist
label:has(input[type="checkbox"]:checked) {
  border-color: rgba(192, 132, 252, 0.20) !important;
  background:
    linear-gradient(
      90deg,
      rgba(126, 34, 206, 0.20),
      rgba(88, 28, 135, 0.10)
    ) !important;
  color: #faf5ff !important;
}

.woi-indicator-group
.woi-indicator-checklist
input[type="checkbox"] {
  flex: 0 0 auto !important;

  width: 13px !important;
  height: 13px !important;
  margin: 0 8px 0 0 !important;

  accent-color: #a855f7 !important;
}

/* Slightly different category identities. */
.woi-indicator-group:nth-child(1) .woi-indicator-group-icon {
  color: #f59e0b !important;
}

.woi-indicator-group:nth-child(2) .woi-indicator-group-icon {
  color: #d946ef !important;
}

.woi-indicator-group:nth-child(3) .woi-indicator-group-icon {
  color: #22d3ee !important;
}

.woi-indicator-group:nth-child(4) .woi-indicator-group-icon {
  color: #60a5fa !important;
}

.woi-indicator-group:nth-child(5) .woi-indicator-group-icon {
  color: #2dd4bf !important;
}

@media (max-width: 808px) {
  .woi-indicators-menu .woi-indicator-popover {
    width: min(276px, calc(100vw - 24px)) !important;
    max-height: min(620px, calc(100vh - 130px)) !important;
    right: auto !important;
    left: 0 !important;
  }

  .woi-indicator-group .woi-indicator-checklist label {
    min-height: 34px !important;
    padding: 7px 9px !important;
    font-size: 10px !important;
  }
}


/* ================================================================
   WOI Range + Legend Selected State v8
   Final state rules intentionally appear last in the stylesheet.
   ================================================================ */

/* Passive range controls */
#woi-range-6m,
#woi-range-1y,
#woi-range-all {
  background: rgba(15, 23, 38, 0.66) !important;
  border-color: rgba(148, 163, 184, 0.10) !important;
  color: rgba(203, 213, 225, 0.74) !important;
  box-shadow: none !important;
}

/* Exactly one selected range */
#woi-range-6m.is-active,
#woi-range-1y.is-active,
#woi-range-all.is-active,
#woi-range-6m.active,
#woi-range-1y.active,
#woi-range-all.active,
#woi-range-6m[aria-pressed="true"],
#woi-range-1y[aria-pressed="true"],
#woi-range-all[aria-pressed="true"] {
  background:
    linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.48),
      rgba(30, 64, 175, 0.34)
    ) !important;

  border-color: rgba(96, 165, 250, 0.76) !important;
  color: #eff6ff !important;

  box-shadow:
    inset 0 0 0 1px rgba(191, 219, 254, 0.10),
    0 0 9px rgba(37, 99, 235, 0.13) !important;
}

/* Legend visible: button asks user to hide it and remains passive. */
#btn-toggle-legend:not(.is-active):not(.active),
#btn-toggle-legend[aria-pressed="false"] {
  background: rgba(15, 23, 38, 0.66) !important;
  border-color: rgba(148, 163, 184, 0.10) !important;
  color: rgba(203, 213, 225, 0.76) !important;
  box-shadow: none !important;
}

/*
 * Legend hidden: button says "Show legend" and becomes selected.
 * This gives clear feedback that a view option is currently active.
 */
#btn-toggle-legend.is-active,
#btn-toggle-legend.active,
#btn-toggle-legend[aria-pressed="true"] {
  background:
    linear-gradient(
      135deg,
      rgba(13, 148, 136, 0.31),
      rgba(15, 118, 110, 0.21)
    ) !important;

  border-color: rgba(45, 212, 191, 0.58) !important;
  color: #ccfbf1 !important;

  box-shadow:
    inset 0 0 0 1px rgba(153, 246, 228, 0.07),
    0 0 9px rgba(20, 184, 166, 0.11) !important;
}

#btn-toggle-legend.is-active .woi-toolbar-icon,
#btn-toggle-legend.active .woi-toolbar-icon,
#btn-toggle-legend[aria-pressed="true"] .woi-toolbar-icon,
#btn-toggle-legend.is-active .woi-toolbar-label,
#btn-toggle-legend.active .woi-toolbar-label,
#btn-toggle-legend[aria-pressed="true"] .woi-toolbar-label {
  color: #ccfbf1 !important;
}

/* Keep selected state obvious on mobile as well. */
@media (max-width: 808px) {
  #woi-range-6m.is-active,
  #woi-range-1y.is-active,
  #woi-range-all.is-active,
  #woi-range-6m[aria-pressed="true"],
  #woi-range-1y[aria-pressed="true"],
  #woi-range-all[aria-pressed="true"] {
    border-color: rgba(96, 165, 250, 0.82) !important;
  }

  #btn-toggle-legend.is-active,
  #btn-toggle-legend[aria-pressed="true"] {
    border-color: rgba(45, 212, 191, 0.68) !important;
  }
}


/* ================================================================
   WOI Inline Overlay Label v10
   Final compact overlay-row rules.
   ================================================================ */

.overlaybox {
  margin: 0 0 3px !important;
  padding: 0 !important;
}

/* Safety: hide any legacy title that may remain elsewhere. */
.overlaybox > .lbl {
  display: none !important;
}

.woi-overlay-controls {
  display: flex !important;
  align-items: center !important;
  align-content: center !important;
  flex-wrap: nowrap !important;

  width: 100% !important;
  min-height: 45px !important;

  margin: 0 !important;
  padding: 5px 7px !important;
  gap: 5px !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

.woi-overlay-controls::-webkit-scrollbar {
  display: none !important;
}

.woi-overlay-inline-label {
  display: inline-flex !important;
  align-items: center !important;

  flex: 0 0 auto !important;

  margin: 0 3px 0 0 !important;
  padding: 0 1px !important;

  color: rgba(148, 163, 184, 0.72) !important;

  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;

  white-space: nowrap !important;
}

.woi-overlay-controls .overlays-checklist,
.woi-overlay-controls .woi-chip-group {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  flex-wrap: nowrap !important;
}

.woi-overlay-controls .woi-indicator-menu {
  flex: 0 0 auto !important;
}

/* Preserve readable wrapping on mobile. */
@media (max-width: 808px) {
  .woi-overlay-controls {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding: 5px !important;
  }

  .woi-overlay-inline-label {
    height: 29px !important;
    margin-right: 2px !important;
  }

  .woi-overlay-controls .overlays-checklist,
  .woi-overlay-controls .woi-chip-group {
    flex-wrap: wrap !important;
  }
}

/* ================================================================
   WOI Overlay Dropdown Visibility Fix v11
   Prevent Chart / Indicators popovers from being clipped.
   ================================================================ */

.overlaybox {
  position: relative !important;
  overflow: visible !important;
  z-index: 40 !important;
}

.woi-overlay-controls {
  position: relative !important;

  /* Absolute dropdowns must escape the toolbar container. */
  overflow: visible !important;

  z-index: 41 !important;
}

/* Dropdown hosts */
.woi-overlay-controls .woi-indicator-menu {
  position: relative !important;
  overflow: visible !important;
  z-index: 50 !important;
}

/* Open menu must sit above chart, drawing toolbar and event labels. */
.woi-overlay-controls .woi-indicator-menu[open] {
  z-index: 1005 !important;
}

.woi-overlay-controls .woi-indicator-popover {
  z-index: 1010 !important;
}

/* Ensure the following Draw row does not cover an open popover. */
.fibo-row {
  position: relative !important;
  z-index: 20 !important;
}

/* Chart itself remains below toolbar dropdowns. */
#chart,
.js-plotly-plot,
.plot-container {
  position: relative;
  z-index: 1;
}

/*
 * Mobile already wraps instead of requiring horizontal scrolling.
 * Keep dropdowns visible there as well.
 */
@media (max-width: 808px) {
  .overlaybox,
  .woi-overlay-controls {
    overflow: visible !important;
  }

  .woi-overlay-controls .woi-indicator-menu[open] {
    z-index: 1200 !important;
  }

  .woi-overlay-controls .woi-indicator-popover {
    z-index: 1210 !important;
  }
}



/* ================================================================
   WOI toolbar — shared desktop/mobile group structure
   ================================================================ */

.woi-tool-group {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 4px;
  min-width: 0;
}

/*
 * Desktop görünümünü değiştirme.
 * Mevcut ID tabanlı separator sistemi çalışmaya devam eder.
 */
@media (min-width: 809px) {
  .woi-drawing-toolbar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }

  .woi-tool-group {
    display: contents !important;
  }

  .woi-tool-group-view {
    display: inline-flex !important;
  }
}


/* ------------------------------------------------
   Mobile: desktop ile aynı mantıksal gruplar
   ------------------------------------------------ */
@media (max-width: 808px) {
  .fibo-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow-x: visible !important;
    overflow-y: visible !important;

    gap: 5px 7px !important;
    padding: 4px 5px 6px !important;
  }

  /*
   * İç wrapper görünmez olur; gerçek gruplar fibo-row içinde
   * bağımsız flex elemanları olarak taşınır.
   */

  .woi-draw-label {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 0 2px !important;
  }

  .woi-tool-group {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;

    gap: 3px !important;
    min-width: 0 !important;

    padding-right: 7px !important;
    margin: 0 !important;

    border-right: 1px solid var(--woi-separator);
  }

  .woi-tool-group-view {
    padding-right: 7px !important;
  }

  /*
   * Separator artık butonlarda değil grup wrapper'larında.
   */
  #btn-draw-hline,
  #btn-draw-undo,
  #btn-toggle-legend,
  #woi-range-6m {
    margin-left: 0 !important;
  }

  #btn-draw-hline::before,
  #btn-draw-undo::before,
  #btn-toggle-legend::before,
  #btn-chart-focus::before {
    display: none !important;
    content: none !important;
  }

  /*
   * Grup içindeki butonların başka gruba karışmasını engeller.
   */
  .woi-tool-group .woi-draw-btn {
    flex: 0 0 auto !important;
  }

  /*
   * Range grubu JS tarafından fibo-row sonuna ekleniyor.
   * İlk range butonu grubun başlangıcını gösterir.
   */
  #woi-range-6m {
    position: relative;
    margin-left: 2px !important;
  }

  #woi-range-6m::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 5px;
    bottom: 5px;
    width: 1px;
    background: var(--woi-separator);
  }

  /*
   * Focus işlevi kaldırıldı; eski DOM/cache kalıntısı görünmesin.
   */
  #btn-chart-focus {
    display: none !important;
  }
}


/* Dar telefonlarda gruplar okunabilir kalsın. */
@media (max-width: 520px) {
  .fibo-row {
    gap: 5px 6px !important;
  }

  .woi-tool-group {
    gap: 2px !important;
    padding-right: 6px !important;
  }

  .woi-tool-group .woi-draw-btn {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}


/* ================================================================
   WOI mobile overlay visibility fix
   Keep every overlay option visible; no horizontal clipping.
   ================================================================ */
@media (max-width: 808px) {

  .overlaybox {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    overflow: visible !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    box-sizing: border-box !important;
  }

  .woi-overlay-controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
    flex-wrap: wrap !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 6px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /*
   * Dash checklist wrapper containing overlay buttons.
   */
  .overlays-checklist,
  .woi-overlay-controls .overlays-checklist {
    display: block !important;
    flex: 0 0 100% !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    overflow: visible !important;
  }

  /*
   * Dash may generate one or more nested wrapper divs.
   * Allow all of them to use the available width.
   */
  .overlays-checklist > div,
  .woi-overlay-controls .overlays-checklist > div {
    display: flex !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    flex-wrap: wrap !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 6px !important;
    overflow: visible !important;
  }

  .woi-chip-group {
    display: flex !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    flex-wrap: wrap !important;

    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 6px !important;
    overflow: visible !important;
  }

  /*
   * Each overlay chip stays whole, but the collection wraps.
   */
  .woi-chip-group label,
  .overlays-checklist label {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  /*
   * Chart and Indicators remain below the complete overlay list.
   */
  .woi-indicator-menu,
  .woi-chart-menu {
    flex: 0 0 auto !important;
  }
}


/*
 * Very narrow phones: slightly reduce chip spacing so longer labels
 * such as Triangle/Wedge and Patterns remain practical.
 */
@media (max-width: 520px) {
  .woi-overlay-controls,
  .woi-chip-group,
  .overlays-checklist > div {
    gap: 5px !important;
  }

  .woi-chip-group label,
  .overlays-checklist label {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 10px !important;
  }
}


/* ================================================================
   WOI mobile toolbar compact correction
   ================================================================ */

/*
 * Internal helper buttons must never be visible.
 * Previous generic mobile button rules were overriding display:none.
 */
#btn-fibo-a,
#btn-fibo-b {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}


/* Compact mobile overlay grid */
@media (max-width: 808px) {

  .overlaybox {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .woi-overlay-controls .overlays-checklist,
  .overlays-checklist {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .woi-overlay-controls .overlays-checklist > div,
  .overlays-checklist > div,
  .woi-chip-group {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 5px !important;
    overflow: visible !important;
  }

  .woi-overlay-controls .overlays-checklist label,
  .overlays-checklist label,
  .woi-chip-group label {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    min-height: 32px !important;
    height: 32px !important;

    padding: 4px 8px !important;
    margin: 0 !important;

    font-size: 10px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
  }

  /*
   * Inputs inside labels should not affect grid sizing.
   */
  .overlays-checklist label input,
  .woi-chip-group label input {
    flex: 0 0 auto !important;
  }
}


/* Narrow phones use two columns for readable labels. */
@media (max-width: 430px) {

  .woi-overlay-controls .overlays-checklist > div,
  .overlays-checklist > div,
  .woi-chip-group {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .woi-overlay-controls .overlays-checklist label,
  .overlays-checklist label,
  .woi-chip-group label {
    min-height: 31px !important;
    height: 31px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}


/* ================================================================
   WOI overlays — exact DOM mobile layout
   Actual structure:
   #overlays.overlays-checklist.woi-chip-group > label
   ================================================================ */

@media (max-width: 808px) {

  .woi-overlay-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 6px !important;
    overflow: visible !important;
  }

  .woi-overlay-inline-label {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 0 3px !important;
  }

  /*
   * Use the real Dash checklist ID.
   * ID specificity overrides older #overlays rules.
   */
  #overlays.overlays-checklist.woi-chip-group {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;

    flex: 0 0 100% !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /*
   * Labels are direct grid children.
   * Override their inline display:block.
   */
  #overlays.overlays-checklist.woi-chip-group > label {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    min-height: 32px !important;
    height: 32px !important;

    margin: 0 !important;
    padding: 5px 8px !important;

    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
  }

  #overlays.overlays-checklist.woi-chip-group > label > input {
    flex: 0 0 auto !important;
    margin-right: 5px !important;
  }

  /*
   * Chart and Indicators appear together below the overlay grid.
   */
  .woi-overlay-controls > .woi-indicator-menu {
    flex: 0 0 auto !important;
    margin-top: 1px !important;
  }
}


/* Narrow phones: readable two-column layout. */
@media (max-width: 430px) {

  #overlays.overlays-checklist.woi-chip-group {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #overlays.overlays-checklist.woi-chip-group > label {
    min-height: 31px !important;
    height: 31px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}


/* ============================================================
   WOI MOBILE — COMPACT DRAW + FIXED RANGE CONTROLS
   Desktop untouched.
   ============================================================ */

@media (max-width: 720px) {

  /*
   * Main toolbar becomes a compact two-level mobile workspace.
   */
  .fibo-row {
    display: flex !important;
    flex-wrap: wrap !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 4px !important;

    margin: 0 !important;
    padding: 5px 6px !important;

    box-sizing: border-box !important;

    overflow: visible !important;
  }


  /*
   * Drawing tools occupy their own horizontal rail.
   */


  /*
   * Draw label stays small and secondary.
   */
  .fibo-row .woi-draw-label {
    flex: 0 0 auto !important;

    margin: 0 2px 0 0 !important;

    font-size: 9px !important;
    line-height: 28px !important;

    opacity: .65 !important;
  }


  /*
   * Tool groups stay inline inside the scroll rail.
   */
  .fibo-row .woi-tool-group-navigation,
  .fibo-row .woi-tool-group-drawing,
  .fibo-row .woi-tool-group-edit {
    display: inline-flex !important;
    flex: 0 0 auto !important;

    width: auto !important;

    gap: 3px !important;
    align-items: center !important;
  }


  /*
   * Drawing buttons — compact but still finger-friendly.
   */


  /*
   * Important tools appear first visually.
   * Existing DOM / callbacks remain untouched.
   */
  #btn-draw-inspect {
    order: 1 !important;
  }

  #btn-draw-pan {
    order: 2 !important;
  }

  #btn-draw-trend {
    order: 3 !important;
  }


  /*
   * View group starts the SECOND line.
   */
  .fibo-row .woi-tool-group-view {
    display: flex !important;
    flex: 0 0 auto !important;

    order: 20 !important;

    margin: 0 !important;
    padding: 0 !important;

    align-items: center !important;
  }


  /*
   * Legend is secondary on mobile.
   */
  .fibo-row #btn-toggle-legend {
    height: 28px !important;
    min-height: 28px !important;

    margin: 0 3px 0 0 !important;
    padding: 3px 6px !important;

    font-size: 9px !important;
  }


  /*
   * Range buttons are ALWAYS visible.
   * They must never become part of the horizontal drawing rail.
   */
  .fibo-row #woi-range-6m,
  .fibo-row #woi-range-1y,
  .fibo-row #woi-range-all {

    display: inline-flex !important;
    flex: 0 0 auto !important;

    position: static !important;

    width: auto !important;
    min-width: 34px !important;

    height: 28px !important;
    min-height: 28px !important;

    margin: 0 2px !important;
    padding: 3px 7px !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    font-size: 9px !important;
    line-height: 1 !important;

    white-space: nowrap !important;

    visibility: visible !important;
    opacity: 1 !important;
  }


  /*
   * Keep 6M separated slightly from Legend.
   */
  .fibo-row #woi-range-6m {
    margin-left: 3px !important;
  }


  /*
   * Fullscreen remains immediately available.
   */
  .fibo-row #btn-chart-fullscreen {
    display: inline-flex !important;
    flex: 0 0 auto !important;

    order: 30 !important;

    width: auto !important;

    height: 28px !important;
    min-height: 28px !important;

    margin: 0 0 0 auto !important;
    padding: 3px 7px !important;

    align-items: center !important;
    justify-content: center !important;

    font-size: 9px !important;

    white-space: nowrap !important;
  }


  /*
   * Enable Chart is not a primary mobile action.
   * Keep it functional but visually secondary.
   */
  .fibo-row #btn-toggle-chart-interactive {
    flex: 0 0 auto !important;

    order: 25 !important;

    height: 28px !important;
    min-height: 28px !important;

    padding: 3px 6px !important;

    font-size: 9px !important;
  }


  #fibo-status {
    display: none !important;
  }

}


/* Very narrow phones */
@media (max-width: 430px) {

  .fibo-row {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }


  .fibo-row #woi-range-6m,
  .fibo-row #woi-range-1y,
  .fibo-row #woi-range-all {
    min-width: 32px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

}


/* ============================================================
   WOI MOBILE DRAW TOOLBAR — CANONICAL
   Inspect | Pan | Measure | Tools | Legend | 6M | 1Y | ALL

   The original drawing toolbar stays mounted for callbacks.
   Mobile interaction uses the generated proxy toolbar.
   ============================================================ */

.woi-mobile-draw-toolbar {
  display: none;
}

@media (max-width: 920px) {

  /* Main mobile row */
  .fibo-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 4px !important;
    padding: 5px 6px !important;
    margin: 0 !important;

    overflow-x: auto !important;
    overflow-y: visible !important;

    white-space: nowrap !important;

    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .fibo-row::-webkit-scrollbar {
    display: none !important;
  }


  /* Original controls remain mounted but are not shown */
  .fibo-row .woi-drawing-toolbar {
    display: none !important;
  }

  .fibo-row #btn-chart-fullscreen,
  .fibo-row #btn-toggle-chart-interactive {
    display: none !important;
  }


  /* Compact proxy toolbar */
  .fibo-row .woi-mobile-draw-toolbar {
    display: block !important;
    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    position: relative !important;
    overflow: visible !important;
  }

  .woi-mobile-draw-quick {
    display: inline-flex !important;

    width: auto !important;
    min-width: 0 !important;

    gap: 4px !important;
    align-items: center !important;
  }

  .woi-mobile-draw-btn {
    display: inline-flex !important;
    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;

    height: 28px !important;
    min-height: 28px !important;

    margin: 0 !important;
    padding: 3px 7px !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 4px !important;

    box-sizing: border-box !important;

    border-radius: 7px !important;
    border: 1px solid rgba(148,163,184,.16) !important;

    background: rgba(15,23,42,.78) !important;
    color: rgba(226,232,240,.90) !important;

    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
    box-shadow: none !important;
  }

  .woi-mobile-draw-btn.is-active {
    background: rgba(37,99,235,.30) !important;
    border-color: rgba(96,165,250,.62) !important;
    color: #f8fafc !important;
  }

  .woi-mobile-draw-icon {
    flex: 0 0 auto !important;
    font-size: 11px !important;
  }


  /* Tools trigger and floating menu */
  .woi-mobile-tools-wrap {
    position: relative !important;
    min-width: 0 !important;
  }

  .woi-mobile-tools-trigger {
    width: 100% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .woi-mobile-tools-arrow {
    opacity: .65;
    font-size: 8px;
  }

  .woi-mobile-draw-menu {
    display: none !important;

    position: absolute !important;
    top: calc(100% + 5px) !important;
    right: 0 !important;
    left: auto !important;

    z-index: 5000 !important;

    width: min(280px, calc(100vw - 30px)) !important;
    max-width: calc(100vw - 30px) !important;

    padding: 7px !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap: 5px !important;

    border: 1px solid rgba(148,163,184,.18) !important;
    border-radius: 10px !important;

    background: rgba(8,15,28,.98) !important;

    box-shadow:
      0 14px 36px rgba(0,0,0,.38) !important;
  }

  .woi-mobile-draw-menu.is-open {
    display: grid !important;
  }

  .woi-mobile-draw-menu-btn {
    height: 34px !important;
    min-height: 34px !important;
    font-size: 9px !important;
  }


  /* Legend and fixed chart ranges continue in the same row */
  .fibo-row .woi-tool-group-view {
    display: inline-flex !important;
    flex: 0 0 auto !important;

    width: auto !important;

    margin: 0 0 0 3px !important;
    padding: 0 !important;

    align-items: center !important;
  }

  .fibo-row #btn-toggle-legend,
  .fibo-row #woi-range-6m,
  .fibo-row #woi-range-1y,
  .fibo-row #woi-range-all {
    display: inline-flex !important;
    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 32px !important;

    height: 28px !important;
    min-height: 28px !important;

    margin: 0 2px !important;
    padding: 3px 6px !important;

    align-items: center !important;
    justify-content: center !important;

    font-size: 9px !important;
    line-height: 1 !important;

    visibility: visible !important;
    opacity: 1 !important;
  }

  .fibo-row #btn-toggle-legend {
    min-width: 54px !important;
  }

  #fibo-status {
    display: none !important;
  }
}


/* Extra tightening for the smallest phones */
@media (max-width: 390px) {

  .woi-mobile-draw-btn {
    gap: 3px !important;
  }
}


@media (max-width: 430px) {

  .fibo-row {
    gap: 3px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .woi-mobile-draw-quick {
    gap: 3px !important;
  }

  .woi-mobile-draw-btn {
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: 8.5px !important;
  }

  .fibo-row #btn-toggle-legend {
    min-width: 48px !important;
  }

  .fibo-row #woi-range-6m,
  .fibo-row #woi-range-1y,
  .fibo-row #woi-range-all {
    min-width: 30px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}


/* ============================================================
   MOBILE TOOLS MENU — POPUP VISIBILITY FIX
   ============================================================ */

@media (max-width: 920px) {

  /*
   * All controls fit in one row now.
   * Do not use a scrolling container because it clips
   * the absolute-positioned Tools popup.
   */
  .chartwrap .fibo-row {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;

    position: relative !important;
    z-index: 50 !important;
  }


  .chartwrap .woi-mobile-draw-toolbar,
  .chartwrap .woi-mobile-draw-quick {
    overflow: visible !important;
    position: relative !important;
  }


  .chartwrap .woi-mobile-tools-wrap {
    position: relative !important;
    overflow: visible !important;
    z-index: 5100 !important;
  }


  .chartwrap .woi-mobile-tools-trigger {
    position: relative !important;
    z-index: 5101 !important;

    pointer-events: auto !important;
    cursor: pointer !important;
  }


  .chartwrap .woi-mobile-draw-menu {
    position: absolute !important;

    top: calc(100% + 6px) !important;
    right: 0 !important;
    left: auto !important;

    z-index: 9999 !important;

    pointer-events: auto !important;
    overflow: visible !important;
  }


  .chartwrap .woi-mobile-draw-menu.is-open {
    display: grid !important;
    pointer-events: auto !important;
  }

}


/* ============================================================
   MOBILE DRAW — LEGEND INTO TOOLS
   ============================================================ */
@media (max-width: 920px) {

  /* Real Legend control stays mounted for proxy click,
     but no longer consumes toolbar space. */
  .fibo-row #btn-toggle-legend {
    display: none !important;
  }

  /* Measure is now a primary quick action */
  .woi-mobile-draw-quick {
    gap: 3px !important;
  }

  .woi-mobile-draw-btn {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

}

@media (max-width: 430px) {

  .woi-mobile-draw-btn {
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 8px !important;
  }

}


/* =========================================================
   WATCHLIST AUTH MODAL — GOOGLE SIGN-IN
   ========================================================= */

.woi-watchlist-google-auth {
  width: 100%;
  margin-top: 16px;
  display: flex;
  justify-content: center;
  min-height: 44px;
}

.woi-watchlist-google-button {
  width: 100%;
  min-height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 8px;
}

.woi-watchlist-google-button > div,
.woi-watchlist-google-button iframe {
  max-width: 100% !important;
}

.woi-watchlist-auth-divider {
  width: 100%;
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(148, 163, 184, 0.8);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.woi-watchlist-auth-divider::before,
.woi-watchlist-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(148, 163, 184, 0.2);
}

.woi-watchlist-auth-divider span {
  flex: 0 0 auto;
}

@media (max-width: 420px) {
  .woi-watchlist-google-auth {
    overflow: hidden;
  }

  .woi-watchlist-google-button {
    transform-origin: center top;
  }
}


/* =========================================================
   WATCHLIST GOOGLE BUTTON — CLIPPING FIX
   ========================================================= */

.woi-watchlist-google-auth {
  width: 100%;
  padding: 0 12px;
  overflow: visible;
}

.woi-watchlist-google-button {
  width: 100%;
  min-width: 0;
  overflow: visible;
  border-radius: 4px;
}

.woi-watchlist-google-button > div {
  width: 100% !important;
  max-width: 100% !important;
}

.woi-watchlist-google-button iframe {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

@media (max-width: 520px) {
  .woi-watchlist-google-auth {
    padding: 0;
  }

  .woi-watchlist-google-button {
    overflow: visible;
  }
}

/* ============================================================
   LIVE OVERLAY / CLOSED TITLE MUTUAL EXCLUSION
   ============================================================
   The live overlay callback leaves #live-price-overlay empty
   when no LIVE/RECENT quote exists.

   When the overlay contains live content, hide only Plotly's
   fallback MARKET CLOSED title. When the overlay becomes empty,
   the fallback title automatically becomes visible again.
   ============================================================ */

#chart-wrap:has(#live-price-overlay:not(:empty))
#chart .g-gtitle {
  display: none !important;
}



/* ============================================================
   MOBILE CHART TOUCH — PAGE SCROLL MUST WIN
   ============================================================
   On mobile, a vertical one-finger gesture over the Plotly chart
   must scroll the page instead of being captured as chart pan.

   Desktop behaviour, drawing controls and fullscreen workspace
   remain unchanged.
   ============================================================ */

@media (max-width: 920px) {

  #chart-wrap #chart,
  #chart-wrap #chart .js-plotly-plot,
  #chart-wrap #chart .plot-container,
  #chart-wrap #chart .svg-container {
    touch-action: pan-y !important;
  }

}


/* ================================================================
   WOI DESKTOP UNIFIED DRAW / VIEW TOOLBAR
   One responsive manager owns the complete desktop draw row.
   Mobile <= 808px keeps the existing canonical toolbar.
   ================================================================ */

.woi-desktop-unified-more {
  display: none;
  position: relative;
  flex: 0 0 auto;
}

@media (min-width: 809px) {

  .fibo-row {
    min-width: 0 !important;
    overflow: visible !important;
  }

  .fibo-row .woi-drawing-toolbar {
    min-width: 0 !important;
  }

  .fibo-row .woi-tool-group-view {
    min-width: 0 !important;
  }

  .woi-desktop-unified-more.is-visible {
    display: inline-flex !important;
    position: relative !important;
    align-items: center !important;
    flex: 0 0 auto !important;
  }

  .woi-desktop-unified-more-btn {
    display: inline-flex !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 54px !important;

    height: 28px !important;
    min-height: 28px !important;

    margin: 0 !important;
    padding: 3px 8px !important;

    align-items: center !important;
    justify-content: center !important;

    font-size: 9px !important;
    line-height: 1 !important;

    white-space: nowrap !important;
  }

  .woi-desktop-unified-more-menu {
    display: none;

    position: absolute;
    z-index: 10070;

    top: calc(100% + 7px);
    right: 0;

    min-width: 210px;
    max-width: 270px;

    padding: 7px;

    background: #0b1119;

    border:
      1px solid rgba(148, 163, 184, 0.28);

    border-radius: 10px;

    box-shadow:
      0 16px 40px rgba(0, 0, 0, 0.42),
      0 2px 8px rgba(0, 0, 0, 0.30);
  }

  .woi-desktop-unified-more-menu.is-open {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
  }

  .woi-desktop-unified-more-menu button {
    display: flex !important;

    position: static !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 30px !important;
    min-height: 30px !important;

    margin: 0 !important;
    padding: 5px 9px !important;

    align-items: center !important;
    justify-content: flex-start !important;

    font-size: 10px !important;
    line-height: 1 !important;

    white-space: nowrap !important;
  }

  /*
   * Range buttons / legend / fullscreen keep their original IDs
   * and handlers even while living inside the unified popup.
   */
  .woi-desktop-unified-more-menu
  #btn-toggle-legend,

  .woi-desktop-unified-more-menu
  #woi-range-6m,

  .woi-desktop-unified-more-menu
  #woi-range-1y,

  .woi-desktop-unified-more-menu
  #woi-range-all,

  .woi-desktop-unified-more-menu
  #btn-chart-fullscreen {

    display: flex !important;

    position: static !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
  }

  .fibo-row.woi-desktop-unified-more-active {
    overflow: visible !important;
  }

  .fibo-row.woi-desktop-unified-more-active
  .woi-drawing-toolbar {
    min-width: 0 !important;
  }

  .fibo-row.woi-desktop-unified-more-active
  .woi-desktop-unified-more,

  .fibo-row.woi-desktop-unified-more-active
  .woi-desktop-unified-more-menu {
    overflow: visible !important;
  }
}




/* ================================================================
   WOI OVERLAYS — COMPACT DROPDOWN
   Desktop uses the same structural model as mobile:
   Overlays ▼ | Timeframe | Chart ▼ | Indicators ▼
   ================================================================ */

@media (min-width: 921px) {

  .woi-overlay-controls {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    column-gap: 8px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .woi-overlay-controls > .woi-overlays-menu,
  .woi-overlay-controls > .woi-timeframe-selector,
  .woi-overlay-controls > .woi-chart-type-menu,
  .woi-overlay-controls > .woi-indicators-menu {
    flex: 0 0 auto !important;
  }

  /*
   * Overlay is now a real dropdown on desktop.
   */
  .woi-overlays-menu {
    display: block !important;
    position: relative !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /*
   * Kill the old desktop "OVERLAYS:" pseudo caption.
   */
  .woi-overlays-menu::before {
    content: none !important;
    display: none !important;
  }

  /*
   * Restore the real Details trigger.
   */
  .woi-overlays-menu > summary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 88px !important;
    height: 29px !important;
    margin: 0 !important;
    padding: 5px 10px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    white-space: nowrap !important;
  }

  /*
   * Dropdown panel.
   */
  .woi-overlays-menu > .woi-overlays-popover {
    display: none !important;
    position: absolute !important;
    z-index: 10090 !important;

    top: calc(100% + 7px) !important;
    left: 0 !important;
    right: auto !important;

    width: 220px !important;
    min-width: 220px !important;
    max-width: 260px !important;

    margin: 0 !important;
    padding: 8px !important;

    border:
      1px solid rgba(148, 163, 184, 0.28) !important;
    border-radius: 10px !important;

    background: #0b1119 !important;

    box-shadow:
      0 16px 40px rgba(0, 0, 0, 0.42),
      0 2px 8px rgba(0, 0, 0, 0.30) !important;

    overflow: visible !important;
  }

  .woi-overlays-menu[open]
  > .woi-overlays-popover {
    display: block !important;
  }

  /*
   * Show the normal popup title again.
   */
  .woi-overlays-popover
  > .woi-indicator-title {
    display: block !important;
  }

  /*
   * Overlay options are vertical inside the dropdown.
   */
  .woi-overlays-popover
  .overlays-checklist {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: none !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .woi-overlays-popover
  .overlays-checklist > div {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    width: 100% !important;
  }

  .woi-overlays-popover
  .overlays-checklist label {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 5px 9px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }

  /*
   * Chart / Indicators remain independent Details dropdowns.
   */
  .woi-chart-type-menu,
  .woi-indicators-menu {
    position: relative !important;
    overflow: visible !important;
  }

  .woi-chart-type-popover,
  .woi-indicators-menu
  .woi-indicator-popover {
    z-index: 10090 !important;
  }

  .overlaybox {
    overflow: visible !important;
  }
}

/* ================================================================
   WOI OVERLAYS — PREMIUM TRIGGER POLISH
   Visual-only alignment with Chart / Indicators dropdowns.
   No behaviour, visibility or Dash input changes.
   ================================================================ */

@media (min-width: 921px) {

  .woi-overlays-menu > summary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    width: auto !important;
    min-width: 100px !important;
    height: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 13px !important;

    box-sizing: border-box !important;

    border:
      1px solid rgba(56, 189, 248, 0.28) !important;
    border-radius: 8px !important;

    background:
      rgba(8, 26, 38, 0.94) !important;

    color: #cbd5e1 !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
    cursor: pointer !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.025),
      0 1px 2px rgba(0,0,0,0.20) !important;

    transition:
      border-color 140ms ease,
      background-color 140ms ease,
      color 140ms ease,
      box-shadow 140ms ease !important;

    list-style: none !important;
  }

  .woi-overlays-menu > summary::-webkit-details-marker {
    display: none !important;
  }

  .woi-overlays-menu > summary::marker {
    display: none !important;
    content: "" !important;
  }

  .woi-overlays-menu > summary:hover {
    border-color:
      rgba(56, 189, 248, 0.48) !important;

    background:
      rgba(8, 35, 50, 0.98) !important;

    color: #e2e8f0 !important;
  }

  .woi-overlays-menu[open] > summary {
    border-color:
      rgba(56, 189, 248, 0.58) !important;

    background:
      rgba(8, 40, 57, 0.98) !important;

    color: #e0f2fe !important;

    box-shadow:
      0 0 0 1px rgba(56,189,248,0.08),
      inset 0 1px 0 rgba(255,255,255,0.035) !important;
  }

}