/* assets/screener_stage2.css */



/* Keep same look as legacy HTML */

table.screener-table{

  width: 100%;

  border-collapse: collapse;

  font-size: 0.7em;

}



table.screener-table thead th{

  padding: 8px;

  border: 1px solid #616161;

  background-color: #1e1e1e;

  color: #64b5f6;

  text-align: center;

  position: sticky;

  top: 0;

  z-index: 2;

}



table.screener-table tbody td{

  padding: 8px;

  border: 1px solid #616161;

  text-align: center;

}



table.screener-table tbody tr:hover{

  background-color: rgba(100, 181, 246, 0.5);

}



/* Limit width of Alpha Rating and Squeeze columns (like old html)

   NOTE: nth-child index depends on table columns count/order.

   Here: Alpha is 10th, Squeeze is 11th.

*/

table.screener-table th:nth-child(10),

table.screener-table td:nth-child(10),

table.screener-table th:nth-child(11),

table.screener-table td:nth-child(11){

  max-width: 80px;

  white-space: nowrap;

}



/* Left-align ONLY the Name column (tbody, not header) */

table.screener-table tbody td:nth-child(2){

  text-align: left;

}



/* ticker link hover bold like old */

.ticker-link:hover{

  font-weight: bold;

}



/* logo circle (same vibe as old) */

.scr2-logo{

  width: 20px;

  height: 20px;

  border-radius: 50%;

  overflow: hidden;

  background: #d3d3d3;

  vertical-align: middle;

  margin-right: 6px;

}



/* tighten ticker text a bit */

.scr2-ticker-text{

  font-weight: 800;

}

/* Level-2 link smaller + indented */

.nav-l2-link{

  margin-left: 14px;

  font-size: 0.86rem;

  opacity: 0.92;

  border-left: 2px solid rgba(46,204,113,.25);

  padding-left: 12px !important;

}

.nav-l2-link:hover{

  opacity: 1;

  border-left-color: rgba(46,204,113,.65);

}



/* Stock Screeners: same as other pills (Market/Indexes/...) */

#nav-stock-screeners-toggle.nav-l1-toggle:hover{

  background: rgba(0,0,0,.18) !important; /* keep default pill bg so overlay shows */

}



/* Expanded: mimic .nav-pills .nav-link.active */

#nav-stock-screeners-toggle.nav-l1-toggle[aria-expanded="true"]{

  background: rgba(46,204,113,.14) !important;

  border: 1px solid rgba(46,204,113,.25) !important;

  box-shadow: 0 8px 22px rgba(46,204,113,.10) !important;

}

/* =========================================================

   Screener Stage 2 — UW DARK (exact match)

   ========================================================= */



/* Base */

table.screener-table{

  font-family: inherit;

  font-size: 12px;

  line-height: 1.2;

  /* background: rgba(0,0,0,.14); */  /* ❌ remove */

  color: rgba(255,255,255,.88);

  border-collapse: separate;

  border-spacing: 0;

}





/* =========================

   HARD RESET — kill borders

   ========================= */

table.screener-table,

table.screener-table > :not(caption) > * > *{

  border: 0 !important;

  box-shadow: none !important;

  outline: 0 !important;

}



table.screener-table td,

table.screener-table th{

  border: 0 !important;

}



/* =========================

   HEADER — UW DARK (THIS ONE)

   ========================= */

table.screener-table thead th{

  font-size: 11px;

  letter-spacing: .35px;

  padding: 10px 10px;



  background: rgba(12, 12, 12, 0.92) !important;  /* 🔥 exact UW dark */

  color: rgba(255,255,255,.78) !important;

  border-bottom: 1px solid rgba(255,255,255,.12) !important;



  text-align: center;

  vertical-align: middle;

}



/* =========================

   BODY CELLS

   ========================= */

table.screener-table tbody td{

  padding: 9px 10px;

  color: rgba(255,255,255,.86);

  vertical-align: middle;

  background: transparent;

}



/* =========================

   HOVER — UW

   ========================= */

table.screener-table tbody tr:hover td{

  background-color: rgba(255,255,255,.040);

  color: rgba(255,255,255,.95);

  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);

}



/* =========================

   FIRST COLUMN — logo aligned

   ========================= */

table.screener-table tbody td:nth-child(1){

  text-align: left !important;

  white-space: nowrap;

}



/* logo spacing */

table.screener-table .scr2-logo{

  margin-right: 8px;

}



/* =========================================================

   FIX: body background must live on TDs (otherwise TR hover + card bg leaks)

   ========================================================= */



/* kill the old legacy TR hover (blue) */

table.screener-table tbody tr:hover{

  background-color: transparent !important;

}





/* hover (UW) */

table.screener-table tbody tr:hover td{

  background-color: rgba(255,255,255,.040) !important;

  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);

  color: rgba(255,255,255,.95) !important;

}



/* =========================================================

   SCREENER TABLE — use same base as sectors/market

   (kill legacy overrides)

   ========================================================= */



/* hard-kill all legacy screener table styling */

table.screener-table,

table.screener-table thead th,

table.screener-table tbody td,

table.screener-table tbody tr:hover,

table.screener-table tbody tr:hover td{

  background: unset !important;

  background-color: unset !important;

  border: 0 !important;

  box-shadow: none !important;

}



/* keep it a normal bootstrap table */

table.screener-table{

  width: 100%;

  border-collapse: separate !important;

  border-spacing: 0;

}



/* header: match market */

table.screener-table.table-dark > thead > tr > th{

  background-color: rgba(12,12,12,.92) !important;

  color: rgba(255,255,255,.78) !important;

  border-bottom: 1px solid rgba(255,255,255,.12) !important;

  font-size: 11px;

  letter-spacing: .35px;

  padding: 10px 10px;

}



/* cells: match market/sectors sizing */

table.screener-table.table-dark > tbody > tr > *{

  padding: 9px 10px;

  color: rgba(255,255,255,.86) !important;

}



/* ✅ FORCE DARK BASE (this is what your screener is missing) */

table.screener-table.table-dark > tbody > tr > *{

  background-color: rgba(0,0,0,.55) !important;

}



/* ✅ Zebra (darker, like your market movers cards) */

table.screener-table.table-dark > tbody > tr:nth-child(odd) > *{

  background-color: rgba(0,0,0,.62) !important;

}

table.screener-table.table-dark > tbody > tr:nth-child(even) > *{

  background-color: rgba(0,0,0,.52) !important;

}



/* hover: like market */

table.screener-table.table-hover > tbody > tr:hover > *{

  background-color: rgba(255,255,255,.040) !important;

  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);

  color: rgba(255,255,255,.95) !important;

}



/* keep your column tweaks */

table.screener-table th:nth-child(10),

table.screener-table td:nth-child(10),

table.screener-table th:nth-child(11),

table.screener-table td:nth-child(11){

  max-width: 80px;

  white-space: nowrap;

}



table.screener-table tbody td:nth-child(2){

  text-align: left;

}



table.screener-table tbody td:nth-child(1){

  text-align: left !important;

  white-space: nowrap;

}

/* remove the extra base background behind the zebra */

table.screener-table.table-dark{

  --bs-table-bg: transparent !important;

  background-color: transparent !important;

}

/* =========================================================

   STAGE 2 — PAGE POLISH (no logic changes)

   ========================================================= */



/* ---- controls: tighter inputs/selects ---- */

.scr2-controls .scr2-label{

  font-size: 11px;

  opacity: .78;

  margin-bottom: 4px;

  letter-spacing: .25px;

}



.scr2-controls .scr2-input,

.scr2-controls .scr2-select,

.scr2-controls .form-control,

.scr2-controls .form-select{

  height: 30px !important;

  min-height: 30px !important;

  padding: 4px 10px !important;

  font-size: 12px !important;

  border-radius: 10px !important;



  background: rgba(0,0,0,.20) !important;

  color: rgba(255,255,255,.90) !important;

  border: 1px solid rgba(255,255,255,.10) !important;

}



.scr2-controls .scr2-input::placeholder{

  color: rgba(255,255,255,.35) !important;

}



/* ---- Index dropdown: make the SELECT look like your pill toggles ---- */

#scr2-index.scr2-select,

#scr2-index.form-select{

  background: rgba(0,0,0,.18) !important;

  border: 1px solid rgba(46,204,113,.18) !important;

  box-shadow: 0 10px 22px rgba(0,0,0,.35);

}

#scr2-index.scr2-select:focus,

#scr2-index.form-select:focus{

  border-color: rgba(46,204,113,.35) !important;

  box-shadow: 0 0 0 .18rem rgba(46,204,113,.10) !important;

}



/* ---- Apply + Export buttons: same vibe as your other pages ---- */

#scr2-apply.btn,

#scr2-export.btn{

  height: 30px !important;

  padding: 4px 12px !important;

  border-radius: 10px !important;

  font-weight: 800;

  font-size: 12px;

}



#scr2-apply.btn{

  background: rgba(46,204,113,.18) !important;

  border: 1px solid rgba(46,204,113,.32) !important;

  color: rgba(255,255,255,.92) !important;

  box-shadow: 0 10px 22px rgba(46,204,113,.10);

}

#scr2-apply.btn:hover{

  background: rgba(46,204,113,.28) !important;

  border-color: rgba(46,204,113,.45) !important;

}



#scr2-export.btn{

  background: rgba(255,255,255,.06) !important;

  border: 1px solid rgba(255,255,255,.12) !important;

  color: rgba(255,255,255,.85) !important;

}

#scr2-export.btn:hover{

  background: rgba(255,255,255,.10) !important;

  border-color: rgba(255,255,255,.18) !important;

  color: rgba(255,255,255,.92) !important;

}



/* ---- Sorted column arrow + header hit-area ---- */

.scr2-th-btn{

  display: inline-flex;

  align-items: center;

  gap: 6px;

}



.scr2-sort-arrow{

  display: inline-block;

  min-width: 10px;

  margin-left: 2px;

  font-size: 11px;

  opacity: .55;

  transform: translateY(-1px);

}



.scr2-sort-arrow.is-active{

  opacity: .95;

}



/* ---- Space above the table ---- */

.scr2-table-card{

  margin-top: 12px;

}



/* ---- Remove grey background under the table + kill padding ---- */

.scr2-table-card .market-card-body{

  padding: 0 !important;

  background: transparent !important;

}



/* if Bootstrap table adds a base "sheet" behind, keep it off */

table.screener-table.table-dark{

  --bs-table-bg: transparent !important;

  background-color: transparent !important;

}

/* =========================================================

   STAGE2 — Controls polish (match Index page / dark rounded)

   ========================================================= */



.scr2-wrap{

  padding: 10px 10px 18px 10px;

}



.scr2-controls{

  margin-bottom: 8px;

}



.scr2-label{

  font-weight: 450;

  color: rgba(255,255,255,.85);

  margin-bottom: 6px;

  font-size: 12px;

  letter-spacing: .25px;

}



/* Inputs smaller + dark */

.scr2-input.form-control,

.scr2-select.form-select{

  background: rgba(0,0,0,.55) !important;

  color: rgba(255,255,255,.92) !important;

  border: 1px solid rgba(255,255,255,.14) !important;

  border-radius: 14px !important;



  padding: 8px 10px !important;

  height: 38px !important;

  font-weight: 800;

  box-shadow: 0 10px 25px rgba(0,0,0,.35) !important;

}



/* Focus ring (brand) */

.scr2-input.form-control:focus,

.scr2-select.form-select:focus{

  outline: none !important;

  box-shadow: 0 0 0 2px rgba(46,204,113,.18), 0 10px 25px rgba(0,0,0,.35) !important;

  border-color: rgba(46,204,113,.45) !important;

}



/* Kill number spinners (clean look like your other pages) */

.scr2-input.form-control[type="number"]::-webkit-outer-spin-button,

.scr2-input.form-control[type="number"]::-webkit-inner-spin-button{

  -webkit-appearance: none;

  margin: 0;

}

.scr2-input.form-control[type="number"]{

  -moz-appearance: textfield;

}



/* Make native <option> list dark-ish (browser-dependent) */

.scr2-select option{

  background-color: #0b0b10 !important;

  color: rgba(255,255,255,.92) !important;

  font-weight: 700;

}



/* =========================================================

   Index dropdown (dbc.DropdownMenu) — same vibe as INDEX page

   ========================================================= */



.scr2-index-toggle.index-dropdown-toggle{

  padding: 8px 12px !important;

  height: 38px;

  display: inline-flex;

  align-items: center;

  gap: 8px;

}



#scr2-index-menu .dropdown-menu{

  background: #0b0b10 !important;

  border: 1px solid rgba(46,204,113,.25) !important;

  border-radius: 14px !important;

  padding: 6px;

  box-shadow: 0 20px 45px rgba(0,0,0,.75);

}



#scr2-index-menu .dropdown-item{

  color: rgba(255,255,255,.90) !important;

  font-weight: 700;

  border-radius: 10px;

  padding: 8px 12px;

}



#scr2-index-menu .dropdown-item:hover,

#scr2-index-menu .dropdown-item:focus{

  background: rgba(46,204,113,.25) !important;

  color: #ffffff !important;

}



/* =========================================================

   Buttons

   ========================================================= */



.scr2-btn{

  border-radius: 12px !important;

  border: 1px solid rgba(255,255,255,.14) !important;

  font-weight: 450 !important;

  padding: 7px 12px !important;

  box-shadow: 0 12px 30px rgba(0,0,0,.45);

}



.scr2-btn-apply{

  background: rgba(46,204,113,.20) !important;

  border-color: rgba(46,204,113,.35) !important;

  color: rgba(255,255,255,.92) !important;

}

.scr2-btn-apply:hover{

  background: rgba(46,204,113,.30) !important;

  border-color: rgba(46,204,113,.55) !important;

}



.scr2-btn-export{

  background: rgba(255,255,255,.06) !important;

  color: rgba(255,255,255,.88) !important;

}

.scr2-btn-export:hover{

  background: rgba(255,255,255,.10) !important;

}



/* Subtitle */

.scr2-subtitle{

  color: rgba(255,255,255,.82);

  font-weight: 800;

  font-size: 12px;

  padding-left: 6px;

}



/* =========================================================

   Sort indicator + clickable header vibe

   ========================================================= */



.scr2-th-click{

  display: inline-flex;

  align-items: center;

  gap: 6px;

  cursor: pointer;

  user-select: none;

}

.scr2-sort-arrow{

  color: rgba(255,255,255,.85);

  font-weight: 900;

}



/* =========================================================

   Table spacing + remove grey "block" below table

   ========================================================= */



.scr2-table-card{

  margin-top: 12px;

}



.scr2-table-card .card-body.scr2-table-body{

  padding: 0 !important;                 /* remove extra space under table */

  background: transparent !important;    /* remove grey background */

}

/* =========================================================

   STAGE2 — Filter dropdowns (dbc.Select)

   match Index page look

   ========================================================= */



/* the closed control */

.scr2-select{

  background-color: rgba(0,0,0,.55) !important;

  color: rgba(255,255,255,.92) !important;



  border: 1px solid rgba(46,204,113,.28) !important;

  border-radius: 14px !important;



  padding: 10px 12px !important;

  font-weight: 800;

  box-shadow:

    0 0 0 1px rgba(46,204,113,.10),

    0 10px 25px rgba(0,0,0,.45) !important;



  /* makes arrow match dark control better in many browsers */

  appearance: auto;

}



.scr2-select:focus{

  outline: none !important;

  border-color: rgba(46,204,113,.65) !important;

  box-shadow:

    0 0 0 2px rgba(46,204,113,.35),

    0 12px 30px rgba(0,0,0,.55) !important;

}



/* dropdown list (native select options) */

.scr2-select option{

  background-color: #0b0b10 !important;

  color: rgba(255,255,255,.92) !important;

  font-weight: 700;

}



/* selected option */

.scr2-select option:checked{

  background-color: rgba(46,204,113,.45) !important;

  color: #ffffff !important;

}

/* =========================================================

   FINAL — Screener table DARK (authoritative)

   ========================================================= */



table.screener-table.table-dark{

  --bs-table-bg: transparent !important;

  background-color: transparent !important;

}



/* Header */

table.screener-table.table-dark > thead > tr > th{

  background-color: rgba(12,12,12,.92) !important;

  color: rgba(255,255,255,.78) !important;

  border-bottom: 1px solid rgba(255,255,255,.12) !important;

}



/* Base rows */

table.screener-table.table-dark > tbody > tr > *{

  background-color: rgba(0,0,0,.58) !important;

  color: rgba(255,255,255,.86) !important;

}



/* Zebra */

table.screener-table.table-dark > tbody > tr:nth-child(odd) > *{

  background-color: rgba(0,0,0,.62) !important;

}

table.screener-table.table-dark > tbody > tr:nth-child(even) > *{

  background-color: rgba(0,0,0,.52) !important;

}



/* Hover */

table.screener-table.table-hover > tbody > tr:hover > *{

  background-color: rgba(255,255,255,.040) !important;

  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);

  color: rgba(255,255,255,.95) !important;

}

/* =========================

   Filters card + spacing

   ========================= */

.scr2-filters-card{

  margin-top: 6px;

}



.scr2-filters-body{

  padding: 14px 16px !important;

}



/* Bigger filter titles */

.scr2-label{

  font-size: 13px !important;

  font-weight: 450 !important;

  letter-spacing: .25px;

  color: rgba(255,255,255,.88) !important;

  margin-bottom: 8px !important;

}



/* More space before table */

.scr2-gap-before-table{

  height: 16px;

}



/* Buttons: Apply like GO */

.scr2-btn{

  border-radius: 14px !important;

  font-weight: 900 !important;

  font-size: 12px !important;

  padding: 8px 14px !important;

  box-shadow: 0 12px 30px rgba(0,0,0,.45);

}



/* Apply == "Go" vibe */

.scr2-btn-go{

  background: rgba(46,204,113,.22) !important;

  border: 1px solid rgba(46,204,113,.40) !important;

  color: rgba(255,255,255,.94) !important;

}

.scr2-btn-go:hover{

  background: rgba(46,204,113,.32) !important;

  border-color: rgba(46,204,113,.60) !important;

}



/* Export same font vibe, less loud */

.scr2-btn-export{

  background: rgba(255,255,255,.06) !important;

  border: 1px solid rgba(255,255,255,.14) !important;

  color: rgba(255,255,255,.88) !important;

}

.scr2-btn-export:hover{

  background: rgba(255,255,255,.10) !important;

  border-color: rgba(255,255,255,.20) !important;

}



/* Subtitle align */

.scr2-subtitle{

  font-weight: 800 !important;

  font-size: 12px !important;

}



/* =========================

   Table: force DARK (authoritative)

   ========================= */

table.screener-table.table-dark{

  --bs-table-bg: transparent !important;

  background-color: transparent !important;

}

table.screener-table.table-dark > tbody > tr > *{

  background-color: rgba(0,0,0,.58) !important;

  color: rgba(255,255,255,.86) !important;

}

table.screener-table.table-dark > tbody > tr:nth-child(odd) > *{

  background-color: rgba(0,0,0,.62) !important;

}

table.screener-table.table-dark > tbody > tr:nth-child(even) > *{

  background-color: rgba(0,0,0,.52) !important;

}

/* =========================================================

   STAGE2 — make dropdown menus NOT clipped by cards

   ========================================================= */

.scr2-controls-card,

.scr2-controls-card .card-body,

.scr2-controls{

  overflow: visible !important;

}



#scr2-index-menu,

#scr2-mc-menu,

#scr2-avgvol-menu{

  position: relative;

  z-index: 2000;

}



#scr2-index-menu .dropdown-menu,

#scr2-mc-menu .dropdown-menu,

#scr2-avgvol-menu .dropdown-menu{

  z-index: 3000 !important;

}



/* =========================================================

   STAGE2 — dropdown toggles (match Index look)

   ========================================================= */

.scr2-dd-toggle{

  background: rgba(0,0,0,.55) !important;

  color: rgba(255,255,255,.92) !important;

  border: 1px solid rgba(46,204,113,.45) !important;

  border-radius: 14px !important;

  padding: 10px 14px !important;

  font-weight: 800 !important;

  box-shadow:

    0 0 0 1px rgba(46,204,113,.15),

    0 10px 25px rgba(0,0,0,.45) !important;

}



.scr2-dd-toggle:hover,

.scr2-dd-toggle:focus{

  background: rgba(0,0,0,.65) !important;

  border-color: rgba(46,204,113,.75) !important;

  box-shadow:

    0 0 0 2px rgba(46,204,113,.35),

    0 12px 30px rgba(0,0,0,.55) !important;

}



/* menus */

#scr2-mc-menu .dropdown-menu,

#scr2-avgvol-menu .dropdown-menu{

  background: #0b0b10 !important;

  border: 1px solid rgba(46,204,113,.25) !important;

  border-radius: 14px !important;

  padding: 6px;

  box-shadow: 0 20px 45px rgba(0,0,0,.75);

}



#scr2-mc-menu .dropdown-item,

#scr2-avgvol-menu .dropdown-item{

  color: rgba(255,255,255,.90) !important;

  font-weight: 700;

  border-radius: 10px;

  padding: 8px 12px;

}



#scr2-mc-menu .dropdown-item:hover,

#scr2-avgvol-menu .dropdown-item:hover{

  background: rgba(46,204,113,.25) !important;

  color: #fff !important;

}



/* =========================================================

   Bigger filter labels

   ========================================================= */

.scr2-label-lg{

  font-size: 13px !important;

  font-weight: 450 !important;

  letter-spacing: .25px;

  margin-bottom: 6px;

}



/* =========================================================

   Buttons bigger + more breathing room

   ========================================================= */

.scr2-actions-row{

  padding-top: 6px;

  padding-bottom: 6px;

}



.scr2-btn{

  border-radius: 14px !important;

  font-weight: 900 !important;

  padding: 10px 16px !important;

  font-size: 13px !important;

  box-shadow: 0 12px 30px rgba(0,0,0,.45);

}



/* Apply = same vibe as GO */

.scr2-btn-go{

  background: rgba(46,204,113,.20) !important;

  border: 1px solid rgba(46,204,113,.45) !important;

  color: rgba(255,255,255,.95) !important;

}

.scr2-btn-go:hover{

  background: rgba(46,204,113,.30) !important;

  border-color: rgba(46,204,113,.70) !important;

}



.scr2-btn-export-big{

  background: rgba(255,255,255,.06) !important;

  border: 1px solid rgba(255,255,255,.14) !important;

  color: rgba(255,255,255,.90) !important;

}

.scr2-btn-export-big:hover{

  background: rgba(255,255,255,.10) !important;

  border-color: rgba(255,255,255,.20) !important;

}



/* =========================================================

   FORCE TABLE DARK (authoritative final)

   ========================================================= */

table.screener-table.table-dark{

  --bs-table-bg: transparent !important;

  background-color: transparent !important;

}



table.screener-table.table-dark > thead > tr > th{

  background-color: rgba(12,12,12,.92) !important;

  color: rgba(255,255,255,.78) !important;

  border-bottom: 1px solid rgba(255,255,255,.12) !important;

}



table.screener-table.table-dark > tbody > tr > *{

  background-color: rgba(0,0,0,.58) !important;

  color: rgba(255,255,255,.86) !important;

}



table.screener-table.table-dark > tbody > tr:nth-child(odd) > *{

  background-color: rgba(0,0,0,.62) !important;

}

table.screener-table.table-dark > tbody > tr:nth-child(even) > *{

  background-color: rgba(0,0,0,.52) !important;

}



table.screener-table.table-hover > tbody > tr:hover > *{

  background-color: rgba(255,255,255,.040) !important;

  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);

  color: rgba(255,255,255,.95) !important;

}



/* remove grey padding block under table */

.scr2-table-card .card-body.scr2-table-body{

  padding: 0 !important;

  background: transparent !important;

}

/* =========================================================

   STAGE2 — Dropdowns: no clipping + consistent borders

   Paste at VERY END of screener_stage2.css

   ========================================================= */



/* 1) FIX CLIPPING: allow dropdown menus to overflow cards/rows */

.scr2-wrap,

.scr2-controls,

.scr2-controls * ,

.scr2-controls .row,

.scr2-controls .col,

.scr2-controls .dbc-row,

.scr2-controls .dbc-col,

.scr2-filters-card,

.scr2-filters-card .card,

.scr2-filters-card .card-body,

.market-card,

.market-card .card-body{

  overflow: visible !important;

}



/* If any wrapper still clips (common in Bootstrap cards) */

.card,

.card-body{

  overflow: visible !important;

}



/* 2) Ensure Index dropdown menu sits above everything */

#scr2-index-menu{

  position: relative;

  z-index: 5000 !important;

}

#scr2-index-menu .dropdown-menu{

  z-index: 6000 !important;

  position: absolute !important; /* keep it anchored to the toggle */

}



/* (Optional) if you still see it behind the table header */

table.screener-table thead th{

  z-index: 2 !important;

}



/* 3) Match dbc.Select borders to Index toggle (closed control look) */

.scr2-controls .form-select,

.scr2-controls select.scr2-select,

.scr2-controls .scr2-select{

  background: rgba(0,0,0,.55) !important;

  color: rgba(255,255,255,.92) !important;



  border: 1px solid rgba(46,204,113,.45) !important;   /* ✅ same as Index vibe */

  border-radius: 14px !important;                       /* ✅ same rounding */

  box-shadow:

    0 0 0 1px rgba(46,204,113,.15),

    0 10px 25px rgba(0,0,0,.45) !important;



  /* keep your current font (don’t force a family) */

  font-weight: inherit !important;

}



/* Focus ring like Index */

.scr2-controls .form-select:focus,

.scr2-controls .scr2-select:focus{

  outline: none !important;

  border-color: rgba(46,204,113,.75) !important;

  box-shadow:

    0 0 0 2px rgba(46,204,113,.35),

    0 12px 30px rgba(0,0,0,.55) !important;

}



/* 4) Keep native option list dark (browser-dependent but helps) */

.scr2-controls .form-select option,

.scr2-controls .scr2-select option{

  background-color: #0b0b10 !important;

  color: rgba(255,255,255,.92) !important;

}





/* =========================================================

   STAGE2 — Dropdown toggles (Market Cap / Min Avg Vol)

   match inputs (NO green by default)

   ========================================================= */



/* CLOSED STATE — neutral, same as inputs */

.scr2-dd-toggle{

  width: 100% !important;                 /* ✅ full width */

  display: flex !important;

  justify-content: space-between;

  align-items: center;



  background: rgba(0,0,0,.55) !important;

  color: rgba(255,255,255,.92) !important;



  border: 1px solid rgba(255,255,255,.18) !important;  /* ❌ no green */

  border-radius: 14px !important;



  padding: 10px 14px !important;

  font-weight: 800 !important;



  box-shadow: 0 10px 25px rgba(0,0,0,.35) !important;  /* neutral shadow */

}



/* HOVER / FOCUS — green only here (like inputs) */

.scr2-dd-toggle:hover,

.scr2-dd-toggle:focus,

.scr2-dd-toggle[aria-expanded="true"]{

  border-color: rgba(46,204,113,.55) !important;

  box-shadow:

    0 0 0 2px rgba(46,204,113,.18),

    0 12px 30px rgba(0,0,0,.55) !important;

}



/* Make the whole DropdownMenu container full width */

#scr2-mc-menu,

#scr2-avgvol-menu{

  width: 100% !important;

}



/* Ensure the button inside stretches */

#scr2-mc-menu > .dropdown-toggle,

#scr2-avgvol-menu > .dropdown-toggle{

  width: 100% !important;

}

/* =========================================================

   STAGE2 — Market Cap + Min Avg Vol (dbc.DropdownMenu)

   SAME AS TEXT INPUTS (size/font) + glow ONLY when selected/open

   (Index dropdown is NOT touched)

   ========================================================= */



/* Full width containers */

#scr2-mc-menu,

#scr2-avgvol-menu{

  width: 100% !important;

}



/* Make the toggle button full width */

#scr2-mc-menu > .dropdown-toggle,

#scr2-avgvol-menu > .dropdown-toggle{

  width: 100% !important;

}



/* CLOSED STATE = exactly like .scr2-input.form-control */

#scr2-mc-menu .scr2-dd-toggle,

#scr2-avgvol-menu .scr2-dd-toggle{

  width: 100% !important;

  height: 38px !important;

  min-height: 38px !important;



  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;



  padding: 8px 10px !important;                 /* same as inputs */

  font-size: 12px !important;                   /* same as inputs */

  font-weight: 800 !important;                  /* same as inputs */



  background: rgba(0,0,0,.55) !important;

  color: rgba(255,255,255,.92) !important;



  border: 1px solid rgba(255,255,255,.14) !important;  /* neutral border */

  border-radius: 14px !important;



  box-shadow: 0 10px 25px rgba(0,0,0,.35) !important;  /* neutral shadow */

}



/* IMPORTANT: no glow on hover (inputs don’t glow on hover) */

#scr2-mc-menu .scr2-dd-toggle:hover,

#scr2-avgvol-menu .scr2-dd-toggle:hover{

  border-color: rgba(255,255,255,.14) !important;

  box-shadow: 0 10px 25px rgba(0,0,0,.35) !important;

}



/* GLOW ONLY WHEN "SELECTED" (focused or open) — like inputs */

#scr2-mc-menu .scr2-dd-toggle:focus,

#scr2-avgvol-menu .scr2-dd-toggle:focus,

#scr2-mc-menu .scr2-dd-toggle[aria-expanded="true"],

#scr2-avgvol-menu .scr2-dd-toggle[aria-expanded="true"]{

  outline: none !important;

  border-color: rgba(46,204,113,.45) !important;

  box-shadow: 0 0 0 2px rgba(46,204,113,.18),

              0 10px 25px rgba(0,0,0,.35) !important;

}



/* Dropdown menu panel — keep your rounded style (NOT index) */

#scr2-mc-menu .dropdown-menu,

#scr2-avgvol-menu .dropdown-menu{

  background: #0b0b10 !important;

  border: 1px solid rgba(46,204,113,.25) !important;

  border-radius: 14px !important;

  padding: 6px !important;

  box-shadow: 0 20px 45px rgba(0,0,0,.75) !important;

}



/* Items */

#scr2-mc-menu .dropdown-item,

#scr2-avgvol-menu .dropdown-item{

  border-radius: 10px !important;

  padding: 8px 12px !important;

}

/* =========================================================

   STAGE2 — FORCE Market Cap + Min Avg Vol toggles

   to match .scr2-input (textbox) look

   ========================================================= */



/* target ONLY these two dropdown toggles (NOT index) */

#scr2-mc-menu .dropdown-toggle,

#scr2-avgvol-menu .dropdown-toggle,

#scr2-mc-menu .scr2-dd-toggle,

#scr2-avgvol-menu .scr2-dd-toggle{

  /* kill bootstrap button look */

  appearance: none !important;

  -webkit-appearance: none !important;



  background-image: none !important;

  text-shadow: none !important;

  filter: none !important;



  /* match textbox sizing */

  width: 100% !important;

  height: 38px !important;

  min-height: 38px !important;



  padding: 8px 10px !important;     /* same as input */

  font-size: 12px !important;       /* same as input */

  font-weight: 800 !important;      /* same as input */



  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;



  /* match textbox colors/border */

  background: rgba(0,0,0,.55) !important;

  color: rgba(255,255,255,.92) !important;



  border: 1px solid rgba(255,255,255,.14) !important;  /* neutral like input */

  border-radius: 14px !important;



  /* match textbox shadow */

  box-shadow: 0 10px 25px rgba(0,0,0,.35) !important;

}



/* no glow on hover (textbox does not glow on hover) */

#scr2-mc-menu .dropdown-toggle:hover,

#scr2-avgvol-menu .dropdown-toggle:hover,

#scr2-mc-menu .scr2-dd-toggle:hover,

#scr2-avgvol-menu .scr2-dd-toggle:hover{

  border-color: rgba(255,255,255,.14) !important;

  box-shadow: 0 10px 25px rgba(0,0,0,.35) !important;

}



/* glow ONLY when focused/open (same as textbox focus) */

#scr2-mc-menu .dropdown-toggle:focus,

#scr2-avgvol-menu .dropdown-toggle:focus,

#scr2-mc-menu .dropdown-toggle[aria-expanded="true"],

#scr2-avgvol-menu .dropdown-toggle[aria-expanded="true"]{

  outline: none !important;

  border-color: rgba(46,204,113,.45) !important;

  box-shadow: 0 0 0 2px rgba(46,204,113,.18),

              0 10px 25px rgba(0,0,0,.35) !important;

}



/* ensure the dropdown containers are full width */

#scr2-mc-menu,

#scr2-avgvol-menu{

  width: 100% !important;

}



/* (optional) keep caret aligned nicely */

#scr2-mc-menu .dropdown-toggle::after,

#scr2-avgvol-menu .dropdown-toggle::after{

  margin-left: auto !important;

}

/* =========================================================

   FINAL OVERRIDE — ONLY MC + AVG VOL dropdown toggles

   match textbox (.scr2-input) exactly

   ========================================================= */



#scr2-mc-menu > button.dropdown-toggle,

#scr2-avgvol-menu > button.dropdown-toggle{

  width: 100% !important;

  height: 38px !important;

  min-height: 38px !important;



  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;



  padding: 8px 10px !important;

  font-size: 12px !important;

  font-weight: 800 !important;



  background: rgba(0,0,0,.55) !important;

  color: rgba(255,255,255,.92) !important;



  border: 1px solid rgba(255,255,255,.14) !important;

  border-radius: 14px !important;



  box-shadow: 0 10px 25px rgba(0,0,0,.35) !important;



  /* kill bootstrap button look */

  background-image: none !important;

}



/* no glow on hover */

#scr2-mc-menu > button.dropdown-toggle:hover,

#scr2-avgvol-menu > button.dropdown-toggle:hover{

  border-color: rgba(255,255,255,.14) !important;

  box-shadow: 0 10px 25px rgba(0,0,0,.35) !important;

}



/* glow only when open/focused */

#scr2-mc-menu > button.dropdown-toggle:focus,

#scr2-avgvol-menu > button.dropdown-toggle:focus,

#scr2-mc-menu > button.dropdown-toggle[aria-expanded="true"],

#scr2-avgvol-menu > button.dropdown-toggle[aria-expanded="true"]{

  outline: none !important;

  border-color: rgba(46,204,113,.45) !important;

  box-shadow: 0 0 0 2px rgba(46,204,113,.18),

              0 10px 25px rgba(0,0,0,.35) !important;

}

/* =========================================================

   STAGE2 — Actions row spacing + lighter buttons + hide legend

   (paste at VERY END)

   ========================================================= */



/* More space ABOVE the buttons row */

.scr2-actions{

  margin-top: 18px !important;   /* was mt-3 (~16px), bump a bit more */

  padding-top: 10px !important;  /* adds extra breathing room */

}



/* Buttons: less bold + slightly softer look */

#scr2-apply.btn,

#scr2-export.btn{

  font-weight: 600 !important;   /* less bold */

  letter-spacing: .1px !important;

}



/* (Optional) if you still want them a touch smaller visually */

#scr2-apply.btn,

#scr2-export.btn{

  opacity: .92;

}



/* Remove the legend/subtitle to the right of the buttons */

#scr2-subtitle{

  display: none !important;

}

/* =========================================================

   STAGE2 — Darker table header (final override)

   ========================================================= */

table.screener-table.table-dark > thead > tr > th{

  background-color: rgba(6,6,6,.96) !important;   /* darker than 12,12,12 */

  color: rgba(255,255,255,.75) !important;

  border-bottom: 1px solid rgba(255,255,255,.10) !important;

}



/* optional: make the header look a bit “denser” */

table.screener-table.table-dark > thead > tr > th{

  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06) !important;

}

/* =========================================================

   STAGE2 — NO BORDERS anywhere (header + zebra + body)

   Paste at VERY END (final authority)

   ========================================================= */



/* Kill table borders + bootstrap border vars */

table.screener-table,

table.screener-table *{

  border: 0 !important;

  outline: 0 !important;

}



/* Kill bootstrap table border-color + any leftover separators */

table.screener-table.table-dark{

  --bs-table-border-color: transparent !important;

  --bs-border-color: transparent !important;

}



/* Ensure header has NO bottom border */

table.screener-table.table-dark > thead > tr > th{

  border: 0 !important;

}



/* Ensure body cells have NO borders (zebra too) */

table.screener-table.table-dark > tbody > tr > *{

  border: 0 !important;

}



/* Remove “border-like” effects */

table.screener-table,

table.screener-table > :not(caption) > * > *,

table.screener-table.table-hover > tbody > tr:hover > *{

  box-shadow: none !important;

}

/* =========================

   STAGE2 — Table top-right pagination (UW)

   ========================= */



.scr2-table-topbar{

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 8px 12px 6px 12px;

}



/* Pagination group */

.scr2-pagination{

  display: inline-flex;

  align-items: center;

  gap: 10px;

}



/* Triangle buttons */

.scr2-page-btn{

  background: transparent !important;

  border: 0 !important;

  padding: 2px 4px !important;



  color: rgba(255,255,255,.75) !important;

  font-weight: 900;

  font-size: 12px;

}



.scr2-page-btn:hover{

  color: #2ecc71 !important;

}



/* Page text */

.scr2-page-info{

  font-size: 11px;

  font-weight: 700;

  opacity: .75;

  letter-spacing: .25px;

  white-space: nowrap;

}

/* Pagination bar pinned top-right above the table */

.scr2-table-card{

  position: relative;

}



.scr2-table-topbar{

  position: absolute;

  top: 10px;

  right: 12px;

  z-index: 10;



  display: flex;

  align-items: center;

  gap: 10px;

}



.scr2-pagination{

  display: inline-flex;

  align-items: center;

  gap: 10px;

}



/* UnusualWhales-ish buttons */

.scr2-page-btn{

  background: rgba(255,255,255,.06) !important;

  border: 1px solid rgba(255,255,255,.12) !important;

  border-radius: 10px !important;

  padding: 4px 10px !important;

  line-height: 1 !important;

}



.scr2-page-btn:hover{

  background: rgba(255,255,255,.10) !important;

  border-color: rgba(255,255,255,.18) !important;

}



/* Page text */

.scr2-page-info{

  font-size: 12px;

  font-weight: 800;

  color: rgba(255,255,255,.72);

  white-space: nowrap;

}



/* Create space so the absolute topbar doesn't overlap header */

.scr2-table-body{

  padding-top: 38px !important;

}

/* --- Pagination bar above table --- */

.scr2-table-topbar{

  display: flex;

  align-items: center;

  justify-content: flex-end;

  padding: 8px 10px;

  gap: 10px;



  /* this is the “reserved space” */

  height: 44px;

}



/* Make the table header stick BELOW the topbar (not at top:0) */

table.screener-table thead th{

  top: 44px;          /* must match .scr2-table-topbar height */

  z-index: 3;         /* stay above rows */

}

.scr2-table-topbar{

  margin-bottom: 20px;

}

/* =========================================================

   FIX: pagination must be in normal flow (not absolute)

   Paste at VERY END (final override)

   ========================================================= */



.scr2-table-topbar{

  position: static !important;   /* overrides your position:absolute */

  top: auto !important;

  right: auto !important;



  height: auto !important;

  margin: 0 0 12px 0 !important; /* space below pager */

  padding: 8px 12px !important;

  justify-content: flex-end !important;

  z-index: auto !important;

}



/* you added this only to compensate for absolute topbar — remove it */

.scr2-table-body{

  padding-top: 0 !important;

}



/* keep sticky header normal */

table.screener-table thead th{

  top: 0 !important;

}

/* =========================================================

   STAGE2 — Pagination row: NO FILL (transparent)

   Paste at VERY END

   ========================================================= */



.scr2-table-topbar{

  background: transparent !important;

  background-color: transparent !important;

  box-shadow: none !important;

  border: 0 !important;

}



/* (optional) if the card header area itself is adding a “sheet” */

.scr2-table-card{

  background: transparent !important;

}

.ui-card .ui-card-header{

  font-weight: 450 !important;

}

.scr2-about-row button:hover{

  color: rgba(255,255,255,.92) !important;

  text-decoration: underline;

}

/* =========================================================

   STAGE2 — FINAL: restore Apply/Export size (override old 30px rule)

   ========================================================= */

#scr2-apply.btn,

#scr2-export.btn{

  height: 38px !important;

  min-height: 38px !important;

  padding: 8px 14px !important;

  border-radius: 14px !important;



  display: inline-flex !important;

  align-items: center !important;

}

/* =========================================================

   STAGE2 — Buttons like QMomo (slightly bigger)

   Paste at VERY END

   ========================================================= */



#scr2-apply.btn,

#scr2-export.btn{

  height: 42px !important;

  min-height: 42px !important;



  padding: 10px 18px !important;     /* bigger pill */

  border-radius: 16px !important;



  font-size: 13px !important;

  font-weight: 900 !important;



  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  line-height: 1 !important;

}



/* Keep About aligned with the new button height */

.scr2-about-link{

  line-height: 42px !important;

  font-size: 12px !important;

}

/* =========================================================

   STAGE2 — About modal (Getick style)

   ========================================================= */



.scr2-about-modal{

  background: radial-gradient(

    circle at top,

    rgba(46,204,113,.08),

    rgba(0,0,0,.95) 70%

  );

  border: 1px solid rgba(255,255,255,.12);

  border-radius: 18px;

  box-shadow: 0 30px 80px rgba(0,0,0,.75);

}



/* Header */

.scr2-about-header{

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 14px 18px;

  border-bottom: 1px solid rgba(255,255,255,.10);

}



.scr2-about-title{

  margin: 0;

  font-weight: 900;

  color: #2ecc71; /* Getick green */

  letter-spacing: .4px;

}



.scr2-about-close{

  font-size: 20px;

  font-weight: 900;

  color: rgba(255,255,255,.65);

  cursor: pointer;

}

.scr2-about-close:hover{

  color: #ffffff;

}



/* Body */

.scr2-about-body{

  padding: 18px 22px 22px 22px;

  color: rgba(255,255,255,.88);

  font-size: 13px;

  line-height: 1.55;

}



.scr2-about-image{

  width: 100%;

  max-width: 980px;

  display: block;

  margin: 0 auto 18px auto;

  border-radius: 14px;

  box-shadow: 0 20px 45px rgba(0,0,0,.65);

}



/* Sections */

.scr2-about-section{

  margin-top: 14px;

  margin-bottom: 6px;

  font-weight: 900;

  color: rgba(255,255,255,.85);

}



.scr2-about-text{

  margin-bottom: 8px;

  opacity: .9;

}



.scr2-about-list{

  margin: 6px 0 12px 16px;

  padding: 0;

}

.scr2-about-list li{

  margin-bottom: 4px;

  opacity: .9;

}