/* Compass - shared styles on top of Bootstrap 5.3 */
:root {
  --sidebar-width: 260px;
  --sidebar-mini-width: 72px;
  --sidebar-bg: #16213a;
  --sidebar-fg: #c3cbe0;
  --sidebar-fg-muted: #7d89a8;
  --sidebar-active-bg: rgba(255, 255, 255, 0.09);
  --sidebar-active-fg: #ffffff;
  --sidebar-accent: #4dabf7;
  --topbar-height: 60px;
  --app-bg: #f4f6fa;
  --brand: #1c7ed6;
}
[data-bs-theme="dark"] {
  --sidebar-bg: #10151f;
  --app-bg: #161b24;
}

body { background: var(--app-bg); }
.cursor-pointer { cursor: pointer; }
.min-w-0 { min-width: 0; }
.text-pre-wrap { white-space: pre-wrap; }

/* ---------- Sidebar shell (portal + admin) ---------- */
.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  display: flex;
  flex-direction: column;
  z-index: 1045;
  transition: width 0.2s ease, transform 0.25s ease;
  overflow: hidden;
}
.sidebar-brand {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  white-space: nowrap;
}
.sidebar-brand a { color: #fff; text-decoration: none; font-weight: 600; font-size: 1.15rem; display: flex; align-items: center; gap: 0.6rem; }
.sidebar-brand .bi { font-size: 1.5rem; color: var(--sidebar-accent); }
.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0.75rem 0.75rem 1rem; }
.sidebar-heading { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sidebar-fg-muted); padding: 1rem 0.75rem 0.4rem; white-space: nowrap; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--sidebar-fg);
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.93rem;
  margin-bottom: 2px;
}
.sidebar-link .bi { font-size: 1.15rem; width: 1.4rem; text-align: center; flex-shrink: 0; }
.sidebar-link:hover { background: var(--sidebar-active-bg); color: #fff; }
.sidebar-link.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-fg); box-shadow: inset 3px 0 0 var(--sidebar-accent); }
.sidebar-footer { padding: 0.75rem 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.8rem; color: var(--sidebar-fg-muted); white-space: nowrap; }

.app-main { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left 0.2s ease; }
.app-topbar {
  height: var(--topbar-height);
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.user-menu-name { max-width: 220px; }
@media (max-width: 575.98px) { .user-menu-name { max-width: 110px; } }
.app-topbar .page-title { font-size: 1.1rem; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-content { flex: 1; padding: 1.5rem; }
.app-footer { padding: 1rem 1.5rem; font-size: 0.8rem; color: var(--bs-secondary-color); }
.sidebar-backdrop { display: none; }

/* Desktop: collapse to icon-only "mini" sidebar */
@media (min-width: 992px) {
  body.sidebar-collapsed .app-sidebar { width: var(--sidebar-mini-width); }
  body.sidebar-collapsed .app-main { margin-left: var(--sidebar-mini-width); }
  body.sidebar-collapsed .nav-label,
  body.sidebar-collapsed .sidebar-heading,
  body.sidebar-collapsed .sidebar-footer { display: none; }
  body.sidebar-collapsed .sidebar-brand { padding: 0; justify-content: center; }
  body.sidebar-collapsed .sidebar-link { justify-content: center; padding: 0.65rem 0; }
  body.sidebar-collapsed .sidebar-nav { padding: 0.75rem 0.5rem; }
}

/* Mobile: off-canvas sidebar */
@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); }
  .app-main { margin-left: 0; }
  body.sidebar-open .app-sidebar { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, 0.35); }
  body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1040; }
  .app-content { padding: 1rem; }
}

/* ---------- Public site ---------- */
.public-navbar { background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); }
.public-navbar .navbar-brand .bi { color: var(--brand); }
/* Nonprofit branding next to the site name */
.brand-divider { width: 1px; align-self: stretch; min-height: 28px; background: var(--bs-border-color); margin: 0 0.35rem; }
.brand-logo { height: var(--brand-logo-h, 36px); max-height: var(--brand-logo-h, 36px); width: auto; max-width: 220px; object-fit: contain; }
.brand-name { font-weight: 600; max-width: 260px; }
/* dark mode: give logos with dark lettering a light backing so they stay readable */
[data-bs-theme="dark"] .brand-logo { background: rgba(255, 255, 255, 0.92); border-radius: 0.375rem; padding: 2px 6px; }
/* collapsed navbar (< md): keep the brand on one line next to the menu button */
@media (max-width: 767.98px) {
  .public-navbar .navbar-brand { max-width: calc(100% - 64px); overflow: hidden; }
  .brand-org:has(.brand-logo) .brand-name { display: none; } /* logo wins when space is tight */
  .brand-name { max-width: 150px; font-size: 0.95rem; }
}
@media (max-width: 575.98px) {
  .brand-logo { max-height: min(var(--brand-logo-h, 36px), 32px); max-width: 110px; }
}
/* mobile menu: centered, big touch targets */
@media (max-width: 767.98px) {
  .public-navbar .navbar-toggler { padding: 0.55rem 0.7rem; border-radius: 0.6rem; }
  #publicNav { padding: 0.75rem 0 1rem; }
  #publicNav .navbar-nav { text-align: center; gap: 0.25rem; }
  #publicNav .nav-link { font-size: 1.15rem; padding: 0.8rem 1rem; border-radius: 0.75rem; }
  #publicNav .nav-link:hover, #publicNav .nav-link:focus-visible { background: var(--bs-tertiary-bg); }
  #publicNav .nav-link.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 600; }
  #publicNav .public-actions { flex-direction: column; align-items: stretch !important; gap: 0.6rem;
    border-top: 1px solid var(--bs-border-color); margin-top: 0.75rem; padding-top: 1rem; }
  #publicNav .public-actions .btn { font-size: 1.05rem; padding: 0.7rem 1rem; border-radius: 0.75rem; }
  #publicNav .public-actions [data-action=toggle-theme] { border: 1px solid var(--bs-border-color); text-decoration: none; }
  #publicNav .public-actions .dropdown > .btn { justify-content: center; width: 100%; }
  #publicNav .public-actions .dropdown-menu { position: static !important; transform: none !important; text-align: center; width: 100%; }
  #publicNav .public-actions .dropdown-item { padding: 0.75rem 1rem; font-size: 1.05rem; }
}
.media-thumb { height: 120px; display: flex; align-items: center; justify-content: center; padding: 0.75rem;
  background: repeating-conic-gradient(var(--bs-tertiary-bg) 0% 25%, var(--bs-body-bg) 0% 50%) 50% / 16px 16px; border-bottom: 1px solid var(--bs-border-color); }
.media-thumb img { max-height: 100%; max-width: 100%; object-fit: contain; }
.logo-choice { cursor: pointer; border: 2px solid var(--bs-border-color); border-radius: 0.5rem; overflow: hidden; }
.logo-choice.selected { border-color: var(--bs-primary); box-shadow: 0 0 0 0.15rem var(--bs-primary-border-subtle); }
.logo-choice .media-thumb { height: 72px; }
.markdown-body img { max-width: 100%; height: auto; }
/* Sponsor logos: a plain white panel (logos are designed for white, also in dark mode); the logo scales up to fill it */
.sponsor-logo { height: 120px; display: flex; align-items: center; justify-content: center; padding: 0.5rem; background: #fff;
  border-bottom: 1px solid var(--bs-border-color); border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; overflow: hidden; }
.sponsor-logo img { width: 100%; height: 100%; object-fit: contain; }
.sponsor-logo.no-logo { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.markdown-body img.md-img:not([style]) { max-height: 320px; width: auto; } /* default size; =200 sets a width */
.hero {
  background: linear-gradient(135deg, #16213a 0%, #1c4e80 60%, #1c7ed6 100%);
  color: #fff;
  padding: 4.5rem 0 4rem;
}
.hero .lead { color: rgba(255, 255, 255, 0.82); }
.event-card { transition: transform 0.15s ease, box-shadow 0.15s ease; height: 100%; }
.event-card:hover { transform: translateY(-2px); box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08); }
.date-chip { align-self: flex-start; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; padding: 0.4rem 0.5rem; border-radius: 0.6rem; background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); line-height: 1.1; }
.date-chip .month { font-size: 0.7rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; }
.date-chip .day { font-size: 1.4rem; font-weight: 700; }
.public-footer { border-top: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); font-size: 0.85rem; }
.auth-card { max-width: 440px; margin: 3rem auto; }
.markdown-body p:last-child { margin-bottom: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { font-size: 1.15rem; margin-top: 1.25rem; }

/* Applicant type picker */
.type-option { border: 2px solid var(--bs-border-color); border-radius: 0.75rem; padding: 1rem; cursor: pointer; height: 100%; transition: border-color 0.15s, background 0.15s; display: block; }
.type-option:hover { border-color: var(--bs-primary-border-subtle); }
.type-option.selected { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.type-option.disabled { opacity: 0.55; cursor: not-allowed; }
.type-option.compact { padding: 0.75rem 0.9rem; border-width: 1.5px; }
/* apply form: only names until chosen; the chosen option shows its description */
.type-option .option-desc { display: none; }
.type-option.selected .option-desc { display: block; margin-top: 0.25rem; }
.subtype-row > td { padding: 0.75rem 1rem 1rem; }
.type-icon { width: 42px; height: 42px; border-radius: 0.6rem; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.25rem; flex-shrink: 0; }
.type-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ---------- Common components ---------- */
.stat-card .stat-icon { width: 46px; height: 46px; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.card { border-color: var(--bs-border-color-translucent); }
.card-header { background: transparent; font-weight: 600; }
.table > :not(caption) > * > * { vertical-align: middle; }
.table-clickable tbody tr { cursor: pointer; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--bs-secondary-color); }
.empty-state .bi { font-size: 2.5rem; display: block; margin-bottom: 0.75rem; opacity: 0.6; }
.form-section-heading { border-bottom: 1px solid var(--bs-border-color); padding-bottom: 0.4rem; margin: 1.5rem 0 0.75rem; }
.required-mark { color: var(--bs-danger); margin-left: 0.15rem; }
.captcha-box svg { border-radius: 0.5rem; border: 1px solid var(--bs-border-color); max-width: 100%; height: auto; background: #f4f6f8; }
.page-loading { display: flex; align-items: center; justify-content: center; min-height: 40vh; }
.toast-container { z-index: 1090; }
.seat-bar { height: 8px; }

/* Question builder */
.question-item { border: 1px solid var(--bs-border-color); border-radius: 0.6rem; padding: 0.75rem 0.9rem; background: var(--bs-body-bg); display: flex; gap: 0.75rem; align-items: flex-start; }
.question-item + .question-item { margin-top: 0.5rem; }
.question-item .q-icon { width: 34px; height: 34px; border-radius: 0.5rem; background: var(--bs-secondary-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.question-item.is-section { background: var(--bs-tertiary-bg); }
/* question sets: wrap onto new lines on small screens, stack (with wrapping names) on large ones */
.scope-nav .nav-link { white-space: nowrap; }
@media (min-width: 992px) { .scope-nav .nav-link { white-space: normal; } }
.question-preview { background: var(--bs-tertiary-bg); border-radius: 0.6rem; padding: 1rem; }

.recovery-codes { font-family: var(--bs-font-monospace); columns: 2; background: var(--bs-tertiary-bg); padding: 1rem; border-radius: 0.5rem; }
.permission-group + .permission-group { margin-top: 1rem; }
.timeline { list-style: none; padding-left: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 0.9rem 1.25rem; border-left: 2px solid var(--bs-border-color); margin-left: 0.4rem; }
.timeline li::before { content: ''; position: absolute; left: -6px; top: 0.3rem; width: 10px; height: 10px; border-radius: 50%; background: var(--bs-primary); }
.timeline li:last-child { border-left-color: transparent; }

/* Cookie notice bar (the page gets extra bottom space while it's shown, so nothing is stuck under it) */
body.has-cookie-notice { padding-bottom: 7rem; }
@media (max-width: 575.98px) { body.has-cookie-notice { padding-bottom: 10rem; } }
.cookie-notice { position: fixed; z-index: 1080; left: 1rem; right: 1rem; bottom: 1rem; max-width: 760px; margin: 0 auto;
  background: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); border-radius: 0.75rem; padding: 0.75rem 1rem; }