/* Signal mobile control-tray compaction.
   Presentation-only layer loaded after mobile-ui-visual.css.
   Keeps colors, labels and control width while refining vertical hierarchy. */

@media(max-width:700px){
  .toolbar{
    padding:5px!important;
    gap:4px!important;
  }

  .tabs{
    gap:4px!important;
    padding:2px!important;
  }
  .tab{
    min-height:30px!important;
    padding:4px 6px!important;
    gap:6px!important;
  }
  .tab::before{
    width:16px!important;
    height:16px!important;
    flex-basis:16px!important;
    -webkit-mask-size:16px 16px!important;
    mask-size:16px 16px!important;
  }

  /* Odds are a secondary control row: keep labels readable, reduce only the tray height. */
  .toolbar .odds-display-control{
    gap:1px!important;
    padding:1px!important;
  }
  .toolbar .odds-display-label{
    font-weight:700!important;
    opacity:.72!important;
  }
  .toolbar .odds-display-control button{
    min-height:26px!important;
    padding:2px 5px!important;
    line-height:1.05!important;
  }

  .search{
    gap:5px!important;
    padding:0 1px!important;
  }
  .search input{
    min-height:32px!important;
    padding:5px 9px!important;
  }

  /* KPI icons lead the hierarchy; info buttons and numbers keep their existing size. */
  .status-grid>.metric>span{
    gap:7px!important;
  }
  .status-grid>.metric>span::before{
    width:18px!important;
    height:18px!important;
    flex-basis:18px!important;
    -webkit-mask-size:18px 18px!important;
    mask-size:18px 18px!important;
  }

  /* 2026-09-01 mobile filter readability pass.
     Keep the tray height/4-column layout intact; only raise label/icon hierarchy above Odds. */
  .toolbar .tabs .tab{
    font-size:10px!important;
    font-weight:900!important;
    line-height:1!important;
    letter-spacing:.01em!important;
    color:#c6cec8!important;
  }
  .toolbar .tabs .tab:nth-child(n+2){
    font-size:11px!important;
  }
  .toolbar .tabs .tab::before{
    width:18px!important;
    height:18px!important;
    flex-basis:18px!important;
    -webkit-mask-size:18px 18px!important;
    mask-size:18px 18px!important;
    opacity:1!important;
    filter:drop-shadow(0 0 1px rgba(218,232,221,.35));
  }
  .toolbar .tabs .tab:nth-child(n+2)::before{
    width:21px!important;
    height:21px!important;
    flex-basis:21px!important;
    -webkit-mask-size:21px 21px!important;
    mask-size:21px 21px!important;
  }
  .toolbar .tabs .tab:hover,
  .toolbar .tabs .tab:focus-visible,
  .toolbar .tabs .tab[aria-pressed="true"],
  .toolbar .tabs .tab[data-active="1"]{
    color:var(--green)!important;
    text-shadow:0 0 7px rgba(131,223,137,.28)!important;
  }
  .toolbar .tabs .tab:hover::before,
  .toolbar .tabs .tab:focus-visible::before,
  .toolbar .tabs .tab[aria-pressed="true"]::before,
  .toolbar .tabs .tab[data-active="1"]::before{
    filter:drop-shadow(0 0 4px rgba(131,223,137,.55));
  }
}