/* Timeline toolbar (All Companies / Following / bookmark / refresh /
   Filter a company / Filters) -- single source of truth for border, radius
   and hover on desktop.

   These controls are styled by ~60 rules across style.css, custom.css,
   responsive.css and dark-mode.css, several with !important, ID selectors
   (#all-companies-tab, which BOTH pills carry) and a react-select control
   that stacks a box-shadow on top of its real border -- which is why
   patching individual rules kept leaving one control mismatched. This file
   is linked after all of them (layout.tsx), and every selector starts with
   `html body` so it also out-ranks dark-mode.css's `body.dark-mode ...
   !important` rules (between two !important rules the more specific one
   wins, regardless of file order -- that's what kept the "Filter a company"
   shadow alive in dark mode).

   Desktop only: at <= 991px responsive.css deliberately restyles this row
   into a mobile pill/segmented layout, which is left as-is. */

@media (min-width: 992px) {
  /* Shape: thin single border, 5px radius, no stacked shadow. */
  html body .timeline_inner_header .timeline_main_post_tab .nav-item .nav-link,
  html body .timeline_inner_header .timeline_filter_btn,
  html body .timeline_inner_header .filter-trigger-btn,
  html body .timeline_inner_header .timeline-select__control {
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    /* One fill for every control, active or not -- the old rules gave each
       control its own (and left "Following" unfilled). Active state is shown
       by green border + text only (below), never by a fill change. */
    background-color: var(--eq-white) !important;
    transition: border-color 0.15s ease-in-out;
  }
  html body.dark-mode .timeline_inner_header .timeline_main_post_tab .nav-item .nav-link,
  html body.dark-mode .timeline_inner_header .timeline_filter_btn,
  html body.dark-mode .timeline_inner_header .filter-trigger-btn,
  html body.dark-mode .timeline_inner_header .timeline-select__control {
    background-color: #1a1a1a !important;
  }

  /* Resting border color. */
  html body .timeline_inner_header .timeline_main_post_tab .nav-item .nav-link:not(.active_tab),
  html body .timeline_inner_header .timeline_filter_btn,
  html body .timeline_inner_header .filter-trigger-btn:not(.filter-trigger-btn--active),
  html body .timeline_inner_header .timeline-select__control {
    border-color: #d6d6d6 !important;
  }
  html body.dark-mode .timeline_inner_header .timeline_main_post_tab .nav-item .nav-link:not(.active_tab),
  html body.dark-mode .timeline_inner_header .timeline_filter_btn,
  html body.dark-mode .timeline_inner_header .filter-trigger-btn:not(.filter-trigger-btn--active),
  html body.dark-mode .timeline_inner_header .timeline-select__control {
    border-color: #535353 !important;
  }

  /* Green: on hover for every control, and persistently while that control
     is "on" -- selected tab, bookmarked view, active filters, and a company
     picked in "Filter a company" (react-select marks its value container
     --has-value until the selection is cleared, so the border stays green
     after the box loses focus instead of reverting on outside click). */
  html body .timeline_inner_header .timeline_main_post_tab .nav-item .nav-link:hover,
  html body .timeline_inner_header .timeline_filter_btn:hover,
  html body .timeline_inner_header .filter-trigger-btn:hover,
  html body .timeline_inner_header .timeline-select__control:hover,
  html body .timeline_inner_header .timeline-select__control--is-focused,
  html body .timeline_inner_header .timeline-select__control:has(.timeline-select__value-container--has-value),
  html body .timeline_inner_header .timeline_main_post_tab .nav-item .nav-link.active_tab,
  html body .timeline_inner_header .timeline_filter_btn.timeline_filter_btn--active,
  html body .timeline_inner_header .filter-trigger-btn.filter-trigger-btn--active,
  html body.dark-mode .timeline_inner_header .timeline_main_post_tab .nav-item .nav-link:hover,
  html body.dark-mode .timeline_inner_header .timeline_filter_btn:hover,
  html body.dark-mode .timeline_inner_header .filter-trigger-btn:hover,
  html body.dark-mode .timeline_inner_header .timeline-select__control:hover,
  html body.dark-mode .timeline_inner_header .timeline-select__control--is-focused,
  html body.dark-mode .timeline_inner_header .timeline-select__control:has(.timeline-select__value-container--has-value),
  html body.dark-mode .timeline_inner_header .timeline_main_post_tab .nav-item .nav-link.active_tab,
  html body.dark-mode .timeline_inner_header .timeline_filter_btn.timeline_filter_btn--active,
  html body.dark-mode .timeline_inner_header .filter-trigger-btn.filter-trigger-btn--active {
    border-color: var(--eq-green) !important;
  }

  /* Green text while "on". The selected company in "Filter a company" is
     already green (SearchComponent's singleValue / dark-mode.css), and the
     bookmark is an icon that swaps to its green active image. */
  html body .timeline_inner_header .timeline_main_post_tab .nav-item .nav-link.active_tab,
  html body.dark-mode .timeline_inner_header .timeline_main_post_tab .nav-item .nav-link.active_tab {
    color: var(--eq-green) !important;
  }
}

/* Active Filters button on Timeline (desktop + mobile): no green fill -- same
   white background as the rest of the toolbar, green border + green icon/text,
   and a red dot sitting on the top border above the icon. Overrides the shared
   green-fill/orange-dot look from custom.css for Timeline only. */
html body .timeline_inner_header .filter-trigger-btn.filter-trigger-btn--active {
  background-color: var(--eq-white) !important;
  border-color: var(--eq-green) !important;
  color: var(--eq-green) !important;
}
html body.dark-mode .timeline_inner_header .filter-trigger-btn.filter-trigger-btn--active {
  background-color: #0e1213 !important;
}
html body .timeline_inner_header .filter-trigger-btn.filter-trigger-btn--active::after {
  top: -10px;
  left: 12px;
  right: auto;
  width: 18px;
  height: 18px;
  background-color: #dc2626;
  border: 4px solid var(--eq-white);
}
html body.dark-mode .timeline_inner_header .filter-trigger-btn.filter-trigger-btn--active::after {
  border-color: #0e1213;
}
@media (min-width: 992px) {
  /* Desktop toolbar controls use #1a1a1a in dark mode (see top of file). */
  html body.dark-mode .timeline_inner_header .filter-trigger-btn.filter-trigger-btn--active {
    background-color: #1a1a1a !important;
  }
  html body.dark-mode .timeline_inner_header .filter-trigger-btn.filter-trigger-btn--active::after {
    border-color: #1a1a1a;
  }
}

/* ── Deals + Delivery toolbar (All/NSE/BSE, All Companies / Following,
   Export CSV, Filters) ─────────────────────────────────────────────────────
   Same normal/active design as the Timeline toolbar above: thin 1px border,
   5px radius, one fill for every control, green border on hover, and green
   border + green text (never a fill) while a control is "on". The All
   Companies / Following buttons carry IDs (#all-companies-tab/-tab2) that
   older mobile rules target with !important, so these selectors use the IDs
   too to out-rank them. Scoped to Deals/Delivery so Calendar etc. keep
   their own look. */
html body .delivery_screen .delivery-exchange-group {
  display: inline-flex;
  gap: 6px;
}
/* Extra space between Filters and the All/NSE/BSE group at the end of the row. */
@media (min-width: 992px) {
  html body .delivery_screen .deal_conty_right > * + .delivery-exchange-group {
    margin-left: 18px;
  }
}
html body .delivery_screen .deal_conty_right .delivery-exchange-btn {
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  color: var(--eq-dark-grey);
  cursor: pointer;
}
html body.dark-mode .delivery_screen .deal_conty_right .delivery-exchange-btn {
  color: #c6d1ce;
}
html body :is(.deals_screen, .delivery_screen) .deal_conty_right .delivery-exchange-btn,
html body :is(.deals_screen, .delivery_screen) .deal_conty_right #all-companies-tab,
html body :is(.deals_screen, .delivery_screen) .deal_conty_right #all-companies-tab2,
html body :is(.deals_screen, .delivery_screen) .deal_conty_right .export-btn,
html body :is(.deals_screen, .delivery_screen) .deal_conty_right .filter-trigger-btn,
html body .company-deals-tab .export-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
  border: 1px solid #d6d6d6 !important;
  border-radius: 5px !important;
  background-color: var(--eq-white) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease-in-out;
}
html body :is(.deals_screen, .delivery_screen) .deal_conty_right #all-companies-tab,
html body :is(.deals_screen, .delivery_screen) .deal_conty_right #all-companies-tab2 {
  padding: 0 14px;
  color: var(--eq-dark-grey) !important;
}
html body :is(.deals_screen, .delivery_screen) .deal_conty_right .export-btn,
html body .company-deals-tab .export-btn {
  width: 38px;
  color: var(--eq-darker-grey) !important;
}
html body.dark-mode :is(.deals_screen, .delivery_screen) .deal_conty_right .delivery-exchange-btn,
html body.dark-mode :is(.deals_screen, .delivery_screen) .deal_conty_right #all-companies-tab,
html body.dark-mode :is(.deals_screen, .delivery_screen) .deal_conty_right #all-companies-tab2,
html body.dark-mode :is(.deals_screen, .delivery_screen) .deal_conty_right .export-btn,
html body.dark-mode :is(.deals_screen, .delivery_screen) .deal_conty_right .filter-trigger-btn,
html body.dark-mode .company-deals-tab .export-btn {
  border-color: #535353 !important;
  background-color: #1a1a1a !important;
}
html body.dark-mode :is(.deals_screen, .delivery_screen) .deal_conty_right #all-companies-tab,
html body.dark-mode :is(.deals_screen, .delivery_screen) .deal_conty_right #all-companies-tab2 {
  color: #c6d1ce !important;
}
html body.dark-mode :is(.deals_screen, .delivery_screen) .deal_conty_right .export-btn,
html body.dark-mode .company-deals-tab .export-btn {
  color: #e9f0ee !important;
}

/* Hover (every control) and "on" (selected tab, active filters): green border. */
html body :is(.deals_screen, .delivery_screen) .deal_conty_right .delivery-exchange-btn:hover,
html body :is(.deals_screen, .delivery_screen) .deal_conty_right .delivery-exchange-btn--active,
html body.dark-mode :is(.deals_screen, .delivery_screen) .deal_conty_right .delivery-exchange-btn:hover,
html body.dark-mode :is(.deals_screen, .delivery_screen) .deal_conty_right .delivery-exchange-btn--active,
html body :is(.deals_screen, .delivery_screen) .deal_conty_right #all-companies-tab:hover,
html body :is(.deals_screen, .delivery_screen) .deal_conty_right #all-companies-tab2:hover,
html body :is(.deals_screen, .delivery_screen) .deal_conty_right .export-btn:hover,
html body .company-deals-tab .export-btn:hover,
html body :is(.deals_screen, .delivery_screen) .deal_conty_right .filter-trigger-btn:hover,
html body :is(.deals_screen, .delivery_screen) .deal_conty_right #all-companies-tab.active_tab,
html body :is(.deals_screen, .delivery_screen) .deal_conty_right #all-companies-tab2.active_tab,
html body :is(.deals_screen, .delivery_screen) .deal_conty_right .filter-trigger-btn.filter-trigger-btn--active,
html body.dark-mode :is(.deals_screen, .delivery_screen) .deal_conty_right #all-companies-tab:hover,
html body.dark-mode :is(.deals_screen, .delivery_screen) .deal_conty_right #all-companies-tab2:hover,
html body.dark-mode :is(.deals_screen, .delivery_screen) .deal_conty_right .export-btn:hover,
html body.dark-mode .company-deals-tab .export-btn:hover,
html body.dark-mode :is(.deals_screen, .delivery_screen) .deal_conty_right .filter-trigger-btn:hover,
html body.dark-mode :is(.deals_screen, .delivery_screen) .deal_conty_right #all-companies-tab.active_tab,
html body.dark-mode :is(.deals_screen, .delivery_screen) .deal_conty_right #all-companies-tab2.active_tab,
html body.dark-mode :is(.deals_screen, .delivery_screen) .deal_conty_right .filter-trigger-btn.filter-trigger-btn--active {
  border-color: var(--eq-green) !important;
}
/* Green text/icon while "on" -- and the export icon on hover (it's an
   action, not a toggle, so it never stays green). */
html body :is(.deals_screen, .delivery_screen) .deal_conty_right .delivery-exchange-btn--active,
html body :is(.deals_screen, .delivery_screen) .deal_conty_right #all-companies-tab.active_tab,
html body :is(.deals_screen, .delivery_screen) .deal_conty_right #all-companies-tab2.active_tab,
html body :is(.deals_screen, .delivery_screen) .deal_conty_right .filter-trigger-btn.filter-trigger-btn--active,
html body :is(.deals_screen, .delivery_screen) .deal_conty_right .export-btn:hover,
html body .company-deals-tab .export-btn:hover {
  color: var(--eq-green) !important;
}

/* Active Filters: same red dot as Timeline's active Filters button. */
html body :is(.deals_screen, .delivery_screen) .deal_conty_right .filter-trigger-btn.filter-trigger-btn--active::after {
  top: -10px;
  left: 12px;
  right: auto;
  width: 18px;
  height: 18px;
  background-color: #dc2626;
  border: 4px solid var(--eq-white);
}
html body.dark-mode :is(.deals_screen, .delivery_screen) .deal_conty_right .filter-trigger-btn.filter-trigger-btn--active::after {
  border-color: #1a1a1a;
}

/* Mobile: drop the old navy (#313449) band behind this row -- the controls
   now carry their own borders -- and keep All Companies / Following side
   by side with the icon buttons after them. */
@media (max-width: 991px) {
  html body :is(.deals_screen, .delivery_screen) .deal_conty_right {
    background-color: transparent;
    padding: 0;
    gap: 6px;
    margin-bottom: 8px;
  }
  html body :is(.deals_screen, .delivery_screen) .deal_conty_right .timeline_main_post_tab {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 6px;
    border: 0;
  }
  html body :is(.deals_screen, .delivery_screen) .deal_conty_right .timeline_main_post_tab li.nav-item {
    flex: 1 1 0;
    width: auto;
  }
  html body :is(.deals_screen, .delivery_screen) .deal_conty_right #all-companies-tab,
  html body :is(.deals_screen, .delivery_screen) .deal_conty_right #all-companies-tab2 {
    width: 100%;
    font-size: 13px;
  }
  html body :is(.deals_screen, .delivery_screen) .deal_conty_right .filter-trigger-btn {
    width: 38px;
  }
}

/* Delivery mobile: the view tabs and the controls share one
   .deal_conty_nav_row, which doesn't wrap by default -- so the full-width
   controls pushed the tabs off-screen. Wrap it: controls first (All/NSE/BSE +
   export + filters, then All Companies / Following on their own line), view
   tabs below. */
@media (max-width: 991px) {
  html body .delivery_screen .deal_conty_nav_row {
    flex-wrap: wrap;
    width: 100%;
  }
  html body .delivery_screen .deal_conty_nav_row > .deal_conty_nav {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html body .delivery_screen .deal_conty_nav_row > .deal_conty_nav li {
    flex: 0 0 auto;
  }
  html body .delivery_screen .deal_conty_right {
    flex-wrap: wrap;
  }
  html body .delivery_screen .deal_conty_right .delivery-exchange-group {
    order: 1;
    flex: 1 1 auto;
  }
  html body .delivery_screen .deal_conty_right .delivery-exchange-btn {
    flex: 1 1 0;
  }
  html body .delivery_screen .deal_conty_right .export-csv-icon-wrap {
    order: 2;
  }
  html body .delivery_screen .deal_conty_right .filter-trigger-btn {
    order: 3;
  }
  html body .delivery_screen .deal_conty_right .timeline_main_post_tab {
    order: 4;
    flex: 1 1 100%;
  }
}

/* ── Sectors > Performance toolbar (Return Total/CAGR, Universe
   Standard/Comparable, Table/Treemap/Refresh icons) ─────────────────────────
   Same normal/active design as the Deals/Delivery toolbar above: separate
   boxes, thin 1px border, 5px radius, one fill, green border on hover and
   green border + green text/icon (never a fill) while a control is "on".
   Labels ("Return (3Y / 5Y / 10Y):", "Universe:") are left as they are. */
html body .sectors_screen .sectors-return-universe-row .btn-group {
  gap: 6px;
}
html body .sectors_screen .sectors-return-universe-row .btn-group > .btn,
html body .sectors_screen .sectors-return-universe-row .sectors-view-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin-left: 0 !important;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid #d6d6d6 !important;
  border-radius: 5px !important;
  background-color: var(--eq-white) !important;
  color: var(--eq-dark-grey) !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 500;
  filter: none;
  transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
html body .sectors_screen .sectors-return-universe-row .sectors-view-icon-btn {
  width: 38px;
  padding: 0;
}
html body .sectors_screen .sectors-return-universe-row .sectors-view-icons {
  gap: 6px;
}
html body.dark-mode .sectors_screen .sectors-return-universe-row .btn-group > .btn,
html body.dark-mode .sectors_screen .sectors-return-universe-row .sectors-view-icon-btn {
  border-color: #535353 !important;
  background-color: #1a1a1a !important;
  color: #c6d1ce !important;
}
/* Hover + "on" (selected option / selected view): green border + green text. */
html body .sectors_screen .sectors-return-universe-row .btn-group > .btn:not(:disabled):hover,
html body .sectors_screen .sectors-return-universe-row .btn-group > .btn.btn-primary,
html body .sectors_screen .sectors-return-universe-row .sectors-view-icon-btn:not(:disabled):hover,
html body .sectors_screen .sectors-return-universe-row .sectors-view-icon-btn.active,
html body.dark-mode .sectors_screen .sectors-return-universe-row .btn-group > .btn:not(:disabled):hover,
html body.dark-mode .sectors_screen .sectors-return-universe-row .btn-group > .btn.btn-primary,
html body.dark-mode .sectors_screen .sectors-return-universe-row .sectors-view-icon-btn:not(:disabled):hover,
html body.dark-mode .sectors_screen .sectors-return-universe-row .sectors-view-icon-btn.active {
  border-color: var(--eq-green) !important;
}
html body .sectors_screen .sectors-return-universe-row .btn-group > .btn.btn-primary,
html body .sectors_screen .sectors-return-universe-row .sectors-view-icon-btn.active,
html body.dark-mode .sectors_screen .sectors-return-universe-row .btn-group > .btn.btn-primary,
html body.dark-mode .sectors_screen .sectors-return-universe-row .sectors-view-icon-btn.active {
  color: var(--eq-green) !important;
}

/* ── FII/FPI & DII toolbar (period tabs + Daily/Cumulative, Table/Chart,
   CSV download) ─────────────────────────────────────────────────────────────
   Same normal/active design as the Deals/Delivery toolbar: separate boxes,
   1px border, 5px radius, one fill, green border on hover, green border +
   green text/icon (never a fill) while "on". */
html body .fii-dii-activity .fd-toolbar-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
html body .fii-dii-activity .fd-tool-group {
  display: inline-flex;
  gap: 6px;
}
html body .fii-dii-activity .fd-tool-btn,
html body .fii-dii-activity .fd-tool-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  background-color: var(--eq-white);
  color: var(--eq-dark-grey);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
html body .fii-dii-activity .fd-tool-btn--icon {
  width: 38px;
  padding: 0;
  color: var(--eq-darker-grey);
}
html body .fii-dii-activity .fd-tool-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
html body .fii-dii-activity .fd-tool-date {
  padding: 0 10px;
  font-size: 13px;
  color: var(--eq-darker-grey);
}
html body .fii-dii-activity .fd-tool-date-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  color: var(--eq-dark-grey);
}
html body.dark-mode .fii-dii-activity .fd-tool-btn,
html body.dark-mode .fii-dii-activity .fd-tool-date {
  border-color: #535353;
  background-color: #1a1a1a;
  color: #c6d1ce;
}
html body.dark-mode .fii-dii-activity .fd-tool-btn--icon {
  color: #e9f0ee;
}
html body.dark-mode .fii-dii-activity .fd-tool-date {
  color-scheme: dark;
}
html body.dark-mode .fii-dii-activity .fd-tool-date-wrap {
  color: #c6d1ce;
}
html body .fii-dii-activity .fd-tool-btn:not(:disabled):hover,
html body .fii-dii-activity .fd-tool-date:hover,
html body .fii-dii-activity .fd-tool-date:focus,
html body .fii-dii-activity .fd-tool-btn--active,
html body.dark-mode .fii-dii-activity .fd-tool-btn:not(:disabled):hover,
html body.dark-mode .fii-dii-activity .fd-tool-date:hover,
html body.dark-mode .fii-dii-activity .fd-tool-date:focus,
html body.dark-mode .fii-dii-activity .fd-tool-btn--active {
  border-color: var(--eq-green);
  outline: none;
}
html body .fii-dii-activity .fd-tool-btn--active,
html body.dark-mode .fii-dii-activity .fd-tool-btn--active,
html body .fii-dii-activity .fd-tool-btn--icon:not(:disabled):hover {
  color: var(--eq-green);
}

/* Mobile: same treatment as Delivery -- no navy band, row wraps with the
   controls first and the period tabs (scrollable) below. */
@media (max-width: 991px) {
  html body .fii-dii-activity .fd-toolbar .deal_conty_nav_row {
    flex-wrap: wrap;
    width: 100%;
  }
  html body .fii-dii-activity .fd-toolbar .deal_conty_right {
    background-color: transparent;
    padding: 0;
    width: 100%;
    margin-bottom: 8px;
    justify-content: flex-end;
  }
  html body .fii-dii-activity .fd-toolbar .deal_conty_nav_row > .deal_conty_nav {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html body .fii-dii-activity .fd-toolbar .deal_conty_nav_row > .deal_conty_nav li {
    flex: 0 0 auto;
  }
}

/* ── Indices toolbar (Filter by Category, Return Total/CAGR, BSE/NSE) ───────
   Same normal/active design as the Deals/Delivery toolbar. */
html body .indices_screen .ix-toolbar-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
html body .indices_screen .ix-tool-group {
  display: inline-flex;
  gap: 6px;
}
/* BSE / NSE sits last with extra space before it (same as Delivery's All/NSE/BSE). */
@media (min-width: 992px) {
  html body .indices_screen .ix-toolbar-right > * + .ix-exchange-group {
    margin-left: 4px;
  }
}
html body .indices_screen .ix-tool-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--eq-dark-grey);
  white-space: nowrap;
}
html body .indices_screen .ix-tool-btn,
html body .indices_screen .ix-tool-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  background-color: var(--eq-white);
  color: var(--eq-dark-grey);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
html body .indices_screen .ix-tool-select {
  min-width: 200px;
  padding: 0 34px 0 12px;
  color: var(--eq-darker-grey);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b5b5b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
html body.dark-mode .indices_screen .ix-tool-btn,
html body.dark-mode .indices_screen .ix-tool-select {
  border-color: #535353;
  background-color: #1a1a1a;
  color: #c6d1ce;
}
html body.dark-mode .indices_screen .ix-tool-select {
  color: #e9f0ee;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c6d1ce' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
html body.dark-mode .indices_screen .ix-tool-select option {
  background: #1a1a1a;
  color: #e9f0ee;
}
html body.dark-mode .indices_screen .ix-tool-label-wrap {
  color: #c6d1ce;
}
html body .indices_screen .ix-tool-btn:hover,
html body .indices_screen .ix-tool-select:hover,
html body .indices_screen .ix-tool-select:focus,
html body .indices_screen .ix-tool-btn--active,
html body.dark-mode .indices_screen .ix-tool-btn:hover,
html body.dark-mode .indices_screen .ix-tool-select:hover,
html body.dark-mode .indices_screen .ix-tool-select:focus,
html body.dark-mode .indices_screen .ix-tool-btn--active {
  border-color: var(--eq-green);
  outline: none;
  box-shadow: none;
}
html body .indices_screen .ix-tool-btn--active,
html body.dark-mode .indices_screen .ix-tool-btn--active {
  color: var(--eq-green);
}

/* Mobile: no navy band; the row wraps with controls first, tabs below. */
@media (max-width: 991px) {
  html body .indices_screen .ix-toolbar .deal_conty_nav_row {
    flex-wrap: wrap;
    width: 100%;
  }
  html body .indices_screen .ix-toolbar .deal_conty_right {
    background-color: transparent;
    padding: 0;
    width: 100%;
    margin-bottom: 8px;
    gap: 8px;
    /* Return mode (label) and Exchange (BSE/NSE) are both compact groups now
       that neither is forced to 100% width below -- let them share this row,
       spread to opposite ends, instead of Exchange wrapping to its own line
       with nothing on the left (the "all 4 buttons gathered on the right,
       stacked" look this replaces). */
    justify-content: space-between;
  }
  html body .indices_screen .ix-toolbar .deal_conty_nav_row > .deal_conty_nav {
    display: flex;
    width: 100%;
  }
  /* Category (the <label>) stays its own full-width row -- label left,
     dropdown stretching to fill on the right. */
  html body .indices_screen label.ix-tool-label-wrap {
    width: 100%;
    justify-content: space-between;
  }
  /* Return mode (the <div>) no longer forces a width:100% line of its own,
     so it (label text + Total/CAGR together) can sit beside .ix-exchange-group
     on the row above -- there's enough width for both from 429px up. Below
     429px it's switched to a stacked "label above, 2 left / 2 right" layout
     instead (own media query further down). */
  html body .indices_screen div.ix-tool-label-wrap {
    width: auto;
  }
  html body .indices_screen .ix-tool-select {
    flex: 1 1 auto;
    min-width: 0;
    /* Pill-rounded like every other page's mobile search/filter box
       (responsive.css's .deal-company-search__control rule). */
    border-radius: 20px;
  }
  html body .indices_screen .ix-exchange-group {
    margin-left: 0;
  }
}

/* Below 429px there isn't room for "Return (3Y/5Y/10Y): [Total][CAGR]" and
   [BSE][NSE] on one row -- stack instead: label on its own line, then
   Total/CAGR and BSE/NSE on the row below it, spread left/right. */
@media (max-width: 428.98px) {
  html body .indices_screen .ix-toolbar .deal_conty_right {
    justify-content: space-between;
  }
  /* Drop the wrapper's own box so its children (the label text and the
     Total/CAGR button group) become direct flex items of .deal_conty_right,
     same level as .ix-exchange-group -- the label text then gets a forced
     100%-width line of its own, and Total/CAGR flows onto the next line
     together with BSE/NSE, spread to opposite ends by the row's own
     justify-content: space-between above. */
  html body .indices_screen div.ix-tool-label-wrap {
    display: contents;
  }
  html body .indices_screen div.ix-tool-label-wrap > span {
    display: block;
    width: 100%;
    font-size: 13px;
    color: var(--eq-dark-grey);
    margin-bottom: 2px;
  }
  html body.dark-mode .indices_screen div.ix-tool-label-wrap > span {
    color: #c6d1ce;
  }
}

/* ── Indices > History filter block ──────────────────────────────────────────
   Filters sit in one full-width block; fields use the shared control style
   (38px, 1px border, 5px radius, green border on hover/focus) and keep a
   green border while they hold a non-default value. */
html body .indices_screen .ix-filter-block {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  /* Gap below the toolbar, matching Deals/Delivery's .deal_list_conty_block
     margin-top -- this is the first thing rendered in the History tab, so
     without its own top margin the toolbar sat flush against it. */
  margin-top: 15px;
  margin-bottom: 12px;
  border: 1px solid #e0e5e3;
  border-radius: 8px;
  background: var(--eq-white);
}
html body.dark-mode .indices_screen .ix-filter-block {
  border-color: #1f2829;
  background: #0e1213;
}
html body .indices_screen .ix-filter-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
html body .indices_screen .ix-filter-label {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--eq-dark-grey);
}
html body.dark-mode .indices_screen .ix-filter-label {
  color: #c6d1ce;
}
html body .indices_screen .ix-field {
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  background-color: var(--eq-white);
  color: var(--eq-darker-grey);
  font: inherit;
  font-size: 14px;
  box-shadow: none;
  outline: none;
  transition: border-color 0.15s ease-in-out;
}
html body .indices_screen .ix-field--select {
  padding-right: 34px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b5b5b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
html body .indices_screen .ix-field--search {
  padding-right: 32px;
}
html body.dark-mode .indices_screen .ix-field {
  border-color: #535353;
  background-color: #1a1a1a;
  color: #e9f0ee;
  color-scheme: dark;
}
html body.dark-mode .indices_screen .ix-field--select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c6d1ce' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
html body.dark-mode .indices_screen .ix-field--select option {
  background: #1a1a1a;
  color: #e9f0ee;
}
html body .indices_screen .ix-field:hover,
html body .indices_screen .ix-field:focus,
html body .indices_screen .ix-field--active,
html body.dark-mode .indices_screen .ix-field:hover,
html body.dark-mode .indices_screen .ix-field:focus,
html body.dark-mode .indices_screen .ix-field--active {
  border-color: var(--eq-green);
}
html body .indices_screen .ix-field-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  border: 0;
  background: none;
  padding: 2px 4px;
  font-size: 12px;
  line-height: 1;
  color: var(--eq-light-grey);
  cursor: pointer;
}
html body .indices_screen .ix-field-clear:hover {
  color: var(--eq-green);
}
html body .indices_screen .ix-field-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1000;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  background: var(--eq-white);
  box-shadow: 0 6px 18px rgba(18, 40, 58, 0.12);
}
html body.dark-mode .indices_screen .ix-field-menu {
  border-color: #535353;
  background: #1a1a1a;
}
html body .indices_screen .ix-field-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 4px;
  background: none;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--eq-darker-grey);
  cursor: pointer;
}
html body.dark-mode .indices_screen .ix-field-menu-item {
  color: #e9f0ee;
}
html body .indices_screen .ix-field-menu-item:hover {
  background: rgba(65, 170, 5, 0.08);
}
html body .indices_screen .ix-field-menu-item--active,
html body.dark-mode .indices_screen .ix-field-menu-item--active {
  background: rgba(65, 170, 5, 0.12);
  color: var(--eq-green);
  font-weight: 600;
}
html body .indices_screen .ix-field-menu-empty {
  padding: 7px 10px;
  font-size: 13px;
  color: var(--eq-light-grey);
}
html body .indices_screen .ix-filter-field--reset .ix-tool-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: #d6d6d6;
  color: var(--eq-dark-grey);
}
html body.dark-mode .indices_screen .ix-filter-field--reset .ix-tool-btn:disabled {
  border-color: #535353;
  color: #c6d1ce;
}
@media (max-width: 767px) {
  html body .indices_screen .ix-filter-block {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html body .indices_screen .ix-filter-field--reset {
    grid-column: 1 / -1;
  }
  html body .indices_screen .ix-filter-field--reset .ix-tool-btn {
    width: 100%;
  }
}

/* ── Watchlist header (desktop) ──────────────────────────────────────────────
   Title row: title/sub on the left, "Watchlist: <name>" picker + outlined
   New watchlist on the right. Tab row: Filter a company, outlined Edit Column,
   filled green Add a Company (then Import / Share / ⋮ / Save View / refresh
   for a specific watchlist). Buttons share the toolbar's 38px height / 5px
   radius; bordered controls get a green border on hover / when on. */
/* Title row right side: Filter a company + New watchlist. */
html body .watchlist_screen .wl-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Same width as the other pages' title-row "Filter a company" (Deals, Concalls). */
html body .watchlist_screen .wl-head-search {
  width: 340px;
}
html body .watchlist_screen .wl-head-search .search_ar,
html body .watchlist_screen .wl-head-search .selcttion_search {
  width: 100%;
  min-width: 0;
  max-width: none;
}
html body .watchlist_screen .wl-head-search .watchlist-search__control {
  min-height: 38px;
}
/* Tab row right side: Filter a company (portalled into #wl-search-slot), Edit
   Column, Add a Company / Import / Share / ⋮ (portalled into
   #wl-controls-slot), then Save View / refresh. */
@media (min-width: 992px) {
  html body .watchlist_screen .wishlist_conty_header_right {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 15px;
  }
  html body .watchlist_screen .wl-controls-slot:empty,
  html body .watchlist_screen .wl-search-slot:empty {
    display: none;
  }
  html body .watchlist_screen .wl-search-slot,
  html body .watchlist_screen .wl-controls-slot,
  html body .watchlist_screen .wl-controls {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  html body .watchlist_screen .wl-controls .psh_right_btn_ar {
    gap: 10px;
  }
}
html body .watchlist_screen .wl-fill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
}
html body .watchlist_screen .wl-fill-btn:hover {
  filter: brightness(1.08);
}
/* Outlined secondary actions: New watchlist, Edit Column. */
html body .watchlist_screen .wl-outline-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--wl-line);
  border-radius: 5px;
  background-color: var(--wl-surface);
  color: var(--wl-ink);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: none;
}
html body .watchlist_screen .wl-outline-btn:hover,
html body .watchlist_screen .wl-outline-btn:focus-visible,
html body .watchlist_screen .wl-outline-btn:active {
  border-color: var(--wl-green);
  background-color: var(--wl-surface);
  color: var(--wl-ink);
}
/* Tab-row "Filter a company": compact, leading search icon instead of the
   react-select dropdown chevron (the clear ✕ stays). */
html body .watchlist_screen .wl-tab-search {
  position: relative;
  width: 210px;
}
html body .watchlist_screen .wl-tab-search .search_ar,
html body .watchlist_screen .wl-tab-search .selcttion_search {
  width: 100%;
  min-width: 0;
  max-width: none;
}
html body .watchlist_screen .wl-tab-search__icon {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 2;
  transform: translateY(-50%);
  color: var(--wl-muted);
  font-size: 13px;
  pointer-events: none;
}
html body .watchlist_screen .wl-tab-search .watchlist-search__value-container {
  padding-left: 32px;
}
html body .watchlist_screen .wl-tab-search .watchlist-search__indicator-separator,
html body .watchlist_screen .wl-tab-search .watchlist-search__dropdown-indicator {
  display: none;
}
/* Picker: muted "Watchlist:" + bold selected name. Nothing wraps -- a long
   name (button or menu option) is cut with an ellipsis, and WatchlistDropdown
   adds a tooltip with the full name only to the ones that are cut. */
html body .watchlist_screen .dropdown_mobile .dropdown__filter-selected {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
html body .watchlist_screen .wl-picker-label {
  flex: none;
  color: var(--wl-muted);
}
html body .watchlist_screen .wl-picker-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wl-ink);
  font-weight: 600;
}
html body .watchlist_screen .dropdown_mobile .dropdown__select-option {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 768px) {
  /* Button + menu: at least 240px, grows with the selected name up to 320px. */
  html body .watchlist_screen .wl-title-picker .dropdown_mobile {
    width: auto;
    min-width: 240px;
    max-width: 320px;
  }
  html body .watchlist_screen .wl-title-picker .dropdown__select {
    min-width: 240px;
  }
  html body .watchlist_screen .wl-title-picker .dropdown__filter {
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    box-shadow: none;
    padding: 0 34px 0 14px;
    transition: border-color 0.15s ease-in-out;
  }
  html body .watchlist_screen .wl-title-picker .dropdown__filter:hover,
  html body .watchlist_screen .wl-title-picker .dropdown__filter.is-open {
    border-color: var(--eq-green);
  }
  html body .watchlist_screen .wl-title-picker .dropdown__select {
    margin-top: 4px;
    border-radius: 5px;
  }
}
html body.dark-mode .watchlist_screen .wl-title-picker .dropdown__filter {
  border-color: #535353;
}
html body.dark-mode .watchlist_screen .wl-title-picker .dropdown__filter:hover,
html body.dark-mode .watchlist_screen .wl-title-picker .dropdown__filter.is-open {
  border-color: var(--eq-green);
}

/* Performance tab: Total / CAGR as separate bordered toggles. */
html body .watchlist_screen .watchlist-return-mode-btn-group {
  gap: 6px;
}
html body .watchlist_screen .watchlist-return-mode-btn-group > .wl-toggle-btn {
  display: inline-flex;
  align-items: center;
  height: 34px;
  margin-left: 0 !important;
  padding: 0 12px;
  border: 1px solid #d6d6d6 !important;
  border-radius: 5px !important;
  background-color: var(--eq-white) !important;
  color: var(--eq-dark-grey) !important;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none !important;
}
html body.dark-mode .watchlist_screen .watchlist-return-mode-btn-group > .wl-toggle-btn {
  border-color: #535353 !important;
  background-color: #1a1a1a !important;
  color: #c6d1ce !important;
}
html body .watchlist_screen .watchlist-return-mode-btn-group > .wl-toggle-btn:hover,
html body .watchlist_screen .watchlist-return-mode-btn-group > .wl-toggle-btn--active,
html body.dark-mode .watchlist_screen .watchlist-return-mode-btn-group > .wl-toggle-btn:hover,
html body.dark-mode .watchlist_screen .watchlist-return-mode-btn-group > .wl-toggle-btn--active {
  border-color: var(--eq-green) !important;
}
html body .watchlist_screen .watchlist-return-mode-btn-group > .wl-toggle-btn--active,
html body.dark-mode .watchlist_screen .watchlist-return-mode-btn-group > .wl-toggle-btn--active {
  color: var(--eq-green) !important;
}
/* Share (react-bootstrap secondary dropdown toggle) -> same outline style as
   .wl-outline-btn (only Add a Company is filled green); Save View -> toolbar
   height/radius. */
html body .watchlist_screen .wl-controls .dropdown-toggle.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 5px;
  border: 1px solid var(--wl-line) !important;
  background-color: var(--wl-surface) !important;
  color: var(--wl-ink) !important;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none !important;
}
html body .watchlist_screen .wl-controls .dropdown-toggle.btn-secondary:hover,
html body .watchlist_screen .wl-controls .dropdown-toggle.btn-secondary.show {
  border-color: var(--wl-green) !important;
}
html body .watchlist_screen .wishlist_btn_ar .btn_gen_gray_alt {
  height: 38px;
  padding: 0 12px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Narrower desktops: the Performance tab row (Add a Company, Share, ⋮,
   Return toggle, Edit Column, Save View, refresh) doesn't fit on one line
   below ~1600px, so Share and Save View drop to icon-only (they keep their
   title tooltip). */
@media (min-width: 992px) and (max-width: 1599px) {
  html body .watchlist_screen .wl-btn-label {
    display: none;
  }
}
html body .watchlist_screen .wl-return-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
  white-space: nowrap;
}

/* ── Company page: Consolidated / Standalone (header row) ────────────────────
   Shared toolbar toggle: separate boxes, 1px border, 5px radius, one fill,
   green border on hover, green border + green text (no fill) when selected.
   `html body` + .btn.btn-outline-secondary out-rank the older solid-green
   .deals-view-mode--active rules (fundamentalsTables.css, custom.css,
   dark-mode.css), several of which use !important. */
html body .fund-scope-toggle {
  gap: 6px;
}
html body .fund-scope-toggle > .btn.btn-outline-secondary {
  display: inline-flex;
  align-items: center;
  /* Buttons stretch to equal widths on mobile -- keep the label centred. */
  justify-content: center;
  height: 38px;
  margin-left: 0 !important;
  padding: 0 14px;
  border: 1px solid #d6d6d6 !important;
  border-radius: 5px !important;
  background-color: var(--eq-white) !important;
  color: var(--eq-dark-grey) !important;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none !important;
  filter: none;
  transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
html body.dark-mode .fund-scope-toggle > .btn.btn-outline-secondary {
  border-color: #535353 !important;
  background-color: #1a1a1a !important;
  color: #c6d1ce !important;
}
html body .fund-scope-toggle > .btn.btn-outline-secondary:not(:disabled):hover,
html body .fund-scope-toggle > .btn.btn-outline-secondary.deals-view-mode--active,
html body.dark-mode .fund-scope-toggle > .btn.btn-outline-secondary:not(:disabled):hover,
html body.dark-mode .fund-scope-toggle > .btn.btn-outline-secondary.deals-view-mode--active {
  border-color: var(--eq-green) !important;
}
html body .fund-scope-toggle > .btn.btn-outline-secondary.deals-view-mode--active,
html body.dark-mode .fund-scope-toggle > .btn.btn-outline-secondary.deals-view-mode--active {
  color: var(--eq-green) !important;
}
html body .fund-scope-toggle > .btn.btn-outline-secondary:disabled {
  opacity: 0.5;
}
/* Clicking leaves the button focused, and older hover/focus rules
   (custom.css .btn:focus and .deals-view-mode--active:focus, dark-mode.css
   .deals-view-mode--active:focus and :not(--active):hover) then fill it green
   or grey and turn the label white -- hiding it until focus moves. Pin the
   normal look for hover/focus/pressed (doubled class out-ranks them); keyboard
   focus gets an outline instead. */
html body .fund-scope-toggle.fund-scope-toggle > .btn.btn-outline-secondary:is(:hover, :focus, :active, :focus-visible) {
  background-color: var(--eq-white) !important;
  box-shadow: none !important;
  filter: none !important;
}
html body.dark-mode .fund-scope-toggle.fund-scope-toggle > .btn.btn-outline-secondary:is(:hover, :focus, :active, :focus-visible) {
  background-color: #1a1a1a !important;
}
html body .fund-scope-toggle.fund-scope-toggle > .btn.btn-outline-secondary.deals-view-mode--active:is(:hover, :focus, :active) {
  color: var(--eq-green) !important;
}
html body .fund-scope-toggle.fund-scope-toggle > .btn.btn-outline-secondary:not(.deals-view-mode--active):is(:hover, :focus, :active) {
  color: var(--eq-dark-grey) !important;
}
html body.dark-mode .fund-scope-toggle.fund-scope-toggle > .btn.btn-outline-secondary:not(.deals-view-mode--active):is(:hover, :focus, :active) {
  color: #c6d1ce !important;
}
html body .fund-scope-toggle.fund-scope-toggle > .btn.btn-outline-secondary:focus-visible {
  outline: 2px solid var(--eq-green);
  outline-offset: 2px;
}

/* Watchlist mobile: Create New Watchlist / Add a Company as two equal-width
   text buttons on their own row under the watchlist picker. */
html body .watchlist_screen .mPage_sub_header_wrapper {
  flex-wrap: wrap;
  row-gap: 10px;
}
html body .watchlist_screen .wl-mobile-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  padding: 0 0.9rem;
  margin-bottom: 12px;
  margin-top: 12px;
}
html body .watchlist_screen .wl-mobile-actions .wl-fill-btn {
  flex: 1 1 0;
  justify-content: center;
  padding: 0 8px;
  font-size: 13.5px;
  white-space: nowrap;
}

/* ── Earnings Documents toolbar (All Companies / Following / Filters) ────────
   Same normal/active design as the Deals/Delivery toolbar. Its scope buttons
   carry their own IDs (#calendar-all-companies-tab / #calendar-following-tab),
   targeted by older mobile !important rules, so the IDs are used here too. */
html body .documents_screen .docs-toolbar .deal_conty_right {
  gap: 10px;
}
html body .documents_screen .deal_conty_right #calendar-all-companies-tab,
html body .documents_screen .deal_conty_right #calendar-following-tab,
html body .documents_screen .deal_conty_right .filter-trigger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid #d6d6d6 !important;
  border-radius: 5px !important;
  background-color: var(--eq-white) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease-in-out;
}
html body .documents_screen .deal_conty_right #calendar-all-companies-tab,
html body .documents_screen .deal_conty_right #calendar-following-tab {
  color: var(--eq-dark-grey) !important;
  font-size: 14px;
}
html body .documents_screen .docs-toolbar .timeline_main_post_tab {
  gap: 6px;
  border: 0;
}
html body.dark-mode .documents_screen .deal_conty_right #calendar-all-companies-tab,
html body.dark-mode .documents_screen .deal_conty_right #calendar-following-tab,
html body.dark-mode .documents_screen .deal_conty_right .filter-trigger-btn {
  border-color: #535353 !important;
  background-color: #1a1a1a !important;
}
html body.dark-mode .documents_screen .deal_conty_right #calendar-all-companies-tab,
html body.dark-mode .documents_screen .deal_conty_right #calendar-following-tab {
  color: #c6d1ce !important;
}
html body .documents_screen .deal_conty_right #calendar-all-companies-tab:hover,
html body .documents_screen .deal_conty_right #calendar-following-tab:hover,
html body .documents_screen .deal_conty_right .filter-trigger-btn:hover,
html body .documents_screen .deal_conty_right #calendar-all-companies-tab.active_tab,
html body .documents_screen .deal_conty_right #calendar-following-tab.active_tab,
html body .documents_screen .deal_conty_right .filter-trigger-btn.filter-trigger-btn--active,
html body.dark-mode .documents_screen .deal_conty_right #calendar-all-companies-tab:hover,
html body.dark-mode .documents_screen .deal_conty_right #calendar-following-tab:hover,
html body.dark-mode .documents_screen .deal_conty_right .filter-trigger-btn:hover,
html body.dark-mode .documents_screen .deal_conty_right #calendar-all-companies-tab.active_tab,
html body.dark-mode .documents_screen .deal_conty_right #calendar-following-tab.active_tab,
html body.dark-mode .documents_screen .deal_conty_right .filter-trigger-btn.filter-trigger-btn--active {
  border-color: var(--eq-green) !important;
}
html body .documents_screen .deal_conty_right #calendar-all-companies-tab.active_tab,
html body .documents_screen .deal_conty_right #calendar-following-tab.active_tab,
html body .documents_screen .deal_conty_right .filter-trigger-btn.filter-trigger-btn--active {
  color: var(--eq-green) !important;
}
html body .documents_screen .deal_conty_right .filter-trigger-btn.filter-trigger-btn--active::after {
  top: -10px;
  left: 12px;
  right: auto;
  width: 18px;
  height: 18px;
  background-color: #dc2626;
  border: 4px solid var(--eq-white);
}
html body.dark-mode .documents_screen .deal_conty_right .filter-trigger-btn.filter-trigger-btn--active::after {
  border-color: #1a1a1a;
}

/* Mobile: no navy band; scope buttons + Filters icon on one row above the tabs. */
@media (max-width: 991px) {
  html body .documents_screen .docs-toolbar .deal_conty_nav_row {
    flex-wrap: wrap;
    width: 100%;
  }
  html body .documents_screen .docs-toolbar .deal_conty_right {
    background-color: transparent;
    padding: 0;
    width: 100%;
    margin-bottom: 8px;
    gap: 6px;
  }
  html body .documents_screen .docs-toolbar .timeline_main_post_tab {
    flex: 1 1 auto;
    flex-wrap: nowrap;
  }
  html body .documents_screen .docs-toolbar .timeline_main_post_tab li.nav-item {
    flex: 1 1 0;
    width: auto;
  }
  html body .documents_screen .deal_conty_right #calendar-all-companies-tab,
  html body .documents_screen .deal_conty_right #calendar-following-tab {
    width: 100%;
    font-size: 13px;
  }
  html body .documents_screen .deal_conty_right .filter-trigger-btn {
    width: 38px;
    padding: 0;
  }
  html body .documents_screen .docs-toolbar .deal_conty_nav_row > .deal_conty_nav {
    display: flex;
    width: 100%;
  }
}

/* ── Generic filled green page action (e.g. Detailed Trend's Back) ───────── */
.ss-fill-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid var(--eq-green);
  border-radius: 5px;
  background: var(--eq-green);
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.ss-fill-btn:hover {
  filter: brightness(1.08);
}
.ss-fill-btn svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* ── Sectors > Financials > Detailed Trend ─────────────────────────────────── */
html body .fundamentals_timeseries .ft-tabs {
  border-bottom: 1px solid #dddddf;
  margin-bottom: 12px;
}
html body.dark-mode .fundamentals_timeseries .ft-tabs {
  border-color: #2b3435;
}
/* Filters: one full-width block. Row 1 holds Metric, Period Type, Report
   Type, Periods and View (wrapping if narrow); row 2 holds Universe on the
   left and the icon-only Refresh on the right. */
html body .fundamentals_timeseries .ft-filter-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid #e0e5e3;
  border-radius: 8px;
  background: var(--eq-white);
}
html body.dark-mode .fundamentals_timeseries .ft-filter-block {
  border-color: #1f2829;
  background: #0e1213;
}
html body .fundamentals_timeseries .ft-filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
html body .fundamentals_timeseries .ft-filter-label {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--eq-dark-grey);
}
html body.dark-mode .fundamentals_timeseries .ft-filter-label {
  color: #c6d1ce;
}
html body .fundamentals_timeseries .ft-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 28px;
}
/* Row 1 spreads across the full width; the gaps grow to fill it. */
html body .fundamentals_timeseries .ft-filter-row,
html body .fundamentals_timeseries .ft-filter-row--bottom {
  justify-content: space-between;
}
html body .fundamentals_timeseries .ft-filter-refresh {
  margin-left: auto;
}
/* Toggle buttons: shared toolbar style -- separate boxes, green border +
   green text when on (no fill). */
html body .fundamentals_timeseries .ft-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
html body .fundamentals_timeseries .ft-toggle > .btn {
  display: inline-flex;
  align-items: center;
  height: 34px;
  margin-left: 0 !important;
  padding: 0 12px;
  border: 1px solid #d6d6d6 !important;
  border-radius: 5px !important;
  background-color: var(--eq-white) !important;
  color: var(--eq-dark-grey) !important;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: none !important;
  filter: none;
  transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
html body.dark-mode .fundamentals_timeseries .ft-toggle > .btn {
  border-color: #535353 !important;
  background-color: #1a1a1a !important;
  color: #c6d1ce !important;
}
html body .fundamentals_timeseries .ft-toggle > .btn:hover,
html body .fundamentals_timeseries .ft-toggle > .btn.btn-primary,
html body.dark-mode .fundamentals_timeseries .ft-toggle > .btn:hover,
html body.dark-mode .fundamentals_timeseries .ft-toggle > .btn.btn-primary {
  border-color: var(--eq-green) !important;
}
html body .fundamentals_timeseries .ft-toggle > .btn.btn-primary,
html body.dark-mode .fundamentals_timeseries .ft-toggle > .btn.btn-primary {
  color: var(--eq-green) !important;
}
html body .fundamentals_timeseries .ft-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  background: var(--eq-white);
  color: var(--eq-dark-grey);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
html body .fundamentals_timeseries .ft-refresh-btn:not(:disabled):hover {
  border-color: var(--eq-green);
  color: var(--eq-green);
}
html body .fundamentals_timeseries .ft-refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
html body .fundamentals_timeseries .ft-refresh-btn--spin svg {
  animation: ft-refresh-spin 0.9s linear infinite;
}
@keyframes ft-refresh-spin {
  to { transform: rotate(360deg); }
}
html body.dark-mode .fundamentals_timeseries .ft-refresh-btn {
  border-color: #535353;
  background: #1a1a1a;
  color: #c6d1ce;
}
/* Laptop widths: tighter gaps/padding so View still fits on row 1. */
@media (min-width: 992px) and (max-width: 1599px) {
  html body .fundamentals_timeseries .ft-filter-row {
    column-gap: 18px;
  }
  html body .fundamentals_timeseries .ft-toggle {
    gap: 5px;
  }
  html body .fundamentals_timeseries .ft-toggle > .btn {
    padding: 0 9px;
  }
}
/* Tablet / phone: each group on its own line (label above, buttons wrap). */
@media (max-width: 991px) {
  html body .fundamentals_timeseries .ft-filter-block,
  html body .fundamentals_timeseries .ft-filter-row:not(.ft-filter-row--bottom) {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  html body .fundamentals_timeseries .ft-filter-row--bottom {
    flex-wrap: nowrap;
    gap: 12px;
  }
}
/* Older .sectors_screen mobile rules stretch every .btn-group button; keep
   natural width on tablets, and on phones fill the row with centred labels. */
@media (max-width: 991px) {
  html body .fundamentals_timeseries .ft-toggle > .btn {
    flex: 0 0 auto;
    width: auto;
    justify-content: center;
  }
}
@media (max-width: 575px) {
  html body .fundamentals_timeseries .ft-toggle > .btn {
    flex: 1 1 auto;
  }
  html body .fundamentals_timeseries .ss-page-head {
    margin-bottom: 8px;
  }
}

/* ── Sectors > Financials: Report Card | Detailed Trend view toggle ─────────
   Shared toolbar style (separate boxes, green border + text on the active
   view), in the tab row on both views. */
html body .sx-view-toggle {
  display: inline-flex;
  gap: 6px;
  margin-bottom: 4px;
}
html body .sx-view-btn {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  background: var(--eq-white);
  color: var(--eq-dark-grey);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
html body .sx-view-btn {
  gap: 6px;
}
html body .sx-view-btn svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
html body.dark-mode .sx-view-btn {
  border-color: #535353;
  background: #1a1a1a;
  color: #c6d1ce;
}
html body .sx-view-btn:hover,
html body .sx-view-btn--active,
html body.dark-mode .sx-view-btn:hover,
html body.dark-mode .sx-view-btn--active {
  border-color: var(--eq-green);
}
html body .sx-view-btn--active,
html body.dark-mode .sx-view-btn--active {
  color: var(--eq-green);
  cursor: default;
}
/* Detailed Trend: view toggle + filter show/hide icon button, right of tabs. */
html body .fundamentals_timeseries .ft-tabs-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6.75px;
}
html body .fundamentals_timeseries .ft-tabs-actions > .sx-view-toggle {
  margin-bottom: 0;
}
html body .ft-filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  background: var(--eq-white);
  color: var(--eq-dark-grey);
  cursor: pointer;
  transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
html body .ft-filter-toggle-btn svg {
  width: 16px;
  height: 16px;
}
html body.dark-mode .ft-filter-toggle-btn {
  border-color: #535353;
  background: #1a1a1a;
  color: #c6d1ce;
}
html body .ft-filter-toggle-btn:hover,
html body .ft-filter-toggle-btn--active,
html body.dark-mode .ft-filter-toggle-btn:hover,
html body.dark-mode .ft-filter-toggle-btn--active {
  border-color: var(--eq-green);
}
html body .ft-filter-toggle-btn--active,
html body.dark-mode .ft-filter-toggle-btn--active {
  color: var(--eq-green);
}
/* Detailed Trend's tab row: tabs left, toggle right (Sectors' own
   .sectors-scope-bar already lays out this way). */
html body .fundamentals_timeseries .ft-tabs {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 991px) {
  html body .fundamentals_timeseries .ft-tabs {
    border-bottom: 0;
  }
  html body .fundamentals_timeseries .ft-tabs > .deal_conty_nav {
    order: 0;
    width: 100%;
    border-bottom: 1px solid #dddddf;
  }
  html body.dark-mode .fundamentals_timeseries .ft-tabs > .deal_conty_nav {
    border-color: #2b3435;
  }
  html body .fundamentals_timeseries .ft-tabs > .ft-tabs-actions,
  html body .sectors-scope-bar > .sx-view-toggle {
    order: 1;
    margin: 4px 0 0 auto;
  }
}

/* ── Delivery > Filters > Delivery Screener popup ────────────────────────────
   Consistent controls (38px, 5px radius, #d6d6d6 border, green focus), dark
   mode for every control/card/note, and a full-screen sheet on phones with
   the action buttons pinned at the bottom. */
html body .delivery-screener-modal .modal-header {
  align-items: flex-start;
}
html body .delivery-screener-modal .modal-header > .d-flex {
  flex-wrap: wrap;
  gap: 10px 16px;
}
html body .delivery-screener-modal .modal-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--eq-darker-grey, #1f2d2a);
}
html body .delivery-screener-modal .modal-header .alert-success {
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.45;
  border-radius: 5px;
}
html body .delivery-screener-modal .form-label {
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--eq-dark-grey, #4a5553);
}
html body .delivery-screener-modal .form-control,
html body .delivery-screener-modal .form-select {
  min-height: 38px;
  border: 1px solid #d6d6d6 !important;
  border-radius: 5px !important;
  font-size: 14px;
  box-shadow: none !important;
}
html body .delivery-screener-modal textarea.form-control {
  min-height: 76px;
  resize: vertical;
}
html body .delivery-screener-modal .form-control:focus,
html body .delivery-screener-modal .form-select:focus {
  border-color: var(--eq-green) !important;
}
html body .delivery-screener-modal .form-control:disabled {
  opacity: 0.55;
}
/* Condition card: one solid outline per condition instead of two nested
   dashed boxes. */
html body .delivery-screener-modal .filter-card {
  padding: 0 !important;
  border: 0;
}
html body .delivery-screener-modal .filter-card .row:has(> .filter-title) {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0 6px;
}
html body .delivery-screener-modal .filter-card .row:has(> .filter-title) > .filter-title {
  width: auto;
  flex: 0 1 auto;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--eq-darker-grey, #1f2d2a);
}
html body .delivery-screener-modal .filter-card .row:has(> .filter-title) > .filter-title a {
  font-size: 13px;
  font-weight: 500;
}
html body .delivery-screener-modal .filter-group {
  margin: 0 !important;
  padding: 4px 12px 14px !important;
  border: 1px solid #e0e5e3;
  border-radius: 8px;
}
html body .delivery-screener-modal .modal-footer {
  gap: 8px;
}
html body .delivery-screener-modal .modal-footer > .btn {
  min-height: 38px;
  margin: 0;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
}
html body .delivery-screener-modal .modal-footer > .filter_reset {
  border: 1px solid #d6d6d6 !important;
  background: var(--eq-white) !important;
  color: var(--eq-dark-grey) !important;
}
html body .delivery-screener-modal .modal-footer > .filter_reset:hover {
  border-color: var(--eq-green) !important;
  color: var(--eq-green) !important;
}

/* Dark mode */
html body.dark-mode .delivery-screener-modal .modal-content {
  background: #141718;
  border-color: #2b3435;
  color: #e9f0ee;
}
html body.dark-mode .delivery-screener-modal .modal-header,
html body.dark-mode .delivery-screener-modal .modal-footer {
  border-color: #2b3435;
}
html body.dark-mode .delivery-screener-modal .modal-title,
html body.dark-mode .delivery-screener-modal .filter-card .row:has(> .filter-title) > .filter-title {
  color: #e9f0ee;
}
html body.dark-mode .delivery-screener-modal .btn-close {
  filter: invert(1) grayscale(1) brightness(1.6);
}
html body.dark-mode .delivery-screener-modal .modal-header .alert-success {
  border-color: rgba(65, 170, 5, 0.35);
  background: rgba(65, 170, 5, 0.12);
  color: #cfe9c0;
}
html body.dark-mode .delivery-screener-modal .form-label {
  color: #c6d1ce;
}
html body.dark-mode .delivery-screener-modal .form-control,
html body.dark-mode .delivery-screener-modal .form-select {
  border-color: #535353 !important;
  background-color: #1a1a1a !important;
  color: #e9f0ee !important;
  color-scheme: dark;
}
html body.dark-mode .delivery-screener-modal .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c6d1ce' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}
html body.dark-mode .delivery-screener-modal .form-select option {
  background: #1a1a1a;
  color: #e9f0ee;
}
html body.dark-mode .delivery-screener-modal .form-control::placeholder {
  color: #7d8a87;
}
html body.dark-mode .delivery-screener-modal .form-control:focus,
html body.dark-mode .delivery-screener-modal .form-select:focus {
  border-color: var(--eq-green) !important;
}
html body.dark-mode .delivery-screener-modal .filter-group {
  border-color: #2b3435;
  background: #101314;
}
html body.dark-mode .delivery-screener-modal .modal-footer > .filter_reset {
  border-color: #535353 !important;
  background: #1a1a1a !important;
  color: #c6d1ce !important;
}
html body.dark-mode .delivery-screener-modal .modal-footer > .filter_reset:hover {
  border-color: var(--eq-green) !important;
  color: var(--eq-green) !important;
}
/* rsuite date-range picker (Custom Date Range) */
html body.dark-mode .delivery-screener-modal .rs-picker-toggle,
html body.dark-mode .delivery-screener-modal .rs-input-group,
html body.dark-mode .delivery-screener-modal .rs-input {
  border-color: #535353 !important;
  background-color: #1a1a1a !important;
  color: #e9f0ee !important;
}
html body.dark-mode .rs-picker-popup,
html body.dark-mode .rs-picker-daterange-menu {
  background: #1a1a1a;
  color: #e9f0ee;
}
html body.dark-mode .rs-picker-popup .rs-calendar-table-cell-content,
html body.dark-mode .rs-picker-popup .rs-calendar-header-title,
html body.dark-mode .rs-picker-popup .rs-btn-link {
  color: #e9f0ee;
}

/* Tablet: condition fields two per row */
@media (min-width: 576px) and (max-width: 991px) {
  html body .delivery-screener-modal .filter-group > .col-md-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
/* Phone: full-screen sheet, scrolling body, action buttons pinned. */
@media (max-width: 575px) {
  html body .delivery-screener-modal {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  html body .delivery-screener-modal .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  html body .delivery-screener-modal .modal-header {
    padding: 14px 16px 12px;
  }
  html body .delivery-screener-modal .modal-header > .d-flex {
    flex-direction: column;
  }
  html body .delivery-screener-modal .modal-title {
    font-size: 18px;
  }
  html body .delivery-screener-modal .modal-header .alert-success {
    width: 100%;
  }
  html body .delivery-screener-modal .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px;
  }
  html body .delivery-screener-modal .modal-body > .row,
  html body .delivery-screener-modal .filter-card > .row:not(:has(> .filter-title)):not(.filter-group) {
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }
  html body .delivery-screener-modal .modal-body > .row > [class*="col-"],
  html body .delivery-screener-modal .filter-card > .row:not(.filter-group) > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }
  html body .delivery-screener-modal .filter-group {
    --bs-gutter-x: 0;
    padding: 2px 12px 14px !important;
  }
  html body .delivery-screener-modal .filter-group > [class*="col-"] {
    margin-top: 12px;
    padding-left: 0;
    padding-right: 0;
  }
  html body .delivery-screener-modal .floating-btn {
    width: 100%;
  }
  html body .delivery-screener-modal .modal-footer {
    flex-wrap: nowrap;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  html body .delivery-screener-modal .modal-footer > .btn {
    flex: 1 1 0;
    padding-left: 6px;
    padding-right: 6px;
    white-space: nowrap;
  }
}

/* ── Watchlist toolbar: same control spec as the Earnings Monitor ──────────
   34px tall, 5px radius, 13px / 500 text, 12px side padding, #d6d6d6 border,
   muted text (#5b6a66); hover / on = green border (+ green text when on);
   the one action (Add a Company) is filled green at the same size. Applies to
   the title row (Filter a company, New watchlist) and the Price / Performance
   tab row (picker, Edit Column, Add a Company, Import, Share, ⋮, Save View,
   refresh, Total / CAGR). Placed last so it wins over the earlier 38px rules. */
html body .watchlist_screen {
  --wl-ctl-h: 34px;
  --wl-ctl-line: #d6d6d6;
  --wl-ctl-ink: #5b6a66;
  --wl-ctl-bg: var(--eq-white, #fff);
}
html body.dark-mode .watchlist_screen {
  --wl-ctl-line: #535353;
  --wl-ctl-ink: #c6d1ce;
  --wl-ctl-bg: #1a1a1a;
}
html body .watchlist_screen .wl-outline-btn,
html body .watchlist_screen .wl-controls .dropdown-toggle.btn-secondary,
html body .watchlist_screen .wishlist_btn_ar .btn_gen_gray_alt,
html body .watchlist_screen .wishlist_btn_ar .btn_gen_blank,
html body .watchlist_screen .wl-controls .psh_right_dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--wl-ctl-h);
  min-width: var(--wl-ctl-h);
  padding: 0 12px;
  border: 1px solid var(--wl-ctl-line) !important;
  border-radius: 5px !important;
  background-color: var(--wl-ctl-bg) !important;
  color: var(--wl-ctl-ink) !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none !important;
  filter: none;
  text-decoration: none;
  transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
/* Icon-only squares: refresh, ⋮ */
html body .watchlist_screen .wishlist_btn_ar .btn_gen_blank,
html body .watchlist_screen .wl-controls .psh_right_dot {
  width: var(--wl-ctl-h);
  padding: 0;
}
html body .watchlist_screen .wl-outline-btn:hover,
html body .watchlist_screen .wl-outline-btn:focus-visible,
html body .watchlist_screen .wl-outline-btn:active,
html body .watchlist_screen .wl-controls .dropdown-toggle.btn-secondary:hover,
html body .watchlist_screen .wl-controls .dropdown-toggle.btn-secondary.show,
html body .watchlist_screen .wishlist_btn_ar .btn_gen_gray_alt:not(:disabled):hover,
html body .watchlist_screen .wishlist_btn_ar .btn_gen_blank:hover,
html body .watchlist_screen .wl-controls .psh_right_dot:hover {
  border-color: var(--eq-green) !important;
  background-color: var(--wl-ctl-bg) !important;
  color: var(--wl-ctl-ink) !important;
}
html body .watchlist_screen .wishlist_btn_ar .btn_gen_gray_alt:disabled,
html body .watchlist_screen .wishlist_btn_ar .btn_gen_gray_alt.disbaled_btn {
  opacity: 0.5;
  cursor: not-allowed;
}
html body .watchlist_screen .wishlist_btn_ar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* The one action: Add a Company -- filled green, same size. */
html body .watchlist_screen .wl-fill-btn {
  height: var(--wl-ctl-h);
  padding: 0 12px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
/* Total / CAGR toggles: same ink as the rest of the row. */
html body .watchlist_screen .watchlist-return-mode-btn-group > .wl-toggle-btn:not(.wl-toggle-btn--active) {
  color: var(--wl-ctl-ink) !important;
}
html body .watchlist_screen .wl-return-group > .small {
  font-size: 13px;
  font-weight: 500;
  color: var(--wl-ctl-ink) !important;
}
/* Watchlist picker (tab row) */
@media (min-width: 768px) {
  html body .watchlist_screen .wl-title-picker .dropdown__filter {
    height: var(--wl-ctl-h);
    min-height: var(--wl-ctl-h);
    padding: 0 30px 0 12px;
    border-color: var(--wl-ctl-line);
    border-radius: 5px;
    background-color: var(--wl-ctl-bg);
    font-size: 13px;
    line-height: 1;
  }
  html body .watchlist_screen .wl-title-picker .dropdown__filter:hover,
  html body .watchlist_screen .wl-title-picker .dropdown__filter.is-open {
    border-color: var(--eq-green);
  }
  html body .watchlist_screen .wl-title-picker .wl-picker-label {
    color: var(--wl-ctl-ink);
  }
}
/* Title-row "Filter a company": 34px, #d6d6d6 border, 5px radius and a
   leading search icon, like the Earnings Monitor's. */
html body .watchlist_screen .wl-head-search {
  position: relative;
}
html body .watchlist_screen .wl-head-search__icon {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 12; /* above .search_ar (z-index 11) */
  transform: translateY(-50%);
  color: var(--wl-ctl-ink);
  font-size: 13px;
  pointer-events: none;
}
html body .watchlist_screen .wl-head-search .watchlist-search__control {
  min-height: var(--wl-ctl-h) !important;
  border-color: var(--wl-ctl-line) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  background-color: var(--wl-ctl-bg) !important;
}
html body .watchlist_screen .wl-head-search .watchlist-search__control:hover,
html body .watchlist_screen .wl-head-search .watchlist-search__control--is-focused {
  border-color: var(--eq-green) !important;
}
html body .watchlist_screen .wl-head-search .watchlist-search__value-container {
  padding-left: 32px;
  font-size: 13px;
}
html body .watchlist_screen .wl-head-search .watchlist-search__indicators {
  height: calc(var(--wl-ctl-h) - 2px);
}

/* Icon-only toolbar buttons (Edit Columns, Import Companies): 34px square,
   label in the title tooltip. */
html body .watchlist_screen .wl-outline-btn.wl-icon-btn {
  width: var(--wl-ctl-h);
  padding: 0;
  font-size: 14px;
}
html body .watchlist_screen .wl-icon-btn .wl-icon-svg {
  width: 17px;
  height: 17px;
}
/* Title-row "Filter a company": no divider / dropdown chevron at the end (the
   leading search icon already says what it is); the clear ✕ still appears once
   a company is picked. */
html body .watchlist_screen .wl-head-search .watchlist-search__indicator-separator,
html body .watchlist_screen .wl-head-search .watchlist-search__dropdown-indicator {
  display: none;
}

/* ── Feedback modal (FeedbackWidget.tsx) ────────────────────────────────────
   The <form> sits between .modal-content and .modal-body/.modal-footer, which
   breaks Bootstrap's scrollable-modal layout: the body never scrolled and the
   footer (Cancel / Submit) was pushed off-screen on shorter windows. Make the
   form the flex column instead, so the body scrolls and the footer stays
   pinned. Plus the app's control spec (38px fields, 5px radius, 13px labels,
   green focus), Email + Phone side by side, and a full-screen sheet on phones. */
html body .feedback-widget-modal .modal-dialog {
  max-width: 560px;
}
html body .feedback-widget-modal .modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
html body .feedback-widget-modal .modal-content > form > .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
html body .feedback-widget-modal .modal-header {
  padding: 16px 20px;
}
html body .feedback-widget-modal .modal-title {
  font-size: 18px;
  font-weight: 600;
}
html body .feedback-widget-modal .modal-body {
  padding: 16px 20px;
}
html body .feedback-widget-modal .modal-body .mb-3 {
  margin-bottom: 14px !important;
}
html body .feedback-widget-modal__intro {
  margin-bottom: 14px;
  font-size: 13.5px;
}
html body .feedback-widget-modal .form-label {
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--eq-dark-grey, #4a5553);
}
html body .feedback-widget-modal__hint {
  font-weight: 400;
  color: #8a9592;
}
html body .feedback-widget-modal .form-control {
  min-height: 38px;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  font-size: 14px;
  box-shadow: none;
}
html body .feedback-widget-modal .form-control:focus {
  border-color: var(--eq-green);
  box-shadow: none;
}
html body .feedback-widget-modal .form-control[type="file"] {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 36px;
}
html body .feedback-widget-modal .form-control[type="file"]::file-selector-button {
  /* Bootstrap pulls the button up/out by -0.375rem (it assumes the input's own
     vertical padding); with padding-top/bottom 0 above that left a strip of the
     input's background under the button. Reset the vertical margin so the button
     fills the 36px content box exactly (same in light and dark mode). */
  height: 36px;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 36px;
}
html body .feedback-widget-modal .feedback-widget-modal__description {
  min-height: 110px;
  max-height: 200px;
}
html body .feedback-widget-modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
html body .feedback-widget-modal .modal-footer {
  gap: 8px;
  padding: 12px 20px;
}
html body .feedback-widget-modal .modal-footer > .btn {
  min-height: 38px;
  margin: 0;
  padding: 0 18px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
}
html body .feedback-widget-modal .feedback-widget-modal__cancel {
  border: 1px solid #d6d6d6 !important;
  background: var(--eq-white, #fff) !important;
  color: var(--eq-dark-grey, #4a5553) !important;
}
html body .feedback-widget-modal .feedback-widget-modal__cancel:hover {
  border-color: var(--eq-green) !important;
}

/* Dark mode */
html body.dark-mode .feedback-widget-modal .modal-content {
  background: #141718;
  border-color: #2b3435;
  color: #e9f0ee;
}
html body.dark-mode .feedback-widget-modal .modal-header,
html body.dark-mode .feedback-widget-modal .modal-footer {
  border-color: #2b3435;
}
html body.dark-mode .feedback-widget-modal .form-label {
  color: #c6d1ce;
}
html body.dark-mode .feedback-widget-modal__hint {
  color: #7d8a87;
}
html body.dark-mode .feedback-widget-modal .form-control {
  border-color: #535353;
  background-color: #1a1a1a;
  color: #e9f0ee;
  color-scheme: dark;
}
html body.dark-mode .feedback-widget-modal .form-control:focus {
  border-color: var(--eq-green);
}
html body.dark-mode .feedback-widget-modal .feedback-widget-modal__cancel {
  border-color: #535353 !important;
  background: #1a1a1a !important;
  color: #c6d1ce !important;
}
html body.dark-mode .feedback-widget-modal .feedback-widget-modal__cancel:hover {
  border-color: var(--eq-green) !important;
}

/* Phones: full-screen sheet, body scrolls, Cancel / Submit pinned at the bottom. */
@media (max-width: 575px) {
  html body .feedback-widget-modal .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  html body .feedback-widget-modal .modal-content {
    height: 100%;
    max-height: 100%;
    border: 0;
    border-radius: 0;
  }
  html body .feedback-widget-modal__row {
    grid-template-columns: 1fr;
  }
  html body .feedback-widget-modal .modal-footer {
    flex-wrap: nowrap;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  html body .feedback-widget-modal .modal-footer > .btn {
    flex: 1 1 0;
  }
}
/* Feedback modal: app green for Submit / OK, darker title, and the Module
   dropdown square like the other fields (a mobile rule makes it a pill). */
html body .feedback-widget-modal .modal-footer > .btn-success {
  border-color: var(--eq-green) !important;
  background-color: var(--eq-green) !important;
  color: #fff !important;
}
html body .feedback-widget-modal .modal-footer > .btn-success:not(:disabled):hover {
  filter: brightness(1.06);
}
html body:not(.dark-mode) .feedback-widget-modal .modal-title {
  color: var(--eq-darker-grey, #1f2d2a);
}
html body .feedback-widget-modal .filter-select__control {
  min-height: 38px;
  border-radius: 5px !important;
}

/* ── Desktop sidebar rail: 9 items (Timeline … Deals, Delivery, FII/FPI & DII,
   no "More" drawer) -- slightly smaller icons and gaps so the whole menu fits
   on shorter screens (e.g. 1366x768). Each item was 78px (58px top padding,
   36px icon); now ~63px. Every *_menu class (normal + .active) sets its own
   36px background icon at "center 15px", hence the !important overrides. */
@media (min-width: 992px) {
  /* Stack items from the top with a small fixed gap (the rail used
     justify-content: space-between, which spread them over the full screen
     height -- big gaps on tall screens). */
  /* (out-ranks style.css's nav.sidebar .position-sticky > ul.nav.flex-column
     { justify-content: space-between }) */
  html body nav.sidebar .position-sticky > ul.nav.flex-column {
    justify-content: flex-start;
    gap: 20px;
    padding-top: 20px;
  }
  /* Icon 36px, 10px from the top; label right under it. */
  html body .sidebar .nav.flex-column > .nav-item > .nav-link {
    padding: 52px 6px 9px;
    font-size: 13px;
    line-height: 1.25;
    background-size: 36px 36px !important;
    background-position: center 10px !important;
  }
  /* Active icon is a green-masked ::before (style.css) fixed at 36px / top
     15px -- size and place it exactly like the inactive icon above. */
  html body .sidebar .nav.flex-column > .nav-item > .nav-link.active::before {
    top: 10px;
    width: 36px;
    height: 36px;
  }
}

/* ── Deals participant view (?participant=...): compact header ───────────── */
html body .deals_screen .deals_prof_section--participant {
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
html body .deals_screen .deals_prof_section--participant .deals_prof_section_thumb {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(65, 170, 5, 0.12);
}
html body .deals_screen .deals_prof_section--participant .deals_prof_section_thumb svg {
  width: 22px;
  height: 22px;
  color: var(--eq-green) !important;
  opacity: 1 !important;
}
html body .deals_screen .deals_prof_section--participant .deals_prof_section_text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
html body .deals_screen .deals_prof_section_kicker {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--eq-dark-grey, #5b6a66);
}
html body .deals_screen .deals_prof_section--participant .deals_prof_section_text_heading {
  overflow: hidden;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
html body .deals_screen .deals_prof_section--participant .fundamentals-all-deals-btn {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
html body.dark-mode .deals_screen .deals_prof_section_kicker {
  color: #8a9a96;
}
html body.dark-mode .deals_screen .deals_prof_section--participant .deals_prof_section_thumb {
  background: rgba(65, 170, 5, 0.16);
}
@media (max-width: 575px) {
  html body .deals_screen .deals_prof_section--participant .deals_prof_section_text_heading {
    font-size: 16px;
  }
}
html body .deals_screen .deals_prof_section--participant .deals_prof_section_text_heading {
  color: var(--eq-darker-grey, #1f2d2a) !important;
}
html body.dark-mode .deals_screen .deals_prof_section--participant .deals_prof_section_text_heading {
  color: #e9f0ee !important;
}

/* ── Company page header (phones): Consolidated / Standalone + "Change
   company…" on one line. At 360px the search box only got ~111px, so its
   placeholder wrapped to two lines (and the box grew taller than the
   toggles). Slightly tighter toggles, no divider / smaller chevron, a
   single-line placeholder (ellipsis if a very narrow screen still can't fit
   it), and the box at the toggles' 34px height. */
@media (max-width: 575px) {
  html body .fundamentals-header-right {
    align-items: center;
    gap: 8px;
  }
  html body .fund-scope-toggle {
    gap: 6px;
    flex: none;
  }
  html body .fund-scope-toggle > .btn.btn-outline-secondary {
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
  }
  html body .fundamentals-change-company .deal-company-search__control {
    min-height: 34px !important;
    height: 34px;
  }
  html body .fundamentals-change-company .deal-company-search__value-container {
    flex-wrap: nowrap;
    padding: 0 0 0 10px;
  }
  html body .fundamentals-change-company .deal-company-search__placeholder,
  html body .fundamentals-change-company .deal-company-search__single-value {
    overflow: hidden;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  html body .fundamentals-change-company .deal-company-search__indicator-separator {
    display: none;
  }
  html body .fundamentals-change-company .deal-company-search__dropdown-indicator {
    padding: 0 6px;
  }
  html body .fundamentals-change-company .deal-company-search__indicators {
    height: 32px;
  }
}