:root {
  --oap-red: #D7263D;
  --oap-red-dk: #9E1B2F;
  --oap-ink: #16192B;
  --oap-coral: #F26A4B;
  --oap-teal: #1C7293;
}

html { font-size: 14px; position: relative; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 16px; } }
body { margin-bottom: 60px; background: #FBFAFB; color: #222; }

/* Brand marks */
.brand-chip {
  display: inline-block; background: var(--oap-red); color: #fff;
  font-weight: 700; border-radius: .5rem; padding: .15rem .5rem; letter-spacing: .5px;
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; background: var(--oap-red); color: #fff;
  font-weight: 800; font-size: 1.5rem; border-radius: 1rem;
}

/* Buttons */
.btn-oap { background: var(--oap-red); border-color: var(--oap-red); color: #fff; }
.btn-oap:hover { background: var(--oap-red-dk); border-color: var(--oap-red-dk); color: #fff; }

/* Hero */
.hero {
  background: linear-gradient(135deg, #16192B 0%, #2A1330 55%, #7A1526 100%);
  color: #fff; padding: 5rem 1rem; text-align: center;
}
.hero-inner { max-width: 780px; margin: 0 auto; }

/* Feature cards */
.feature-card {
  background: #fff; border: 1px solid #ECE9EB; border-radius: 1rem; padding: 1.5rem;
  box-shadow: 0 6px 18px rgba(20,16,30,.05);
}
.feat-ico {
  width: 46px; height: 46px; border-radius: .7rem; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem;
}

/* Auth cards */
.auth-card {
  max-width: 460px; margin: 3rem auto; background: #fff;
  border: 1px solid #ECE9EB; border-radius: 1rem; padding: 2rem;
  box-shadow: 0 8px 24px rgba(20,16,30,.06);
}

/* Documents */
.doc-card { background:#fff; border:1px solid #ECE9EB; border-radius:.8rem; padding:1rem; box-shadow:0 4px 12px rgba(20,16,30,.04); }
.badge-confirmed { background:#E7F5EF; color:#1F7A54; border:1px solid #BEE6D5; }

/* Dashboard */
.stage-banner { display:flex; align-items:center; gap:.9rem; background:#fff; border:1px solid #ECE9EB; border-left:4px solid var(--oap-red); border-radius:.7rem; padding:1rem 1.2rem; box-shadow:0 4px 12px rgba(20,16,30,.04); }
.stage-dot { width:14px; height:14px; border-radius:50%; background:var(--oap-red); flex:0 0 auto; }
.stat { background:#fff; border:1px solid #ECE9EB; border-radius:.8rem; padding:1rem; text-align:center; box-shadow:0 4px 12px rgba(20,16,30,.04); }
.stat .num { font-size:2.2rem; font-weight:800; line-height:1; }
.stat .lbl { color:#6B7280; font-size:.8rem; margin-top:.35rem; }
.score { display:inline-block; min-width:2.2rem; text-align:center; font-weight:700; background:#16192B; color:#fff; border-radius:.5rem; padding:.15rem .5rem; }
.wave-col { background:#fff; border:1px solid #ECE9EB; border-radius:.7rem; padding:.7rem; min-height:96px; }
.wave-head { font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.5px; color:#16192B; margin-bottom:.5rem; }
.wave-chip { display:inline-block; background:#F5F3F4; border:1px solid #E3E0E2; border-radius:.4rem; padding:.1rem .45rem; margin:.1rem; font-size:.8rem; }

/* Checklist */
.qcheck { width:26px; height:26px; flex:0 0 auto; border-radius:50%; border:2px solid #D7C7CB; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }
.qcheck.on { background:#2C8C6B; border-color:#2C8C6B; }
.qrow:last-child { border-bottom:0 !important; }

/* Roles ("who's who") */
.rolerow:last-child { border-bottom: 0 !important; }

/* Keep the primary save action clear of the footer (was colliding on long forms). */
.sticky-save { margin-bottom: 3rem; }

.footer { padding: 1rem 0; font-size: .85rem; }
.navbar-brand { font-size: 1.1rem; }

/* ---------------------------------------------------------------
   Responsive: the Hub is used on phones at meetings as well as on
   desktops, so tables scroll, forms stack, and tap targets grow.
   --------------------------------------------------------------- */

/* Never let the page scroll sideways. */
html, body { max-width: 100%; overflow-x: hidden; }
.table-responsive { -webkit-overflow-scrolling: touch; }
img, svg { max-width: 100%; height: auto; }

/* Long titles and emails must wrap rather than stretch a table. */
td, th { word-break: break-word; }

@media (max-width: 767.98px) {
  body { margin-bottom: 40px; }

  .hero { padding: 3rem 1rem; }
  .hero .display-5 { font-size: 1.9rem; }
  .hero .lead { font-size: 1rem; }
  .brand-mark { width: 54px; height: 54px; font-size: 1.2rem; }

  .auth-card { margin: 1.5rem auto; padding: 1.25rem; }
  .feature-card, .doc-card { padding: 1rem; }

  /* Stat tiles shrink so four still fit two-up. */
  .stat .num { font-size: 1.6rem; }
  .stat .lbl { font-size: .7rem; }

  /* Stage banner and wave map stack instead of squeezing. */
  .stage-banner { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .wave-col { min-height: auto; }

  /* Agenda and checklist rows: let controls wrap onto their own line. */
  .qrow > .d-flex { flex-wrap: wrap; }
  .qrow .form-select, .qrow .form-control { max-width: 100% !important; }

  /* Comfortable tap targets — 16px input font also stops iOS zooming on focus. */
  .btn { padding: .45rem .75rem; }
  .form-control, .form-select { font-size: 16px; }

  /* Footer stacks rather than colliding. */
  .footer .container { flex-direction: column; gap: .25rem; text-align: center; }

  /* Action button groups in tables wrap neatly. */
  td .btn { margin-bottom: .25rem; }
}

/* Tablet: keep multi-column cards from getting cramped. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .stat .num { font-size: 1.9rem; }
  .hero .display-5 { font-size: 2.4rem; }
}