/* sectors.css

   Dark Bootstrap-safe styling for /sectors (Dash)

   Works well alongside Bootstrap themes.

*/



.page-container{

  padding: 14px 14px 24px 14px;

}



.page-title{

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

  letter-spacing: .5px;

  font-weight: 700;

}



.page-subtitle{

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

  font-size: 12px;

  margin-top: 4px;

}



/* Cards */

.card-dark{

  background: rgba(0,0,0,.22);

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

  border-radius: 14px;

  box-shadow: 0 6px 18px rgba(0,0,0,.25);

  overflow: hidden;

}



.card-title-sm{

  font-size: 13px;

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

  font-weight: 700;

  letter-spacing: .35px;

}



.card-dark .card-header{

  background: rgba(0,0,0,.26);

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

}



.card-dark .card-body{

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

}



/* Select + button soft */

.select-dark{

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

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

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

  border-radius: 10px !important;

}



.select-dark:focus{

  box-shadow: 0 0 0 .2rem rgba(255,255,255,.08) !important;

}



.btn-soft{

  border-radius: 10px !important;

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

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

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

}



.btn-soft:hover{

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

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

}



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

   MARKET TABLE — UnusualWhales-style (Bootstrap-safe)

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



.market-table{

  font-family: inherit;

  font-size: 12px;

  line-height: 1.2;



  /* Bootstrap variables (CRITICAL) */

  --bs-table-bg: rgba(0,0,0,.14);

  --bs-table-hover-bg: rgba(255,255,255,.050); /* less subtle hover */

  --bs-table-border-color: rgba(255,255,255,.08);



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

}



.market-table thead th{

  font-size: 11px;

  letter-spacing: .35px;

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

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

  padding: 10px 10px;

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

}



.market-table td{

  padding: 9px 10px;

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

  border-top: 0 !important;

  border-bottom: 0 !important;

}



.market-table tbody tr{

  border: 0 !important;

}



.market-table tbody tr:hover td{

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

}



.td-symbol{

  font-weight: 700;

  letter-spacing: .25px;

}



/* Metric colors */

.m-pos{

  color: #00E676;

  text-shadow: 0 0 10px rgba(0,230,118,.15);

  font-weight: 700;

}



.m-neg{

  color: #FF5252;

  text-shadow: 0 0 10px rgba(255,82,82,.12);

  font-weight: 700;

}



.m-na{

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

}



/* Graph containers (Plotly) */

.js-plotly-plot, .plotly-graph-div{

  width: 100% !important;

  max-width: 100% !important;

}



/* TradingView buttons */

.tv-btn-group .tv-btn{

  border-radius: 10px !important;

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

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

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

  font-size: 12px;

  padding: 6px 10px;

}



.tv-btn-group .tv-btn:hover{

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

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

}



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

   SECTORS DROPDOWN — same as INDEX

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



#sector-etf-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);

}



/* Items */

#sector-etf-menu .dropdown-item {

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

  font-weight: 700;

  border-radius: 10px;

  padding: 8px 12px;

}



/* Hover */

#sector-etf-menu .dropdown-item:hover,

#sector-etf-menu .dropdown-item:focus {

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

  color: #ffffff !important;

}



/* Active */

#sector-etf-menu .dropdown-item:active {

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

  color: #ffffff !important;

}

/* ✅ Match Index dropdown style (by component id) */

#sectors-etf-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);

}



#sectors-etf-menu .dropdown-item {

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

  font-weight: 700;

  border-radius: 10px;

  padding: 8px 12px;

}



#sectors-etf-menu .dropdown-item:hover,

#sectors-etf-menu .dropdown-item:focus {

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

  color: #ffffff !important;

}



#sectors-etf-menu .dropdown-item:active {

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

  color: #ffffff !important;

}