/* Beheer: voetbalveld als achtergrond, voetbalicoontjes in het menu. De inhoud staat op een wit vlak zodat alles leesbaar blijft. */
body.beheer, .login-wrap {
    --gras-1: #2f8f4e; --gras-2: #2a8247;
    background-color: var(--gras-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1400 900%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cg fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.55%22 stroke-width=%225%22%3E%3Crect x=%2260%22 y=%2260%22 width=%221280%22 height=%22780%22/%3E%3Cpath d=%22M700 60v780%22/%3E%3Ccircle cx=%22700%22 cy=%22450%22 r=%22110%22/%3E%3Crect x=%2260%22 y=%22270%22 width=%22190%22 height=%22360%22/%3E%3Crect x=%221150%22 y=%22270%22 width=%22190%22 height=%22360%22/%3E%3Crect x=%2260%22 y=%22360%22 width=%2270%22 height=%22180%22/%3E%3Crect x=%221270%22 y=%22360%22 width=%2270%22 height=%22180%22/%3E%3Cpath d=%22M250 380a110 110 0 0 1 0 140M1150 380a110 110 0 0 0 0 140%22/%3E%3C/g%3E%3Cg fill=%22%23fff%22 fill-opacity=%22.55%22%3E%3Ccircle cx=%22700%22 cy=%22450%22 r=%228%22/%3E%3Ccircle cx=%22190%22 cy=%22450%22 r=%226%22/%3E%3Ccircle cx=%221210%22 cy=%22450%22 r=%226%22/%3E%3C/g%3E%3C/svg%3E"),
        repeating-linear-gradient(90deg, var(--gras-1) 0 80px, var(--gras-2) 80px 160px);
    background-size: cover, auto;
    background-position: center, 0 0;
    background-attachment: fixed, fixed;
}
.login-wrap { background-color: var(--gras-1); }

/* Kop: donker met een groene lijn als de rand van het veld */
.beheer-kop { background: linear-gradient(180deg, #0b2a52, #123f7a); border-bottom: 4px solid #2f8f4e; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.beheer-kop .merk { gap: 8px; letter-spacing: .01em; }
.beheer-kop .merk span { font-weight: 800; }
.kop-bal { color: #8be0a6; flex: none; }
@media (prefers-reduced-motion: no-preference) { .beheer-kop .merk:hover .kop-bal { transform: rotate(90deg); } .kop-bal { transition: transform .5s; } }

/* Zijmenu met icoontjes */
.zijmenu { background: #fff; }
.zijmenu h2 { display: flex; align-items: center; gap: 8px; color: #1f6b3a; }
.zijmenu h2::after { content: ""; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, #cfe5d6 0 6px, transparent 6px 10px); }
.zijmenu a { gap: 12px; }
.zijmenu .menu-icoon { flex: none; color: var(--blauw); opacity: .85; }
.zijmenu a:hover { background: #eef7f1; }
.zijmenu a:hover .menu-icoon { color: #1f8a4c; opacity: 1; }
.zijmenu a.actief { background: #e3f3e9; border-left-color: #1f8a4c; color: var(--blauw-donker); }
.zijmenu a.actief .menu-icoon { color: #1f8a4c; opacity: 1; }

/* Inhoud op een wit vlak boven het veld */
.beheer-hoofd { padding: 14px 10px 24px; }
.beheer-inhoud { background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.22); border-top: 5px solid var(--blauw); max-width: 1200px; margin: 0 auto 0 0; }
.beheer-inhoud > h1:first-child { display: flex; align-items: center; gap: 10px; }
@media (min-width: 1024px) { .beheer-hoofd { padding: 22px 28px 40px; } .beheer-inhoud { padding: 26px 30px 40px; } }
.inlog-als-balk { position: relative; z-index: 80; }

/* Rechtsboven: profielfoto (of voetbal) en uitlogknop */
.beheer-gebruiker { display: flex; align-items: center; gap: 8px; opacity: 1; }
.gebruiker-profiel { display: flex; align-items: center; gap: 10px; color: #fff !important; text-decoration: none; font-weight: 700; font-size: .9rem; border-radius: 99px; padding: 2px 10px 2px 2px; }
.gebruiker-profiel:hover { background: rgba(255,255,255,.12); }
.gebruiker-naam { display: none; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; background: #fff; border: 2px solid #8be0a6; box-sizing: border-box; color: #0b2a52; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-bal { display: block; width: 100%; height: 100%; }
.uitlog-knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 12px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #fff !important; font-weight: 700; font-size: .9rem; text-decoration: none; }
.uitlog-knop:hover { background: #c0392b; border-color: #c0392b; }
.uitlog-knop span { display: none; }
@media (min-width: 700px) { .gebruiker-naam { display: inline; } .uitlog-knop span { display: inline; } .uitlog-knop { padding: 0 14px; } }
.profielfoto-rij { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.profielfoto-rij .avatar { border-color: var(--blauw); }
.profielfoto-rij > div { flex: 1; min-width: 220px; }

/* Bezoekers en inloggen */
.kaart-wereld { padding: 10px; }
.wereldkaart { display: block; width: 100%; height: auto; background: #e8f1fb; border-radius: 10px; }
.wereldkaart .land { fill: #cfd9e6; stroke: #fff; stroke-width: .5; cursor: pointer; transition: fill .15s; }
.wereldkaart .land:hover { stroke: var(--blauw-donker); stroke-width: 1; }
.wereldkaart .niv-1 { fill: #a9c7ec; } .wereldkaart .niv-2 { fill: #74a6e0; } .wereldkaart .niv-3 { fill: #3f82cf; } .wereldkaart .niv-4 { fill: #1b5fb4; } .wereldkaart .niv-5 { fill: #0b3a78; }
.live-punt { pointer-events: all; }
.live-kern { fill: #ff7a00; stroke: #fff; stroke-width: 1.4; }
.live-golf { fill: #ff7a00; opacity: .55; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) { .live-golf { animation: live-golf 1.8s ease-out infinite; } }
@keyframes live-golf { from { transform: scale(1); opacity: .6; } to { transform: scale(4.5); opacity: 0; } }
.kaart-onderschrift { margin: 8px 4px 4px; min-height: 1.4em; font-weight: 700; color: var(--blauw-donker); }
.kaart-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px; font-size: .8rem; color: var(--tekst-zacht); }
.kaart-legenda i { width: 22px; height: 12px; border-radius: 3px; display: inline-block; }
.kaart-legenda .niv-1 { background: #a9c7ec; } .kaart-legenda .niv-2 { background: #74a6e0; } .kaart-legenda .niv-3 { background: #3f82cf; } .kaart-legenda .niv-4 { background: #1b5fb4; } .kaart-legenda .niv-5 { background: #0b3a78; }
.legenda-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.live-stip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #ff7a00; margin-right: 8px; box-shadow: 0 0 0 3px rgba(255,122,0,.25); }
.legenda-live .live-stip { margin: 0; }
.dagstaven { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: 6px; height: 170px; }
.dagstaven li { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.staaf { display: block; width: 100%; max-width: 40px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #2f8f4e, #1f6b3a); min-height: 2px; }
.staaf-getal { font-size: .75rem; font-weight: 700; color: var(--blauw-donker); }
.staaf-dag { font-size: .7rem; color: var(--tekst-zacht); white-space: nowrap; }
.dagstaven.veel { gap: 2px; }
.dagstaven.veel .staaf-getal { display: none; }
.dagstaven.veel li:not(:nth-child(5n+1)) .staaf-dag { visibility: hidden; }
.apparaten { margin: 12px 0 0; }
.actieve-lijst { display: grid; gap: 8px; margin-bottom: 8px; }
.actieve-lijst li { display: flex; align-items: center; gap: 12px; }
.actieve-lijst small { display: block; }
.bron-regel { margin-top: 28px; }
.land-bol { fill: rgba(11,58,120,.22); stroke: #0b3a78; stroke-width: 1; pointer-events: none; }
.rij-lijst { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.rij-lijst li { display: grid; grid-template-columns: minmax(90px, 40%) 1fr auto; align-items: center; gap: 10px; min-height: 36px; border-bottom: 1px solid var(--vlak); }
.rij-naam { overflow-wrap: anywhere; font-weight: 600; }
.rij-balk { display: block; height: 10px; border-radius: 99px; background: var(--vlak); overflow: hidden; }
.rij-balk i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #2f8f4e, #1f6b3a); }
.rij-getal { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--blauw-donker); min-width: 2.2em; text-align: right; }
.beheer-inhoud h2 { margin-top: 30px; }
.beheer-inhoud h1 + p + nav + .kaarten, .beheer-inhoud .tabs + .kaarten { margin-top: 4px; }