body {
  background-color: #f7f7fb;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Bootstrap 3 doesn't ship flex/spacing utilities (those arrived in
   Bootstrap 4/5), so this app's markup relies on this small polyfill layer
   using the same class names. ---- */

.d-flex { display: flex; }
.d-none { display: none !important; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.mt-auto { margin-top: auto; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.me-1 { margin-right: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.p-4 { padding: 1.5rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }

.fw-semibold { font-weight: 600; }
.fw-normal { font-weight: 400; }
.text-decoration-none { text-decoration: none; }

/* form-label / form-text are Bootstrap 4/5 names; give them sane styling
   under Bootstrap 3 (which uses plain <label> and .help-block instead). */
.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.form-text {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85em;
  color: #777;
}

/* ---- Top bar (custom, doesn't use Bootstrap 3's navbar component) ---- */

.topbar {
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 0.85rem 0;
}

.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.topbar-user {
  padding: 0 0.25rem;
}

.navbar-brand {
  color: #2c3e50 !important;
  font-size: 1.15rem;
  font-weight: 600;
  padding: 0;
}

@media (max-width: 480px) {
  .topbar-inner {
    justify-content: center;
    text-align: center;
  }
  .topbar-actions {
    justify-content: center;
  }
  .topbar-user {
    display: none;
  }
}

/* ---- Card (custom lightweight panel, simpler than Bootstrap 3's .panel) ---- */

.card {
  background: #fff;
  border-radius: 0.6rem;
}

.card.border-0 {
  border: none;
}

.card.shadow-sm {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.card-body {
  padding: 1.25rem;
}

.card-title {
  margin-top: 0;
  font-weight: 600;
}

/* ---- Outline buttons (Bootstrap 3 has no btn-outline-* variants) ---- */

.btn-outline-primary {
  color: #337ab7;
  background-color: transparent;
  border-color: #337ab7;
}
.btn-outline-primary:hover,
.btn-outline-primary.active {
  color: #fff;
  background-color: #337ab7;
  border-color: #337ab7;
}

.btn-outline-secondary {
  color: #555;
  background-color: transparent;
  border-color: #ccc;
}
.btn-outline-secondary:hover {
  color: #fff;
  background-color: #777;
  border-color: #777;
}

.btn-outline-danger {
  color: #d9534f;
  background-color: transparent;
  border-color: #d9534f;
}
.btn-outline-danger:hover {
  color: #fff;
  background-color: #d9534f;
  border-color: #d9534f;
}

/* ---- Badges (Bootstrap 3 badges have no contextual bg variants) ---- */

.badge {
  border-radius: 0.4rem;
  font-weight: 600;
  padding: 0.3em 0.6em;
}

.bg-primary-subtle {
  background-color: #e7f1ff;
}
.text-primary {
  color: #337ab7;
}

.bg-success-subtle {
  background-color: #e6f7ec;
}
.text-success {
  color: #3c763d;
}

/* ---- List group items (rounded, spaced, like the old card list) ---- */

.list-group-item {
  border-radius: 0.5rem !important;
  margin-bottom: 0.4rem;
  border: 1px solid #eee !important;
}
.list-group-item:last-child {
  margin-bottom: 0;
}

/* ---- Tabs on the auth card (custom JS-driven, not Bootstrap's tab plugin) ---- */

.nav-tabs .nav-link {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.5rem 1rem;
  color: #777;
}
.nav-tabs .nav-link.active {
  color: #337ab7;
  font-weight: 600;
  border-bottom-color: #337ab7;
}

/* ---- Rows using the gap-2 utility need their negative margins cleared,
   since Bootstrap 3's .row still applies -15px margins. ---- */

.row.g-3 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.row.g-3 > [class^="col-"],
.row.g-3 > [class*=" col-"] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-bottom: 1rem;
}

/* ---- Guest RSVP inline form (no account needed) ---- */

.guest-rsvp-form .guest-name-input {
  min-width: 0;
}

/* ---- Admin-only "who's coming" panel on the shul management page ---- */

.admin-rsvp-panel {
  background: #f7f7fb;
  border-radius: 0.4rem;
  padding: 0.5rem 0.75rem;
}