/* phone + tablet only overrides */
/* phone + tablet only overrides */

/* IMPORTANT:
   Ye file tab kaam karegi jab spy.html me touch-ui script already ho.
   Desktop ko touch nahi karegi.
*/

.touch-ui .topbar{
  padding: 6px 10px !important;
}

.touch-ui .brand{
  font-size: 14px !important;
}

.touch-ui .top-controls{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: end !important;
  justify-content: flex-end !important;
}

.touch-ui .control{
  min-width: 82px !important;
}

.touch-ui .subbar{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 6px 8px !important;
  justify-content: center !important;
  align-items: center !important;
  max-width: 100% !important;
}

.touch-ui .left-chips,
.touch-ui .center-chip,
.touch-ui .right-chips{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-left: 0 !important;
  max-width: 100% !important;
  justify-content: center !important;
}

.touch-ui .center-chip{
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 1 auto !important;
}

/* MAIN LAYOUT = desktop jaisa side-by-side, but compact */
.touch-ui .layout{
  display: grid !important;
  grid-template-columns: minmax(0, 35%) minmax(0, 65%) !important;
  gap: 8px !important;
  align-items: stretch !important;
  height: auto !important;
  overflow: visible !important;
  padding: 8px !important;
}

.touch-ui .leftpanel,
.touch-ui .mainpanel{
  min-width: 0 !important;
  overflow: visible !important;
}

.touch-ui .leftpanel{
  height: 100% !important;
}

.touch-ui .mainpanel{
  height: auto !important;
}

.touch-ui .leftpanel .panel,
.touch-ui .mainpanel .panel{
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}

.touch-ui .leftpanel .panel{
  padding: 6px 8px 8px 8px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* OPTION CHAIN = left side thin + scrollable */
.touch-ui .option-chain-table-wrapper{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.touch-ui .chain{
  font-size: 10px !important;
}

.touch-ui .chain th,
.touch-ui .chain td{
  padding: 5px 4px !important;
}

/* RIGHT SIDE */
.touch-ui #rightMainPanel{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

.touch-ui #prebuiltPanel{
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.touch-ui #prebuiltChartBox{
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding-top: 0 !important;
  position: relative !important;
}

/* PREBUILT STRATEGIES = COMPACT + CENTERED */

.touch-ui .strategy-cards{
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px !important;
  justify-items: center !important;
  align-items: start !important;
}

.touch-ui .strategy-cards{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  justify-content: flex-start !important;
}

.touch-ui .strategy-cards.hidden{
  display: none !important;
}

.touch-ui .strategy-card{
  width: 70px !important;
  height: 58px !important;
  padding: 2px !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.touch-ui .strategy-card-title{
  font-size: 8px !important;
  line-height: 1.05 !important;
  min-height: 16px !important;
  margin-bottom: 2px !important;
}

.touch-ui .strategy-card-mini{
  width: 46px !important;
  height: 46px !important;
}

.touch-ui .payoff-metrics{
  position: static !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2px 4px !important;
  margin: 2px 0 4px 0 !important;
}

.touch-ui .payoff-metrics > div{
  font-size: 9px !important;
}

/* POSITIONS */
.touch-ui #positionsPanel{
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.touch-ui #posTable{
  display: block !important;
  width: 100% !important;
  overflow-x: auto !important;
}

.touch-ui #positionsPanel .panel-title-row{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

.touch-ui #positionsPanel #posTable thead{
  position: static !important;
}

.touch-ui #positionsPanel #posTable thead th{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

.touch-ui #positionsPanel #posTable tbody{
  display: table-row-group !important;
}

.touch-ui #positionsPanel #posTable tbody tr:first-child td{
  padding-top: 14px !important;
}

/* PAYOFF TOP METRICS ALIGN FIX */

.touch-ui .payoff-metrics{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 4px 6px !important;
}

/* label (Est Margin etc) */
.touch-ui .payoff-metrics span:first-child{
  font-size: 9px !important;
  white-space: nowrap !important;
}

/* value ($357 etc) */
.touch-ui .payoff-metrics span:last-child{
  font-size: 10px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}