/* ============================================
   The Dukes huisstijl overlay
   ============================================
   Wordt na styles.css geladen en past alleen de
   huisstijl-elementen aan. De rest van styles.css
   blijft volledig intact.
   ============================================ */

:root {
  --dukes-red: #DA291C;
  --dukes-yellow: #FFB81C;
  --dukes-yellow-hover: #f5a800;
  --dukes-text-on-yellow: #422006;
}

/* === HEADER: wit met dunne rode lijn onderaan === */
header {
  background: white !important;
  border-bottom: 3px solid var(--dukes-red) !important;
  color: #111827 !important;
}
header .header-text h1 {
  color: #111827 !important;
}
header .header-text p {
  color: #6b7280 !important;
}
header .header-actions a {
  color: #6b7280 !important;
}
header .header-actions a:hover {
  color: #111827 !important;
}

/* Logo iets groter en zonder achtergrond */
header .header-logo img {
  width: 48px;
  height: 48px;
  display: block;
}

/* Rugbybal-foto in header (nieuw element) */
header .header-rugby {
  flex-shrink: 0;
  width: 64px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
  margin-left: auto;
}
@media (max-width: 600px) {
  header .header-rugby { display: none; }
}

/* === KNOPPEN: alleen clubgeel === */
/* Primary knop = clubgeel met donkerbruine tekst */
.btn-primary,
button.btn-primary {
  background: var(--dukes-yellow) !important;
  background-color: var(--dukes-yellow) !important;
  border-color: var(--dukes-yellow) !important;
  color: var(--dukes-text-on-yellow) !important;
}
.btn-primary:hover,
button.btn-primary:hover {
  background: var(--dukes-yellow-hover) !important;
  background-color: var(--dukes-yellow-hover) !important;
  border-color: var(--dukes-yellow-hover) !important;
  color: var(--dukes-text-on-yellow) !important;
}
.btn-primary:disabled,
button.btn-primary:disabled {
  opacity: 0.5;
}

/* Danger knop wordt outline-stijl (geen rode vlak) */
.btn-danger,
button.btn-danger {
  background: white !important;
  background-color: white !important;
  color: #ef4444 !important;
  border: 1px solid #fecaca !important;
}
.btn-danger:hover,
button.btn-danger:hover {
  background: #fef2f2 !important;
  background-color: #fef2f2 !important;
}

/* === FOCUS-RING in clubgeel ipv rood/blauw === */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--dukes-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255, 184, 28, 0.25) !important;
  outline: none !important;
}

/* === PROGRESS BAR: gevulde portie in neutraal grijs === */
/* Alleen de .bar zelf (de fill), niet de wrap of de tekstcontainer */
.event-card .progress-bar,
.bar-wrap > .bar,
.event-progress .bar {
  background: #6b7280 !important;
}

/* === SPINNER kleur in clubgeel === */
.spinner {
  border-top-color: var(--dukes-yellow) !important;
}

/* === LINKS in body: dukes-amber ipv rood/blauw === */
.container a:not(.btn):not(.tab):not(.btn-primary):not(.btn-secondary):not(.btn-danger) {
  color: #b45309;
}

/* === ACTIEVE TAB-onderlijn in clubgeel === */
.tab.active,
.tabs-nav .active {
  border-bottom-color: var(--dukes-yellow) !important;
}

/* === FOOTER: neutraal grijs === */
.dukes-footer {
  margin-top: 60px;
  padding: 24px 20px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
  font-size: 0.85rem;
  color: #6b7280;
  background: transparent;
}
.dukes-footer a {
  color: #6b7280;
  text-decoration: none;
  margin: 0 10px;
}
.dukes-footer a:hover {
  color: #111827;
  text-decoration: underline;
}
.dukes-footer .footer-logo {
  display: inline-block;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  margin-right: 8px;
  opacity: 0.6;
}

/* ============================================
   Batch 3 — extra polish
   ============================================ */

/* === #9 Sticky tabs in admin/event-admin === */
.tabs-nav {
  position: sticky;
  top: 0;
  background: var(--bg, #f9fafb);
  z-index: 10;
  /* Bleed naar de container-randen zodat de achtergrond doorloopt */
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 8px;
  padding-bottom: 0;
}
@supports (backdrop-filter: blur(6px)) {
  .tabs-nav {
    background: rgba(249, 250, 251, 0.85);
    backdrop-filter: blur(6px);
  }
}

/* === #10 Voortgangsbalk-animatie (van 0 naar eindwaarde) === */
@keyframes bar-fill-in {
  from { width: 0% !important; }
}
.event-progress .bar,
.bar-wrap > .bar,
.event-card .progress-bar {
  animation: bar-fill-in 0.7s ease-out;
}

/* === #11 Skelet-loaders i.p.v. spinner === */
.loading {
  display: block !important;
  padding: 20px 0 !important;
  font-size: 0 !important;
  text-align: left !important;
  background: transparent !important;
}
.loading .spinner { display: none !important; }
.loading::before,
.loading::after {
  content: '';
  display: block;
  height: 16px;
  border-radius: 4px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.4s ease-in-out infinite;
}
.loading::before { width: 65%; }
.loading::after { width: 85%; max-width: 380px; }
@keyframes skeleton-shine {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* === #12 Empty-state op index.html === */
.empty-state {
  text-align: center;
  padding: 50px 24px;
  color: #6b7280;
}
.empty-state svg {
  display: block;
  margin: 0 auto 18px;
  opacity: 0.85;
}
.empty-state h3 {
  margin: 0 0 6px;
  color: #111827;
  font-size: 1.1rem;
}
.empty-state p {
  margin: 0;
  font-size: 0.92rem;
}

/* === #14 Confetti animatie === */
.confetti-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 300;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -20px;
  animation: confetti-fall var(--dur, 2.5s) var(--delay, 0s) cubic-bezier(0.4, 0.7, 0.6, 1) forwards;
}
@keyframes confetti-fall {
  to {
    transform: translate(var(--drift, 0), 110vh) rotate(var(--rot, 720deg));
    opacity: 0;
  }
}