*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --rood: #ED1A2D;
  --donkerblauw: #00477F;
  --middenblauw: #009DDB;
  --lichtblauw: #D4EFFC;
  --lichtgrijs: #EBEBEC;
  --wit: #FFFFFF;
}

body { font-family: Arial, sans-serif; background: var(--lichtgrijs); color: var(--donkerblauw); min-height: 100vh; }

/* --- Login --- */
.login-page { display: flex; align-items: center; justify-content: center; background: var(--donkerblauw); }
.login-box { background: var(--wit); border-radius: 8px; padding: 2rem; width: 100%; max-width: 380px; }
.login-logo { font-size: 1.8rem; font-weight: bold; color: var(--rood); text-align: center; margin-bottom: 1rem; }
.login-box h1 { font-size: 1.1rem; text-align: center; margin-bottom: 1.5rem; }

/* --- Admin --- */
.admin-header { background: var(--rood); color: var(--wit); display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; }
.admin-header .logo { font-weight: bold; font-size: 1.2rem; }
.admin-header nav a { color: var(--wit); text-decoration: none; margin-left: 1.5rem; font-size: 0.9rem; }
.admin-header nav a:hover { text-decoration: underline; }
.admin-page main { padding: 1.5rem; max-width: 960px; margin: 0 auto; }
.admin-page h1 { font-size: 1.5rem; margin-bottom: 1rem; }
.admin-page h2 { font-size: 1.1rem; margin: 1.5rem 0 0.75rem; border-bottom: 2px solid var(--rood); padding-bottom: 0.25rem; }
.admin-page h3 { font-size: 1rem; margin: 1rem 0 0.5rem; color: var(--middenblauw); }

table { width: 100%; border-collapse: collapse; background: var(--wit); border-radius: 6px; overflow: hidden; margin-bottom: 1rem; }
th { background: var(--donkerblauw); color: var(--wit); padding: 0.6rem 0.75rem; text-align: left; font-size: 0.85rem; }
td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--lichtgrijs); font-size: 0.9rem; }
td a { color: var(--middenblauw); }

.dagcode { font-family: monospace; font-size: 1.1rem; font-weight: bold; letter-spacing: 2px; }

.groep-kaart { background: var(--wit); border-radius: 6px; padding: 1rem; margin-bottom: 0.75rem; border-left: 4px solid var(--middenblauw); }
.groep-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.groep-namen { color: #555; font-size: 0.9rem; margin-bottom: 0.5rem; }
.status { font-size: 0.8rem; padding: 0.2rem 0.5rem; border-radius: 20px; }
.status.actief { background: #d4edda; color: #155724; }
.status.inactief { background: var(--lichtgrijs); color: #666; }

.kandidaten-lijst { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.kandidaten-lijst li { background: var(--lichtblauw); padding: 0.3rem 0.75rem; border-radius: 20px; font-size: 0.9rem; }

.badge-actief { color: #155724; font-size: 0.8rem; }
.badge-inactief { color: #999; font-size: 0.8rem; }

/* --- Forms --- */
label { display: block; margin-bottom: 0.75rem; font-size: 0.9rem; font-weight: bold; }
label input, label select, label textarea { display: block; width: 100%; margin-top: 0.25rem; padding: 0.5rem 0.75rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.95rem; font-family: inherit; }
.groep-form, .thema-form { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.groep-form select, .thema-form select, .thema-form input { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.9rem; }
.vraag-form { background: var(--wit); padding: 1rem; border-radius: 6px; }

/* --- Buttons --- */
.btn-primair { background: var(--rood); color: var(--wit); border: none; border-radius: 4px; padding: 0.5rem 1.25rem; font-size: 0.95rem; cursor: pointer; font-weight: bold; }
.btn-primair:hover { background: #c5151f; }
.btn-secundair { background: var(--lichtgrijs); color: var(--donkerblauw); border: 1px solid #ccc; border-radius: 4px; padding: 0.5rem 1rem; font-size: 0.9rem; cursor: pointer; }
.btn-groot { width: 100%; padding: 0.85rem; font-size: 1.1rem; margin-top: 0.5rem; border-radius: 6px; }

/* --- Fout --- */
.fout { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; border-radius: 4px; padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.9rem; }

/* --- Game --- */
.game-page { background: var(--donkerblauw); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.game-container { background: var(--wit); border-radius: 12px; padding: 1.5rem; width: 100%; max-width: 420px; margin: 1rem; }
.ret-logo { font-size: 1.5rem; font-weight: bold; color: var(--rood); text-align: center; margin-bottom: 1rem; letter-spacing: 2px; }
.game-page h1 { font-size: 1.3rem; text-align: center; margin-bottom: 1rem; }

.thema-titel { background: var(--rood); color: var(--wit); text-align: center; padding: 0.5rem 1rem; border-radius: 6px; font-weight: bold; margin-bottom: 1rem; }
.vraag-tekst { font-size: 1rem; line-height: 1.5; margin-bottom: 1rem; }
.antwoord-blok textarea { width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.95rem; font-family: inherit; resize: vertical; }

.feedback-blok { padding: 0.75rem; border-radius: 6px; margin: 0.75rem 0; font-size: 0.95rem; }
.feedback-blok.correct { background: #d4edda; color: #155724; }
.feedback-blok.fout { background: #f8d7da; color: #721c24; }

.wacht-blok { text-align: center; margin-top: 1rem; color: #666; }
.status-indicators { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.75rem; }
.status-dot { width: 20px; height: 20px; border-radius: 50%; }
.status-dot.klaar { background: #28a745; }
.status-dot.bezig { background: #ccc; }

.wacht-tekst { text-align: center; color: #555; margin-bottom: 1.5rem; }
.bus-animatie { text-align: center; font-size: 3rem; }

.klaar-blok { text-align: center; }
.klaar-blok h2 { color: var(--rood); margin-bottom: 0.5rem; }

.verborgen { display: none !important; }