/* ───────────────────────────────────────────────── Reset & Body ───────────────────────────────────────────────── */

body {
  background-color: #f5f7fa;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* Account for fixed navbar height (56px) */
  padding-top: 56px;
  margin: 0;
}

/* ────────────────────────────────────────────────── Cards ─────────────────────────────────────────────────── */

.card {
  border: none;
  border-radius: 0.5rem;
}

.card-header {
  border-radius: 0.5rem 0.5rem 0 0;
}

/* ───────────────────────────────────────────────── Question Box ──────────────────────────────────────────────── */

.form-control:focus {
  box-shadow: none;
  border-color: #4e73df;
}

/* ───────────────────────────────────────────────── Reports Table ─────────────────────────────────────────────── */

#searchInput {
  max-width: 100%;
}

/* ───────────────────────────────────────────────── Pagination ───────────────────────────────────────────────── */

.pagination .page-item .page-link {
  color: #4e73df;
}
.pagination .page-item.active .page-link {
  background-color: #4e73df;
  border-color: #4e73df;
}

/* ───────────────────────────────────────────────── Custom Card Hover ────────────────────────────────────────── */

.custom-card {
  border: none;
  border-radius: .75rem;
  transition: transform .2s, box-shadow .2s;
}
.custom-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

/* ───────────────────────────────────────────────── Headers & Leads ─────────────────────────────────────────── */

h2 {
  font-weight: 600;
  color: #343a40;
}

.lead {
  font-size: 1.1rem;
}

/* ─────────────────────────────────────────────────── Navbar Fixes ────────────────────────────────────────── */

/* Ensure the navbar’s inner container is a no-wrap flexbox */
.navbar-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
}

/* Push toggler to far right */
.navbar-toggler {
  margin-left: auto;
}

/* Shrink logo on very small screens */
@media (max-width: 575.98px) {
  .navbar-brand img {
    height: 30px;
  }
}

/* ───────────────────────────────────────────────── Video & Mute Button ─────────────────────────────────────── */

.video-container {
  max-width: 320px;    /* never grow past this */
  margin: 0 auto;
}

.mute-btn-container {
  text-align: center !important;
}

@media (max-width: 280px) {
  .video-container {
    max-width: 260px;
  }
}