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

   IPO FINDER — Isolated styling (does NOT touch QMomo)

   File: /assets/ipo_finder.css

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



.ipo-wrap{

  width: 100%;

  padding: 10px 10px 18px 10px;

}



/* Filters layout (scoped) */

.ipo-wrap .qmomo-filters{

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.ipo-wrap .qmomo-filter-grid{

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 12px;

}



@media (max-width: 1100px){

  .ipo-wrap .qmomo-filter-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 700px){

  .ipo-wrap .qmomo-filter-grid{ grid-template-columns: 1fr; }

}



.ipo-wrap .qmomo-filter{

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.ipo-wrap .qmomo-label{

  font-size: .72rem;

  opacity: .85;

  margin: 0;

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

}



/* Inputs — Dash-safe */

.ipo-wrap .qmomo-filter input,

.ipo-wrap .qmomo-filter input.dash-input,

.ipo-wrap .qmomo-filter .dash-input,

.ipo-wrap .qmomo-filter .dash-input input{

  width: 100%;

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

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

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

  padding: 10px 10px !important;

  border-radius: 10px !important;

  outline: none !important;

  box-shadow: none !important;

}



.ipo-wrap .qmomo-filter input::placeholder,

.ipo-wrap .qmomo-filter input.dash-input::placeholder{

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

}



.ipo-wrap .qmomo-filter input:focus,

.ipo-wrap .qmomo-filter input.dash-input:focus{

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

  box-shadow: 0 0 0 3px rgba(46,204,113,.12) !important;

}



/* Remove number arrows (IPO only) */

.ipo-wrap input[type=number]::-webkit-outer-spin-button,

.ipo-wrap input[type=number]::-webkit-inner-spin-button,

.ipo-wrap input.dash-input[type=number]::-webkit-outer-spin-button,

.ipo-wrap input.dash-input[type=number]::-webkit-inner-spin-button{

  -webkit-appearance: none;

  margin: 0;

}

.ipo-wrap input[type=number],

.ipo-wrap input.dash-input[type=number]{

  -moz-appearance: textfield;

  appearance: textfield;

}



/* Chart grid (older section you had — leaving untouched, even if unused) */

.ipo-wrap .ipo-grid-2{

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

  margin-top: 14px;

}

@media (max-width: 1100px){

  .ipo-wrap .ipo-grid-2{ grid-template-columns: 1fr; }

}



/* Ticker link */

.ipo-wrap .ipo-ticker-link{

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

  text-decoration: none;

  font-weight: 800;

}

.ipo-wrap .ipo-ticker-link:hover{

  color: #2ecc71;

  text-decoration: underline;

}



/* Keep table inside card on wide screens */

.ipo-table-wrap{

  width: 100%;

  overflow-x: auto;

  overflow-y: hidden;

}



/* Prevent table from shrinking weirdly; allow horizontal scroll */

.ipo-table-wrap .market-table{

  width: 100%;

  min-width: 1200px; /* adjust if you want */

  table-layout: auto;

}



/* Space between stacked cards */

.ui-card{

  margin-bottom: 30px;

}



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

   ✅ IPO CHARTS — FIXED (single source of truth)

   Replaces all the conflicting plot blocks you had

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



.ipo-wrap .ipo-charts-wrap{

  width: 100%;

  margin-top: 14px;   /* space between table card and charts card */

}



/* one row: scatter grows, pie fixed */

.ipo-wrap .ipo-charts-row{

  display: flex;

  gap: 16px;

  align-items: stretch;

  width: 100%;

}



/* scatter takes remaining width */

.ipo-wrap .ipo-chart-bubble{

  flex: 1 1 auto;

  min-width: 0;              /* ✅ allows Plotly to shrink properly */

}



/* pie is smaller + fixed column */

.ipo-wrap .ipo-chart-pie{

  flex: 0 0 320px;           /* ✅ smaller than your 360/420 */

  width: 320px;

  min-width: 320px;

  display: flex;

  align-items: center;

  justify-content: center;

}



@media (max-width: 1100px){

  .ipo-wrap .ipo-charts-row{

    flex-direction: column;

  }

  .ipo-wrap .ipo-chart-pie{

    flex: 0 0 auto;

    width: 100%;

    min-width: 0;

    justify-content: flex-start;

  }

}



/* ensure plotly graphs fill their wrappers */

.ipo-wrap .ipo-chart-bubble .js-plotly-plot,

.ipo-wrap .ipo-chart-pie .js-plotly-plot{

  width: 100% !important;

}