/* JLJAM 7.10.48 — tablet header repair.
   Keep the brand readable and never cram search, brand and 7+ buttons
   into three columns at iPad widths. Loaded after all legacy rules. */
@media (min-width:701px) and (max-width:1280px) {
  body:not(.bm-native) #app > .topbar {
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:minmax(270px, max-content) minmax(0,1fr)!important;
    grid-template-rows:auto auto auto!important;
    column-gap:16px!important;
    row-gap:10px!important;
    align-items:center!important;
    width:100%!important;max-width:100vw!important;min-width:0!important;
    min-height:0!important;height:auto!important;
    padding:12px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left))!important;
  }
  body #app > .topbar > .brand {
    grid-row:1!important;grid-column:1!important;
    justify-self:start!important;align-self:center!important;
    display:flex!important;flex-flow:row nowrap!important;align-items:center!important;
    width:max-content!important;min-width:270px!important;max-width:100%!important;
    min-height:55px!important;height:auto!important;
    padding:0!important;margin:0!important;gap:11px!important;
    text-align:left!important;
  }
  body #app > .topbar > .brand img {
    width:53px!important;height:53px!important;max-width:53px!important;flex:0 0 53px!important;
    object-fit:contain!important;
  }
  body #app > .topbar > .brand > span {
    display:block!important;flex:0 1 auto!important;width:auto!important;
    min-width:0!important;max-width:100%!important;
    line-height:1.1!important;white-space:nowrap!important;
    overflow:visible!important;word-break:keep-all!important;overflow-wrap:normal!important;
    writing-mode:horizontal-tb!important;
  }
  body #app > .topbar > .brand :is(b,small) {
    display:block!important;max-width:none!important;
    white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important;
    writing-mode:horizontal-tb!important;
    line-height:1.2!important;
  }
  body #app > .topbar > .brand b {font-size:24px!important;letter-spacing:.04em!important;}
  body #app > .topbar > .brand small {font-size:15px!important;letter-spacing:.11em!important;margin-top:3px!important;}
  body #app > .topbar > .top-actions {
    grid-column:2!important;grid-row:1!important;
    display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
    justify-self:end!important;align-self:center!important;align-items:center!important;justify-content:flex-end!important;
    box-sizing:border-box!important;gap:7px!important;
    width:auto!important;max-width:100%!important;min-width:0!important;
    margin:0!important;
  }
  body #app > .topbar > .top-actions > * {flex-shrink:1!important;min-width:0!important;}
  body #app > .topbar > .top-actions > .artist-select {width:125px!important;max-width:125px!important;min-width:100px!important;}
  body #app > .topbar > .top-actions > .manager-chip {max-width:120px!important;min-width:45px!important;}
  body #app > .topbar > .top-actions > .manager-chip b {white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:64px!important;}
  body #app > .topbar > .search-trigger {
    grid-column:1/-1!important;grid-row:2!important;
    display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;
    justify-self:stretch!important;align-self:center!important;
    box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;
    height:50px!important;min-height:50px!important;
  }
  body:not(.bm-native) #app > .topbar > .jljam-navrail {
    grid-column:1/-1!important;grid-row:3!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
    box-sizing:border-box!important;
  }
  body #app > .topbar > .jljam-navrail .jljam-nav-position{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
}
/* Portrait iPads get four natural header rows so the touch controls
   remain reachable without squeezing the brand or creating horizontal scroll. */
@media (min-width:701px) and (max-width:930px) {
  body:not(.bm-native) #app > .topbar {
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto!important;
    row-gap:8px!important;
  }
  body #app > .topbar > .brand {grid-column:1!important;grid-row:1!important;}
  body #app > .topbar > .top-actions {
    grid-column:1!important;grid-row:2!important;
    justify-self:stretch!important;justify-content:flex-start!important;
    width:100%!important;max-width:100%!important;flex-wrap:wrap!important;
  }
  body #app > .topbar > .search-trigger {grid-column:1!important;grid-row:3!important;}
  body:not(.bm-native) #app > .topbar > .jljam-navrail {grid-column:1!important;grid-row:4!important;}
}