/*
 * Shared public topbar. Bootstrap's dark theme uses a muted 55%-opacity white
 * for navbar links, so the colours are pinned to pure white here. The expanded
 * mobile menu reuses the bar colour, otherwise white links land on white.
 */
#mainNav {
  --topbar-bg: #3A5473;
  background-color: var(--topbar-bg);
  color: #fff;
  --bs-navbar-color: #fff;
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
}

#mainNav .navbar-collapse.collapsing,
#mainNav .navbar-collapse.collapse.show {
  background-color: var(--topbar-bg);
  z-index: 9999;
}

/*
 * Hero card "Pendaftaran {Nama Event}" (event_header.php) -- versi lebih
 * soft dari warna topbar (#3A5473), bukan text-bg-primary bawaan tema
 * Bootswatch yang terlalu terang/vivid untuk dipakai di card sebesar ini.
 */
.event-hero-card {
  background-color: #557ba9;
  color: #fff;
}

/*
 * Bootstrap 4 sized grid columns with flex-basis + max-width, so a control
 * carrying both .form-control and .col-* stayed inside its column. Bootstrap 5
 * sizes columns with `width`, and .form-control{width:100%} is declared later
 * in the same file at equal specificity, so it wins and the field spans the
 * whole row. Re-assert the column widths at two-class specificity.
 * The registration forms only ever use this one col trio; add a breakpoint here
 * if another combination is introduced.
 */
@media (min-width: 576px) {
  .form-control.col-sm-9,
  .form-select.col-sm-9 { width: 75%; }
}

@media (min-width: 768px) {
  .form-control.col-md-5,
  .form-select.col-md-5 { width: 41.66666667%; }
}

@media (min-width: 992px) {
  .form-control.col-lg-4,
  .form-select.col-lg-4 { width: 33.33333333%; }
}

/*
 * Flatpickr ships its own radius/accent, so match it to the theme. Its
 * stylesheet is included per view and therefore loads after this file, so
 * these selectors are scoped to `body` to outrank it without !important.
 */
body .flatpickr-calendar {
  border-radius: var(--bs-border-radius);
}

body .flatpickr-day.selected,
body .flatpickr-day.selected:hover,
body .flatpickr-day.startRange,
body .flatpickr-day.endRange {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
}

/*
 * Dropdown tahun (assets/js/flatpickr-year-dropdown.js) -- disamakan
 * tampilannya dengan dropdown bulan bawaan flatpickr
 * (.flatpickr-monthDropdown-months di flatpickr.min.css) supaya dua-duanya
 * kelihatan senada, bukan <select> polos bawaan browser.
 */
body .flatpickr-year-dropdown {
  appearance: menulist;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 .5ch;
  position: relative;
  vertical-align: initial;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}

body .flatpickr-year-dropdown:focus,
body .flatpickr-current-month .flatpickr-year-dropdown:active {
  outline: none;
}

body .flatpickr-year-dropdown:hover {
  background: rgba(0, 0, 0, 0.05);
}