/* TAIF V5 — Price Screen Mobile Full Bleed V3
   Fixes the unused left-side gap by removing the hidden sidebar column
   from the mobile shell while the price screen is active.
   Scope: mobile price screen layout. */

@media (max-width: 860px){
  /* The old mobile shell still kept the hidden sidebar column.
     This is what created the large unused left side in the screenshot. */
  body.taif-mobile-mode .shell{
    --side:0px !important;
    grid-template-columns:minmax(0, 1fr) 0px !important;
  }

  body.taif-mobile-mode .content{
    grid-column:1 / -1 !important;
    width:100vw !important;
    max-width:100vw !important;
    min-width:0 !important;
    padding-inline:0 !important;
    overflow:hidden !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"]{
    width:100vw !important;
    max-width:100vw !important;
    min-width:0 !important;
    margin:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    overflow:hidden !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen{
    width:100vw !important;
    max-width:100vw !important;
    min-width:0 !important;
    margin:0 !important;
    padding:2px 0 6px !important;
    gap:2px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__board-head{
    display:none !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__board-body,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__list{
    width:100vw !important;
    max-width:100vw !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 1px !important;
    gap:2px !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    justify-items:stretch !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__pair-col,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__pair-badge{
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    overflow:hidden !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row{
    display:grid !important;
    grid-template-columns:
      minmax(36px, .52fr)
      minmax(90px, 1.65fr)
      minmax(50px, .76fr)
      minmax(27px, .32fr)
      minmax(50px, .76fr)
      minmax(50px, .76fr)
      minmax(27px, .32fr)
      minmax(50px, .76fr) !important;
    width:100% !important;
    inline-size:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    justify-self:stretch !important;
    min-height:40px !important;
    height:auto !important;
    margin:0 !important;
    padding:2px 1px !important;
    gap:2px !important;
    border-radius:10px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row > *{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    margin:0 !important;
    padding:0 2px !important;
    border-radius:7px !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    white-space:nowrap !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row > *::before{
    display:none !important;
    content:none !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__code{grid-column:1 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name{grid-column:2 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--buy{grid-column:3 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag{grid-column:4 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--sell{grid-column:5 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--dollar-buy{grid-column:6 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag{grid-column:7 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--dollar-sell{grid-column:8 !important;}

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name{
    justify-content:flex-end !important;
    padding-inline:4px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name-main{
    width:100% !important;
    max-width:100% !important;
    font-size:10.4px !important;
    line-height:1 !important;
    text-align:right !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__code,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num{
    font-size:10.1px !important;
    font-weight:900 !important;
    line-height:1 !important;
    text-overflow:ellipsis !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag-image,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag .price-screen__flag-image{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    min-height:18px !important;
  }
}

@media (max-width: 430px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen{
    padding:1px 0 6px !important;
    gap:2px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__board-body,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__list{
    padding:0 !important;
    gap:2px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row{
    grid-template-columns:
      minmax(35px, .54fr)
      minmax(84px, 1.60fr)
      minmax(47px, .76fr)
      minmax(25px, .32fr)
      minmax(47px, .76fr)
      minmax(47px, .76fr)
      minmax(25px, .32fr)
      minmax(47px, .76fr) !important;
    min-height:38px !important;
    gap:2px !important;
    padding:2px 1px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row > *{
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
    border-radius:6px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name-main{
    font-size:9.7px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__code,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num{
    font-size:9.4px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag-image,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag .price-screen__flag-image{
    width:17px !important;
    height:17px !important;
    min-width:17px !important;
    min-height:17px !important;
  }
}