.spmb-header {
  width: 100%;
  background: #fff;
  /* soften the shadow so it doesn't look like a gap above */
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
  /* small vertical padding so content isn't too tight to the very top */
  padding: 6px 0;
  margin: 0; /* remove any top/bottom gap */
  /* Make header stick to the viewport top so it won't be pushed down by empty navs */
  position: sticky;
  top: 0;
  z-index: 1100;
}
.spmb-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%; /* allow full width so items can be flush */
  margin: 0;
  padding: 0 12px; /* small horizontal gutters so items aren't fully flush */
  height: 64px;
  width: 100%;
}
.navbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 8px; /* small space from the right edge */
}
.navbar-link {
  color: #222;
  text-decoration: none;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.2s;
}
.navbar-link:hover {
  background: #f2f2f2;
}
.dropdown {
  position: relative;
}
.dropbtn {
  background: none;
  border: none;
  color: #222;
  font-weight: 500;
  font-size: 16px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}
.dropbtn:hover,
.dropbtn:focus {
  background: #f2f2f2;
}
.caret {
  margin-left: 6px;
  font-size: 12px;
}
.dropdown-content {
  display: none;
  position: absolute;
  left: 0;
  top: 110%;
  min-width: 140px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  overflow: hidden;
  z-index: 100;
}
.dropdown-content a {
  display: block;
  color: #222;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 15px;
  transition: background 0.2s;
}
.dropdown-content a:hover {
  background: #f2f2f2;
}
.dropdown:focus-within .dropdown-content,
.dropdown:hover .dropdown-content {
  display: block;
}
.navbar-right {
  display: flex;
  align-items: center;
}
.logo-link {
  display: flex;
  align-items: center;
  padding: 0 8px; /* a little space from the left edge */
  margin-left: 0;
}
.sae-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
  display: block;
}
@media (max-width: 800px) {
  .spmb-navbar {
    flex-direction: row;
    justify-content: space-between;
    height: 56px;
    padding: 0 12px; /* small gutters on mobile */
  }
  .navbar-left {
    margin-bottom: 0;
  }
  .sae-logo {
    height: 40px;
  }
}

/* global reset for this module to ensure header touches top */
html,
body {
  margin: 0;
  padding: 0;
}

/* Ensure home module header and main content sit flush to the very top
   of the viewport. Use localized overrides so we don't change global layout
   in other modules. */
.module-home-header {
  margin-top: 0 !important;
  padding-top: 0 !important; /* remove extra top spacing inside the header */
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04) !important; /* keep gentle separation */
  /* Pin the home header to the top so it won't be visually pushed down */
  position: sticky !important;
  top: 0 !important;
  z-index: 1100 !important;
}

.main-content {
  padding-top: 0 !important; /* if themes add top padding for a fixed navbar, override it on pages using our header */
}

/* Hide the Argon top-navbar only on the SPMB page so the empty navbar doesn't create a thin strip */
.spmb-page .navbar-top {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* If an empty theme navbar or other elements are still pushing content down,
   pin the module headers to the top and add top padding to the main content
   so nothing is hidden underneath. Scoped to page classes to avoid global
   layout changes. */
.spmb-page .spmb-header,
.spmb-page .module-home-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2000 !important;
}
.spmb-page .main-content {
  padding-top: 72px !important; /* header height (64) + small gap */
}

.home-page .module-home-header {
  /* Keep header flush to top for home page too */
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 2 !important;
  margin-top: 0 !important;
  padding-top: 15px !important;
}
.home-page .module-home-container {
  padding-top: 0 !important;
}

/* Hero / Banner for SPMB */
.spmb-hero {
  /* Big, modern hero: deep blue full-width band */
  background: linear-gradient(135deg, #0f4bd8 0%, #2946b2 60%);
  color: #ffffff;
  padding: 72px 0 80px 0;
  position: relative;
  overflow: hidden;
}
.spmb-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
}
.spmb-hero-left {
  flex: 1 1 60%;
}
.spmb-hero-title {
  font-size: 3.2rem;
  line-height: 1.03;
  margin: 0 0 12px 0;
  color: #ffffff;
  font-weight: 800;
}
.spmb-hero-sub {
  margin: 0 0 18px 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
}
/* Force the year text to pure white inside the hero. Use a specific selector and
   !important to override any accidental nesting or other rules. */
.spmb-hero .spmb-hero-year {
  color: #ffffff !important;
}
.spmb-hero-cta a.btn {
  margin-right: 12px;
}
.spmb-hero-right {
  flex: 0 0 420px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.spmb-hero-illustration {
  max-width: 420px;
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.18));
}

/* CTA button styles (override to get modern pill buttons) */
.spmb-hero-cta .btn.btn-primary {
  background: linear-gradient(180deg, #ff8a00 0%, #ff6a00 100%);
  border: 0;
  color: #fff;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(34, 41, 74, 0.12);
}
.spmb-hero-cta .btn.btn-outline-light,
.spmb-hero-cta .btn.btn-outline-secondary {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.9);
  padding: 10px 24px;
  border-radius: 999px;
  font-weight: 700;
}

/* Data / Check section - flattened selectors and added stats/card styles */
.spmb-data {
  padding: 20px 15px 48px 15px;
}
.spmb-data-title {
  margin: 0 0 6px 0;
  font-weight: 700;
}
.spmb-data-desc {
  margin: 0 0 12px 0;
  color: rgba(0, 0, 0, 0.65);
}
.spmb-check-form input.form-control {
  max-width: 420px;
}

/* Stats cards (4 up on desktop, stacked on mobile) */
.spmb-stats {
  max-width: 1200px;
  margin: 18px auto 0;
  padding: 0 20px;
  display: flex;
  gap: 16px;
}
.spmb-card {
  flex: 1 1 0;
  background: #ffffff;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 8px 20px rgba(20, 36, 60, 0.06);
  display: flex;
  align-items: center;
  gap: 12px;
}
.spmb-card .icon {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  background: linear-gradient(180deg, #ff8a00 0%, #ff6a00 100%);
  flex-shrink: 0;
}
.spmb-card .meta {
  display: flex;
  flex-direction: column;
}
.spmb-card .meta .label {
  font-size: 0.95rem;
  color: #445;
  margin: 0;
}
.spmb-card .meta .value {
  font-size: 1.4rem;
  font-weight: 800;
  margin-top: 6px;
  color: #0b1220;
}

@media (max-width: 991.98px) {
  .spmb-hero-title {
    font-size: 2.2rem;
    text-align: center;
  }
  .spmb-hero-sub {
    text-align: center;
  }
  .spmb-hero-year {
    font-size: 1rem;
  }
  .spmb-hero-cta {
    text-align: center;
  }
  .spmb-hero-right {
    order: 3;
  }
  .spmb-hero-left {
    order: 1;
  }
  .spmb-hero-illustration {
    max-width: 320px;
  }
  .spmb-stats {
    flex-direction: column;
  }
}

@media (max-width: 576px) {
  .spmb-hero {
    padding: 36px 0 48px 0;
  }
  .spmb-hero-title {
    font-size: 1.6rem;
  }
  .spmb-hero-sub {
    font-size: 0.95rem;
  }
  .spmb-hero-cta .btn {
    display: inline-block;
    margin-bottom: 8px;
  }
}

/* End of spmb.css */
/* Schedule / Jadwal styles */
.spmb-schedule {
  max-width: 1200px;
  margin: 28px auto 60px;
  padding: 0 20px;
}
.spmb-schedule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.spmb-schedule-header .muted {
  color: #ffffff !important; /* force white text for the small helper text */
}
/* Make schedule and ranking headings consistent: white and normal case */
.spmb-schedule-header h3,
.spmb-ranking .heading {
  color: #ffffff !important;
  text-transform: none !important;
  font-weight: 700;
}
.spmb-schedule-header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: #0b1220;
  font-weight: 800;
}
.spmb-schedule-wrapper {
  overflow-x: auto;
}
.spmb-schedule-table {
  width: 100%;
  min-width: 720px; /* allow horizontal scroll on small screens */
  border-collapse: collapse;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(20, 36, 60, 0.04);
}

/* Progress / Multi-step shared styles (used by pra-spmb form) */
.progress-track {
  height: 12px;
  background: #eef2fb;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6b5cff, #3aa0ff);
  border-radius: 999px;
  width: 0%;
  transition: width 0.45s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.step-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.step-label {
  font-size: 0.92rem;
  color: #98a0b3;
  transition: color 0.25s ease, transform 0.25s ease;
}
.step-label.active {
  color: #1f4ed8;
  font-weight: 600;
  transform: translateY(-2px);
}
.step-label::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  background: #cfd8ff;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.02);
}
.step-label.active::before {
  background: #3aa0ff;
}

@media (max-width: 576px) {
  .step-label {
    font-size: 0.82rem;
  }
}
.spmb-schedule-table thead {
  background: linear-gradient(180deg, #2946b2 0%, #1e3bb0 100%);
  color: #fff;
}
.spmb-schedule-table th,
.spmb-schedule-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.spmb-schedule-table tbody tr:last-child td {
  border-bottom: 0;
}
.spmb-schedule-table tbody tr:hover {
  background: rgba(20, 36, 60, 0.02);
}
.spmb-schedule-table .date-cell {
  width: 160px;
  font-weight: 700;
  color: #0b1220;
}
.spmb-schedule-table .title-cell {
  font-weight: 700;
  color: #0b1220;
}
.spmb-schedule-table .desc-cell {
  color: #556;
}

/* Ranking table styles */
.spmb-ranking {
  max-width: 1200px;
  margin: 18px auto 60px;
  padding: 0 20px;
}
.spmb-ranking .heading {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0b1220;
  margin-bottom: 10px;
}
.spmb-ranking-table-wrapper {
  overflow-x: auto;
}
.spmb-ranking-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(20, 36, 60, 0.04);
}
.spmb-ranking-table th,
.spmb-ranking-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  text-align: left;
}
.spmb-ranking-table thead th {
  background: rgba(15, 75, 216, 0.95);
  color: #fff;
  font-weight: 700;
}
.spmb-ranking-table tbody tr:nth-child(even) {
  background: rgba(20, 36, 60, 0.02);
}
.spmb-ranking-table .rank-cell {
  width: 72px;
  font-weight: 800;
}
.spmb-ranking-table .school-cell {
  font-weight: 700;
}
.spmb-ranking-table .count-cell {
  text-align: right;
  font-weight: 800;
}

/* Majors chart + table section */
.spmb-majors {
  max-width: 1200px;
  margin: 18px auto;
  padding: 0 20px 18px;
}
.spmb-majors-grid {
  display: grid;
  /* Chart narrower, table wider: 35% chart / 65% table */
  grid-template-columns: 35% 65%;
  gap: 18px;
}
.spmb-card-chart,
.spmb-card-table {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 20px rgba(20, 36, 60, 0.04);
}
.spmb-card-chart .card-title,
.spmb-card-table .card-title {
  margin: 0 0 12px 0;
  font-weight: 700;
  color: #0b1220;
}
.spmb-card-chart canvas {
  width: 100% !important;
  height: 240px !important; /* slightly reduced to fit the new narrow column */
}
.spmb-major-table {
  width: 100%;
  border-collapse: separate; /* nicer rounded corners */
  border-spacing: 0;
  font-size: 0.97rem;
  color: #39424a;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  table-layout: fixed; /* stable column widths for scrollable tbody */
}
.spmb-major-table thead th {
  background: linear-gradient(
    180deg,
    rgba(41, 70, 178, 0.06) 0%,
    rgba(224, 229, 255, 0.04) 100%
  );
  color: #2b3b58;
  font-weight: 700;
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
}
.spmb-major-table thead th {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  z-index: 2;
}

.spmb-major-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(18, 32, 63, 0.04);
  vertical-align: middle;
  line-height: 1.25;
}
.spmb-major-table tbody tr:nth-child(even) {
  background: rgba(20, 36, 60, 0.02);
}
.spmb-major-table tbody tr:hover {
  background: rgba(41, 70, 178, 0.03);
}
.spmb-major-table th:first-child,
.spmb-major-table td:first-child {
  width: 56px;
  text-align: center;
  padding-left: 0;
  color: #44596b;
  font-weight: 700;
}
.spmb-major-table th.male,
.spmb-major-table td.male,
.spmb-major-table th.female,
.spmb-major-table td.female {
  width: 90px;
  text-align: right;
  color: #697b8a;
}
.spmb-major-table th.count,
.spmb-major-table td.count {
  width: 110px;
  text-align: right;
  font-weight: 800;
  color: #1f2b46;
}
.spmb-major-table td.male,
.spmb-major-table td.female {
  font-weight: 600;
}

/* Ensure cards align visually with chart card height */
.spmb-majors-grid {
  align-items: start;
}
.spmb-card-table {
  min-height: 240px; /* match the chart card height */
  display: flex;
  flex-direction: column;
  padding: 18px;
}
.spmb-card-table .card-title {
  margin-bottom: 14px;
}
.spmb-card-table .spmb-major-table {
  flex: 1 1 auto;
}

/* Make table body scroll if lots of rows while keeping header visible */
.spmb-card-table .spmb-major-table thead,
.spmb-card-table .spmb-major-table tbody {
  display: block;
}
.spmb-card-table .spmb-major-table tbody {
  max-height: 220px;
  overflow: auto;
}
.spmb-card-table .spmb-major-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.spmb-card-table .spmb-major-table thead tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

/* If the cell is empty, show a soft em-dash via generated content */
.spmb-major-table td.male:empty::after,
.spmb-major-table td.female:empty::after {
  content: "—";
  color: #9aa4ad;
}

/* Make literal em-dash (if present) slightly muted too */
.spmb-major-table td.male,
.spmb-major-table td.female {
  color: #516270;
}

/* Compact responsive behaviour: hide breakdown columns on narrow screens */
@media (max-width: 700px) {
  .spmb-major-table th.male,
  .spmb-major-table td.male,
  .spmb-major-table th.female,
  .spmb-major-table td.female {
    display: none;
  }
  .spmb-major-table thead th.count,
  .spmb-major-table td.count {
    width: 110px;
  }
}

/* Slight typography and spacing tweaks for clarity */
.spmb-card-table .spmb-major-table thead th {
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 0.95rem;
}
.spmb-card-table .spmb-major-table tbody td {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 0.95rem;
}

@media (max-width: 991.98px) {
  .spmb-majors-grid {
    grid-template-columns: 1fr;
  }
  .spmb-card-chart canvas {
    height: 220px !important;
  }
}

@media (max-width: 991.98px) {
  .spmb-schedule-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .spmb-schedule-list {
    grid-template-columns: 1fr;
  }
}