:root {
    --geel: #ffcb05;
    --blauw: #2a75bb;
    --donker: #1a1a2e;
    --groen: #2ecc71;
    --grijs: #ececec;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f4f4f9;
    color: var(--donker);
}

/* --- Login / registratie --- */
.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--geel), var(--blauw));
}
.auth-box {
    background: white;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 380px;
    text-align: center;
}
.auth-box h1 { margin: 0 0 0.5rem; }
.auth-box h2 { margin-top: 0; color: #555; font-size: 1.1rem; font-weight: 500; }
.auth-box form { display: flex; flex-direction: column; gap: 1rem; text-align: left; margin-top: 1.5rem; }
.auth-box label { font-size: 0.85rem; font-weight: 600; color: #444; }
.auth-box input {
    width: 100%; padding: 0.6rem; margin-top: 0.3rem;
    border: 1px solid #ccc; border-radius: 8px; font-size: 1rem;
}
.auth-box button {
    background: var(--blauw); color: white; border: none; padding: 0.75rem;
    border-radius: 8px; font-size: 1rem; cursor: pointer; margin-top: 0.5rem;
}
.auth-box button:hover { background: #1e5a92; }
.fout { color: #d9534f; font-size: 0.9rem; }

/* --- Topbar --- */
.topbar {
    background: var(--donker);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
}
.topbar h1 { margin: 0; font-size: 1.3rem; }
.topbar-right { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; }
.btn-klein {
    background: var(--geel); color: var(--donker); text-decoration: none;
    padding: 0.4rem 0.8rem; border-radius: 6px; font-weight: 600; font-size: 0.85rem;
}

/* --- Container --- */
.container { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }

.voortgang-box { margin-bottom: 1.5rem; }
.voortgang-tekst { font-weight: 600; margin-bottom: 0.4rem; }
.voortgang-balk { background: var(--grijs); border-radius: 20px; height: 14px; overflow: hidden; }
.voortgang-vulling { background: var(--groen); height: 100%; transition: width 0.3s; }

.filters {
    display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; align-items: center;
}
.filters input[type="text"], .filters select {
    padding: 0.5rem 0.8rem; border: 1px solid #ccc; border-radius: 8px; font-size: 0.95rem;
}
.checkbox-filter { font-size: 0.9rem; display: flex; align-items: center; gap: 0.4rem; }

/* --- Grid --- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}
.kaart {
    background: white; border-radius: 12px; padding: 0.8rem;
    text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: transform 0.15s, opacity 0.2s;
}
.kaart:hover { transform: translateY(-2px); }
.kaart img { width: 80px; height: 80px; object-fit: contain; }
.kaart.gevangen { background: #eafaf0; }
.kaart.gevangen img { opacity: 1; }
.kaart:not(.gevangen) img { opacity: 0.55; filter: grayscale(40%); }

.kaart-info { margin: 0.4rem 0; }
.dexnr { display: block; font-size: 0.75rem; color: #999; }
.naam { display: block; font-weight: 600; font-size: 0.9rem; }
.vorm { display: block; font-size: 0.75rem; color: #666; }

.kaart-acties { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.5rem; }
.vink { font-size: 0.8rem; display: flex; align-items: center; justify-content: center; gap: 0.3rem; cursor: pointer; }
.vink-shiny { color: #b8860b; }

.verborgen { display: none !important; }

/* --- Regio-badges (Kanto/Johto/Pikachu 100%) --- */
.regio-badges { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.regio-badge {
    font-size: 0.8rem; padding: 0.35rem 0.7rem; border-radius: 20px;
    background: white; border: 1px solid #e0e0e0; color: #555; font-weight: 600;
}
.regio-badge.compleet { border-color: var(--groen); color: var(--groen); background: #eafaf0; }

/* --- Zelf toevoegen --- */
.btn-geel {
    background: var(--geel); border: none; color: var(--donker); font-weight: 700;
    padding: 0.5rem 0.9rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem;
}
.toevoeg-form { display: flex; gap: 0.6rem; margin-bottom: 1.2rem; }
.toevoeg-form input {
    flex: 1; padding: 0.5rem 0.8rem; border: 1px solid #ccc; border-radius: 8px; font-size: 0.95rem;
}
.toevoeg-form button {
    background: var(--blauw); color: white; border: none; padding: 0.5rem 1rem;
    border-radius: 8px; cursor: pointer; font-weight: 600;
}

/* --- Kaart aanpassingen voor variant-stipjes & snel-vinkje --- */
.kaart { position: relative; }
.kaart-afbeelding-link { display: block; }
.verwijder-custom {
    display: block; margin: 0.2rem auto 0; background: none; border: none;
    color: #999; font-size: 0.7rem; text-decoration: underline; cursor: pointer;
}
.variant-stipjes { display: flex; gap: 4px; justify-content: center; margin-top: 0.5rem; }
.variant-stipjes .stip { width: 7px; height: 7px; border-radius: 50%; }

.kaart-acties { flex-direction: row; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 0.6rem; }
.check-normaal {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid #ddd;
    background: white; color: #999; font-size: 0.9rem; cursor: pointer;
}
.check-normaal.aan { border-color: var(--groen); background: #eafaf0; color: var(--groen); }
.btn-varianten {
    font-size: 0.72rem; font-family: ui-monospace, monospace; color: #777;
    border: 1px solid #ddd; border-radius: 8px; padding: 0 0.5rem; height: 30px;
    display: flex; align-items: center; text-decoration: none;
}
.btn-varianten:hover { border-color: var(--blauw); color: var(--blauw); }

/* --- Detailpagina (variant-checklist per Pokémon) --- */
.detail-container { display: flex; justify-content: center; padding-top: 2rem; }
.detail-kaart {
    background: white; border-radius: 16px; padding: 2rem; max-width: 380px; width: 100%;
    text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.dexnr-groot { font-family: ui-monospace, monospace; color: #999; font-size: 0.85rem; }
.detail-img { width: 130px; height: 130px; object-fit: contain; margin: 0.5rem auto; }
.detail-kaart h2 { margin: 0.3rem 0 0; }
.detail-vorm { color: #666; font-size: 0.9rem; margin: 0.2rem 0 1rem; }
.detail-uitleg { font-size: 0.85rem; color: #888; margin-bottom: 1rem; }

.variant-lijst { display: flex; flex-direction: column; gap: 0.6rem; }
.variant-optie {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem;
    border: 1px solid #ddd; border-radius: 10px; cursor: pointer; font-weight: 600;
    text-align: left; transition: background 0.15s, border-color 0.15s;
}
.variant-optie input { width: 18px; height: 18px; accent-color: var(--blauw); }
.variant-optie.actief { border-color: var(--kleur, var(--groen)); background: color-mix(in srgb, var(--kleur, var(--groen)) 12%, white); }