/* OPTIONSGEX_OVERVIEW_MOBILE_UX_V1 */

.ogx-freshness-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
  overflow:hidden;
  border:1px solid #24536d;
  border-radius:14px;
  background:#18364a;
}

.ogx-freshness-grid>div{
  min-width:0;
  padding:10px 12px;
  background:#071a27;
  border-right:1px solid #18364a;
  border-bottom:1px solid #18364a;
}

.ogx-freshness-grid small{
  display:block;
  margin-bottom:4px;
  color:#73a9c6;
  font-size:10px;
}

.ogx-freshness-grid b{
  display:block;
  overflow:hidden;
  color:#ecf8ff;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ogx-overview-tx{
  position:relative;
  cursor:pointer;
  padding-right:30px!important;
  -webkit-tap-highlight-color:transparent;
}

.ogx-overview-tx::after{
  content:"›";
  position:absolute;
  top:50%;
  right:9px;
  transform:translateY(-50%);
  color:#8db9d0;
  font-size:22px;
}

.ogx-overview-tx:active{
  background:rgba(28,139,196,.15)!important;
}

.ogx-detail-clone{
  display:grid;
  gap:8px;
}

@media(max-width:640px){
  .ogx-freshness-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .ogx-freshness-grid>div{
    padding:9px;
  }

  .ogx31-quick,
  .ogex-crypto-summary{
    display:block!important;
  }

  .ogx31-metric,
  .ogex-crypto-stat{
    margin:0!important;
    padding:12px 30px 12px 10px!important;
    border-width:0 0 1px!important;
    border-radius:0!important;
  }
}

/* OPTIONSGEX_OVERVIEW_COMPACT_TX_V2 */

@media(max-width:640px){

  /* Remove duplicate mobile page headings / alert shortcut. */
  #page-overview > .ogx-v2-pagehead,
  #page-crypto > .ogx-v2-pagehead,
  #page-overview .ogx-overview-alert-link-v2,
  #page-overview article.panel:has(#ogxOpenCanonicalAlertsV2){
    display:none!important;
  }

  #ogexNseOverviewV31{
    gap:6px!important;
    padding-bottom:76px!important;
  }

  /* Freshness = 2 compact rows x 3 columns. */
  #ogx31Status.ogx-freshness-grid,
  #ogxCryptoFreshnessV1.ogx-freshness-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    border-radius:10px!important;
  }

  .ogx-freshness-grid>div{
    min-height:40px!important;
    padding:6px 7px!important;
  }

  .ogx-freshness-grid small{
    margin:0 0 2px!important;
    font-size:8px!important;
    line-height:1.1!important;
  }

  .ogx-freshness-grid b{
    font-size:10px!important;
    line-height:1.15!important;
  }

  /* NSE key values = one compact transaction table. */
  #ogx31Quick.ogx31-quick{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:1px!important;
    overflow:hidden!important;
    border:1px solid #21445a!important;
    border-radius:10px!important;
    background:#21445a!important;
  }

  #ogx31Quick .ogx31-metric{
    min-height:48px!important;
    margin:0!important;
    padding:7px 26px 7px 9px!important;
    border:0!important;
    border-radius:0!important;
    background:#081c29!important;
  }

  #ogx31Quick .ogx31-metric small{
    font-size:8px!important;
  }

  #ogx31Quick .ogx31-metric strong{
    margin-top:3px!important;
    font-size:13px!important;
  }

  /* Every NSE widget becomes one transaction row. */
  #ogexNseOverviewV31 .ogx31-card{
    position:relative!important;
    min-height:58px!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:10px!important;
    cursor:pointer;
  }

  #ogexNseOverviewV31 .ogx31-card::before{
    content:"";
    position:absolute;
    z-index:3;
    top:0;
    bottom:0;
    left:0;
    width:4px;
    background:#20a8e8;
  }

  #ogexNseOverviewV31 .ogx31-head{
    min-height:58px!important;
    padding:9px 36px 25px 13px!important;
    align-items:flex-start!important;
  }

  #ogexNseOverviewV31 .ogx31-head h3{
    margin:0!important;
    font-size:12px!important;
    line-height:1.2!important;
  }

  #ogexNseOverviewV31 .ogx31-more{
    position:absolute!important;
    z-index:5;
    top:0!important;
    right:0!important;
    width:34px!important;
    height:58px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    font-size:0!important;
  }

  #ogexNseOverviewV31 .ogx31-more::after{
    content:"›";
    color:#69c9f5;
    font-size:22px;
  }

  #ogexNseOverviewV31
  .ogx31-card > div[id^="ogx31-"]{
    display:none!important;
  }

  #ogexNseOverviewV31 .ogx31-card::after{
    content:attr(data-ogx-summary);
    position:absolute;
    left:13px;
    right:38px;
    bottom:8px;
    overflow:hidden;
    color:#8fb0c2;
    font-size:9px;
    line-height:1.15;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* Crypto summary follows the same compact transaction language. */
  #ogexCryptoV6Root .ogex-crypto-summary{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:1px!important;
    overflow:hidden!important;
    border:1px solid #21445a!important;
    border-radius:10px!important;
    background:#21445a!important;
  }

  #ogexCryptoV6Root .ogex-crypto-stat{
    min-height:50px!important;
    margin:0!important;
    padding:7px 28px 7px 9px!important;
    border:0!important;
    border-radius:0!important;
  }

  #ogexCryptoV6Root .ogex-model-card,
  #ogexCryptoV6Root .ogex-position,
  #ogexCryptoV6Root .ogex-alert-item,
  #ogexCryptoV6Root .ogex-paper-position{
    min-height:58px!important;
    max-height:64px!important;
    margin:0 0 6px!important;
    overflow:hidden!important;
    border-radius:10px!important;
  }

  /* Full content returns inside the popup drawer. */
  .ogx-detail-clone .ogex-model-card,
  .ogx-detail-clone .ogex-position,
  .ogx-detail-clone .ogex-alert-item,
  .ogx-detail-clone .ogex-paper-position{
    max-height:none!important;
    overflow:visible!important;
  }
}