a,
* {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-focus-ring-color: transparent !important;
}
a:focus,
a:active {
  background-color: transparent;
  outline: none;
}

body {
  font-family: Nunito Sans, sans-serif;
  margin: 0;
  padding: 0;
  font-size: 15px;
  color: #30a5bf;
}

#page-wrapper {
  padding: 50px;
  padding-top: 20px;
  background-color: #f7f7f7;
  min-height: 100vh;
}

#filters-section {
  background-color: #ffffff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
  border: 1px solid #e4e7ee;
}

.filter-wrapper {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}

.filter-wrapper span.label {
  color: #5b6577;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  width: 74px;
}

#market-movers-company-search {
  background: #fff;
  border: 1px solid #e4e7ee;
  color: #1f2937;
  padding: 10px 12px;
  border-radius: 1000px;
  outline: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .02) inset;
  min-height: 42px;
  min-width: 300px;
  padding-left: 30px;
  transition: all .15s ease;
}

#market-movers-company-search:hover, #market-movers-company-search:focus {
  outline: 1px solid #30A5BF;
}

.main-titles {
  display: flex;
}

.page-title {
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 20px;
  cursor: pointer;
}

.page-title.selected {
  text-decoration: underline;
}

.page-title:hover {
  text-decoration: underline;
}

#watchlist {
  margin-left: 20px;
  position: relative;
}

.inner-page-wrapper {
  margin: auto;
  width: min-content;
}

/* Filter selectors */
.filter-controls-wrapper {
  display: flex;
  align-items: center;
}

#filter-control-buttons-wrapper {
  display: flex;
  align-items: center;
}

#search-and-sort-wrapper {
  display: flex;
  margin-right: 10px;
}

.filter-selector {
  position: relative;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: bold;
  color: #192342;
  cursor: pointer;
  opacity: 1;
  user-select: none;
  border-radius: 6px;
  transition: all 0.2s ease;
  margin-right: 6px;
  border: 0 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02);
}

.filter-selector:last-of-type {
  margin-right: 0;
}

.filter-selector.open {
  background-color: rgb(245, 245, 245);
  box-shadow: 0px 3px 3px -2px rgb(0 0 0 / 20%),
    0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%);
}

.filter-selector-label {
  font-size: 14px;
  white-space: nowrap;
  color: #192342;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  -o-user-select: none;
  user-select: none;
}

.filter-selector select {
  padding: 4px 8px;
  border: 1px solid;
  border-radius: 4px;
}

.filter-selector-header {
  position: absolute;
  top: 5px;
  right: 5px;
}

.filter-selector:last-of-type .filter-selector-content {
  right: 0;
  left: unset;
}

.filter-selector-content {
  position: absolute;
  background-color: #fff;
  padding: 26px 0 10px 0;
  box-shadow: 0px 3px 3px -2px rgb(0 0 0 / 20%),
    0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%);
  left: 0;
  width: max-content;
  border-radius: 4px;
  display: none;
  z-index: 1999;
  animation: growOut 200ms ease-in-out forwards;
  transform-origin: top center;
  top: 50px !important;
}

.filter-selector.open .filter-selector-content {
  display: block;
}

.filter-selector-options {
  max-height: 300px;
  overflow-y: auto;
  padding: 0 30px;
}

.filter-selector-options::-webkit-scrollbar {
  width: 10px;
}

.filter-selector-options::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 1000px;
  border-right: 2px solid #fff;
}

.filter-selector-options::-webkit-scrollbar-thumb {
  background: rgb(212, 212, 212);
  border-radius: 1000px;
  border-right: 2px solid #fff;
}

.filter-selector-options::-webkit-scrollbar-thumb:hover {
  background: rgb(158, 158, 158);
}

.filter-option {
  margin-bottom: 10px;
}

.filter-option input[type="checkbox"],
.filter-option input[type="radio"] {
  transform: scale(1.2);
  margin-right: 10px;
}

.filter-option:last-of-type {
  margin-bottom: 0;
}

.filter-selector-footer {
  display: flex;
  padding: 20px 26px 0 26px;
  margin-top: 10px;
  border-top: 1px solid rgb(212, 212, 212);
  justify-content: space-between;
}

.filter-selector-footer button {
  cursor: pointer;
  border-radius: 0;
  outline: 0;
  border: 2px solid #30a5bf;
  padding: 8px 16px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  border-radius: 2px;
}

.filter-btn-clear {
  background-color: #fff;
  color: #30a5bf;
  margin-right: 10px;
}

.filter-btn-clear.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.filter-btn-search {
  color: #fff;
  background-color: #30a5bf;
}

@keyframes growOut {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#date-range-picker {
  display: flex;
}

.custom-date-wrapper {
  position: relative;
}

#date-range-picker input {
  padding: 6px 8px 6px 34px;
  width: 130px;
  border: 1px solid;
  border-radius: 4px;
}

#date-range-picker input:first-of-type {
  margin-right: 10px;
}

.calendar-icon-wrapper {
  position: absolute;
  left: 0;
  width: 33px;
  height: 29px;
  bottom: 0;
  padding: 10px;
  box-sizing: border-box;
  background-color: var(--main-color-192342);
  border-radius: 4px 0 0 4px;
}

.calendar-icon-wrapper img {
  filter: invert(1);
  transform: translateY(-3px);
}

.input-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.subtext {
  font-size: 12px;
  font-weight: 300;
  margin-top: 6px;
}

/* Table title lives INSIDE the card at the top (drill-intercepts pattern:
   title header → light-grey column-header band → white row body). The old
   uppercase gray strip that sat above the card is now framed as a proper
   card header with more prominent typography. */
#table-title {
  padding: 18px 16px 10px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7280;
}

#table-title span {
  color: #111827;
  font-weight: 700;
}

/* Outer card — one rounded white surface wrapping the title, column
   headers, and row body. Border replaces the box-shadow that used to
   float around each row separately. Width is set by content on desktop
   so the card sizes to the table's total column width. */
#table-wrapper {
  width: min-content;
  position: relative;
  min-height: 500px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  /* overflow: visible so the sticky #table-header escapes the card's
     clipping context and pins to the viewport. #table-title has no bg of
     its own (inherits card white) so top corners still read as rounded;
     the last row's white bg matches the card so bottom corners align too. */
  overflow: visible;
}

/* Column-header band — sits directly below the title, subtle grey
   background (#f9fafb) with top/bottom hairlines. No side padding on the
   card because the header rows span edge-to-edge; per-cell padding is on
   .single-header. */
#table-header {
  display: flex;
  background-color: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 10px;
}

.single-header {
  padding: 10px 6px;
  box-sizing: border-box;
  font-weight: 700;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 12px;
  color: #111827;
  display: flex;
  align-items: center;
}

#table-body {
  width: 100%;
}

/* Rows flow continuously inside the card. No per-row border/radius/margin —
   the card handles the outer frame; rows separate with a subtle bottom
   hairline. Last row drops its hairline so it butts against the card edge
   cleanly. */
.single-row {
  display: flex;
  align-items: center;
  background-color: #fff;
  box-sizing: border-box;
  padding: 8px 10px;
  border-bottom: 1px solid #f3f4f6;
}

.single-row:last-child {
  border-bottom: none;
}

/* User-added row (pinned company from the search bar). Light teal highlight
   with a brand-teal accent on the left edge. Uses box-shadow inset for the
   accent instead of border-left so the row content doesn't shift relative
   to its neighbours. Light background lets all the consolidated sub-element
   colors (.cell-company-name, .col-volume, etc.) render correctly without
   per-element overrides. position:relative makes the row the anchor for the
   in-row remove button below. */
.single-row.user-added {
  background-color: #ecf6f9;
  box-shadow: inset 4px 0 0 #30a5bf;
  border-color: #cbe6ee;
  position: relative;
  /* Create a local stacking context so the absolutely-positioned remove
     button (z-index: 2 below) reliably paints + hit-tests above the static
     marketcap cell it overlaps. Without this the cell's text could "win"
     pointer events on the X's left half despite document order. */
  isolation: isolate;
}

/* Move the pinned-row remove button INSIDE the row, anchored to its right
   edge. Previous left:-54px positioning put it outside the table's bbox in
   the empty space — the sticky table header doesn't extend that far left,
   so the X stayed visible when the row scrolled behind the header. Pulling
   it inside the row's bounds means it's clipped by the sticky header the
   same way the row itself is. Desktop-only; mobile keeps its own
   grid-based positioning further down in this file. */
@media (min-width: 642px) {
  .single-row.user-added .row-buttons {
    left: auto;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    /* z-index lifts the button above the marketcap cell it overlaps so the
       whole button area is hit-testable, not just the portion past the
       cell's right edge. Without this, the static marketcap cell was
       catching pointer events for the X's left half. */
    z-index: 2;
  }
}

.single-row .row-buttons {
  position: absolute;
  left: -54px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 54px;
}

.single-row .remove-row-btn {
  cursor: pointer;
  background-color: #192342;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  box-sizing: border-box;
}

.single-row .remove-row-btn:hover,
.single-row .add-to-watchlist-btn:hover {
  opacity: 1;
}

/* Pinned-row remove button — restyled to match the user-added row's light
   teal palette. White circle with a teal border tied to the row's accent
   stripe; flips to red on hover to signal the destructive action. The
   watchlist .remove-row-btn keeps its own styling (the .watchlist modifier
   below is scoped separately). */
.single-row.user-added .remove-row-btn {
  background-color: #fff;
  border: 1.5px solid #30a5bf;
  color: #30a5bf;
  font-size: 13px;
  font-weight: 600;
  opacity: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.single-row.user-added .remove-row-btn:hover {
  background-color: #fef2f2;
  border-color: #ef4444;
  color: #ef4444;
}

.single-row .add-to-watchlist-btn {
  cursor: pointer;
  background-color: #fff;
  color: #192342;
  border: 1px solid;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 14px;
  display: none !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  opacity: 0.8;
}
.single-row .remove-row-btn.watchlist {
  background-color: #fff;
  color: #192342;
  border: 1px solid;
  box-sizing: border-box;
  display: none !important;
}

.single-cell {
  padding: 10px 6px;
  box-sizing: border-box;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 12px;
  position: relative;
}

.single-header,
.single-cell {
  width: 100px;
  flex-grow: 0;
  flex-shrink: 0;
}

#header-news,
.col-news {
  width: 60px;
  text-align: center;
  justify-content: center;
}

/* Drill-intercepts news-chip treatment. Light teal rounded square with a
   teal outline icon. Kept as a plain <a> so the row-height/hydration cost
   stays flat (no Shoelace per row — CLAUDE.md). */
.col-news .cell-news-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #30a5bf;
  background: rgba(48, 165, 191, 0.14);
  text-decoration: none;
  transition: background 0.15s ease;
}
.col-news .cell-news-link:hover { background: rgba(48, 165, 191, 0.24); }

#header-last-price,
.col-last-price {
  text-align: center;
  justify-content: center;
  width: 90px;
}

/* Cell body — emphasised as the primary price value. Header stays at the
   default .single-header 700 weight to match its neighbours. */
.col-last-price {
  font-weight: 600;
  color: #111827;
}

#header-price-range,
.col-price-range {
  text-align: center;
  justify-content: center;
  width: 160px;
  gap: 6px;
}

.col-price-range .price-arrow {
  color: #94a3b8;
  font-weight: 400;
}

.col-price-range .price-end {
  font-weight: 600;
}

#header-value-change,
.col-value-change {
  text-align: center;
  width: 180px;
  justify-content: center;
}
#header-value-percent-change,
.col-value-percent-change {
  width: 180px;
  text-align: center;
  justify-content: center;
}
#header-value-marketcap,
.col-value-marketcap {
  text-align: center;
  justify-content: center;
  width: 110px;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

/* Two-line market-cap: value on top, currency code beneath. Drill-intercepts
   convention. `.col-value-marketcap` is set to flex-direction:column above so
   header cells (which just show "Market Cap") still center vertically. */
.col-value-marketcap .cell-mcap-value {
  font-weight: 600;
  color: #111827;
}
.col-value-marketcap .cell-mcap-currency {
  font-size: 11px;
  color: #9ca3af;
}

#header-volume,
.col-volume {
  text-align: center;
  justify-content: center;
  width: 100px;
}

/* Cell body — emphasised as the primary volume value. Header stays at the
   default .single-header 700 weight. */
.col-volume {
  font-weight: 600;
  color: #192342;
}

#header-traded-value,
.col-traded-value {
  text-align: center;
  justify-content: center;
  width: 130px;
}

/* Cell body is muted (secondary metric alongside Volume). Header stays at
   the default .single-header color so it reads at the same weight as the
   other column labels. */
.col-traded-value {
  color: #5b6577;
}

/* Column-header cells that carry an info tooltip (Volume/Value, Avg Daily
   Vol/50d Avg Vol). Small slate-gray info-circle next to the label; darkens
   on hover. cursor:help signals the affordance. */
.single-header:has(.single-header-info) {
  gap: 4px;
}

.single-header-info {
  color: #94a3b8;
  cursor: help;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.single-header-info:hover {
  color: #475569;
}

#header-company,
.col-company {
  width: 200px;
}

.col-company {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.2;
}

.col-company .cell-company-name {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  transition: color 0.15s ease;
}

.col-company .cell-company-name:hover {
  color: #30a5bf;
  text-decoration: underline;
}

.col-company .cell-company-ticker {
  font-size: 11px;
  color: #9ca3af;
  letter-spacing: .02em;
}

.col-value-change {
  font-weight: 700;
}

.single-cell.pos {
  color: #2a8f40;
}
.single-cell.neg {
  color: #ed727e;
}

.col-value-percent-change {
  color: #192342 !important;
  font-size: 12px;
}

.bar-chart-wrapper {
  width: 100%;
  position: relative;
  height: 20px;
  border-radius: 1000px;
  background-color: #f7f7f7;
  overflow: hidden;
}

.bar-chart {
  height: 100%;
  border-radius: 1000px;
  position: absolute;
  overflow: hidden;
}

.bar-chart-wrapper.reversed .bar-chart {
  right: 0;
}

.bar-chart-wrapper.reversed .percent-change-label {
  right: 5px;
  left: unset;
  color: #192342 !important;
  font-size: 12px;
}

.single-cell.pos .bar-chart {
  background-color: #66df81;
}
.single-cell.neg .bar-chart {
  background-color: #ed727e;
}

.percent-change-label {
  position: absolute;
  left: 5px;
  line-height: 20px;
  bottom: 0;
  font-weight: 700;
}

#marketcap-slider-wrapper {
  width: 300px;
}

#marketcap-range-slider {
  margin-top: 10px;
  margin-bottom: 20px;
  width: 100%;
}

.range-slider .range-slider__thumb {
  background: #30a5bf;
}

.range-slider .range-slider__range {
  background: #30a5bf;
}

#marketcap-range-slider-labels {
  width: 100%;
  margin-top: 24px;
  position: relative;
}

#marketcap-range-slider-labels span {
  font-size: 8px;
  color: #979797;
  position: absolute;
  bottom: 0;
}

#marketcap-range-slider-labels span:nth-of-type(1) {
  left: 0%;
}
#marketcap-range-slider-labels span:nth-of-type(2) {
  left: 12.5%;
}
#marketcap-range-slider-labels span:nth-of-type(3) {
  left: 23%;
}
#marketcap-range-slider-labels span:nth-of-type(4) {
  left: 34%;
}
#marketcap-range-slider-labels span:nth-of-type(5) {
  left: 46%;
}
#marketcap-range-slider-labels span:nth-of-type(6) {
  left: 57%;
}
#marketcap-range-slider-labels span:nth-of-type(7) {
  left: 69%;
}
#marketcap-range-slider-labels span:nth-of-type(8) {
  left: 79%;
}
#marketcap-range-slider-labels span:nth-of-type(9) {
  left: 90%;
}

#marketcap-inputs-wrapper {
  display: flex;
  justify-content: space-between;
  color: #192342;
}

#marketcap-inputs-wrapper div {
  display: flex;
  align-items: center;
  font-weight: 300;
}

#marketcap-inputs-wrapper div:first-of-type {
  justify-content: flex-start;
}
#marketcap-inputs-wrapper div:first-of-type {
  justify-content: flex-end;
}

#marketcap-inputs-wrapper input {
  width: 60px;
  color: #192342;
  margin-left: 2px;
  margin-right: 2px;
  padding: 4px;
}

/* Chrome, Safari, Edge, Opera */
#marketcap-inputs-wrapper input::-webkit-outer-spin-button,
#marketcap-inputs-wrapper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
#marketcap-inputs-wrapper input[type="number"] {
  -moz-appearance: textfield;
}

#marketcap-range-slider-ticks {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: calc(100% - 24px);
  transform: translateX(12px);
}

.range-slider-tick {
  width: 1px;
  background-color: #979797;
  height: 4px;
}

.range-slider-tick:first-of-type,
.range-slider-tick:last-of-type {
  visibility: hidden;
}

#price-slider-wrapper {
  width: 300px;
}

#price-range-slider {
  margin-top: 10px;
  margin-bottom: 20px;
  width: 100%;
}

#price-range-slider-labels {
  width: 100%;
  margin-top: 24px;
  position: relative;
}

#price-range-slider-labels span {
  font-size: 8px;
  color: #979797;
  position: absolute;
  bottom: 0;
}

#price-range-slider-labels span:nth-of-type(1) {
  left: 0%;
}
#price-range-slider-labels span:nth-of-type(2) {
  left: 12.5%;
}
#price-range-slider-labels span:nth-of-type(3) {
  left: 23%;
}
#price-range-slider-labels span:nth-of-type(4) {
  left: 34%;
}
#price-range-slider-labels span:nth-of-type(5) {
  left: 46%;
}
#price-range-slider-labels span:nth-of-type(6) {
  left: 57%;
}
#price-range-slider-labels span:nth-of-type(7) {
  left: 69%;
}
#price-range-slider-labels span:nth-of-type(8) {
  left: 79%;
}
#price-range-slider-labels span:nth-of-type(9) {
  left: 90%;
}

#price-inputs-wrapper {
  display: flex;
  justify-content: space-between;
  color: #192342;
}

#price-inputs-wrapper div {
  display: flex;
  align-items: center;
  font-weight: 300;
}

#price-inputs-wrapper div:first-of-type {
  justify-content: flex-start;
}
#price-inputs-wrapper div:first-of-type {
  justify-content: flex-end;
}

#price-inputs-wrapper input {
  width: 60px;
  color: #192342;
  margin-left: 2px;
  margin-right: 2px;
  padding: 4px;
}

/* Chrome, Safari, Edge, Opera */
#price-inputs-wrapper input::-webkit-outer-spin-button,
#price-inputs-wrapper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
#price-inputs-wrapper input[type="number"] {
  -moz-appearance: textfield;
}

#price-range-slider-ticks {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: calc(100% - 24px);
  transform: translateX(12px);
}

#volume-slider-wrapper {
  width: 300px;
}

#volume-range-slider {
  margin-top: 10px;
  margin-bottom: 20px;
  width: 100%;
}

#volume-range-slider-labels {
  width: 100%;
  margin-top: 24px;
  position: relative;
}

#volume-range-slider-labels span {
  font-size: 8px;
  color: #979797;
  position: absolute;
  bottom: 0;
}

#volume-range-slider-labels span:nth-of-type(1) {
  left: 0%;
}
#volume-range-slider-labels span:nth-of-type(2) {
  left: 12.5%;
}
#volume-range-slider-labels span:nth-of-type(3) {
  left: 23%;
}
#volume-range-slider-labels span:nth-of-type(4) {
  left: 35%;
}
#volume-range-slider-labels span:nth-of-type(5) {
  left: 46%;
}
#volume-range-slider-labels span:nth-of-type(6) {
  left: 59%;
}
#volume-range-slider-labels span:nth-of-type(7) {
  left: 69%;
}
#volume-range-slider-labels span:nth-of-type(8) {
  left: 81%;
}
#volume-range-slider-labels span:nth-of-type(9) {
  left: 90%;
}

#volume-inputs-wrapper {
  display: flex;
  justify-content: space-between;
  color: #192342;
}

#volume-inputs-wrapper div {
  display: flex;
  align-items: center;
  font-weight: 300;
}

#volume-inputs-wrapper div:first-of-type {
  justify-content: flex-start;
}
#volume-inputs-wrapper div:first-of-type {
  justify-content: flex-end;
}

#volume-inputs-wrapper input {
  width: 100px;
  color: #192342;
  margin-left: 2px;
  margin-right: 2px;
  padding: 4px;
}

/* Chrome, Safari, Edge, Opera */
#volume-inputs-wrapper input::-webkit-outer-spin-button,
#volume-inputs-wrapper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
#volume-inputs-wrapper input[type="number"] {
  -moz-appearance: textfield;
}

#volume-range-slider-ticks {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: calc(100% - 24px);
  transform: translateX(12px);
}

.loader-wrapper {
  position: absolute !important;
}

.loader {
  display: block;
}

#filter-tags-wrapper {
  margin-bottom: 40px;
}

#filter-tags-header {
  margin-bottom: 4px;
  font-weight: 700;
  font-size: 16px;
}

#filter-tags-container {
  display: flex;
}

.filter-tag {
  border: 1px solid #bdbdbd;
  padding: 2px 2px 2px 8px;
  display: flex;
  align-items: center;
  position: relative;
  font-size: 12px;
  text-transform: uppercase;
  border-radius: 1000px;
  margin-right: 6px;
  background-color: #fff;
}

.filter-tag-bold {
  font-weight: 700;
  color: #192342;
}

.filter-tag-close-btn {
  position: relative;
  margin-left: 10px;
  cursor: pointer;
  opacity: 1;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}

.filter-tag-close-btn:hover {
  color: #192342;
  font-weight: 700;
}

.load-more-button {
  width: 112px;
  cursor: pointer;
  margin-top: 6px;
  color: #9296ad;
  transition: opacity 0.15s ease;
  opacity: 1;
  margin-left: 100%;
  transform: translateX(-100%);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  line-height: 22px;
}

.add-to-watchlist-button {
  width: 190px;
  cursor: pointer;
  margin-top: 6px;
  color: #9296ad;
  transition: opacity 0.15s ease;
  opacity: 1;
  margin-left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  line-height: 22px;
  display: none;
}

.load-more-button:hover {
  opacity: 0.8;
}

.modal #search-wrapper {
  width: 100% !important;
}

#search-wrapper {
  position: relative;
  width: 300px;
}

#search {
  width: 100%;
  border: 1px solid transparent;
  background-color: #fff;
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
  padding: 10px 20px !important;
  font-size: 14px;
  border-radius: 10px;
  padding-left: 2.375rem !important;
}

.fa-search {
  display: inline-block !important;
  position: absolute;
  z-index: 2;
  display: block;
  width: 2.375rem;
  height: 2.375rem;
  line-height: 2.375rem !important;
  text-align: center;
  pointer-events: none;
  color: rgba(48, 165, 191, 0.5);
}

.fa-search:before {
  content: "\f002";
}

/* Company-search autocomplete dropdown. Two-line option rows (name +
   EXCHANGE:TICKER subtitle), hover + keyboard-active states share the same
   light-teal background, matched substring rendered in bold inside the
   name line. Capped height with internal scroll for very long result sets. */
.autocomplete {
  position: relative;
}

.autocomplete-options {
  width: 100%;
  z-index: 1000;
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #e4e7ee;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  padding: 6px;
  margin-top: 6px;
  max-height: 360px;
  overflow-y: auto;
  font-size: 14px;
  animation: growOut 150ms ease-in-out forwards;
  transform-origin: top center;
}

.search-option {
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.1s ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}

.search-option .search-option-name {
  color: #192342;
  font-weight: 500;
}

.search-option .search-option-name strong {
  font-weight: 700;
  color: #30a5bf;
}

.search-option .search-option-ticker {
  font-size: 11px;
  color: #5b6577;
  letter-spacing: .02em;
}

.search-option:hover,
.search-option.is-active {
  background-color: #ecf6f9;
}

.search-option.is-active .search-option-name {
  color: #0c8aa3;
}

.search-option-empty {
  color: #94a3b8;
  font-style: italic;
  cursor: default;
}

.search-option-empty:hover {
  background-color: transparent;
}

#watchlist-count-badge {
  display: none;
  background-color: #f2be22;
  color: #192342;
  height: 20px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 100%;
  position: absolute;
  top: -6px;
  right: -20px;
  align-items: center;
  justify-content: center;
  min-width: 20px;
}

.modal {
  display: none;
  background-color: rgba(26, 26, 26, 0.4);
  backdrop-filter: blur(2px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  animation: fadein 0.3s;
  align-items: center;
  justify-content: center;
  z-index: 3;
  width: 100vw;
}

.modal.open {
  display: flex;
  align-items: flex-start;
  padding-top: 20px;
}

.modal-content {
  background-color: #fff;
  padding: 10px 20px !important;
  max-width: 94%;
  box-sizing: border-box;
  position: relative;
  overflow-y: unset;
  max-height: calc(100vh - 40px);
  min-height: 300px;
  width: 600px !important;
  min-width: 300px;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 18px;
  border-radius: 50%;
  color: #192342;
  text-align: center;
  line-height: 30px;
}

.modal-title {
  font-size: 24px;
  margin-bottom: 16px;
  font-weight: 700;
  text-align: center;
}

.modal-footer {
  width: calc(100% - 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  position: absolute;
  bottom: 0;
  position: absolute;
  bottom: 10px;
}

.modal-btn {
  padding: 6px 20px;
  cursor: pointer;
  border-radius: 6px;
  text-align: center;
  transition: opacity 0.15s ease;
  opacity: 1;
}

.modal-btn:hover {
  opacity: 0.8;
}

.modal-btn-cancel {
  background-color: #dbdbdb;
}
.modal-btn-save {
  background-color: #192342;
  color: #fff;
}

.modal-body p {
  margin-top: 0;
}

.watchlist-companies-to-add {
  margin-top: -10px;
}

.add-to-watchlist-company-row {
  background-color: #ebeaea;
  padding: 4px 10px;
  display: flex;
  align-items: center;
}
.add-to-watchlist-company-row:nth-child(even) {
  background-color: #f7f7f7;
}

.remove-add-to-watchlist-row {
  font-size: 18px;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.15s ease;
  margin-right: 10px;
}

.remove-add-to-watchlist-row:hover {
  opacity: 0.8;
}

#add-to-watchlist-modal input,
#add-to-watchlist-modal select,
.filter-selector select {
  border: 1px solid #efefef;
  background-color: #fff;
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 10px;
  flex-grow: 1;
}

#add-to-watchlist-modal label {
  width: 140px;
  margin-right: 10px;
  flex-shrink: 0;
  font-size: 14px;
}

.modal-btn.action.small {
  background-color: #192342;
  color: #fff;
  font-size: 12px;
  padding: 6px;
}
.modal-btn.danger.small {
  background-color: #dc3545;
  color: #fff;
  font-size: 12px;
  padding: 6px;
}

.new-watchlist-feedback {
  font-size: 14px;
  color: #dc3545;
}

#filter-select-exchange option[data-entitlement="none"] {
  display: none;
}
#filter-select-exchange option[data-entitlement="eod"] {
  display: none;
}

#mobile-filters-btn {
  display: none;
}

.col-company-mobile-wrapper {
  display: none;
}

.pro-badge {
  justify-content: center;
  align-items: center;
  background-color: #da373d;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #fff;
  padding: 0 6px;
  text-transform: uppercase;
  position: relative;
  margin-left: -10px;
  left: -3px;
  bottom: -3px;
  border-radius: 12px;
}
@media (max-width: 767px) {
  .pro-badge {
    font-size: 8px;
    line-height: 12px;
    margin: 0;
    left: 2px;
    bottom: 0;
  }
}

/* Dropdown Menu */
.dropdown {
  position: relative;
}
.h-full{
  height: 100%;
}
#nav-new a {
  font-size: 12.8px;
  border-bottom: 3px solid transparent;
}
#nav-new .menu .dropdown .nav-item,
#nav-new .menu .dropdown a {
  cursor: pointer;
}
#nav-new .menu .dropdown .nav-item svg {
  position: relative;
  top: -2px;
  left: 5px;
}
#nav-new .menu .dropdown .dropdown-menu {
  display: none;
  background: white;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
}
#nav-new .menu .dropdown .dropdown-menu {
  min-width: 130px;
  display: none;
  flex-direction: column;
}

#nav-new .menu .dropdown .dropdown-menu li {
  padding: 0;
  text-align: left;
}

#nav-new .menu .dropdown .dropdown-menu li:hover {
  background-color: #e9ecef;
}

#nav-new .menu .dropdown .dropdown-menu li a,
#nav-new .menu .dropdown .dropdown-menu li a.on-hover:hover,
#nav-new .menu .dropdown .dropdown-menu li a.active-link {
  border-bottom: none !important;
}
#mobile-menu .submenu .active-link-mobile,
#mobile-menu .submenu .dropdown-menu .active-link-mobile,
.profile .submenu .dropdown-menu .active-link-mobile {
  text-decoration: underline !important;
}
#mobile-menu .submenu .dropdown-toggle.active-link-mobile,
.profile .submenu .dropdown-toggle.active-link-mobile{
  text-decoration: none !important;
}
#mobile-menu .submenu a,
#mobile-menu .submenu .dropdown-menu a,
.profile .submenu .dropdown-menu a {
  transition: background-color text-decoration 0.2s !important;
}

#mobile-menu .submenu a:active,
#mobile-menu .submenu .dropdown-menu a:active,
.profile .submenu .dropdown-menu a:active {
  background-color: rgba(51, 181, 229, 0.4) !important; /* Light blue */
  text-decoration: underline !important;
}

#nav-new .menu .dropdown .dropdown-menu li a {
  display: flex;
  color: #000;
  white-space: nowrap;
  text-transform: capitalize;
  padding: 8px 16px;
  margin: 0;
}
#nav-new .menu .dropdown .dropdown-menu li a:hover {
  color: #000;
}

#nav-new .menu .dropdown:hover .dropdown-menu {
  display: block;
  border: 1px solid #dee2e6;
  border-top: none;
  border-radius: 0 0 3px 3px;
}

#nav-new .profile .submenu .relative {
  position: relative;
}
#mobile-menu .submenu a,
.profile .submenu a,
#nav-new .profile .submenu a {
  padding: 0 !important;
  margin: 0 !important;
  color: #000 !important;
}
.profile .submenu .dropdown-menu,
#nav-new .profile .submenu .dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  border: 1px solid #dcdcdc;
  position: absolute;
  top: 0;
  left: 100%;
}

#mobile-menu .submenu a {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  border-bottom: none !important;
}
#mobile-menu .submenu a svg {
  transform: rotate(-90deg) scale(0.9);
}
#mobile-menu .submenu .dropdown-menu {
  width: 150px;
  display: none;
}

#mobile-menu .submenu li.relative:hover .dropdown-menu {
  display: block;
}
@media (max-width: 767px) {
  .profile .submenu .dropdown-menu,
  #nav-new .profile .submenu .dropdown-menu {
    position: static;
    border: none;
  }
  #mobile-menu .submenu {
    width: 100% !important;
  }
  #mobile-menu .submenu .dropdown-menu {
    width: 100%;
  }
  .profile .submenu li,
  .profile .submenu a {
    font-size: 14px !important;
  }
  .profile .submenu li {
    padding-inline: 5px !important;
    border-top: 1px solid #dcdcdc;
  }
  .profile .submenu li:first-child{
    border-top-color: transparent;
  }
  .profile .submenu a {
    padding-inline: 0 !important;
  }
  ul.submenu li:hover, ul.submenu a:hover{
    background-color: transparent;
  }
  .profile .submenu li.relative:last-child{
    padding-bottom: 0 !important;
  }
  .profile .submenu li.relative >a{
    padding-inline: 5px !important;
  }
  .profile .submenu .dropdown-parent .dropdown-menu {
    display: none !important;
  }
  .profile .submenu .dropdown-parent.open .dropdown-menu.show {
    display: block !important;
  }
  .profile .submenu .dropdown-menu{
    border-top: 1px solid #dcdcdc;
    padding: 5px 0 0;
    margin: 10px 0 0;
  }
  .profile .submenu .dropdown-menu li{
    border-top: none;
    padding-inline: 5px !important;
    padding-block: 5px !important;
  }
  .profile .submenu .dropdown-menu li a{
    font-weight: 400;
  }
  .profile .submenu .dropdown-parent .dropdown-toggle svg,
  #mobile-menu .submenu .dropdown-parent .dropdown-toggle svg {
    transform: rotate(0deg) scale(0.9);
  }
  .profile .submenu .dropdown-parent.open .dropdown-toggle svg,
  #mobile-menu .submenu .dropdown-parent.open .dropdown-toggle svg{
    transform: rotate(180deg) scale(0.9);
  }
  #main-nav-user-name {
    display: none;
  }
}
@media only screen and (max-width: 641px) {
  #page-wrapper {
    padding: 10px;
    box-sizing: border-box;
    padding-top: 10px !important;
  }

  .inner-page-wrapper {
    width: 100%;
  }

  /* Mobile Filter Drawer Support */
  .filter-wrapper--mobile-trigger {
    display: block !important;
  }

  .filter-wrapper--desktop {
    display: none !important;
  }

  .filter-wrapper--search {
    display: flex !important;
  }

  .filter-wrapper--search .label {
    display: none;
  }

  #filter-tags-wrapper {
    padding: 0 4px;
  }

  #filter-control-buttons-wrapper {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .filter-selector {
    flex-basis: min-content;
    text-align: center;
    justify-content: center;
    margin-bottom: 0;
    max-width: 120px;
    margin-right: 0;
    margin-left: 0;
    position: unset;
    padding: 4px 10px;
  }

  .filter-selector:last-of-type .filter-selector-content {
    left: 10px !important;
  }

  .filter-selector-label {
    font-size: 12px;
  }

  .filter-selector-content {
    text-align: left;
    width: calc(100vw - 20px) !important;
    padding: 40px 0 40px 0;
    left: 10px;
    position: fixed;
    top: 10px;
  }

  #search {
    width: 100%;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid rgb(153, 153, 153);
    font-size: 12px;
  }

  #search::placeholder {
    font-size: 12px;
  }

  .slider-wrapper {
    width: 100% !important;
  }

  #search-wrapper {
    width: 100%;
    margin-bottom: 0px;
    margin-right: 0;
  }

  #mobile-filters-btn {
    display: block;
  }

  #mobile-filters-btn svg {
    width: 24px;
    fill: #192241;
  }

  .search-placeholder {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .filter-controls-wrapper {
    margin-bottom: 10px;
  }

  #filter-tags-wrapper {
    margin-top: 10px;
    margin-bottom: 16px;
  }

  /* Mobile keeps the title inside the card. Bottom hairline separates it
     from the row body since the column-header band is hidden here. */
  #table-title {
    padding: 12px 12px 10px;
    font-size: 12px;
    border-bottom: 1px solid #e5e7eb;
  }

  #table-header {
    display: none;
  }

  #table-wrapper {
    width: 100%;
  }

  .filter-tag {
    padding: 1px 1px 1px 6px;
    margin-bottom: 2px;
  }

  #filter-tags-container {
    flex-wrap: wrap;
  }

  .tag-text {
    font-size: 10px;
  }

  .load-more-button {
    text-align: center;
    margin-left: 0;
    transform: unset;
    width: 100%;
    font-size: 14px;
  }

  .single-row {
    display: grid;
    width: 100%;
    grid-template-columns: 25% 25% 40px 40px calc(50% - 80px);
    grid-template-rows: 1fr 1fr 1fr;
    padding: 4px 10px;
    position: relative;
  }

  .single-cell {
    padding: 0;
    width: unset;
  }

  .col-company-mobile-wrapper {
    display: flex;
    grid-row: 1;
    grid-column: 1 / 5;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
  }

  .col-company {
    display: none;
  }

  .col-company-mobile {
    font-size: 12px;
    font-weight: 700;
    width: unset;
    margin-right: 4px;
  }

  .col-exchange-mobile {
    font-size: 11px;
    width: unset;
  }

  .col-ticker-mobile {
    font-size: 11px;
    width: unset;
  }

  .col-news {
    width: 20px;
    grid-row: 1;
    grid-column: 5;
    width: 100%;
    text-align: right;
    pointer-events: none;
  }

  .col-news a {
    pointer-events: auto;
  }

  /* Mobile collapses the price-range cell to a single end-price line. The
     start price + arrow are hidden; a "Price: " prefix sits on the cell. */
  .col-price-range {
    grid-column: 3 / 5;
    grid-row: 2;
    font-size: 11px;
    text-align: left;
    flex-direction: row;
    gap: 0;
    align-items: center;
    justify-content: flex-start;
  }

  .col-price-range .price-start,
  .col-price-range .price-arrow {
    display: none;
  }

  .col-price-range::before {
    content: "Price: ";
    white-space: nowrap;
    font-weight: 700;
  }

  /* Mobile collapses the volume cell to share-volume only, prefixed with
     "Volume: ". Traded value (its own column on desktop) is hidden here to
     keep the row compact. */
  .col-volume {
    grid-column: 1 / 3;
    grid-row: 2;
    font-size: 11px;
    text-align: right;
    padding-right: 6px;
    flex-direction: row;
    gap: 0;
    align-items: center;
    justify-content: flex-end;
  }

  .col-volume::before {
    content: "Volume: ";
    white-space: nowrap;
    font-weight: 700;
  }

  /* Last Price is redundant on mobile — the collapsed .col-price-range
     already shows the end-of-range price with a "Price: " prefix. Traded
     value + Market Cap are hidden to keep the row compact. */
  .col-last-price,
  .col-traded-value,
  .col-value-marketcap {
    display: none;
  }

  .col-value-change {
    grid-column: 1 / 3;
    grid-row: 3;
    width: 100%;
    padding-right: 6px;
  }
  .col-value-percent-change {
    grid-column: 3 / 6;
    grid-row: 3;
    width: 100%;
  }

  .percent-change-label {
    font-size: 10px !important;
    line-height: 14px;
  }

  .bar-chart-wrapper {
    height: 14px;
  }

  .single-row.pad-left {
    padding-left: 26px;
  }

  .single-row .row-buttons {
    left: 4px;
    width: 18px;
    top: 4px;
    flex-direction: column;
  }

  .single-row .remove-row-btn {
    width: 18px;
    height: 18px;
  }

  .single-row .add-to-watchlist-btn {
    width: 18px;
    height: 18px;
  }
  .single-row .remove-row-btn.watchlist {
    width: 18px;
    height: 18px;
  }

  .page-title {
    font-size: 16px;
  }

  #market-buttons-wrapper {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .market-option {
    font-size: 12px;
    padding: 4px 10px;
  }
}

/* Sticky column header for the Movers table. Sits immediately below the
   sticky filter zone using the height variable published by
   /js/sticky-filters.js. Hidden on mobile (the existing media query at the
   641px breakpoint sets display:none on #table-header), so this only takes
   effect on desktop / tablet widths where the table is visible. */
@media (min-width: 642px) {
  #table-header {
    position: sticky;
    top: calc(65px + var(--mh-sticky-zone-h, 220px));
    z-index: 40;
  }
}

/* Collapsed sticky filter state — engaged by /js/sticky-filters.js when the
   user scrolls past ~80px. Drops the Market row so the pinned column shrinks
   to just the Filters pills + Company search while the user is scrolling
   results. Active Filters + date-nav stay. */
.mh-sticky-zone.is-scrolled #filters-section {
  padding: 8px 12px;
  transition: padding 0.18s ease;
}
.mh-sticky-zone.is-scrolled #filters-section .filter-wrapper {
  margin-bottom: 6px;
}
.mh-sticky-zone.is-scrolled #filters-section .filter-wrapper:last-child {
  margin-bottom: 0;
}
.mh-sticky-zone.is-scrolled #movers-market-wrapper {
  display: none;
}
/* Hide Active Filters strip while pinned. !important because
   market-movers.js's populate_filter_tags sets style="display: block" inline
   whenever a filter tag is present (which is exactly when we still want to
   hide it during scroll). Inline styles otherwise beat normal CSS. */
.mh-sticky-zone.is-scrolled #filter-tags-wrapper {
  display: none !important;
}
.mh-sticky-zone.is-scrolled #movers-date-nav {
  padding-top: 2px;
  padding-bottom: 4px;
}

/* ============================================================================
   Quick Search Type row — promoted to the first filter row so the four
   Movers categories (Gain / Loss / Absolute Change / Volume Movers) are one
   click away. Visual + behavioural parity with the News page's quick-options
   row and the Drilling page's quick-commodity row. Each pill carries an inline
   SVG icon (up / down / bidirectional / bars) instead of a colour swatch
   because the categories are conceptually distinct rather than commodity-like.
   ============================================================================ */
#quick-search-type-buttons-wrapper {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 6px;
  background-color: #f1f5f9;
  border-radius: 1000px;
  padding: 6px;
  flex-grow: 0;
  width: max-content;
}
.quick-search-type-option {
  border: 1px solid transparent;
  color: #1f2937;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  background: #f1f5f9;
  transition: all .15s ease;
  white-space: nowrap;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.quick-search-type-option.selected {
  background: #30a5bf;
  border-color: rgba(0, 0, 0, .04);
  color: #fff;
  box-shadow: 0 6px 18px rgba(48, 165, 191, .35);
}
.quick-search-type-option.selected .quick-search-type-icon {
  color: #fff !important;
}
.quick-search-type-option:hover:not(.selected) {
  background: #e2e8f0;
}
.quick-search-type-icon {
  flex-shrink: 0;
  color: #5b6577;
}

/* ============================================================================
   Legacy filter pills row — Date Range / Search Type / Exchange / News /
   Marketcap / Stock Price / $ Volume. Hidden on desktop after the refactor:
   - Search Type → promoted to quick-search-type row above
   - Date Range → moved into the main row via DateRangePickerWidget
   - Exchange / News / Marketcap / Stock Price / $ Volume → live inside the
     MobileFilterDrawer (More Filters drawer)
   The DOM is kept in place because market-movers.js's existing handlers,
   datepicker instance (datepicker-full.min.js), rangeSlider instances, and
   the radio inputs read by run_search() all still operate on these nodes.
   The drawer drives them via syncDrawerXToMain() in market-movers.js.
   ============================================================================ */
.movers-legacy-pills-row {
  display: none !important;
}

/* ============================================================================
   Main filters row — Company search + Date Range pill + Clear / More Filters.
   Mirrors News' #search-date-and-more-filters-wrapper layout: search on left,
   date pill, then a right-anchored actions cluster pushed via margin-left:auto.
   ============================================================================ */
.movers-main-row {
  display: flex;
  gap: 2em;
  align-items: center;
  flex-wrap: wrap;
}
.movers-search-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
}
.movers-search-wrapper #search-wrapper {
  position: relative;
}
.movers-date-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-grow: 0;
}
/* The shared `.filter-wrapper span.label` rule pins all labels to a 74px box;
   "Date Range" is wider than that and bumps against the pill with no gap.
   Override to width:auto so the flex `gap: 10px` actually shows up. */
/* "Search Type" needs a bit more room than the shared 74px label width or it
   truncates against the first pill. Auto + a small right gap mirrors the
   Date Range override below. */
#movers-quick-search-type-wrapper > .label {
  width: auto !important;
  padding-right: 4px;
}

.movers-date-wrapper > .label {
  width: auto !important;
  padding-right: 4px;
}
.movers-actions-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: auto;
}
.movers-actions-wrapper .reset-news-filter-btn {
  cursor: pointer;
  color: #5b6577;
  font-size: 14px;
  padding: 6px 8px;
  white-space: nowrap;
}
.movers-actions-wrapper .reset-news-filter-btn:hover {
  color: #1f2937;
}
.movers-actions-wrapper .news-filter-btn {
  background: #30a5bf;
  color: #fff;
  box-shadow: 0 6px 18px rgba(48, 165, 191, .35);
  position: relative;
  border: 1px solid transparent;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
}
.movers-actions-wrapper .news-filter-btn:hover {
  opacity: 0.85;
}
.movers-actions-wrapper .news-filter-btn .filter-count-badge {
  position: absolute;
  border-radius: 1000px;
  background-color: #6e6e6e;
  color: #fff;
  font-size: 11px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -5px;
  right: -5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
.movers-actions-wrapper .news-filter-btn .filter-count-badge.has-active {
  opacity: 1;
}

/* MobileFilterDrawer desktop override — same trick used on the Drilling page.
   /css/mobile-filter-drawer.css hides .mobile-filter-drawer at >=642px because
   it's mobile-only on other surfaces. Movers reuses the drawer as its desktop
   More Filters surface, so override the media-query hide for our instance
   (#mobile-filter-drawer is the default containerId set in
   market-movers.js initMobileFilterDrawer()). The transform-based open/close
   handles actual visibility — the override just makes the drawer
   addressable. */
@media (min-width: 642px) {
  #mobile-filter-drawer.mobile-filter-drawer {
    display: flex !important;
  }
  #mobile-filter-drawer-backdrop.mobile-filter-drawer-backdrop {
    display: block !important;
  }
  /* Market / Date Range / Search Type sections are surfaced in the main UI
     (Market row, main-row Date pill, Quick Search Type row) — hide them in
     the drawer on desktop to avoid duplicates. On mobile (<=641px) the main
     UI is hidden and these stay visible in the drawer as the sole entry
     points for those filters. */
  #mobile-filter-drawer .mobile-filter-drawer__section[data-section-id="market"],
  #mobile-filter-drawer .mobile-filter-drawer__section[data-section-id="date-range"],
  #mobile-filter-drawer .mobile-filter-drawer__section[data-section-id="search-type"] {
    display: none !important;
  }
}

/* Mobile (<=641px) overrides — the existing mobile-filter-drawer.css hides
   all .filter-wrapper--desktop and shows the .filter-wrapper--mobile-trigger
   button. Bring the company search back so users can still search by name
   without opening the drawer; the rest of the desktop filter rows stay
   hidden because the drawer owns them on mobile. */
@media (max-width: 641px) {
  .filters-section .movers-main-row.filter-wrapper--desktop {
    display: flex !important;
    flex-wrap: wrap;
  }
  .filters-section .movers-main-row.filter-wrapper--desktop .movers-search-wrapper {
    display: flex !important;
    width: 100%;
  }
  .filters-section .movers-main-row.filter-wrapper--desktop .movers-date-wrapper,
  .filters-section .movers-main-row.filter-wrapper--desktop .movers-actions-wrapper {
    display: none !important;
  }
}

/* Collapsed sticky state — extend the existing scroll-collapse pattern. Hide
   the quick search type row in addition to the Market row when scrolled so
   only the main row (search + date + actions) stays pinned. */
.mh-sticky-zone.is-scrolled #movers-quick-search-type-wrapper {
  display: none;
}
.mh-sticky-zone.is-scrolled .movers-main-row .label {
  display: none;
}
.mh-sticky-zone.is-scrolled .movers-date-wrapper {
  flex-grow: 0;
}

/* Pagination — Movers reuses the drilling-pagination class names but doesn't
   load the drilling stylesheet, so the desktop layout (info on left, controls
   on right, pages inline) needs its own copy here. Mobile overrides live
   alongside the page's other mobile rules further down once present, but the
   base styles already render cleanly at small widths. */
.drilling-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin: 8px 0 16px 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
}

.drilling-pagination.loading {
  opacity: 0.6;
  pointer-events: none;
}

.drilling-pagination__info {
  color: #64748b;
}

.drilling-pagination__controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.drilling-pagination__pages {
  display: flex;
  align-items: center;
  gap: 2px;
}

.drilling-pagination__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.drilling-pagination__btn:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.drilling-pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.drilling-pagination__page {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #475569;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.drilling-pagination__page:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.drilling-pagination__page--active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}

.drilling-pagination__page--active:hover {
  background: #2563eb;
  border-color: #2563eb;
}

.drilling-pagination__ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  color: #94a3b8;
  font-size: 14px;
}

@media (max-width: 641px) {
  .drilling-pagination {
    padding: 12px 8px;
    margin: 16px 0;
    flex-direction: column;
    gap: 8px;
  }
  .drilling-pagination__info {
    font-size: 12px;
  }
  .drilling-pagination__controls {
    gap: 4px;
  }
  .drilling-pagination__page {
    min-width: 32px;
    height: 32px;
    font-size: 12px;
  }
  .drilling-pagination__btn {
    width: 32px;
    height: 32px;
  }
  .drilling-pagination__pages {
    gap: 2px;
  }
}