/* Header and market stats cleanup: one clean grid with even dividers, and a tidy page header. Visual only. */

/* Markets: summary stats as one even grid (4 across on desktop, 2 across on tablet and phone). */
#marketMetrics {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border: 1px solid var(--line, #d7ded7) !important;
  border-radius: 12px !important;
  overflow: hidden;
  background: transparent;
}
#marketMetrics > * {
  margin: 0 !important;
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px 18px !important;
  border-right: 1px solid var(--line, #d7ded7) !important;
  border-bottom: 1px solid var(--line, #d7ded7) !important;
  grid-column: auto !important;
}
#marketMetrics > *:nth-child(4n) { border-right: 0 !important; }
#marketMetrics > *:nth-last-child(-n+4) { border-bottom: 0 !important; }

@media (max-width: 900px) {
  #marketMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #marketMetrics > * { border-right: 1px solid var(--line, #d7ded7) !important; }
  #marketMetrics > *:nth-child(4n) { border-right: 1px solid var(--line, #d7ded7) !important; }
  #marketMetrics > *:nth-child(2n) { border-right: 0 !important; }
  #marketMetrics > *:nth-last-child(-n+4) { border-bottom: 1px solid var(--line, #d7ded7) !important; }
  #marketMetrics > *:nth-last-child(-n+2) { border-bottom: 0 !important; }
  #marketMetrics > .liquidity-hero, #marketMetrics > .lend-amount-tile { grid-column: 1 / -1 !important; border-right: 0 !important; }
}

/* Dashboard header: title and buttons sit on one centred line with even space. */
.dashboard-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap;
  padding: 16px 0 14px !important;
  margin: 0 0 16px !important;
  border-bottom: 1px solid var(--line, #d7ded7);
}
.dashboard-heading h1 { margin: 0 !important; line-height: 1.1; }
.dashboard-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- Markets page: compact header and one toolbar row (layout only; colours and behaviour unchanged) ---- */

/* Header: heading left, stats right, vertically centred, no extra height or padding. */
.app-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 760px) !important;
  align-items: center !important;
  gap: 24px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 0 16px !important;
  margin: 0 0 16px !important;
}
.app-heading > div:first-child { margin: 0 !important; min-width: 0; }
.app-heading h1 { margin: 0 !important; line-height: 1.1; }
html[data-production-route] body.app-mode .app-heading #marketMetrics,
html[data-production-route] body.app-mode #marketMetrics,
html body .app-heading #marketMetrics, html body.app-mode #marketMetrics, html body #marketMetrics {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
  justify-self: end;
  margin: 0 !important;
  overflow: hidden;
}
.app-heading #marketMetrics > * { min-width: 0 !important; }
/* Four equal cards on desktop: no spanning, same height, text aligned. */
html body .app-heading #marketMetrics > *,
html[data-production-route] body.app-mode #marketMetrics > * { grid-column: auto !important; grid-row: auto !important; min-height: 0 !important; height: auto !important; align-self: stretch !important; padding: 14px 16px !important; }
html body .app-heading #marketMetrics > .liquidity-hero, html[data-production-route] body.app-mode #marketMetrics > .liquidity-hero { grid-column: 1 / 2 !important; grid-row: 1 !important; }
html body .app-heading #marketMetrics > .lend-amount-tile { grid-column: 4 / 5 !important; grid-row: 1 !important; }
html body .app-heading #marketMetrics > *:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
html body .app-heading #marketMetrics > *:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
html body .app-heading #marketMetrics > *:nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; }
html body .app-heading #marketMetrics > *:nth-child(4) { grid-column: 4 !important; grid-row: 1 !important; }
html body .app-heading #marketMetrics > * > strong { font-size: 22px !important; margin: 4px 0 2px !important; }
html body .app-heading #marketMetrics > * > small { font-size: 12px !important; line-height: 1.35; }
@media (max-width: 900px) {
  html body .app-heading #marketMetrics > .liquidity-hero, html body .app-heading #marketMetrics > .lend-amount-tile { grid-column: 1 / -1 !important; }
}

/* Toolbar: tabs left, live count + search + sort + refresh right, one row, same control heights. */
.market-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 12px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}
.market-toolbar > .explore-switch { flex: 0 0 auto; }
.market-toolbar > .toolbar {
  flex: 1 1 auto;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end;
  gap: 8px !important;
  flex-wrap: wrap;
  min-width: 0;
  margin: 0 !important;
}
.market-toolbar .toolbar input,
.market-toolbar .toolbar select,
.market-toolbar .toolbar button,
.market-toolbar .explore-switch button { height: 40px !important; box-sizing: border-box; }
.market-toolbar .toolbar input { min-width: 200px; flex: 1 1 220px; max-width: 320px; }

@media (max-width: 900px) {
  .app-heading { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  #marketMetrics { justify-self: stretch; }
  .market-toolbar > .toolbar { justify-content: stretch; }
  .market-toolbar .toolbar input { max-width: none; flex: 1 1 100%; }
}
@media (max-width: 600px) {
  .market-toolbar > .explore-switch { width: 100%; }
  .market-toolbar > .explore-switch button { flex: 1 1 0; }
}