@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap');

:root {
  --kvvz-red: #de1e3b;
  --kvvz-red-dark: #b81731;
  --kvvz-black: #101236;
  --kvvz-black-soft: #1c1f52;
  --bg: #f4f5f8;
  --card: #ffffff;
  --text: #101236;
  --muted: #6b6d82;
  --border: #e3e4ec;
  --shadow: 0 1px 3px rgba(16, 18, 54, 0.12), 0 6px 16px rgba(16, 18, 54, 0.08);
  --font: 'Rajdhani', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

.site-header {
  background: linear-gradient(135deg, var(--kvvz-black), var(--kvvz-black-soft));
  color: #fff;
  padding: 28px 0 22px;
  border-bottom: 5px solid var(--kvvz-red);
}
.site-header h1 { margin: 0; font-size: 1.9rem; letter-spacing: 0.5px; }
.subtitle { margin: 4px 0 0; opacity: 0.85; }

.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 22px 0 16px;
}
.status { color: var(--muted); font-size: 0.9rem; }

.refresh-btn {
  background: var(--kvvz-red); color: #fff; border: none;
  padding: 9px 18px; border-radius: 8px; font-size: 0.95rem;
  cursor: pointer; text-decoration: none; transition: background 0.15s ease;
}
.refresh-btn:hover { background: var(--kvvz-red-dark); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px; padding-bottom: 40px;
}

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow);
  overflow: hidden; display: flex; flex-direction: column;
  border-top: 4px solid var(--kvvz-red);
}
.card-header {
  background: var(--kvvz-red); color: #fff; padding: 12px 16px;
  font-weight: 600; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: space-between;
}
.card.empty { border-top-color: #9a9a9a; }
.card.empty .card-header { background: var(--kvvz-black-soft); }

.badge {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 3px 8px; border-radius: 999px;
}
.badge.home { background: var(--kvvz-black); color: #fff; }
.badge.away { background: rgba(255, 255, 255, 0.22); color: #fff; }

.card-body { padding: 16px; flex: 1; }
.match-date { font-size: 1.05rem; font-weight: 600; }
.match-time { color: var(--kvvz-red); font-weight: 700; }
.opponent { margin: 10px 0 6px; font-size: 1.15rem; font-weight: 600; }
.opponent .vs { color: var(--muted); font-weight: 400; font-size: 0.85rem; margin-right: 6px; }
.meta { color: var(--muted); font-size: 0.9rem; margin: 2px 0; }

.countdown {
  margin-top: 12px; display: inline-block; background: #fdeaec;
  color: var(--kvvz-red-dark); font-size: 0.8rem; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
}
.no-match { color: var(--muted); font-style: italic; padding: 8px 0; }
.card .error { color: var(--kvvz-red-dark); font-size: 0.85rem; margin-top: 8px; }

.error-box { text-align: center; color: var(--kvvz-red-dark); padding: 40px 0; }

/* --- Tabelweergave --- */
.table-scroll {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  margin-bottom: 40px;
}
table.matches {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
table.matches thead th {
  background: var(--kvvz-black);
  color: #fff;
  text-align: left;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 12px 14px;
  white-space: nowrap;
}
table.matches tbody td {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  vertical-align: middle;
}
table.matches tbody tr:hover { background: #fafafa; }
table.matches tr.is-empty td { color: var(--muted); }

td.team { font-weight: 700; white-space: nowrap; }
td.date { white-space: nowrap; }
td.time { white-space: nowrap; color: var(--kvvz-red); font-weight: 700; }
td.fixture { min-width: 240px; }
td.fixture .vs { color: var(--muted); margin: 0 6px; font-size: 0.85rem; }
td.fixture .ours { color: var(--kvvz-red-dark); font-weight: 700; }
td.fixture .comp {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  background: #f0f0f0; color: var(--muted); border-radius: 999px; font-size: 0.75rem;
}
td.location { color: var(--muted); }
td.countdown-cell {
  white-space: nowrap; font-weight: 600;
  color: var(--kvvz-red-dark);
}
td.no-match { color: var(--muted); font-style: italic; }

@media (max-width: 640px) {
  table.matches { font-size: 0.85rem; }
  table.matches thead th, table.matches tbody td { padding: 9px 10px; }
}

.site-footer {
  border-top: 1px solid var(--border); padding: 18px 0;
  color: var(--muted); font-size: 0.85rem;
}

/* ===================== Slideshow (billboard, full height) ===================== */
html, body.show { height: 100%; }
body.show {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.show-header {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, var(--kvvz-black), var(--kvvz-black-soft));
  color: #fff; padding: 16px 28px;
  border-bottom: 5px solid var(--kvvz-red);
}
.show-header__title { display: flex; align-items: baseline; gap: 14px; }
.show-header__title h1 { margin: 0; font-size: 1.8rem; letter-spacing: 0.5px; }
.show-header__sub { color: #ddd; font-size: 1rem; }
.show-header__meta { display: flex; align-items: center; gap: 14px; font-size: 1.3rem; font-weight: 700; }
.show-header .refresh-btn { font-size: 1rem; padding: 6px 12px; }

.deck {
  position: relative; flex: 1; min-height: 0;
  padding: 0;
  display: flex; flex-direction: column;
}
.slide[hidden] { display: none; }
.slide {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  animation: fade 0.5s ease;
  padding: 2.4vh 2.5vw 5.5vh; /* standaard voor het scorebord; full-bleed slides zetten dit op 0; onderaan ruimte voor de bolletjes */
}
/* Match-, custom- en beeld-slides vullen het volledige vlak */
.slide--solo, .slide--custom { padding: 0; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.slide__title {
  flex: none;
  margin: 0 0 2vh; font-size: clamp(1.6rem, 4vh, 3.2rem); color: var(--kvvz-red-dark);
  border-left: 8px solid var(--kvvz-red); padding-left: 16px;
}

/* Tabel vult de resterende hoogte; lettergrootte schaalt met het scherm */
.slide .table-scroll {
  flex: 1; min-height: 0; display: flex; align-items: center;
}
.slide table.matches { width: 100%; }
body.show table.matches { font-size: clamp(1rem, 2.6vh, 2.2rem); }
body.show table.matches thead th { font-size: clamp(0.7rem, 1.4vh, 1.1rem); padding: 1.2vh 1vw; }
body.show table.matches tbody td { padding: 1.4vh 1vw; }

/* Clublogo's in de wedstrijdkolom */
td.fixture .side { display: inline-flex; align-items: center; gap: 0.5em; }
td.fixture .club-logo {
  height: clamp(28px, 4.4vh, 64px); width: auto; max-width: 4em;
  object-fit: contain; vertical-align: middle;
}
td.fixture .vs { margin: 0 0.6em; }
td.fixture .ours .side-name { color: var(--kvvz-red-dark); font-weight: 700; }

/* Navigatie als compacte overlay onderaan (leesbaar op elke achtergrond) */
.deck__nav {
  position: absolute; bottom: 1.4vh; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.8vw; justify-content: center; align-items: center;
  padding: 0.7vh 1.1vw; border-radius: 999px;
  background: rgba(16, 18, 54, 0.38); backdrop-filter: blur(3px); z-index: 5;
}
.dot {
  width: clamp(9px, 1.1vh, 14px); height: clamp(9px, 1.1vh, 14px);
  border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.55); cursor: pointer; padding: 0; transition: all 0.2s;
}
.dot.active { background: #fff; transform: scale(1.35); box-shadow: 0 0 0 2px var(--kvvz-red); }
.deck__progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
  background: rgba(16, 18, 54, 0.12); z-index: 5;
}
.deck__progress span { display: block; height: 100%; width: 0; background: var(--kvvz-red); }

.show-footer {
  text-align: center; color: var(--muted); font-size: 0.9rem;
  padding: 10px; background: #fff; border-top: 1px solid var(--border);
}

@media (max-width: 700px) {
  body.show table.matches { font-size: 1rem; }
  .slide__title { font-size: 1.4rem; }
  .show-header__title h1 { font-size: 1.3rem; }
}

/* ===================== Scorebord-overzicht (fixtures) ===================== */
.slide .fixtures {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: space-evenly;
}

.fx {
  display: grid;
  grid-template-columns: minmax(130px, 15%) 1fr minmax(120px, 14%);
  align-items: center;
  gap: 1vw;
  padding: 1.1vh 1vw;
  border-bottom: 1px solid var(--border);
}
.fx:last-child { border-bottom: none; }

.fx__status { display: flex; flex-direction: column; line-height: 1.2; }
.fx__date { font-weight: 700; color: var(--kvvz-black); }
.fx__loc, .fx__team { color: var(--muted); font-size: 0.8em; }
.fx__team { font-weight: 700; color: var(--kvvz-black); font-size: 1em; }

/* De centrale matchup: naam — logo — vakje — logo — naam */
.fx__match {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.2vw;
}
.fx__match--empty { display: block; text-align: center; color: var(--muted); font-style: italic; }

.fx__side { display: flex; align-items: center; gap: 0.6em; min-width: 0; }
.fx__home { justify-content: flex-end; text-align: right; }
.fx__away { justify-content: flex-start; text-align: left; }
.fx__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx__side.ours .fx__name { color: var(--kvvz-red-dark); font-weight: 800; }

.fx__logo {
  height: clamp(28px, 5vh, 70px); width: auto; max-width: 4.5em;
  object-fit: contain; flex: none;
}

.fx__pill {
  min-width: 3.4em; text-align: center;
  background: #f1f1f1; color: var(--kvvz-black);
  font-weight: 800; border-radius: 10px;
  padding: 0.35em 0.6em;
}

.fx__count { text-align: right; color: var(--kvvz-red-dark); font-weight: 700; white-space: nowrap; }

.fx--empty .fx__date { color: var(--muted); }

/* Schermvullende lettergrootte voor het scorebord */
body.show .fixtures { font-size: clamp(1rem, 2.6vh, 2.1rem); }

/* Volledig overzicht: compacter zodat alle ploegen op één slide passen */
body.show .fixtures--dense { font-size: clamp(0.7rem, 1.95vh, 1.5rem); }
.fixtures--dense .fx { padding: 0.45vh 1vw; gap: 0.8vw; }
.fixtures--dense .fx__logo { height: clamp(18px, 3.2vh, 44px); max-width: 3.2em; }
.fixtures--dense .fx__pill { padding: 0.2em 0.5em; border-radius: 8px; }

@media (max-width: 700px) {
  .fx { grid-template-columns: 1fr; gap: 0.3vh; text-align: center; }
  .fx__status { flex-direction: row; gap: 8px; justify-content: center; }
  .fx__count { text-align: center; }
  body.show .fixtures { font-size: 1rem; }
}

/* ===================== Hero-matchkaart (solo-slides) ===================== */
.slide--solo { justify-content: center; }
.slide--solo .slide__title { text-align: center; border-left: none; padding-left: 0; }

.hero {
  width: min(92%, 1000px);
  margin: 0 auto;
  background: var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero__band {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2vw;
  padding: 3.2vh 3vw;
  background: linear-gradient(135deg, var(--kvvz-red), var(--kvvz-red-dark));
  color: #fff;
}

.hero__team { display: flex; flex-direction: column; align-items: center; gap: 1.2vh; min-width: 0; }
.hero__logo {
  height: clamp(70px, 16vh, 180px); width: auto; max-width: 80%;
  object-fit: contain;
}
.hero__name {
  font-size: clamp(1.2rem, 3.4vh, 2.6rem); font-weight: 800; text-align: center;
  line-height: 1.1; max-width: 11em;
}
.hero__team.ours .hero__name { text-shadow: 0 1px 0 rgba(0,0,0,0.15); }

.hero__pill {
  background: #fff; color: var(--kvvz-black);
  border-radius: 18px; padding: 1.6vh 2.2vw; text-align: center;
  display: flex; flex-direction: column; gap: 0.4vh;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.hero__big { font-size: clamp(2.2rem, 7vh, 5rem); font-weight: 800; line-height: 1; color: var(--kvvz-red-dark); }
.hero__small { font-size: clamp(0.9rem, 2vh, 1.4rem); color: var(--muted); font-weight: 600; }

.hero__body {
  padding: 3vh 3vw; text-align: center;
  display: flex; flex-direction: column; gap: 1.4vh;
}
.hero__count {
  font-size: clamp(1.4rem, 4vh, 3rem); font-weight: 800; color: var(--kvvz-red-dark);
}
.hero__meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4em 1em;
  color: var(--muted); font-size: clamp(0.95rem, 2.2vh, 1.5rem);
}
.hero__meta span:not(:last-child)::after { content: " ·"; margin-left: 1em; color: #c9c9c9; }

.hero--empty { padding: 8vh 3vw; text-align: center; }
.hero__none { color: var(--muted); font-style: italic; font-size: clamp(1.2rem, 3vh, 2rem); margin: 0; }

@media (max-width: 700px) {
  .hero__band { gap: 3vw; padding: 3vh 4vw; }
  .hero__meta span:not(:last-child)::after { content: ""; }
}

/* Navigatielink in de header (wissel volgende ↔ uitslagen) */
.show-header .nav-link {
  color: #fff; text-decoration: none; font-size: 0.95rem; font-weight: 600;
  background: rgba(255,255,255,0.14); padding: 6px 12px; border-radius: 8px;
}
.show-header .nav-link:hover { background: rgba(255,255,255,0.26); }

/* ===================== Custom (beheer) slides ===================== */
.slide--custom { padding: 0; }

/* Vrije afbeelding: volledig schermvullend */
.slide--custom.slide--image { padding: 0; }
.cslide__full { flex: 1; min-height: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }

/* Split-layout: tekst links, ronde foto op rood paneel rechts */
.cslide {
  flex: 1; min-height: 0; position: relative;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  background: #fff; border-radius: 0; overflow: hidden;
}
.slide--custom.is-textonly .cslide { grid-template-columns: 1fr; }
.cslide__text {
  z-index: 2; padding: 0 clamp(24px, 5vw, 90px);
  display: flex; flex-direction: column; gap: 2.4vh; align-items: flex-start;
}
.cslide__eyebrow {
  color: var(--kvvz-red); font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  font-size: clamp(1.1rem, 3.6vh, 2.6rem);
}
.cslide__title {
  color: var(--kvvz-black); font-weight: 800; margin: 0; line-height: 1;
  font-size: clamp(2.4rem, 10vh, 7rem);
}
.cslide__body {
  color: var(--text); font-size: clamp(1rem, 3vh, 2.1rem); line-height: 1.45; max-width: 16em;
}
.cslide__price {
  background: var(--kvvz-black); color: #fff; font-weight: 800; border-radius: 16px;
  padding: 0.45em 1.1em; font-size: clamp(1.5rem, 5vh, 3.4rem);
}
.cslide__media { position: relative; height: 100%; }
.cslide__media::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 46%;
  background: var(--kvvz-red);
}
.cslide__img {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  height: min(64vh, 46vw); width: auto; aspect-ratio: 1; border-radius: 50%;
  object-fit: cover; z-index: 2;
  border: 0.9vh solid var(--kvvz-black);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}
/* Sponsorlogo's niet bijsnijden maar passend tonen op witte cirkel */
.slide--sponsor .cslide__img { object-fit: contain; background: #fff; padding: 3vh; }

@media (max-width: 760px) {
  .cslide, .slide--custom.is-textonly .cslide { grid-template-columns: 1fr; }
  .cslide__media { display: none; }
  .cslide__text { padding: 24px; }
}

/* ===================== Match-kaart (Fanion / solo-slides) ===================== */
.match {
  width: 100%; margin: 0; flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: linear-gradient(135deg, var(--kvvz-red), var(--kvvz-red-dark));
  border-radius: 0; overflow: hidden;
}
.match__top {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding: 2.4vh 3vw 1vh;
}
.match__head {
  width: fit-content; margin: 0 auto 1.4vh;
  background: rgba(255, 255, 255, 0.18); color: #fff; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  font-size: clamp(0.85rem, 2.2vh, 1.5rem); padding: 0.5vh 1.5vw; border-radius: 999px;
}
.match__comp {
  text-align: center; color: #fff; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.5px; font-size: clamp(1.3rem, 4vh, 3rem); line-height: 1.1;
}
.match__teams {
  flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 2vw; padding: 1vh 1vw;
}
.match__team { display: flex; flex-direction: column; align-items: center; gap: 2.2vh; min-width: 0; }
.match__logo { height: clamp(80px, 20vh, 230px); width: auto; max-width: 85%; object-fit: contain; }
.match__name {
  color: #fff; font-weight: 800; text-align: center; line-height: 1.1; max-width: 11em;
  font-size: clamp(1.3rem, 3.8vh, 3rem);
}
.match__vs { color: #fff; font-weight: 800; font-size: clamp(2.4rem, 9vh, 6rem); line-height: 1; }
.match__bottom {
  background: #fff; border-top-left-radius: 28px; border-top-right-radius: 28px;
  padding: 3vh clamp(24px, 4vw, 70px) 5.5vh; display: flex; flex-direction: column; gap: 1.6vh;
}
.match__datetime { display: flex; align-items: baseline; justify-content: space-between; gap: 2vw; }
.match__date, .match__time {
  color: var(--kvvz-black); font-weight: 800; font-size: clamp(1.6rem, 6.5vh, 4.2rem); line-height: 1;
}
.match__time--res { color: var(--kvvz-red-dark); font-size: clamp(1.2rem, 4vh, 2.6rem); }
.match__loc { text-align: center; color: var(--kvvz-black); font-weight: 600; font-size: clamp(1.1rem, 3vh, 2.1rem); }
.match__ball {
  display: flex; align-items: center; justify-content: center; gap: 2.5vw; margin-top: 0.5vh;
}
.match__ball-label {
  color: var(--kvvz-red); font-weight: 800; line-height: 1.05; max-width: 6em;
  font-size: clamp(1.1rem, 3.4vh, 2.4rem);
}
.match__ball-logo { height: clamp(48px, 11vh, 130px); width: auto; max-width: 30%; object-fit: contain; }
.match--empty { align-items: center; justify-content: center; }
.match__none { color: #fff; font-style: italic; font-size: clamp(1.2rem, 3vh, 2rem); margin: 0; padding: 8vh 3vw; text-align: center; }

/* ===================== Admin ===================== */
body.admin {
  background: #f0f1f3; color: var(--text);
  font-family: var(--font);
}
.admin-header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--kvvz-black); color: #fff; padding: 14px 22px;
  border-bottom: 4px solid var(--kvvz-red);
}
.admin-header__title { font-weight: 700; font-size: 1.1rem; }
.admin-header__nav { display: flex; align-items: center; gap: 18px; }
.admin-header__nav a { color: #fff; text-decoration: none; opacity: 0.9; }
.admin-header__nav a:hover { opacity: 1; }
.admin-link-btn { background: none; border: none; color: #fff; cursor: pointer; font: inherit; opacity: 0.9; }
.admin-main { max-width: 900px; margin: 26px auto; padding: 0 18px; }

.admin-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.admin-toolbar h1 { font-size: 1.4rem; margin: 0; }

.admin-btn {
  background: var(--kvvz-red); color: #fff; border: none; cursor: pointer;
  padding: 10px 18px; border-radius: 8px; font-size: 0.95rem; text-decoration: none; display: inline-block;
}
.admin-btn:hover { background: var(--kvvz-red-dark); }

.admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.admin-table th, .admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.admin-table th { background: #fafafa; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); }
.admin-thumb { height: 34px; width: auto; vertical-align: middle; margin-right: 8px; border-radius: 4px; }
.admin-actions { display: flex; gap: 12px; align-items: center; }
.admin-link { color: var(--kvvz-red-dark); text-decoration: none; background: none; border: none; cursor: pointer; font: inherit; }
.admin-link--danger { color: #b00020; }
.admin-badge { background: #e3e3e3; color: #555; border-radius: 999px; padding: 2px 9px; font-size: 0.75rem; font-weight: 700; }
.admin-badge--on { background: #d8f0dd; color: #1a7a33; }

.admin-form { background: #fff; padding: 22px; border-radius: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.admin-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.9rem; }
.admin-form input[type=text], .admin-form input[type=email], .admin-form input[type=password],
.admin-form input[type=number], .admin-form input[type=datetime-local],
.admin-form select, .admin-form textarea {
  padding: 9px 11px; border: 1px solid #ccc; border-radius: 8px; font: inherit; font-weight: 400;
}
.admin-form__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.admin-check { flex-direction: row !important; align-items: center; gap: 8px !important; }
.admin-preview { max-height: 120px; border-radius: 8px; border: 1px solid var(--border); }
.admin-hint { font-weight: 400; color: var(--muted); font-size: 0.8rem; }
.admin-empty { color: var(--muted); }

.admin-alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.admin-alert--ok { background: #d8f0dd; color: #1a7a33; }
.admin-alert--error { background: #fde2e4; color: #b00020; }
.admin-alert ul { margin: 0; padding-left: 18px; }

.admin-login { max-width: 360px; margin: 12vh auto; background: #fff; padding: 28px; border-radius: 14px; box-shadow: var(--shadow); }
.admin-login h1 { font-size: 1.2rem; margin: 0 0 18px; text-align: center; }
.admin-login form { display: flex; flex-direction: column; gap: 14px; }
.admin-login label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.9rem; }
.admin-login input[type=email], .admin-login input[type=password] { padding: 10px 12px; border: 1px solid #ccc; border-radius: 8px; font: inherit; font-weight: 400; }

/* ===================== Sponsorbanner (marquee) ===================== */
.ticker {
  flex: none; overflow: hidden; background: #fff;
  border-top: 4px solid var(--kvvz-red);
  padding: 1.2vh 0;
}
.ticker__track {
  display: flex; align-items: center; width: max-content;
  animation-name: ticker-scroll; animation-timing-function: linear;
  animation-iteration-count: infinite; will-change: transform;
}
.ticker__item { flex: 0 0 auto; padding: 0 3vw; display: flex; align-items: center; }
.ticker__item img {
  height: clamp(38px, 8vh, 90px); width: auto; max-width: 22vw;
  object-fit: contain; display: block;
}
.ticker__item span { font-size: clamp(1rem, 3vh, 1.9rem); font-weight: 700; color: var(--kvvz-black); white-space: nowrap; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Admin: sponsorlogo-previews op donkere achtergrond zichtbaar houden */
.admin-thumb--sponsor { height: 40px; background: #f4f4f4; padding: 3px 6px; border-radius: 6px; }
.admin-preview--sponsor { background: #f4f4f4; padding: 8px 12px; }

/* ===================== Sponsorbanner-titel ===================== */
.ticker-wrap { flex: none; border-top: 4px solid var(--kvvz-red); }
.ticker-wrap .ticker { border-top: none; }
.ticker__title {
  text-align: center; background: linear-gradient(135deg, var(--kvvz-black), var(--kvvz-black-soft));
  color: #fff; font-weight: 700; letter-spacing: 0.4px;
  font-size: clamp(0.9rem, 2.4vh, 1.5rem); padding: 0.9vh 0 0.6vh;
}

/* ===================== Admin: verticale zijbalk ===================== */
.admin--app { display: flex; min-height: 100vh; background: #f0f1f3; }
.admin-sidebar {
  width: 230px; flex: none; box-sizing: border-box;
  background: linear-gradient(180deg, var(--kvvz-black), var(--kvvz-black-soft));
  color: #fff; display: flex; flex-direction: column; padding: 18px 14px;
  position: sticky; top: 0; height: 100vh;
}
.admin-sidebar__brand {
  display: flex; align-items: center; gap: 10px; padding: 4px 6px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 14px;
}
.admin-sidebar__logo { background: var(--kvvz-red); color: #fff; font-weight: 800; padding: 6px 10px; border-radius: 8px; letter-spacing: 0.5px; }
.admin-sidebar__name { font-weight: 600; opacity: 0.9; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; }
.admin-sidebar__bottom { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); }
.admin-nav__link {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  color: #e8e8e8; text-decoration: none; font-weight: 600; font-size: 0.95rem;
  background: none; border: none; cursor: pointer; width: 100%; text-align: left; font-family: inherit;
}
.admin-nav__link:hover { background: rgba(255,255,255,0.10); color: #fff; }
.admin-nav__link.is-active { background: var(--kvvz-red); color: #fff; }
.admin-nav__link .ico { width: 20px; height: 20px; flex: none; }
.admin--app .admin-main { flex: 1; max-width: none; margin: 0; padding: 30px 38px; }

@media (max-width: 760px) {
  .admin--app { flex-direction: column; }
  .admin-sidebar { width: 100%; height: auto; position: static; }
  .admin-nav, .admin-sidebar__bottom { flex-direction: row; flex-wrap: wrap; }
  .admin-sidebar__bottom { margin-top: 12px; }
  .admin-nav__link { width: auto; }
  .admin--app .admin-main { padding: 22px 18px; }
}