/*
  theme_overrides.css

  Purpose:
  - Keep small, user-requested tweaks out of the large theme.css file.
  - Loaded AFTER theme.css in all main layouts.
*/

/*
  Webfont + browser autofill quirk

  Some Chromium-based browsers may render saved/autofilled form values with a fallback font.
  With local, preloaded Poppins, this should no longer be necessary, but we keep a small
  hardening rule to ensure form controls always inherit the Bootstrap body font.
*/

input,
textarea,
select,
button{
  font-family: var(--bs-body-font-family);
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  /* Explicit font family helps in some Chromium/Safari autofill layers. */
  font-family: var(--bs-body-font-family) !important;
  -webkit-text-fill-color: inherit !important;
}

input:-webkit-autofill::first-line,
textarea:-webkit-autofill::first-line,
select:-webkit-autofill::first-line{
  font-family: var(--bs-body-font-family) !important;
}

/* Dashboard sidebar should be fully opaque purple */
.dashboard-sidebar{
  background: rgb(52 13 92 / 100%);
}

/*
  Modals: add a subtle purple tint behind the dialog.
  Note: the Bootstrap backdrop remains in place; this tint is above it.
*/
.modal{
  background: rgb(52 13 92 / 60%);
}

/* Bootstrap modal backdrop: purple tint instead of black */
.modal-backdrop{
  background: rgb(52 13 92);
}

.modal-backdrop.show{
  opacity: .65;
}

/* Inline pickers: subtle saved flash for slot labels (Primair / Back-up / Finale) */
.js-prelim-slot-label,
.js-final-slot-label{
  transition: color .85s ease, text-shadow .85s ease;
}

.js-prelim-slot-label.dhs-flash-saved,
.js-final-slot-label.dhs-flash-saved{
  color: rgba(var(--bs-success-rgb), 1);
  text-shadow: 0 0 10px rgba(var(--bs-success-rgb), .35);
}

/* Admin dashboard charts */
.adm-prelim-chart{
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
}

.adm-prelim-chart svg{
  display: block;
}

/* /prelims: highlight row when arriving via #round-{id} */
tr.prelim-highlight > td{
  background-color: rgba(13,110,253,.18) !important;
  transition: background-color .6s ease;
}


/* /prelims: highlight rows with waitinglist when arriving via ?hl=waitinglist */
tr.prelim-highlight-wl > td{
  background-color: rgba(13,110,253,.12) !important;
}

/* Admin dashboard: align legend with the SVG bar area (between paddings). */
.adm-prelim-chart-wrap{
  --adm-chart-leftpad: 0px;
  --adm-chart-rightpad: 0px;
}

.adm-prelim-legend{
  padding-left: var(--adm-chart-leftpad);
  padding-right: var(--adm-chart-rightpad);
}

.adm-prelim-legend-inner{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}


/* Admin dashboard: planning list items should look like clickable rows */
.adm-planning-link{
  color: inherit;
  text-decoration: none;
}

.adm-planning-link:hover{
  background-color: rgba(255,255,255,.04);
}

.adm-planning-link:focus-visible{
  outline: 2px solid rgba(255,255,255,.25);
  outline-offset: 2px;
  border-radius: 10px;
}


/* /participants/{id}: profile header */
.dhs-act-photo{
  width: 200px;
  height: auto;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  background: rgba(255,255,255,.06);
}


.dhs-photo-link{
  display: inline-block;
  border-radius: 22px;
  text-decoration: none;
}

.dhs-photo-link:focus-visible{
  outline: 2px solid rgba(255,255,255,.25);
  outline-offset: 3px;
}

.dhs-photo-link .dhs-act-photo{
  cursor: pointer;
}

.dhs-prewrap{
  white-space: pre-wrap;
}

.dhs-member-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dhs-member-item{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.dhs-member-link{
  text-decoration: none;
  color: inherit;
}

.dhs-member-link:hover{
  text-decoration: underline;
}

.dhs-member-link:focus-visible{
  outline: 2px solid rgba(255,255,255,.25);
  outline-offset: 3px;
  border-radius: 10px;
}


/* clickable table rows (admin lists) */
.js-nav-row{
  cursor: pointer;
}

.js-nav-row:focus-visible{
  outline: 2px solid rgba(255,255,255,.18);
  outline-offset: -2px;
}