/* Broker-app theme: Bootstrap 5 variables follow the `--grq-*` palette. */

[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-bg: var(--grq-surface);
  --bs-body-color: var(--grq-text);
  --bs-secondary-color: var(--grq-text-2);
  --bs-border-color: var(--grq-border);
  --bs-primary: var(--grq-accent);
  --bs-success: var(--grq-positive);
  --bs-danger: var(--grq-negative);
}

.btn-primary {
  --bs-btn-bg: var(--grq-accent);
  --bs-btn-border-color: var(--grq-accent);
  --bs-btn-hover-bg: var(--grq-accent);
  --bs-btn-hover-border-color: var(--grq-accent);
}

.btn-outline-primary {
  --bs-btn-color: var(--grq-accent);
  --bs-btn-border-color: var(--grq-accent);
  --bs-btn-hover-bg: var(--grq-accent);
  --bs-btn-hover-border-color: var(--grq-accent);
}

.text-success {
  color: var(--grq-positive) !important;
}

.text-danger {
  color: var(--grq-negative) !important;
}

.card {
  --bs-card-bg: var(--grq-surface-2);
}

.btn,
.form-select {
  --bs-btn-border-radius: 50rem;
  --bs-form-select-border-radius: 50rem;
  border-radius: 50rem;
}

.grq-tabbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1020;
  display: flex;
  height: 3.5rem;
  align-items: center;
  justify-content: space-around;
  background-color: var(--bs-body-bg);
  border-top: 1px solid var(--bs-border-color);
}

@media (max-width: 991.98px) {
  body {
    padding-bottom: 3.5rem;
  }
}

.grq-chart {
  height: 200px;
}

@media (min-width: 768px) {
  .grq-chart {
    height: 320px;
  }
}