/* Ouderpagina: overzicht na inloggen via de persoonlijke link.
   Laden ná ing-clubstijl.css. Alles klasse-driven; de enige inline style is
   --ing-bar op een klassementsbalk, want dat is data.
   Alle richtingsgevoelige eigenschappen zijn logisch, dus NL/EN/AR werken
   zonder losse RTL-stylesheet. */

/* ─── Topbar met hamburger ────────────────────────────────────── */

.ing-hamburger {
  width: 56px;
  min-height: var(--ing-tap);
  margin-inline-start: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.ing-hamburger span { display: block; width: 22px; height: 2px; background: #fff; }
.ing-hamburger:hover { background: var(--ing-red); }

/* ─── Band met puntenstand ────────────────────────────────────── */

.ing-band__split { display: flex; align-items: flex-end; gap: var(--ing-space-4); flex-wrap: wrap; }
.ing-band__split > *:first-child { flex: 1 1 300px; }

.ing-band__score { margin: 0; text-align: end; }
.ing-band__score b {
  display: block;
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: clamp(2.875rem, 7vw, 5rem);
  line-height: 0.82;
  color: var(--ing-red);
  font-variant-numeric: tabular-nums;
}
.ing-band__score span {
  display: block;
  margin-block-start: var(--ing-space-1);
  font-family: var(--ing-font-display);
  font-weight: 600;
  font-size: var(--ing-text-xs);
  letter-spacing: var(--ing-track);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* ─── Eerstvolgende wedstrijd ─────────────────────────────────── */

.ing-nextmatch {
  position: relative;
  overflow: hidden;
  background: var(--ing-ink);
  color: #fff;
  box-shadow: var(--ing-shadow);
}
.ing-nextmatch::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: -14%;
  width: 26%;
  background: var(--ing-red);
  transform: skewX(var(--ing-skew));
}
.ing-nextmatch > * { position: relative; z-index: 1; }

.ing-nextmatch__head {
  display: flex;
  align-items: center;
  gap: var(--ing-space-3);
  flex-wrap: wrap;
  padding: var(--ing-space-3) var(--ing-space-4);
  border-block-end: 1px solid rgba(255, 255, 255, 0.16);
}
.ing-nextmatch__eyebrow { font-family: var(--ing-font-display); font-weight: 600; font-size: 15px; letter-spacing: var(--ing-track); text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.ing-nextmatch__head .ing-tag { margin-inline-start: auto; }
.ing-tag--white { background: #fff; color: var(--ing-ink); font-weight: 700; }

.ing-nextmatch__teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ing-space-4);
  flex-wrap: wrap;
  padding: var(--ing-space-5) var(--ing-space-4);
  text-align: center;
}
.ing-nextmatch__side { flex: 1 1 130px; min-width: 0; }
.ing-nextmatch__kickoff { flex: 0 0 auto; }

/* Clubkenteken: initialen in een wit vlak. Vervang door een <img> zodra de
   club een logo aanlevert; dezelfde 64px doos werkt voor beide. */
.ing-crest {
  margin: 0 auto var(--ing-space-2);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--ing-ink);
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.02em;
}
.ing-crest img { width: 100%; height: 100%; object-fit: contain; }

.ing-nextmatch__club { margin: 0; font-family: var(--ing-font-display); font-weight: 700; font-size: 24px; line-height: 1.05; text-transform: uppercase; }
.ing-nextmatch__sub { margin: 2px 0 0; font-family: var(--ing-font-display); font-size: var(--ing-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.ing-nextmatch__time { margin: 0; font-family: var(--ing-font-display); font-weight: 700; font-size: clamp(3.25rem, 10vw, 5.25rem); line-height: 0.85; font-variant-numeric: tabular-nums; }
.ing-nextmatch__kickoff .ing-nextmatch__sub { margin-block-start: var(--ing-space-1); }

/* Vier feiten als strook: 1px hairlines uit de achtergrond, geen borders */
.ing-nextmatch__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: rgba(255, 255, 255, 0.16); }
.ing-fact { background: var(--ing-ink); padding: var(--ing-space-3) var(--ing-space-4); }
.ing-fact__k { margin: 0; font-family: var(--ing-font-display); font-weight: 600; font-size: 13px; letter-spacing: var(--ing-track); text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.ing-fact__v { margin: 3px 0 0; font-family: var(--ing-font-display); font-weight: 700; font-size: 21px; line-height: 1.1; text-transform: uppercase; }

.ing-nextmatch__foot { display: flex; gap: 2px; flex-wrap: wrap; padding: var(--ing-space-3) var(--ing-space-4); }
.ing-nextmatch__foot .ing-btn--primary { flex: 1 1 220px; }

/* ─── Jouw taken ──────────────────────────────────────────────── */

.ing-card__head-meta { margin-inline-start: auto; font-family: var(--ing-font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.ing-card__head { display: flex; align-items: center; gap: var(--ing-space-3); flex-wrap: wrap; }

.ing-slot { display: flex; align-items: center; gap: var(--ing-space-3); flex-wrap: wrap; padding: var(--ing-space-3) 0; border-block-end: 1px solid var(--ing-line); }
.ing-slot .ing-tag:first-child { min-width: 66px; text-align: center; }
.ing-slot__body { flex: 1 1 150px; min-width: 0; }
.ing-slot__task { display: block; font-family: var(--ing-font-display); font-weight: 700; font-size: 23px; line-height: 1.05; text-transform: uppercase; }
.ing-slot__match { display: block; font-size: 15px; color: var(--ing-ink-3); }

/* ─── Speelschema ─────────────────────────────────────────────── */

.ing-row--fixture { text-decoration: none; color: inherit; }
.ing-row__day { min-width: 52px; font-family: var(--ing-font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ing-ink-3); }
.ing-status--assigned { background: var(--ing-ink); color: #fff; }
.ing-status--open { background: var(--ing-red); color: #fff; }
.ing-status--free { background: transparent; color: var(--ing-ink-3); border: 2px solid var(--ing-line); }

/* ─── Heldendaden ─────────────────────────────────────────────── */

.ing-prefchips { display: flex; gap: var(--ing-space-2); flex-wrap: wrap; margin-block-end: var(--ing-space-4); }
.ing-tag--soft { background: rgba(255, 255, 255, 0.14); color: #fff; }
.ing-tag--ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.4); }

/* ─── Klassement met eigen regel gemarkeerd ───────────────────── */

.ing-podium-row__who { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ing-podium-row__pts { min-width: 34px; text-align: end; font-family: var(--ing-font-display); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; }
.ing-podium-row__track { flex: 0 1 70px; }
.ing-podium-row.is-me { box-shadow: inset 3px 0 0 var(--ing-red); padding-inline-start: var(--ing-space-2); }
.ing-podium-row.is-me .ing-podium-row__who { font-weight: 600; }
.ing-podium-row.is-me .ing-podium-row__bar { background: var(--ing-red); }
[dir="rtl"] .ing-podium-row.is-me { box-shadow: inset -3px 0 0 var(--ing-red); }

/* ─── Fly-in menu ─────────────────────────────────────────────── */

.ing-oudermenu { background: var(--ing-ink); color: #fff; width: min(400px, 88vw); }
.ing-oudermenu .ing-flyin__head { border-block-end: 1px solid rgba(255, 255, 255, 0.16); background: transparent; }
.ing-oudermenu__nav { flex: 1; overflow-y: auto; padding: var(--ing-space-3) 0; }

.ing-oudermenu__link {
  display: flex;
  align-items: center;
  gap: var(--ing-space-3);
  width: 100%;
  min-height: var(--ing-tap);
  padding: var(--ing-space-3) var(--ing-space-4);
  text-decoration: none;
  color: #fff;
}
.ing-oudermenu__link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.ing-oudermenu__link.is-active { background: rgba(255, 255, 255, 0.1); box-shadow: inset 4px 0 0 var(--ing-red); }
[dir="rtl"] .ing-oudermenu__link.is-active { box-shadow: inset -4px 0 0 var(--ing-red); }
.ing-oudermenu__num { min-width: 34px; font-family: var(--ing-font-display); font-weight: 700; font-size: 17px; color: var(--ing-red); font-variant-numeric: tabular-nums; }
.ing-oudermenu__label { flex: 1; font-family: var(--ing-font-display); font-weight: 700; font-size: 26px; line-height: 1; text-transform: uppercase; }

.ing-oudermenu__lang { padding: var(--ing-space-4); border-block-start: 1px solid rgba(255, 255, 255, 0.16); }
.ing-oudermenu__langlabel { margin: 0 0 var(--ing-space-2); font-family: var(--ing-font-display); font-weight: 600; font-size: var(--ing-text-xs); letter-spacing: var(--ing-track); text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }

/* ─── Voettekst ───────────────────────────────────────────────── */

.ing-footer { display: flex; gap: var(--ing-space-4); flex-wrap: wrap; padding: 0 var(--ing-pad) var(--ing-space-6); }
.ing-footer a { font-family: var(--ing-font-display); font-weight: 600; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Plugin-aanvullingen ---------- */
.ing-sheet-veil { position: fixed; inset: 0; z-index: 60; background: rgba(16, 16, 19, 0.5); }
.ing-flyin[hidden], .ing-sheet-veil[hidden] { display: none; }
.ing-langs { display: flex; gap: 2px; }
.ing-lang {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ing-tap);
  min-height: 38px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
}
.ing-lang.is-active { background: var(--ing-red); }