/* DASM Live R6.30 — final responsive controls alignment.
   Mobile Teams: five controls on one line without shrinking type.
   Tablet: keep My Teams / In Play grouped at the far right. */

@media (max-width:760px){
  html body #view-teams .page-head{margin-bottom:8px!important}
  html body #view-teams .teams-toolbar{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-template-rows:42px!important;
    align-items:center!important;
    gap:4px!important;
    width:100%!important;
    height:42px!important;
    min-height:42px!important;
    margin:0 0 9px!important;
    padding:0!important;
    overflow:visible!important;
  }
  html body #view-teams .teams-mode-toggle,
  html body #view-teams .team-actions{
    display:contents!important;
  }
  html body #view-teams .teams-mode-toggle button,
  html body #view-teams .teams-club-filter,
  html body #view-teams .teams-club-filter .club-picker,
  html body #view-teams .teams-club-filter .club-picker-button,
  html body #view-teams #teamsInPlay,
  html body #view-teams #teamsMine{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:40px!important;
    min-height:40px!important;
    margin:0!important;
    padding-left:4px!important;
    padding-right:4px!important;
    white-space:nowrap!important;
    line-height:1!important;
  }
  html body #view-teams .teams-mode-toggle button{font-size:10px!important}
  html body #view-teams .teams-club-filter{grid-column:auto!important;grid-row:1!important}
  html body #view-teams .teams-club-filter>span{display:none!important}
  html body #view-teams .teams-club-filter .club-picker-button{justify-content:center!important;gap:3px!important}
  html body #view-teams .teams-club-filter .club-picker-button i{font-size:9px!important}
  html body #view-teams #teamClubPickerButton>span:not(:has(img)):not(.club-picker-selected)>b{font-size:0!important}
  html body #view-teams #teamClubPickerButton>span:not(:has(img)):not(.club-picker-selected)>b::after{content:'Club';font-size:10px!important}
  html body #view-teams #teamsInPlay{font-size:0!important}
  html body #view-teams #teamsInPlay::after{content:'In Play';font-size:10px!important;font-weight:900!important}
  html body #view-teams #teamsMine{font-size:0!important}
  html body #view-teams #teamsMine::after{content:'My Teams';font-size:10px!important;font-weight:900!important}
}

@media (min-width:761px) and (max-width:1366px){
  /* Teams: controls on left, action pair anchored to the far right. */
  html body #view-teams .teams-toolbar{
    grid-template-columns:minmax(150px,180px) minmax(145px,190px) minmax(0,1fr)!important;
    align-items:center!important;
    gap:8px!important;
  }
  html body #view-teams .team-actions{
    grid-column:3!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    width:100%!important;
    max-width:none!important;
    margin-left:auto!important;
  }
  html body #view-teams .team-actions .button,
  html body #view-teams .team-actions .button.small{
    flex:0 1 180px!important;
    width:auto!important;
    min-width:138px!important;
    max-width:180px!important;
    height:40px!important;
    min-height:40px!important;
    white-space:nowrap!important;
  }

  /* Table: keep My Teams as the right-most action in both orientations. */
  html body #view-table .table-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
  }
  html body #view-table .table-side{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    margin-left:auto!important;
  }
  html body #view-table #tableMine{
    order:2!important;
    min-width:138px!important;
    white-space:nowrap!important;
  }
}