/* EarthRoster 14.52.14: mobile active menu has gold LABEL ONLY.
   Retains the existing dock dimensions, layout and badges. */
@media (max-width:1023px) {
  html body #app#app#app nav.wwnav .wwnav-item:is(.active,.is-active),
  html body #app#app#app .wwnav .wwnav-item:is(.active,.is-active) {
    background:transparent!important;
    background-image:none!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    border-radius:0!important;
    color:rgba(226,234,220,.70)!important;
    transform:none!important;
    filter:none!important;
  }
  html body #app#app#app .wwnav .wwnav-item:is(.active,.is-active) .wwnav-lbl {
    color:#f1cb74!important;
    -webkit-text-fill-color:#f1cb74!important;
    font-weight:750!important;
    background:transparent!important;
    background-image:none!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
  }
  html body #app#app#app .wwnav .wwnav-item:is(.active,.is-active) .wwnav-ic,
  html body #app#app#app .wwnav .wwnav-item:is(.active,.is-active) .wwnav-ic svg {
    color:rgba(226,234,220,.70)!important;
    -webkit-text-fill-color:rgba(226,234,220,.70)!important;
    stroke:currentColor!important;
    font-weight:inherit!important;
    background:transparent!important;
    background-image:none!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
  }
  html body #app#app#app .wwnav .wwnav-item:is(.active,.is-active)::before,
  html body #app#app#app .wwnav .wwnav-item:is(.active,.is-active)::after {
    content:none!important;
    display:none!important;
    background:none!important;
    box-shadow:none!important;
  }
  /* A keyboard focus ring is kept only while a keyboard user focuses the item. */
  html body #app#app#app .wwnav .wwnav-item:is(.active,.is-active):focus-visible {
    outline:2px solid #f1cb74!important;
    outline-offset:2px!important;
  }
}
/* V1452.16 Bookings: three compact, fully filled rows (3 / 2 / 3).
   Grid uses six virtual columns: the long "Needs invoicing" label shares a
   half-width middle row, preserving every original label and count.
   Previous selectors target the actual page, not a temporary preview. */
@layer er-earth {
  @media (max-width:1023px) {
    html.er1394-refined body #app#app#app#app#app#app#app #page .bookings-page.v213-bookings.er1394-bookings .v213-filter-row,
    html body #app #page .bookings-page .v213-filter-row,
    html body #page .bookings-page .v213-filter-row {
      display:grid!important;
      grid-template-columns:repeat(6,minmax(0,1fr))!important;
      grid-auto-flow:row!important;
      grid-auto-rows:minmax(40px,auto)!important;
      flex-wrap:nowrap!important;
      justify-content:stretch!important;
      justify-items:stretch!important;
      align-content:start!important;
      align-items:stretch!important;
      column-gap:5px!important;
      row-gap:5px!important;
      width:100%!important;
      max-width:100%!important;
      min-width:0!important;
      height:auto!important;
      overflow:visible!important;
      padding:0!important;
      margin:0!important;
      scroll-snap-type:none!important;
    }
    html.er1394-refined body #app#app#app#app#app#app#app #page .bookings-page.v213-bookings.er1394-bookings .v213-filter-row .v213-filter,
    html body #app #page .bookings-page .v213-filter-row .v213-filter,
    html body #page .bookings-page .v213-filter-row .v213-filter {
      box-sizing:border-box!important;
      display:flex!important;
      flex-direction:row!important;
      flex:initial!important;
      justify-content:space-between!important;
      align-items:center!important;
      align-self:stretch!important;
      justify-self:stretch!important;
      width:100%!important;
      min-width:0!important;
      max-width:100%!important;
      min-height:40px!important;
      height:40px!important;
      max-height:none!important;
      padding:6px 9px!important;
      margin:0!important;
      gap:5px!important;
      border-radius:10px!important;
      white-space:nowrap!important;
      overflow-wrap:normal!important;
      text-align:left!important;
      font-size:11.4px!important;
      line-height:1.2!important;
      font-weight:500!important;
      scroll-snap-align:none!important;
    }
    /* Three entries, two wider entries, then three entries, with no vacant grid slots. */
    html.er1394-refined body #app#app#app#app#app#app#app #page .bookings-page.v213-bookings.er1394-bookings .v213-filter-row > .v213-filter,
    html body #page .bookings-page .v213-filter-row > .v213-filter {
      grid-column:span 2!important;
    }
    html.er1394-refined body #app#app#app#app#app#app#app #page .bookings-page.v213-bookings.er1394-bookings .v213-filter-row > .v213-filter:nth-child(4),
    html.er1394-refined body #app#app#app#app#app#app#app #page .bookings-page.v213-bookings.er1394-bookings .v213-filter-row > .v213-filter:nth-child(5),
    html body #page .bookings-page .v213-filter-row > .v213-filter:nth-child(4),
    html body #page .bookings-page .v213-filter-row > .v213-filter:nth-child(5) {
      grid-column:span 3!important;
    }
    html.er1394-refined body #app#app#app#app#app#app#app #page .bookings-page.v213-bookings.er1394-bookings .v213-filter-row .v213-filter span,
    html body #page .bookings-page .v213-filter-row .v213-filter span {
      min-width:0!important;
      white-space:nowrap!important;
      text-overflow:clip!important;
      font-size:inherit!important;
      line-height:inherit!important;
    }
    html.er1394-refined body #app#app#app#app#app#app#app #page .bookings-page.v213-bookings.er1394-bookings .v213-filter-row .v213-filter b,
    html body #page .bookings-page .v213-filter-row .v213-filter b {
      display:inline-grid!important;
      flex:0 0 auto!important;
      place-items:center!important;
      width:auto!important;
      min-width:20px!important;
      min-height:19px!important;
      height:19px!important;
      max-height:19px!important;
      margin:0!important;
      padding:0 5px!important;
      border-radius:6px!important;
      font-size:10.5px!important;
      line-height:1!important;
    }
  }
  @media (max-width:360px) {
    html body #page .bookings-page .v213-filter-row {column-gap:4px!important;row-gap:5px!important;}
    html body #page .bookings-page .v213-filter-row .v213-filter {
      padding-inline:5px!important;
      gap:3px!important;
      font-size:10.4px!important;
    }
  }
}