/* ============ Left sidebar navigation (desktop and tablet) ============
   Above 880px the former top bar becomes a fixed left panel: logo, page links, then the server/clock/energy/session chips and the account.
   Between 881px and 1100px the panel shrinks to an icon rail so small laptop windows keep room for the page.
   At 880px and below nothing here applies: phones keep the compact top strip with the bottom tab bar. */
:root { --side: 232px; }
@media (min-width: 881px) and (max-width: 1100px) { :root { --side: 84px; } }

@media (min-width: 881px) {
  body:has(#topbar:not(.hidden)) { padding-left: var(--side); }
  .topbar { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: var(--side); display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 14px; padding: 18px 12px 14px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; border-bottom: 0; border-right: 1px solid rgba(242, 193, 78, .22); box-shadow: 12px 0 30px -22px #000; background: linear-gradient(180deg, rgba(5, 12, 16, .98), rgba(5, 12, 16, .93)); }
  .topbar::after { left: auto; right: -1px; bottom: auto; top: 0; width: 2px; height: 40%; background: linear-gradient(180deg, var(--leather), var(--volt) 60%, transparent); animation: none; }
  .brand { padding: 2px 10px 6px; } .brand span:last-child { font-size: 16px; letter-spacing: .3em; }

  .mainnav { order: 0; flex: none; flex-basis: auto; flex-direction: column; gap: 2px; margin: 0; padding: 0; overflow: visible; }
  .mainnav a { display: flex; width: 100%; padding: 10px 12px; gap: 12px; font-size: 13px; letter-spacing: .12em; border-radius: 10px; }
  .mainnav a svg { width: 19px; height: 19px; }
  .mainnav a span, .mainnav a.active span { display: inline; }
  .mainnav a.active { color: var(--volt); background: rgba(242, 193, 78, .11); box-shadow: inset 3px 0 0 var(--volt); }
  .nav-ind { display: none; }
  .nav-badge { top: 50%; right: 10px; transform: translateY(-50%); }

  .topbar-right { margin: auto 0 0; flex-direction: column; align-items: stretch; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
  .topbar-right > * { width: 100%; justify-content: flex-start; padding: 8px 12px; }
  .server-chip, .session-chip, .user-chip { display: inline-flex; }
  .server-chip small { margin-left: auto; }
  .clock-chip, .train-chip, .energy-chip, .coin-chip { justify-content: flex-start; }
  .clock-chip svg { display: inline; } .clock-chip #clockTime { margin-left: auto; }
  .train-chip { flex-wrap: wrap; } .train-chip #trainName { display: inline; } .tc-bar { display: block; flex: 1; min-width: 30px; } .train-chip #trainTime { margin-left: auto; }
  .energy-chip .e-bar { display: block; flex: 1; width: auto; } .energy-chip small { display: none; } .energy-chip b { margin-left: auto; }
  .user-chip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #logoutBtn { width: 100%; padding: 9px 12px; }

  /* the top bar used to take about 58px, so things that stuck below it can stick higher now */
  .subtabs.tt { top: 8px; } .lu-bar, .tac-top { top: 72px; }
  .preview, .online { top: 24px; } .rk-cats { top: 24px; max-height: calc(100vh - 48px); }
  .gchat { left: calc(var(--side) + 16px); }
  #app { margin-inline: 0; }
}

/* icon rail */
@media (min-width: 881px) and (max-width: 1100px) {
  .topbar { padding-inline: 8px; align-items: center; }
  .brand { padding-inline: 0; justify-content: center; } .brand span:last-child { display: none; }
  .mainnav a, .mainnav a.active { justify-content: center; padding: 11px 0; } .mainnav a span, .mainnav a.active span { display: none; }
  .nav-badge { top: 2px; right: 8px; transform: none; }
  .topbar-right { align-items: center; }
  .topbar-right > * { justify-content: center; padding: 7px 4px; }
  .server-chip, .session-chip, .user-chip, #trainName, .tc-bar, .e-bar, .clock-chip svg, .energy-chip svg { display: none; }
  .clock-chip { flex-direction: column; gap: 2px; font-size: 10px; text-align: center; } .clock-chip #clockDay { font-size: 10px; letter-spacing: 0; } .clock-chip #clockTime { margin: 0; font-size: 11px; }
  .train-chip { justify-content: center; } .train-chip #trainTime { margin: 0; font-size: 11px; }
  .energy-chip b { margin: 0; }
  #logoutBtn { padding: 8px 4px; font-size: 10px; }
}

/* short windows: tighter rows so the account chips and Sign out stay in view */
@media (min-width: 881px) and (max-height: 1000px) {
  .topbar { gap: 8px; padding-top: 12px; padding-bottom: 10px; }
  .mainnav a { padding-block: 7px; } .topbar-right { gap: 6px; padding-top: 8px; } .topbar-right > * { padding-block: 6px; }
}

/* phones: the bottom tab bar now has 13 pages, so it scrolls sideways instead of squeezing or cutting them off */
@media (max-width: 880px) {
  .mainnav { display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity; } .mainnav::-webkit-scrollbar { display: none; }
  .mainnav a { flex: 0 0 19%; min-width: 68px; scroll-snap-align: start; }
  .nav-badge { right: 14px; }
}

/* ---- labelled status cards at the bottom of the sidebar ---- */
.cl { display: none; }
@media (min-width: 881px) {
  .topbar-right { gap: 6px; }
  .topbar-right::before { content: "Status"; padding: 0 4px 2px; font: 700 10px var(--disp); letter-spacing: .24em; text-transform: uppercase; color: var(--dim, var(--muted)); }
  .server-chip, .clock-chip, .train-chip, .energy-chip, .coin-chip, .session-chip, .user-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 12px; min-height: 0; font-size: 13px; }
  .server-chip.hidden, .clock-chip.hidden, .train-chip.hidden, .energy-chip.hidden, .coin-chip.hidden { display: none; }
  .cl { display: block; flex: 1 0 100%; order: -2; margin: 0; font: 700 9.5px var(--disp); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); opacity: .85; }
  .energy-chip { position: relative; } .energy-chip small { display: block; position: absolute; top: 8px; right: 12px; min-width: 0; font: 700 9.5px var(--disp); letter-spacing: .12em; color: var(--cyan); }
  .energy-chip .e-bar { height: 7px; border-radius: 4px; } .energy-chip .e-bar i { border-radius: 4px; }
  .server-chip b, .clock-chip #clockTime, .session-chip #sessionTime { font-variant-numeric: tabular-nums; }
  .server-chip svg, .clock-chip svg { width: 15px; height: 15px; flex: none; }
  .server-chip small { margin-left: auto; }
  .session-chip i { flex: none; }
  .user-chip { gap: 4px 10px; } .user-chip i { flex: none; }
  .user-chip .cl { margin-bottom: 2px; }
  #logoutBtn { margin-top: 4px; }

  /* global chat sits at the bottom right, and toasts move to the top right so they never cover it */
  .gchat { left: auto; right: 16px; } .gc-panel { transform-origin: bottom right; }
  .toasts { top: 18px; bottom: auto; }
}
@media (min-width: 881px) and (max-width: 1100px) {
  .cl, .topbar-right::before { display: none; }
  .energy-chip small { display: none; }
  .server-chip, .clock-chip, .train-chip, .energy-chip, .coin-chip { justify-content: center; }
}

/* ---- dashboard: Team and Matches share the last column so the grid has no empty gap ---- */
.dstack { display: grid; gap: 16px; align-content: start; min-width: 0; }

/* ---- calendar: the live-commentary ".ev" rows (arena.css) were also styling calendar events, which pushed cells wider than the page ---- */
.cal-g { grid-template-columns: repeat(7, minmax(0, 1fr)); } .cd { min-width: 0; overflow: hidden; }
.cd .ev { display: block; grid-template-columns: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 0; animation: none; padding: 3px 6px; }
.cd .ev small, .cd .ev b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- never let wide content push a card or the page past the screen: grid/flex children may shrink, and long content scrolls inside its own box ---- */
.page, .page > *, .card, .season-bar > *, .dash-grid > *, .grid-info > *, .grid-spec > *, .lv-grid > * { min-width: 0; }
.season-bar { max-width: 100%; } .sb-mid { min-width: 0; max-width: 100%; } .sb-cells { max-width: 100%; }
.card.pnl, .dpanel { overflow-wrap: anywhere; }

@media (max-width: 880px) { :root { --side: 0px; } }