/* ============================================================
   COLOR SCHEME — placeholder, meant to be swapped for the exact
   Geelse Atletiekclub colors. Everything below only references
   these variables, so replacing the hex values here restyles the
   whole site. "Geel" (the town) means "yellow" in Dutch, and local
   clubs from Geel commonly run yellow/black kits, which is the
   starting guess used here — confirm/replace with the club's real
   values (e.g. from their logo or kit) before going live.
   ============================================================ */
:root{
  --accent: #F4B400;       /* primary brand color (placeholder: GAC yellow) */
  --accent-dark: #B8860B;
  --ink: #16181A;          /* near-black, headers/nav */
  --ink-soft: #4a4d52;
  --paper: #F7F6F2;        /* page background */
  --card: #ffffff;
  --line: #e3e0d6;
  --gold-bg: #fbf1da;  --gold: #a8791a;
  --silver-bg: #eef0f2; --silver: #5c6570;
  --bronze-bg: #f6e8dc; --bronze: #8a4a24;
  --danger: #b3261e; --danger-bg: #fbe9e7;
  --success: #1e7d32; --success-bg: #e8f5e9;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.stripe{
  height:8px;
  width:100%;
  background:var(--accent);
}

header{
  background:var(--ink);
  color:#f4f1e9;
  padding:1.6rem 1.5rem 1.3rem;
}
.header-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
}
.eyebrow{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 .3rem;
  font-weight:700;
}
h1{
  font-weight:700;
  font-size:clamp(1.7rem,4vw,2.5rem);
  margin:0;
  line-height:1.05;
}
nav.site-nav a{
  color:#e9e6da;
  text-decoration:none;
  font-size:.85rem;
  font-weight:600;
  margin-left:1.2rem;
  padding-bottom:2px;
  border-bottom:2px solid transparent;
}
nav.site-nav a:hover, nav.site-nav a.active{
  border-bottom-color:var(--accent);
}

main{
  max-width:1180px;
  margin:0 auto;
  padding:1.6rem 1.5rem 4rem;
}

.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:1.1rem 1.3rem;
  margin-bottom:1.4rem;
}

.filters{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:.85rem;
  align-items:end;
}
.field label{
  display:block;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-soft);
  margin-bottom:.35rem;
  font-weight:600;
}
select, input[type=text], input[type=email], input[type=date], textarea{
  width:100%;
  padding:.5rem .6rem;
  border:1px solid #cfc9b6;
  border-radius:6px;
  background:#fff;
  font-family:'Inter',sans-serif;
  font-size:.88rem;
  color:var(--ink);
}
select:focus, input:focus, textarea:focus{
  outline:2px solid var(--accent);
  outline-offset:1px;
}
optgroup{ font-weight:700; font-style:normal; color:var(--ink-soft); }

.checkbox-field{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding-bottom:.5rem;
}
.checkbox-field input{ width:auto; }
.checkbox-field label{
  margin:0;
  font-size:.85rem;
  text-transform:none;
  letter-spacing:0;
  font-weight:500;
  color:var(--ink);
}

button{
  padding:.5rem .9rem;
  border:1px solid var(--ink);
  background:var(--ink);
  color:#fff;
  border-radius:6px;
  font-size:.85rem;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}
button:hover{ background:#000; }
button.secondary{
  background:#fff;
  color:var(--ink);
}
button.secondary:hover{ background:var(--paper); }
button.accent{
  background:var(--accent);
  border-color:var(--accent-dark);
  color:#2a1e00;
}
button.accent:hover{ background:var(--accent-dark); color:#fff; }
button:disabled{ opacity:.5; cursor:not-allowed; }

.status-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:.7rem;
}
.status-text{ font-size:.85rem; color:var(--ink-soft); }
.status-text strong{ color:var(--ink); }

.table-wrap{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}
table{
  width:100%;
  border-collapse:collapse;
  font-size:.88rem;
}
thead th{
  text-align:left;
  background:#efe9d8;
  color:var(--ink);
  padding:.65rem .65rem;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
  border-bottom:2px solid var(--accent);
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
}
thead th:hover{ background:#e6dfc9; }
thead th .arrow{ display:inline-block; margin-left:3px; color:var(--accent-dark); font-size:.7em; width:.8em; }
tbody td{ padding:.58rem .65rem; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:#faf8f2; }

.result{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:.9rem; white-space:nowrap; }
.rank-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.6rem; height:1.6rem; border-radius:50%;
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:.8rem;
}
.rank-1{ background:var(--gold-bg); color:var(--gold); }
.rank-2{ background:var(--silver-bg); color:var(--silver); }
.rank-3{ background:var(--bronze-bg); color:var(--bronze); }

.cat-pill{
  display:inline-block; padding:.15rem .5rem; border-radius:4px;
  background:#f0efe9; font-family:'IBM Plex Mono',monospace;
  font-size:.76rem; font-weight:600; color:var(--ink-soft);
}
.date-approx{ color:var(--ink-soft); font-style:italic; cursor:help; }

.empty{ padding:3rem 1rem; text-align:center; color:var(--ink-soft); }

footer{
  max-width:1180px; margin:0 auto; padding:0 1.5rem 3rem;
  font-size:.78rem; color:var(--ink-soft);
}
footer a{ color:var(--ink-soft); }

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:1.4rem 1.6rem;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1rem;
}
.form-grid .field-full{ grid-column:1/-1; }
.hint{ font-size:.78rem; color:var(--ink-soft); margin-top:.3rem; }

.banner{
  padding:.9rem 1.1rem;
  border-radius:8px;
  font-size:.9rem;
  margin-bottom:1rem;
}
.banner.success{ background:var(--success-bg); color:var(--success); }
.banner.danger{ background:var(--danger-bg); color:var(--danger); }

.pending-item{
  border:1px solid var(--line);
  border-radius:8px;
  padding:1rem 1.2rem;
  margin-bottom:1rem;
}
.pending-item h3{ margin:0 0 .3rem; font-size:1rem; }
.pending-meta{ font-size:.82rem; color:var(--ink-soft); margin-bottom:.7rem; }
.rank-preview{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  padding:.7rem .9rem;
  font-size:.85rem;
  margin:.7rem 0;
}
.rank-preview .change-row{ display:flex; justify-content:space-between; padding:.15rem 0; }
.rank-preview .demoted{ color:var(--danger); }
.rank-preview .archived{ color:var(--danger); font-weight:600; }
.rank-preview .new-entry{ color:var(--success); font-weight:600; }
.rank-preview .top3-list{ margin-bottom:.3rem; }
.rank-preview .top3-row{ border-bottom:1px dashed var(--line); }
.rank-preview .top3-row:last-child{ border-bottom:none; }
.pending-actions{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }

.login-box{
  max-width:360px;
  margin:3rem auto;
}

@media (max-width: 640px){
  .table-wrap{ overflow-x:auto; }
  table{ min-width:820px; }
}