:root {
  --vbc-orange: #ff9800;
  --vbc-orange-dark: #fb8c00;
  --vbc-dark: #111111;
}

body {
  background-color: #f3f4f6;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.navbar-vbc {
  background-color: var(--vbc-dark) !important;
}

.navbar-brand-text {
  font-weight: 700;
  letter-spacing: 0.5px;
}

.navbar-brand img {
  border-radius: 999px;
}

.btn-primary,
.btn-primary:focus {
  background-color: var(--vbc-orange);
  border-color: var(--vbc-orange);
}
.btn-primary:hover {
  background-color: var(--vbc-orange-dark);
  border-color: var(--vbc-orange-dark);
}

.card {
  border-radius: 0.75rem;
  border: none;
  box-shadow: 0 6px 16px rgba(15,23,42,0.08);
  margin-bottom: 1rem;
}

.table th,
.table td {
  vertical-align: middle !important;
}

/* Avatar with fallback initial (prevents broken-image icon + letter overlay)
   Usage: <span class="vbc-avatar"> <img ...> <span class="vbc-avatar-fallback">A</span> </span>
*/
.vbc-avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  overflow:hidden;
  position:relative;
  background:#f1f3f5;
  border:1px solid #e9ecef;
  flex:0 0 auto;
}
.vbc-avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.vbc-avatar-fallback{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:12px;
  color:#495057;
}
.vbc-avatar.noimg .vbc-avatar-fallback{ display:flex; }
.vbc-avatar.noimg .vbc-avatar-img{ display:none; }

@media (max-width: 576px) {
  h1,h2,h3 {
    font-size: 1.3rem;
  }
}