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

   INDEX PAGE — cards + controls

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



:root{

  --stroke: rgba(255,255,255,.10);

  --brand: #2ecc71;

}



/* Card base (igual filosofía que market) */

.ui-card{

  border: 1px solid var(--stroke);

  border-radius: 22px;

  overflow: hidden;

  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));

  box-shadow: 0 14px 45px rgba(0,0,0,.60);

}



.ui-card-header{

  padding: 12px 16px;

  font-weight: 900;

  letter-spacing: .3px;

  color: var(--brand);

  border-bottom: 1px solid var(--stroke);

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

}



.ui-card-body{

  padding: 12px 14px;

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

}



/* Controls */

.index-label{

  font-weight: 900;

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

  margin-bottom: 6px;

}



/* Make dbc.Select dark & consistent */

.index-select{

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

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

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

  border-radius: 14px !important;

  padding: 10px 12px !important;

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

}



/* Fix arrow + focus */

.index-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;

}



/* Small info blocks */

.index-symbol-info{

  margin-top: 10px;

  font-weight: 800;

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

}



.index-pcr{

  margin-top: 8px;

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

  font-weight: 700;

}



.index-pcrv{

  margin-top: 6px;

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

  font-weight: 700;

}



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

   INDEX ETF DROPDOWN — Dark + Hover (native select fix)

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



.index-select {

  background-color: 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;

  padding: 10px 12px;

  font-weight: 800;

  box-shadow:

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

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

}



/* focus ring */

.index-select:focus {

  outline: none !important;

  box-shadow:

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

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

}



/* ===== CRITICAL PART ===== */

/* dropdown list options */

.index-select option {

  background-color: #0b0b10 !important;   /* true dark */

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

  font-weight: 700;

}



/* hover option (works in most browsers) */

.index-select option:hover {

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

  color: #ffffff !important;

}



/* selected option */

.index-select option:checked {

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

  color: #ffffff !important;

}



/* disabled option (if ever used) */

.index-select option:disabled {

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

}



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

   INDEX DROPDOWN — Getick Style (dbc.DropdownMenu)

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



.index-dropdown-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;



  box-shadow:

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

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

}



.index-dropdown-toggle:hover,

.index-dropdown-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;

}



/* ✅ dbc 2.0.4: style dropdown menu via component id */

#index-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 */

#index-etf-menu .dropdown-item {

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

  font-weight: 700;

  border-radius: 10px;

  padding: 8px 12px;

}



/* Hover */

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

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

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

  color: #ffffff !important;

}



/* Active */

/* ✅ ACTIVE (selected item) */

#index-etf-menu .dropdown-item.active,

#index-etf-menu .dropdown-item.active:hover,

#index-etf-menu .dropdown-item.active:focus {

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

  color: #ffffff !important;

}