:root {
  --bitu-red: #c41230;
  --bitu-red-dark: #8f0d24;
  --bs-primary: var(--bitu-red);
  --bs-primary-rgb: 196, 18, 48;
}

body {
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.btn-primary {
  --bs-btn-bg: var(--bitu-red);
  --bs-btn-border-color: var(--bitu-red-dark);
  --bs-btn-hover-bg: var(--bitu-red-dark);
  --bs-btn-hover-border-color: var(--bitu-red-dark);
  --bs-btn-active-bg: var(--bitu-red-dark);
  --bs-btn-active-border-color: var(--bitu-red-dark);
}

.btn-outline-primary {
  --bs-btn-color: var(--bitu-red);
  --bs-btn-border-color: var(--bitu-red);
  --bs-btn-hover-bg: var(--bitu-red);
  --bs-btn-hover-border-color: var(--bitu-red);
  --bs-btn-active-bg: var(--bitu-red-dark);
  --bs-btn-active-border-color: var(--bitu-red-dark);
}

.text-primary,
.link-primary {
  color: var(--bitu-red) !important;
}

.navbar-brand strong {
  letter-spacing: .02em;
  font-size: 1.1rem;
}

.brand-logo {
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .08));
}

.hero-section {
  background:
    radial-gradient(1200px 500px at 20% 0%, rgba(196, 18, 48, .10), transparent),
    linear-gradient(180deg, #fff, #fafbfc);
  border-bottom: 1px solid var(--bs-border-color);
  padding: 3rem 0 2.25rem;
}

.hero-pill {
  background: rgba(196, 18, 48, .10);
  color: var(--bitu-red-dark);
  font-weight: 600;
  padding: .45rem .85rem;
}

.hero-logo {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 18px rgba(196, 18, 48, .18));
}

/* Footer
 * Three-column layout on desktop, collapses to two or one on small screens.
 * Keeps the hostname-style links muted so the content stays the visual focus. */
.site-footer {
  color: var(--bs-secondary-color);
}

.site-footer h6 {
  letter-spacing: .08em;
}

.footer-links {
  display: grid;
  gap: .35rem;
}

.footer-links a,
.footer-contact a {
  color: var(--bs-secondary-color);
  text-decoration: none;
}

.footer-links a:hover,
.footer-contact a:hover {
  color: var(--bitu-red);
  text-decoration: underline;
}

.footer-contact li {
  margin-bottom: .25rem;
}

.footer-bottom {
  background: #fafbfc;
}

.footer-socials .social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  font-size: 1.05rem;
  text-decoration: none;
  transition: background .15s, color .15s, transform .15s;
}

.footer-socials .social-icon:hover {
  background: var(--bitu-red);
  color: #fff;
  transform: translateY(-1px);
}

/* Staff workspace
 * Sub-nav sits below the global navbar and above each staff page's
 * content — gives one-click access to Applications / Programs / etc.
 * Rendered as a pill-row card rather than a sidebar so it collapses
 * gracefully on narrow screens. */
.staff-nav {
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: .6rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  overflow: hidden;
}

.staff-nav__inner {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: .5rem .75rem;
}

.staff-nav__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  border-radius: .45rem;
  color: var(--bs-body-color);
  text-decoration: none;
  font-weight: 500;
  font-size: .92rem;
  transition: background .12s, color .12s;
}

.staff-nav__link:hover {
  background: rgba(196, 18, 48, .06);
  color: var(--bitu-red);
}

.staff-nav__link.is-active {
  background: var(--bitu-red);
  color: #fff;
}

.staff-nav__link.is-active:hover {
  background: var(--bitu-red-dark);
  color: #fff;
}

/* Review accordion (staff application_detail).
 * Each section is one accordion item with a flag/note row + "Mark reviewed
 * and continue" footer. Flagged sections show a red ring so they stand out
 * in the collapsed state. */
.review-accordion .accordion-button {
  font-weight: 600;
}

.review-accordion .review-status-badge {
  margin-left: .6rem;
  font-weight: 500;
}

.review-accordion .accordion-item.is-flagged .accordion-button {
  background: rgba(196, 18, 48, .05);
  color: var(--bitu-red-dark);
}

.review-accordion .accordion-item.is-flagged {
  border-color: rgba(196, 18, 48, .35);
}

.review-accordion dl.row {
  margin-bottom: 0;
}

.review-accordion dt {
  font-weight: 500;
  color: var(--bs-secondary-color);
}

.review-accordion .flag-row {
  background: var(--bs-tertiary-bg);
  border-radius: .5rem;
  padding: .8rem 1rem;
  margin-top: 1rem;
}

.review-accordion .flag-row.is-ticked {
  background: rgba(196, 18, 48, .07);
  border: 1px solid rgba(196, 18, 48, .25);
}

/* Mobile responsive polish
 * Default Bootstrap stacking is fine; these tweaks keep density right on
 * narrow screens (large cards, touch targets, table overflow). */
@media (max-width: 767.98px) {
  main.container {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .card-body {
    padding: 1rem;
  }

  h1.h3, .h3 {
    font-size: 1.35rem;
  }

  .hero-section {
    padding: 2rem 0 1.5rem;
  }

  .hero-section .display-6 {
    font-size: 1.75rem;
  }

  .hero-logo {
    width: 140px !important;
    height: auto !important;
    margin-top: 1rem;
  }

  /* Step breadcrumb collapses vertically. */
  .step-breadcrumb {
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
  }

  .step-breadcrumb .mini-bar {
    width: 100%;
    max-width: none;
  }

  /* Long form button bars wrap and go full-width. */
  .btn-lg {
    width: 100%;
    margin-bottom: .25rem;
  }

  /* Staff detail sticky header buttons stack neatly. */
  .card-body .d-flex.flex-wrap > .btn {
    flex: 1 1 auto;
  }

  /* Applicant step forms get more vertical air on small screens. */
  .mb-3 {
    margin-bottom: 1rem !important;
  }

  /* Dashboard status badges scale down so the row does not wrap awkwardly. */
  .status-badge {
    font-size: .8rem;
  }

  /* Staff nav horizontally scrolls instead of wrapping to two lines. */
  .staff-nav__inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .staff-nav__link {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Footer: centre-align stacked columns, give socials a little breathing
   * room so touch targets stay usable. */
  .site-footer h6 {
    margin-top: .25rem;
  }

  .site-footer .footer-socials .social-icon {
    width: 44px;
    height: 44px;
  }

  /* Navbar brand truncates long text rather than wrapping on a phone. */
  .navbar-brand span.lh-1 small {
    display: none;
  }
}

/* Drag-and-drop sort list (programs + specializations).
 * SortableJS attaches .sortable-ghost to the placeholder while dragging;
 * we use .sortable-chosen for the picked-up row feedback. */
.drag-list .drag-row {
  cursor: grab;
}

.drag-list .drag-row:active {
  cursor: grabbing;
}

.drag-list .drag-handle {
  color: var(--bs-secondary-color);
  font-size: 1.1rem;
  padding: .1rem .3rem;
}

.drag-list .sortable-chosen {
  background: rgba(196, 18, 48, .05);
}

.drag-list .sortable-ghost {
  opacity: .35;
  background: var(--bs-tertiary-bg);
}

.progress-next {
  --bs-progress-bar-bg: linear-gradient(90deg, var(--bitu-red-dark), var(--bitu-red));
}
.progress-next .progress-bar {
  background: linear-gradient(90deg, var(--bitu-red-dark), var(--bitu-red));
}

.step-list .list-group-item.is-next {
  border-left: 4px solid var(--bitu-red);
  background: rgba(196, 18, 48, .04);
}

.step-num {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .9rem;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  color: var(--bs-secondary-color);
  flex-shrink: 0;
}

.step-num.is-ok {
  background: rgba(25, 135, 84, .12);
  color: #198754;
  border-color: rgba(25, 135, 84, .35);
}

.step-num.is-flagged {
  background: rgba(196, 18, 48, .12);
  color: var(--bitu-red);
  border-color: rgba(196, 18, 48, .4);
}

.step-breadcrumb {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  font-size: .9rem;
  color: var(--bs-secondary-color);
  margin-bottom: 1rem;
}

.step-breadcrumb .mini-bar {
  flex: 1 1 180px;
  max-width: 240px;
  height: 6px;
  background: var(--bs-border-color);
  border-radius: 999px;
  overflow: hidden;
}

.step-breadcrumb .mini-bar__fill {
  height: 100%;
  background: var(--bitu-red);
  border-radius: 999px;
}

.photo-frame {
  width: 180px;
  aspect-ratio: 3 / 4;
  border: 2px dashed var(--bs-border-color);
  border-radius: .5rem;
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-frame__hint {
  font-size: .82rem;
  letter-spacing: .08em;
}

.dropzone {
  border: 2px dashed var(--bs-border-color);
  border-radius: .6rem;
  padding: 1rem 1.1rem;
  background: var(--bs-tertiary-bg);
  transition: border-color .15s, background .15s;
}

.dropzone:hover,
.dropzone.is-dragover {
  border-color: var(--bitu-red);
  background: var(--bs-body-bg);
}

.dropzone__hint {
  font-size: .85rem;
  color: var(--bs-secondary-color);
}

.signature-canvas {
  width: 100%;
  max-width: 520px;
  height: 180px;
  border: 1px solid var(--bitu-red);
  border-radius: .5rem;
  touch-action: none;
  cursor: crosshair;
  background: #fff;
  display: block;
}

.reference-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .03em;
}

.program-checkboxes ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .35rem .75rem;
}

.program-checkboxes li {
  margin: 0;
}
.program-checkboxes .form-check {
  margin: 0;
}

/* Program-picker grid.
 * column-count fills the first column top-to-bottom before starting the
 * second, which matches how applicants read the printed BITU form. On
 * mobile we collapse to a single column. */
.program-grid {
  column-count: 2;
  column-gap: 1.5rem;
}

.program-grid .form-check {
  break-inside: avoid;
  padding: 0.15rem 0 0.15rem 1.75rem;
  margin: 0;
}

@media (max-width: 640px) {
  .program-grid {
    column-count: 1;
  }
}