/* Desktop web layout. Phones (under 1024px) are not in this file: the phone header, dock, and
   single-column pages stay exactly as they are. Loaded after the locked header CSS and Tailwind,
   so these rules only change how the existing header lays out once the window is wide enough
   for every menu item, and how page content uses that width. Lockup colours, sizes, and the
   aria-labels are untouched. */

@media (min-width: 1024px) {
  /* The shell was max-width 1360px and centered, so a wide monitor showed the phone stack in a
     column. Fill the window. The header's existing full-bleed margin still paints the bar
     edge to edge. */
  .app-v2-frame.app-v2-shell {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Header row: wordmark and group on the left, every top-level item on one line at the right.
     Labels never shrink, wrap, or ellipsis. A long group name gives up space before the menu does. */
  html .app-v2-shell > .app-v2-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px;
    overflow: visible;
  }
  html .app-v2-header .app-v2-header-left {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
  }
  html .app-v2-header .bb-header-group {
    flex: 0 1 auto;
    max-width: none;
  }
  html .app-v2-header .app-v2-nav {
    display: flex !important;
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    overflow: visible;
    min-width: max-content;
  }
  html .app-v2-header .app-v2-nav-btn {
    flex: 0 0 auto;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
  }

  /* Games: the filter bar stays full width; the slate is a grid of cards. */
  .bb-games-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .bb-games-list > .app-v2-game {
    min-width: 0;
    height: 100%;
  }
  .bb-games-list .app-v2-odds-head,
  .bb-games-list .app-v2-odds-row {
    grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr));
  }
  .bb-games-list .app-v2-team-identity-name,
  .bb-games-list .app-v2-game-title {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: break-word;
    max-width: none;
  }

  /* Summary: balance beside open bets, the day log beside the trend. */
  .bb-route-summary .app-v2-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px 20px;
  }
  .bb-route-summary .app-v2-content > * {
    margin-top: 0;
    margin-bottom: 0;
    min-width: 0;
  }
  .bb-summary-balance { grid-column: 1; grid-row: 1; }
  .bb-summary-open { grid-column: 2; grid-row: 1; }
  .bb-summary-settled { grid-column: 1; grid-row: 2; }
  .bb-summary-trend { grid-column: 2; grid-row: 2; }
  .bb-route-summary .bb-countered-offers { grid-column: 1 / -1; grid-row: 1; }
  .bb-route-summary .app-v2-content:has(.bb-countered-offers) .bb-summary-balance,
  .bb-route-summary .app-v2-content:has(.bb-countered-offers) .bb-summary-open { grid-row: 2; }
  .bb-route-summary .app-v2-content:has(.bb-countered-offers) .bb-summary-settled,
  .bb-route-summary .app-v2-content:has(.bb-countered-offers) .bb-summary-trend { grid-row: 3; }

  /* Board: chart and table use the full window. Side by side only once the table
     can show the handle, the amounts, and React without clipping. */
  .bb-route-board .app-v2-content {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 16px 20px;
  }
  .bb-route-board .app-v2-content > * {
    margin-top: 0;
    margin-bottom: 0;
    min-width: 0;
  }
  .bb-board-trend,
  .bb-board-table-wrap { grid-column: 1 / -1; }
  .bb-board-table-wrap { overflow-x: visible; }
  .bb-board-table th:first-child,
  .bb-board-table td:first-child {
    width: max-content;
    white-space: nowrap;
  }
  .bb-board-table td:first-child .flex,
  .bb-board-table td:first-child .truncate {
    max-width: none;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    overflow-wrap: normal;
  }
  /* Chart legend names are inline-ellipsis. Keep each handle on one line. */
  .bb-board-trend [style*="auto-fit"],
  .bb-summary-trend [style*="auto-fit"] {
    grid-template-columns: repeat(auto-fit, minmax(12rem, max-content)) !important;
  }
  .bb-board-trend [style*="text-overflow"],
  .bb-summary-trend [style*="text-overflow"] {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  /* Admin: wide blocks span the window; the shorter settings sit two-up.
     Pick lists and the balances table use an inner grid. */
  .bb-route-admin .app-v2-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px 20px;
  }
  .bb-route-admin .app-v2-content > * {
    margin-bottom: 0;
    min-width: 0;
  }
  .bb-route-admin .app-v2-content > .muted,
  .bb-route-admin .app-v2-content > .text-red-600 { grid-column: 1 / -1; }
  .bb-route-admin .bb-admin-nav,
  .bb-route-admin .bb-desk-span,
  .bb-route-admin .group-members-admin {
    grid-column: 1 / -1;
  }
  .bb-desk-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .group-members-admin .bb-member-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .bb-route-admin .admin-balances-table .truncate,
  .bb-route-admin .bb-member-who {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: none;
  }

  /* You: the settings list is a grid of rows, not one narrow phone stack.
     Profile fields sit two-up so the form uses the window and stays readable. */
  .bb-settings-hub,
  .bb-settings-section,
  .bb-profile-page,
  .bb-account-page {
    max-width: none;
    width: 100%;
  }
  .bb-settings-hub .bb-settings-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .bb-settings-hub .bb-settings-row,
  .bb-settings-hub .bb-settings-row:first-child {
    border: 1px solid var(--border, rgba(127, 127, 127, 0.35));
    border-radius: 16px;
    background: var(--surface-1);
    min-height: 72px;
  }
  .bb-settings-hub [data-testid="settings-signout"] {
    width: auto;
    max-width: 280px;
    display: inline-flex;
    justify-content: center;
  }
  .bb-profile-account {
    max-width: none;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px 24px;
  }
  .bb-profile-account > * {
    min-width: 0;
  }
  .bb-settings-me .truncate,
  .bb-profile-account .truncate {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: none;
  }
}

@media (min-width: 1600px) {
  .bb-route-board .app-v2-content {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
  .bb-board-trend { grid-column: 1; }
  .bb-board-table-wrap { grid-column: 2; }
  .bb-games-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bb-settings-hub .bb-settings-list,
  .group-members-admin .bb-member-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bb-desk-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bb-route-admin .app-v2-content {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}