/*
 * The trading pages fitted to the window (Holdings, Positions, Orders,
 * Smart Trade, Price alerts; js/fit.js and css/fit.css do the rest).
 * The boxes below start further down the page than css/fit.css assumes,
 * under a heading, a line of help and the total, so each is a little
 * shorter, to end at the bottom of the window rather than past it.
 */

/* Orders: the filters, table, pager and export in one column, spaced the
   same with or without the fit to the window. An empty pager takes no room. */
#tab-orders { display: flex; flex-direction: column; gap: var(--space-3); }
#orders-pager:empty { display: none; }

@media (min-width: 1101px) {
  #portfolio-breakdown .fit-table { max-height: max(240px, calc(100dvh - 430px)); }
  /* An account card's balances, under its value, bots and cash. */
  #exchange-grid .fit-table { max-height: max(260px, calc(100dvh - 640px)); }
  #st-list.fit-table { max-height: max(280px, calc(100dvh - 300px)); }
  #pa-list.fit-table { max-height: max(280px, calc(100dvh - 330px)); }
  #risk-table-wrap.fit-table { max-height: max(280px, calc(100dvh - 340px)); }
}

/* Smart Trade's form on a wide screen: Start under the account and coin,
   and the exit plan beside them scrolling in its own box, so the whole form
   and its button are in view at once. A phone keeps the order as written. */
@media (min-width: 1101px) and (min-height: 640px) {
  .st-form > .bot-form-panel:first-child { grid-column: 1; grid-row: 1; }
  .st-form > #st-plan-panel { grid-column: 2; grid-row: 1 / span 2; max-height: calc(100dvh - 300px); overflow: auto; }
  .st-form > .bot-form-footer { grid-column: 1; grid-row: 2; }
}

/* Price alerts: the form beside the alerts on a wide screen, above them on a phone, as it always was. */
@media (max-width: 1100px) {
  .pa-cols > .pa-new { order: -1; }
}

/* The new alert's short fields two to a row on a phone (market and
   exchange, pair and condition, price and cooldown) instead of one long
   column. The form's own inline grid would give one column at this width. */
@media (max-width: 640px) {
  #pa-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}