/* Dashboard styling on top of Bootstrap 5. */

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

.card {
  border-radius: .6rem;
}

.table > :not(caption) > * > * {
  padding-top: .6rem;
  padding-bottom: .6rem;
}

/* Keep wide scraped-data cells from stretching the table off screen. */
.cell-clip {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Multi-line crawler messages stay readable but never blow up row height. */
.log-message {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: .8125rem;
  margin: 0;
  max-height: 7rem;
  overflow-y: auto;
}

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.min-w-0 {
  min-width: 0;
}

.navbar-brand i {
  vertical-align: -2px;
}

.theme-toggle {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.theme-toggle-float {
  position: fixed;
  top: .75rem;
  right: .75rem;
  z-index: 1030;
}

/* Bootstrap's dark theme leaves .table-light too bright for table headers. */
[data-bs-theme="dark"] .table-light {
  --bs-table-bg: #22262b;
  --bs-table-color: #dee2e6;
  --bs-table-border-color: #373b3e;
}

/* ------------------------------------------------------------------ */
/* Brand analytics                                                     */
/* ------------------------------------------------------------------ */

/* Fixed-height wrappers stop Chart.js from growing without bound on
   resize, which is what makes charts usable on a phone. */
.chart-wrap {
  position: relative;
  height: 16rem;
}
.chart-wrap-sm { height: 13rem; }

@media (min-width: 992px) {
  .chart-wrap { height: 18rem; }
}

.brand-dot {
  display: inline-block;
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  margin-right: .375rem;
  vertical-align: middle;
  flex: 0 0 auto;
}

.brand-picker {
  max-height: 7.5rem;
  overflow-y: auto;
}

.colour-swatch {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: .25rem;
  padding: 0;
  cursor: pointer;
}

[data-bs-theme="light"] .colour-swatch {
  border-color: rgba(0, 0, 0, .2);
}

/* Realtime indicator: grey when paused, green pulsing when live,
   amber when the last poll failed. */
.live-dot {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--bs-secondary);
  vertical-align: middle;
}
.live-dot-on {
  background: var(--bs-success);
  animation: live-pulse 2s ease-in-out infinite;
}
.live-dot-stale {
  background: var(--bs-warning);
  animation: none;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot-on { animation: none; }
}

/* Keep numeric columns readable when a phone squeezes the table. */
@media (max-width: 575.98px) {
  .table-sm > :not(caption) > * > * {
    padding: .4rem .35rem;
    font-size: .8125rem;
  }
}